Hướng dẫn function translate wordpress

Điểm bài viết

Nội dung chính

• Các bước để dịch giao diện WordPress
• Cú pháp dịch ngôn ngữ trong lập trình giao diện WordPress
• Dịch từ đơn giản trong giao diện WordPress
• Dịch nhiều từ trong một cụm từ
• Cài đặt và hướng dẫn sử dụng plugin Loco Translate
• Điều hướng bài viết

[Tổng cộng: 2 Trung bình: 3]

Một trong những vấn đề hay gặp phải của lập trình viên khi làm việc với giao diện WordPress là sử dụng tiếng Việt trực tiếp trong code dẫn tới nhiều mối nguy hiểm trên các môi trường deploy như code bị lỗi, không hỗ trợ unicode. Bài viết này hướng dẫn các bạn dịch giao diện WordPress hoàn chỉnh và đảm bảo không lỗi.

Các bước để dịch giao diện WordPress

Lưu ý: Đây là hướng dẫn cung cấp dành cho lập trình viên WordPress. Nếu bạn đang sử dụng giao diện không phải do mình làm ra, có thể các bước cài đặt sẽ khác. Hãy đặt câu hỏi trong mục bình luận để được tư vấn chính xác hơn.

Đầu tiên, bạn phải đảm bảo giao diện mình làm phải có khả năng hỗ trợ dịch thuật, tức là translation-ready. Điều này được hiểu như sau:

1. 1. Các từ cần dịch đều được cho vào các cú pháp được quy ước của WordPress (bước này quan trọng và phải làm trong tất cả file giao diện WordPress).
   2. Có sử dụng textdomain trong style.css

      /*
      Theme Name: Code Tot
      Text Domain: codetot
      */

   3. Có đăng ký load file ngôn ngữ trong functions.php như sau:

      function codetot_theme_setup() {
        load_theme_textdomain('codetot', get_template_directory() . '/languages');
      }
      
      add_action('after_setup_theme', 'codetot_theme_setup');

   4. Có thể scan code và tạo file template dịch mẫu (thường có tên trùng với giao diện, ví dụ codetot.pot). Bước này ta sẽ tìm hiểu ở phần dưới thông qua plugin Loco Translate.

Cú pháp dịch ngôn ngữ trong lập trình giao diện WordPress

Dịch từ đơn giản trong giao diện WordPress

Nothing Found

Sẽ cần được chuyển thành:

Hàm _e('Từ cần dịch', 'codetot') tương đương với echo __('Từ cần dịch bằng tiếng Anh', 'codetot') khi bạn muốn dịch 1 string.

Dịch nhiều từ trong một cụm từ

Nếu bạn muốn dịch từ “Go to” nhưng nó nằm trong cụm như dưới đây thì sao?

Sẽ cần được chuyển thành

printf('%s', __('Go to ', 'codetot') . get_permalink(), get_the_title());

Phương án mở rộng: sử dụng escape

Một ví dụ khác bạn nên lưu tâm là để tránh các lỗi không đáng có thì nên chủ động sử dụng escape để output string ra không bị lỗi, thường gặp nhất là với các URL. Nó giúp mức độ bảo mật của code tăng lên.

printf( '%s', esc_url( get_permalink() ), esc_html( get_the_title() ) );

Ví dụ code dịch trên giao diện Twenty Twelve của WordPress

Còn đây là ví dụ từ theme Twenty Twelve về sử dụng dịch string PHP

 printf( __( 'View all posts by %s →', 'twentytwelve' ), get_the_author() ); ?>

 comments_popup_link( '' . __( 'Leave a reply', 'twentytwelve' ) . '', __( '1 Reply', 'twentytwelve' ), __( '% Replies', 'twentytwelve' ) ); ?>

 the_content( __( 'Continue reading →', 'twentytwelve' ) ); ?>

Sau khi đảm bảo giao diện của bạn toàn bộ đều đã sử dụng theo cú pháp quy ước ví dụ ở trên, bạn cần chuyển tới bước cài đặt như ở bước 2 và bước 3 ở trên. Điều này đảm bảo giao diện của bạn hiện tại đã sẵn sàng hỗ trợ ở phần source code.

Cài đặt và hướng dẫn sử dụng plugin Loco Translate

Giờ ta cần cài đặt plugin Loco Translate để có thể scan các giá trị cần dịch, tạo template và bắt đầu dịch.

Bước 1: Sau khi cài đặt xong, bạn chuyển vào menu Loco Translate > Themes

Bước 2: Bạn chọn giao diện đang cần dịch.

Bước 3: Nhấp vào “Create template” để tạo bản dịch mẫu.

Lưu ý là ở lần đầu tiên khi mới vào, giao diện chưa có sẵn để dịch ngay mà bạn cần chọn “Create template” như hình dưới đây:

Nếu bạn đã làm các bước với style.css và functions.php như ở trên hướng dẫn, bạn sẽ thấy kết quả như dưới đây. Nhấp nút vào “Create template” để sẵn sàng dịch thôi.

Bước 4: Bạn đã sẵn sàng chưa? Hãy nhấp vào nút “Add new language” và nhập các thông tin như phần dưới đây:

Lưu ý quan trọng: Sau khi bạn dịch xong, thì phải nhấp chuột vào nút “Save” sau đó là nút “Sync” thì mới có hiệu lực ngay nhé.

Sau khi bạn nhấp vào nút Sync, trên giao diện hiện tại các giá trị sẽ được dịch.

Chúc các bạn thành công khi dịch giao diện WordPress nhé.

0 0 đánh giá

Đánh giá bài viết

Post Views: 769

Điều hướng bài viết