Làm đa ngôn ngữ trong WordPress miễn phí với qTranslate

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Làm đa ngôn ngữ trong WordPress miễn phí với qTranslate

Tuần trước, mình có nhận thiết kế cho website dạy dỗ sử dụng nhiều ngôn ngữ cụ thể là 2 ngôn ngữ (tiếng anh và tiếng việt). Yêu cầu sử dụng đa ngôn ngữ trong wordpress . Để chèn thêm ngôn ngữ vào trong website thì có thể xài Google Translate, tuy vậy với những ai đã tâm huyết viết thêm một ngôn ngữ nữa để dùng trong website của họ thì thật là uổng phải không?

đa ngôn ngữ trong wordpress
Vậy chúng ta có thể làm website nhiều hơn 2 ngôn ngữ trên và một bản cài đặt WordPress không? Hoàn toàn được vì trong WordPress có bổ trợ khá nhiều plugin để làm việc này, trong bài này mình sẽ giới thiệu và chỉ dẫn dùng một plugin tạo website đa ngôn ngữ rất dễ dùng mà lại hoàn toàn miễn phí, đó là qTranslate.

Hướng dẫn cài đặt và thiết lập qTranslate

Cài đặt như cài các plugin thông thường, tải plugin qTranslate cài đặt và active nó. Sau khi kích hoạt động, bạn nên vào phần thiết lập đường dẫn.
permalink wordpress

Chú ý: bạn cần sử dụng đúng phiên bản qTranslate phù phù hợp với bản wordpress bạn đang dùng, nếu không plugin sẽ không hoạt động đúng. Bạn có thể xem danh sách phiên bản plugin qTranslate và phiên bản wordpress tương thích tại đây.

Mặc định plugin sẽ tạo sẵn 3 ngôn ngữ english, tiếng đức và trung quốc. Để thay đổi hoặc thêm ngôn ngữ bạn vào Setting-> languages . Nhấn Disable vào ngôn ngữ không muốn sử dụng và enable vào ngôn ngữ bạn mong muốn cài thêm. Ở đây mình bỏ đi 2 ngôn ngữ là tiếng đức và trung quốc, bạn ấn disable vào 2 dòng ngôn ngữ này.
hướng dẫn cài qTranslate

Sau đó tìm đến ngôn ngữ tiếng việt và bấm vào Enable để kích hoạt nó. Và tiếp tục enable với những ngôn ngữ bạn muốn thêm vô website. Bạn cũng cũng đều có thể thêm ngôn ngữ khác nếu trong bản kê không có ngôn ngữ đó. Tạo thêm ngôn ngữ bằng tính năng Add Language , ở phía bên tay trái. Các thông tin luôn phải có lập cho ngôn ngữ mới:

  • Language Code : mã ngôn ngữ gồm 2 chữ cái tương ứng với từng ngôn ngữ và bạn cần viết thường. Bạn cũng đều có thể xem bản kê Language Code tại đây. Ví dụ: vi cho tiếng việt .
  • Flag : chọn cờ cho ngôn ngữ này, cờ này sẽ xuất hiện ra bảng chọn ngôn ngữ ngoài website luôn nên đừng chọn bừa nhé.
  • Name : Tên của ngôn ngữ.
  • Locale : Mã nhận diện quốc gia của từng ngôn ngữ, cái này bạn tham khảo bản kê này nhé.
  • Date Format : Định dạng ngày tháng của từng ngôn ngữ. Tùy từng ngôn ngữ mà bạn cài đặt định dạng ngày tháng khác nhau, tham khảo php date format. Hoặc bỏ trống thì các ngôn ngữ sẽ lấy định hình ngày tháng mà bạn thiết lập trong Setting-> general.
  • Time Format : cũng như date format , đây là định dạng hiển thị giờ không phải ngày.
  • Not Avaiable Message : dòng thông báo khi một nội dung không được thêm vào ngôn ngữ mà bạn đang tạo.

Sau khi thêm xong, bạn enabled ngôn ngữ này lên. Kéo lên trên một chút, nhìn thấy mục Advanced Settings và bạn nhấn vào link show bên cạnh. Option “URL Modification Mode” là tùy chọn cài đặt URL để chuyển đến ngôn ngữ trên website, mặc định mã ngôn ngữ được thêm nữa sau địa chỉ trang web (base URL) ví dụ: URL đổi sang ngôn ngữ tiếng anh: https://www.hoangweb.com/en/
URL bài viết: https://www.hoangweb.com/en/wordpress-site/cach-xoa-bo-sidebar-trong-genesis

Hiển thị menu chọn ngôn ngữ trên frontend.

Bước tiếp theo, không kém phần quan trọng là hiển thị chọn lựa ngôn ngữ trên website để người sử dụng có thể chuyển đổi ngôn ngữ mà họ muốn. Có 2 cách: dùng widget hoặc dùng php

Dùng widget

Vào Appearance -> Widget và tìm widget “qTranslate Languages Chooser” rồi kéo vào sidebar nơi vị trí bạn muốn hiển thị. Có thể hiển thị cả chữ và icon hoặc chỉ hiển thị dạng dropdown list.
Mẹo nhỏ: có thể dùng thêm css để chỉnh lại địa thế theo hàng ngang cho các tượng trưng và chữ hiển thị ngôn ngữ.

   .qtrans_language_chooser   li   {     float    :     left    ;     }   

Dùng PHP

Dùng php thì bạn cũng đều có thể chèn khắp nơi trong code và nó sẽ khỏi bị lỗi chuyển về ngôn ngữ gốc khi chuyển.

  
<?= qtrans_generateLanguageSelectCode ( 'dropdown' ) ; ?>

Cú pháp: qtrans_generateLanguageSelectCode($type) . Trong đó: $type định vị kiểu chọn ngôn ngữ, chấp nhận các giá trị:
‘dropdown’: danh sách chọn, hiển thị nguyên tên ngôn ngữ.
‘image’: hiển thị icon ngôn ngữ.
‘both’: liệt kê tên ngôn ngữ có kèm ảnh.

Khi sử dụng hàm này sẽ tạo class với các ngôn ngữ không trùng lặp với hậu tố là mã ngôn ngữ, tên class là qtrans_flag_[mã ngôn ngữ] . Ví dụ: qtrans_flag_vi,
Kết quả:
hướng dẫn qtranslate

Thêm nội dung cho từng ngôn ngữ trong qTranslate

Phần này quan trọng nhất, đó là thêm nội dung của từng ngôn ngữ. Trong phần sửa bài viết bạn sẽ thấy có nhiều mục nhập nội dung cho bài viết với nhiều ngôn ngữ. Nó trông như thế này nè:
nhập nhiều ngôn ngữ wordpress

Bạn tiến hành nhập tiêu đề cho từng ngôn ngữ cũng giống phần nội dung. Nó sẽ hiển thị tương ứng với từng ngôn ngữ mà khách chọn.

Đối với Tag và Category cũng như vậy, tuy vậy phần slug thì cố định giữ nguyên theo những ngôn ngữ khác nhau.
huong-dan-qtranslate

Tùy biến hiển thị với shortcode

Mặc định nhận thấy plugin bổ trợ đăng tin với nhiều ngôn ngữ cho bài viết, nhưng nếu chuyển sang phần custom post type hay menu thì nó không có phần nhập cho mỗi ngôn ngữ. Để khắc phục yếu điểm này là sử dụng shortcode mà plugin này hỗ trợ thêm.

Cách sử dụng Shortcode của qTranslate khá đơn giản, khi bạn viết một thứ gì đó nhưng muốn nó hiển thị bằng 2 ngôn ngữ thì cũng có thể viết như sau:

   [    :  en  ]  Homepage   [    :  vi  ]  Trang chủ 

Chèn trước mỗi nội dung của ngôn ngữ đó là mã shortcode, đằng sau dấu hai chấm là Language Code. Nếu bạn chưa biết mã này thì xem lại ở phần bên trên mình đã đề cập.

Xem ví dụ sau, mình tạo 2 ngôn ngữ anh và việt cho menu item.
tùy biến hiển thị qtranslate

Bây giờ bạn tải lại trang web và chuyển đổi ngôn ngữ xem sẽ thấy tên menu được thay đổi tương ứng.

Vì này là extension của qTranslate do đó, bạn có thể áp dụng shortcode này vào các plugin hoặc custom post type.

API

Có một số hàm tiện tích sau đây bạn có thể dùng đến khi viết code sử dụng qtranslate.
– Lấy ngôn ngữ hiện tại kích hoạt trên website.

 $currentLang = qtrans_getLanguage(); if($currentLang == 'fr') { //show french logo $imageName = logoFR.png'; } else if($currentLang == 'hi') { //show Hindi logo $imageName = logoHI.png'; } else { //show english logo to rest $imageName = logoEN.png'; }  

hàm này chứa tại file qtranslate_utils.php . Mã ngôn ngữ ngày nay bản chất được lưu vào biến global $GLOBALS['q_config']['language']; , bạn cũng đều có thể trực diện lấy biến global này.

– Trả về bản kê các ngôn ngữ được sử dụng (enabled):
Plugin có hàm qtrans_getSortedLanguages($reverse = false) trả về mảng mã các ngôn ngữ được sử dụng cho website, mặc định liệt kê theo thứ tự nếu thiết lập $reverse = false giá trị mảng sẽ đảo ngược. Bạn có thể tìm thấy hàm này trong file qtranslate_utils.php như sau:

 function qtrans_getSortedLanguages($reverse = false) { global $q_config; $languages = $q_config['enabled_languages']; ksort($languages); // fix broken order $clean_languages = array(); foreach($languages as $lang) { $clean_languages[] = $lang; } if($reverse) krsort($clean_languages); return $clean_languages; }  

– Tên Hiển thị ngôn ngữ bởi mã ngôn ngữ:

 $language='vi'; echo $GLOBALS['q_config']['language_name'][$language];  

– Chuyển URL sang ngôn ngữ hiện tại, nếu bạn sử dụng hàm tạo link thường thì như site_url, home_url,..sẽ không liên quan đến qtranslate, mã ngôn ngữ ngày nay trên website không gắn vào URL tạo bởi hàm này, bạn phải sử dụng hàm chuyển đổi qtrans_convertURL . Ví dụ sau trả về home url có ngôn ngữ chuyển đổi.

 echo esc_attr( qtrans_convertURL(home_url()) );  

Tuy nhiên, wordpress ở nơi đâu cũng mở hooks bạn có thể sửa lại trong hàm liên kết hook mà không cần tìm viết lại code trực tiếp tại file với tính năng đó. Ví dụ bạn sẽ sửa lại địa điểm home ở bất kỳ anchor nào liên kết vào home URL.

 function qtrans_convertHomeURL($url, $what) { if($what=='/') return qtrans_convertURL($url); return $url; } add_filter('home_url', 'qtrans_convertHomeURL', 10, 2);  

– Tạo URL có tham số chuyển hướng ngôn ngữ, có 2 cách để chuyển sang trang ngôn ngữ mới sử dụng rewrite thêm slug ngay sau base URL bởi mã ngôn ngữ. vd:example.com/en/
Nhưng nếu bạn có URL bài viết như thế này: example.com/category1/post-title-sample
để cho đơn giản chúng ta chèn tham số lang vào sau URL đây là được. Plugin cung cấp hàm qtrans_convertURL($url,$lang) giúp bạn gán mọi ngôn ngữ chuyển đổi vào URL.

 $language='en'; $language_url = qtrans_convertURL('',$language); echo 'ABC'."n";  

Bỏ trống tham số $url sẽ lấy URL hiện tại.

Và với cách sử dụng tham số ‘lang’ thay vì rewrite mã ngôn ngữ chuyển đổi vào sau địa chỉ Home Base URL, thì cũng phải sửa lại trong pagination. Tham khảo đoạn code sau:

  <?php if ( function_exists('qtrans_convertURL') ): add_filter('get_pagenum_link', 'qtranslate_next_previous_fix'); add_filter('next_post_link', 'qtranslate_single_next_previous_fix'); add_filter('previous_post_link', 'qtranslate_single_next_previous_fix'); function qtranslate_next_previous_fix($url) { return qtrans_convertURL($url); } function qtranslate_single_next_previous_fix($url) { $just_url = preg_match("/href="([^"]*)"/", $url, $matches); return str_replace($matches[1], qtrans_convertURL($matches[1]), $url); } endif;  

Lưu ý

Chú ý : ngày nay qTranslate bổ trợ nhiều nhất phiên bản wordpress 3.8.1, nếu bạn dùng bản 4.0 hoặc cao hơn plugin này sẽ không cho phép hoạt động, nhưng qTranslate vẫn cũng có thể có thể được bật lên nhưng vẫn không đáp ứng hoạt động đúng.
qtranslate-incompatible

Theo hướng dẫn, bạn cần chuyển về phiên bản wordpress được yêu cầu tương thích với qTranslate ngày nay bạn đang cài. Nhấn vào liên kết này để kiểm tra phiên bản thích hợp corresponding version.
qtranslate-wp-compatible

Khi update wordpress 3.9 trang sẽ ngừng load bởi vì qTranslate không tương tích bạn có thể gặp phải lỗi:

 PHP Catchable fatal error: Object of class WP_Post could not be converted to string in /wp-content/plugins/qtranslate/qtranslate_core.php on line 455  

Lỗi này gây ra bởi plugin đã sửa đổi: hàm get_the_date chấp nhận nhiều tham số $post_argument.
qTranslate đăng ký hàm qtrans_dateFromPostForCurrentLanguage($old_date, $format ='', $before = '', $after = '') cho hook get_the_date nhưng nó chỉ chấp nhận một tham số. Đoạn code sau đây mình sẽ hack file qtranslate_core.php, xóa đi 2 tham số $before, $after của hàm qtrans_dateFromPostForCurrentLanguage tức là sử dụng mặc định khai báo ở hàm qtrans_strftime.

 function qtrans_dateFromPostForCurrentLanguage($old_date, $format =''/*, $before = '', $after = ''*/) { global $post; return qtrans_strftime(qtrans_convertDateFormat($format), mysql2date('U',$post-> post_date), $old_date/*, $before, $after*/); } function qtrans_dateModifiedFromPostForCurrentLanguage($old_date, $format ='') {  

Chúc bạn thành công!

Hãy cho mình biết suy nghĩ của bạn trong phần bình luận bên dưới bài viết này. Hãy theo dấu kênh chia sẻ kiến thức WordPress của TopVn trên Twitter và Facebook

Bài viết Làm đa ngôn ngữ trong WordPress miễn phí với qTranslate được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang