هل تحتاج إلى العثور على كيفية إضافة خرائط Google إلى WordPress باستخدام JetElements؟
إضافة خرائط جوجل إلى موقع ووردبريس الخاص بك تُحسّن تجربة المستخدم من خلال توفير معلومات جغرافية دقيقة. ومع ذلك، هناك العديد من الإضافات التي يمكنك استخدامها لإضافة خرائط جوجل إلى موقعك على ووردبريس. JetElements هو واحد.
يُسهّل JetElements، وهو إضافة قوية لـ Elementor، عملية التكامل هذه. إنها إضافة مميزة لـ Elementor طورتها Crocoblock. توفر مجموعة من أدوات التخصيص، بما في ذلك أداة مخصصة لخرائط جوجل. تتيح لك إنشاء خرائط مخصصة دون كتابة سطر واحد من التعليمات البرمجية. علاوة على ذلك، فهي سهلة الاستخدام وتتكامل بسلاسة مع أي قالب ووردبريس.
في هذه المقالة، سنستكشف كيفية إضافة خرائط Google إلى WordPress باستخدام المكون الإضافي والأداة المساعدة JetElements WordPress خريطة متقدمة.
قبل البدء، تأكد من تثبيت Elementor ويمكنك استخدام JetElements على موقع ووردبريس الخاص بك. يمكنك استخدام النسخة المجانية من Elementor لاستخدام JetElements، ولكن ستحتاج إلى شراء JetElements من موقعه الرسمي. الموقع الرسمي مقابل 19 دولارًا.
محتويات
خطوات إضافة خرائط Google إلى WordPress باستخدام JetElements
الخطوة 1: تثبيت JetElements و Elementor
ابدأ بتثبيت Elementor، وهو منشئ الصفحات المرئية لـ WordPress. بعد ذلك، أضف JetElements عبر لوحة تحكم WordPress الخاصة بك. قم بتنشيط كلا البرنامجين الإضافيين.
للمزيد من المعلومات، راجع دليلنا حول: كيفية إتقان Elementor على WordPress: التثبيت والاستخدام والميزات المتقدمة
الخطوة 2: احصل على مفتاح Google Maps API
قبل إضافة خرائط جوجل إلى موقعك الإلكتروني باستخدام JetElements، ستحتاج إلى الحصول على مفتاح API لدمج JetElements مع خرائط جوجل. يمكنك الحصول على مفتاح API من خلال وحدة تحكم Google API. لذا، تفضل بزيارة وحدة تحكم واجهة برمجة تطبيقات Google وقم بتسجيل الدخول باستخدام حساب Google الخاص بك.
بمجرد تسجيل الدخول ، قم بإنشاء مشروع جديد من خلال النقر على القائمة المنسدلة في الأعلى والنقر فوق مشروع جديد.
أدخل اسمًا لمشروعك وانقر على الزر CREATE.
حدد مشروعك الجديد من القائمة المنسدلة وانقر فوق المكتبة على اللوحة اليسرى.
لا توفر JetElements أي معلومات مفصلة حول واجهات برمجة التطبيقات التي تحتاجها لتمكين عمل عنصر واجهة المستخدم. خريطة متقدمة. وفقًا لتجربتنا ، يجب عليك على الأقل تمكين واجهات برمجة التطبيقات التالية:
- API التشفير الجغرافي
- API للخرائط جافا سكريبت
تقسم جوجل نفسها واجهة برمجة تطبيقات خرائط جوجل إلى 17 نوعًا. يمكنك الاطلاع عليها بالنقر على اعلان الكل في القسم Cartes.
لتفعيل واجهة برمجة التطبيقات (API)، حدد واجهة برمجة التطبيقات التي تريد تفعيلها (بالنقر عليها) ثم انقر فوق الزر. تفعيل.
بمجرد اكتمال تفعيل واجهة برمجة التطبيقات المطلوبة، ارجع إلى لوحة التحكم الرئيسية في وحدة تحكم Google API وانقر على معرفات على اللوحة اليسرى. انقر فوق الزر إنشاء بيانات اعتماد تسجيل الدخول وحدد مفتاح API. انسخ مفتاح API في النافذة المنبثقة التي تظهر.
بعد ذلك ، قم بتسجيل الدخول إلى لوحة معلومات WordPress الخاصة بك وانتقل إلى القائمة JetPlugins -> JetElements الإعدادات.
افتح علامة التبويب التكامل والصق مفتاح API الذي نسخته للتو في الحقل مفتاح API لخريطة Google.
الخطوة 3: أضف أداة خرائط Google
بعد دمج JetElements وخرائط جوجل، يمكنك البدء بإضافة الخريطة. للقيام بذلك، افتح الصفحة التي تريد إضافة الخريطة إليها في Elementor. في محرر صفحات Elementor، ابحث عن "المعالج".خريطة متقدمةفي مكتبة JetElements. اسحب وأفلت هذه الأداة في القسم الذي تختاره على الصفحة.
الخطوة 4: تخصيص البطاقة
قم بضبط العنوان الذي ترغب بعرضه. يمكنك تخصيص الارتفاع والتكبير/التصغير وإعدادات الخريطة الأخرى لتتناسب تمامًا مع تصميم موقعك الإلكتروني. كما يوفر JetElements خيارات لإضافة مواقع متعددة إلى خريطة واحدة، وهو مثالي للشركات متعددة المواقع.
يمكنك أيضًا تعديل إعدادات أخرى على بطاقتك. يمكنك إجراء هذه التعديلات من القسم إعدادات الخريطة.
لتغيير نمط الخريطة ، يمكنك فتح القسم نمط الخريطة.
الخطوة 5: أضف موقعك إلى الخريطة
يتم تعيين عنوان الدبوس افتراضيًا إلى عين لندن، لندن، المملكة المتحدة. يمكنك تغييره لإضافة موقع عملك.
للقيام بذلك، افتح القسم دبابيس ثم انقر على عنوان الرقم السري الموجود. الصق عنوان شركتك في الحقل. عنوان الدبوس وتعديل الوصف في الحقل دبوس الوصف.
لجعل عنوان الدبوس الذي حددته للتو مرئيًا على الخريطة، يجب عليك تحديد مركز الخريطة. على سبيل المثال، إذا كان موقع عملك في باريس، فيجب عليك تعيين مركز الخريطة إلى باريس.
لتحديد مركز الخريطة ، افتح القسم إعدادات الخريطة اكتب مرة أخرى مركز الخريطة المفضل لديك (اسم المدينة).
ريمارك: إذا ظهرت لك رسالة "لأغراض التطوير فقط" عند إضافة خريطة، فتأكد من تفعيل خدمة فوترة Google Cloud. تتطلب سياسة Google الجديدة من المطورين تفعيل حساب الفوترة (لا يزال بإمكانك استخدام واجهة برمجة تطبيقات خرائط Google مجانًا).
خطوة 6: حفظ ونشر
بعد الانتهاء من التخصيص، احفظ التغييرات وانشر الصفحة. يمكنك معاينة الصفحة للتأكد من عرض الخريطة بشكل صحيح على جميع الأجهزة.
فوائد استخدام JetElements لخرائط جوجل
لا يقتصر دور JetElements على تبسيط دمج خرائط جوجل فحسب، بل يوفر أيضًا خيارات تخصيص متقدمة. إنه أداة مثالية لمن يرغب في إنشاء موقع ويب احترافي دون تعقيدات تقنية. علاوة على ذلك، يتم تحديثه باستمرار لضمان توافقه مع أحدث إصدارات ووردبريس وخرائط جوجل.احصل على Elementor Pro الآن !!!
موارد مشابهة لهذه المقالة
- كيفية إنشاء النوافذ المنبثقة باستخدام Elementor
- Elementor مجاني مقابل Elementor Pro: مقارنة الميزات التفصيلية
- Elementor : كيفية تغيير الصورة بنقرة زر واحدة
- كيفية إنشاء تخطيط مع Elementor
- كيفية إنشاء نموذج باستخدام Elementor حر
الأسئلة الشائعة حول كيفية إضافة خرائط Google إلى WordPress باستخدام JetElements
هل JetElements متوافق مع جميع سمات WordPress؟
نعم، يعمل JetElements مع معظم سمات WordPress المتوافقة مع Elementor.
هل يمكنني إضافة مواقع متعددة إلى الخريطة؟
نعم، يتيح JetElements إضافة مواقع متعددة على خريطة واحدة.
هل من الضروري معرفة الكود لتخصيص البطاقة؟
لا، توفر JetElements واجهة بديهية لا تتطلب أي مهارات برمجية.
خاتمة
ها قد وصلنا إلى الحل! دمج خرائط جوجل في موقع ووردبريس الخاص بك أمرٌ ضروري لتحسين سهولة الوصول وتجربة المستخدم. بفضل JetElements، أصبحت هذه العملية سريعة وسهلة. هذه الإضافة خيار ممتاز لكل من يرغب في إضافة وظائف الخرائط بسلاسة تامة. إذا لم تستكشف بعد إمكانيات Elementor وJetElements، فقد حان الوقت للبدء.
هذا كل ما يتعلق بهذه المقالة التي تشرح كيفية إضافة خرائط جوجل إلى ووردبريس باستخدام JetElements. إذا واجهت أي مشكلة، فأخبرنا بذلك في التعليقات. تعليقات.
ومع ذلك ، يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...