अपनी वेबसाइट को मोबाइल-फ्रेंडली बनाएं

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

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

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

यह दृष्टिकोण सुनिश्चित करता है कि आपकी साइट स्थिर और बनाए रखने में आसान रहे। आप एक परिवर्तन करते हैं और यह हर जगह काम करता है।

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

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

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

अपनी साइट का पूर्वावलोकन करने के लिए इन चरणों का पालन करें:

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

इन सुझावों का पालन करें ताकि आपकी सामग्री सभी स्क्रीन आकारों पर अच्छी तरह से प्रदर्शित हो।

यदि चित्र में पाठ डिज़ाइन किया गया है, तो छोटे स्क्रीन पर उस पाठ को काटा जा सकता है, जैसे इस उदाहरण में:

चित्र में डिज़ाइन किया गया पाठ उत्तरदायी नहीं है—यह विभिन्न स्क्रीन आकारों में फिट नहीं हो सकता। इसके बजाय, कवरेज ब्लॉक का उपयोग करके चित्र पर पाठ जोड़ें। इससे पाठ उत्तरदायी हो जाता है ताकि यह मोबाइल उपकरणों पर स्वचालित रूप से समायोजित हो जाए:

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

वर्डप्रेस में मोबाइल उपकरणों पर आपकी साइट कैसे दिखाई देती है, इसे अनुकूलित करने के लिए अंतर्निहित सुविधाएँ शामिल हैं। अनुकूलन विकल्पों में शामिल हैं:

• मोबाइल पर आपका मेनू कैसे प्रदर्शित होता है, इसे बदलें।
• मोबाइल पर सामग्री को लंबवत रूप से स्टैक करें।
• छोटे स्क्रीन पर बटन और मेनू को लपेटने की अनुमति दें।
• मोबाइल स्क्रीन के लिए पाठ आकार को समायोजित करें।
• मोबाइल या डेस्कटॉप पर विशिष्ट सामग्री को छिपाएँ।

इन सेटिंग्स को संपादित करना कैसे सीखें, हमारे गाइड पर जाएँ अपने साइट के मोबाइल संस्करण को संपादित करने के लिए।

AMP (त्वरित मोबाइल पृष्ठ) एक ऐसा ढांचा है जो तेज़-लोडिंग मोबाइल पृष्ठ बनाता है। आप AMP प्लगइन को स्थापित करके अपने साइट पर AMP जोड़ सकते हैं। 13 जून 2022 से पहले बनाए गए प्लगइन-सक्षम वर्डप्रेस.com साइटों के लिए, AMP प्लगइन डिफ़ॉल्ट रूप से स्थापित था।

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

404 त्रुटियों से बचने के लिए एक पुनर्निर्देशन प्लगइन का उपयोग करके रीडायरेक्ट सेट करें। आपको /(.*)\/amp के समान Regex अभिव्यक्ति के साथ 301 रीडायरेक्ट बनाना होगा। सेटअप निर्देशों के लिए अपने पुनर्निर्देशन प्लगइन के दस्तावेज़ीकरण से परामर्श करें।