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 ファイル内でカスタムウィジェットを登録するには、まずウィジェットのタイプ名や翻訳したいフィールド名など、基本的な情報を見つける必要があります。

新しいページにウィジェットを単独で追加し、ページを保存します。Elementorはページのウィジェットを_elementor_data投稿メタフィールドに保存します。JSM Show Post Metadata （新しいタブで開く）のようなプラグインを使用すると、ページエディタの下部にあるメタボックスにそのフィールドが表示されるため、そこでウィジェットのデータを読み取ることができます。

そのデータ内には以下の情報が含まれます。

  • widgetTypeは、ウィジェットのname属性で使用する名前です。
  • settingsの下にあるキーは、ウィジェットのフィールドです。titleなど、翻訳したいテキストを保持するキーが、登録するフィールド名になります。
  • リピーターフィールドは行の配列を保持します。contentsなど、その配列を保持するキーが「items of」の名前になります。
クラシックエディタでのウィジェットデータのコピー
WPMLのクラシック翻訳エディタに表示されるElementorウィジェットのシリアライズされた配列

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

作業を確認するには、翻訳エディタでウィジェットを使用しているページを開きます。登録したフィールドが名前で表示され、その横にウィジェットのテキストが表示されます。登録されていないウィジェットは翻訳ジョブに寄与しないため、テキストが何も表示されない場合は、登録が有効になっていません。

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

以下の動画では、シンプルな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>（オプション）: 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またはタクソノミー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ウィジェットを登録する例を順を追って説明します。

リピーターフィールドを持つウィジェットの場合は、フィールドを<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:というラベルのプレフィックスが付けられています。このプレフィックスは高度な翻訳エディタにも表示されます。ウィジェットのフィールドはHotspotボックス内に配置され、それぞれに独自のラベルが付くため、各フィールドを識別して翻訳しやすくなります。

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

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

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

追加リソース

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

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

執筆者：Amir