WPML

翻訳用のページビルダーコンテンツの登録

更新日: 2026年2月4日

wpml-config.xmlファイルを使用して、翻訳用にカスタムページビルダーコンテンツを登録する方法を説明します。文字列、メディア、ページビルダーウィジェット、ショートコードIDなどを登録します。

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

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

wpml-config.xmlファイルを生成する必要がありますか？Multilingual Toolsプラグインを使用して設定ファイルを自動生成するためのステップバイステップガイドをご覧ください。

文字列の翻訳

Visual Composerを使用してページにテキストセパレーターを追加した例を考えてみましょう。そのセパレーターにはタイトルがあり、ショートコードは次のようになります。

[vc_text_separator title="Separator Title"]

このテキストセパレーターのタイトルを翻訳するには、wpml-config.xmlファイルに数行を追加する必要があります。これにより、WPMLはそのセパレーターのタイトルに翻訳が必要であることを「認識」します。

以下のコードは、この場合にwpml-config.xmlファイルに追加する必要がある内容の例です。

wpml-config.xmlファイルへのページビルダーショートコードの追加例
<wpml-config>
  <shortcodes>
    <shortcode>
        <tag>vc_text_separator</tag>
        <attributes>
            <attribute>title</attribute>
        </attributes>
    </shortcode>
  </shortcodes>
</wpml-config>

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

  • shortcodesタグから始めます。翻訳が必要なサイト内のすべてのショートコードは、このタグの下に配置する必要があります。
  • shortcodeタグを使用して、1つのショートコードに属するすべてのタグを囲みます。
  • tagというタグを使用して、ショートコードの名前を定義します。この場合はvc_text_separatorです。必要に応じて、タグにオプションのカスタムラベルを追加できます。これらのラベルは、高度な翻訳エディタとクラシック翻訳エディタの両方でテキストの横に表示されます。エクスポートされたXLIFFファイルにもこれらのラベルが含まれます。タグと属性にラベルを追加する方法については、以下の例を参照してください。
  • ショートコードには1つ以上の属性を含めることができるため、それらをattributes（複数形）タグで囲み、attribute（単数形）タグを使用して各属性のタイトルを定義する必要があります。

ページビルダーには、リンク属性を持つデザイン要素が含まれる場合があります。

リンクオプションtype="link"を使用すると、内部リンクが自動的にその投稿の翻訳済みバージョンを指すようにすることができます。

これにはencoding属性を使用できます。これは、さまざまなページビルダーが使用する特殊なエンコーディングを処理します。encoding属性は通常、使用するページビルダーに固有のものです。次の値を受け入れます。

  • base64 – Visual Composerの生のHTMLショートコードです。ショートコードはHTMLをbase64文字列として保存します。
  • vc_link – Visual Composer用の特殊なリンクフォーマットです。
  • vc_values – プログレスバー、円グラフ、折れ線グラフウィジェットの値に対する特殊なVisual Composerエンコーディングです。
  • av_link – Enfold用の特殊なリンクフォーマットです。
  • allow_html_tags – 通常、HTMLタグはショートコード属性から削除されます。ショートコード属性でHTMLタグを許可する場合は、エンコーディングをallow_html_tagsに設定します。状況によってはHTMLタグを許可するとフォーマットが崩れたり、セキュリティ上の問題が発生したりする可能性があるため、これは注意して使用してください。
ショートコードリンク属性の追加例: 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>

urlencodedショートコードの使用を検討している場合は、URLエンコードされたショートコードの翻訳に関するページを必ずお読みください。

タグと属性ラベルの追加例
<wpml-config>
    <shortcodes>
        <shortcode>
            <tag label="My shortcode label">my_shortcode</tag>
            <attributes>
                <attribute label="Shortcode title">title</attribute>
            </attributes>
        </shortcode>
    </shortcodes>
</wpml-config>

タグと属性にラベルを追加すると、高度な翻訳エディタまたはクラシック翻訳エディタにカスタムラベルを表示できます。これにより、翻訳者が文字列のコンテキストをよりよく理解できるようになります。

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

XML設定の明確さと構成を改善するために、フィールドラベルにグループ名のプレフィックスを付けることができます。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>

ここでは、et_pb_ctaショートコードの各属性にCall To Action: ラベルが付いています。WPMLはこれらのラベルを高度な翻訳エディタに渡しません。翻訳者には各属性が独立したフィールドとしてショートコードの下にグループ化されて表示され、それぞれが保持するテキストによってフィールドを区別します。label属性は依然として設定フォーマットの一部であり、設定する価値があります。

高度な翻訳エディタでのCTAボタンの翻訳
高度な翻訳エディタでのCTAボタンの翻訳

メディアの翻訳

WPMLメディア翻訳を使用すると、ページビルダーコンテンツで言語ごとに異なる画像を使用できます。これは、画像IDと画像URLを変換することによって行われます。ショートコードを使用するページビルダーに、この変換を行う方法を「伝える」必要があります。以下のコードは、この場合にwpml-config.xmlファイルに追加する必要がある内容の例です。

画像翻訳のためのwpml-config.xmlファイルへのページビルダーショートコードの追加例
<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>

次の値を使用できます。

  • ignore-content – tag要素内で使用できます。この値はオプションであり、0または1のいずれかになります。この属性を使用して、新しいメディアショートコードの下位互換性を実現できます。値が1に設定されている場合、ショートコードコンテンツは処理されません。
  • type – tag要素内で使用できます。また、メディアURLを含むショートコードコンテンツをmedia-url内のオプション値として使用することもできます。
  • type – attribute要素内でも使用できます。この場合、次のいずれかのオプション値を持つことができます。
    • media-ids – カンマ区切りのメディアIDのリスト。
    • media-url – メディアのURL。
    • link – サイト上の別のページを指し、WPMLが自動的に翻訳されたページのURLに変換します。

ブロック属性内のメディアの翻訳

Gutenbergブロックでmedia-urlおよびmedia-ids属性タイプを使用して、背景画像などのメディアを翻訳することもできます。これはショートコードと同様に機能しますが、ネストされた<key>要素を持つ<gutenberg-block>要素を使用してtype="media-url"およびtype="media-ids"を定義します。

この要素を使用すると、WPMLメディア翻訳アドオンで背景画像を翻訳できるようになります。

これはGutenbergブロックとDivi 5の両方で機能します。このバージョンのDiviはブロックを使用してコンテンツを保存するため、<gutenberg-block>要素はメディア翻訳を追加するために機能します。

以下は、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>

ページビルダーウィジェットの翻訳

WPMLでは、言語設定ファイル内にページビルダーウィジェットを登録できます。詳細については、翻訳用にページビルダーウィジェットを登録する方法に関するドキュメントページを参照してください。

ショートコードIDの自動変換

WPML 4.5.9以降では、ショートコード属性にある投稿またはタクソノミータームのIDを宣言できます。これらのIDは、サイトのフロントエンドで自動的に変換できるようになります。

WPML 4.8以降、この同じロジックは管理テキストに保存されているオブジェクトID、および投稿のカスタムフィールドとカスタムタクソノミータームフィールド内のIDにも拡張されています。

たとえば、次のショートコードを考えてみましょう。

[foo_product_list product_ids="12,34,56"]

次の設定を使用して、product_ids属性が投稿IDを保持していることを宣言できます。

product_ids属性が投稿IDを保持していることの宣言
<shortcode>
    <tag ignore-content="1">foo_product_list</tag>
    <attributes>
        <attribute type="post-ids" sub-type="product">product_ids</attribute>
    </attributes>
</shortcode>

フロントエンドでは、ショートコードは自動的に次のように変換されます。

[foo_product_list product_ids="13,35,57"]

次の設定属性を使用できます。

  • type – post-idsまたはtaxonomy-idsのいずれか。
  • sub-type（オプション） – すでにわかっている場合は、typeの特定のエンティティ。たとえば、WooCommerceから提供されるProductカスタム投稿タイプの場合はproductです。定義されていない場合、特定のエンティティが推測されます。

ID変換は汎用性が高く、可能な限りほとんどのIDフォーマット（単一のID、IDのリスト、シリアル化された配列、JSONエンコードされた配列）に適応しようとします。

ワイルドカードを使用した属性名

一部のショートコードは、include_category、include_portfolio_category、include_product_catなど、似た名前の多くの属性にIDを保存します。1行の<attribute>ですべてをカバーできます。属性名に*を入れます。

すべてのinclude_およびexclude_属性がタクソノミーIDを保持していることの宣言
<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>
  • *は、1つ以上の文字、数字、_、または-に一致します。
  • *は、type="post-ids"およびtype="taxonomy-ids"でのみ機能します。
  • WPMLは名前の残りの部分と完全に一致させます。WPMLは属性名に正規表現を受け入れません。
  • exclude（オプション） – カンマ区切りの完全な属性名のリスト。WPMLはこれらの属性内のIDを変換しません。include_product_skusなど、名前は一致するがIDを保持していない属性に使用します。

追加リソース

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

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

執筆者：Amir