WordPress mobile friendly कैसे बनाएँ: थीम से लेकर टेस्टिंग तक

जो WordPress साइटें मोबाइल फ़्रेंडली नहीं हैं, उनमें ज़्यादातर तीन में से एक वजह होती है: पुरानी थीम जो कभी रिस्पॉन्सिव थी ही नहीं, पेज बिल्डर या ब्लॉक की सेटिंग्स जो मोबाइल को अनदेखा करती हैं, या तय चौड़ाई वाली custom CSS। इन्हें इसी क्रम में ठीक करें: पक्का करें कि थीम रिस्पॉन्सिव है, एडिटर या बिल्डर में मोबाइल सेटिंग्स ठीक करें, फिर custom कोड और प्लगइन साफ़ करें। आगे बढ़ने से पहले हर स्टेप को फ़ोन के साइज़ वाले व्यू में जाँचें।

स्टेप 1: देखें कि आपकी थीम रिस्पॉन्सिव है या नहीं

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

दो जल्दी वाली जाँचें:

• पेज का सोर्स देखें और name="viewport" खोजें। रिस्पॉन्सिव थीम <head> में viewport meta tag डालती है। अगर यह नहीं है, तो थीम मोबाइल डिज़ाइन के दौर से पहले की है।
• Appearance > Themes में थीम की उम्र और अपडेट देखें। जो थीम कई साल से अपडेट नहीं हुई, वह मोबाइल लेआउट के अलावा भी जोखिम है।

अगर थीम रिस्पॉन्सिव नहीं है, तो उसे पैच करने से ज़्यादा सस्ता आम तौर पर थीम बदलना होता है। Twenty Twenty-Five जैसी मौजूदा डिफ़ॉल्ट ब्लॉक थीम और ज़्यादातर सक्रिय रूप से संभाली जा रही थीम शुरू से ही रिस्पॉन्सिव होती हैं। चालू करने से पहले नई थीम को Live Preview में आज़माएँ।

स्टेप 2: एडिटर का मोबाइल प्रीव्यू इस्तेमाल करें

WordPress में डिवाइस प्रीव्यू पहले से मौजूद हैं:

• ब्लॉक एडिटर और Site Editor में ऊपर के टूलबार का प्रीव्यू कंट्रोल Desktop, Tablet और Mobile के बीच बदलता है।
• क्लासिक थीम के Customizer में साइडबार के नीचे डिवाइस बटन यही काम करते हैं।

ये प्रीव्यू कैनवस का साइज़ बदलते हैं, जो एडिट करते समय लेआउट की समस्याएँ पकड़ने के लिए अच्छा है। लेकिन ये मोबाइल user agent नहीं भेजते, इसलिए बाद में लाइव पेज को सही मोबाइल व्यू में ज़रूर जाँचें।

स्टेप 3: छोटी स्क्रीन के लिए ब्लॉक लेआउट ठीक करें

ब्लॉक एडिटर की आम समस्याएँ और उनके हल:

• कॉलम जो ऊपर-नीचे होने के बजाय दब जाते हैं। Columns ब्लॉक चुनें और पक्का करें कि Stack on mobile चालू है।
• तय चौड़ाई और ऊँचाई। Image, Cover और Group ब्लॉक में तय पिक्सेल साइज़ हो सकते हैं। तय ऊँचाई की जगह प्रतिशत वाली चौड़ाई और न्यूनतम ऊँचाई रखें, ताकि पतली स्क्रीन पर टेक्स्ट कटे नहीं।
• बड़े फ़ॉन्ट साइज़। 72 px की हेडिंग डेस्कटॉप पर अच्छी लगती है, लेकिन फ़ोन पर बाहर निकल जाती है। जहाँ उपलब्ध हों, थीम के fluid typography प्रीसेट इस्तेमाल करें, जो स्क्रीन के साथ बदलते हैं।
• चौड़ी टेबल। बहुत कॉलम वाली टेबल फ़ोन से बाहर निकल जाती हैं। उन्हें छोटा रखें, या उन्हें अपने container के अंदर हॉरिज़ॉन्टल स्क्रॉल होने दें।

स्टेप 4: पेज बिल्डर की मोबाइल सेटिंग्स जाँचें

अगर आप Elementor, Divi या Beaver Builder जैसा पेज बिल्डर इस्तेमाल करते हैं, तो ज़्यादातर मोबाइल समस्याएँ उन सेटिंग्स से आती हैं जो सिर्फ़ डेस्कटॉप साइज़ पर लगाई गई हैं। बिल्डर में एक responsive मोड होता है, जिसमें spacing, फ़ॉन्ट साइज़, कॉलम की चौड़ाई और दिखने-छिपने के लिए मोबाइल और टैबलेट की अलग वैल्यू होती हैं।

1. बिल्डर को उसके मोबाइल व्यू में बदलें।
2. पिक्सेल में सेट की गई बड़ी padding और margin कम करें।
3. मोबाइल के लिए हेडिंग का साइज़ ठीक करें।
4. कॉलम ऊपर-नीचे होने पर उनका क्रम देखें; अगर इमेज उस हेडिंग से पहले आ रही है जिसे वह समझाती है, तो क्रम उलट दें।
5. ज़रूरी कंटेंट को मोबाइल पर छिपाने से बचें। Google मोबाइल वर्शन इंडेक्स करता है, इसलिए छिपा टेक्स्ट होने न होने के बराबर है।

बिल्डर अपने breakpoints भी तय करते हैं (Elementor में डिफ़ॉल्ट रूप से मोबाइल के लिए 767 px और टैबलेट के लिए 1024 px हैं, और आप और जोड़ सकते हैं)। पक्का करें कि custom CSS भी यही चौड़ाइयाँ इस्तेमाल करे। चौड़ाई चुनने के बारे में ज़्यादा: रिस्पॉन्सिव breakpoints।

स्टेप 5: मेन्यू ठीक करें

मोबाइल पर नेविगेशन सिमटकर एक मेन्यू बटन बन जाना चाहिए। ब्लॉक थीम में यह Navigation ब्लॉक की overlay सेटिंग से होता है (इसे Mobile या Always पर रखें)। क्लासिक थीम में यह थीम ख़ुद संभालती है; अगर नहीं संभालती, तो यह थीम बदलने का एक और संकेत है। मोबाइल मेन्यू छोटा रखें और जाँचें कि सब-मेन्यू टैप से खुलते हैं।

स्टेप 6: इमेज और स्पीड

WordPress यहाँ पहले से बहुत कुछ करता है: हर अपलोड के कई साइज़ बनाता है और srcset जोड़ता है ताकि फ़ोन को छोटी फ़ाइलें मिलें, और डिफ़ॉल्ट रूप से इमेज को lazy-load करता है। आप इसकी मदद ऐसे कर सकते हैं:

• इमेज को उससे बड़ा अपलोड न करें जितनी बड़ी वह कभी दिखेगी
• WebP या AVIF में बदलें (हाल के WordPress वर्शन में सीधे सपोर्ट है, या किसी इमेज प्लगइन से)
• कैशिंग प्लगइन या होस्ट के लेवल पर कैशिंग इस्तेमाल करें
• जो प्लगइन इस्तेमाल नहीं करते, उन्हें हटाएँ; हर प्लगइन हर पेज पर स्क्रिप्ट जोड़ सकता है

नतीजे को मोबाइल पेज स्पीड टेस्ट गाइड के तरीकों से मापें।

स्टेप 7: custom CSS और प्लगइन के टकराव ढूँढें

अगर साइट अब भी साइड में स्क्रॉल होती है, तो वह एलिमेंट ढूँढें जो ज़्यादा चौड़ा है। Chrome DevTools के Console में यह चलाएँ, यह स्क्रीन से चौड़े एलिमेंट की लिस्ट देगा:

[...document.querySelectorAll('*')].filter(el => el.scrollWidth > document.documentElement.clientWidth)

आम तौर पर दोषी होते हैं Appearance > Customize > Additional CSS में width: 1200px वाले नियम, तय साइज़ वाले embed किए गए विजेट (पुराने सोशल फ़ीड, मैप, फ़ॉर्म) और inline चौड़ाई सेट करने वाले स्लाइडर।

स्टेप 8: लाइव साइट को ठीक से टेस्ट करें

एडिटर के प्रीव्यू एक शुरुआत हैं। काम पूरा मानने से पहले:

1. अहम पेजों को Chrome में मोबाइल व्यू में खोलें। Mobile View Extension यह एक क्लिक में करता है और लाइव पेज को मोबाइल user agent के साथ लोड करता है, ताकि आप वही देखें जो फ़ोन को असल में मिलता है, कैशिंग या मोबाइल वाले प्लगइन जो भी दिखाते हों उसके साथ।
2. फ़ॉर्म और चेकआउट असली फ़ोन पर टेस्ट करें।
3. Lighthouse मोबाइल ऑडिट चलाएँ (कैसे करें)।

अगर फ़ोन पर कुछ प्रीव्यू से अलग दिखता है, तो वेबसाइट मोबाइल पर अलग क्यों दिखती है में आम वजहें दी गई हैं।

अक्सर पूछे जाने वाले सवाल

मेरी WordPress साइट एडिटर में ठीक दिखती है, लेकिन फ़ोन पर नहीं, ऐसा क्यों?

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

क्या WordPress को मोबाइल फ़्रेंडली बनाने के लिए प्लगइन चाहिए?

आम तौर पर नहीं। रिस्पॉन्सिव थीम ज़्यादातर काम कर देती है। अलग मोबाइल थीम बनाने वाले प्लगइन सालों पहले आम थे, लेकिन अब शायद ही उनकी ज़रूरत पड़ती है।

क्या मोबाइल WordPress साइटों के लिए AMP अब भी ज़रूरी है?

नहीं। AMP वैकल्पिक है, और एक तेज़ रिस्पॉन्सिव पेज अलग फ़ॉर्मेट के बिना वही मक़सद पूरा करता है।