إضافة خريطة جوجل إلى موقع ووردبريس الخاص بك هي مهمة تستغرق خمس دقائق. إنها تساعد في بناء الثقة، وتعزز تحسين محركات البحث المحلية (SEO)، وتجعل الشراء منك أسهل. لكن التأكد من عرضها بشكل صحيح واحتوائها على الميزات التي تحتاجها قد يستغرق ساعات. وإذا نسيت مراعاة مستخدمي الهواتف المحمولة، فقد لا تدرك أن الخريطة مقطوعة على الشاشات الصغيرة.
يأخذك هذا الدليل عبر ثلاثة خيارات لإضافة خرائط جوجل إلى موقع ووردبريس الخاص بك: إطار iFrame أصلي، وإضافة (plug-in) للخريطة، وويدجيت (widget) مجاني. سنغطي أيضًا المشكلات والمقايضات حتى تتمكن من تحديد الخيار الأفضل لك.
ثلاثة خيارات لتضمين خرائط جوجل في ووردبريس
| Method | API key required | Cost | Mobile-responsive | Multi-pin support | Setup time |
|---|---|---|---|---|---|
|
إطار iFrame أصلي |
لا |
مجاني |
لا؛ عرض/ارتفاع ثابت |
لا |
حوالي 5 دقائق |
|
إضافة ووردبريس (WordPress plug-in) |
نعم؛ مجاني لـ 10,000 تحميل للخريطة/شهر |
مجانًا للميزات الأساسية؛ مدفوع للميزات المتقدمة |
يعتمد على الإضافة |
نعم؛ غالبًا ما يتطلب الدفع |
حوالي 15-25 دقيقة |
|
ويدجيت خرائط جوجل من Jotform |
نعم؛ مجاني لـ 10,000 تحميل للخريطة/شهر |
ويدجيت مجاني؛ يتضمن ميزات متقدمة |
نعم |
نعم؛ مجاني |
حوالي 15 دقيقة |
الخيار 1: استخدام إطار iFrame أصلي لخرائط جوجل
يعد خيار إطار iFrame لخرائط جوجل الطريقة الأبسط والأسرع لوضع خريطة على موقعك الإلكتروني. ما عليك سوى البحث عن نشاطك التجاري على خرائط جوجل، والنقر على مشاركة (Share)، ونسخ الرمز، ثم لصقه في إحدى صفحات ووردبريس. نقدم هنا إرشادات خطوة بخطوة حتى تتمكن من تشغيله بسرعة.
إلا أن هذه البساطة تنتهي لتصبح قيدًا في حد ذاتها. لا يمكنك تخصيص مظهر الخريطة، أو إضافة دبابيس متعددة، أو عرض معلومات إضافية فوق العرض الافتراضي. سيتعين عليك أيضًا تجربة أحجام الخرائط وتخطيطات صفحات ووردبريس للتأكد من قابليتها للاستخدام على الهواتف المحمولة.
كيفية تضمين إطار iFrame لخرائط جوجل
قبل البدء، قم بتسجيل نشاطك التجاري في منصة ملف نشاطي التجاري على جوجل (Google Business Profile). يتيح لك ذلك عرض معلوماتك الكاملة على خرائط جوجل، بما في ذلك أوقات العمل أو التقييمات أو قائمة الطعام الخاصة بك. وإذا كنت تشير فقط إلى عنوان لا يخصك أو إلى معلم بارز، فانتقل إلى الخطوة الأولى.
الحصول على كود التضمين من خرائط جوجل
- اذهب إلى google.com/maps وابحث عن اسم نشاطك التجاري أو عنوانه.
- تأكد من أنك قمت بتحديد الدبوس الصحيح عن طريق فحص تفاصيل النشاط التجاري على الجانب الأيسر من الشاشة.
- انقر على مشاركة (Share).
- ستظهر نافذة منبثقة على الشاشة. انقر على علامة التبويب تضمين خريطة (Embed a Map).
- ستظهر معاينة لما ستبدو عليه الخريطة على موقعك الإلكتروني. يتم ضبطها على الحجم المتوسط افتراضيًا؛ يمكنك اختيار عرض خريطة صغيرة أو كبيرة، أو حتى تحديد حجم مخصص باستخدام القائمة المنسدلة في أعلى اليسار.
- بعد تحديد الحجم، انقر على نسخ HTML (Copy HTML). سيؤدي هذا إلى نسخ مقتطف كود iFrame إلى الحافظة.
تضمينه في ووردبريس (محرر المكونات/Gutenberg)
- في ووردبريس، افتح الصفحة أو المنشور حيث تريد وضع الخريطة.
- انقر على أيقونة إدراج المكون +، واكتب HTML للتصفية، ثم انقر على HTML مخصص (Custom HTML) لإضافة المكون إلى الصفحة.
- في المكون الجديد، انقر على تعديل HTML (Edit HTML).
- الصق كود iFrame في النافذة المنبثقة. ستظهر المعاينة على الجانب الأيمن. انقر على تحديث (Update) للإنهاء.
- تعرض الصفحة الآن خريطة iFrame المضمنة. انقر على نشر (Publish) أو حفظ (Save) لجعلها مرئية على موقعك الإلكتروني، واعرض الصفحة لترى كيف تبدو.
إذا كان هذا لا يتطابق مع طريقة تحريرك للصفحات في ووردبريس، فتعرف على كيفية إضافة HTML باستخدام أحد هذه المحررات:
- المحرر الكلاسيكي لووردبريس (WordPress Classic Editor)
- ويدجيت HTML في Elementor
- وحدة الكود في Divi (Divi Code Module)
الخيار 2: تثبيت إضافة مخصصة للخرائط في ووردبريس
بالمقارنة مع الخيار الأول، تضيف إضافة ووردبريس المخصصة المزيد من التخصيص والوظائف. يمكنك تثبيتها على موقعك بنفس الطريقة التي تثبت بها أي إضافة أخرى، ثم إنشاء ولصق مفتاح واجهة برمجة تطبيقات (API key) لخرائط جوجل في الإعدادات، وبعد ذلك يمكنك إضافة عنصر الخريطة إلى إحدى الصفحات.
يضيف هذا الخيار بعض التعقيد. يتطلب الحصول على مفتاح واجهة برمجة تطبيقات (API key) لخرائط جوجل إنشاء حساب في منصة جوجل كلاود (Google Cloud Platform)، وإعداد حساب فوترة، والتنقل عبر خطوات إعداد فنية. كما تعمل إضافات الخرائط بنظام (Freemium)، حيث تقدم خطة مجانية جيدة بميزات أساسية، ولكنها تحجب أفضل الإمكانات خلف ترخيص يُدفع لمرة واحدة أو رسوم سنوية.
بما أنك تقوم بزيادة عدد الإضافات لديك، فاختبر سرعة موقعك الإلكتروني بعد الانتهاء من الإعداد. إذا كنت تستضيف موقعك على خطة منخفضة التكلفة، فإن كثرة الإضافات يمكن أن تبطئ كل شيء بشكل ملحوظ، مما يؤثر على تجربة المستخدم وقد يتسبب في مغادرة الزوار.
تعتمد جعل الخريطة عملية لمستخدمي الهواتف المحمولة على الإضافة وكيفية إعدادك لها. على سبيل المثال، توصي إضافة WP Go Maps بتعيين قيم محددة للارتفاع والعرض لتجنب العرض المزدحم والمضغوط.
كيفية إعداد إضافة خرائط في ووردبريس
في هذا المثال، سأستخدم واحدة من أشهر إضافات خرائط جوجل لووردبريس، وهي WP Go Maps.
إعداد إضافة WP Go Maps
- قم بتثبيت وتفعيل إضافة WP Go Maps.
- انقر على تخطي المقدمة (Skip Introduction) لإنهاء الإعداد.
- انقر على الإعدادات (Settings) في القائمة الجانبية اليسرى.
- في علامة التبويب “عام” (General)، حدد خرائط جوجل كمحرك الخريطة.
الحصول على مفتاح واجهة برمجة تطبيقات (API key) لخرائط جوجل
لسحب بيانات الخريطة من منصة جوجل، تحتاج أولاً إلى تسجيل حساب للحصول على مفتاح واجهة برمجة التطبيقات (API key) الخاص بك.
- انتقل إلى موقع منصة خرائط جوجل (Google Maps Platform) وأنشئ حسابًا.
- سيتم نقلك إلى سير عمل الإعداد في منصة جوجل كلاود (Google Cloud Platform). أنشئ حساب فوترة جديدًا عن طريق تحديد الاسم والبلد والعملة.
- أضف معلومات الاتصال الخاصة بك وطريقة الدفع. عند الانتهاء، انقر على زر إرسال وتفعيل الفوترة (Submit and Enable Billing).
مع هذا الخيار، ستحصل على 10,000 تحميل مجاني للخريطة شهريًا؛ وإذا تجاوزت ذلك، فستكون التكلفة 7 دولارات لكل 1000 تحميل. إذا بقيت ضمن الحد المسموح به، فلن يتم خصم أي رسوم من بطاقتك، ولكن حساب الفوترة مطلوب في كلتا الحالتين. (في مارس 2025، استبدلت جوجل رصيدها الشهري القديم البالغ 200 دولار ببدل مجاني منفصل لكل واجهة برمجة تطبيقات (API)؛ لا تزال العديد من الشروحات القديمة تشير إلى هذا الرصيد، ولكنه لم يعد موجودًا).
- ستطرح عليك جوجل بعض الأسئلة حول كيفية تخطيطك لاستخدام خدمة خرائط جوجل. أجب عليها وانقر على إرسال (Submit).
- انقر على المفاتيح وبيانات الاعتماد (Keys & Credentials) في القائمة الجانبية اليسرى.
- انقر على القائمة المنسدلة إنشاء بيانات اعتماد (Create Credentials)، متبوعة بـ مفتاح واجهة برمجة التطبيقات (API Key).
- في النافذة المنبثقة التي تظهر، يمكنك تعيين اسم وصلاحيات مفتاح واجهة برمجة التطبيقات (API key) الجديد الخاص بك. لست مضطرًا لتغيير هذه الإعدادات؛ مرر لأسفل حتى النهاية وانقر على إنشاء (Create).
- انسخ مفتاح واجهة برمجة التطبيقات (API key).
من المهم تقييد مفتاحك قبل إطلاق موقعك. يمكن نسخ أي مفتاح غير مقيد موجود في الكود المصدري لصفحتك واستخدامه لرفع فاتورتك. اتبع أفضل الممارسات لمفتاح واجهة برمجة التطبيقات من جوجل لربطه بنطاقك (domain) الخاص.
إنهاء إعداد الإضافة في ووردبريس
- ارجع إلى صفحة إعدادات إضافة WP Go Maps في نظام ووردبريس الخاص بك والصق المفتاح في حقل مفتاح واجهة برمجة تطبيقات خرائط جوجل (Google Maps API Key). انقر على زر حفظ الإعدادات (Save Settings) بعد القيام بذلك.
- انقر على الخرائط (Maps) في القائمة الجانبية اليسرى.
- لقد أنشأت الإضافة بالفعل الخريطة الأولى لك. انقر على زر تحرير (Edit) لرؤيتها.
- هنا يمكنك إعداد كيفية عرض خريطتك على موقعك الإلكتروني. انقر على علامة التبويب العلامات (Markers) للبدء في إضافة نشاطك التجاري.
- انقر على قائمة النقاط الثلاث واحذف علامة الخريطة المحددة مسبقًا.
- انقر على إضافة علامة (Add Marker) في الأعلى.
- ابحث عن عنوان نشاطك التجاري وحدده بمجرد ظهوره في القائمة.
- انقر على زر إضافة علامة (Add Marker) للانتهاء.
- تم الآن وضع علامة لنشاطك التجاري على الخريطة. يمكنك تخصيص مستوى التكبير والإعدادات المرئية الأخرى بالرجوع والنقر على زر الإعدادات (Settings). تذكر النقر على حفظ الخريطة (Save Map) في أسفل الشاشة عند الانتهاء.
- عندما تكون جاهزًا لوضع خريطتك في صفحة على موقعك الإلكتروني، انقر على زر الحصول على الرمز المختصر (Get Shortcode) في أسفل اليسار. سيؤدي هذا إلى نسخ الرمز المختصر إلى الحافظة الخاصة بك.
- انتقل إلى الصفحة التي تريد إضافة خريطتك إليها، وانقر لإضافة مكوّن جديد، ثم اكتب Shortcode (رمز مختصر) لتصفية الخيارات. انقر عليه بمجرد ظهوره.
- الصق الرمز المختصر في حقل الإدخال وانقر على نشر (Publish) أو حفظ (Save).
- عند زيارة الصفحة، ستعرض الخريطة علامتك مع الإعدادات التي حددتها.
الخيار الثالث: إضافة أداة خرائط جوجل مجانية وقابلة للتخصيص (موصى به)
أداة خرائط جوجل من Jotform هي خريطة مجانية وقابلة للتخصيص بالكامل ولا تتطلب تثبيت إضافة أو دفع رسوم ترخيص. باستخدامها، يمكنك:
- إضافة موقع واحد أو مواقع متعددة تُعرض على نفس الخريطة.
- اختيار طريقة عرض الخريطة، بما في ذلك خريطة الطرق أو القمر الصناعي.
- التكيف مع المظهر الفاتح أو الداكن، مع التحكم في نصف قطر زوايا المربعات.
- تعيين حجم الخريطة، وتخطيطها، ومستوى التكبير.
بالمقارنة مع إطارات iFrame الأصلية، فهي قابلة للتخصيص، وتسمح بدبابيس متعددة على نفس الخريطة، ومتجاوبة مباشرة دون إعدادات إضافية. وبالمقارنة مع الإضافات (plug-ins)، فهي لا تثقل كاهل موقعك الإلكتروني ولا تتطلب خطة مدفوعة لفتح جميع ميزاتها.
على الرغم من هذه المزايا، لا تزال أداة خرائط جوجل من Jotform تتطلب مفتاح واجهة برمجة تطبيقات (API key) لخرائط جوجل. سيتعين عليك اتباع خطوات الإعداد وإنشاء حساب فوترة مع جوجل.
كيفية إضافة أداة خرائط جوجل من Jotform إلى موقعك الإلكتروني
- قم بزيارة صفحة أداة خرائط جوجل من Jotform. في معظم الحالات، يتم تحميل أداة الإعداد تلقائيًا؛ إذا لم يحدث ذلك، انقر على إنشاء أداة موقع ويب جديدة (Create New Website Widget) للبدء.
- اتبع هذا الدليل حول كيفية الحصول على مفتاح واجهة برمجة تطبيقات خرائط جوجل. فهو يغطي جميع الخطوات المفصلة في الخيار الثاني، بالإضافة إلى كيفية تقييد مفتاحك للحفاظ على أمانه. (تذكر أن خرائط جوجل تسمح بـ 10,000 تحميل مجاني للخريطة كل شهر. كل 1,000 تحميل بعد ذلك يكلف 7 دولارات). بمجرد الانتهاء، الصق مفتاح واجهة برمجة تطبيقات خرائط جوجل في حقل الإدخال.
- اضبط الإعدادات العامة حسب رغبتك. يشمل ذلك كيف يجب أن تبدو الخريطة وعدد المواقع التي تريد إضافتها إليها. تستخدم لقطات الشاشة هنا مكاتب Jotform في سان فرانسيسكو وكندا لعرض خريطة متعددة الدبابيس، ولكن يمكنك إضافة موقع واحد أو أي عدد تحتاجه. انقر على متابعة (Continue) عند الانتهاء.
- قم بتغيير إعدادات النمط مثل المظهر أو الخط أو CSS المخصص. انقر على متابعة (Continue) عند الانتهاء.
- قم بتخصيص التخطيط والميزات الإضافية في هذه الخطوة الأخيرة. انقر على جربها على موقعك الإلكتروني مجانًا (Try It on Your Website for Free) عندما تكون جاهزًا.
- قم بالتسجيل للحصول على حساب Jotform مجاني أو قم بتسجيل الدخول إلى حساب حالي. يظهر كود التضمين بعد الانتهاء من تسجيل الدخول. انقر على نسخ الكود (Copy Code).
- أضف كود التضمين إلى صفحتك باستخدام مكوّن HTML مخصص، باتباع الخطوات من 7 إلى 11 من الخيار الأول: أدرج المكوّن، والصق الكود، ثم انقر على نشر (Publish) أو حفظ (Save).
- افتح الصفحة على هاتفك. على عكس إطار iFrame الأصلي في الخيار الأول، تقوم الأداة بتغيير حجمها لتناسب الشاشة من تلقاء نفسها، لذلك فإن الخريطة التي تم اقتصاصها على الهاتف المحمول هناك تُعرض بالكامل هنا.
قم بتنمية موقع ووردبريس الخاص بك باستخدام أدوات ذكية وبدون خادم (serverless)
إن بناء ميزات ذكية في موقعك الإلكتروني يعني عادةً الدفع مقابل إضافات جديدة أو المعاناة مع الأكواد. تساعدك Jotform على تخطي كل ذلك: إلى جانب أداة خرائط جوجل، يقدم دليل أدوات موقع الويب من Jotform أكثر من 150 أداة مجانية وبدون تعليمات برمجية (no-code)، قابلة للتهيئة بمجرد لصق مقتطف HTML بسيط على موقعك الإلكتروني.
تتوافق هذه الخيارات جيدًا مع أداة الخرائط:
- أداة ساعات العمل: تعرض هذه الأداة ساعات العمل، بما في ذلك حالة “مفتوح” أو “مغلق” المباشرة التي يمكنك وضعها بجوار خريطتك، حتى يعرف الزوار الذين يجدونك على الخريطة على الفور ما إذا كنت متاحًا لاستقبالهم. لا تتطلب الأداة مفتاح واجهة برمجة التطبيقات (API key).
- أداة حجز المواعيد: أضف ميزة الحجز إلى موقعك الإلكتروني حتى يتمكن الأشخاص من تحديد موعد معك. تدعم هذه الأداة إضافة أوقات التوفر، وإدراج أنواع خدماتك مع المدة والأسعار، وقبول الحجوزات دون الحاجة إلى أداة إضافية.
- أداة الأسئلة الشائعة (FAQ): تسرد هذه الأداة إجابات الأسئلة المتداولة في قائمة قابلة للطي (accordion) وقابلة للبحث. القيام بالشيء نفسه في ووردبريس أمر سهل، ولكن الحصول على التجربة المصقولة التي تقدمها هذه الأداة قد يعني التعامل مع الأكواد أو تثبيت إضافة أخرى.
إذا كنت تستخدم خطة استضافة ووردبريس للمبتدئين، فإن الإضافات تستهلك موارد الخادم الأساسية، مما يبطئ موقعك الإلكتروني ويقدم تجربة مستخدم سيئة لزوارك. تعمل أدوات Jotform على البنية التحتية لـ Jotform، وبالتالي لا يتحمل موقعك الإلكتروني هذا العبء. هذا يحرر موارد الخادم، مما يجعل موقعك أسرع وأسهل في الاستخدام.
هل تتطلع إلى الارتقاء بمستوى موقع ووردبريس الخاص بك؟ تحقق من:
- دليلنا حول كيفية استخدام ووردبريس لمعرفة كيفية إنشاء موقع إلكتروني احترافي دون الاستثمار في دورة تصميم مواقع الويب
- تكامل ووردبريس من Jotform، والذي يبسط عملية جمع البيانات الخاصة بك من خلال الأتمتة والمدفوعات والميزات المتقدمة في منصة واحدة
الأسئلة الشائعة
نعم، يمكن أن يؤدي إلى إبطاء موقعك الإلكتروني. تسحب خريطة جوجل التفاعلية كمية كبيرة من ملفات JavaScript، تتراوح من 100 كيلوبايت إلى 2 ميجابايت. في أحد الاختبارات المستقلة، كلف التضمين الواحد 14 بالمائة من درجة سرعة الصفحة، مما زاد من الوقت اللازم حتى يصبح الموقع الإلكتروني جاهزًا للتفاعل بمقدار 6.5 ثانية. لمنع التباطؤ، قم بتحميل البرنامج النصي (script) للخريطة فقط في الصفحة التي تستخدمه، أو استخدم التحميل البطيء (lazy-load) لإطار iFrame، أو أضف صورة نائبة تتطلب النقر للتحميل (click-to-load).
نعم، ولكن ليس من خلال التضمين الأساسي لإطار iFrame. للحصول على علامات (markers) متعددة، قم بإنشاء خريطة في خرائطي من جوجل (Google My Maps): ضع دبابيسك، واجعلها عامة، وانسخ كود التضمين، ثم الصقه في موقعك الإلكتروني. على الرغم من أنه يمكنك وضع العدد الذي تريده، إلا أنه لا يمكنك تصميم الخريطة أو إضافة لوحات تفاصيل مخصصة. إذا كنت تريد دبابيس متعددة و ميزات تخصيص، فإن أداة خرائط جوجل من Jotform تفي بالغرض (تحتاج فقط إلى مفتاح واجهة برمجة تطبيقات خرائط جوجل الخاص بك).
نعم. تحتوي العديد من إضافات خرائط جوجل في ووردبريس على فئات مجانية قابلة للاستخدام تغطي الخرائط الأساسية، على الرغم من أن الميزات المتقدمة عادةً ما تكون مخصصة للخطة المدفوعة. إذا كنت تفضل عدم تثبيت إضافة، فإن كلًا من إطار iFrame الأصلي لخرائط جوجل و”خرائطي من جوجل” (Google My Maps) مجانيان. كما أن استخدام أداة خرائط جوجل من Jotform مجاني أيضًا، مما يضيف ميزات التخصيص وخرائط متعددة الدبابيس التي لا تزيد من حمل الخادم، ولكنها لا تزال تتطلب مفتاح واجهة برمجة تطبيقات خرائط جوجل.
هذا المقال مخصص لأصحاب مواقع ووردبريس، والشركات المحلية، ووكلاء العقارات، ومخططي الفعاليات الذين يرغبون في مقارنة طرق إضافة خريطة تفاعلية ومتوافقة مع الهواتف المحمولة باستخدام التضمينات، أو الإضافات (plug-ins)، أو الأدوات القابلة للتخصيص (widgets).
كتابة تعليق: