Cách khắc phục các sự cố về kiểu dáng và CSS cho bộ chuyển đổi ngôn ngữ

Một số giao diện có tính năng tạo menu tùy chỉnh có thể không hiển thị chính xác các bộ chuyển đổi ngôn ngữ của WPML. Tại đây, chúng tôi cung cấp các bước khắc phục sự cố cho các vấn đề liên quan đến kiểu dáng của bộ chuyển đổi ngôn ngữ.

Để thuận tiện cho bạn, chúng tôi cũng trình bày miêu tả chi tiết về CSS được sử dụng trong bộ chuyển đổi ngôn ngữ menu của WPML, trong trường hợp bạn đang tìm kiếm các tùy chỉnh nâng cao.

Cách khắc phục sự cố hiển thị với bộ chuyển đổi ngôn ngữ dạng thả xuống và menu

Giống như mọi quá trình gỡ lỗi, có một số bước ban đầu để phát hiện xem có thứ gì đó đang can thiệp vào việc hiển thị chính xác bộ chuyển đổi ngôn ngữ của bạn hay không.

1. Tạm thời thêm một bộ chuyển đổi ngôn ngữ chân trang có CSS rất đơn giản và sẽ hoạt động trên hầu hết mọi trang web.
2. Tạm thời xóa mọi CSS tùy chỉnh và sử dụng bộ chuyển đổi ngôn ngữ của WPML với các cài đặt mặc định của nó
3. Sử dụng trình gỡ lỗi CSS trên trình duyệt của bạn và xem liệu có các xung đột CSS rõ ràng nào không. Nếu bạn tìm thấy nguyên nhân, bạn có thể ghi đè kiểu dáng CSS trên trang WPML → Ngôn ngữ, trong phần Tùy chọn bộ chuyển đổi ngôn ngữ. Tại đó, nhấp vào liên kết CSS bổ sung.

Nếu có vấn đề giữa giao diện và WPML, nhóm hỗ trợ của WPML sẽ làm việc với nhóm khả năng tương thích của chúng tôi và nhà phát triển giao diện để cung cấp cho bạn một giải pháp phù hợp.

Các lớp CSS cho mỗi ngôn ngữ

Sau đây là danh sách các lớp CSS cho mỗi ngôn ngữ:

• wpml-ls-slot-{slug}: ví dụ: “wpml-ls-slot-sidebar-1”.
• wpml-ls-item.
• wpml-ls-item-{language_code}: ví dụ: “wpml-ls-item-en”.
• wpml-ls-current-language: chỉ dành cho mục ngôn ngữ hiện tại.
• wpml-ls-menu-item: chỉ dành cho bộ chuyển đổi ngôn ngữ trong menu.
• wpml-ls-first-item: để nhắm mục tiêu mục ngôn ngữ đầu tiên của danh sách.
• wpml-ls-last-item: để nhắm mục tiêu mục ngôn ngữ cuối cùng của danh sách)

Nếu cần thay đổi các lớp CSS cho mỗi ngôn ngữ, WPML cung cấp hook bộ lọc wpml_ls_model_language_css_classes.

Ví dụ: giả sử bạn cần thêm một lớp my-custom-item-class cho mọi ngôn ngữ. Trong trường hợp đó, bạn có thể thêm một đoạn mã giống như sau vào tệp functions.php của giao diện:

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;
}

Các lớp CSS wrapper của bộ chuyển đổi ngôn ngữ

Sau đây là danh sách các lớp CSS cho wrapper của bộ chuyển đổi ngôn ngữ:

• wpml-ls
• wpml-ls-{group}-{slug}: ví dụ: “wpml-ls-statics-footer”.
• wpml-ls-{template-slug}: ví dụ: “wpml-ls-legacy-dropdown-click”.
• wpml-ls-rtl: cho các ngôn ngữ RTL.
• wpml-ls-touch-device: lớp này được thêm vào cho các thiết bị di động và máy tính bảng.

Trong bảng sau, chúng tôi hiển thị cách các lớp CSS được xây dựng dựa trên {group} và {slug}:

Như trước đây, nếu bạn cần thêm một lớp CSS tùy chỉnh cho wrapper của bộ chuyển đổi ngôn ngữ, bạn có thể sử dụng hook bộ lọc wpml_ls_model_css_classes của chúng tôi. Một đoạn mã giống như sau trong tệp functions.php của giao diện sẽ thêm một lớp 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;
}

Lưu ý: WPML chỉ chèn một số phần tử cho tùy chọn bộ chuyển đổi ngôn ngữ trong menu. Do đó, nó không có bất kỳ lớp wrapper nào.

Tùy chỉnh bộ chuyển đổi ngôn ngữ bằng CSS

Chúng ta có thể dễ dàng thêm một số kiểu CSS tùy chỉnh trong trang WPML → Ngôn ngữ, trong phần Tùy chọn bộ chuyển đổi ngôn ngữ. Tại đó, nhấp vào liên kết CSS bổ sung.

Ví dụ 1: Hiển thị ngôn ngữ hiện tại in đậm

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

Ví dụ 2: Thay đổi kích thước phông chữ chỉ cho bộ chuyển đổi ngôn ngữ ở chân trang

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

Ví dụ 3: Thêm một chút lề bên phải sau mục ngôn ngữ cuối cùng

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

Bạn cũng có thể kết hợp các bộ chọn để nhắm mục tiêu tốt hơn.

Ví dụ 4: Thêm văn bản in đậm cho ngôn ngữ hiện tại của bộ chuyển đổi ngôn ngữ ở chân trang

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

Ví dụ 5: Cố định chiều rộng của bộ chuyển đổi ngôn ngữ trong menu

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;
}