هل تريد إنشاء خريطة بمواقع متعددة في WordPress باستخدام Elementor وEssential Addons؟
لنفترض أن لديك شركة لديها بالفعل عدة فروع في المدينة ، وتريد إنشاء خريطة رقمية توضح موقع تلك الفروع. إذا كان لديك موقع ويب مستند إلى WordPress ، فيمكنك إنشاء مثل هذه الخريطة دون عناء. هناك مكون إضافي رائع يمكنك استخدامه لإنشاء خريطة متعددة المواقع: الإضافات الأساسية.
الإضافات الأساسية est un module complémentaire Elementor premium vous devez donc également installer Elementor avant de pouvoir l'utiliser. Vous pouvez utiliser la version gratuite d'Elementor pour créer une carte avec le module Essential Addons.
La version gratuite d'Essential Addons est également disponible. Cependant, le widget pour créer une carte n'est disponible que sur la version payante. Vous pouvez télécharger la version payante d'Essential Addons sur son الموقع الرسمي.
Nous utiliserons la plateforme Google Maps pour créer une carte sur votre WordPress à l'aide d'Essential Addons. Avant de commencer, assurez-vous d'installer Elementor et Essential Addons.
ادمج خرائط Google مع الوحدة الإضافية الأساسية
Avant de pouvoir ajouter une carte Google Maps avec des modules Essential Addons, vous devez d'abord les intégrer. Vous avez besoin d'une clé API pour intégrer Google Maps aux modules Essential Addons.
Tout d'abord, visitez la وحدة تحكم واجهة برمجة تطبيقات Google وقم بتسجيل الدخول باستخدام حساب Google الخاص بك. أنشئ مشروعًا جديدًا من خلال النقر على القائمة المنسدلة في الأعلى والنقر فوق مشروع جديد.
امنح مشروعك الجديد اسمًا وانقر فوق الزر CREATE .
بمجرد إنشاء مشروعك الجديد ، حدده من القائمة المنسدلة وانقر فوق المكتبة على اللوحة اليسرى.
Google divise l'API de la plateforme Google Maps en 17 types. Vous pouvez les voir en cliquant sur le lien اعرضهم جميعا في القسم Cartes. تحتاج إلى تمكين واجهات برمجة التطبيقات اعتمادًا على ما تريد تحقيقه.
اكتشف أيضًا: كيفية إنشاء قالب منتج فردي مخصص في WooCommerce باستخدام Elementor
Dans notre cas, vous devez activer les API suivantes pour ajouter une carte de Google Maps à l'aide d'Essential Addons.
- اتجاهات API
- API التشفير الجغرافي
- API للخرائط جافا سكريبت
- مقاعد API
لتنشيط API ، حدد API الذي تريد تنشيطه (بالنقر فوقه) وانقر فوق الزر تفعيل.
Une fois l'activation des API requises terminées, revenez au tableau de bord principal de la console Google API et cliquez sur معرفات على اللوحة اليسرى. انقر فوق الزر Créer des informations d'identification وحدد مفتاح API. انسخ مفتاح API في النافذة المنبثقة التي تظهر.
قم بتسجيل الدخول إلى لوحة تحكم WordPress الخاصة بك وانقر فوق الإضافات الأساسية sur le panneau de gauche. Cliquez sur l'onglet عناصر وانتقل لأسفل في القسم خريطة جوجل المتقدمة. اضغط على الإعدادات ولصق مفتاح API الذي نسخته للتو.
انقر فوق الزر احفظ التغييرات لتطبيق التغيير الجديد.
ابدأ في إنشاء الخريطة
بمجرد دمج خرائط Google والملحقات الأساسية ، يمكنك البدء في إنشاء الخريطة. للقيام بذلك ، قم بإنشاء صفحة جديدة (Pages - > Ajouter ) أو عنصر جديد (Articles - > Ajouter) وتحريره باستخدام Elementor.
Avant de créer la page, définissez la mise en page en cliquant sur l'icône d'engrenage dans le coin inférieur gauche pour ouvrir le panneau Paramètres. Définissez la mise en page dans le menu déroulant.
Créez une nouvelle section en cliquant sur le bouton plus dans la zone d'édition. Pour avoir une zone plus large pour la carte, vous pouvez sélectionner la structure à une seule colonne. Faites glisser le widget خرائط جوجل EA du panneau gauche vers la zone d'édition.
انتقل إلى اللوحة اليسرى واضبط نوع البطاقة على علامة متعددة.
افتح القسم إعدادات محدد الخريطة وانقر على محدد الخريطة الحالي لتعديله. الصق خط الطول وخط العرض للموقع الأول الذي تريد إضافته إلى الخريطة. قم أيضًا بتعيين العنوان بالإضافة إلى الوصف.
Pour obtenir la latitude et la longitude d'un emplacement, ouvrez Google Maps et recherchez l'emplacement ( place ) dont vous souhaitez obtenir la latitude et la longitude. Une fois trouvé, cliquez avec le clic droit de la souris et un clic gauche sur le numéro qui apparait sur le menu contextuel.
يتيح لك هذا الإجراء بالتالي نسخ خط العرض (القيمة الأولى) وخط الطول (القيمة الثانية).
عند الانتهاء من إضافة خط الطول وخط العرض للموقع الأول ، انقر فوق الزر أضف عنصرًا لإضافة موقع آخر إلى خريطتك.
Ouvrez à nouveau Google Maps et recherchez le nouvel emplacement que vous souhaitez ajouter à la carte et copiez la longitude ainsi que la longitude et collez-les dans les champs respectifs comme celui ci-dessus. Répétez les étapes ci-dessus pour ajouter d'autres emplacements à la carte.
اقرأ أيضا: كيفية استخدام عنصر واجهة العنصر
Une fois l'ajout d'emplacements terminé, ouvrez le bloc ضوابط الخريطة لتمكين / تعطيل الأوامر التي تريد توفيرها على بطاقتك. يمكنك أيضًا ضبط مستوى التكبير / التصغير هنا.
يمكنك أيضًا فتح الكتلة موضوع الخريطة لتحديد مظهر خرائط Google الذي تريد استخدامه.
Jusqu'ici, vous avez créé avec succès une carte avec plusieurs emplacements. Vous pouvez ouvrir l'onglet الطراز لتحديد ارتفاع وعرض الخريطة.
إذا كنت تريد الحصول على خريطة كاملة العرض ، فقم بتعيين القسم الذي يحتوي على الخريطة على العرض الكامل. للقيام بذلك ، انقر فوق مقبض القسم.
Dans l'onglet et bloc تصميم اضبط عرض المحتوى على العرض الكاملr et l'Ecart de colonnes sur لا انحراف
انقر على زر نشرتER في أسفل اللوحة اليمنى لنشر صفحتك.
تضمين الخريطة في صفحة أو منشور
Si, pour une certaine raison, vous préférez intégrer votre carte à une page / article ( la page / article créé avec l'éditeur par défaut WordPress — Gutenberg ), vous pouvez utiliser le plugin WordPress كتل العنصر لجوتنبرج. سيقوم هذا المكون الإضافي بتحويل قالب Elementor إلى كتلة Gutenberg.
Pour enregistrer la carte que vous venez de créer en tant que modèle Elementor, cliquez sur l'icône de flèche à côté du bouton النشر / التحديث وحدد حفظ كقالب.
قم بتسمية النموذج الخاص بك وانقر فوق الزر حفظ.
Ensuite, créez une nouvelle page ou un nouvel article ( assurez-vous d'avoir installé à l'avance le plugin Elementor Blocks for Gutenberg ). Ajoutez un nouveau bloc et sélectionnez مكتبة العنصر وحدد النموذج الذي أنشأته للتو.
ريمارك: Si vous voyez un message “ Pour des fins de développement uniquement ” lors de l'ajout d'une carte, assurez-vous d'activer votre facturation Google Cloud. La nouvelle politique Google oblige les développeurs à activer le compte de facturation ( vous pouvez toujours utiliser l'API Google Maps gratuitement ).
احصل على Elementor Pro الآن !!!
الخاتمة
Voila ! C'est tout pour cet article qui vous montre comment créer une carte avec plusieurs emplacements avec Elementor. Si vous avez des soucis sur comment y arriver faites le savoir dans les تعليقات.
ومع ذلك ، يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...