Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress Plugins
Code

إنشاء خرائط مخصصة مع البرنامج المساعد خريطة سفج

by
Difficulty:BeginnerLength:MediumLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Arabic (العربية/عربي) translation by Iwan Subhan (you can also view the original English article)

Final product image
What You'll Be Creating

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

في هذا البرنامج التعليمي ، سأوضح لك كيفية استخدام بديل - وهو مكوِّن وورد يُسمى خريطة سفج والذي يتيح لك إضافة خرائط تفاعلية إلى موقعك. يمكنك بعد ذلك تخصيص خرائطك باستخدام الألوان والعناصر النائبة وملفات الزملاء ، والسماح للمستخدمين بالبحث عنها.

سأساعدك في كيفية إعداد خريطة باستخدام المكون الإضافي ، وكيفية تخصيصه ، وكيفية إضافته إلى صفحة في موقعك.

ماذا ستحتاج

لمتابعة هذا البرنامج التعليمي ، ستحتاج إلى:

  • تركيب وورد
  • تثبيت البرنامج المساعد خريطة سفج  وتنشيطها
  • بياناتك - المواقع التي تريد رسم خريطة لها (لا تحتاج إلى مراجع أو إحداثيات للخرائط نظرًا لأن المكون الإضافي سوف يعتني بالموظفين نيابة عنك)

يمكنك إنشاء خريطة لأي مكان في العالم ، ولكن بالنسبة لهذا البرنامج التعليمي ، سأقوم بإنشاء خريطة للمملكة المتحدة ، حيث أكون من حيث أقوم بذلك ، وقم بتمييزها مع أماكن العطلة المفضلة هنا. من يدري ، قد أكون مصدر إلهام لك!

الربط بواجهة برمجة تطبيقات خرائط جوجل

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

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

ستحتاج إلى تمكين ما يلي في لوحة تحكم واجهة برمجة تطبيقات جوجل (وليس في شاشات المكوّنات الإضافية في مشرف الموقع):

  • أبي للخرائط
  • واجهة برمجة تطبيقات الترميز الجغرافي
  • أماكن أبي
  • وضع قيود على "بلا"

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

أنت الآن جاهز لإنشاء خريطة.

خلق خريطة

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

create a map

بعد تحديد بلدك ، سيعمل المكون الإضافي تلقائيًا على إنشاء خريطة لتخصيصها:

a new map of the UK before customization

ابدأ بوضع اسم له في حقل العنوان على الجانب الأيمن ، ثم انقر فوق الزر حفظ ، ثم يمكنك البدء في تخصيصه.

إضافة ألوان مخصصة

عند استيراد خريطتك لأول مرة ، ستظهر باللون الأسود على خلفية رمادية. دعونا تخصيص ذلك.

انقر على "ألوان" في القائمة المنسدلة في صفحة تعديل الخريطة ، للوصول إلى شاشة تحرير الألوان.

the colors screen before customization

الآن قضاء بعض الوقت التغيير والتبديل في الألوان في الخريطة الخاصة بك باستخدام جامعي الألوان. يمكنك تخصيص لون الخلفية واللون الأساسي لمناطقك ولون الحدود ولون التحويم واللون المحدد والمزيد.

عند تحرير التمرير والحالات المحددة ، يمكنك إما تعيين لون مخصص أو استخدام إعداد السطوع لاستخدام إصدار أكثر سطوعًا أو لونًا باهتًا من اللون الأساسي.

سأستخدم لوحًا من البلوز حتى لا تبدو خريطتي متوهجة جدًا.

إليك كيفية ظهور خريطتي مع مقاطعة واحدة محددة وأخرى في حالة التمرير:

a map of the UK in blue

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

مرة أخرى ، أنا متمسك بلوحة من البلوز:

map of the UK with counties in varying shades of blue

خذ بعض الوقت لتعديل هذه. الجزء الصعب هو ترتيب الألوان بحيث تكون المقاطعات أو الدول المجاورة بألوان مختلفة!

إضافة حقول قاعدة البيانات

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

انقر فوق أيقونة تحرير الحقول في الجزء العلوي من الجزء لبدء إضافة الحقول. سأضيف ما يلي إلى علاماتي:

  • اسم
  • وصف
  • صورة
  • علامة

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

الحقل الأساسي هو علامة ، وبدون ذلك ، لن تتمكن من إضافة هذه العلامات إلى خريطتك.

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

creating a field for the database

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

إضافة الأماكن والعلامات

الآن للجزء المرح!

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

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

adding locations to the map

استمر في إضافتها حتى تحصل عليها كلها. هنا لي:

a map of the UK with locations added

الآن بعد أن لديك المواقع في قاعدة البيانات ، حان الوقت لإضافة علامة لكل واحد.

لكل موقع ، ابدأ في كتابة العنوان في حقل العلامة. سيقترح المكون الإضافي تلقائيًا موقعًا أثناء الكتابة:

adding a marker to a location

حدد المكان الصحيح من القائمة التي يمنحكها المكوّن الإضافي ، ثم احفظ موقعك. كرر هذا لجميع المواقع في قاعدة البيانات الخاصة بك.

عند الانتهاء ، ستبدو قائمة مواقعك بالشكل التالي:

A map of the UK with markers added

إعداد بوبوفيرس

لديك الآن خريطتك ومواقعك وكل علاماتك. لكنك لم تنته بعد! والخطوة التالية هي تكوين بوبوفيرس. وبهذه الطريقة ، عندما يشاهد أحد الأشخاص الخريطة ، يمكنه المرور فوق المواقع التي أضفتها ورؤية الوصف والصورة (أو أي شيء آخر أضفته إلى خريطتك الخاصة).

حدد علامة التبويب "إجراءات" في القائمة المنسدلة. مرِّر لأسفل للوصول إلى قسم علامة النقر وانقر على مربع الاختيار إظهار الرمز المميز. تأكد من وجود هذا المربع - فهناك عدد قليل منها على هذه الشاشة ، بالنسبة إلى الأشخاص المنقطعين

بمجرد القيام بذلك ، تحتاج إلى إعداد القالب من أجل بوبوفيرس. انقر فوق ارتباط قالب كائن دب الاسترجاع لعرض جزء تحرير فارغ. ستحتاج إلى ملء هذا باستخدام مزيج من هتمل والحقول من المكوِّن الإضافي.

إليك الترميز الذي أستخدمه في الأعمال المتعلقة بالألغام:

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

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

حاول الآن النقر على أحد العلامات وستظهر لك صورة منقطعة:

a popover in the plugin admin screens

نصيحة: إذا لم تتمكن من رؤية صورة منبثقة ، فقد يرجع ذلك إلى أنك حددت مربع إظهار الإطار غير صحيح أو أنك تحرر القالب غير الصحيح. تأكد من أن مربع الاختيار الذي قمت بتحديده موجود في قسم علامة النقر في علامة التبويب "إجراءات" وأن القالب الذي تقوم بتحريره هو قالب كائن قاعدة بيانات كائن. يمكنك تحديد قوالب من القائمة المنسدلة في علامة التبويب قوالب.

تكوين الدليل والبحث

حتى يتمكن المستخدمون من رؤية تفاصيل مواقعك والبحث في المحتوى في الخريطة ، ستحتاج إلى تهيئة الدليل المستخدم للبحث والتأكد من تشغيل البحث.

اذهب إلى علامة التبويب الدليل. في تبديل الدليل ، حدد تشغيل. ضمن مصدر البيانات ، حدد قاعدة البيانات.

انقر فوق ارتباط قالب عنصر الدليل لتحرير القالب المستخدم للدليل. ستحتاج إلى إضافة حقولك بنفس الطريقة التي استخدمتها عند إضافة الأشخاص ، باستثناء الوقت الذي تستخدم فيه العناصر النائبة وليس HTML. أنا أقوم فقط بإضافة {{name}} ، ولكن قد ترغب في تضمين المزيد.

ملاحظة: إذا كنت لا ترغب في ظهور قائمة بالمواقع بجوار خريطتك ، فقم بإيقاف تشغيل "الدليل" إلى "إيقاف" ولا تقلق بشأن القالب.

الآن اضغط على زر حفظ لحفظ خريطتك. حان الوقت لإضافته إلى صفحة في موقعك.

إضافة الخريطة إلى صفحة

افتح (أو أنشئ) الصفحة التي ستضيف الخريطة إليها.

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

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

وهنا خريطتي:

a map of the UK with markers on a page in the site

وعندما أختار أحد المواقع ، في ما يلي الجزء الظاهر:

a popover on the map in a page in my site

خريطةسفج يعطيك طريقة قوية لإضافة خرائط لموقعك

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

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.