Skip Navigation
Home » Trình chuyển đổi ngôn ngữ tùy chỉnh

Trình chuyển đổi ngôn ngữ tùy chỉnh

Khi phát triển các trang web đa ngôn ngữ với WPML, bạn có thể cần tới một trình chuyển đổi ngôn ngữ tùy chỉnh. Tìm hiểu cách thực hiện việc này với một số lệnh PHP và CSS đơn giản.

WPML cho phép bạn thêm trình chuyển đổi ngôn ngữ vào menu, widget, chân trang và vào các trang web thông qua Trình chỉnh sửa trang web (trước đây gọi là Trình chỉnh sửa toàn bộ trang web) đồng thời cung cấp các tùy chọn tùy chỉnh và cờ tích hợp. Nhưng bạn có thể cần tới một cái gì đó đặc biệt hơn cho trang web của mình.

Trong hướng dẫn này, chúng tôi sẽ hướng dẫn cách thêm trình chuyển đổi ngôn ngữ thả nổi. Trình chuyển đổi ngôn ngữ thả nổi có giao diện đẹp và giúp khách hàng thuận tiện hơn khi xem trang web bằng ngôn ngữ của họ.

Một trang web sử dụng trình chuyển đổi ngôn ngữ thả nổi

Thực hiện theo ba bước chính sau:

  1. Thêm lệnh PHP để hiển thị trình chuyển đổi ngôn ngữ
  2. Tạo kiểu cho trình chuyển đổi ngôn ngữ của bạn bằng CSS
  3. Cập nhật cài đặt trình chuyển đổi ngôn ngữ của bạn

Đối với PHP

Bước đầu tiên là thêm lệch PHP để hiển thị trình chuyển đổi ngôn ngữ trên trang của bạn. Để làm vậy, bạn tạo một hàm để thêm thẻ div chứa trình chuyển đổi ngôn ngữ. Chúng ta có thể sử dụng hành động wpml_add_lingu_selector để hiển thị trình chuyển đổi ngôn ngữ.

Trong ví dụ này, chúng ta muốn trình chuyển đổi ngôn ngữ mới được hiển thị ở chân trang, vì vậy chúng ta sử dụng chức năng mới hook wp_footer của WordPress .

Lệnh PHP hoàn chỉnh sẽ trông như thế này.

Language switcher PHP 
//WPML - Add a floating language switcher to the footer
 add_action('wp_footer', 'wpml_floating_language_switcher'); 
 
 function wpml_floating_language_switcher() { 
    echo '<div class="wpml-floating-language-switcher">';
        //PHP action to display the language switcher (see https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/#using-php-actions)
        do_action('wpml_add_language_selector');
    echo '</div>'; 
}

Bạn có thể sao chép và thêm nó vào tệp functions.php của chủ đề (con) của bạn.

Đối với việc tạo kiểu

Với lệnh trước đó, chúng ta đã thêm trình chuyển đổi ngôn ngữ mới vào chân trang của trang web. Bây giờ là lúc tùy chỉnh để trình chuyển đổi nổi lên ở góc dưới bên phải trang web. Bạn có thể làm vậy bằng cách sử dụng thuộc tính CSS: cố định.

Hãy làm theo các bước sau để thêm lệnh CSS:

  1. Đi tới WPML → Ngôn ngữ .
  2. Cuộn xuống Tùy chọn trình chuyển đổi ngôn ngữ và mở rộng phần CSS bổ sung.

Ngoài ra, bạn có thể thêm lệnh CSS này bằng cách đi tới Giao diện → Tùy chỉnh và nhấp vào CSS bổ sung.

Ví dụ sau đây bổ sung thêm một số tùy chỉnh như bo tròn viến và đổ bóng. Tất nhiên, bạn có thể tùy chỉnh thêm theo ý muốn.

Language Switcher Styling 
/*Removing some default CSS from our language switcher*/
.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions {
  margin-bottom: 0;
}
 
.wpml-floating-language-switcher  .wpml-ls-statics-shortcode_actions a {
  background-color: transparent !important;
}
 
.wpml-floating-language-switcher .wpml-ls-legacy-list-horizontal a {
  padding: 5px;
}
 
 
/*Customize this if you want*/
.wpml-floating-language-switcher {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: #f8f8f8; /*background color*/
  border: 1px solid; /*border settings*/
  border-color: #eee; /*color of the border*/
  padding: 0px; /*padding of container*/
  border-radius: 6px; /*rounded border*/
  /*Box Shadow*/
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
}

Đối với cài đặt

Cuối cùng, bạn cần điều chỉnh một số cài đặt để trình chuyển đổi ngôn ngữ chỉ hiển thị các cờ.

Sử dụng các bước sau:

  1. Đi tới WPML → Ngôn ngữ .
  2. Cuộn xuống Trình chuyển đổi ngôn ngữ tùy chỉnh và nhấp vào Kích hoạt.
  3. Nhấp vào nút Tùy chỉnh.
  4. Đối với Nội dung cần đưa vào trình chuyển đổi ngôn ngữ, hãy chọn Gắn cờ và bỏ chọn các tùy chọn khác.
  5. Nhấp vào Lưu.
Language switcher options
Chỉ hiển thị cờ trong trình chuyển đổi ngôn ngữ thả nổi

Vậy là xong! Giờ đây bạn đã có một trình chuyển đổi ngôn ngữ tùy chỉnh đẹp mắt trên trang web:

Horizontal language switcher
Trình chuyển đổi ngôn ngữ trên giao diện người dùng

Còn nữa: Trình chuyển đổi ngôn ngữ thả nổi theo chiều dọc

Bạn cũng có thể tạo trình chuyển đổi ngôn ngữ theo chiều dọc, như ảnh chụp màn hình bên dưới:

Vertical language switcher
Trình chuyển đổi ngôn ngữ dọc

Để làm được như vậy, chỉ cần thay thế lệnh CSS trước đó bằng đoạn lệnh sau:

Vertical Language Switcher CSS 
/*Removing some default CSS our language switcher*/
.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions {
  margin-bottom: 0;
}
 
.wpml-floating-language-switcher  .wpml-ls-statics-shortcode_actions a {
  background-color: transparent !important;
}
 
.wpml-floating-language-switcher .wpml-ls-legacy-list-horizontal a {
  padding: 5px;
}
 
.wpml-floating-language-switcher .wpml-ls-item {
  display: block;
}
 
/*Customize this if you want*/
.wpml-floating-language-switcher {
  position: fixed;
  bottom: 20px;
  right: 0px;
  background: #f8f8f8; /*background color*/
  border: 1px solid; /*border settings*/
  border-color: #eee; /*color of the border*/
  padding: 0px; /*padding of container*/
  border-radius: 6px 0 0 6px; /*rounded border*/
  /*Box Shadow*/
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  z-index: 999;
}