RTL في قوالب ووردبريس: كيف تتعامل 10 قوالب شائعة مع التخطيط العربي

معظم مواقع ووردبريس العربية ترث جودة RTL من القالب. في 2 أكتوبر 2026 قرأنا CSS المرفق بـ10 قوالب شائعة: 1,168 من 1,254 تصريحًا حساسًا للاتجاه (93%) في أوراق أنماطها الرئيسية كانت قواعد left وright فيزيائية، و6 من 8 قوالب كلاسيكية لم تستخدم أي خصائص منطقية إطلاقًا.

أبرز النقاط

• 9 من 10 قوالب تحمل وسم rtl-language-support؛ و8 من 10 تأتي بورقة أنماط RTL لـCSS الرئيسي.
• ثلاثة قوالب تستبدل نسخة معكوسة كاملة (Astra وNeve وStorefront). وأربعة تضيف ملفًا تكميليًا صغيرًا فوقها (GeneratePress وKadence وBlocksy وOceanWP).
• Blocksy (71% منطقية) وHello Elementor (60%) فقط تكتبان معظم القواعد الحساسة للاتجاه كخصائص منطقية.
• قالبا البلوكات الافتراضيان لا يأتيان بملف RTL. النواة تعكس أنماط البلوكات، لكن الحشو المضمّن في شيفرة البلوكات لا يُعكس أبدًا.
• CSS الخاص بك (القالب الفرعي وAdditional CSS وCSS أداة البناء) لا يُعكس أبدًا. اكتبه بخصائص منطقية.

ما وجدناه في 10 قوالب ووردبريس شائعة

كل قالب فحصناه يدعم العربية بشكل ما، وتصل إلى ذلك بأربع طرق مختلفة. تسعة تحمل وسم rtl-language-support، وثمانية تأتي بورقة أنماط RTL لـCSS الرئيسي، واثنان فقط يكتبان معظم القواعد الحساسة للاتجاه كخصائص منطقية. الباقي يعتمد على ملف ثانٍ لعكسها.

القاعدة الفيزيائية ليست خطأً: ملف RTL يعكسها، و left:0; right:0 يظهر بالشكل نفسه في الاتجاهين. يُظهر العدد مدى اعتماد التخطيط العربي على ذلك الملف الثاني.

الوسم يعلنه المؤلف بنفسه. إذ تعرّف قواعد وسوم القوالب في WordPress.org وسم rtl-language-support بأنه قالب لا تظهر فيه مشكلات بصرية في وضع RTL، مع اختباره بإضافة RTL Tester التي حُدّثت آخر مرة في أغسطس 2020. أما Blocksy فلا تحمل الوسم، لكنها تحمّل ملف RTL.

كيف أجرينا الفحص

VOCTOS، 2 أكتوبر 2026. الإصدارات والوسوم من Theme API في WordPress.org، والشيفرة من ملف zip الرسمي لكل قالب. عددنا أوراق أنماط الواجهة التي يسجّلها PHP القالب، إضافة إلى الملف الذي يحمّله عندما تكون is_rtl() صحيحة. قسّم سكربت Python كل كتلة قواعد إلى تصريحات وعدّ الخصائص لا المحددات. الفيزيائية: margin وpadding وborder لليسار/اليمين، و left, right، وfloat أو clear أو text-align المضبوطة على left أو right. المنطقية: مكافئات -inline وقيم start/end.

الحدود: النسخ المجانية فقط. لا نعدّ CSS المولّد في PHP (تطبع Astra وKadence وNeve جميعها CSS مضمّنًا) ولا الصيغ المختصرة مثل margin: 0 8px 0 0 . هذه أعداد شيفرة لا صفحات معروضة: تقيس عبء الصيانة لا العيوب المرئية.

كيف يحمّل ووردبريس ورقة أنماط RTL؟

يحمّل ووردبريس CSS الخاص بـRTL بثلاث طرق. الملف المسمى rtl.css في جذر القالب يُحمّل تلقائيًا حين تكون لغة الموقع من اليمين لليسار. ويمكن لأي ورقة أنماط مسجلة أن تعلن توأمًا -rtl عبر wp_style_add_data()، إما باستبدال الأصلي أو بالتحميل بعده. كما يمكن لـPHP أن يتفرع حسب is_rtl() للشيفرة وCSS المضمّن.

الطريقة الأولى موثقة في قائمة ملفات القوالب في Theme Handbook: يُحمّل rtl.css تلقائيًا كلما كانت لغة الموقع من اليمين لليسار. وتستخدمها OceanWP. والطريقة الثانية هي wp_style_add_data() مع المفتاح rtl . مرّر 'replace' فيستبدل ووردبريس الملف؛ أو مرّر true فيحمّل ملف -rtl بعد الأصلي.

‏ suffix يحدد اسم الملف: إذ تُدرج الفئة WP_Styles في النواة -rtl قبله. بدون suffix، يصبح main.min.css هو main.min-rtl.css (تسمية Astra). ومع 'suffix', '.min' يصبح main-rtl.min.css (تسمية Neve). والتخمين الخاطئ يعني خطأ 404 وموقعًا عربيًا بلا تنسيق.

add_action( 'wp_enqueue_scripts', function () {
    $ver = wp_get_theme()->get( 'Version' );

    wp_enqueue_style(
        'mytheme-main',
        get_theme_file_uri( 'assets/css/main.min.css' ),
        array(),
        $ver
    );

    // On RTL locales, load assets/css/main-rtl.min.css instead.
    wp_style_add_data( 'mytheme-main', 'rtl', 'replace' );
    wp_style_add_data( 'mytheme-main', 'suffix', '.min' );
} );

// Direction-aware markup: swap arrow characters, as Hello Elementor does.
$prev_arrow = is_rtl() ? '→' : '←';
$next_arrow = is_rtl() ? '←' : '→';

is_rtl() تتحقق مما إذا كانت اللغة الحالية من اليمين لليسار، وتضيف body_class() الفئة .rtl . وتستخدم Neve الدالة is_rtl() لنقل زر العودة للأعلى بين left:20px و right:20px؛ وتبدّل OceanWP أيقونات الأسهم.

هل تحتاج قوالب البلوكات إلى rtl.css؟

في الغالب لا. تسجّل نواة ووردبريس نسخة -rtl من أنماط البلوكات وتستبدلها على مواقع RTL، لذا لا يأتي Twenty Twenty-Five وTwenty Twenty-Four بأي ملف RTL. الفجوة هي الأنماط المضمّنة: الحشو والهوامش المحفوظة في شيفرة البلوكات فيزيائية، ولا تمسّها أي ورقة أنماط RTL.

فحصنا ووردبريس 7.1.2، الإصدار الحالي. في blocks.php، تستدعي register_block_style_handle() الدالة wp_style_add_data( $style_handle_name, 'rtl', 'replace' ) كلما كان الموقع RTL ووُجد ملف -rtl. وفي script-loader.php، تفعل wp_default_styles() الشيء نفسه لـwp-block-library. وكل البلوكات الأساسية الـ87 التي لها style.css تأتي أيضًا بـstyle-rtl.css.

الأنماط الجاهزة هي نقطة الضعف. عبر 114 ملف قالب وجزء ونمط، يحمل Twenty Twenty-Five 139 تصريحًا فيزيائيًا في الأنماط المضمّنة ولا تصريح منطقيًا واحدًا؛ 7 منها تضبط حشوًا مختلفًا لليسار واليمين، مثل قيمة مسافة جاهزة على اليسار و padding-right:0. ويحمل Twenty Twenty-Four 91 و3. وفي العربية تبقى هذه الإزاحات حيث رُسمت.

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

لماذا تكتب خصائص منطقية إذا كان القالب يأتي بـrtl.css أصلًا؟

لأن ملف RTL في القالب لا يغطي إلا CSS القالب نفسه. القالب الفرعي وAdditional CSS وتجاوزات الإضافات وCSS أداة بناء الصفحات تصل إلى المتصفح كما كُتبت تمامًا، لذا فإن كل margin-left فيها يبقى على اليسار في العربية. أما الخاصية المنطقية فتجعل قاعدة واحدة صحيحة في الاتجاهين.

تقول إرشادات التدويل في W3C حول الشيفرة الهيكلية والنص من اليمين لليسار إنه يجب “استخدام القيم المنطقية (‘end’ و‘start’) في الخصائص أو القيم المتعلقة بالهوامش والحشو والمحاذاة”. دعم المتصفحات محسوم، إذ تضع MDN margin-inline-start ضمن Baseline واسع التوفر منذ يناير 2020، و inset-inline-start منذ أبريل 2021. float: inline-start أحدث (Chrome 118)، لذا فضّل flexbox هناك.

والصيانة مهمة أيضًا. حجم ورقة الأنماط الرئيسية في Astra هو 44,905 بايت ونسخة RTL منها 44,936، ملفان يجب أن يبقيا متزامنين مع كل إصدار. وسمّى مطورو Elementor هذه التكلفة حين بدؤوا استبدال الخصائص الفيزيائية بالمنطقية في الإصدار 3.15، بهدف التخلص من ملفات *-rtl.css المكررة.

/* Before: physical rules, plus a second rule set in rtl.css */
.card        { padding-left: 24px; border-left: 4px solid var(--accent); text-align: left; }
.card__badge { position: absolute; top: 12px; right: 12px; }
.card__icon  { float: left; margin-right: 12px; }

.rtl .card        { padding-left: 0; padding-right: 24px; border-left: 0;
                    border-right: 4px solid var(--accent); text-align: right; }
.rtl .card__badge { right: auto; left: 12px; }
.rtl .card__icon  { float: right; margin-right: 0; margin-left: 12px; }

/* After: one rule set, correct in both directions */
.card        { padding-inline-start: 24px; border-inline-start: 4px solid var(--accent); text-align: start; }
.card__badge { position: absolute; top: 12px; inset-inline-end: 12px; }
.card__head  { display: flex; gap: 12px; } /* icon + title row; replaces the float */

/* Only genuinely directional icons get mirrored */
:dir(rtl) .icon--directional { transform: scaleX(-1); }

أي الأيقونات يجب عكسها في RTL، وأيها لا؟

اعكس الأيقونات التي تشير في اتجاه القراءة: أسهم الرجوع والتقدم، ومؤشرات مسار التنقل، وأزرار التالي والسابق. ولا تعكس أزرار تشغيل الوسائط، والساعات وأسهم التحديث، وعدسات البحث، أو الأيقونات التي لا تحمل اتجاهًا مثل علامة الصح. وتضع إرشادات Material Design للاتجاه الثنائي من Google الحد نفسه.

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

في CSS، اعكس بـ transform: scaleX(-1) على فئة تضيفها للأيقونات الاتجاهية فقط. و الفئة الزائفة :dir() متاحة في كل المتصفحات منذ ديسمبر 2023، وتطابق الاتجاه الذي يحسبه المتصفح، حتى لو كان موروثًا أو مضبوطًا بـ dir="auto". وتشير MDN إلى أن محددات الخاصية [dir=rtl] لا تطابق القيمة auto أبدًا. والتحويلات لا تنعكس من تلقاء نفسها.

إن أردت أن يُخضع مطوّر موقع ووردبريس العربي الخاص بك لهذه الفحوصات، أريد أن تراجع VOCTOS تخطيط RTL في موقعي.

كيف يتصرف flexbox وgrid تحت dir=rtl؟

يتبعان اتجاه النص دون شيفرة إضافية. يبدأ صف flex من حافة inline-start، فيقع العنصر الأول في العربية على اليمين، وينتقل خط العمود 1 في grid إلى الجانب الأيمن. تبدأ المشكلات حين يقاوم CSS ذلك بـrow-reverse أو حيل order أو إزاحات فيزيائية.

تعرّف MDN flex-direction: row بأنه محور رئيسي يطابق اتجاه النص. وبالنسبة لـgrid، يُظهر دليل MDN عن القيم المنطقية وأنماط الكتابة أن الخط 1 يوضع على اليمين والخط -1 على اليسار متى كان الاتجاه rtl. وتنعكس justify-content: flex-start و gap تلقائيًا.

لكن ثلاثة أشياء لا تنعكس. translateX() فيزيائي، لذا فالقائمة المخفية بـ translateX(-100%) تحتاج الإشارة المعاكسة في RTL. background-position: left تبقى على اليسار. و row-reverse المضاف لمحاكاة RTL ينعكس مجددًا بمجرد ضبط dir="rtl" .

الأرقام والنص اللاتيني والخطوط العربية داخل صفحات RTL

الاتجاه ليس تخطيطًا فقط. الأسعار وأرقام الهواتف ورموز المنتجات وأسماء العلامات الإنجليزية داخل الجمل العربية تحتاج عزلًا ثنائي الاتجاه، وإلا انجرفت الأرقام وعلامات الترقيم إلى الطرف الخاطئ. ضع القيم المُدرجة داخل <bdi>، وامنح الحقول التي يكتبها المستخدمون dir="auto"، وأبقِ حقول البريد والروابط من اليسار لليمين.

تأكد من أن رأس القالب يستدعي language_attributes()، التي تطبع lang و dir="rtl" على عنصر html. وفي تدقيقنا لـlang وdir وbdi على 29 صفحة رئيسية لعلامات عربية، لم يكن في 3 من 27 صفحة عربية dir على html: بنك سعودي ومتجر تجزئة مصري ومستشفى مصري.

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

Elementor and other page builders on Arabic sites

Treat the builder as a second theme. Elementor ships its own LTR and RTL CSS and has moved toward logical properties since version 3.15, but values you type into widget controls, absolute offsets and custom CSS still need an RTL check on a real Arabic page before launch.

Since Elementor 3.7, the editor language is independent of the site, so a team can work in an English editor while the site renders RTL. Use it: set the Site Language to Arabic on staging before building, so widgets are placed in their real direction.

Hello Elementor, the theme published by the Elementor team, takes the logical route itself: 21 of its 35 direction-sensitive declarations are logical, and its three stylesheets carry 8 selectors that target .rtl أو [dir=rtl] directly. Version 3.5.1 also ships flipped -rtl copies that no theme PHP enqueues. On a builder site, the risk sits in your widget settings.

رأينا

The rtl-language-support tag tells you almost nothing. Nine of ten themes carry it, and the one without it has the most logical CSS in our set. Choose a theme by how it loads RTL and how much of its CSS is physical, then judge the rest on an Arabic staging site.

Mirrored copies (Astra, Neve, Storefront) are the most predictable for the theme’s own CSS, because the RTL file is a complete flipped copy of every rule. Override files are far smaller, 2.2 to 3.9 KB for Blocksy, GeneratePress and Kadence, but they must restate each asymmetric rule by hand, so gaps appear as one-off misalignments. Neither protects your own code.

Our position: do not rewrite a theme’s CSS. Put Arabic fixes in a child theme or plugin, written in logical properties, and keep an RTL override only for transforms, background positions and directional icons.

A 15-point RTL QA checklist before launch

Run these checks on a staging copy with the Site Language set to Arabic, at desktop width and at 360 pixels. They target the faults our theme review points to: physical CSS outside the theme’s RTL file, unmirrored inline styles, wrongly flipped icons and mixed-direction strings.

1. View source: html carries lang="ar" (or your regional code) and dir="rtl".
2. body carries the .rtl class, so theme and plugin RTL selectors can match.
3. Network panel: the theme’s -rtl or rtl.css file returns 200, and with replace the LTR file is not also loaded.
4. Header: logo on the right, menu flowing right to left, nested submenus opening to the left.
5. Mobile menu: the off-canvas panel slides in from the correct side.
6. Breadcrumb separators, pagination and previous/next links point the reading way.
7. Directional icons are mirrored; play buttons, clocks, search and checkmarks are not.
8. Sliders and carousels: “next” moves forward in Arabic reading order, and swipe matches.
9. Forms: labels and errors align right; email, URL and phone inputs use dir="ltr".
10. Prices, SKUs, phone numbers and Latin brand names inside Arabic text are isolated with <bdi> أو dir="auto".
11. WooCommerce cart and checkout: column order, quantity buttons and totals read correctly.
12. Additional CSS, child theme CSS and builder custom CSS contain no physical left or right rules.
13. Block patterns and templates: no asymmetric inline padding or margins left from an LTR design.
14. The Arabic font loads in every weight the design uses.
15. At 360 pixels wide, the page has no horizontal scroll in RTL.

ما الخطوة التالية

The useful question is not whether a theme “supports RTL”. All ten here do, in some form. Ask instead how much of your CSS gets mirrored for you, and how much you wrote yourself. That second share grows with every customisation.

If you are choosing a theme for a new Arabic or bilingual site in Saudi Arabia, the UAE, Egypt or elsewhere, test two shortlisted themes on Arabic staging with the checklist first. If the site is already live, start with point 12: search your custom CSS for left and right, convert it to logical properties, then run the full list. For hands-on help, get my Arabic WordPress site checked by a VOCTOS developer, أو book a technical SEO review of my Arabic pages.

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

أي قوالب ووردبريس الشائعة تدعم التخطيط العربي RTL؟

القوالب العشرة التي فحصناها في 2 أكتوبر 2026 تدعم RTL كلها. تستبدل Astra وNeve وStorefront ورقة أنماط معكوسة كاملة. وتضيف GeneratePress وKadence وBlocksy وOceanWP ملفًا تكميليًا. وتضع Hello Elementor قواعد RTL داخل ملفاتها الرئيسية، بينما تعتمد Twenty Twenty-Five وTwenty Twenty-Four على أنماط البلوكات في النواة.

هل أحتاج إلى ملف rtl.css في القالب الفرعي؟

فقط للقواعد التي لا تستطيع الخصائص المنطقية التعبير عنها. اكتب CSS القالب الفرعي بـmargin-inline وpadding-inline وinset-inline وtext-align بقيمة start أو end، فيعمل في الاتجاهين. واحتفظ بملف rtl.css صغير للتحويلات ومواضع الخلفيات والأيقونات المعكوسة. يحمّل ووردبريس rtl.css من جذر القالب النشط تلقائيًا على مواقع RTL.

هل يضمن وسم rtl-language-support تخطيطًا عربيًا جيدًا؟

لا. الوسم يعلنه مؤلف القالب بنفسه، ويعني أنه لم تُرصد مشكلات بصرية في وضع RTL أثناء الاختبار. في فحصنا حملته 9 من 10 قوالب، بينما كتبت Blocksy، التي لا تحمل الوسم، 71% من قواعدها الحساسة للاتجاه كخصائص منطقية. اختبر على بيئة اختبار عربية بدلًا من ذلك.

موقعي يبدو جيدًا بالإنجليزية لكن النسخة العربية غير محاذية. لماذا؟

عادةً لأن CSS المخصص كُتب بخصائص فيزيائية. ملف RTL في القالب لا يعكس إلا ورقة أنماط القالب نفسه، لذا يبقى margin-left في Additional CSS أو القالب الفرعي أو شيفرة البلوكات أو CSS المخصص في أداة البناء على اليسار. ابحث في هذه المصادر عن left وright وحوّلها إلى خصائص منطقية.

هل يجب عكس كل أيقونة بـtransform: scaleX(-1) في RTL؟

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