इस लेख में, मैं आपको दिखाऊंगा कि किसी प्लगइन का उपयोग किए बिना एक वर्डप्रेस वेबपेज (यानी एक संपर्क पृष्ठ के लिए) में एक उत्तरदायी Google मानचित्र मानचित्र कैसे जोड़ा जाए। मैं इस ट्यूटोरियल के लिए वर्डप्रेस 6.0 के साथ-साथ ट्वेंटी ट्वेंटी टू थीम का उपयोग करूंगा, जो कि वर्डप्रेस के इस संस्करण के लिए डिफ़ॉल्ट थीम है।
Google मानचित्र सुविधा आपको एक इंटरेक्टिव मानचित्र पर अपने व्यवसाय के स्थान को प्रदर्शित करने की अनुमति देती है, जिससे साइट विज़िटर आसानी से देख सकते हैं कि आप कहां स्थित हैं और यह देखने के लिए कि आपके आस-पास और क्या है, दिशा-निर्देश प्राप्त करें, आदि। यह साइट आगंतुकों को प्रदर्शित करता है। कि आप एक स्थानीय व्यवसाय हैं और आपका वास्तविक, भौतिक स्थान है। व्यवसायों के लिए उनके संपर्क पृष्ठ पर एक नक्शा होना बहुत आम है।
वहाँ बहुत सारे Google मानचित्र प्लगइन्स हैं, लेकिन उनमें से कई क्लूनी हैं और या तो पूर्ण प्लगइन सुविधाओं के लिए भुगतान की आवश्यकता होती है या जटिल चरणों वाले Google डेवलपर खाते की आवश्यकता होती है जो कम-से-वांछनीय परिणाम उत्पन्न करते हैं।
यह सब कहा जा रहा है, Google मानचित्र को अपने वर्डप्रेस 6.0 पृष्ठों में प्लगइन्स के बिना और जटिल चरणों के एक समूह के बिना जोड़ने का एक बहुत ही सरल तरीका है। आइए इसमें गोता लगाएँ।
चरण 1: एक HTML ब्लॉक बनाएं
शुरुआत के लिए, अपनी वर्डप्रेस साइट के व्यवस्थापक क्षेत्र में लॉगिन करें और "पेज" अनुभाग (उपरोक्त छवि में लाल तीर) पर नेविगेट करें।
उस पृष्ठ पर क्लिक करें जिसमें आप अपनी Google मानचित्र सुविधा जोड़ना चाहते हैं (आप पृष्ठ के नाम पर क्लिक कर सकते हैं, मेरे मामले में "संपर्क" - उपरोक्त छवि में नीला तीर - या पृष्ठ नाम के नीचे "संपादित करें" पर क्लिक करें)।
यदि आप ट्वेंटी ट्वेंटी टू जैसी ब्लॉक थीम का उपयोग कर रहे हैं, तो अब आप अपने पेज के लिए ब्लॉक एडिटर के अंदर होंगे। उस स्थान तक स्क्रॉल करें जहां आप अपना नक्शा सम्मिलित करना चाहते हैं।
इसके बाद, एक ब्लॉक डालने के लिए "+" आइकन ("ब्लॉक इंसर्टर" - ऊपर की छवि में लाल तीर) पर क्लिक करें।
खोज क्षेत्र में "समूह" खोजें (फोटो में हरे रंग में उल्लिखित) और समूह ब्लॉक (लाल तीर) जोड़ने के लिए क्लिक करें। यह आपको ब्लॉक तत्व में कुछ कस्टम सेटिंग्स जोड़ने की अनुमति देगा।
उदाहरण के लिए, "संरेखण बदलें" विकल्प (लाल तीर) पर क्लिक करें और "पूर्ण चौड़ाई" (हरा तीर) चुनें। यह उस ब्लॉक की चौड़ाई बना देगा जिसमें हमारा Google मानचित्र इंटरेक्टिव मानचित्र पूरी चौड़ाई में होगा।
इसके बाद, समूह के अंदर बड़े "+" बटन पर क्लिक करें (उपरोक्त फोटो में लाल तीर)। खोज बार में "एचटीएमएल" खोजें (हरे रंग में उल्लिखित) और "कस्टम एचटीएमएल" ब्लॉक (नीला तीर) पर क्लिक करें।
अब आप देखेंगे कि यह "html लिखें..." (लाल तीर) कहता है। यहीं पर हम अपना नक्शा जोड़ेंगे।
चरण 2: Google मानचित्र उत्पन्न करें HTML एम्बेड करें
अब हमें गूगल मैप्स के साथ अपना मैप जेनरेट करना होगा। ऐसा करने के लिए, एक नया ब्राउज़र टैब खोलें और Google.com पर नेविगेट करें यदि यह आपका डिफ़ॉल्ट खोज ब्राउज़र नहीं है।
इसके बाद, वह पता टाइप करें जिसे आप अपने मानचित्र पर प्रदर्शित करना चाहते हैं। इस उदाहरण के लिए, मैं एम्पायर स्टेट बिल्डिंग (लाल तीर) का उपयोग करूँगा। आप इस हिस्से के लिए अपने व्यवसाय के सटीक पते का उपयोग कर सकते हैं (अर्थात सड़क संख्या, गली, शहर, राज्य और ज़िप कोड - या यदि आप यूएस में नहीं हैं तो अंतरराष्ट्रीय पते के लिए जो भी लिखते हैं)।
खोज इंजन परिणाम पृष्ठ में आपके पते के लिए दिखाई देने वाली मानचित्र छवि पर क्लिक करें (छवि में लाल तीर - यह या तो पृष्ठ के मध्य में होगा या दाईं ओर होगा, इस पर निर्भर करता है कि आपने कोई पता या नाम टाइप किया है या नहीं) एक जगह, जैसा मैंने किया)।
आपका पता अब पूर्ण-स्क्रीन मानचित्र पर एक मार्कर के रूप में दिखाई देगा (उपरोक्त छवि में लाल तीर)। आपके द्वारा खोजे गए स्थान के पते या शीर्षक के नीचे आपको कई चिह्न भी दिखाई देंगे। इन आइकन में "दिशा-निर्देश," "सहेजें," "आस-पास," "फ़ोन पर भेजें," और "साझा करें" शामिल हैं। "साझा करें" आइकन (नीला तीर) पर क्लिक करें।
दिखाई देने वाले "साझा करें" टैब में, "एक नक्शा एम्बेड करें" टैब पर क्लिक करें (उपरोक्त फोटो में नीला तीर)।
इस टैब में, आप अपने एम्बेडेड Google मानचित्र विजेट का पूर्वावलोकन देखेंगे। कोड के बाईं ओर एक आकार ड्रॉपडाउन है (हरा तीर) - आप एक प्रीमियर आकार का चयन कर सकते हैं या अपना खुद का आकार सेट करने के लिए "कस्टम" चुन सकते हैं। मैं "कस्टम" विकल्प (लाल तीर) का चयन करूंगा।
यहां, आप मेरे कस्टम मानचित्र के आयाम देखेंगे। मैं ऊँचाई, या पहला आयाम, 1200 (लाल तीर) पर सेट करूँगा। मैं चौड़ाई को 600 पर सेट छोड़ दूँगा। आप "पूर्वावलोकन वास्तविक आकार" (हरा तीर) पर क्लिक करके मानचित्र को एक नई पॉप-अप विंडो में पूर्ण आकार में दिखा सकते हैं (सुनिश्चित करें कि यदि आपके पास कोई पॉप-अप अवरोधक है तो आप उसे अक्षम कर दें) खिड़की को अवरुद्ध करने से बचने के लिए चालू)। एक बार जब आप कर लें तो पूर्वावलोकन विंडो से बाहर निकलें।
इसके बाद, "HTML कॉपी करें" लिंक (नीला तीर) पर क्लिक करें। यह वह कोड है जिसे हम अपने वर्डप्रेस पेज में लाएंगे।
चरण 3: HTML कोड को वर्डप्रेस पेज पर पेस्ट करें
उस ब्राउज़र टैब पर वापस जाएँ जिसमें आपकी वर्डप्रेस वेबसाइट है। खाली HTML ब्लॉक पर क्लिक करें जहां यह लिखा है "यहां HTML लिखें ..." और अपने कीबोर्ड पर ctrl + v (मैक पर cmd + v) दबाकर कोड (लाल तीर) पेस्ट करें।
यदि आप ब्लॉक टूलबार (लाल तीर) में "पूर्वावलोकन" विकल्प पर क्लिक करते हैं, तो अब आप अपने मानचित्र को अपने पृष्ठ (हरा तीर) पर प्रदर्शित देखेंगे। HTML कोड (नीला तीर) पर लौटने के लिए "HTML" विकल्प पर वापस क्लिक करें।
हमने अपने मानचित्र को अपने पृष्ठ पर एम्बेड किया है, लेकिन यह उत्तरदायी नहीं है - अर्थात यदि हम मानचित्र को किसी टैबलेट या फ़ोन जैसी छोटी स्क्रीन पर देखते हैं, तो यह स्क्रीन में फ़िट होने के लिए इसके आकार को समायोजित नहीं करेगा। इसे ठीक करने के लिए, हमें HTML कोड में कुछ कस्टम स्टाइल जोड़ने की आवश्यकता है।
चरण 4: Google मानचित्र को उत्तरदायी बनाएं
मॆ हुंगॉ कोड का उपयोग करके मुझे इस वेबसाइट से मिला है Google मानचित्र को उत्तरदायी बनाने के लिए। "उत्तरदायी रूप से Google मानचित्र कैसे एम्बेड करें" (लाल तीर) लेबल वाले अनुभाग तक नीचे स्क्रॉल करें। फिर, कोड के दूसरे सेट (नीला तीर) तक नीचे स्क्रॉल करें।
से सब कुछ कॉपी करें " ” to “” by highlighting the code with your mouse and hitting ctrl+c on your keyboard (cmd+c on a MAC – red arrow in the image above).
वर्डप्रेस पर वापस नेविगेट करें। शुरुआत में (लाल तीर) इस नए कोड को सम्मिलित करने के लिए HTML कोड के बिल्कुल सामने अपने माउस पर क्लिक करें। अपना कोड पेस्ट करने के लिए ctrl+v दबाएं।
अंत में, HTML कोड (लाल तीर) के अंत में क्लिक करें और टाइप करें “ "सब कुछ बंद करने के लिए। मूल रूप से आपने अभी जो किया है वह आपके HTML कोड को कस्टम स्टाइल में लपेटा गया है। यह शैली विज़िटर के ब्राउज़र को उस विंडो के आकार के आधार पर मानचित्र का आकार बदलने के लिए कहती है जिसमें वे इसे देख रहे हैं।
चरण 5: इंटरएक्टिव मानचित्र के पहलू अनुपात को समायोजित करें
एक आखिरी चीज है जो हमें करने की जरूरत है - कोड के शीर्ष पर वापस स्क्रॉल करें जब तक कि आप "पैडिंग-बॉटम: 75%;" न देखें। (लाल बाण)। कोड का यह टुकड़ा मानचित्र के पहलू अनुपात का निर्धारण कर रहा है।
क्योंकि मैंने अपने मानचित्र का आकार बदलकर 1200 x 600 कर दिया है, इसका पहलू अनुपात 2:1 है। इसके लिए, मुझे प्रतिशत को "50%" (लाल तीर) में बदलना होगा।
यदि आप सुनिश्चित नहीं हैं कि आपको अपने मानचित्र के लिए किस प्रतिशत का उपयोग करना चाहिए, तो बस पहलू अनुपात (यानी 16:9) लें और अपना प्रतिशत प्राप्त करने के लिए दूसरी संख्या को पहले से विभाजित करें (9 को 16 से विभाजित करने पर 56.25% होता है)।
अपने परिवर्तन लागू करने के लिए "अपडेट" पर क्लिक करें (उपरोक्त छवि में नीला तीर), फिर परिणाम देखने के लिए निचले बाएं कोने में "पृष्ठ देखें" पर क्लिक करें।
अब आप अपने Google मानचित्र विजेट को प्रदर्शित होते हुए देखेंगे (उपरोक्त छवि में लाल तीर)।
आप अपने ब्राउज़र के आकार को कम करके, फिर मानचित्र वाले वेबपेज के क्षेत्र में वापस स्क्रॉल करके प्रतिक्रियात्मकता का परीक्षण कर सकते हैं।
इस ट्यूटोरियल के लिए बस इतना ही! यदि आप इसे पसंद करते हैं और अपनी खुद की पेशेवर वर्डप्रेस वेबसाइट बनाना सीखना चाहते हैं, तो आप my . में नामांकन कर सकते हैं उदमी पर नॉन-कोडर्स कोर्स के लिए वर्डप्रेस 6.0, या मेरे अन्य ट्यूटोरियल देखें!
