תיקון בעיות עיצוב ו־CSS עבור בוררי השפות

ערכות עיצוב מסוימות הכוללות מחוללי תפריטים מותאמים אישית עשויות שלא להציג כראוי את בוררי השפות של WPML. כאן נספק שלבים לפתרון בעיות הקשורות לעיצוב בוררי שפות.

לנוחיותך, אנו מציגים גם תיאור מפורט של ה־CSS המשמש בבורר השפות בתפריט של WPML, למקרה שאתה מחפש התאמות אישיות מתקדמות.

פתרון בעיות תצוגה עם בוררי שפות נפתחים ובתפריט

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

1. הוסף זמנית בורר שפות בכותרת התחתונה, בעל CSS פשוט מאוד שיעבוד כמעט בכל אתר.
2. הסר זמנית כל CSS מותאם אישית והשתמש בבורר השפות של WPML עם הגדרות ברירת המחדל שלו.
3. השתמש במאתר באגים של CSS בדפדפן שלך ובדוק אם יש התנגשויות CSS ברורות. אם תמצא את הסיבה, תוכל לדרוס את סגנון ה־CSS בעמוד WPML → שפות , תחת המקטע אפשרויות בורר שפות. שם, לחץ על הקישור CSS נוסף.

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

מחלקות CSS לכל שפה

להלן רשימת מחלקות ה־CSS עבור כל שפה:

• wpml-ls-slot-{slug}: לדוגמה "wpml-ls-slot-sidebar-1".
• wpml-ls-item.
• wpml-ls-item-{language_code}: לדוגמה "wpml-ls-item-en".
• wpml-ls-current-language: רק עבור פריט השפה הנוכחית.
• wpml-ls-menu-item: רק עבור בוררי שפות בתפריטים.
• wpml-ls-first-item: כדי למקד את פריט השפה הראשון ברשימה.
• wpml-ls-last-item: כדי למקד את פריט השפה האחרון ברשימה)

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

לדוגמה, נניח שאתה צריך להוסיף את המחלקה my-custom-item-class עבור כל שפה. במקרה כזה, תוכל להוסיף קוד דומה לבא אל הקובץ functions.php של ערכת העיצוב שלך:

add_filter( 'wpml_ls_model_language_css_classes', 'my_custom_ls_item_css_classes' );
function my_custom_ls_item_css_classes( $classes ) {
    $classes[] = 'my-custom-item-class';
    return $classes;
}

מחלקות CSS של מעטפת בורר השפות

להלן רשימת מחלקות ה־CSS עבור מעטפת בורר השפות:

• wpml-ls
• wpml-ls-{group}-{slug}: לדוגמה "wpml-ls-statics-footer".
• wpml-ls-{template-slug}: לדוגמה "wpml-ls-legacy-dropdown-click".
• wpml-ls-rtl: עבור שפות RTL.
• wpml-ls-touch-device: מחלקה זו מתווספת עבור מכשירים ניידים וטאבלטים.

בטבלה הבאה אנו מראים כיצד נבנות מחלקות CSS בהתאם ל־{group} ול־{slug}:

כמו קודם, אם אתה צריך להוסיף מחלקת CSS מותאמת אישית עבור מעטפת בורר השפות שלך, תוכל להשתמש בהוק הפילטר wpml_ls_model_css_classes שלנו. קוד כמו זה שבהמשך בקובץ functions.php של ערכת העיצוב שלך יוסיף את מחלקת ה־CSS my-custom-wrapper-class:

add_filter( 'wpml_ls_model_css_classes', 'my_custom_ls_wrapper_css_classes' );
function my_custom_ls_wrapper_css_classes( $classes ) {
    $classes[] = 'my-custom-wrapper-class';
    return $classes;
}

הערה: WPML מזריק רק מספר אלמנטים עבור אפשרות בורר השפות בתפריטים. כתוצאה מכך, אין לו כל מחלקת מעטפת.

התאמה אישית של בורר שפות באמצעות CSS

נוכל להוסיף בקלות סגנונות CSS מותאמים אישית בעמוד WPML → שפות , תחת המקטע אפשרויות בורר שפות. שם, לחץ על הקישור CSS נוסף.

דוגמה 1: הצגת השפה הנוכחית בכתב מודגש

.wpml-ls-current-language {
font-weight: bold;
}

דוגמה 2: שינוי גודל הגופן רק עבור בורר השפות בכותרת התחתונה

.wpml-ls-statics-footer {
    font-size: 18px;
}

דוגמה 3: מתן שוליים בצד ימין לאחר פריט השפה האחרון

.wpml-ls-last-item {
    margin-right: 10px;
}

תוכל גם לשלב סלקטורים כדי לקבל מיקוד טוב יותר.

דוגמה 4: הוספת טקסט מודגש עבור השפה הנוכחית של בורר השפות בכותרת התחתונה

.wpml-ls-statics-footer .wpml-ls-current-language {
   font-weight: bold;
}

דוגמה 5: קיבוע הרוחב של בורר שפות בתפריט

nav ul[class*="menu"] li.wpml-ls-menu-item ul.sub-menu,
nav ul[class*="menu"] li.wpml-ls-menu-item ul.sub-menu li a {
  width: auto;
  min-width: 30px;
}