Toàn tập về dịch giao diện/plugin WordPress dành cho developer

Rate this post

Với sự phát triển của WordPress, việc cộng đồng sử dụng các ngôn ngữ khác nhau cần bản địa hoá là không tránh khỏi. Code Tốt hướng dẫn các bạn tìm hiểu cách thức viết chuẩn trong quá trình lập trình giao diện và plugin WordPress.

Dịch (Bản địa hoá) là gì?

Quá trình bản địa hoá tức là quá trình cung cấp các phần nội dung được fix cứng (hardcoded) từ tiếng Anh sang một ngôn ngữ khác. Tiếng Anh thường là ngôn ngữ tiêu chuẩn để từ đó dịch sang các ngôn ngữ khác.

Lấy ví dụ, trong trang chủ có nhiều mục, chẳng hạn như “Recent News”, “Gallery”, “Testimonials”. Thường các tiêu đề này sẽ không thay đổi, nhưng sẽ cần dịch sang ngôn ngữ khác nếu nó muốn dành cho các khách hàng tại Nhật, Đức hay Việt Nam.

Một lý do cơ bản khác nữa là tính bản địa hoá cao của plugin/giao diện thì càng có nhiều người dùng hơn. Ta gọi nó là “tính sẵn sàng bản địa hoá” của một sản phẩm.

Có những cách nào để dịch giao diện/plugin trong WordPress?

Cách phổ thông và cơ bản nhất là dịch bằng plugin Loco Translate. Bạn chỉ cần tìm kiếm trên Google là ra nhiều bài hướng dẫn cách dịch Loco Translate.

Cách khác dành cho lập trình viên là bạn chủ động cung cấp khả năng dịch có sẵn ngay trong giao diện/plugin của mình. Ta hãy cùng tìm hiểu cách này nhé!

Hướng dẫn dịch giao diện/plugin WordPress dành cho lập trình viên

Những điều cơ bản nhất bạn cần nắm được:

Thay vì hardcoded, bạn sẽ cần đổi các từ thành một đối số trong các function do PHP và WordPress hỗ trợ. Ví dụ:
```
<h2 class="testimonials__title">Testimonials</h2>
```
sẽ cần viết lại thành:
```
<h2 class="testimonials__title"><?php _e('Testimonials', 'codetot'); ?></h2>
```
WordPress sử dụng thư viện gettext để mang tới khả năng dịch. Dẫu PHP có sẵn một số các function, bạn nên sử dụng các function do WordPress cung cấp để đảm bảo chất lượng tốt nhất.

Bắt đầu cài đặt

Thiết lập Text Domain

Thiết lập trong giao diện của bạn file style.css với thuộc tính textdomain là tên slug của giao diện. Ví dụ như trong file style.css của giao diện Twenty Seventeen.

Text Domain này quan trọng vì nó sẽ sử dụng ở ba nơi:

Trong file style.css như ta vừa nói.
Một giá trị cần có của các function dịch.
Một giá trị của các function load_theme_textdomain() hoặc load_child_theme_textdomain()

Tải để có sẵn trong giao diện WordPress

Bản dịch của WordPress thường được lưu trong các định dạng file .po và .mo. Nó có thể được gọi ra bằng cách sử dụng các function load_theme_textdomain() và load_child_theme_textdomain() (nếu bạn đang dùng Child Theme).

Mặc nhiên, nó sẽ tải file từ môt trong các thư mục sau:

wp-content/themes/languages/{locale}.mo
wp-content/languages/themes/{text-domain}-{locale}.mo

Kể từ phiên bản 4.6, WordPress tự động kiểm tra thư mục /languages/ trong wp-content cho các bản dịch từ translate.wordpress.org (nếu bạn có giao diện đang phát hành trên theme.wordpress.org). Điều này có nghĩa là các plugin được dịch qua translate.wordpress.org không yêu cầu load_plugin_textdomain() nữa.
Nếu bạn không muốn thêm lệnh gọi load_plugin_textdomain() vào plugin của mình, bạn nên đặt mục Requires: 4.6 trong readme.txt ở ngoài cùng thư mục.

Ví dụ code khi bạn muốn load phần dịch vào giao diện trong file functions.php:

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

Dịch các giá trị đơn giản

Khi dịch các từ, cụm từ đơn giản:

// Cái này chưa output ra, mới là set string $title = __()
__('Testimonials', 'codetot')
// Cái này đã echo, ví dụ <h2><?php _e(); ?></h2>
_e('Connect with us', 'codetot')
// Cái này dành cho số ít/số nhiều
_n( 'One post', '%s posts', $count, 'codetot' )

Danh sách các function dịch có thể sử dụng trong WordPress

Các function dịch đơn giản

Các function dịch bao gồm escape (lọc các tag như HTML)

Các function dịch dành riêng cho thời gian

Tìm hiểu các cách dịch giao diện WordPress nâng cao

Ngoài việc phân tách string hardcoded như ví dụ đơn giản ở trên, bạn còn gặp các trường hợp dynamic value nằm trong đoạn dịch.

Ví dụ:

<?php echo 'Author: $author'; ?>

Khi đó, bạn sẽ sử dụng các function như printf và sprintf:

<?php printf(
/* translators: %s: Name of an author */
  __( 'Author: %s.', 'codetot' ),
  $city
); ?>

Phần comment ở trên (Name of an author) sẽ xuất hiện trong khi dịch trên translate.wordpress.org hay trong Loco Translate.

Nếu bạn có nhiều hơn 1 dynamic value, bạn có thể viết như sau:

<?php printf(
/* translators: 1: Category Name 2: Tags */
  __( 'Category: %1$s, with tagged: %2$s.', 'codetot' ),
  $category_name,
  $tag_list
); ?>

Làm việc với bản dịch có chứa số nhiều

Ta tưởng tượng tới tình huống sử dụng số nhiều, chẳng hạn như khi bài viết 1 tag và bài viết có nhiều tag. Bạn sẽ dùng _n để viết cho các tình huống này:

printf(
  _n(
    '%s comment',
    '%s comments',
    $comment_total,
    'codetot'
  ),
  number_format_i18n($comment_total )
);

Bạn thấy trong hàm có chứa cả hai giá trị cần dịch cho 1 và hơn 1 giá trị. Thường trong tiếng Việt ta ít cần tới, nhưng khi bạn làm việc với giao diện cho ngôn ngữ tiếng Anh thì cần lưu tâm.

Làm việc với các giá trị dịch cần escape

Escape có thể hiểu đơn giản là các giá trị mà bạn cần loại trừ các kí hiệu có thể dẫn tới code bị lỗi do các kí tự lạ mà người dùng vô tình thêm vào hay do bị tấn công.

Các ví dụ:

<a title="<?php esc_attr_e( 'Skip to content', 'codetot' ); ?>" class="screen-reader-text skip-link" href="#content" >
  <?php _e( 'Skip to content', 'codetot' ); ?>
</a>

<label for="nav-menu">
  <?php esc_html_e( 'Select Menu:', 'codetot' ); ?>
</label>

Những điều cần lưu ý khi dịch giao diện/plugin WordPress

Dù bạn có làm giao diện cho thị trường Việt Nam hay Nhật, hãy giữ giao diện/plugin trong code nguyên bản là tiếng Anh. Nó cung cấp khả năng dịch an toàn và tránh lỗi tốt nhất.
Ngôn ngữ văn bản của IT thường cần ngắn gọn, súc tích, dễ hiểu. Đừng dùng tiếng lóng hoặc các biểu cảm quá rõ ràng dẫn tới người dùng khó hiểu ý.
Sử dụng dịch cả đoạn, bởi trong nhiều ngôn ngữ, thứ tự từ trong câu sẽ khác tiếng Anh.
Tách các đoạn văn bản hợp lý, không quá dài mà cũng không quá ngắn.
Không thêm khoảng trống ở đầu hay cuối đoạn cần dịch.
Xem phương án kích thước chữ dài ngắn sẽ khác nhau khi ở các ngôn ngữ khác nhau.
Hạn chế tối đa thêm các kí tự đặc biệt hay các cấu trúc lạ dẫn tới gây khó khăn cho người dịch.
Không nên đẩy markup HTML vào trong nội dung dịch.
Đừng cho vào địa chỉ URL trừ khi bạn tin rằng có phiên bản riêng cho ngôn ngữ đó.
Thêm các placeholder để dễ dàng đảo lộn thứ tự từ ngữ trong các ngôn ngữ khác, ví dụ:
```
printf(
  __( 'Search results for: %s', 'my-theme' ),
  get_search_query()
);
```

Dịch cả câu với các giá trị tuỳ biến thay vì tách nhỏ từng từ, ví dụ:

printf(
  __( 'Your city is %1$s, and your zip code is %2$s.', 'codetot' ),
  $city,
  $zipcode
);

Đọc cái trên dễ hiểu hơn so với

__( 'Your city is ', 'codetot' ) . $city . __( ', and your zip code is ', 'codetot' ) . $zipcode;

Cố gắng tận dụng các từ giống nhau và hạn chế thêm các kí tự lạ để giảm thiểu khả năng phải dịch, ví dụ về cách làm không đúng:
```
_e('Recent Posts', 'codetot')
_e('Recent Posts:', 'codetot')
```

Kết luận

Nguyễn Minh Khôi

Giám đốc tại Công ty CP CODE TỐT. Quản lý ngôn ngữ bản địa tiếng Việt tại WordPress. Là tác giả chính tại codetot.net, Khôi muốn ghi lại một sốvấn đề kỹ thuật trong quá trình phát triển các dự án website với khách hàng.

2 bình luận về “Toàn tập về dịch giao diện/plugin WordPress dành cho developer”

Huấn Lê

04/11/2018 vào lúc 12:26

Xin hỏi trong trường hợp dịch Loco mà như hình dưới thì dịch như thế nào để hiển thị chính xác
https://i.imgur.com/RxhFGX1.jpg
Trả lời
- Nguyễn Minh Khôi
  
  13/11/2018 vào lúc 13:00
  
  Bạn copy đoạn Single và dịch thôi. Thường ở tiếng Việt số ít số nhiều thì danh từ vẫn giữ nguyên bạn nhé.
  Trả lời