
كيفية تضمين خرائط جوجل (Google Maps) في ووردبريس دون استخدام إضافات
تُعد خرائط جوجل من أفضل الطرق لعرض موقعك الجغرافي أو موقع عملك على الإنترنت. ورغم وجود الكثير من الإضافات التي تسهل عملية تضمين الخرائط، إلا أنه يمكنك القيام بذلك يدويًا دون الحاجة إلى أي إضافة خارجية. في هذا الدليل، سنستعرض طريقة تضمين خريطة جوجل في موقع ووردبريس خطوة بخطوة، مع توضيح كافة التفاصيل للمبتدئين.
الخطوة الأولى: الحصول على كود التضمين (Embed Code) من خرائط جوجل
- افتح خرائط جوجل: انتقل إلى
maps.google.com في متصفحك. - ابحث عن الموقع: اكتب اسم المكان أو العنوان الذي ترغب في عرضه على خريطتك واضغط إدخال.
- انقر على زر المشاركة: بعد ظهور المكان في الخريطة، اضغط على أيقونة مشاركة (Share) في الشريط الجانبي أو بجوار العنوان (أحيانًا تكون ضمن قائمة الخيارات).
- اختيار تبويب “تضمين خريطة” (Embed a map): في النافذة المنبثقة، انتقل إلى تبويب تضمين خريطة.
- نسخ كود التضمين: أسفل الخريطة، ستجد كود iframe. انقر على نسخ رابط HTML أو انسخ الكود يدويًا.
سيبدو كود التضمين تقريبًا بهذا الشكل:
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1..."
width="600"
height="450"
style="border:0;"
allowfullscreen=""
loading="lazy">
</iframe>
الخطوة الثانية: إضافة كود التضمين في صفحة أو مقال بووردبريس
هناك عدة طرق لدمج الكود في ووردبريس، إليك الطريقتين الأكثر شيوعًا:
1. استخدام محرر المكونات (Gutenberg)
- افتح محرر المكونات في ووردبريس عند إنشاء أو تعديل صفحة/مقال جديد.
- انقر على علامة (+) لاختيار مكوّن جديد.
- ابحث عن مكوّن HTML مخصص (Custom HTML) ثم أضفه.
- الصق كود التضمين (iframe) الذي نسخته من خرائط جوجل داخل هذا المكوّن.
- احفظ التغييرات أو انشر المحتوى ثم عاين الخريطة.
2. استخدام المحرر الكلاسيكي (Classic Editor)
- عند تعديل المقال أو الصفحة في المحرر الكلاسيكي، انتقل إلى وضع النص (Text) بدلًا من وضع المرئي (Visual).
- الصق كود الـ iframe في المكان الذي ترغب في إظهار الخريطة فيه.
- احفظ التغييرات، ثم اعرض الصفحة للتحقق من ظهور الخريطة بشكل صحيح.
الخطوة الثالثة: تخصيص حجم ومظهر الخريطة
يمكنك تعديل حجم الخريطة ونمطها حسب حاجة موقعك:
- تغيير العرض والارتفاع (width, height): في كود iframe، يمكنك ضبط قيمتي
width
وheight
كما تشاء، على سبيل المثال:width="100%" height="400"
. - إخفاء الإطار (border): عبر خاصية
style="border:0;"
يمكنك إزالة الحافة الرمادية حول الخريطة. - إضافة تنسيقات CSS: إذا أردت تخصيص التصميم أكثر، ضع الـ iframe داخل حاوية div ذات تصنيف (class) واكتب تنسيقاتك في ملف style.css أو في قسم “CSS إضافي”.
<div class="map-container">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1..."
width="100%"
height="400"
style="border:0;"
allowfullscreen=""
loading="lazy">
</iframe>
</div>
.map-container {
max-width: 800px;
margin: 0 auto; /* لجعل الخريطة في منتصف الصفحة */
/* يمكنك إضافة المزيد من الخصائص حسب رغبتك */
}
الخطوة الرابعة: تحسين الأداء والسرعة
تذكر أن تضمين خرائط جوجل يضيف طلبات إضافية على موقعك، ما قد يؤثر على وقت التحميل. إليك بعض النصائح:
- التحميل البطيء (lazy loading): إذا لم يكن مفعّلًا افتراضيًا في ووردبريس، يمكنك تفعيل lazy loading للإطارات المضمّنة (iframes) كي لا تُحمّل الخريطة إلا عند وصول المستخدم إليها.
- تقليل الأبعاد: إذا كانت الخريطة كبيرة جدًا، قد يساهم تصغير الأبعاد في تسريع التحميل.
- التحقق من الأدوات الإضافية: تأكد من أنك لا تضمّن أي مكتبات أو أدوات غير ضرورية مع الخريطة.
الخطوة الخامسة: نصائح إضافية لتجربة مستخدم أفضل
- إظهار مؤشرات الموقع بدقة: إذا أردت عرض موقع محدد، تأكد من وضع دبوس (Pin) دقيق بدلًا من مجرد ذكر المدينة.
- إضافة عنوان واتجاهات: يمكنك أيضًا ربط موقعك على خرائط جوجل بخاصية الاتجاهات (Directions) حتى يتمكن المستخدم من إيجاد أفضل طريق للمكان.
- التحقق من توافق الجوال: استخدم العرض بنسبة مئوية (width=”100%”) للتأكد من أن الخريطة تعمل جيدًا على الشاشات الصغيرة.
أهمية امتلاك موقع احترافي مع إتقان
عرض الخريطة بخطوات بسيطة يُضفي لمسة احترافية على موقعك، ويساعد زوارك في معرفة موقعك الجغرافي أو مواقع فروعك بسهولة. لكن تضمين خرائط جوجل ما هو إلا تفصيل ضمن مجموعة كبيرة من العوامل التي تحدد مدى تميز موقعك. من التصميم الجذاب إلى سرعة التحميل والأمان، كلها عناصر تلعب دورًا كبيرًا في نجاح موقعك.
هنا يأتي دور إتقان؛ نحن نقدم خدمات متكاملة لتطوير مواقع ووردبريس عربية بمستوى عالٍ من الاحترافية، مع التركيز على:
- تصميم عالِ الجودة: واجهات مستخدم جذابة ومريحة للمستخدم العربي.
- تحسين الأداء والأمان: نتأكد من أن موقعك سريع، آمن، ومتوافق مع أحدث المعايير.
- دعم واستشارات: نوفّر لك نصائح و حلول تقنية لضمان نجاح مشروعك الرقمي.
تواصل معنا الآن!
إذا كنت تحتاج إلى مساعدة في إنشاء أو تطوير موقع ووردبريس شامل، أو ترغب في إضافة خرائط جوجل وعناصر أخرى بطريقة احترافية، لا تتردد في التواصل مع فريق إتقان. ابدأ رحلتك الرقمية معنا عبر الرابط التالي:
ارتقِ بتجربة زوار موقعك وجعلهم يشعرون بالاحترافية والسهولة مع كل نقرة. دعنا نساعدك في بناء حضور رقمي متميز!