Cách thêm trình chuyển đổi ngôn ngữ nổi wpml tùy chỉnh vào trang web

Làm theo hướng dẫn này để thêm trình chuyển đổi ngôn ngữ nổi vào trang web WordPress của bạn với WPML. Trình chuyển đổi ngôn ngữ nổi trông rất tuyệt và giúp khách hàng dễ dàng xem trang web của bạn bằng ngôn ngữ của họ.

Bạn có thể thêm trình chuyển đổi ngôn ngữ nổi tùy chỉnh vào trang web của mình theo ba bước:

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

Thêm mã PHP

Thêm 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ẽ nối hàm mới của mình vào wp_footer .

Mã PHP hoàn chỉnh sẽ trông như thế này. Bạn có thể sao chép và thêm nó vào tệp functions.php của chủ đề .

test tiêu đề

//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
        do_action('wpml_add_language_selector');
    echo '</div>'; 
}

Cập nhật cài đặt trình chuyển đổi ngôn ngữ

Chúng tôi cần thay đổi một số cài đặt để chỉ có cờ trên trình chuyển đổi ngôn ngữ của chúng tôi. Để làm điều này:

  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 Những gì cần bao gồm trong 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 .

Phần tạo kiểu style

Công cụ chuyển đổi ngôn ngữ nổi ngang

Để 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 .

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

Ví dụ này thêm một số tùy chỉnh bổ sung như đường viền tròn và bóng hộp, nhưng bạn có thể thoải mái 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);
}

Công cụ chuyển đổi ngôn ngữ nổi dọc

Nếu muốn, bạn cũng có thể tùy chỉnh thêm để 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:

Đối với điều này, chỉ cần thay thế CSS trước đó bằng mã bên dưới:

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