كيفية إضافة بحث الموقع بسهولة إلى موقع دليل على الويب في WordPress

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

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

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

لذا ، دعنا ننتقل إلى الخطوة الأولى!

تثبيت HivePress

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

أيضًا ، إذا وجدت صعوبة في ذلك ، يمكنك متابعة التسجيل أدناه لتثبيت HivePress مباشرةً من لوحة تحكم WordPress.

تركيب ملحقات

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

أيضًا ، يُظهر تسجيل الشاشة التالي العملية الشائعة لتثبيت امتدادات HivePress ، بحيث يمكنك متابعتها خطوة بخطوة.

إنشاء مشروع جديد

بمجرد الانتهاء من تثبيت المكون الإضافي وامتداد Geolocation ، فقد حان الوقت لإنشاء مشروع على Google Cloud Platform. بافتراض أن لديك بالفعل حساب Google ، يجب أن تكون قادرًا على الوصول إلى لوحة التحكم هذه دون أي مشاكل. ومع ذلك ، إذا لم يكن لديك حساب ، فمن الضروري التسجيل للحصول على حساب Google.

أنت الآن بحاجة إلى إنشاء مشروع بالنقر فوق الزر "إنشاء مشروع" ، ثم تسميته ، وأخيرًا ، انقر فوق الزر "إنشاء".

إعداد الفواتير

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

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

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

إنشاء مفتاح API

الخطوة التالية هي إنشاء مفتاح API لموقعك على الويب. للقيام بذلك ، انتقل إلى صفحة بيانات الاعتماد وحدد مشروعك.

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

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

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

تمكين تكامل خرائط جوجل

هذا هو! لقد قمت للتو بإنشاء مفتاح API ، وتتمثل اللمسة الأخيرة في تمكين خرائط Google على موقع الويب الخاص بك. بادئ ذي بدء ، انسخ مفتاح API في صفحة APIs والخدمات> بيانات الاعتماد . الآن ، إذا كنت تستخدم المكون الإضافي HivePress ، فانتقل إلى لوحة معلومات WordPress الخاصة بك وانتقل إلى HivePress> الإعدادات> عمليات التكامل> قسم خرائط Google . ثم الصق مفتاح API الخاص بك في الحقل المناسب وانقر على زر "حفظ التغييرات" لإضافة البحث عن الموقع إلى موقع الويب الخاص بك.

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

استكشاف الأخطاء وإصلاحها

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

لمعرفة سبب هذا الخطأ ، تحتاج إلى فتح وحدة تحكم JavaScript. يمكنك فتحه ببضع ضغطات على المفاتيح تختلف حسب متصفحك. تحقق من الإجابة على StackOverflow التي تشرح كيفية فتح وحدة تحكم JavaScript. إذا كنت تستخدم متصفح Chrome ، فيمكنك ببساطة الضغط على CTRL+Shift+I لفتحه. بمجرد فتحه ، سترى رسالة الخطأ ، شيء مثل هذا.

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

• MissingKeyMapError ؛
• InvalidKeyMapError ؛
• ApiNotActivatedMapError ؛
• RefererNotAllowedMapError.

ومع ذلك ، إذا كان لديك خطأ غير مدرج أعلاه ، فتحقق من وثائق Google Maps API Error Messages لاكتشاف الخطأ وكيفية إصلاحه.

خطأ KeyMapError

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

InvalidKeyMapError

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

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

ApiNotActivatedMapError

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

على سبيل المثال ، إذا كنت تستخدم المكون الإضافي HivePress بامتداد الموقع الجغرافي الخاص به وتريد إضافة بحث عن الموقع إلى موقع الويب الخاص بالدليل ، فأنت بحاجة إلى تمكين والسماح بالوصول إلى واجهات برمجة تطبيقات Google التالية: Maps JavaScript API ، و Places API ، و Geocoding API . يمكنك إلقاء نظرة على لقطة الشاشة باستخدام واجهات برمجة التطبيقات الضرورية.

RefererNotAllowedMapError

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

الخبر السار هو أنك قمت بإعداد وإدخال مفتاح API بشكل صحيح ، ولا يوجد سوى تفاصيل دقيقة واحدة تحتاج إلى إصلاحها. انتقل إلى صفحة بيانات الاعتماد وانقر على مفتاح واجهة برمجة التطبيقات لتعديله. في قسم قيود التطبيق ، حدد "مراجع HTTP (مواقع الويب)". ثم املأ قيود موقع الويب كما هو موضح أدناه ولكن استبدل "example" باسم المجال الخاص بك وانقر فوق الزر "حفظ". قد يستغرق تفعيل الإعدادات ما يصل إلى 5 دقائق.

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

لا يزال لا يعمل

• إذا قمت بتغيير شيء ما في قيود API Key الخاصة بك - انتظر ما يصل إلى 5 دقائق حتى تدخل الإعدادات حيز التنفيذ ؛
• في حالة استمرار وجود خطأ - تحقق من وحدة تحكم JavaScript مرة أخرى للحصول على مزيد من التفاصيل. قد يكون هناك خطأ بعد حل المشكلة الأولى ؛
• يمكنك أيضًا محاولة مسح ذاكرة التخزين المؤقت للمتصفح.

خاتمة

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

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

بالإضافة إلى ذلك ، لا تتردد في مراجعة مقالاتنا:

• أشهر ملحقات دليل WordPress المجانية
• أهم موضوعات دليل WordPress
• أخطاء يجب تجنبها عند إنشاء موقع دليل WordPress