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 tệp wpml-config.xml. Đăng ký chuỗi, phương tiện, widget của trình tạo trang, ID 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ệ 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à một 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 để bao bọc tất cả các thẻ thuộc về một shortcode duy nhất.
- Sử dụng thẻ có tên 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ọn cho 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 ra 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 thẻ và thuộc tính.
- Các shortcode có thể có một hoặc nhiều thuộc tính, do đó 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.
Các trình tạo trang (đôi khi) bao gồm các thành phần thiết kế 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 cụ thể cho trình tạo trang 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 chuỗi base64.
- vc_link – Định dạng liên kết đặc biệt cho Visual Composer.
- vc_values – Mã hóa đặc biệt của Visual Composer 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 sẽ 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 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 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 có ý định sử dụng các shortcode urlencoded, hãy đảm bảo đọc trang về Dịch các shortcode urlencoded.
Ví dụ về việc thêm nhãn 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 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 tính rõ ràng và khả năng tổ chức cho 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 ví dụ này về 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 trong shortcode et_pb_cta được thêm tiền tố bằng nhãn Call To Action: , nhãn này cũng hiển thị trong Trình biên tập dịch thuật nâng cao:
Dịch phương tiện
Bạn có thể sử dụng Dịch phương tiện của WPML để 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 “cho” trình tạo trang sử dụng shortcode biết cách thực hiện chuyển đổi này. Mã sau đây là một 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ó trong một thành phần 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 shortcode sẽ không được xử lý.
- type – Bạn có thể sử dụng nó trong một thành phần 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 trong media-url.
- type – Bạn cũng có thể sử dụng nó trong một thành phần 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 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. Điều này hoạt động tương tự như các shortcode, nhưng sử dụng thành phần <gutenberg-block> với các thành phần <key> lồng nhau để xác định type="media-url" và type="media-ids".
Việc sử dụng thành phần 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.
Điều 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, do đó thành phần <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 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 trong tệp cấu hình ngôn ngữ của bạn. Để 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 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 thuật ngữ phân loại nằm trong các thuộc tính 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</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 – có thể 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 bài viết tùy chỉnh Sản phẩm đế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 ID, mảng được tuần tự hóa, mảng được mã hóa JSON).
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 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
- Đặt 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