אתרים רבים (וגם ערכות עיצוב) זקוקים למעביר שפה מותאם אישית שיתמזג עם העיצוב הכללי. מדריך זה מסביר כיצד לעצב מעבירי שפה מותאמים אישית באמצעות תבניות HTML בלבד וללא כתיבת PHP.

מבוא לתבניות Twig עבור מעבירי שפה

Twig הוא מנוע לבניית תבניות, שמאפשר עיצוב באמצעות HTML ופסאודו קוד.

לדוגמה, זוהי תבנית 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 (מחרוזת)

css_classes           (מחרוזת)

languages             (מערך)

code          (מחרוזת)

url           (מחרוזת)

flag_url      (מחרוזת)

flag_title   (מחרוזת)

native_name   (מחרוזת)

display_name  (מחרוזת)

is_current    (בוליאני)

css_classes   (מחרוזת)

הגדרת אפשרויות בקובץ 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"]. שים לב שיש לכתוב את קובץ הסקריפט ב-Javascript טהור אלה אם ערכת העיצוב או התוסף עצמו כוללים ספרייה אחרת.

  • flags_dir (אופציונלי): כברירת מחדל הוא יחפש ספריית flags קיימת בתוך תיקיית התבנית או המצוינת, אם מוגדר.
  • flag_extension (אופציונלי):סיומת הקבצים עבור קובצי הדגלים (png, svg, jpg, gif).
  • for (אופציונלי): כברירת מחדל, התבנית תהיה זמינה עבור כל מיקומי האתר (“menus”, "sidebars", "footer", "post_translations", "shortcode_actions"). אולם ניתן לציים מיקום אחד או יותר מאלה במערך JSON.

    דוגמה: "for": ["sidebars", "post_translations"] .

  • settings (אופציונלי): ניתן להחליף הגדרות משתמש בממשק המשתמש של המנהל על-ידי אילוץ של פרמטרים. העבר אובייקט JSON עם הערך הרצוי (0 or או עבור display_flags , display_names_in_native_lang , display_names_in_current_lang או 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 (ראה תיעוד בכתובת http://twig.sensiolabs.org/doc/filters/upper.html).

הערה: עדיין ניתן לשנות את אפשרויות התצוגה (flag, native language, …) i בממשק הניהול של 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.