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

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

Amir
تم تحديثه
أغسطس 12, 2021

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

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

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

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

  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>'; 
}

يمكنك نسخه وإضافته إلى ملف functions.php الخاص بقالبك (الثانوي).

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

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

اتبع الخطوات التالية لإضافة كود 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;
}