WPML

翻訳用のカスタムページビルダーウィジェットの登録

更新日: 2026年4月24日

翻訳用にカスタムページビルダーウィジェットを登録するには、wpml-config.xmlファイルを使用する必要があります。このチュートリアルに従って、その使用方法を学んでください。

このガイドは、テーマやプラグインを構築したり、サイトにカスタムページビルダーコードを追加したりする開発者向けです。

サードパーティ製のページビルダーを使用しており、ウェブサイト上のカスタムウィジェットを翻訳できない場合は、WPMLサポートにお問い合わせください。

Elementor、Beaver Builder、SiteOrigin、Cornerstoneなどのページビルダーには、独自のウィジェットスイートが付属しています。これらのデフォルトウィジェットはWPMLとシームレスに連携します。

場合によっては、これらまたは他のページビルダーで使用するためのカスタムウィジェットを作成することがあります。

カスタムウィジェットとは、ページビルダーにバンドルされていない独自の追加ウィジェットのことです。これらは、開発チームやサードパーティの開発者によって作成されたり、他のプラグインやテーマから提供されたりします。

また、外部の開発者によってElementorなどのページビルダー専用に開発されたアドオンプラグインから提供されるウィジェットも、カスタムウィジェットに含まれます。

翻訳用にカスタムウィジェットを登録する必要がある場合

次の場合、翻訳用にカスタムウィジェットを登録する必要があります。

  • ページビルダーによって元々提供されていないウィジェットである場合
  • 別のプラグインやテーマを通じて作成および追加した場合
  • チームやサードパーティによって、WordPressサイトまたは特定のページビルダー向けに開発された場合

以前は、翻訳用にカスタムウィジェットを登録する最も一般的な方法は、カスタムPHPコードを使用することでした。現在では、WPMLの設定ファイルであるwpml-config.xmlを使用して、翻訳用のウィジェットを簡単に登録できます。

WPML 4.9以降での翻訳用カスタムElementorウィジェットの登録

WPML 4.9以降では、WPMLはカスタムElementorウィジェットを自動的に認識し、翻訳可能にします。ただし、翻訳したくない文字列まで登録される場合があります。

そのため、このページで説明しているように、引き続きwpml-config.xmlファイルを手動で設定することを強くお勧めします。これにより、どのフィールドを翻訳可能にするかを制御できます。

Multilingual Toolsプラグインを使用した翻訳用のカスタムElementorウィジェットとGutenbergブロックの登録方法

Multilingual Toolsプラグインには、ElementorおよびGutenbergブロック用のWPML – Config Generatorが含まれています。この機能を使用すると、翻訳用に登録したいカスタムElementorウィジェットやGutenbergブロックをページに追加できます。その後、必要なXMLコードの最初のバージョンが自動的に生成されます。

翻訳用にカスタムElementorウィジェットを登録する方法とGutenbergブロックを翻訳可能にする方法をご覧ください。

ウィジェットの登録情報の見つけ方

wpml-config.xmlファイル内でカスタムウィジェットを登録できるようにするには、まずそのウィジェットに関する基本情報を見つける必要があります。

JSM Show Post Metadataなどのプラグインを使用すると、この情報を簡単に取得できます。このプラグインは、投稿編集ページの下部にあるメタボックスに、投稿のメタデータとその非シリアライズ値を表示します。

または、次の手順を使用してこの情報を取得することもできます。

  1. WPML → 設定ページに移動し、カスタムフィールド翻訳セクションまでスクロールして、システムフィールドを表示リンクをクリックします。
  2. _elementor_dataカスタムフィールドを翻訳に設定します。
  3. 新しいページを作成し、登録したいElementorウィジェットのみを追加します。ページを保存します。
  4. WPML → 設定に移動し、翻訳エディタセクションでクラシック翻訳エディタオプションを一時的に有効にします。
  5. ステップ3で作成したページをクラシック翻訳エディタを使用して翻訳しようとすると、次のようなシリアライズされた配列が表示されます。
クラシックエディタでのウィジェットデータのコピー
WPMLのクラシック翻訳エディタに表示されたElementorウィジェットのシリアライズされた配列
  1. シリアライズされた配列のコンテンツをコピーします。
  2. 使い慣れた非シリアライズツールを使用して、ウィジェットがコンテンツをどのように出力しているかを確認します。この例では、Unserializeサイトを使用しました。

表示される配列のコンテンツの説明は次のとおりです。

  • [widgetType]には、ウィジェットのタグのname属性に挿入された名前が含まれます。
  • 実際のフィールドは配列内にあり、[0]を検索することで見つけることができます。これにより、配列の最初の要素のコンテンツが表示されます。
  • fieldの値は、フィールド名を含む括弧内の名前になります。例：[title] => this is a field title。この場合、「title」が必要なテキストです。
  • 「Items of」は、配列を作成する要素から値を取得します。例：[contents]=> array。この場合、「contents」が必要なテキストです。

この情報を取得したら、実際に翻訳用のウィジェットを登録する手順に進むことができます。

シンプルなウィジェットの登録

次の動画では、シンプルなElementorウィジェットを登録する例を説明しています。

次の例は、シンプルなウィジェットを登録する方法を示しています。ここでのシンプルなウィジェットとは、リピーターフィールドを持たないウィジェットを意味します。

<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>

上記の例の構造を見ていきましょう。

  1. <elementor-widgets>タグから始めます。これにより、登録しようとしているページビルダーウィジェットをWPMLに伝えます。以下のいずれかになります。
    • <elementor-widgets>: Elementor、Elementor PRO、またはその他のElementorアドオンを使用している場合は、これを使用する必要があります。
    • <beaver-builder-widgets>: Beaver Builder Lite、プレミアム版のBeaver Builder、またはその他のBeaver Builderアドオンを使用している場合は、これを使用する必要があります。
    • <siteorigin-widgets>: SiteOriginページビルダーを使用している場合は、これを使用する必要があります。
    • <cornerstone-widgets>: XテーマまたはPROテーマに付属するCornerstoneページビルダーには、これを使用する必要があります。
  2. ウィジェットを追加します。
    • <widget name="widget_name">のwidget_nameは、ページビルダーでウィジェットを登録するために使用される名前です。
    • <conditions>（オプション）: 条件下で、ウィジェット名と等しいキーを持つ条件を追加します。これは、ウィジェット名がデータ内のウィジェットキーと異なる場合に使用できますが、通常は必要ありません。
  1. ウィジェットのフィールドを追加し、<fields>タグで囲みます。
    • field: フィールドのIDです。これは、Control_stack::add_control関数を介してコントロールを追加するときに使用されるIDと同じです。
    • type（オプション）: フィールドのタイプです。これは、翻訳者がどのフィールドを翻訳しているかを把握できるように、WPMLの高度な翻訳エディタまたはクラシック翻訳エディタに表示されるテキストです。
    • editor_type（オプション）: これは、WPMLのクラシック翻訳エディタで使用されるテキストフィールドのタイプです。有効な値は、LINE、AREA、LINK、およびVISUALです。省略した場合のデフォルトはLINEです。
    • key_of（オプション）: これは、<fields-in-item>タグ内に配列を持つ<field>タグにのみ使用されます。

これらの要素を使用して、任意の数のフィールドを持つシンプルなウィジェットを登録できます。

投稿またはタクソノミーIDを持つフィールドの登録

上のセクションで、type属性は通常、翻訳エディタに説明テキストを表示するために使用されることを学びました。

しかし、ウィジェットのフィールドに投稿IDまたはタクソノミーID（選択した画像、関連記事、選択したカテゴリーなど）が保存されている場合は、自動変換をトリガーする特別な値を使用します。

  • type="post-ids" – 投稿IDを含むフィールド用
  • type="term-ids" – タクソノミー/タームIDを含むフィールド用

これらのtypeの値を使用する場合：

  • フィールドは翻訳エディタに表示されません。
  • WPMLはIDを自動的に変換し、対応する翻訳済みコンテンツを指すようにします。
  • 単一のIDと、カンマ区切りのIDリストの両方がサポートされています。

例：

<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>

この例では、オプションのsub-type属性で、変換される正確な投稿タイプまたはタクソノミーを指定しています。

  • type="post-ids"の場合：sub-type="attachment"、sub-type="post"、sub-type="page"、またはカスタム投稿タイプのスラッグを使用します。
  • type="term-ids"の場合：sub-type="category"、sub-type="post_tag"、またはカスタムタクソノミーのスラッグを使用します。

sub-typeを追加すると、コンテンツタイプを決定するための余分なデータベースクエリを回避できるため、パフォーマンスが向上します。

その他の例については、Elementorの設定ファイルを参照し、post-idsを検索してください。

リピーターフィールドを持つウィジェットの登録

次の動画では、リピーターフィールドを持つ高度なElementorウィジェットを登録する例を説明しています。

A hotspot widget's fields in the Advanced Translation Editor
A hotspot widget's fields in the Advanced Translation Editor

リピーターフィールドを持つウィジェットの場合、フィールドを<fields-in-item items_of="tabs">タグで囲む必要があります（ここで、tabsは繰り返しフィールドを持つウィジェットの名前です）。この例を確認してください。

<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>

ウィジェットに複数のリピーターフィールドがある場合もあります。例として、Ultimate Addons for ElementorのTableウィジェットの次のデータ構造を考えてみましょう。

Ultimate Addons for ElementorのTableウィジェットのデータ構造

このウィジェットを登録するには、次の例を参照してください。

<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>

シンプルフィールドとリピーターフィールドの両方を持つウィジェットの登録

ウィジェットには、fieldsとfields-in-itemの両方のタイプを含めることができます。両方を使用するウィジェットの例を確認してください。

<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>

整理しやすくするためのフィールドのグループ化

XML設定の明確さと構成を向上させるために、フィールドラベルの前にグループ名を付けることができます。ホットスポットウィジェットのこの例を考えてみましょう。

<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>

ここでは、ホットスポットウィジェット内の各フィールドの前にHotspot:ラベルが付いています。このプレフィックスは高度な翻訳エディタにも表示されるため、各フィールドを識別して翻訳しやすくなります。

高度な翻訳エディタでのホットスポットウィジェットの翻訳

その他のタイプのページビルダーコンテンツの登録

文字列やショートコードなどの登録の詳細については、言語設定ファイルでのページビルダーコンテンツの登録に関するドキュメントを参照してください。

追加リソース

wpml-config.xmlファイルの詳細については、言語設定ファイルのガイドをご覧ください。

wpml-config.xmlファイルを使用して他の要素をカスタマイズするには、以下の追加ガイドをご覧ください。

執筆者：Amir · 最終更新日：2026年4月24日