Tìm hiểu cách đăng ký nội dung tùy chỉnh của trình tạo trang để dịch bằng cách sử dụng tệp wpml-config.xml. Đăng ký các chuỗi, phương tiện, widget của trình tạo trang, ID của shortcode và nhiều nội dung khác.
Hướng dẫn này dành cho các nhà phát triển xây dựng giao diện và plugin hoặc thêm mã tùy chỉnh của trình tạo trang vào trang web của họ.
Nếu bạn sử dụng trình tạo trang của bên thứ ba và không thể dịch các widget tùy chỉnh trên trang web của mình, vui lòng liên hệ với bộ phận hỗ trợ của WPML.
Bạn cần tạo tệp wpml-config.xml? Hãy xem hướng dẫn từng bước của chúng tôi về cách tự động tạo tệp cấu hình bằng plugin Multilingual Tools.
Dịch chuỗi
Hãy xem xét một ví dụ trong đó bạn có một dải phân cách văn bản được thêm vào trang bằng Visual Composer. Dải phân cách đó có một tiêu đề và shortcode của nó trông như thế này:
[vc_text_separator title="Separator Title"]
Để dịch tiêu đề của dải phân cách văn bản này, bạn cần thêm một vài dòng vào tệp wpml-config.xml của mình. Bằng cách này, WPML sẽ “biết” rằng tiêu đề của dải phân cách đó cần được dịch.
Mã sau đây là ví dụ về những gì bạn cần thêm vào tệp wpml-config.xml trong trường hợp này.
Ví dụ về việc thêm shortcode của trình tạo trang vào tệp wpml-config.xml
<wpml-config>
<shortcodes>
<shortcode>
<tag>vc_text_separator</tag>
<attributes>
<attribute>title</attribute>
</attributes>
</shortcode>
</shortcodes>
</wpml-config>Hãy cùng xem qua cấu trúc của ví dụ trên:
- Bắt đầu với thẻ shortcodes. Bất kỳ shortcode nào trên trang web của bạn cần được dịch đều phải được đặt dưới thẻ này.
- Sử dụng thẻ shortcode để bọc tất cả các thẻ thuộc về một shortcode duy nhất.
- Sử dụng thẻ có tên là tag để xác định tên của shortcode. Trong trường hợp này, đó là vc_text_separator. Nếu muốn, bạn có thể thêm các nhãn tùy chỉnh tùy chọn cho các thẻ. Các nhãn này sẽ hiển thị bên cạnh văn bản trong cả Trình biên tập dịch thuật nâng cao và Trình biên tập dịch thuật cổ điển. Các tệp XLIFF được xuất cũng bao gồm các nhãn này. Xem ví dụ bên dưới về cách thêm nhãn cho các thẻ và thuộc tính.
- Các shortcode có thể có một hoặc nhiều thuộc tính, vì vậy bạn cần bọc chúng trong thẻ attributes (số nhiều) và sử dụng thẻ attribute (số ít) để xác định tiêu đề của từng thuộc tính.
Trình tạo trang (đôi khi) bao gồm các thành phần thiết kế có các thuộc tính liên kết.
Bạn có thể làm cho các liên kết nội bộ tự động trỏ đến phiên bản đã dịch của bài viết đó bằng cách sử dụng tùy chọn liên kết: type="link".
Bạn có thể sử dụng thuộc tính encoding với tùy chọn này. Nó xử lý mã hóa đặc biệt mà các trình tạo trang khác nhau sử dụng. Thuộc tính mã hóa thường dành riêng cho trình tạo trang mà bạn sử dụng. Nó chấp nhận các giá trị sau:
- base64 – Shortcode HTML thô của Visual Composer. Shortcode lưu trữ HTML dưới dạng một chuỗi base64.
- vc_link – Định dạng liên kết đặc biệt cho Visual Composer.
- vc_values – Mã hóa Visual Composer đặc biệt cho các giá trị trong các widget thanh tiến trình, biểu đồ tròn và biểu đồ đường.
- av_link – Định dạng liên kết đặc biệt cho Enfold.
- allow_html_tags – Thông thường các thẻ HTML bị loại bỏ khỏi các thuộc tính shortcode. Đặt mã hóa thành allow_html_tags nếu thuộc tính shortcode cần cho phép các thẻ HTML. Hãy sử dụng tùy chọn này một cách thận trọng vì việc cho phép các thẻ HTML trong một số tình huống có thể làm hỏng định dạng và có thể là một vấn đề bảo mật.
Ví dụ về việc thêm thuộc tính liên kết của shortcode: type="link"
<wpml-config>
<shortcodes>
<shortcode>
<tag>av_button</tag>
<attributes>
<attribute>label</attribute>
<attribute type="link" encoding="av_link">link</attribute>
</attributes>
</shortcode>
</shortcodes>
</wpml-config>Nếu bạn đang nghĩ đến việc sử dụng các shortcode urlencoded, hãy đảm bảo đọc trang về cách Dịch các shortcode urlencoded.
Ví dụ về việc thêm nhãn cho thẻ và thuộc tính
<wpml-config>
<shortcodes>
<shortcode>
<tag label="My shortcode label">my_shortcode</tag>
<attributes>
<attribute label="Shortcode title">title</attribute>
</attributes>
</shortcode>
</shortcodes>
</wpml-config>Việc thêm nhãn vào các thẻ và thuộc tính cho phép bạn hiển thị các nhãn tùy chỉnh trong Trình biên tập dịch thuật nâng cao hoặc Trình biên tập dịch thuật cổ điển. Điều này có thể giúp người dịch hiểu rõ hơn về ngữ cảnh của chuỗi.
Nhóm các trường để tổ chức tốt hơn
Để cải thiện độ rõ ràng và cách tổ chức cấu hình XML của bạn, bạn có thể thêm tiền tố là tên nhóm vào nhãn trường. Hãy xem xét ví dụ này về một nút CTA:
<wpml-config>
<shortcodes>
<shortcode>
<tag label="Call To Action: Content">et_pb_cta</tag>
<attributes>
<attribute label="Call To Action: Title">title</attribute>
<attribute label="Call To Action: Button Text">button_text</attribute>
<attribute label="Call To Action: Button URL" type="link">button_url</attribute>
</attributes>
</shortcode>
</shortcodes>
</wpml-config>
Ở đây, mỗi thuộc tính của shortcode et_pb_cta đều mang một nhãn Call To Action: . WPML không chuyển các nhãn đó sang Trình biên tập dịch thuật nâng cao: người dịch nhìn thấy mỗi thuộc tính như một trường riêng biệt, được nhóm dưới shortcode và phân biệt các trường bằng văn bản mà mỗi trường chứa. Thuộc tính label vẫn là một phần của định dạng cấu hình và vẫn đáng để thiết lập:
Dịch phương tiện
Bạn có thể sử dụng Dịch phương tiện của WPML để sử dụng các hình ảnh khác nhau cho các ngôn ngữ khác nhau trong nội dung của trình tạo trang. Việc này được thực hiện bằng cách chuyển đổi ID hình ảnh và URL hình ảnh. Bạn phải “nói” cho trình tạo trang sử dụng shortcode biết cách thực hiện việc chuyển đổi này. Mã sau đây là ví dụ về những gì bạn cần thêm vào tệp wpml-config.xml trong trường hợp này.
Ví dụ về việc thêm shortcode của trình tạo trang vào tệp wpml-config.xml để dịch hình ảnh
<wpml-config>
<shortcodes>
<shortcode>
<!-- Convert media IDs in `gallery_ids` attribute, and ignore the shortcode content -->
<tag ignore-content="1">et_pb_gallery</tag>
<attributes>
<attribute type="media-ids">gallery_ids</attribute>
<attributes>
</shortcode>
<shortcode>
<!-- Convert the media URL in the content, translate some string attributes for `title` and `alt`, convert media URL in `src` attribute -->
<tag type="media-url">et_pb_image</tag>
<attributes>
<attribute>title_text</attribute>
<attribute>alt</attribute>
<attribute type="media-url">src</attribute>
</attributes>
</shortcode>
</shortcodes>
</wpml-config>Bạn có thể sử dụng các giá trị sau:
- ignore-content – Bạn có thể sử dụng nó bên trong phần tử tag. Giá trị này là tùy chọn và nó có thể là 0 hoặc 1. Bạn có thể sử dụng thuộc tính này để đạt được khả năng tương thích ngược cho các shortcode phương tiện mới. Nếu giá trị được đặt thành 1, nội dung của shortcode sẽ không được xử lý.
- type – Bạn có thể sử dụng nó bên trong phần tử tag. Bạn cũng có thể sử dụng nội dung shortcode chứa URL phương tiện làm giá trị tùy chọn bên trong media-url.
- type – Bạn cũng có thể sử dụng nó bên trong phần tử attribute. Trong trường hợp này, nó có thể có một trong các giá trị tùy chọn sau:
- media-ids – danh sách các ID phương tiện được phân tách bằng dấu phẩy.
- media-url – URL của phương tiện
- link – trỏ đến một trang khác trên trang web và WPML sẽ tự động chuyển đổi nó thành URL của trang đã dịch
Dịch phương tiện trong các thuộc tính của khối
Bạn cũng có thể sử dụng các loại thuộc tính media-url và media-ids với các khối Gutenberg để dịch phương tiện như hình nền. Cách này hoạt động tương tự như các shortcode, nhưng sử dụng phần tử <gutenberg-block> với các phần tử <key> lồng nhau để xác định type="media-url" và type="media-ids".
Việc sử dụng phần tử này cho phép tiện ích bổ sung Dịch phương tiện của WPML dịch các hình nền.
Cách này hoạt động cho cả các khối Gutenberg và Divi 5. Phiên bản Divi này sử dụng các khối để lưu trữ nội dung, vì vậy phần tử <gutenberg-block> có tác dụng thêm bản dịch phương tiện.
Dưới đây là một ví dụ về việc thêm bản dịch phương tiện cho các thuộc tính của khối Gutenberg:
<wpml-config>
<gutenberg-blocks>
<gutenberg-block type="divi/section" translate="1">
<key name="module">
<key name="decoration">
<key name="background">
<key name="desktop">
<key name="value">
<key name="image">
<key name="url" type="media-url" />
</key>
</key>
</key>
</key>
</key>
</key>
</gutenberg-block>
</gutenberg-blocks>
</wpml-config>
Dịch các widget của trình tạo trang
WPML cho phép bạn đăng ký các widget của trình tạo trang bên trong tệp cấu hình ngôn ngữ của mình. Để biết thông tin chi tiết, hãy xem trang tài liệu của chúng tôi về cách đăng ký các widget của trình tạo trang để dịch.
Tự động chuyển đổi ID của shortcode
Kể từ WPML 4.5.9, bạn có thể khai báo các ID của bài viết hoặc các thuật ngữ phân loại nằm trong các thuộc tính của shortcode. Các ID này sau đó có thể được tự động chuyển đổi trên frontend của trang web.
Kể từ WPML 4.8, logic tương tự này mở rộng cho các ID đối tượng được lưu trữ trong văn bản quản trị, cũng như các ID trong các trường tùy chỉnh của bài viết và các trường thuật ngữ phân loại tùy chỉnh.
Ví dụ, hãy xem xét shortcode sau:
[foo_product_list product_ids="12,34,56"]
Bạn có thể khai báo rằng thuộc tính product_ids đang giữ các ID bài viết với cấu hình sau:
Khai báo rằng thuộc tính product_ids đang giữ các ID bài viết
<shortcode>
<tag ignore-content="1">foo_product_list</tag>
<attributes>
<attribute type="post-ids" sub-type="product">product_ids</attribute>
</attributes>
</shortcode>Trên frontend, shortcode tự động chuyển đổi thành:
[foo_product_list product_ids="13,35,57"]
Bạn có thể sử dụng các thuộc tính cấu hình sau:
- type – là post-ids hoặc taxonomy-ids
- sub-type (tùy chọn) – một thực thể cụ thể của type nếu nó đã được biết. Ví dụ: product cho loại nội dung tùy chỉnh Product đến từ WooCommerce. Nếu nó không được xác định, thực thể cụ thể sẽ được dự đoán.
Việc chuyển đổi ID rất linh hoạt và cố gắng thích ứng với hầu hết các định dạng có thể có của ID (ID đơn, danh sách các ID, mảng được tuần tự hóa, mảng được mã hóa JSON).
Tên thuộc tính có ký tự đại diện
Một số shortcode lưu trữ ID trong nhiều thuộc tính có tên tương tự nhau, ví dụ như include_category, include_portfolio_category và include_product_cat. Một dòng <attribute> có thể bao gồm tất cả chúng. Đặt * trong tên thuộc tính:
Khai báo tất cả các thuộc tính include_ và exclude_ đang giữ các ID phân loại
<shortcode>
<tag>fusion_post_cards</tag>
<attributes>
<attribute type="taxonomy-ids" exclude="include_product_skus">include_*</attribute>
<attribute type="taxonomy-ids" exclude="exclude_product_skus">exclude_*</attribute>
</attributes>
</shortcode>- * khớp với một hoặc nhiều chữ cái, chữ số, _ hoặc -.
- * chỉ hoạt động với type="post-ids" và type="taxonomy-ids".
- WPML khớp chính xác với phần còn lại của tên. WPML không chấp nhận các biểu thức chính quy trong tên thuộc tính.
- exclude (tùy chọn) – danh sách các tên thuộc tính đầy đủ được phân tách bằng dấu phẩy. WPML không chuyển đổi các ID trong các thuộc tính này. Sử dụng nó cho các thuộc tính khớp với tên nhưng không giữ ID, chẳng hạn như include_product_skus.
Các tài nguyên bổ sung
Để tìm hiểu thêm về tệp wpml-config.xml , hãy xem hướng dẫn về Tệp cấu hình ngôn ngữ.
Để tùy chỉnh các thành phần khác bằng cách sử dụng tệp wpml-config.xml, hãy xem các hướng dẫn bổ sung của chúng tôi:
- Đăng ký các widget tùy chỉnh của trình tạo trang để dịch
- Dịch các shortcode tùy chỉnh bằng WPML
- Thiết lập các tùy chọn dịch cho các trường tùy chỉnh bằng tệp cấu hình WPML
- Đăng ký các thuật ngữ, loại & phân loại tùy chỉnh là có thể dịch
- Làm cho các khối Gutenberg tùy chỉnh có thể dịch được
- Dịch các văn bản mà giao diện và plugin lưu trong wp_options
- Tùy chỉnh bộ chuyển đổi ngôn ngữ WPML bằng tệp cấu hình WPML
