1) हमने एक नई वेबसाइट क्यों बनाई और “थीम क्यों नहीं बदल पाए”

जब हमने पहली बार बदलाव की ज़रूरत को पहचाना, तो यह काम आसान लगा: "शीर्ष ब्लॉक को बदलें और कॉल टू एक्शन को ज़्यादा प्रभावी बनाएँ।" पहली नज़र में, यह एक त्वरित समाधान की तरह लग सकता है, लेकिन हमें जल्द ही एहसास हुआ कि इस छोटे से काम ने साइट की संरचना और डिज़ाइन के साथ बहुत बड़ी अंतर्निहित समस्याओं को उजागर किया। समस्या सिर्फ़ एक ब्लॉक की नहीं थी; यह साइट की पूरी वास्तुकला थी जिसे ओवरहाल की ज़रूरत थी।

हमारी वेबसाइट समय के साथ बनी थी, जिसमें अलग-अलग डिज़ाइन और लेआउट का उपयोग करके अलग-अलग पेज जोड़े गए थे, बिना किसी एकीकृत थीम या टेम्पलेट के। प्रत्येक पेज अपने डिज़ाइन में अद्वितीय था, जो रचनात्मक लग सकता है लेकिन एक महत्वपूर्ण समस्या को जन्म देता है: असंगति। अगर हम आगे बढ़ते हैं और साइट के बाकी हिस्से को वैसे ही रखते हुए सिर्फ़ शीर्ष ब्लॉक के लिए एक नया डिज़ाइन बनाते हैं, तो इसका मतलब होगा कि 700 से ज़्यादा पेज और पोस्ट पर उस ब्लॉक को मैन्युअल रूप से अपडेट करना। इससे भी बदतर, इस मैन्युअल प्रक्रिया को हर बार दोहराना होगा जब भी हम भविष्य में बदलाव करना चाहेंगे। सैकड़ों पेजों को खंगालने की अक्षमता की कल्पना करें, यह सुनिश्चित करते हुए कि हर पेज में नवीनतम अपडेट हों। यह जल्दी ही स्पष्ट हो गया कि पुरानी साइट के साथ काम करना जारी रखना टिकाऊ नहीं होगा।

प्रत्येक पृष्ठ को अपडेट करने की रसद से परे, हमें समग्र उपयोगकर्ता अनुभव पर विचार करना था। आज उपयोगकर्ता किसी वेबसाइट पर जाने पर सहज, सुसंगत अनुभव की अपेक्षा करते हैं। यदि वे किसी पृष्ठ को नीचे स्क्रॉल करते हैं और देखते हैं कि डिज़ाइन असंगत है - प्रत्येक ब्लॉक अलग-अलग शैलियों का उपयोग कर रहा है - तो यह एक असंगत और अव्यवसायिक प्रभाव पैदा करता है। इससे भी बदतर, जब कोई उपयोगकर्ता एक पृष्ठ से दूसरे पृष्ठ पर जाता है और देखता है कि लेआउट और डिज़ाइन पूरी तरह से अलग हैं, तो यह अव्यवस्था की भावना को मजबूत करता है।

असंगति लेआउट से परे तक फैली हुई थी। साइट पर कई छवियाँ पुरानी थीं, खराब स्टाइल की थीं, या यहाँ तक कि तंत्रिका नेटवर्क द्वारा अनुपयुक्त तरीके से बनाई गई थीं। ये छवियाँ आधुनिक डिज़ाइन मानकों के अनुरूप नहीं थीं, और उन्हें बदलना एक और कठिन काम था। खराब छवियों का उपयोग साइट की समग्र गुणवत्ता पर खराब प्रभाव डालता है, जिससे उपयोगकर्ताओं पर हमारे द्वारा पेश किए जा रहे उत्पाद या सेवा के बारे में नकारात्मक प्रभाव पड़ता है।

एलिमेंटर जैसे टूल का उपयोग करके साइट को व्यापक रूप से अपडेट करने का कोई सरल तरीका नहीं था। प्रत्येक पृष्ठ और ब्लॉक में अपनी स्वयं की इनलाइन शैलियाँ होती हैं, जिसका अर्थ है कि वैश्विक स्तर पर परिवर्तन नहीं किए जा सकते। यदि हम साइट की शैली को अपडेट करना चाहते हैं, तो हमें हर एक पृष्ठ पर जाना होगा और प्रत्येक ब्लॉक को मैन्युअल रूप से अपडेट करना होगा, जो समय लेने वाला और अक्षम होगा। इसे ध्यान में रखते हुए, यह स्पष्ट हो गया कि हमारा एकमात्र समाधान स्क्रैच से एक नई वेबसाइट बनाना था। यह हमें समान URL बनाए रखते हुए सभी सामग्री को स्थानांतरित करने की अनुमति देगा, लेकिन एक नए, सुसंगत और आसानी से अपडेट करने योग्य डिज़ाइन के साथ।

2) हमने एलिमेंटर का उपयोग न करने का निर्णय क्यों लिया

एलिमेंटर वर्डप्रेस के लिए सबसे लोकप्रिय पेज बिल्डरों में से एक है। सतह पर, यह एक बेहतरीन टूल की तरह लगता है जो त्वरित और आसान पेज निर्माण की अनुमति देता है। हालाँकि, इसके साथ बड़े पैमाने पर काम करने के बाद, हमें कई सीमाएँ मिलीं, जिसके कारण हमने एलिमेंटर से दूर जाने और इसके बजाय कस्टम-निर्मित वेबसाइट चुनने का फैसला किया।

एलिमेंटर की सीमाएँ और चुनौतियाँ:

1. बग और गड़बड़ियाँ : जबकि एलिमेंटर कई उपयोगी सुविधाएँ प्रदान करता है, यह अपनी तकनीकी समस्याओं के बिना नहीं है। उदाहरण के लिए, जब हमने किसी पृष्ठ की प्रतिलिपि बनाई और उसे संपादित करने का प्रयास किया, तो नया पृष्ठ अक्सर मूल से अलग दिखता था, यहाँ तक कि कोई भी बदलाव करने से पहले भी। तत्वों को प्रदर्शित करने के तरीके में अक्सर बग होते थे, जैसे कि "अधिकतम छवि चौड़ाई" संपत्ति सही ढंग से काम नहीं कर रही थी। इन गड़बड़ियों ने पृष्ठों में एक समान स्टाइल सुनिश्चित करना मुश्किल बना दिया।
2. बहुत ज़्यादा क्रिएटिव स्वतंत्रता, असंगति की ओर ले जाती है : एलिमेंटर के मुख्य विक्रय बिंदुओं में से एक सब कुछ कस्टमाइज़ करने की क्षमता है। हालाँकि, यह लचीलापन एक दोधारी तलवार हो सकती है, खासकर जब साइट पर कई संपादक काम कर रहे हों। गैर-पेशेवर लोगों के लिए अनजाने में असंगत डिज़ाइन वाले पेज बनाना आसान है। उदाहरण के लिए, हमने संपादकों के गुलाबी बटन पर गुलाबी टेक्स्ट का उपयोग करने या पृष्ठभूमि में उड़ते नारंगी त्रिकोण जोड़ने के उदाहरण देखे, जिसके परिणामस्वरूप एक अव्यवस्थित और भ्रमित करने वाला डिज़ाइन हुआ। एक सख्त डिज़ाइन सिस्टम के बिना, एक सुसंगत दृश्य पहचान बनाए रखना असंभव हो गया।
3. उन्नत कार्यक्षमता के लिए सीमित अनुकूलन : जबकि एलिमेंटर टेक्स्ट और छवियों के साथ बुनियादी पेज निर्माण में उत्कृष्टता प्राप्त करता है, यह तब और अधिक चुनौतीपूर्ण हो जाता है जब आपको कस्टम कार्यक्षमता जोड़ने की आवश्यकता होती है। हमने अक्सर खुद को बिल्ट-इन ब्लॉक तक सीमित पाया, जिन्हें अधिक जटिल सुविधाओं के लिए अनुकूलित करना मुश्किल था। जैसे-जैसे हमारी ज़रूरतें बुनियादी लेआउट से आगे बढ़ीं, एलिमेंटर की सीमाएँ तेज़ी से स्पष्ट होती गईं।
4. फूला हुआ कोड और प्रदर्शन संबंधी समस्याएं : एलिमेंटर के पेज बनाने का तरीका एलिमेंट्स की अत्यधिक नेस्टिंग का परिचय देता है। उदाहरण के लिए, एलिमेंटर स्वचालित रूप से कई पेज बनाता है
   अन्य कंटेनरों के भीतर

   तत्व, जिनमें से प्रत्येक की अपनी शैली होती है। इसके परिणामस्वरूप एक फूला हुआ ढांचा बनता है जो लोडिंग गति, पृष्ठ प्रदर्शन और अंततः वेबसाइट की SEO रैंकिंग को नकारात्मक रूप से प्रभावित करता है। जब हमने गति परीक्षण किए, तो परिणाम लगातार खराब थे, और एलिमेंटर द्वारा उत्पन्न भारी कोड काफी हद तक इसके लिए जिम्मेदार था।
5. कोई A/B परीक्षण क्षमता नहीं : आज के डिजिटल परिदृश्य में, उपयोगकर्ता अनुभव को अनुकूलित करने के लिए A/B परीक्षण आवश्यक है। हालाँकि, Elementor अलग-अलग उपयोगकर्ताओं को साइट के अलग-अलग संस्करण दिखाने की क्षमता प्रदान नहीं करता है। हर कोई एक ही साइट देखता है, जो रंग, बटन आकार और पृष्ठभूमि इमेजरी जैसे डिज़ाइन तत्वों का परीक्षण करने और उन्हें ठीक करने की हमारी क्षमता को सीमित करता है। इस कार्यक्षमता के बिना, हम वास्तविक उपयोगकर्ता व्यवहार के आधार पर साइट को अनुकूलित नहीं कर सकते थे।
6. डेटाबेस ब्लोट : शायद एलिमेंटर की सबसे महत्वपूर्ण कमियों में से एक यह है कि यह शैलियों और सामग्री को कैसे संभालता है। एलिमेंटर डेटाबेस में सामग्री के साथ मिश्रित शैलियों, नेस्टेड संरचनाओं और अन्य अनावश्यक टैग को संग्रहीत करता है। यह एक फूला हुआ डेटाबेस बनाता है जो एलिमेंटर को अक्षम या अनइंस्टॉल करने पर भी साफ नहीं होता है। नतीजतन, एक नई थीम या फ़्रेमवर्क पर स्विच करने से समस्या हल नहीं होती है - वे शैलियाँ पृष्ठों में अंतर्निहित रहती हैं, जिससे समस्याएँ पैदा होती रहती हैं।

इन सभी चुनौतियों को ध्यान में रखते हुए, यह स्पष्ट हो गया कि हमें एक अधिक मजबूत समाधान की आवश्यकता है। हमने एलिमेंटर के बिना एक नई, स्वतंत्र वेबसाइट बनाने का निर्णय लिया, और अधिक टिकाऊ और लचीले दृष्टिकोण का विकल्प चुना।

3) नई साइट पर पेज कैसे बनाएं

नई साइट को शुरू से बनाने से हमें पेज बनाने के लिए एक साफ-सुथरी, सुव्यवस्थित प्रक्रिया स्थापित करने का अवसर मिला। नई प्रणाली में, पेज बनाना सीधा है:

1. वर्डप्रेस एडमिन पैनल में लॉग इन करें और पेज -> नया पेज जोड़ें पर क्लिक करें।
2. आपको मानक वर्डप्रेस संपादक दिखाई देगा, जहां आप पाठ लिख या पेस्ट कर सकते हैं, लिंक जोड़ सकते हैं और चित्र अपलोड कर सकते हैं।

यह प्रक्रिया सरल लेकिन लचीली है। एलिमेंटर के जटिल ब्लॉक सिस्टम पर निर्भर होने के बजाय, वर्डप्रेस में कंटेंट एडिटर बहुत साफ-सुथरा है, जिससे त्वरित अपडेट और आसान अनुकूलन की सुविधा मिलती है। एडिटर के नीचे, एडवांस्ड कस्टम फील्ड्स (ACF) के लिए सेटिंग्स हैं, जो पूरी साइट पर एकरूपता बनाए रखने के लिए पहले से ही कॉन्फ़िगर की गई हैं।

ACF हमें लचीले कंटेंट सेक्शन बनाने की अनुमति देता है, जिसमें कंटेंट 1…कंटेंट 15 जैसे ब्लॉक होते हैं, जहाँ आप आसानी से पेज के प्रत्येक सेक्शन के लिए शीर्षक, टेक्स्ट, इमेज और बटन लेबल सेट कर सकते हैं। ये ब्लॉक स्वचालित रूप से इमेज और टेक्स्ट की स्थिति को बदलते हैं, जिससे यह सुनिश्चित होता है कि लेआउट मैन्युअल समायोजन की आवश्यकता के बिना दृश्यमान रूप से आकर्षक बना रहे।

छवियों के लिए, हमने एक रंग-मिलान प्रणाली लागू की है जो साइट के मुख्य रंगों में स्वचालित रूप से एक ग्रेडिएंट लागू करती है। यह सुनिश्चित करता है कि सभी छवियां समग्र सौंदर्य के साथ संरेखित हों। लोगो या स्क्रीनशॉट के लिए जहां रंगों को बरकरार रखने की आवश्यकता होती है, वहां एक "रंग रखें" विकल्प होता है जो ग्रेडिएंट को ओवरराइड करता है।

यह प्रणाली सभी पृष्ठों पर डिज़ाइन की एकरूपता बनाए रखते हुए सामग्री प्रबंधन को सरल बनाती है।

4) नई पोस्ट कैसे बनाएं

नई साइट पर पोस्ट बनाने की प्रक्रिया पेज बनाने जैसी ही सरल है, लेकिन इसमें कुछ मुख्य अंतर हैं:

• पोस्टों के यूआरएल में ../blog/.. शामिल होता है, जो उन्हें पेजों से अलग करता है।
• दाएं साइडबार में एक ब्लॉक स्वचालित रूप से तीन नवीनतम लेख प्रदर्शित करता है, जिससे ब्लॉग को गतिशील और आकर्षक बनाए रखने में मदद मिलती है।

सभी पोस्ट के लिए टेम्पलेट फ़ाइल template-parts/content/content-single.php में स्थित है, जो प्रत्येक ब्लॉग पोस्ट की संरचना और लेआउट को संभालता है। यह सुसंगत टेम्पलेट आसान अपडेट की अनुमति देता है और यह सुनिश्चित करता है कि सभी पोस्ट समान डिज़ाइन दिशानिर्देशों का पालन करें।

5) उन्नत कस्टम फ़ील्ड (ACF)

ACF हमारी नई वेबसाइट के विकास का एक अनिवार्य हिस्सा रहा है। यह हमें कस्टम फ़ील्ड बनाने की अनुमति देता है जिन्हें वर्डप्रेस एडमिन पैनल के माध्यम से आसानी से प्रबंधित किया जा सकता है। content_1 जैसे फ़ील्ड PHP कोड में संदर्भित हैं, जिससे हमें प्रत्येक पृष्ठ और पोस्ट के लिए सही सामग्री को गतिशील रूप से खींचने की अनुमति मिलती है।

यह लचीलापन यह सुनिश्चित करने के लिए महत्वपूर्ण है कि हम साइट को कुशलतापूर्वक प्रबंधित और अद्यतन कर सकें, साथ ही आवश्यकता पड़ने पर अनुकूलन के लिए भी जगह उपलब्ध करा सकें।

6) ए/बी परीक्षण

नई साइट के साथ हमने जो सबसे महत्वपूर्ण सुधार किए हैं, उनमें से एक A/B परीक्षण का कार्यान्वयन था। A/B परीक्षण हमें साइट के दो संस्करणों की तुलना करने की अनुमति देता है ताकि यह देखा जा सके कि उपयोगकर्ताओं के साथ कौन सा बेहतर प्रदर्शन करता है। इसमें अलग-अलग रंग, बटन के आकार, पृष्ठभूमि या यहां तक कि लेआउट का परीक्षण करना शामिल हो सकता है।

हमने URL में GET पैरामीटर का उपयोग करके इस कार्यक्षमता को लागू किया है। उदाहरण के लिए, दो समान विज्ञापन अभियान बनाए जा सकते हैं, लेकिन अलग-अलग URL के साथ:

• https://www.conveythis.com/?param=1

• https://www.conveythis.com/?param=2

जब उपयोगकर्ता इन लिंक पर क्लिक करते हैं, तो पैरामीटर कुकी में सहेजा जाता है। पैरामीटर के मान के आधार पर, साइट पृष्ठ के विभिन्न संस्करण दिखाएगी, जैसे कि अलग-अलग बटन रंग या पृष्ठभूमि चित्र। इससे हमें उपयोगकर्ता की प्राथमिकताओं और व्यवहारों पर मूल्यवान डेटा एकत्र करने की अनुमति मिलती है।

सभी घटनाओं को लॉग इन किया जाता है.सीएसवीफ़ाइल के साथ-साथ MySQL डेटाबेस में भी, जिससे हमें डेटा का विश्लेषण करने और साइट में सुधार के बारे में निर्णय लेने में मदद मिलेगी।

7) फ़ंक्शन.php फ़ाइल

8) SEO और साइट स्पीड को संभालना

वेबसाइट ओवरहाल के दौरान एक प्रमुख फोकस SEO और समग्र साइट प्रदर्शन में सुधार करना था। एलिमेंटर का उपयोग करके बनाई गई मूल साइट में धीमी लोडिंग समय और फूले हुए कोड और अनऑप्टिमाइज़्ड इमेज के कारण सबऑप्टिमाइज़्ड SEO प्रथाओं की समस्याएँ थीं।

एसईओ में सुधार

यह सुनिश्चित करने के लिए कि हमारी नई साइट SEO-अनुकूल हो, हमने शुरू से ही कई सर्वोत्तम प्रथाओं को लागू किया:

• अर्थपूर्ण HTML : हमने हेडर टैग के उचित उपयोग के साथ साइट के HTML को सावधानीपूर्वक संरचित किया है (
  ,
  , आदि), यह सुनिश्चित करना कि खोज इंजन आसानी से सामग्री पदानुक्रम को पार्स और समझ सकें। यह SEO रैंकिंग और पहुँच दोनों के लिए विशेष रूप से महत्वपूर्ण है।
• मेटा टैग और ओपन ग्राफ डेटा : हमने सोशल शेयरिंग के लिए मेटा टाइटल, विवरण और ओपन ग्राफ डेटा को संभालने के लिए योस्ट एसईओ प्लगइन का लाभ उठाया। योस्ट का उपयोग करके, हमने सुनिश्चित किया कि प्रत्येक पृष्ठ और पोस्ट में अनुकूलित मेटाडेटा था, जो खोज इंजन दृश्यता और सोशल मीडिया प्लेटफ़ॉर्म से क्लिक-थ्रू दरों के लिए महत्वपूर्ण है।
• स्कीमा मार्कअप : फ़ंक्शन.php फ़ाइल का उपयोग करके, हमने संरचित डेटा के लिए कस्टम स्कीमा मार्कअप जोड़ा, जिससे खोज इंजन हमारे पृष्ठों को खोज परिणामों में प्रदर्शित करने के तरीके में सुधार हुआ। उदाहरण के लिए, हमने लेखों, केस स्टडीज़ और उत्पादों के लिए स्कीमा शामिल की, जिससे खोज इंजनों को हमारी सामग्री को बेहतर ढंग से वर्गीकृत करने में मदद मिली।

फ़ंक्शन add_schema_markup() {
प्रतिध्वनि '
  {
"@context": "http://schema.org",
"@type": "संगठन",
"नाम": "ConveyThis",
"url": "https://www.conveythis.com",
"लोगो": "https://www.conveythis.com/logo.png",
"sameAs": [
"https://www.facebook.com/conveythis",
"https://twitter.com/conveythis"
]
}
';
}
add_action( 'wp_head', 'add_schema_markup' );


साइट गति अनुकूलन

प्रदर्शन न केवल उपयोगकर्ता अनुभव के लिए बल्कि SEO रैंकिंग के लिए भी एक महत्वपूर्ण कारक है। हमने साइट की गति को बेहतर बनाने के लिए कई कदम उठाए:

• छवि अनुकूलन : हमने WebP जैसे आधुनिक छवि प्रारूपों का उपयोग किया, जो PNG और JPEG जैसे पारंपरिक प्रारूपों की तुलना में बेहतर संपीड़न दर प्रदान करते हैं। सभी छवियों को उपयोगकर्ता के स्क्रीन रिज़ॉल्यूशन के आधार पर उचित आकार में प्रस्तुत किया गया, जिससे मोबाइल डिवाइस पर भी तेज़ लोड समय सुनिश्चित हुआ।
• आलसी लोडिंग : छवियों के लिए आलसी लोडिंग को लागू करके, हमने सुनिश्चित किया कि केवल उपयोगकर्ता की स्क्रीन पर दिखाई देने वाली छवियां ही शुरू में लोड की गईं। उपयोगकर्ता द्वारा स्क्रॉल किए जाने पर अतिरिक्त छवियां लोड होंगी, जिससे आरंभिक पृष्ठ लोड समय कम हो जाएगा।
• कैशिंग और मिनिमाइजेशन : हमने HTML, CSS और JavaScript फ़ाइलों के कैशिंग, मिनिमाइजेशन और कम्प्रेशन के लिए WP Rocket का इस्तेमाल किया। WP Rocket ने हमें समग्र फ़ाइल आकार को कम करके और बार-बार आने वाले विज़िटर को पृष्ठों के स्थिर कैश्ड संस्करण प्रदान करके तेज़ लोड समय प्राप्त करने में मदद की।

9) डेटाबेस अनुकूलन और सफाई

एलिमेंटर की ब्लोट और अक्षम डेटाबेस संरचना के कारण पुरानी वेबसाइट पर काफी मात्रा में "जंक" डेटा जमा हो गया था। यह सुनिश्चित करने के लिए कि नई साइट सुचारू रूप से चले, हमने गहन डेटाबेस क्लीनअप और ऑप्टिमाइज़ेशन किया।

• पुराना एलिमेंटर डेटा हटाना

जैसा कि पहले बताया गया है, एलिमेंटर को निष्क्रिय करने के बाद भी, इसकी शैलियाँ और सेटिंग्स अभी भी डेटाबेस में एम्बेडेड थीं। हमने इस अतिरिक्त डेटा को हटाने और डेटाबेस को साफ करने के लिए कस्टम क्वेरी का उपयोग किया। इसके अतिरिक्त, हमने समय के साथ जमा हुई किसी भी अप्रयुक्त मीडिया फ़ाइल, पोस्ट रिवीजन और एक्सपायर ट्रांज़िएंट को हटा दिया।

• डेटाबेस अनुक्रमण

हमने अक्सर पूछे जाने वाले कॉलम में इंडेक्स जोड़कर डेटाबेस को भी अनुकूलित किया, जिससे यह सुनिश्चित हुआ कि डेटाबेस क्वेरीज़ तेज़ और अधिक कुशल थीं। उदाहरण के लिए, इंडेक्स को जोड़नापोस्ट करने की तारीखकॉलम ने हाल की पोस्टों से संबंधित प्रश्नों की गति बढ़ा दी, जिससे हमारे ब्लॉग पृष्ठों का प्रदर्शन बेहतर हो गया।

निष्कर्ष

नई वेबसाइट को स्क्रैच से बनाने का निर्णय पुरानी साइट की सीमाओं और अक्षमताओं से प्रेरित था। डिज़ाइन की असंगतियों, फूली हुई शैलियों और एलिमेंटर के कारण होने वाली प्रदर्शन समस्याओं के कारण केवल थीम बदलना एक व्यवहार्य विकल्प नहीं था। कस्टम डेवलपमेंट और एडवांस्ड कस्टम फ़ील्ड के साथ एक नई साइट बनाकर, हमने एक अधिक कुशल, सुसंगत और पेशेवर वेबसाइट हासिल की जो सुव्यवस्थित अपडेट और ए/बी परीक्षण कार्यक्षमता को सक्षम करते हुए उपयोगकर्ता अनुभव को बढ़ाती है। यह नई साइट भविष्य के विकास और सुधारों के लिए एक ठोस आधार प्रदान करती है।