Skip Navigation
מעודכן
אוגוסט 24, 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;
}