Các sản phẩm WooCommerce là các "bài viết" tùy chỉnh của WordPress với các trường tùy chỉnh. Chúng được sắp xếp bằng cách sử dụng các phân loại tùy chỉnh "product categories" và "product tags". Tại đây, chúng tôi sẽ cho bạn thấy cách các trang web WooCommerce đa ngôn ngữ hoạt động và những gì giao diện WooCommerce của bạn cần để giúp chúng Multilingual Ready (sẵn sàng cho đa ngôn ngữ).
Cách các trang web WooCommerce đa ngôn ngữ hoạt động
Khi một trang web sử dụng WPML, một ngôn ngữ sẽ được gán cho mọi thành phần nội dung. Điều này có nghĩa là mỗi sản phẩm, danh mục và thẻ sẽ có một thuộc tính ngôn ngữ. Các bản dịch được lưu trong cơ sở dữ liệu dưới dạng các sản phẩm riêng biệt, được liên kết với nhau bằng bảng ngôn ngữ của WPML. Các sản phẩm đã dịch chia sẻ cùng hình ảnh và có các trường riêng biệt với văn bản bằng ngôn ngữ phù hợp.
Quản trị viên trang web có thể dịch thuận tiện bằng cách sử dụng bảng dịch sản phẩm của WPML. Bằng cách này, họ có thể tập trung vào việc dịch các văn bản bắt buộc mà không phải lo lắng về cách các bản dịch được lưu trữ trong cơ sở dữ liệu.
Vì các bản dịch được tách biệt trong cơ sở dữ liệu, nên việc hiển thị các trang web WooCommerce đa ngôn ngữ cũng rất dễ dàng. Trên thực tế, nếu bạn sử dụng API của WordPress và WooCommerce, giao diện của bạn có thể đã Multilingual Ready. Với một chút thử nghiệm và có thể là các chỉnh sửa nhỏ, bạn có thể đạt được khả năng tương thích đa ngôn ngữ hoàn toàn và tận hưởng các thị trường mới.
Các plugin bắt buộc cho trang web WooCommerce đa ngôn ngữ
Để chạy các trang web WooCommerce đa ngôn ngữ, cần có các plugin sau:
- WooCommerce
- Plugin WPML core, cùng với các tiện ích bổ sung WPML Dịch Chuỗi và WPML Dịch phương tiện
- WPML Multilingual & Multicurrency for WooCommerce
WPML và tất cả các plugin liên quan, bao gồm WPML Multilingual & Multicurrency for WooCommerce, đều đi kèm với loại tài khoản Multilingual CMS.
Văn bản hard-code trong các template
Các tệp template của bạn hiển thị kết hợp giữa thông tin sản phẩm và các văn bản hard-code. Ví dụ: hầu hết các template sẽ bao gồm tên sản phẩm và liên kết “Buy”. Tên sản phẩm đến từ cơ sở dữ liệu, vì vậy bạn không cần lo lắng về việc dịch nó.
Bạn nên đảm bảo rằng tất cả các văn bản hard-code đều có thể dịch được, bằng cách sử dụng GetText.
Tốt
<p><?php _e('Similar products:', 'my-textdomain') ?></p><input type="button" name="buy-button" value="<?php esc_attr_e('Buy now!', 'my-textdomain') ?>" />Trong ví dụ bên dưới, “Similar products” và “Buy now!” không được bọc trong các lệnh gọi GetText.
Không tốt
<p><?php echo 'Similar products:'; ?></p>
<input type="button" name="buy-button" value="Buy now!" />Tốt
<p><?php _e('Similar products:', 'my-textdomain') ?></p><input type="button" name="buy-button" value="<?php esc_attr_e('Buy now!', 'my-textdomain') ?>" />Không tốt
<p><?php echo 'Similar products:'; ?></p><input type="button" name="buy-button" value="Buy now!" />“Similar products” và “Buy now!” không được bọc trong các lệnh gọi GetText.
| Tốt | Không tốt |
|---|---|
<p><?php _e('Similar products:', 'my-textdomain') ?></p><input type="button" name="buy-button" value="<?php esc_attr_e('Buy now!', 'my-textdomain') ?>" /> | <p><?php echo 'Similar products:'; ?></p><input type="button" name="buy-button" value="Buy now!" />“Similar products” và “Buy now!” không được bọc trong các lệnh gọi GetText. |
Đảm bảo rằng bạn sử dụng textdomain của giao diện cho tất cả các lệnh gọi GetText.
Các trang WooCommerce được hard-code
Nhiều giao diện thương mại điện tử bao gồm các trang đặc biệt, như trang Giỏ hàng hoặc Tài khoản. Giao diện thường bao gồm các liên kết đến những trang này, xuất hiện trên mọi trang của trang web.
Nếu bạn sử dụng menu WordPress cho các liên kết này, bạn đã hoàn tất thiết lập. WPML hiển thị một menu WordPress khác nhau cho mỗi ngôn ngữ, vì vậy các liên kết đến những 'trang đặc biệt' này sẽ khác nhau tùy theo ngôn ngữ. Tuy nhiên, nếu bạn hard-code các liên kết này trong các tệp template, bạn cần cho phép WPML thay thế các liên kết bằng các liên kết đến những trang này bằng ngôn ngữ phù hợp.
Cách đúng để liên kết đến các trang WooCommerce đặc biệt là sử dụng các hàm API của WordPress và ID trang WooCommerce. WPML Multilingual & Multicurrency for WooCommerce lọc lệnh gọi đến get_option() bằng các ID trang WooCommerce. Nó sẽ trả về ID của trang bằng ngôn ngữ hiện tại.
Tốt
<a href="<?php echo get_permalink(get_option('woocommerce_shop_page_id')) ?>"><?php _e('Shop page', 'my-textdomain') ?></a><a href="<?php echo get_permalink(wc_get_page_id('shop')) ?>"><?php _e('Shop page', 'my-textdomain') ?></a>“shop” là slug của trang bằng ngôn ngữ mặc định.
Không tốt
<a href="<?php echo get_permalink(5) ?>"><?php _e('Shop page', 'my-textdomain') ?></a>ID “shop page” được hard-code. Nó sẽ khác nhau đối với các trang web khác nhau và các ngôn ngữ khác nhau.
<a href="/shop"><?php _e('Shop page', 'my-textdomain') ?></a>URL “shop page” được hard-code. Nó sẽ khác nhau đối với các ngôn ngữ khác nhau.
| Tốt | Không tốt |
|---|---|
<a href="<?php echo get_permalink(get_option('woocommerce_shop_page_id')) ?>"><?php _e('Shop page', 'my-textdomain') ?></a><a href="<?php echo get_permalink(wc_get_page_id('shop')) ?>"><?php _e('Shop page', 'my-textdomain') ?></a>“shop” là slug của trang bằng ngôn ngữ mặc định. | <a href="<?php echo get_permalink(5) ?>"><?php _e('Shop page', 'my-textdomain') ?></a>ID “shop page” được hard-code. Nó sẽ khác nhau đối với các trang web khác nhau và các ngôn ngữ khác nhau. <a href="/shop"><?php _e('Shop page', 'my-textdomain') ?></a>URL “shop page” được hard-code. Nó sẽ khác nhau đối với các ngôn ngữ khác nhau. |
Danh sách sản phẩm Multilingual Ready
Nếu bạn sử dụng các shortcode của WooCommerce để hiển thị danh sách sản phẩm, bạn đã thiết lập xong. WooCommerce sẽ tải các sản phẩm bằng ngôn ngữ chính xác và hiển thị chúng.
Nếu bạn muốn tải sản phẩm theo cách thủ công bằng mã của riêng mình, hãy đảm bảo rằng bạn đang sử dụng API của WordPress hoặc các lệnh gọi API của WooCommerce. Nếu bạn truy cập trực tiếp vào cơ sở dữ liệu, WPML sẽ không lọc lệnh gọi của bạn và bạn sẽ nhận được một hỗn hợp tất cả các sản phẩm bằng mọi ngôn ngữ.
Tốt
<?php $products = get_posts(array('post_type' => 'product', 'suppress_filters' => 0)); ?><?php
$args = array(
'post_type' => 'product',
'posts_per_page' => 10,
);
$products = new WP_Query( $args );
?>Không tốt
<?php $products = get_posts(array('post_type' => 'product')); ?>suppress_filters sẽ được đặt thành true theo mặc định, ngăn chặn việc lọc ngôn ngữ.
$products = $wpdb->get_results($wpdb->prepare(“SELECT * FROM {$wpdb->posts} WHERE post_type='product' ORDER BY ID DESC LIMIT %d", 10));WPML không lọc các truy vấn SQL cấp thấp. Tất cả sản phẩm bằng mọi ngôn ngữ sẽ được trả về.
| Tốt | Không tốt |
|---|---|
<?php $products = get_posts(array('post_type' => 'product', 'suppress_filters' => 0)); ?><?php | <?php $products = get_posts(array('post_type' => 'product')); ?>suppress_filters sẽ được đặt thành true theo mặc định, ngăn chặn việc lọc ngôn ngữ. $products = $wpdb->get_results($wpdb->prepare(“SELECT * FROM {$wpdb->posts} WHERE post_type='product' ORDER BY ID DESC LIMIT %d", 10));WPML không lọc các truy vấn SQL cấp thấp. Tất cả sản phẩm bằng mọi ngôn ngữ sẽ được trả về. |
Khi bạn đã tải đúng các sản phẩm, bạn không cần lo lắng về ngôn ngữ khi hiển thị chúng. Mỗi sản phẩm sẽ đi kèm với các trường tùy chỉnh riêng, với thông tin bằng ngôn ngữ chính xác.
Các template sản phẩm Multilingual Ready
Vì các bản dịch được lưu trữ trong các sản phẩm riêng biệt, việc hiển thị một sản phẩm duy nhất trên trang web WooCommerce đa ngôn ngữ sẽ không đòi hỏi nhiều nỗ lực đặc biệt.
Tùy chọn thanh toán đa tiền tệ
Trang web WooCommerce đa ngôn ngữ của bạn cũng có thể bao gồm nhiều loại tiền tệ. Đối với nhiều trang web không thuộc Mỹ, việc hỗ trợ nhiều loại tiền tệ là một tính năng rất quan trọng. Ví dụ: nhiều trang web ở Châu Âu sẽ cần tính phí bằng Euro, Bảng Anh và Đô la Mỹ. Các trang web ở Đông Âu thường yêu cầu đồng Rúp Nga trong khi các trang web ở Châu Á cần nhiều loại tiền tệ khác nhau.
Hỗ trợ đa tiền tệ được bao gồm trong WPML Multilingual & Multicurrency for WooCommerce. Để cho phép khách truy cập chuyển đổi giữa các loại tiền tệ, giao diện của bạn nên bao gồm một currency switcher tùy chọn.
Bạn có thể hiển thị một currency switcher bằng cách sử dụng lệnh gọi PHP hoặc chèn một shortcode.
<?php do_action('currency_switcher', array('format' => '%name (%symbol)')); ?>[currency_switcher]Để biết thêm thông tin, hãy xem hướng dẫn về đa tiền tệ cho WooCommerce. Xin lưu ý rằng bạn sẽ chỉ thấy currency switcher trên giao diện người dùng nếu trang web sử dụng nhiều loại tiền tệ.
Làm cho trang web WooCommerce của bạn tương thích với RTL
Các giao diện WooCommerce cần tuân theo cùng nguyên tắc hỗ trợ giao diện RTL như bất kỳ giao diện WordPress nào khác. Bạn nên tạo một tệp rtl.css, với các quy tắc CSS cho hiển thị RTL.
Xử lý các độ dài văn bản khác nhau trong các ngôn ngữ khác nhau bằng thiết kế linh hoạt
Khi bạn tạo giao diện WooCommerce Multilingual Ready, hãy nhớ rằng một số văn bản sẽ dài hơn ở một số ngôn ngữ và ngắn hơn ở các ngôn ngữ khác. Đôi khi, bạn thậm chí sẽ không thể kiểm tra, vì người dùng cuối của bạn sẽ tự dịch.
Ví dụ, hãy xem hai khối sản phẩm này.
CSS được tối ưu hóa cho văn bản ngắn bằng tiếng Anh
Văn bản tiếng Tây Ban Nha dài hơn không vừa với không gian
Theo nguyên tắc chung, hãy kiểm tra giao diện của bạn với các văn bản dài gấp đôi (x2) và ngắn bằng một nửa (½). Điều này sẽ giúp bạn bao quát được hầu hết các trường hợp. Cách tốt nhất để xử lý các văn bản có kích thước khác nhau là cho phép các bố cục linh hoạt. Bố cục linh hoạt sẽ cho phép các thành phần thay đổi kích thước và chiếm lĩnh khu vực mà chúng cần. Việc tạo một template trang nhã với các kích thước linh hoạt không hề đơn giản, nhưng làm như vậy sẽ giúp tránh các lỗi hiển thị
Sẵn sàng để bắt đầu?
Nếu bạn là một nhà phát triển, đang xây dựng các giao diện hoặc tiện ích mở rộng WooCommerce, bạn chắc chắn nên tham gia chương trình Go Global của chúng tôi. Bạn sẽ nhận được một tài khoản nhà phát triển WPML miễn phí và nhận được sự hỗ trợ ưu tiên từ nhóm phụ trách khả năng tương thích của chúng tôi. Cửa hàng WooCommerce chỉ là một phần (lớn) trong giao diện của bạn. Bạn chắc chắn nên đọc hướng dẫn của chúng tôi về cách đạt được khả năng tương thích với WPML cho các giao diện của bạn.
Bạn đang xây dựng trang web cho khách hàng? Mua WPML và bắt đầu với các trang web đa ngôn ngữ cho WooCommerce và hơn thế nữa.