Tùy chỉnh bộ chuyển đổi ngôn ngữ WPML bằng tệp cấu hình

WPML cho phép bạn tùy chỉnh bộ chuyển đổi ngôn ngữ để đáp ứng các nhu cầu cụ thể của bạn bằng cách cấu hình cài đặt trong tệp wpml-config.xml.

wpml-config.xml là một tệp cấu hình cho phép bạn tùy chỉnh cách bộ chuyển đổi ngôn ngữ WPML hiển thị và hoạt động trên trang web của bạn. Bạn có thể cấu hình một số thuộc tính, chẳng hạn như kiểu CSS, cài đặt hiển thị và shortcode.

Hướng dẫn này dành cho các nhà phát triển muốn tùy chỉnh bộ chuyển đổi ngôn ngữ WPML tích hợp sẵn. Nếu bạn muốn xây dựng một bộ chuyển đổi tùy chỉnh, hãy đọc trang của chúng tôi về cách tạo bộ chuyển đổi ngôn ngữ tùy chỉnh.

Bạn cần tạo tệp wpml-config.xml? Hãy truy cập hướng dẫn từng bước của chúng tôi để tự động tạo tệp cấu hình bằng plugin Multilingual Tools.

Tôi có thể tùy chỉnh những gì trong bộ chuyển đổi ngôn ngữ của mình?

WPML cho phép bạn tùy chỉnh một số biến trong bộ chuyển đổi ngôn ngữ của bạn. Điều này bao gồm:

Các kiểu CSS nội tuyến – Thêm CSS tùy chỉnh trực tiếp vào bộ chuyển đổi ngôn ngữ
Liên kết đến nội dung chưa được dịch – Quyết định hiển thị hay ẩn các liên kết đến nội dung chưa được dịch
Các tham số URL cần sao chép – Chỉ định các tham số URL cần được sao chép khi chuyển đổi ngôn ngữ
Bộ chuyển đổi ngôn ngữ ở sidebar / chân trang – Cấu hình giao diện của bộ chuyển đổi ngôn ngữ ở sidebar và chân trang, bao gồm:
- Có hiển thị cờ và/hoặc tên ngôn ngữ hay không
- Ngôn ngữ hiện tại có nên được hiển thị dưới dạng liên kết hay không
- Đặt tiêu đề cho widget bộ chuyển đổi ngôn ngữ
- Chọn mẫu cho bố cục của bộ chuyển đổi
- Tùy chỉnh màu sắc cho văn bản, nền và viền bằng mã màu hex

Hành động của shortcode – Xác định giao diện của các bộ chuyển đổi ngôn ngữ được thêm qua shortcode

Ví dụ về cách thêm cấu hình tùy chỉnh cho bộ chuyển đổi ngôn ngữ WPML tích hợp sẵn

<wpml-config>
  <language-switcher-settings>
    <key name="additional_css">{inline CSS styles}</key>
    <key name="link_empty">{0 or 1}</key>
    <key name="copy_parameters">{parameter1, parameter2}</key>
    <key name="sidebars">
        <key name="{sidebar slug}">
            <key name="display_flags">{0 or 1}</key>
            <key name="display_names_in_current_lang">{0 or 1}</key>
            <key name="display_names_in_native_lang">{0 or 1}</key>
            <key name="display_link_for_current_lang">{0 or 1}</key>
            <key name="widget_title">{widget title}</key>
            <key name="template">{template slug}</key>
            <!-- color picker keys -->
            <key name="background_normal">#{hex color}</key>
            <key name="border_normal">#{hex color}</key>
            <key name="font_current_normal">#{hex color}</key>
            <key name="font_current_hover">#{hex color}</key>
            <key name="background_current_normal">#{hex color}</key>
            <key name="background_current_hover">#{hex color}</key>
            <key name="font_other_normal">#{hex color}</key>
            <key name="font_other_hover">#{hex color}</key>
            <key name="background_other_normal">#{hex color}</key>
            <key name="background_other_hover">#{hex color}</key>
        </key>
    </key>
    <key name="statics">
        <key name="footer">
            <key name="show">{0 or 1}</key>
            <key name="display_flags">{0 or 1}</key>
            <key name="display_names_in_current_lang">{0 or 1}</key>
            <key name="display_names_in_native_lang">{0 or 1}</key>
            <key name="display_link_for_current_lang">{0 or 1}</key>
            <key name="template">{template slug}</key>
            <!-- color picker keys -->
            <key name="background_normal">#{hex color}</key>
            <key name="border_normal">#{hex color}</key>
            <key name="font_current_normal">#{hex color}</key>
            <key name="font_current_hover">#{hex color}</key>
            <key name="background_current_normal">#{hex color}</key>
            <key name="background_current_hover">#{hex color}</key>
            <key name="font_other_normal">#{hex color}</key>
            <key name="font_other_hover">#{hex color}</key>
            <key name="background_other_normal">#{hex color}</key>
            <key name="background_other_hover">#{hex color}</key>
        </key>
        <key name="post_translations">
            <key name="show">{0 or 1}</key>
            <key name="display_flags">{0 or 1}</key>
            <key name="display_names_in_current_lang">{0 or 1}</key>
            <key name="display_names_in_native_lang">{0 or 1}</key>
            <key name="display_link_for_current_lang">{0 or 1}</key>
            <key name="display_before_content">{0 or 1}</key>
            <key name="display_after_content">{0 or 1}</key>
            <key name="template">{template slug}</key>
            <key name="availability_text">{string like "See post translations: %s"}</key>
        </key>
        <key name="shortcode_actions">
            <key name="display_flags">{0 or 1}</key>
            <key name="display_names_in_current_lang">{0 or 1}</key>
            <key name="display_names_in_native_lang">{0 or 1}</key>
            <key name="display_link_for_current_lang">{0 or 1}</key>
            <key name="template">{template slug}</key>
            <!-- color picker keys -->
            <key name="background_normal">#{hex color}</key>
            <key name="border_normal">#{hex color}</key>
            <key name="font_current_normal">#{hex color}</key>
            <key name="font_current_hover">#{hex color}</key>
            <key name="background_current_normal">#{hex color}</key>
            <key name="background_current_hover">#{hex color}</key>
            <key name="font_other_normal">#{hex color}</key>
            <key name="font_other_hover">#{hex color}</key>
            <key name="background_other_normal">#{hex color}</key>
            <key name="background_other_hover">#{hex color}</key>
        </key>
    </key>
  </language-switcher-settings>
</wpml-config>

Không phải tất cả các phần này đều phải có trong tệp cấu hình của bạn. Chỉ cần những phần áp dụng cho plugin hoặc giao diện của bạn.

Đặt lại bộ chuyển đổi ngôn ngữ WPML về cài đặt mặc định

Bạn cũng có thể sử dụng wpml-config.xml để đặt lại cấu hình bộ chuyển đổi ngôn ngữ nếu nó đã bị thay đổi từ back-end (so với các giá trị ban đầu của nó).
Để xem các thay đổi mới, hãy đảm bảo nhấp vào nút Khôi phục mặc định ở cuối trang WPML → Ngôn ngữ.

Các tài nguyên bổ sung

Để tìm hiểu thêm về tệp wpml-config.xml, hãy truy cập hướng dẫn Tệp cấu hình ngôn ngữ.

Để tùy chỉnh các phần tử khác bằng tệp wpml-config.xml, hãy truy cập các hướng dẫn bổ sung của chúng tôi: