تخطي الملاحة
الرئيسية » وثائق WPML » دليل بدء الاستخدام » إعداد اللغة » خيارات محوّل اللغة » محول اللغة المخصص

محول اللغة المخصص

Amir
تم تحديثه
ديسمبر 18, 2023

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

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

سنعرض لك في هذا الدليل كيفية إضافة محوّل لغة عائم. محوّل اللغة العائم له مظهر رائع ويجعل الأمر أكثر سهولة على عملائك عند استعراض موقعك بلغتهم.

موقع يستخدم محوّل اللغة العائم

اتبع هذه الخطوات الثلاث الأساسية:

  1. أضف كود PHP الذي يعرض محوّل اللغة
  2. قم بتصميم محوّل اللغة الخاص بك باستخدام CSS
  3. قم بتحديث إعدادات محوّل اللغة لديك

الجزء الخاص بكود PHP

الخطوة الأولى هي إضافة كود PHP المسؤول عن عرض محوّل اللغة على صفحتك. للقيام بذلك، يمكنك إنشاء وظيفة تضيف حاوية div مع محوّل اللغة بداخلها. يمكننا استخدام إجراء wpml_add_language_selector لعرض محوّل اللغة.

في هذا المثال، نريد أن يتم عرض محوّل اللغة الجديد في التذييل، لذلك نستخدم وظيفتنا الجديدة مع خطاف wp_footer الخاص بـ WordPress .

كود PHP الكامل سيظهر بهذا الشكل.

Language switcher PHP 
//WPML - Add a floating language switcher to the footer
 add_action('wp_footer', 'wpml_floating_language_switcher'); 
 
 function wpml_floating_language_switcher() { 
    echo '<div class="wpml-floating-language-switcher">';
        //PHP action to display the language switcher (see https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/#using-php-actions)
        do_action('wpml_add_language_selector');
    echo '</div>'; 
}

يمكنك نسخه وإضافته إلى ملف jobs.php الخاص بموضوعك (الفرعي).

الجزء الخاص بالتنميط

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

اتبع الخطوات التالية لإضافة كود CSS:

  1. انتقل إلى WPML ← اللغات .
  2. قم بالتمرير لأسفل إلى خيارات محول اللغة وقم بتوسيع قسم CSS الإضافي .

وبدلاً من ذلك، يمكنك إضافة رمز CSS هذا بالانتقال إلى المظهر → تخصيص والنقر فوق CSS إضافي .

المثال التالي يضيف المزيد من التخصيصات الإضافية مثل الحواف المستديرة وتظليل مربع النص. ويمكنك بكل تأكيد تخصيصه كما تحب.

Language Switcher Styling 
/*Removing some default CSS from our language switcher*/
.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions {
  margin-bottom: 0;
}
 
.wpml-floating-language-switcher  .wpml-ls-statics-shortcode_actions a {
  background-color: transparent !important;
}
 
.wpml-floating-language-switcher .wpml-ls-legacy-list-horizontal a {
  padding: 5px;
}
 
 
/*Customize this if you want*/
.wpml-floating-language-switcher {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: #f8f8f8; /*background color*/
  border: 1px solid; /*border settings*/
  border-color: #eee; /*color of the border*/
  padding: 0px; /*padding of container*/
  border-radius: 6px; /*rounded border*/
  /*Box Shadow*/
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
}

الجزء الخاص بضبط الإعدادات

وأخيرًا، تحتاج إلى ضبط بعض الإعدادات بحيث يعرض محوّل اللغة العلامات فقط.

اتبع الخطوات التالية:

  1. انتقل إلى WPML ← اللغات .
  2. قم بالتمرير لأسفل إلى محولات اللغة المخصصة وانقر فوق “تمكين” .
  3. انقر فوق الزر تخصيص .
  4. بالنسبة إلى ما يجب تضمينه في محوّل اللغة ، حدد “علم” وقم بإلغاء تحديد الخيارات الأخرى.
  5. انقر فوق حفظ .
Language switcher options
عرض العلامة فقط في محوّل اللغة العائم

هذا هو! يجب أن يكون بين يديك الآن محوّل لغة مخصص لطيف على الموقع الإلكتروني:

Horizontal language switcher
محوّل اللغة في الواجهة الأمامية

المكافأة: محول اللغة العائم العمودي

يمكنك أيضًا إنشاء محوّل لغة رأسي بدلاً من ذلك، مثل لقطة الشاشة أدناه:

Vertical language switcher
محول اللغة العمودي

للقيام بذلك، ما عليك سوى استبدال ملف CSS السابق بالكود التالي:

Vertical Language Switcher CSS 
/*Removing some default CSS our language switcher*/
.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions {
  margin-bottom: 0;
}
 
.wpml-floating-language-switcher  .wpml-ls-statics-shortcode_actions a {
  background-color: transparent !important;
}
 
.wpml-floating-language-switcher .wpml-ls-legacy-list-horizontal a {
  padding: 5px;
}
 
.wpml-floating-language-switcher .wpml-ls-item {
  display: block;
}
 
/*Customize this if you want*/
.wpml-floating-language-switcher {
  position: fixed;
  bottom: 20px;
  right: 0px;
  background: #f8f8f8; /*background color*/
  border: 1px solid; /*border settings*/
  border-color: #eee; /*color of the border*/
  padding: 0px; /*padding of container*/
  border-radius: 6px 0 0 6px; /*rounded border*/
  /*Box Shadow*/
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  z-index: 999;
}