WPML

בעת פיתוח אתרים רב-לשוניים עם WPML, ייתכן שתצטרך בורר שפות מותאם אישית. למד כיצד לעשות זאת בעזרת מעט PHP ו־CSS.

WPML מאפשר לך להוסיף בוררי שפות לתפריטים, לווידג'טים, לכותרות התחתונות ולאתרים המשתמשים בעורך האתר (Site Editor, שנקרא בעבר עריכת אתר מלאה), כולל אפשרויות התאמה אישית ודגלים מובנים. אך ייתכן שתזדקק למשהו מיוחד יותר לאתר שלך.

במדריך זה נראה כיצד להוסיף בורר שפות צף. בורר שפות צף נראה נהדר ומקל על הלקוחות שלך לצפות באתר בשפה שלהם.

אתר המשתמש בבורר השפות הצף

בצע את שלושת השלבים העיקריים הבאים:

  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