דלג על ניווט
דף הבית » מחליף שפה מותאם אישית

מחליף שפה מותאם אישית

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

WPML מאפשרת לך להוסיף מחליפי שפות לתפריטים, לווידג'טים, לכותרות התחתונות שלך ולאתרים באמצעות עורך האתר (שנודע בעבר כ- Full Site Editing) עם אפשרויות התאמה אישית ודגלים מובנים. אבל אולי תצטרך משהו מיוחד יותר עבור האתר שלך.

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

אתר המשתמש במחליף שפה צף

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

  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 קבועה .

השתמש בשלבים הבאים כדי להוסיף את קוד ה-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;
}