دليل خرائط Google لـ وورد بريس: تضمين أو بدون مكون إضافي

هل تبحث عن طريقة لتضمين محتوى خرائط Google لـ وورد بريس على موقعك؟

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

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

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

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

اعتبارًا من 11 يونيو 2018 ، أصبح مفتاح API مطلوبًا لخرائط Google . إذا كنت قد نفذت بالفعل خرائط Google على موقعك ولم تعد تعمل ، فقد يكون هذا هو السبب. أو بالأحرى ، أنت تفتقد مفتاح API. الخبر السار هو أنه بالنسبة لـ 99٪ منكم ، يجب أن يظل مجانيًا. يوجد أدناه تسعير خرائط Google API .

تسعير خرائط Google API

تسعير خرائط Google API

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

ماذا تغير أيضا؟ لا شيء ، ولكن عليك الآن القيام بما يلي إذا كنت تريد استخدام خرائط Google في وورد بريس:

قم بالتسجيل للحصول على حساب Google Cloud Platform Console وقم بتكوينه.

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

أضف مفتاح API إلى رمز تضمين خرائط Google أو إعدادات المكون الإضافي.

كيفية الحصول على مفتاح API لخرائط Google

فيما يلي خطوات حول كيفية الحصول على مفتاح API لخرائط Google.

الخطوة 1

انتقل إلى Google Cloud Platform Console . إذا لم يكن لديك حساب بعد ، فأنشئ حسابًا ، فهو مجاني.

الخطوة 2

حدد أو أنشئ مشروعًا.

الخطوه 3

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

الخطوة 4

سيُطلب منك اختيار منتج واحد أو أكثر. هذا يعتمد على نوع الخريطة التي تستخدمها. على سبيل المثال ، إذا كنت تقوم بتضمين خريطة على موقع وورد بريس الخاص بك بدون مكون إضافي (كما هو موضح في الخطوات التالية أدناه) ، فيمكنك اختيار Google Maps Embed API.

واجهة برمجة تطبيقات Google Maps Embed

واجهة برمجة تطبيقات Google Maps Embed

إذا كنت تستخدم مكونًا إضافيًا مثل  Google Maps Widget (كما هو موضح في الخطوات التالية أدناه) ، فستختار Google Maps Static API.

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

الخطوة الخامسة

انقر فوق “تمكين”.

تفعيل Google Maps API

تفعيل Google Maps API

الخطوة 6

انقر فوق “واجهات برمجة التطبيقات” ثم تحت “بيانات الاعتماد” ، سترى مفتاح API الخاص بك.

مفتاح API لخرائط Google

مفتاح API لخرائط Google

الخطوة 7

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

للقيام بذلك ، ما عليك سوى النقر فوق اسم مفتاح API الخاص بك وسيسمح لك بإضافة قيد. بالنسبة إلى موقع وورد بريس الخاص بك ، يجب أن تكون إضافة مُحيل HTTP أمرًا جيدًا بدرجة كافية. مثل https://yourdomain.com/*. سيسمح لها ذلك بإجراء مكالمات على موقع الويب الخاص بك فقط.

قيود مفتاح API لخرائط Google

قيود مفتاح API لخرائط Google

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

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

وإليك كيف يعمل…

الخطوة 1: انسخ كود التضمين لخرائط جوجل

للبدء ، استخدم موقع خرائط Google لإنشاء الخريطة التي تريد تضمينها.

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

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

كيفية الوصول إلى رمز التضمين

كيفية الوصول إلى رمز التضمين

في قائمة عناصر القائمة ، حدد خيار مشاركة الخريطة أو تضمينها :

افتح خيارات التضمين

افتح خيارات التضمين

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

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

بمجرد القيام بذلك ، انقر فوق الزر نسخ HTML لنسخ كود التضمين:

كود تضمين خرائط جوجل ووردبريس

رمز تضمين خرائط Google

ستحتاج بعد ذلك إلى إضافة مفتاح API الخاص بك إلى الكود. لذلك يجب أن تبدو شفرتك كما يلي:

<iframe src = "https://www.google.com/maps/embed/v1/search؟key= YOUR_API_KEY ¶meters allowfullscreen> </iframe>

الخطوة 2: أضف كود التضمين لخرائط Google إلى موقع وورد بريس

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

إذا كنت تستخدم محرر قوالب وورد بريس Gutenberg الجديد الذي تم إصداره مع وورد بريس 5.0 ، فيمكنك القيام بذلك عن طريق إضافة كتلة HTML مخصصة ولصق كود التضمين في الكتلة. لا تنس إضافة مفتاح API الخاص بك .

كيفية إضافة كود التضمين في محرر قوالب وورد بريس

كيفية إضافة كود التضمين في محرر قوالب وورد بريس

يمكنك معاينة الشكل الذي ستبدو عليه خريطتك بالنقر فوق الزر معاينة أعلى الكتلة.

إذا كنت لا تزال تستخدم محرر TinyMCE الكلاسيكي ، فيمكنك إضافة رمز تضمين خرائط Google عن طريق فتح علامة التبويب ” نص” ولصق الرمز هناك:

كيفية إضافة كود التضمين في محرر وورد بريس Classic

كيفية إضافة كود التضمين في محرر وورد بريس Classic

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

وهذا كل شيء! لقد تعلمت للتو كيفية إضافة خرائط Google في وورد بريس بدون مكون إضافي.

استخدم خرائطي على Google لتضمين خرائط أكثر تعقيدًا بدون مكون إضافي

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

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

مثال خرائطي على Google

مثال خرائطي على Google

إليك كيفية استخدامه لإضافة خرائط Google مخصصة إلى وورد بريس.

تريد أن تعرف كيف زدنا من حركة المرور لدينا أكثر من 1000 ٪؟

انضم إلى أكثر من 20000 آخرين ممن يتلقون رسائلنا الإخبارية الأسبوعية مع نصائح من الداخل حول وورد بريس!

إشترك الآن

الخطوة 1: أنشئ خريطتك في خرائطي على Google

للبدء ، توجه إلى Google My Maps وقم بإنشاء خريطة جديدة. من هناك ، يمكنك استخدام واجهة منشئ الخرائط لبناء خريطتك:

واجهة خرائطي على Google

واجهة خرائطي على Google

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

الخطوة 2: إنشاء كود التضمين

بمجرد الانتهاء من بناء خريطتك ، ستحتاج إلى إنشاء كود التضمين.

قبل أن تتمكن من الحصول على هذا الرمز ، تحتاج أولاً إلى جعل خريطتك عامة. للقيام بذلك ، انقر فوق الزر ” مشاركة” . ثم ، انقر فوق تغيير … في النافذة المنبثقة:

إعدادات مشاركة خرائطي على Google

إعدادات مشاركة خرائطي على Google

بعد ذلك ، حدد تشغيل – عام على الويب وانقر فوق حفظ :

قم بتشغيل “مشاركة الرابط”

قم بتشغيل “مشاركة الرابط”

بمجرد القيام بذلك ، انقر فوق القائمة المنسدلة بالقرب من عنوان خريطتك وحدد تضمين في موقعي لإنشاء رمز التضمين الفعلي:

الوصول إلى رمز تضمين خرائطي

الوصول إلى رمز تضمين خرائطي

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

رمز تضمين خرائطي

رمز تضمين خرائطي

الخطوة 3: أضف كود التضمين إلى موقع وورد بريس

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

إذا لم تكن متأكدًا من كيفية القيام بذلك ، فانقر هنا للانتقال إلى هذا القسم من البرنامج التعليمي من الأعلى .

استخدم البرنامج المساعد لخرائط Google وورد بريس بدلاً من ذلك

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

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

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

يمكنك فعل كل شيء دون الحاجة إلى مغادرة لوحة تحكم وورد بريس الخاصة بك.

بعضها يرتبط بـ وورد بريس. على سبيل المثال ، قد تتمكن من ربط علامات الخريطة بمنشورات وورد بريس.

يمكن أن يساعدك بعضها في تحسين خرائط Google للأداء ( المزيد حول هذا لاحقًا ).

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

هل تعاني من مشاكل التوقف و وورد بريس؟ Kinsta هو حل الاستضافة المصمم لتوفير الوقت! تحقق من ميزاتنا

القطعة خرائط جوجل

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

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

واجهة أداة خرائط Google

واجهة أداة خرائط Google

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

خرائط جوجل سهلة

يساعدك Google Maps Easy في إنشاء خرائط مخصصة باستخدام العلامات والتعليقات التوضيحية الخاصة بك.

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

واجهة سهلة لخرائط Google

واجهة سهلة لخرائط Google

بمجرد إنشاء خريطتك ، يمكنك تضمينها إما باستخدام رمز قصير أو وظيفة PHP.

إنترجيو

Intergeo هو خيار شائع آخر يتيح لك إنشاء خرائطك الخاصة باستخدام علامات مخصصة والتحكم في وظائف الخريطة.

بمجرد تثبيت البرنامج المساعد وتنشيطه ، ستتمكن من إنشاء خرائطك مباشرة من لوحة معلومات وورد بريس الخاصة بك:

واجهة Intergeo

واجهة Intergeo

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

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

Gutenberg Block For Google Maps Embed هو مكون إضافي بسيط يضيف كتلة مخصصة لخرائط Google إلى محرر قوالب وورد بريس Gutenberg الجديد.

باستخدام هذه الكتلة ، يمكنك تضمين أي عنوان واختيار أيضًا:

أبعاد

مستوى التكبير

الخريطة التفاعلية مقابل الخريطة الثابتة ( مرة أخرى ، الطريقة الأخيرة تساعد في الأداء)

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

يمكن لخرائط Google إبطاء موقع وورد بريس الخاص بك – لا تدع ذلك

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

قصة قصيرة طويلة ، يمكن أن يؤدي تضمين خرائط Google التفاعلية إلى إبطاء موقعك.

هناك عدة طرق يمكنك من خلالها مكافحة هذا.

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

خذ لقطة شاشة للخريطة لاستخدامها على موقعك

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

بهذه الطريقة ، يقوم موقعك بتحميل صورة عادية فقط – وليس كل البرامج النصية المرتبطة بخرائط Google.

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

صورة العنصر النائب لخرائط Google

صورة العنصر النائب لخرائط Google

أو يمكنك أيضًا استخدام واجهة برمجة تطبيقات خرائط Google الثابتة ، والتي تعرض صورة عادية بدون أي جافا سكريبت. تتيح لك بعض المكونات الإضافية لخرائط Google – بما في ذلك Google Maps Widget و Gutenberg Block For Google Maps Embed – استخدام Static API عند إنشاء خرائطك.

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

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

لقد كتبنا بالفعل عن كيفية التحميل البطيء للصور ومقاطع الفيديو وهي نفس الفكرة لخرائط Google.

هناك بعض المكونات الإضافية التي ستتيح لك القيام بذلك. على سبيل المثال ، يتيح لك المكون الإضافي a3 Lazy Load التحميل البطيء لتضمينات iframe ، والتي تتضمن خرائط Google:

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

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

الخيارات الأخرى هي:

تحميل BJ كسول

تحميل كسول بواسطة صاروخ WP

من السهل تحميل كسول

ملخص

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

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

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

هل لديك أي أسئلة أخرى حول استخدام خرائط Google على وورد بريس؟ اسمحوا لنا أن نعرف في التعليقات!

وفر الوقت والتكاليف وحقق أقصى قدر من أداء الموقع من خلال:

مساعدة فورية من خبراء استضافة وورد بريس ، 24/7.

تكامل Cloudflare Enterprise.

يصل الجمهور العالمي إلى 28 مركز بيانات حول العالم.

التحسين من خلال مراقبة أداء التطبيقات المضمنة لدينا.

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