דלג על ניווט
בַּיִת » תיעוד של WPML » מדריך למתחילים » הגדרת שפה » כיצד להוסיף מחליף שפה לאתר WordPress שלך » מחליף שפה מותאם אישית

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

Amir
מעודכן
מאי 22, 2024

בעת פיתוח אתרים רב לשוניים עם 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;
}