كل المقالات

موقع ووردبريس عربي: دليل RTL والخطوط وإنشاء موقع ثنائي اللغة

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

غلاف: تخطيطان للصفحة من اليسار لليمين ومن اليمين لليسار متقابلان حول محور
في هذا المقال

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

أهم النقاط

  • اضبط لغة الموقع على العربية، ثم اختر قالباً يدعم RTL فعلاً بدل ترقيع تصميم مكتوب للإنجليزية.
  • استخدم الخصائص المنطقية في CSS واختبر بمحتوى عربي حقيقي وليس نصاً تجريبياً، لأن أخطاء التخطيط لا تظهر إلا مع النص الحقيقي.
  • في الموقع ثنائي اللغة قرّر هيكل اللغات أولاً (إضافة أو شبكة مواقع أو مواقع منفصلة) لأن تغييره لاحقاً مكلف.
  • أضف وسوم hreflang متبادلة، ولا تفرض على الزائر لغةً بحسب موقعه الجغرافي.
  • استضف خطاً أو خطين عربيين على خادمك وقلّل الأوزان، فالخطوط العربية قد تكون ثقيلة.

بناء موقع ووردبريس عربي: ضبط دعم RTL بشكل صحيح

يتكوّن دعم RTL من ثلاثة أجزاء: إعداد اللغة، والقالب، وكود CSS الخاص بك.

إعداد اللغة

من «الإعدادات» ثم «عام» (Settings > General) اختر لغة الموقع. عند تفعيل لغة تُكتب من اليمين إلى اليسار كالعربية، يضيف ووردبريس dir="rtl" وسمة lang الصحيحة على عنصر <html>، ويحمّل نسخة RTL من أنماط لوحة التحكم. هذا هو الأساس، وكل شيء آخر يُبنى عليه.

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

القالب

القالب الذي «يدعم RTL» يوفّر أنماطاً معكوسة، عادةً ملف rtl.css أو نسخاً خاصة بالاتجاه، بحيث ينقلب التخطيط: ينتقل الشعار والقائمة لليمين، ويتبدل موضع الشريط الجانبي، ويُحاذى النص يميناً، وتنعكس الأسهم والسلايدر.

افحص ذلك قبل الشراء أو البناء. حوّل النسخة التجريبية إلى العربية وابحث عن قوائم مكسورة وأيقونات متداخلة وحقول نماذج غير محاذية وسلايدر يتحرك بالاتجاه الخاطئ. قالب يدّعي دعم RTL لكنه يحتاج عشرات التعديلات سيكلفك صيانة أكثر من قالب أنظف. كما قد تُدخل أدوات بناء الصفحات (page builders) مشكلات RTL خاصة بها، فاختبر عناصرها أيضاً.

كتابة CSS يعمل في الاتجاهين

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

.card {
	padding-inline: 1rem;
	margin-inline-start: auto;
	border-inline-start: 4px solid currentColor;
	text-align: start;
}

margin-inline-start تعني «الجانب الذي يبدأ منه السطر»، وهو اليسار في الإنجليزية واليمين في العربية. كما يتبع Flexbox وGrid اتجاه المستند افتراضياً، فتجنّب تثبيت float: left أو text-align: left. وتجد القائمة الكاملة في دليل MDN للخصائص المنطقية.

موقع ووردبريس عربي ثنائي اللغة (عربي وإنجليزي)

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

الخيارالمزاياالعيوب
موقع واحد مع إضافة تعدد لغات (مثل WPML أو Polylang)لوحة تحكم واحدة، قالب وإضافات مشتركة، ترجمات مرتبطة، مبدّل لغة سهلالاعتماد على إضافة، ومحتوى إضافي في قاعدة البيانات، والحاجة إلى اختبار التوافق مع الإضافات الأخرى
شبكة مواقع ووردبريس (Multisite)، موقع لكل لغةفصل نظيف، محتوى وحتى تصميم مستقل لكل لغةصيانة أكبر، إعدادات وإضافات منفصلة لكل موقع، ومزامنة المحتوى أصعب
مواقع منفصلة تماماً (نطاقات أو تثبيتات مستقلة)استقلال كامل، ويمكن استهداف دول أو استضافات مختلفةأعلى كلفة صيانة، وعمل مكرر، وإدارة مشتركة أضعف

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

هيكل الروابط

الخيارات الشائعة: مجلد فرعي (example.com/ar/)، أو نطاق فرعي (ar.example.com)، أو نطاق منفصل. المجلد الفرعي غالباً الأسهل إدارةً ويُبقي كل شيء تحت نطاق واحد، لكن الاختيار الصحيح يعتمد على وضعك. أياً كان اختيارك فحافظ على الاتساق.

وسوم hreflang ومبدّل اللغة

تخبر hreflang محركات البحث أي نسخة لغوية تعرضها لأي مستخدم. يجب أن تشير كل نسخة إلى نفسها وإلى كل النسخ البديلة، وأن تكون الإشارات متبادلة:

<link rel="alternate" hreflang="ar" href="https://example.com/ar/" />
<link rel="alternate" hreflang="en" href="https://example.com/" />
<link rel="alternate" hreflang="x-default" href="https://example.com/" />

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

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

الخطوط العربية والأداء

تحتوي الخطوط العربية على أشكال حروف كثيرة (يتغير شكل الحرف بحسب موضعه)، فقد تكون ملفاتها أكبر من الخطوط اللاتينية. بعض العادات تُبقي الموقع سريعاً، وهي مرتبطة بما ورد في دليل اجتياز Core Web Vitals:

  • اختر عائلة خط عربية واحدة، مع خط لاتيني فقط إن احتاجه التصميم. من الخطوط المفتوحة المعروفة: Cairo وTajawal وAlmarai وIBM Plex Sans Arabic وNoto Sans Arabic.
  • قلّل الأوزان. العادي والعريض يكفيان غالباً، وكل وزن إضافي هو ملف إضافي.
  • استضف ملفات الخط على موقعك بدل تحميل ملف تنسيق من طرف خارجي، واستخدم WOFF2.
  • استخدم font-display: swap لتظهر النصوص فوراً بخط احتياطي.
  • حمّل مسبقاً (preload) ملف الخط الأساسي المستخدم أعلى الصفحة فقط.
  • قسّم الخط (Subsetting) متى أمكن ليصبح العربي واللاتيني ملفين منفصلين يُحمَّل كل منهما عند الحاجة.

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

تفاصيل الطباعة العربية المهمة

الطباعة العربية الجيدة ليست مجرد قلب التخطيط.

  • ارتفاع السطر: تحتوي الكتابة العربية على نقاط وعلامات فوق السطر وتحته، فتحتاج مسافة رأسية أكبر من اللاتينية. زِد ارتفاع السطر مقارنةً بالنص الإنجليزي، وراجع نص المحتوى بالأحجام الصغيرة.
  • بلا تباعد بين الحروف: الحروف العربية متصلة. إضافة letter-spacing تكسر الوصل وتجعل الكلمات تبدو خاطئة. أزل التباعد من العناوين والأزرار العربية.
  • لا مائل ولا أحرف كبيرة: الكتابة العربية لا تعرف المائل ولا الأحرف الكبيرة. استخدم الوزن أو اللون للتمييز بدل المائل المصطنع.
  • الأرقام: قرّر بين الأرقام الغربية (0-9) والهندية (٠-٩) والتزم بها. تستخدم مواقع تجارية خليجية كثيرة الأرقام الغربية للأسعار وأرقام الهاتف للوضوح.
  • علامات الترقيم: استخدم الفاصلة العربية (،) والفاصلة المنقوطة (؛) وعلامة الاستفهام (؟) في النص العربي.
  • النص المختلط: قد تتسبب أسماء العلامات التجارية الإنجليزية والأرقام والروابط داخل الجمل العربية في بعثرة علامات الترقيم. غلّف هذه العناصر بوسم <bdi> أو استخدم dir="auto" في الحقول التي يكتبها المستخدمون.
  • الأيقونات: اعكس الأيقونات الاتجاهية (الأسهم، وأزرار السابق/التالي، وأسهم القوائم، وأشرطة التقدم) ولا تعكس الشعارات والساعات وأيقونات الهاتف وأزرار تشغيل الوسائط.

الروابط الدائمة العربية (Slugs)

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

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

اختبار تخطيط RTL في موقع ووردبريس عربي

لا تكتفِ بنظرة سريعة على الصفحة الرئيسية. راجع هذه القائمة:

  1. استخدم نصاً عربياً حقيقياً، بما فيه العناوين الطويلة وأسماء المنتجات الطويلة.
  2. افحص الهيدر والقائمة وقائمة الجوال والفوتر والنماذج والبحث والسلة والدفع.
  3. تحقق من صيغ التاريخ ورموز العملة ومحاذاة الأرقام والجداول.
  4. اختبر المحتوى المختلط بين العربية والإنجليزية، وحقول النماذج التي يكتب فيها المستخدم بأي من اللغتين.
  5. جرّب أحجام شاشات متعددة بما فيها الجوالات الصغيرة، ومتصفحات مختلفة.
  6. افحص رسائل البريد والفواتير وملفات PDF والإشعارات، فكثيراً ما يُنسى دعم RTL فيها.
  7. راجع مصدر الصفحة بحثاً عن قيم lang وdir وhreflang.
  8. راجع بيانات Schema المنظمة وعناوين الميتا بالعربية للتأكد من عدم قصّها أو ترميزها (encoding) بشكل خاطئ.

الأسئلة الشائعة

كيف أُنشئ موقع ووردبريس باللغة العربية؟

ثبّت ووردبريس، واضبط لغة الموقع على العربية من «الإعدادات» ثم «عام» (Settings > General)، واختر قالباً يدعم RTL بشكل سليم. بعدها اكتب المحتوى بالعربية، وجهّز خطوطاً عربية مناسبة، واختبر كل قالب صفحة (template) بنص حقيقي.

هل يدعم ووردبريس RTL افتراضياً؟

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

ما الأفضل للموقع ثنائي اللغة: إضافة أم مواقع منفصلة؟

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

هل أستخدم روابط عربية أم إنجليزية؟

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

ما هي hreflang وهل أحتاجها؟

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

خطّط لموقع ووردبريس عربي ناجح

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

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