WPML cung cấp một bộ chuyển đổi ngôn ngữ dễ sử dụng nhưng đôi khi, bạn không muốn nó xuất hiện trên tất cả các trang. Hãy tìm hiểu cách chỉ hiển thị hoặc ẩn nó trên các trang cụ thể.
Bạn có thể dễ dàng làm điều này bằng vài dòng CSS.
Chỉ hiển thị bộ chuyển đổi ngôn ngữ trên các trang cụ thể
Bước 1: Ẩn bộ chuyển đổi ngôn ngữ trên tất cả các trang
Đầu tiên, bạn cần kiểm tra xem bộ chuyển đổi ngôn ngữ của chúng tôi đang sử dụng class nào.
Bạn có thể kiểm tra điều này bằng cách sử dụng Developer Tools của trình duyệt:
- Truy cập trang web của bạn ở front-end và nhấn phím F12 trên bàn phím.
- Sử dụng công cụ “inspect” để chọn bộ chuyển đổi ngôn ngữ và mã HTML của nó sẽ xuất hiện.
Dưới đây là hai class phổ biến của bộ chuyển đổi ngôn ngữ:
- Class wpml-ls-menu-item khi bộ chuyển đổi xuất hiện trong một menu
- Class wpml-ls khi bộ chuyển đổi xuất hiện ở chân trang
Khi bạn đã biết class chính xác, hãy truy cập trang Giao diện → Tùy chỉnh, nhấp vào CSS bổ sung và thêm CSS sau vào trang web của bạn.
Ẩn bộ chuyển đổi ngôn ngữ menu
/*Hide menu Language Switcher*/
.wpml-ls-menu-item {
visibility: hidden !important;
}
/*Hide footer Language Switcher*/
.wpml-ls {
visibility: hidden !important;
}Thao tác này sẽ ẩn bộ chuyển đổi ngôn ngữ trên tất cả các trang.
Ngoài ra, bạn có thể thêm các quy tắc tạo kiểu này vào tệp style.css của giao diện nhưng hãy đảm bảo sử dụng child theme. Nếu không, các kiểu tùy chỉnh của bạn sẽ bị mất khi bạn cập nhật giao diện.
Để biết thông tin chi tiết về các class CSS của bộ chuyển đổi ngôn ngữ, hãy truy cập trang của chúng tôi về tạo kiểu CSS cho các bộ chuyển đổi ngôn ngữ.
Bước 2: Hiển thị bộ chuyển đổi ngôn ngữ trên một trang cụ thể
Trong bước tiếp theo, bạn cần thêm một đoạn mã CSS khác để chỉ hiển thị bộ chuyển đổi ngôn ngữ trên các trang bạn muốn.
WordPress tự động thêm các class cụ thể vào thẻ body của mỗi trang. Điều này cho phép bạn nhắm đến bộ chuyển đổi ngôn ngữ trên một trang cụ thể.
Để tìm class, hãy mở trang mà bạn muốn hiển thị bộ chuyển đổi ngôn ngữ ở front-end. Một lần nữa, hãy sử dụng công cụ inspector của trình duyệt và tìm kiếm thẻ body.
Bạn sẽ thấy nội dung tương tự như sau:
Tìm class id
<body class="page-template-default page page-id-2 logged-in admin-bar wp-embed-responsive is-light-theme singular has-main-navigation customize-support">
Trong trường hợp này, class page-id-2 chỉ được thêm vào trang cụ thể này. Số này đại diện cho ID của trang và bạn có thể sử dụng nó để xây dựng đoạn mã của mình.
Đoạn mã hoàn chỉnh sẽ trông như thế này:
Ẩn bộ chuyển đổi ngôn ngữ menu – hoàn chỉnh
/*Hide menu Language Switcher*/
.wpml-ls-menu-item {
visibility: hidden !important;
}
/*Hide footer Language Switcher*/
.wpml-ls {
visibility: hidden !important;
}
/*Display Language Switcher only in the page with ID 2*/
body.page-id-2 .wpml-ls-menu-item {
visibility: visible !important;
}
body.page-id-2 .wpml-ls {
visibility: visible !important;
}Hãy nhớ thay thế class page-id-2 bằng class trang của bạn.
Dưới đây là một số class cụ thể mà bạn có thể sử dụng:
- page-id-X: Dùng cho các trang (thay thế X bằng ID của trang)
- postid-X: Dùng cho các bài viết (thay thế X bằng ID của bài viết)
- home: Dùng cho trang chủ
- single-post: Dùng cho tất cả các bài viết (không phải một bài viết cụ thể)
- page: Dùng cho tất cả các trang (không phải một trang cụ thể)
Chỉ ẩn bộ chuyển đổi ngôn ngữ trên các trang cụ thể
Việc ẩn bộ chuyển đổi ngôn ngữ trên các trang cụ thể rất giống với các bước trước đó. Nhưng thay vì ẩn nó trên tất cả các trang, bạn sẽ chỉ ẩn nó trên một trang cụ thể.
Để làm được điều này, bạn chỉ cần lấy class cụ thể của trang, sau đó sử dụng nó để ẩn bộ chuyển đổi ngôn ngữ của trang đó.
Đoạn mã CSS của bạn sẽ trông như thế này:
Chỉ ẩn bộ chuyển đổi ngôn ngữ trên trang có ID 2
/*Hide Language Switcher only on the page with ID 2*/
/*Menu Language Switcher*/
body.page-id-2 .wpml-ls-menu-item {
visibility: hidden !important;
}
/*Footer Language Switcher*/
body.page-id-2 .wpml-ls {
visibility: hidden !important;
}Hãy nhớ thay thế class page-id-2 bằng class cụ thể của bạn.