صفحة ويب أمام مرآة تعكسها من اليمين لليسار بعنصر منحرف، تعبيرًا عن إصلاح مشاكل RTL.

This article is available in English — Read in English

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

إزاي يتعامل ووردبريس مع اللغات من اليمين لليسار

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

الدالة is_rtl()

في ووردبريس دالة اسمها is_rtl() تعيد القيمة «صحيح» عندما تكون لغة الموقع الحالية من اليمين لليسار، مثل العربية. والنواة تستخدمها في أماكن كثيرة. فالدالة get_language_attributes() مثلًا تعتمد عليها لطباعة dir="rtl" على وسم <html>، والدالة get_body_class() تضيف بها الكلاس rtl إلى وسم body. فإذا كان قالبك يستدعي language_attributes() وbody_class() في رأس الصفحة، يحصل المتصفح على الاتجاه الصحيح للصفحة كلها.

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

ملف rtl.css وملف الاتجاه الخاص بالقالب

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

أما الملفات التي تضيفها بنفسك، فالطريقة الأنظف هي wp_style_add_data() مع المفتاح rtl. إذا ضبطته على 'replace'، يحمّل ووردبريس style-rtl.css بدل style.css عندما تكون اللغة من اليمين لليسار. وإذا ضبطته على true، يحمّل ملف الاتجاه إضافة إلى الملف الأساسي.

add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
    wp_style_add_data( 'mytheme-style', 'rtl', 'replace' );
} );

ولا تنسَ وضع ملف style-rtl.css بجوار style.css. كثير من المطورين يولّدونه تلقائيًا من الملف الأساسي بأداة مثل RTLCSS، ثم يصلحون القواعد القليلة التي يجب ألا تنعكس.

استخدم خصائص CSS المنطقية بدل اليمين واليسار

أكبر مصدر لمشاكل الاتجاه هو CSS مكتوب باتجاهات ثابتة: margin-left وpadding-right وfloat: left وtext-align: left. هذه القيم معناها واحد في كل اللغات، فالأيقونة التي يُفترض أن تأتي قبل العنوان في العربية تجدها بعده.

خصائص CSS المنطقية، الموثقة على MDN، تصف المكان بالنسبة لاتجاه الكتابة. فالخاصية margin-inline-start هي الهامش الأيسر في الإنجليزية والهامش الأيمن في العربية، وtext-align: start تحاذي النص لليمين في الصفحة العربية. وإرشادات التدويل في W3C تنصح بالأسلوب نفسه: حدّد الاتجاه بالخاصية dir في HTML، واستخدم «البداية» و«النهاية» في CSS.

/* Before: breaks in Arabic */
.card-icon { margin-right: 12px; text-align: left; }

/* After: works in both directions */
.card-icon { margin-inline-end: 12px; text-align: start; }

بدائل مفيدة تحفظها:

  • margin-left وmargin-right تصبحان margin-inline-start وmargin-inline-end.
  • padding-left وpadding-right تصبحان padding-inline-start وpadding-inline-end.
  • left وright في تحديد المواضع تصبحان inset-inline-start وinset-inline-end.
  • text-align: left تصبح text-align: start.
  • border-left تصبح border-inline-start.

نظاما Flexbox وGrid يتبعان اتجاه الكتابة أصلًا، فصف العناصر ينعكس وحده في الصفحة العربية. وإذا وجدت قائمة أو شبكة بطاقات ترفض أن تنعكس، فابحث عن flex-direction: row-reverse مكتوبة يدويًا، أو عنصر محدد الموضع بالخاصية left.

النص المختلط بين العربية والإنجليزية: dir وbdi وunicode-bidi

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

إرشادات W3C في هذا بسيطة:

  • حدّد اتجاه الصفحة مرة واحدة بـ dir="rtl" على وسم <html>. وووردبريس يفعل ذلك لك إذا كان القالب مكتوبًا بشكل صحيح.
  • عندما تعرف أن العبارة في الاتجاه المعاكس، لُفّها بإحكام في عنصر له dir خاص به، مثل <span dir="ltr">.
  • عندما يأتي النص من المستخدمين أو من قاعدة البيانات ولا تعرف اتجاهه، لُفّه في <bdi> أو أضف dir="auto". عندها يعزله المتصفح ويختار الاتجاه من أول حرف قوي فيه.
<p>رقم الطلب: <bdi>WC-1045</bdi></p>
<p>تابعنا على <span dir="ltr">@heshamsaad</span> للمزيد</p>

طيب، وماذا عن خاصية unicode-bidi في CSS؟ ينبه موقع MDN إلى أنها مخصصة لمصممي أنواع المستندات، وأن مؤلفي صفحات الويب لا ينبغي أن يغيّروها. وتنصح W3C كذلك بعدم تحديد الاتجاه الأساسي من خلال CSS. استخدم خصائص HTML أولًا، واترك unicode-bidi للحالات النادرة التي لا تستطيع فيها تعديل الكود.

الأيقونات والأسهم: ما الذي ينعكس وما الذي لا ينعكس

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

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

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

.rtl .icon-arrow-next,
.rtl .icon-arrow-prev {
    transform: scaleX(-1);
}

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

الخطوط العربية وطريقة تحميلها

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

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

وإذا كنت تحمّل الخطوط يدويًا، فاجعلها خفيفة:

@font-face {
    font-family: "Cairo";
    src: url("/wp-content/uploads/fonts/cairo-arabic.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}

القيمة font-display: swap، الموثقة على MDN، تعرض النص فورًا بخط بديل إلى أن يكتمل تحميل خط الويب. أما unicode-range فتغطي نطاقات Unicode العربية الأساسية، فلا يُحمَّل الملف إلا إذا وُجد نص عربي في الصفحة. ووزن الخطوط وطريقة تحميلها يؤثران في السرعة أيضًا، وقد شرحنا ذلك بالتفصيل في دليل تسريع مواقع ووردبريس العربية.

الأرقام العربية والأرقام الغربية

الأرقام العربية الهندية (٠١٢٣٤٥٦٧٨٩) رموز Unicode مختلفة عن الأرقام الغربية (0123456789). الناس يقرؤونها أرقامًا، لكنها بالنسبة للكود مش نفس الحاجة. وهذا يسبب مشاكل حقيقية:

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

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

function hs_normalize_digits( $value ) {
    $arabic  = array( '٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩' );
    $western = array( '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' );
    return str_replace( $arabic, $western, $value );
}

النماذج واتجاه حقول الإدخال

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

<input type="email" name="email" dir="ltr">
<input type="tel" name="phone" dir="ltr">
<textarea name="message" dir="auto"></textarea>

ضع dir="ltr" على الحقول اللاتينية دائمًا، وdir="auto" على حقول النص الحر حتى تأخذ كل فقرة اتجاه ما يكتبه الزائر. وتوثق W3C أيضًا خاصية dirname التي ترسل الاتجاه المكتشف إلى السيرفر مع بيانات النموذج، وهي مفيدة إذا كنت تخزن رسائل باللغتين. وأغلب إضافات النماذج تتيح إضافة كلاس أو خاصية لكل حقل، وإن لم تتح إضافتك ذلك، فسكربت صغير أو CSS على الحقل هو الحل البديل.

مشاكل الاتجاه في أدوات بناء الصفحات

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

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

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

إيميلات تظهر من اليسار لليمين

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

  • نسخ قديمة من القوالب. يحتوي القالب على نسخ من قوالب إيميلات ووكومرس داخل yourtheme/woocommerce/emails/ أقدم من دعم الاتجاه. وينبهك ووكومرس إلى النسخ القديمة في تقرير حالة النظام (System Status).
  • لغة خطأ وقت الإرسال. إذا وُلّدت الرسالة بينما يعمل ووردبريس بلغة من اليسار لليمين، تعيد is_rtl() القيمة «خطأ». راجع لغة الموقع ولغة حساب المدير الذي يطلق الرسالة.
  • إضافة تبني رسائلها بنفسها دون أي إعداد للاتجاه. وإضافات نماذج التواصل والحجوزات أمثلة شائعة على ذلك.

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

الروابط العربية وترميز النسبة المئوية

يسمح ووردبريس بالروابط (slugs) العربية. وخلف الكواليس، تحوّل الدالة sanitize_title_with_dashes() كل حرف عربي إلى شكله المرمّز بعلامة النسبة المئوية، فيُخزَّن الرابط بشكل مثل %d8%b5%d9%8a%d8%a7%d9%86%d8%a9. المتصفحات تعرض الحروف العربية في شريط العنوان، لكن عند نسخ الرابط في بعض التطبيقات أو الرسائل يظهر كسلسلة طويلة من الرموز.

وهناك حد للطول أيضًا. يقطع ووردبريس الرابط المرمّز عند 200 حرف، وكل حرف عربي يستهلك 6 منها، فيُقص العنوان العربي الطويل بعد ما يزيد قليلًا عن 30 حرفًا. اجعل الروابط العربية قصيرة ومعبّرة، أو استخدم رابطًا إنجليزيًا قصيرًا للنسخة العربية. وأيًا كان اختيارك، قرّر قبل النشر، لأن تغيير الرابط لاحقًا يكسر الروابط القديمة ما لم تضف تحويلًا (Redirect).

علامات استفهام بدل الحروف العربية: ترميز قاعدة البيانات

إذا ظهر النص العربي على شكل ????، فمعنى ذلك أن الحروف حُفظت عبر اتصال أو في عمود لا يستطيع تخزينها. انتقل ووردبريس إلى ترميز utf8mb4 في الإصدار 4.2، وملف wp-config-sample.php الافتراضي يضبطه هكذا:

define( 'DB_CHARSET', 'utf8mb4' );
define( 'DB_COLLATE', '' );

ولتعرف ما تستخدمه جداولك فعلًا، شغّل هذا الاستعلام في phpMyAdmin أو من سطر الأوامر:

SELECT TABLE_NAME, TABLE_COLLATION
FROM information_schema.TABLES
WHERE TABLE_SCHEMA = 'your_database_name';

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

إضافات تعدد اللغات والاتجاه لكل لغة

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

حل مشاكل RTL في ووردبريس: العرَض والسبب والعلاج

العرَض السبب المحتمل العلاج
التصميم كله محاذٍ لليسار القالب لا يطبع language_attributes()، أو لغة الموقع ليست العربية راجع لغة الموقع ورأس القالب
التصميم انكسر بعد التحويل إلى قالب ابن القالب الابن لا يحتوي على rtl.css أضف ملف اتجاه للقالب الابن أو حمّل ملف الأب
الأيقونات في الجهة الخطأ من النص CSS باتجاهات ثابتة مثل margin-left انتقل إلى الخصائص المنطقية
الأسهم تشير إلى الاتجاه الخطأ أيقونات الاتجاه غير معكوسة اعكسها بـ .rtl وscaleX(-1)
أرقام الهاتف أو الأكواد مبعثرة نص لاتيني غير معزول داخل نص عربي لُفّه في bdi أو dir="ltr"
حقل الهاتف يرفض أرقامًا صحيحة أرقام عربية هندية في الإدخال وحّد الأرقام قبل التحقق
إيميلات الطلبات محاذية لليسار نسخ قوالب قديمة أو لغة من اليسار لليمين وقت الإرسال حدّث النسخ وراجع اللغة
العربية تظهر علامات استفهام جدول أو اتصال بترميز غير utf8mb4 صحّح الترميز واسترجع من نسخة احتياطية
الروابط العربية مقصوصة حد 200 حرف بعد الترميز استخدم روابط أقصر
خطوط مختلفة في الصفحة نفسها خط لا يحتوي على حروف عربية استخدم عائلة تغطي العربية

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

  1. افتح الصفحة الرئيسية ومقالًا ومنتجًا وصفحة الدفع بالعربية على الموبايل والكمبيوتر.
  2. تأكد من أن وسم <html> يحمل dir="rtl" وlang="ar".
  3. ابحث عن أيقونات وأسهم وسلايدرات تتحرك في الاتجاه الخطأ.
  4. اكتب بريدًا إلكترونيًا، ورقم هاتف بأرقام عربية، ورسالة مختلطة في كل نموذج.
  5. نفّذ طلبًا تجريبيًا واقرأ الرسائل في برنامجي بريد على الأقل.
  6. الصق بعض روابط الصفحات العربية في واتساب وفي رسالة بريد، وشاهد شكلها.
  7. احفظ مقالًا في عنوانه نص عربي وإيموجي، لتتأكد من أن قاعدة البيانات تخزن الحروف رباعية البايت.
  8. بدّل اللغات في الموقع متعدد اللغات وتأكد من أن الاتجاه يتغير في كل مرة.
  9. كرّر هذه القائمة بعد كل تحديث للقالب أو لأداة بناء الصفحات.

أسئلة شائعة

هل أحتاج إلى قالب عربي خاص؟

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

هل توجد إضافة تحل كل مشاكل الاتجاه تلقائيًا؟

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

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

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

لماذا تبدو لوحة التحكم مختلفة عن الموقع؟

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

كلمة أخيرة

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

المراجع