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

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

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

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

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

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

2) हमने इसका उपयोग न करने का निर्णय क्यों लिया Elementor

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

Elementor’s सीमाएँ और चुनौतियाँ:

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

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

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

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

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

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

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

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 और साइट स्पीड को संभालना

वेबसाइट ओवरहाल के दौरान मुख्य ध्यान एसईओ और समग्र साइट प्रदर्शन में सुधार पर था। Elementor का उपयोग करके बनाई गई मूल साइट में फूले हुए कोड और गैर-अनुकूलित छवियों के कारण धीमी लोडिंग समय और उप-इष्टतम एसईओ प्रथाओं की समस्याएं थीं।

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

यह सुनिश्चित करने के लिए कि हमारी नई साइट 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",
"के समान": [
"https://www.facebook.com/conveythis",
"https://twitter.com/conveythis"
]
}
';
}
add_action( 'wp_head', 'add_schema_markup' );


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

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

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

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

पुरानी वेबसाइट ने “1”s ब्लोट और अकुशल डेटाबेस संरचना के कारण महत्वपूर्ण मात्रा में 《जंक》’ डेटा जमा कर लिया था। यह सुनिश्चित करने के लिए कि नई साइट सुचारू रूप से चले, हमने डेटाबेस की गहन सफाई और अनुकूलन किया।

• पुराना Elementor डेटा हटाना

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

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

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

निष्कर्ष

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