วิธีแก้ไขปัญหาการจัดรูปแบบและ 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 สำหรับ Wrapper ของตัวสลับภาษา

ต่อไปนี้คือรายการคลาส CSS สำหรับ Wrapper ของตัวสลับภาษา:

• 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 แบบกำหนดเองสำหรับ Wrapper ของตัวสลับภาษาของคุณ คุณสามารถใช้ฮุกฟิลเตอร์ 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 จะแทรกองค์ประกอบบางอย่างสำหรับตัวเลือกตัวสลับภาษาในเมนูเท่านั้น ด้วยเหตุนี้ จึงไม่มีคลาส Wrapper ใด ๆ

การปรับแต่งตัวสลับภาษาด้วย 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;
}