1. Giới thiệu về mqTranslate

mqTranslate là một trong những plugin phổ biến được dùng để tạo ra những trang WordPress đa ngôn ngữ tương tự như qTranslate. Bài viết này sẽ hướng dẫn các bạn tạo menu chuyển ngôn ngữ với mqTranslate

2. Một số lưu ý trước khi thực hiện:

  • Sử dụng phương pháp chuyển ngôn ngữ Use Query Mode trong phần Settings -> Languages->Advanced Settings (phương pháp này cho phép chuyển ngôn ngữ bằng cách chỉ cần thêm một biến ?lang=en trước URL hiện tại). Use Query Mode chỉ hoạt động với URL thường, không hoạt động với các permalink.
  • Ví dụ
    • https://techmaster.vn/wp-admin/post.php?post=6155&action=edit&lang=en -> không bị lỗi
    • https://techmaster.vn/2014/05/lay-ssid-cua-wifi-trong-ung-dung-ios/?lang=en -> bị lỗi

3. Cách tạo menu chuyển ngôn ngữ với mqTranslate:

  • Dùng phương pháp chuyển ngữ User Pre-Path Mode hoặc Use Pre-Domain Mode (Với Use Pre-Domain cần phải thêm subdomain “en” cho domain hiện tại) nếu trang WordPress có kích hoạt tính năng Permalink
  • Để sinh ra hộp thoại chọn ngôn ngữ và chèn vào menu cần phải custom lại file header.php và style.css của theme hiện tại đang dùng (trong trường hợp của techmaster.vn là Responsive Child)
  • Để custome file style.css, vào trang quản trị, chọn Appearance   -> Editor, chọn style.css ở cột bên phải, thêm đoạn CSS sau: (Xem hình dưới để biết vị trí chèn)
    @media (max-width: 979px) {
    ul.qtrans_language_chooser {
       top: 16px;
    }
}
#mqtranslate-chooser { margin: 0 0px 0 0; list-style:none }
#mqtranslate-chooser li { float:left; margin: 8px 5px 0 0; }

     

    Thay đổi CSS để hiển thị menu chuyển ngôn ngữ với mqTranslate

  • Để custome file header.php, vào trang quản trị, chọn Appearance -> Editor, chọn header.php ở cột bên phải, thêm đoạn code: (Xem hình dưới để biết vị trí chèn)
    <div style="float: right;margin-top: 7px;">
   <?=qtrans_generateLanguageSelectCode('image');?>
</div>

    Thay đổi header.php để hiển thị menu chuyển ngôn ngữ với mqTranslate