Bộ chuyển đổi ngôn ngữ tùy chỉnh

Khi phát triển các trang web đa ngôn ngữ bằng WPML, bạn có thể cần một bộ 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 chút PHP và CSS đơn giản.

WPML cho phép bạn thêm bộ chuyển đổi ngôn ngữ vào menu, widget, chân trang và vào các trang web sử dụng Trình chỉnh sửa trang web (trước đây gọi là Chỉnh sửa toàn trang) với đầy đủ các tùy chọn tùy chỉnh và cờ tích hợp sẵn. Nhưng bạn có thể cần một thứ 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ẽ chỉ cho bạn cách thêm bộ chuyển đổi ngôn ngữ nổi. Bộ chuyển đổi ngôn ngữ nổi trông rất đẹp mắt và giúp khách hàng của bạn xem trang web bằng ngôn ngữ của họ dễ dàng hơn.

Làm theo ba bước chính sau:

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

Phần PHP

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

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

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

//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 theme (con).

Phần tạo kiểu

Với đoạn mã trước đó, chúng ta đã có một bộ chuyển đổi ngôn ngữ mới được thêm vào chân trang của trang web. Bây giờ, đã đến lúc tùy chỉnh để 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 thuộc tính CSS position: fixed.

Thực hiện các bước sau để thêm mã CSS:

1. Truy cập WPML → Cài đặt → Bộ chuyển đổi ngôn ngữ.
2. Trong khung Tùy chọn bộ chuyển đổi ngôn ngữ, mở rộng CSS bổ sung.

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

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

/*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 để bộ chuyển đổi ngôn ngữ chỉ hiển thị các lá cờ.

Thực hiện các bước sau:

1. Truy cập WPML → Cài đặt → Bộ chuyển đổi ngôn ngữ → Bộ chuyển đổi ngôn ngữ tùy chỉnh.
2. Cuộn xuống phần Bộ 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. Trong phần Những gì cần đưa vào bộ chuyển đổi ngôn ngữ, giữ dấu tích ở mục Cờ và bỏ chọn Tên ngôn ngữ bản địa, Tên ngôn ngữ trong ngôn ngữ hiện tại và Ngôn ngữ hiện tại.
5. Nhấp vào Lưu.

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

Phần bổ sung: Bộ chuyển đổi ngôn ngữ nổi dọc

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

Để làm điều này, chỉ cần thay thế CSS trước đó bằng mã sau:

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