Đăng ký widget tùy chỉnh của trình tạo trang để dịch

Để đăng ký các widget tùy chỉnh của trình tạo trang để dịch, bạn cần sử dụng tệp wpml-config.xml. Hãy làm theo hướng dẫn này để tìm hiểu cách sử dụng tệp đó.

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.

Các trình tạo trang như Elementor (mở trong tab mới), Beaver Builder (mở trong tab mới), SiteOrigin (mở trong tab mới) và Cornerstone (mở trong tab mới) đi kèm với một bộ widget riêng của chúng. Các widget mặc định này hoạt động liền mạch với WPML.

Đôi khi, bạn có thể tạo các widget tùy chỉnh nhằm mục đích sử dụng với các trình tạo trang này hoặc các trình tạo trang khác.

Widget tùy chỉnh là bất kỳ widget bổ sung, độc đáo nào không được đi kèm với trình tạo trang. Chúng có thể được tạo bởi nhóm phát triển của bạn, các nhà phát triển bên thứ ba hoặc đến từ các plugin và giao diện khác.

Widget tùy chỉnh cũng là bất kỳ widget nào đến từ các plugin tiện ích bổ sung được phát triển riêng cho một trình tạo trang, như Elementor, bởi các nhà phát triển bên ngoài.

Khi nào tôi cần đăng ký các widget tùy chỉnh để dịch?

Bạn cần đăng ký widget tùy chỉnh của mình để dịch:

Nếu đó là một widget không được cung cấp ban đầu bởi trình tạo trang
Nếu bạn đã tạo và thêm nó thông qua một plugin hoặc giao diện khác
Nếu nó được phát triển cho các trang web WordPress của bạn hoặc một trình tạo trang cụ thể bởi nhóm của bạn hoặc các bên thứ ba

Trước đây, cách phổ biến nhất để đăng ký các widget tùy chỉnh để dịch là sử dụng mã PHP tùy chỉnh. Giờ đây, bạn có thể dễ dàng đăng ký widget để dịch bằng wpml-config.xml, tệp cấu hình của WPML.

Đăng ký các widget Elementor tùy chỉnh để dịch trong WPML 4.9+

Trong WPML 4.9 trở lên, WPML tự động nhận dạng các widget Elementor tùy chỉnh và làm cho chúng có thể dịch được. Tuy nhiên, nó có thể đăng ký các chuỗi mà bạn không muốn dịch.

Đó là lý do tại sao chúng tôi thực sự khuyên bạn vẫn nên định cấu hình thủ công tệp wpml-config.xml như được mô tả trên trang này. Điều này cung cấp cho bạn quyền kiểm soát đối với các trường có thể dịch được.

Cách đăng ký các widget Elementor tùy chỉnh và khối Gutenberg để dịch bằng plugin Multilingual Tools

Plugin Multilingual Tools của chúng tôi bao gồm một WPML – Config Generator cho Elementor và các khối Gutenberg. Tính năng này cho phép bạn thêm bất kỳ widget Elementor tùy chỉnh hoặc khối Gutenberg nào bạn muốn đăng ký để dịch vào một trang. Sau đó, nó tự động tạo phiên bản đầu tiên của mã XML mà bạn cần.

Tìm hiểu cách đăng ký các widget Elementor tùy chỉnh để dịch và cách làm cho các khối Gutenberg có thể dịch được.

Để có thể đăng ký một widget tùy chỉnh trong tệp wpml-config.xml , trước tiên bạn cần tìm một số thông tin cơ bản về nó: tên loại của widget và tên của các trường bạn muốn dịch.

Thêm riêng widget đó vào một trang mới và lưu trang. Elementor lưu trữ các widget của trang trong trường meta của bài viết _elementor_data, và một plugin như JSM Show Post Metadata (mở trong tab mới) hiển thị trường đó trong một metabox ở cuối trình soạn thảo trang, vì vậy bạn có thể đọc dữ liệu của widget tại đó.

Trong dữ liệu đó:

widgetType là tên để sử dụng trong thuộc tính name của widget.
Các khóa bên dưới settings là các trường của widget. Một khóa chứa văn bản bạn muốn dịch, chẳng hạn như title, là tên trường cần đăng ký.
Một trường lặp lại chứa một mảng các hàng. Khóa chứa mảng đó, chẳng hạn như contents, là tên của “items of”.

Sao chép dữ liệu widget trong Trình soạn thảo cổ điển — Mảng được tuần tự hóa của widget Elementor hiển thị trong Trình biên tập dịch thuật cổ điển của WPML

Khi bạn có thông tin này, bạn có thể tiến hành đăng ký widget để dịch.

Để kiểm tra công việc của bạn, hãy mở một trang sử dụng widget trong trình biên tập dịch thuật. Các trường bạn đã đăng ký hiển thị ở đó theo tên, với các văn bản của widget bên cạnh chúng. Một widget không được đăng ký sẽ không đóng góp gì cho công việc dịch thuật, vì vậy nếu không có văn bản nào của nó xuất hiện, việc đăng ký chưa có hiệu lực.

Đăng ký các widget đơn giản

Video sau đây sẽ hướng dẫn bạn qua một ví dụ về việc đăng ký một widget Elementor đơn giản:

Ví dụ sau minh họa cách đăng ký một widget đơn giản. Widget đơn giản ở đây có nghĩa là widget không có các trường lặp lại.

<wpml-config>
	<elementor-widgets>
		<widget name="heading">
			<conditions>
				<condition key="widgetType">heading</condition>
			</conditions>
			<fields>
				<field type="Heading" editor_type="LINE">title</field>
				<field type="Heading: Link URL" editor_type="LINK">link>url</field>
			</fields>
		</widget>
	</elementor-widgets>
</wpml-config>

Hãy cùng xem qua cấu trúc của ví dụ đã cho:

Bắt đầu với thẻ <elementor-widgets>. Điều này cho WPML biết bạn sẽ đăng ký các widget của trình tạo trang nào. Nó có thể là một trong những thẻ sau:
- <elementor-widgets>: thẻ này phải được sử dụng nếu bạn đang sử dụng Elementor, Elementor PRO hoặc bất kỳ tiện ích bổ sung Elementor nào khác.
- <beaver-builder-widgets>: thẻ này phải được sử dụng nếu bạn đang sử dụng Beaver Builder Lite, Beaver Builder cao cấp hoặc bất kỳ tiện ích bổ sung Beaver Builder nào khác.
- <siteorigin-widgets>: thẻ này phải được sử dụng nếu bạn đang sử dụng trình tạo trang SiteOrigin.
- <cornerstone-widgets>: và thẻ này phải được sử dụng cho trình tạo trang Cornerstone đi kèm với giao diện X hoặc giao diện PRO.
Thêm các widget của bạn:
- <widget name="widget_name"> trong đó widget_name là tên được sử dụng để đăng ký widget trong trình tạo trang.
- <conditions> (tùy chọn): trong điều kiện (conditions), bạn thêm một điều kiện có khóa bằng tên widget. Nó có thể được sử dụng khi tên widget khác với khóa widget trong dữ liệu, nhưng thông thường là không cần thiết.

Thêm các trường của widget, bọc chúng trong thẻ <fields>:
- field: ID của trường. ID này giống với ID được sử dụng khi thêm một điều khiển thông qua hàm Control_stack::add_control.
- type (tùy chọn): Loại trường. Đây là văn bản được hiển thị 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 của WPML để giúp người dịch biết trường nào đang được dịch.
- editor_type (tùy chọn): Đây là loại trường văn bản được sử dụng trong Trình biên tập dịch thuật cổ điển của WPML. Các giá trị hợp lệ là LINE, AREA, LINK và VISUAL. Nó mặc định là LINE nếu bị thiếu.
- key_of (tùy chọn): Thuộc tính này chỉ được sử dụng cho các thẻ <field> có một mảng bên trong thẻ <fields-in-item>.

Bạn có thể sử dụng các phần tử này để đăng ký một widget đơn giản với bất kỳ số lượng trường nào.

Đăng ký các trường có ID bài viết hoặc phân loại

Trong phần trên, bạn đã biết rằng thuộc tính type thường được sử dụng để hiển thị văn bản mô tả trong Trình biên tập dịch thuật.

Tuy nhiên, khi các trường widget của bạn lưu trữ ID bài viết hoặc ID phân loại (chẳng hạn như hình ảnh đã chọn, bài viết liên quan hoặc danh mục đã chọn), bạn sử dụng các giá trị đặc biệt kích hoạt chuyển đổi tự động:

type="post-ids" – đối với các trường chứa ID bài viết
type="term-ids" – đối với các trường chứa ID phân loại/thuật ngữ

Khi bạn sử dụng các giá trị types này:

Trường sẽ không xuất hiện trong trình biên tập dịch thuật
WPML tự động chuyển đổi các ID để trỏ đến nội dung đã dịch tương ứng
Cả ID đơn lẻ và danh sách ID được phân tách bằng dấu phẩy đều được hỗ trợ

Ví dụ:

<wpml-config>
    <elementor-widgets>
        <widget name="the-widget-name">
            <fields>
                <field type="post-ids" sub-type="attachment">image_id</field>
                <field type="post-ids" sub-type="post">selected_posts</field>
                <field type="term-ids" sub-type="category">category_filter</field>
            </fields>
        </widget>
    </elementor-widgets>
</wpml-config>

Trong ví dụ này, thuộc tính sub-type tùy chọn chỉ định chính xác loại bài viết hoặc phân loại đang được chuyển đổi:

Đối với type="post-ids": sử dụng sub-type="attachment", sub-type="post", sub-type="page" hoặc slug loại nội dung tùy chỉnh của bạn
Đối với type="term-ids": sử dụng sub-type="category", sub-type="post_tag" hoặc slug phân loại tùy chỉnh của bạn

Việc thêm sub-type giúp cải thiện hiệu suất bằng cách tránh các truy vấn cơ sở dữ liệu bổ sung để xác định loại nội dung.

Để xem thêm các ví dụ, hãy xem tệp cấu hình của Elementor (mở trong tab mới) và tìm kiếm post-ids.

Đăng ký các widget có trường lặp lại

Video sau đây sẽ hướng dẫn bạn qua một ví dụ về việc đăng ký một widget Elementor nâng cao có các trường lặp lại:

Đối với các widget có trường lặp lại, bạn cần bọc các trường trong thẻ <fields-in-item items_of="tabs"> (trong đó tabs là tên của widget có các trường lặp lại). Hãy xem ví dụ này:

<widget name="accordion">
	<fields-in-item items_of="tabs">
		<field type="Accordion: Title" editor_type="LINE">tab_title</field>
		<field type="Accordion: Content" editor_type="VISUAL">tab_content</field>
	</fields-in-item>
</widget>

Trong một số trường hợp, widget có thể có nhiều trường lặp lại. Hãy xem xét cấu trúc dữ liệu sau từ widget Table của Ultimate Addons for Elementor làm ví dụ:

Cấu trúc dữ liệu của widget Table từ Ultimate Addons for Elementor

Để đăng ký widget này, vui lòng xem ví dụ sau:

<widget name="uael-table">
	<fields-in-item items_of="table_content">
		<field type="The Cell text" editor_type="LINE">cell_text</field>
	</fields-in-item>
	<fields-in-item items_of="table_headings">
		<field type="The Heading text" editor_type="LINE">heading_text</field>
	</fields-in-item>
</widget>

Đăng ký các widget có cả trường đơn giản và trường lặp lại

Lưu ý, các widget có thể có cả hai loại: fields và fields-in-item. Hãy xem ví dụ này về một widget sử dụng cả hai:

<widget name="price-table">
	<fields>
		<field type="Price Table: Heading" editor_type="LINE">heading</field>
		<!-- ... -->
	</fields>
	<fields-in-item items_of="features_list">
		<field type="Price table: text" editor_type="LINE">item_text</field>
	</fields-in-item>
</widget>

Nhóm các trường để tổ chức tốt hơn

Để cải thiện độ rõ ràng và khả năng tổ chức của cấu hình XML, 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 widget hotspot:

<widget name="hotspot">
    <fields-in-item items_of="hotspot">
        <field type="Hotspot: Label">hotspot_label</field>
        <field type="Hotspot: URL" key_of="hotspot_link">url</field>
        <field type="Hotspot: Content" editor_type="VISUAL">hotspot_tooltip_content</field>
    </fields-in-item>
</widget>

Tại đây, mỗi trường trong widget hotspot được đặt tiền tố bằng nhãn Hotspot:. Tiền tố này cũng xuất hiện trong Trình biên tập dịch thuật nâng cao: các trường của widget nằm trong một hộp Hotspot và mỗi trường mang nhãn riêng, giúp dễ dàng xác định và dịch từng trường hơn:

Các trường của widget hotspot trong Trình biên tập dịch thuật nâng cao

Đăng ký các loại nội dung khác của trình tạo trang

Xem tài liệu của chúng tôi về việc đăng ký nội dung của trình tạo trang trong tệp cấu hình ngôn ngữ của bạn để biết thêm về cách đăng ký chuỗi, shortcode và hơn thế nữa.

Tài nguyên bổ sung

Để tìm hiểu thêm về tệp wpml-config.xml, hãy truy cập hướng dẫn Tệp cấu hình ngôn ngữ.

Để tùy chỉnh các phần tử khác bằng tệp wpml-config.xml, hãy truy cập 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