كيفية إضافة خريطة إلى صفحة الاتصال الخاصة بك على WordPress

نشرت: 2022-09-15

بافتراض أنك ترغب في الحصول على مقدمة حول كيفية إضافة خريطة إلى صفحة اتصال WordPress: تعد إضافة خريطة إلى صفحة جهات الاتصال الخاصة بك في WordPress طريقة رائعة لعرض موقعك بشكل مرئي للزائرين. هناك عدة طرق مختلفة يمكنك من خلالها إضافة خريطة إلى صفحة الاتصال الخاصة بك ، اعتمادًا على نوع الخريطة التي تريد استخدامها ومدى التحكم الذي تريده في مظهر الخريطة. في هذه المقالة ، سنوضح لك كيفية إضافة خريطة إلى صفحة الاتصال الخاصة بك على WordPress باستخدام أداة خرائط Google.

في هذا القسم ، سنوضح لك كيفية إنشاء صفحة اتصال وصفحة خريطة في WordPress باستخدام المكون الإضافي لنموذج الاتصال 7 ونموذج جهة الاتصال الخاص بنا. يجب تثبيت المكون الإضافي Contact Form 7 وتنشيطه على موقع WordPress الخاص بك حتى يكون فعالاً. ما الذي أحتاجه لإنشاء خريطة تضمين iframe في مؤلف خرائط Google المرئي؟ إليك كيفية إنشاء صفحة اتصال وخريطة باستخدام سمات WordPress. يتم تقديم دعم العملاء على مدار 24 ساعة في اليوم ، سبعة أيام في الأسبوع من قبل موظفين حائزين على جائزة Visualmodo. للعثور على خط العرض / خط الطول ، وتحويل عنوانك إلى خط عرض / خط طول ، انتقل إلى http://www.latlong.net/convert-address-to-lat-long.html. بالإضافة إلى ذلك ، يجب عليك إنشاء مفتاح API لخرائط Google لإدخال حقل خيارات خريطة الاتصال على جهاز الكمبيوتر الخاص بك.

هل يمكنني إضافة خريطة إلى WordPress؟

الائتمان: Mapbox

باستخدام WordPress ، يمكنك بسهولة إضافة خرائط Google إلى موقع الويب الخاص بك. ما عليك سوى نسخ رمز الموقع الذي وجدته على خرائط Google عند فتحه وإدخال عنوانك في حقل خرائط Google ، ثم لصقه في محرر WordPress.

أفضل طريقة لإضافة خرائط إلى WordPress هي القيام بذلك بطريقة بسيطة. يمكن استخدام المكون الإضافي لإضافة خريطة Google يدويًا إلى موقع الويب الخاص بك أو لإنشاء خريطة بنفسك. Google API مطلوب من قبل جميع ملحقات خرائط Google التي سأناقشها. انتقل إلى قسم معين أو اقرأ المقالة بأكملها بالنقر فوق ارتباط أدناه. سننتقل إلى مجموعة واسعة من المكونات الإضافية التي ستتطلب مفتاح API. من خلال الحد من هذا ، ستتمكن من منع الأشخاص من استخدام مفتاح API الخاص بك على مواقع WordPress. أوصي بالذهاب بدون مكونات إضافية وإدراج صورة خرائط Google في موقع الويب الخاص بك.

يجعل المكون الإضافي WP Google Maps من السهل إضافة خرائط Google إلى منشورات وصفحات WordPress. يمكنك إنشاء خريطة مصغرة باستخدام Lightbox لخرائط Google في دقائق باستخدام Maps Widgets لخرائط Google. تعد أحجام خرائط Google المخصصة وأنواع الخرائط (مثل خرائط الطريق) وأنظمة الألوان ورموز دبوس الخرائط المخصصة من بين الميزات المتاحة. تدعم Supsystic Ultimate Maps خيارات الخرائط البديلة مثل خرائط Bing و OpenStreetMap و Leaflet و Mapbox و Thunderforest ، بالإضافة إلى خرائط Bing. يستخدم المكون الإضافي خدمات Mapbox مثل Studio Styles ومكتبة GL JS. يمكنك استخدام البرنامج المساعد Interactive Geo Maps لإنشاء موقع WordPress يعرض خرائط تفاعلية. يمكنك بسهولة تعيين مواقع المتاجر باستخدام المكون الإضافي WP Store Locator.

تسمح لك المكونات الإضافية بتخصيص مظهر الخريطة ، وتوفير تسميات مخصصة لحقول الإدخال ، وتصفية النتائج حسب نصف القطر. تعد إضافة خرائط Google إلى موقع WordPress الإلكتروني باستخدام الرموز القصيرة أمرًا بسيطًا باستخدام Flexible Map. يهدف المكون الإضافي Stellar Places ، المتوفر في Android Market ، إلى مساعدتك في إنشاء المواقع المستندة إلى خرائط Google وإدارتها وعرضها. يتضمن أيضًا ميزة إزالة علامة السحب والإفلات وعدد غير محدود من الخرائط للاختيار من بينها. يمكن أن يحتوي ملف KML الذي تحفظه أيضًا على إحداثيات المركز وعناوين الشوارع وعناوين URL لعرض الخريطة.

كيف يمكنني إنشاء خريطة Google مخصصة في WordPress؟

عند النقر فوق المكونات الإضافية ، أضف ميزة جديدة. يرجى كتابة الاسم Snazzy Maps في مربع البحث إذا كنت تبحث عن مكون إضافي. بعد العثور عليه ، ما عليك سوى النقر فوق الزر تثبيت وسيتم تنشيطه. أصبح من الممكن الآن الوصول إليه تحت Appearance.

كيف أقوم بإضافة رمز خريطة إلى WordPress؟

تعد إضافة رمز خريطة إلى WordPress عملية من خطوتين. أولاً ، تحتاج إلى العثور على رمز الخريطة الذي تريده وتنزيله على جهاز الكمبيوتر الخاص بك. ثانيًا ، تحتاج إلى تحميل رمز الخريطة إلى موقع WordPress الخاص بك وإضافته إلى قائمتك.

تعد رموز العلامات المخصصة طريقة ممتازة لتخصيص خريطة موقع الويب الخاص بك. يمكن العثور هنا على ثلاث طرق لاستخدام العلامات المخصصة على خريطتك. يمكن تغيير فئات الأيقونة والعلامة المحددة والعلامة الجديدة. إذا كنت تشعر بالمغامرة ، فيمكنك الحصول على مجموعة مجانية من رموز خرائط Google. بعد ذلك ، في قسم إضافة فئة جديدة ، انقر فوق الزر إضافة فئة جديدة. يمكنك اختيار رمز علامة بإدخال عنوان URL الخاص به أو تحميل صورة إلى مكتبة الوسائط باستخدام الزر "تحميل صورة". يمكن تمكين تبديل Retina Ready كما هو موضح في لقطة الشاشة أدناه إذا اخترت رمزًا لاستخدامه.

صفحة الاتصال مع خريطة Html

تعد صفحة الاتصال التي تحتوي على خريطة html طريقة ممتازة لتزويد زوارك بطريقة الاتصال بك. يسمح لهم بملء نموذج باسمهم والبريد الإلكتروني والرسالة. كما يوفر خريطة حتى يتمكنوا من معرفة مكان وجودك.

في هذا التمرين ، ستقوم بترميز خريطة iframe ، وستنظر أيضًا في المفاهيم التي تعلمتها في الدروس السابقة من خلال مشاهدة الفيديو. نستخدم عنصر iframe في مقتطف الشفرة الطويل لتحميل صفحة HTML أخرى داخل إطار في صفحة HTML الخاصة بنا. للبدء ، سنحتاج إلى إنشاء عنصر نموذج يقوم بتغليف جميع نماذج الإدخال في تعليق نموذج الاتصال الخاص بنا. لإنشاء عنصر نموذج فتح وظيفي ، يجب أن نضيف عنصرين. الإجراء الأول الذي نتخذه هو المكان الذي سيرسل فيه النموذج معلومات الإدخال الخاصة به. عندما يحاول المستخدم إرسال النموذج دون تقديم اسمه الكامل ، فإننا نستخدم سمة مطلوبة في السطر 4 لإخطاره. من أجل إرسال النموذج ، يجب أن تكون السمة المطلوبة موجودة.

يتم دمج هذه الوظيفة في HTML5 بالنسبة لنا. عندما ندخل آخر إدخال لدينا في السطر 11 ، يوجد زر نموذج للإرسال. يمكن رؤية النص الذي يظهر عند النقر فوق زر الإرسال الخاص بنا في سمة القيمة.

كيفية إضافة خريطة جوجل في ووردبريس تذييل

من خلال تسجيل الدخول إلى حساب مسؤول موقع الويب الخاص بك ، يمكنك إدخال رمز خريطة Google ، وكذلك بيانات خرائط Google. تحت منطقة عنصر واجهة المستخدم 1 ، ستجد منطقة التذييل 1. يمكنك استخدام عنصر واجهة مستخدم التذييل المنطقة الثانية أو منطقة عنصر واجهة التذييل الثالثة أيضًا.

خرائط Google هي أشهر تطبيقات الملاحة المتوفرة على جميع الأنظمة الأساسية. إذا كان لديك عنوان متجر فعلي ، فإن إضافة خرائط Google إلى موقع الويب الخاص بك على WordPress يمكن أن يسهل على المستخدمين العثور على مواقعك ، مثل مكتبك أو متجر البيع بالتجزئة. يمكنك أيضًا استخدامه لتحسين رؤية محرك بحث موقعك وجذب المزيد من الزيارات إليه. يعد استخدام All in One SEO (AIOSEO) الطريقة الأكثر فعالية لإضافة خرائط Google إلى موقع الويب الخاص بك. باستخدامه ، يمكنك تحسين تصنيفات SEO الخاصة بك دون الحاجة إلى ترميز أي شيء. بمجرد إعداد AIOSEO ، يمكنك إضافة موقع واحد أو مواقع متعددة إلى خرائط Google وعرضها. إذا كان لديك أكثر من موقع مادي واحد ، فيجب عليك تمكين خيار "مواقع متعددة" ضمن علامة التبويب "الموقع" في Local SEO.

يتوفر Google Maps Platform مجانًا للجميع ، مع أول 300 دولار يتم إنفاقها على أساس الدفع أولاً بأول. لن يفرضوا عليك أي رسوم إذا لم تقم بالتحويل إلى حساب مدفوع يدويًا. بعد إنشاء مفتاح API لخرائط Google ، ستحتاج إلى تعديل إعدادات الخريطة في AIOSEO Local SEO. يتم تضمين كتلة خرائط Google أو الرمز القصير أو الأداة أو رمز PHP في العملية. كما يسمح لك بإضافة علامة مخصصة إلى خريطتك والاختيار من بين مجموعة متنوعة من أنماط الخريطة. بعد التحقق من إعداداتك ، يمكنك البدء في نشر الصفحة. يمكن استخدام قسم المظهر في موقع WordPress الخاص بك لإضافة خرائط Google إلى موقعك.

تتضمن هذه الفئة لوحات عناصر واجهة مستخدم WordPress. عند النقر فوق "، ستظهر كتلة عنصر واجهة المستخدم" AIO Local - Map "، وستتمكن من رؤية موقعك على شاشة عنصر واجهة المستخدم. يمكنك بعد ذلك تحديد إعدادات الأداة. إذا كانت لديك مواقع متعددة ، يمكنك إضافة عنوان أو تغيير عرض الخريطة وارتفاعها أو إضافة موقع إلى الخريطة.

كيف أقوم بإضافة رمز قصير لخريطة Google إلى WordPress؟

يمكن تحرير قسم خرائط Google في قائمة WordPress اليسرى بالنقر فوق تحرير الصفحات. بالنقر فوق الزر "تحرير" على الرمز المختصر لخرائط Google المتقدمة ، يمكنك التراجع عن 2HOVER. تظهر نافذة منبثقة جديدة بها إعدادات خرائط Google. 4 يمكنك تعيين الرمز المختصر لخرائط Google في هذه الصفحة بعدة طرق.

5 خطوات لإضافة خريطة إلى موقع WordPress الخاص بك

حدد موضوع الخريطة الذي تريده. يمكن أن يجعل عدد سمات الخرائط المختلفة المتاحة من الصعب اختيار واحدة تناسب وضعك بشكل أفضل. من الأفضل أن تبدأ بسمة خريطة مستندة إلى WordPress ، والتي تم تضمينها بالفعل في النظام الأساسي. بدلاً من ذلك ، يمكنك إنشاء سمة الخريطة الخاصة بك أو العثور على سمة مجانية. يجب أن يكون هناك مزود خرائط تختاره. سيُطلب موفر الخريطة الذي تختاره بمجرد اختيار سمة الخريطة. إن حقيقة وجود العديد من مقدمي الخدمة تجعل من الصعب اختيار المزود المناسب لك. إذا كنت ترغب في إجراء عملية شراء ، فيجب عليك التحقق من مقدمي الخدمة للحصول على فترات تجريبية مجانية. يمكنك تضمين الكود في هذا المنشور. انقر فوق رمز القائمة بجوار اسم الخريطة في لوحة التعديل لإضافة رمز التضمين لمنشورتك أو صفحتك. يجب عليك الآن نسخ ولصق التعليمات البرمجية المضمنة. انتقل إلى الخريطة. ما عليك سوى إضافة الخريطة إلى منشورك أو صفحتك مرة واحدة. للقيام بذلك ، حدد "تضمين هذه الخريطة" من أيقونة الخريطة ثم اضغط عليها. في الخطوة 3 ، سترى رمز التضمين الذي نسخته. بعد لصق هذا الرمز في حقل رمز التضمين ، سيظهر حقل رمز التضمين. إذا كانت الخريطة لا تعمل ، فجربها. بعد النقر على زر "المعاينة المباشرة" ، سيتم عرض الخريطة تلقائيًا ، وستكون قادرًا على معرفة ما إذا كانت صحيحة أم لا. تكتمل العملية إذا سارت الأمور بسلاسة.

خريطة نموذج الاتصال جاهزة

خريطة نموذج الاتصال هي نوع من نماذج الاتصال التي تم تصميمها لاستخدامها مع الخريطة. يشتمل النموذج على حقول لاسم المستخدم وعنوان البريد الإلكتروني والرسالة. يتضمن النموذج أيضًا خريطة للمنطقة التي يوجد بها المستخدم. يتم ملء الخريطة تلقائيًا بموقع المستخدم ويمكن للمستخدم بعد ذلك تحديد موقع معين على الخريطة.

من خلال ملء نموذج الاتصال ، يمكن للمستخدمين التواصل معك على الفور. يسمح لك نموذج الاتصال بطلب معلومات المستخدم أو التحكم فيها. يمكن أن يزيد نموذج الاتصال البسيط من فرص تحويل العميل المحتمل. لإضافة خرائط Google إلى نموذج الاتصال باستخدام نموذج الاتصال 7 ، يجب عليك أولاً تنزيل ملحق خرائط Google لـ WordPress الإضافي واتباع التعليمات الموجودة في هذا البرنامج التعليمي. يعد نموذج الاتصال 7 اختيارًا جيدًا كنموذج اتصال عند تطوير موقع الويب الخاص بك. يمكنك استخدام هذا المكون الإضافي للبدء بسرعة ، خاصة إذا كنت جديدًا في مجال البرمجة. أضف حقل خريطة إلى نموذج CF7 الخاص بك باستخدام ملحق خرائط Google لـ CF7.

تم تكوين نموذج الاتصال 7 مسبقًا بقالب جاهز للاستخدام يبدو كالتالي: ستظهر نافذة منبثقة إذا نقرت على زر خرائط Google ، والذي سيعرض حقل خريطة مع خيار إضافة واحد. يمكن للزوار العثور على موقعهم عن طريق وضع علامات عليه أو باستخدام ميزة البحث. يتضمن كل نموذج رمزًا قصيرًا يتم استخدامه لتضمينه في الصفحة.