क्या आप चाहते हैं कि आपकी ijankari.com वेबसाइट हिंदी और अंग्रेजी दोनों पाठकों तक पहुंचे? अपनी वेबसाइट को बहुभाषी बनाना दुनिया भर के व्यापक दर्शकों से जुड़ने का एक शानदार तरीका है। इस ब्लॉग पोस्ट में, हम आपको चरण-दर-चरण बताएंगे कि आप अपनी वेबसाइट पर भाषा स्विच कैसे लागू कर सकते हैं ताकि उपयोगकर्ता अपनी पसंद की भाषा में सामग्री देख सकें।
भाषाओं के बीच स्विच करने की यह प्रक्रिया मुख्य रूप से सामग्री प्रबंधन (Content Management) और राउटिंग (Routing) से संबंधित है, न कि केवल CSS से। CSS का उपयोग केवल भाषा स्विचर को स्टाइल करने के लिए किया जाता है, लेकिन वास्तविक सामग्री लोडिंग और यूआरएल परिवर्तन आपकी वेबसाइट के बैकएंड या किसी विशेष बहुभाषी समाधान द्वारा नियंत्रित होते हैं।
अधिकांश लोगों के लिए, ऐसा करने का सबसे आसान और सबसे मजबूत तरीका वर्डप्रेस जैसे कंटेंट मैनेजमेंट सिस्टम (CMS) का उपयोग करना है जिसमें एक विशेष बहुभाषी प्लगइन हो। चूंकि वर्डप्रेस बहुत लोकप्रिय है, मैं आपको वर्डप्रेस का उपयोग करके चरणों का उल्लेख करूँगा। यदि आप बिना CMS के स्क्रैच से वेबसाइट बना रहे हैं, तो सिद्धांत समान हैं लेकिन इसके लिए अधिक मैन्युअल कोडिंग की आवश्यकता होगी।
तरीका 1: वर्डप्रेस और एक मल्टीलिंगुअल प्लगइन का उपयोग करना (अनुशंसित)
यह सबसे सामान्य और प्रभावी तरीका है। लोकप्रिय प्लगइन्स में WPML, Polylang, और TranslatePress शामिल हैं। मैं उन सामान्य चरणों को बताऊँगा जो उनमें से अधिकांश पर लागू होते हैं।
पूर्व-आवश्यकताएँ:
- आपकी
ijankari.comवेबसाइट Hostinger पर सेट अप है। - वर्डप्रेस आपकी
ijankari.comपर स्थापित है। - आपके पास अपने वर्डप्रेस एडमिन डैशबोर्ड तक पहुँच है।
चरण 1: एक मल्टीलिंगुअल प्लगइन चुनें और स्थापित करें
- अपने वर्डप्रेस एडमिन डैशबोर्ड (
ijankari.com/wp-admin) में लॉग इन करें। - Plugins > Add New पर जाएँ।
- “Polylang,” “TranslatePress,” या यदि आप प्रीमियम सुविधाओं के लिए भुगतान करने को तैयार हैं, तो “WPML” जैसे बहुभाषी प्लगइन की खोज करें।
- Polylang और TranslatePress के बुनियादी सेटअप के लिए अच्छे मुफ्त वर्ज़न हैं।
- WPML बहुत शक्तिशाली है लेकिन यह एक प्रीमियम (सशुल्क) प्लगइन है।
- अपने चुने हुए प्लगइन को स्थापित करें और सक्रिय करें।
चरण 2: भाषाओं और यूआरएल संरचना के लिए प्लगइन को कॉन्फ़िगर करें
- सक्रियण के बाद, प्लगइन आमतौर पर आपको एक प्रारंभिक सेटअप विज़ार्ड के माध्यम से मार्गदर्शन करेगा।
- भाषाएँ जोड़ें: अपनी साइट के लिए “English” और “Hindi” को भाषाओं के रूप में चुनें।
- यूआरएल संरचना चुनें: यह महत्वपूर्ण है। “सबडायरेक्टरीज़” (उदाहरण के लिए,
ijankari.com/en/औरijankari.com/hi/) के विकल्प का चयन करें। अधिकांश प्लगइन्स में यह विकल्प होगा।- ध्यान दें: सुनिश्चित करें कि आपकी वर्डप्रेस परमालिंक्स “Post name” या इसी तरह की उपयोगकर्ता-अनुकूल संरचना पर सेट हैं (Settings > Permalinks)।
- डिफ़ॉल्ट भाषा: अपनी प्राथमिक या डिफ़ॉल्ट भाषा सेट करें (उदाहरण के लिए, हिंदी यदि आपकी मूल सामग्री हिंदी में है, या अंग्रेजी यदि आप वहां से शुरू कर रहे हैं)।
- सिंक सेटिंग्स (यदि लागू हो): कुछ प्लगइन्स पूछते हैं कि क्या आप मेनू, कैटेगरीज़, टैग्स को भाषाओं में सिंक करना चाहते हैं। सामान्य तौर पर, संगति के लिए हाँ कहें।
चरण 3: अपनी वेबसाइट की सामग्री का अनुवाद करें
यह सबसे अधिक समय लेने वाला चरण है।
- पेज और पोस्ट:
- Pages > All Pages या Posts > All Posts पर जाएँ।
- आपको प्रत्येक पेज/पोस्ट के आगे विकल्प (अक्सर झंडे या “अनुवाद जोड़ें” लिंक) दिखाई देंगे।
- सामग्री के प्रत्येक भाग के लिए अनुवाद जोड़ने के लिए क्लिक करें।
- अपनी मूल भाषा के पेज/पोस्ट से सामग्री कॉपी करें।
- इसे दूसरी भाषा में अनुवाद करें (उदाहरण के लिए, यदि आप अंग्रेजी पेज पर हैं, तो हिंदी में अनुवाद करें)।
- अनुवादित वर्ज़न को सेव/प्रकाशित करें।
- सभी मुख्य पेजों (होम, हमारे बारे में, संपर्क, गोपनीयता नीति, आदि) और अपने मुख्य ब्लॉग पोस्ट के लिए दोहराएं।
- मेनू:
- Appearance > Menus पर जाएँ।
- मल्टीलिंगुअल प्लगइन्स आमतौर पर मेनू एडिटर के भीतर एक भाषा स्विचर जोड़ते हैं। आप प्रत्येक भाषा के लिए अलग-अलग मेनू बनाएंगे या मेनू आइटम के अनुवादों को प्रबंधित करने के लिए प्लगइन की सिंकिंग सुविधाओं का उपयोग करेंगे।
- विजेट्स, कैटेगरीज़, टैग्स:
- इनका अनुवाद भी प्लगइन के इंटरफ़ेस के माध्यम से करें।
- विजेट्स के लिए, आपको भाषा-विशिष्ट विजेट क्षेत्र बनाने पड़ सकते हैं या केवल कुछ भाषाओं के लिए कुछ विजेट्स प्रदर्शित करने के लिए प्लगइन के विकल्पों का उपयोग करना पड़ सकता है।
चरण 4: अपनी वेबसाइट पर भाषा स्विचर जोड़ें
- अधिकांश मल्टीलिंगुअल प्लगइन्स भाषा स्विचर के लिए एक विजेट या एक शॉर्टकोड प्रदान करते हैं।
- विजेट का उपयोग करना:
- Appearance > Widgets पर जाएँ।
- “Language Switcher” विजेट (या इसी तरह का नाम) को अपने इच्छित साइडबार, फुटर या हेडर विजेट क्षेत्र में ड्रैग और ड्रॉप करें।
- शॉर्टकोड का उपयोग करना:
- यदि आप अधिक नियंत्रण चाहते हैं, तो प्लगइन एक शॉर्टकोड प्रदान कर सकता है (उदाहरण के लिए,
[polylang_switcher]या[trp_language_switcher])। - आप इस शॉर्टकोड को अपने पेज एडिटर में एक कस्टम HTML ब्लॉक में, एक टेक्स्ट विजेट में, या सीधे अपनी थीम फ़ाइलों में (यदि आपको कोडिंग में सहजता है) सम्मिलित कर सकते हैं।
- यदि आप अधिक नियंत्रण चाहते हैं, तो प्लगइन एक शॉर्टकोड प्रदान कर सकता है (उदाहरण के लिए,
- परीक्षण करें: अपनी वेबसाइट (
ijankari.com) पर जाएँ। आपको भाषा स्विचर दिखाई देना चाहिए। यह सुनिश्चित करने के लिए “English” और “Hindi” पर क्लिक करें कि यहijankari.com/en/औरijankari.com/hi/के बीच सही ढंग से नेविगेट करता है और अनुवादित सामग्री प्रदर्शित करता है।
चरण 5: Hreflang टैग लागू करें (आमतौर पर प्लगइन द्वारा प्रबंधित)
यह SEO के लिए और सर्च इंजनों को आपकी बहुभाषी सामग्री के बारे में बताने के लिए महत्वपूर्ण है।
- सौभाग्य से, अच्छे बहुभाषी वर्डप्रेस प्लगइन्स (जैसे WPML, Polylang, TranslatePress) स्वचालित रूप से आपके पेजों के HTML
<head>अनुभाग में सहीhreflangटैग जोड़ते हैं। आपको आम तौर पर इसे मैन्युअल रूप से करने की आवश्यकता नहीं होती है। - सत्यापित करें: आप किसी भी पेज पर राइट-क्लिक करके, “View Page Source” का चयन करके, और “hreflang” की खोज करके यह सुनिश्चित कर सकते हैं कि टैग मौजूद हैं और सही ढंग से कॉन्फ़िगर किए गए हैं।
चरण 6: (वैकल्पिक) CSS के साथ भाषा स्विचर को स्टाइल करना
जैसा कि पहले चर्चा की गई थी, CSS यह स्टाइल करता है कि स्विचर कैसा दिखता है, न कि वह कैसे कार्य करता है।
- Appearance > Customize > Additional CSS (या आपकी थीम का कस्टम CSS विकल्प) पर जाएँ।
- अपने प्लगइन द्वारा प्रदान किए गए भाषा स्विचर तत्वों को स्टाइल करने के लिए CSS नियम जोड़ें।
- स्विचर के लिए सही CSS क्लास/आईडी खोजने के लिए ब्राउज़र डेवलपर टूल (F12) का उपयोग करके अपनी साइट का निरीक्षण करें।
- उदाहरण: (अपने प्लगइन/थीम के आधार पर क्लास एडजस्ट करें): CSS
/* भाषा स्विचर कंटेनर के लिए स्टाइल */ .language-switcher-wrapper { margin-top: 20px; text-align: center; } /* व्यक्तिगत भाषा लिंक्स के लिए स्टाइल */ .language-switcher-wrapper a { display: inline-block; padding: 8px 15px; margin: 0 5px; background-color: #f0f0f0; color: #333; text-decoration: none; border-radius: 5px; font-weight: bold; transition: background-color 0.3s ease; } /* होवर इफेक्ट */ .language-switcher-wrapper a:hover { background-color: #e0e0e0; } /* सक्रिय भाषा के लिए स्टाइल */ .language-switcher-wrapper a.current-lang { /* क्लास का नाम भिन्न हो सकता है, प्लगइन आउटपुट की जाँच करें */ background-color: #007bff; color: white; } /* यदि झंडों का उपयोग कर रहे हैं, तो आप स्विचर के भीतर img टैग को लक्षित कर सकते हैं */ .language-switcher-wrapper img { vertical-align: middle; margin-right: 5px; }
तरीका 2: मैन्युअल इम्प्लीमेंटेशन (कस्टम वेबसाइटों / गैर-वर्डप्रेस के लिए)
यदि आप वर्डप्रेस का उपयोग नहीं कर रहे हैं, तो चरणों में अधिक प्रत्यक्ष फ़ाइल प्रबंधन और सर्वर-साइड स्क्रिप्टिंग शामिल होगी।
चरण 1: अपने सर्वर पर भाषा-विशिष्ट डायरेक्टरीज़ बनाएँ
- अपने Hostinger फ़ाइल मैनेजर (या FTP के माध्यम से), अपनी
public_htmlडायरेक्टरी (जहांijankari.comफ़ाइलें हैं) में, दो नए फोल्डर बनाएँ:public_html/en/public_html/hi/
चरण 2: अपनी वेबसाइट फ़ाइलों को डुप्लिकेट और अनुवाद करें
- अपनी सभी वेबसाइट फ़ाइलों (HTML, PHP, इमेज, CSS, JS) को
public_html/en/डायरेक्टरी में कॉपी करें। - महत्वपूर्ण:
public_html/en/के भीतर प्रत्येक HTML फ़ाइल (उदाहरण के लिए,index.html,about.html) में जाएँ और सभी टेक्स्ट सामग्री को अंग्रेजी में अनुवाद करें। public_html/hi/के लिए भी ऐसा ही करें, सभी सामग्री को हिंदी में अनुवाद करें।- सुनिश्चित करें कि
public_html/en/के भीतर के सभी आंतरिक लिंक अन्य/en/पेजों (उदाहरण के लिए,/en/about.html) की ओर इंगित करते हैं।/hi/के लिए भी यही बात है।
चरण 3: भाषा स्विचर लिंक लागू करें
- दोनों भाषा वर्ज़न के हर पेज पर, आपको मैन्युअल रूप से भाषाओं को स्विच करने के लिए लिंक जोड़ने होंगे।
- उदाहरण:
ijankari.com/en/index.htmlपर भाषा स्विचर के लिए HTML: HTML<div class="language-switcher"> <a href="/en/index.html" class="active">English</a> | <a href="/hi/index.html">हिन्दी</a> </div> - और
ijankari.com/hi/index.htmlपर: HTML<div class="language-switcher"> <a href="/en/index.html">English</a> | <a href="/hi/index.html" class="active">हिन्दी</a> </div> - यदि आप एक स्मार्टर स्विचर चाहते हैं जो दूसरी भाषा में संबंधित पेज से लिंक करता है, तो आपको सर्वर-साइड कोड (PHP, Node.js, Python, आदि) का उपयोग करके इन लिंक्स को गतिशील रूप से उत्पन्न करने की आवश्यकता होगी।
चरण 4: Hreflang टैग मैन्युअल रूप से लागू करें
यह SEO के लिए बिल्कुल महत्वपूर्ण है। दोनों भाषा वर्ज़न के हर पेज के <head> अनुभाग में, आपको hreflang टैग जोड़ने होंगे।
ijankari.com/en/about.htmlजैसे पेज के लिए: HTML<link rel="alternate" hreflang="en" href="https://ijankari.com/en/about.html" /> <link rel="alternate" hreflang="hi" href="https://ijankari.com/hi/about.html" />ijankari.com/hi/about.htmlजैसे पेज के लिए: HTML<link rel="alternate" hreflang="hi" href="https://ijankari.com/hi/about.html" /> <link rel="alternate" hreflang="en" href="https://ijankari.com/en/about.html" />- आपको दोनों भाषा डायरेक्टरी में हर एक समान पेज के लिए ऐसा करना होगा।
चरण 5: (वैकल्पिक) ब्राउज़र भाषा के आधार पर स्वचालित पुनर्निर्देशन (सर्वर-साइड स्क्रिप्टिंग के माध्यम से)
आप एक सर्वर-साइड स्क्रिप्ट (उदाहरण के लिए, Apache के लिए .htaccess में, या PHP) जोड़ सकते हैं ताकि उपयोगकर्ता की ब्राउज़र भाषा का पता लगाया जा सके और यदि वे रूट ijankari.com पर उतरते हैं, तो उन्हें उचित en/ या hi/ सबफोल्डर पर रीडायरेक्ट किया जा सके।
- Apache के लिए उदाहरण (
public_htmlमें.htaccess): Apache# ब्राउज़र वरीयता के आधार पर उपयोगकर्ताओं को विशिष्ट भाषा फोल्डर पर रीडायरेक्ट करें RewriteEngine On RewriteCond %{HTTP:Accept-Language} ^hi [NC] RewriteRule ^$ /hi/ [L,R=302] RewriteCond %{HTTP:Accept-Language} ^en [NC] RewriteRule ^$ /en/ [L,R=302] # अन्य भाषाओं के लिए या यदि कोई वरीयता नहीं मिली # आप उन्हें एक डिफ़ॉल्ट भाषा, जैसे हिंदी, पर भेज सकते हैं RewriteRule ^$ /hi/ [L,R=302]- सावधानी: कैशिंग समस्याओं से बचने के लिए
R=302(अस्थायी पुनर्निर्देशन) का उपयोग करें। यह भी सुनिश्चित करें कि यदि स्वचालित रूप से रीडायरेक्ट किया जाता है तो उपयोगकर्ता अभी भी मैन्युअल रूप से स्विच कर सकें।
- सावधानी: कैशिंग समस्याओं से बचने के लिए
अंतिम सिफारिश:
प्रबंधन में आसानी, चल रहे सामग्री अपडेट और मजबूत SEO कार्यान्वयन के लिए, ijankari.com/en/ और ijankari.com/hi/ भाषा वर्ज़न बनाने के लिए एक समर्पित बहुभाषी प्लगइन के साथ वर्डप्रेस का उपयोग करना अब तक का सबसे व्यावहारिक और कुशल तरीका है।