تحتاج العديد من المواقع (والقوالب) إلى محوّل لغة مخصص، والذي سيتم دمجه في التصميم الإجمالي. هذا الدليل التعليمي سيشرح لك كيفية تصميم محوّلات اللغة المخصصة، وذلك باستخدام قوالب HTML الجاهزة فقط وبدون كتابة أكواد PHP.

مقدمة عن قوالب Twig الجاهزة لمحوّلات اللغة

Twig عبارة عن محرك إنشاء قوالب جاهزة، والذي يتيح لك تصميمها باستخدام أكواد HTML و pseudo.

على سبيل المثال، هذا قالب Twig جاهز:




<div class="[ css_classes ] my-custom-switcher">



<ul>

   {% for code, language in languages %}



<li class="[ language.css_classes ] my-custom-switcher-item">

           <a href="[ language.url ]">

               {% if language.flag_url %}

                   <img src="[ language.flag_url ]" alt="[ language.code ]" title="[ language.flag_title ]">

               {% endif %}

               [ language.native_name ]

               ([ language.display_name ])

           </a>

       </li>



   {% endfor %}

   </ul>



</div>



ما يفعله هذا القالب الجاهز:

  1. يفتح حاوية DIV وعلامات UL لمحوّل اللغة.
  2. يكرر الكود مع كل اللغات.
  3. ينتج عنه عنصر قائمة (LI) لكل لغة.
  4. داخل عنصر القائمة، ينتج عنه رابط إلى اللغة.
  5. إذا كان مع اللغة علم دولة، يقوم بتطبيقه.
  6. يقوم بإنتاج اسم اللغة.
  7. يغلق كل العلامات المتداخلة.

أليس الأمر بسيطًا؟ هيا بنا نتعرف على كيفية إنشاء مثل تلك القوالب الجاهزة لمحوّلات اللغة الخاصة بك.

إضافة قالب جاهز لمحوّل لغة إلى قالبك

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

يحتاج القالب الجاهز لمحوّل اللغة أن يكون بالهيكل التالي للمجلد:

my-theme/wpml/templates/language-switchers/my-template

هيكل دلائل ملفات محوّل اللغة


هيكل دلائل ملفات محوّل اللغة

هذا يعني أنه ينبغي عليك إنشاء مجلد يسمى “wpml” داخل جذر قالبك (أو القالب الفرعي). وفيه، قم بإنشاء المجلدات templates/language-switchers. داخل الدليل language-switchers، يمكن إنشاء دلائل فرعية للقوالب الجاهزة المختلفة التي قمت بإنشائها (في مثالنا “my-template”).

داخل مجلد القالب الجاهز (“my-template”)، ينبغي أن تكون لديك الملفات التالية، بالأسماء التالية:

  • ملف template.twig (مطلوب)
  • ملف config.json (مطلوب)
  • ملفات CSS (اختيارية)
  • ملفات JS (اختياري)
  • دليل علم الدولة (اختياري)

تصميم ملف template.twig

ملف template.twig هو القالب الجاهز الفعلي الذي تقوم بتصميمه. وهو يستخدم بناء جمل Twig. في القالب الجاهز، يمكنك استخدام تلك المتغيرات:

current_language_code (string)

css_classes           (string)

languages             (array)

code          (string)

url           (string)

flag_url      (string)

flag_title   (string)

native_name   (string)

display_name  (string)

is_current    (bool)

css_classes   (string)

تعيين الخيارات في ملف config.json

ينبغي لكل محوّل لغة أن يكون به ملف يسمى config.json، والذي يعطي لـ WPML معلومات عن محوّل اللغة.

هذه هي الحقول الخاصة بهذا الملف:

  • name (مطلوب): اسم القالب الجاهز. لست بحاجة إلى إضافة بادئة له، سيقوم WPML بفعل ذلك مع اسم القالب أو الملحق. هذا هو الحقل الوحيد المطلوب.
  • version (اختياري): إصدار قالبك الجاهز. هذا موصى به، حيث أنه سيفرض تحديث أوراق الأنماط (stylesheets) ومصادر javascript.
  • css (اختياري): بشكل افتراضي، سيقوم بإجراء مسح بحثي وإدراج ملفات CSS في دليل القالب الجاهز. مع ذلك، يمكنك تمرير مصفوفة JSON من ملفات CSS داخل دليل القالب الجاهز. مثال: “css”: [“style.css”, “responsive.css”] .
  • js (اختياري): بشكل افتراضي، سيقوم بإجراء مسح بحثي وإدراج كل ملفات JS الحالية في دليل القالب الجاهز. مع ذلك، يمكنك تمرير مصفوفة JSON من ملفات JS داخل دليل القالب الجاهز.

    مثال: “js”: [“script.js”, “click-script.js”] . لاحظ أنّه ينبغي كتابة نص البرمجة (script) في Javascript نقي، إلا إذا كان القالب أو الملحق نفسه به مكتبة أخرى.

  • flags_dir (اختياري): بشكلٍ افتراضي، سيقوم بإجراء مسح بحثي لدليل “أعلام دول” حالي داخل مجلد القالب الجاهز أو المجلد المحدد، إذا كان قد تم تحديده.
  • flag_extension (اختياري): امتداد الملف لملفات أعلام الدول (png، svg، jpg، gif).
  • for (اختياري): بشكلٍ اختياري، سيصبح القالب الجاهز متاحًا لكل مواقع الموقع الإلكتروني (“menus”, “sidebars”, “footer”, “post_translations”, “shortcode_actions”). مع ذلك، يمكنك تحديد موقع أو أكثر من تلك المواقع في مصفوفة JSON.

    مثال: “for”: [“sidebars”, “post_translations”] .

  • settings (اختياري): يمكنك تخطي إعدادات المستخدم في واجهة مستخدم المدير بفرض بعض الإعدادات. ما عليك سوى تمرير عنصر JSON مع القيمة المطلوبة (0 أو 1) لـ display_flags , display_names_in_native_lang , display_names_in_current_lang , or display_link_for_current_lang.

    مثال: “settings”: {“display_link_for_current_lang”: 1} .

إليك المثال الأكثر شيوعًا لملف config.json:


{

"name":           "My custom switcher",

}

وإليك مثال أكثر شمولية، مع حقول إضافية (اختيارية):


{

"name":           "Vertical List",

"version":         "1.0",

"css":            ["style.css"],

"js":             ["script.js"],

"flags_dir":      "super-flags",

"flag_extension": "png",

"for":            ["sidebars", "shortcode_actions"],

"settings":       {"display_link_for_current_lang": 1}

}

أمثلة على محوّل اللغة

محوّل لغة القائمة

دعنا نقل أنك ترغب في إنشاء لغة مخصصة تود ظهورها في القائمة مثل هذه:

محوّل اللغة المخصص مع أكواد ISO


محوّل اللغة المخصص مع أكواد ISO

ستحتوي القائمة على كود ISO لكل لغة (بنمط الأحرف الكبيرة) فقط.

  1. أنشئ مجلد قالب جاهز جديد في قالبك: mytheme/wpml/templates/language-switchers/menu-iso-codes/
  1. في هذا المجلد، أضف ملف config.json مع المحتوى أدناه:


{

"name" : "ISO codes for menus",

"for": ["menus"]

}

بشكلٍ أساسي، ستقوم بتحديد اسم القالب الجاهز (والذي سيتم إدراجه في الاختيارات المتاحة) والسياق الذي سيكون هذا القالب الجاهز متاحًا فيه (للقوائم فقط).

  1. الآن، أضف ملف template.twig مع المحتوى أدناه:


[ code|upper ]

نظرًا لأنه قالب جاهز للقائمة، فأنت لست في حاجة سوى لعرض محتوى عنصر القائمة. سنعرض لك الآن كود اللغة بعد معالجته بمرشح twig upper (راجع الوثائق هنا http://twig.sensiolabs.org/doc/filters/upper.html).

ملحوظة: ما زال بالإمكان تغيير خيارات العرض (علم الدولة، اللغة الأم، …) في واجهة مدير WordPress، ولكن لن يكون له أي تأثير على الواجهة الأمامية لأن قالبك الجاهز المخصص لا يتعامل معه. لتجنب ارتباك المستخدم، يمكننا فرض تعطيل تلك الإعدادات. إليك ملف config.json معزز:


{

"name" : "ISO codes for menus",

"for": ["menus"],

"settings": {

   "display_flags": 0,

   "display_names_in_native_lang": 0,

   "display_names_in_current_lang": 0

 }

}

وإليك كيفية ظهور هذا في واجهة مستخدم الإدارة:

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


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

الحصول على المصدر: يمكنك العثور على الملفات لهذا المثال على صفحتنا GitHub المخصصة لذلك.

محوّل اللغة ذي القائمة الأفقية

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

محوّل اللغة الأفقي مع الأعلام فقط


محوّل اللغة الأفقي مع الأعلام فقط

  1. أنشئ مجلد قالبك الجاهز المخصص في mytheme/wpml/templates/language-switchers/custom-flags-with-titles/
  1. قم باستيراد مجموعة أعلامك في المجلد mytheme/wpml/templates/language-switchers/custom-flags-with-titles/flags/.

(المصدر https://github.com/lipis/flag-icon-css)

ملحوظة: يجب أن تشتمل مجموعة الأعلام على ملف واحد لكل كود لغة، مثل هذا: “en.svg”, “fr.svg”, “es.svg”, “pt-pt.svg”, …

  1. أنشئ ملف config.json كالتالي:


{

"name": "Custom flags with titles",

"for": ["sidebars"],

"flag_extension": "svg",

"settings": {

  "display_flags": 1,

  "display_names_in_native_lang": 1,

  "display_names_in_current_lang": 1

 }

}

ما عليك سوى تحديد امتداد الملف للأعلام (“svg”)، ولكن ليست هناك حاجة لتحديد مجلد الأعلام لأننا نستخدم اسم المجلد الافتراضي (“flags”).

  1. أنشئ ملف template.twig كالتالي:




<div class="[ css_classes ] custom-flags-with-titles">



<ul>

     {% <b>for</b> code, language <b>in</b> languages %}



<li class="[ language.css_classes ] item-custom-flags-with-titles">

           <a href="[ language.url ]">

              <img src="[ language.flag_url ]" title="[ language.flag_title ]">

           </a>

        </li>



     {% <b>endfor </b>%}

  </ul>



</div>



  1. كي تكون لديك بعض أنماط CSS، ستحتاج أيضًا إلى إنشاء ملف style.css كالتالي:


.custom-flags-with-titles li {

  list-style: none;

  float: left;

  margin: 0 3px;

}



.item-custom-flags-with-titles img {

  max-width: 32px;

  height: auto;

}

الحصول على المصدر: يمكنك العثور على الملفات لهذا المثال على صفحتنا GitHub المخصصة لذلك.