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

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

Amir
تم تحديثه
مايو 22, 2024

عند تطوير مواقع متعددة اللغات باستخدام 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;
}