كيفية إصلاح مشاكل التنسيق وCSS لمبدلات اللغة

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

لراحتك، نقدم أيضاً وصفاً تفصيلياً لـ CSS المستخدم في مبدل لغة القائمة الخاص بـ WPML، في حال كنت تبحث عن تخصيصات متقدمة.

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

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

1. أضف مؤقتاً مبدّل اللغة في التذييل والذي يحتوي على CSS بسيط جداً وسيعمل على أي موقع تقريباً.
2. أزل أي CSS مخصص مؤقتاً واستخدم مبدل لغة WPML بإعداداته الافتراضية.
3. استخدم مصحح أخطاء CSS في متصفحك وتحقق مما إذا كانت هناك تعارضات CSS واضحة. إذا وجدت السبب، يمكنك تجاوز تنسيق CSS في صفحة WPML → اللغات، ضمن قسم خيارات مبدل اللغة. هناك، انقر على رابط CSS إضافي.

إذا كانت هناك مشاكل بين القالب وWPML، سيعمل فريق دعم WPML مع فريق التوافق لدينا ومطوّر القالب من أجل تزويدك بحل مناسب.

فئات CSS لكل لغة

فيما يلي قائمة بفئات CSS لكل لغة:

• wpml-ls-slot-{slug}: على سبيل المثال «wpml-ls-slot-sidebar-1».
• wpml-ls-item.
• wpml-ls-item-{language_code}: على سبيل المثال «wpml-ls-item-en».
• wpml-ls-current-language: لعنصر اللغة الحالية فقط.
• wpml-ls-menu-item: لمبدلات اللغة في القوائم فقط.
• wpml-ls-first-item: لاستهداف عنصر اللغة الأول في القائمة.
• wpml-ls-last-item: لاستهداف عنصر اللغة الأخير في القائمة.

إذا كان تغيير فئات CSS لكل لغة مطلوباً، يقدم WPML خطّاف المرشِّح wpml_ls_model_language_css_classes.

على سبيل المثال، لنفترض أنك بحاجة إلى إضافة فئة my-custom-item-class لكل لغة. في هذه الحالة، يمكنك إضافة كود مثل التالي إلى ملف functions.php الخاص بقالبك:

add_filter( 'wpml_ls_model_language_css_classes', 'my_custom_ls_item_css_classes' );
function my_custom_ls_item_css_classes( $classes ) {
    $classes[] = 'my-custom-item-class';
    return $classes;
}

فئات CSS لحاوية مبدل اللغة

فيما يلي قائمة بفئات CSS لحاوية مبدل اللغة:

• wpml-ls
• wpml-ls-{group}-{slug}: على سبيل المثال «wpml-ls-statics-footer».
• wpml-ls-{template-slug}: على سبيل المثال «wpml-ls-legacy-dropdown-click».
• wpml-ls-rtl: للغات التي تُكتب من اليمين إلى اليسار (RTL).
• wpml-ls-touch-device: تُضاف هذه الفئة للأجهزة المحمولة والأجهزة اللوحية.

في الجدول التالي نوضح كيف يتم بناء فئات CSS بناءً على {group} و{slug}:

كما سبق، إذا كنت بحاجة إلى إضافة فئة CSS مخصصة لحاوية مبدل اللغة الخاص بك، يمكنك استخدام خطّاف المرشِّح wpml_ls_model_css_classes الخاص بنا. سيضيف كود مثل التالي في ملف functions.php الخاص بقالبك فئة CSS باسم my-custom-wrapper-class:

add_filter( 'wpml_ls_model_css_classes', 'my_custom_ls_wrapper_css_classes' );
function my_custom_ls_wrapper_css_classes( $classes ) {
    $classes[] = 'my-custom-wrapper-class';
    return $classes;
}

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

تخصيص مبدل اللغة باستخدام CSS

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

المثال 1: عرض اللغة الحالية بخط غامق

.wpml-ls-current-language {
font-weight: bold;
}

المثال 2: تغيير حجم الخط فقط لمبدّل اللغة في التذييل

.wpml-ls-statics-footer {
    font-size: 18px;
}

المثال 3: إعطاء بعض الهامش على اليمين بعد عنصر اللغة الأخير

.wpml-ls-last-item {
    margin-right: 10px;
}

يمكنك أيضاً الجمع بين المحددات للحصول على استهداف أفضل.

المثال 4: إضافة نص غامق للغة الحالية لمبدّل اللغة في التذييل

.wpml-ls-statics-footer .wpml-ls-current-language {
   font-weight: bold;
}

المثال 5: تثبيت عرض مبدل اللغة في قائمة

nav ul[class*="menu"] li.wpml-ls-menu-item ul.sub-menu,
nav ul[class*="menu"] li.wpml-ls-menu-item ul.sub-menu li a {
  width: auto;
  min-width: 30px;
}