WPML

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

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

في هذا الشرح، سنوضح كيفية إضافة مبدل لغة عائم. يبدو مبدل اللغة العائم رائعاً ويسهّل على عملائك عرض موقعك بلغتهم.

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

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

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

جزء PHP

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

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

سيبدو كود PHP الكامل على النحو التالي.

كود 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 إضافي.

يضيف المثال التالي بعض التخصيصات الإضافية مثل الحدود الدائرية وظل الصندوق (box-shadow). بالطبع، يمكنك تخصيصه كما تريد.

تنسيق مبدل اللغة
/*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. انقر على حفظ.
عرض العلم فقط في مبدل اللغة العائم
عرض العلم فقط في مبدل اللغة العائم

هذا كل شيء! أصبح لديك الآن مبدل لغة مخصص وأنيق على موقعك:

مبدل لغة أفقي
مبدل اللغة في الواجهة الأمامية

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

يمكنك أيضاً إنشاء مبدل لغة عمودي بدلاً من ذلك، كما في لقطة الشاشة أدناه:

مبدل لغة عمودي
مبدل لغة عمودي

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

كود 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;
}

بقلم Amir · آخر تحديث 2 مارس 2023