Bỏ qua điều hướng
Trang chủ » Hướng dẫn Bắt đầu » Cài đặt ngôn ngữ » Cách thêm trình chuyển đổi ngôn ngữ vào trang WordPress của bạn » 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 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ố 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 bằng Trình chỉnh sửa trang web (trước đây gọi là Chỉnh sửa trang web đầy đủ) hoàn chỉnh với các tùy chọn tùy chỉnh và cờ tích hợp. Nhưng bạn có thể cần 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ữ nổi. Trình chuyển đổi ngôn ngữ nổi trông tuyệt vời và giúp khách hàng xem trang web của bạn bằng ngôn ngữ của họ dễ dàng hơn.

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

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

  1. Thêm mã 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

Phần PHP

Bước đầu tiên là thêm mã PHP chịu trách nhiệm hiển thị trình chuyển đổi ngôn ngữ trên trang của bạn. Để làm được điều đó, bạn tạo một hàm thêm vùng chứa div có trình chuyển đổi ngôn ngữ bên trong nó. 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 tôi muốn trình chuyển đổi ngôn ngữ mới được hiển thị ở chân trang, vì vậy chúng tôi sử dụng chức năng mới của mình với hook wp_footer của chính WordPress .

Mã 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 tin.php của chủ đề (con) của bạn.

Phần tạo kiểu

Với mã trước đó, chúng tôi đã 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 nó để nó nổi ở góc dưới bên phải của trang web. Bạn có thể làm điều nà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 mã 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 mã CSS này bằng cách vào 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ư đường viền tròn và bóng hộp. Tất nhiên, bạn có thể tùy chỉnh nó 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);
}

Phần 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 Bậ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ữ nổi

Đó là nó! Bây giờ bạn sẽ 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ữ ở mặt trước

Phần thưởng: Trình chuyển đổi ngôn ngữ nổi theo chiều dọc

Thay vào đó, bạn cũng có thể tạo trình chuyển đổi ngôn ngữ 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

Đối với điều này, chỉ cần thay thế CSS trước đó bằng đoạn mã 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;
}