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タグから始めます。サイト内で翻訳が必要なすべてのショートコードは、このタグの下に配置する必要があります。
- 1つのショートコードに属するすべてのタグを囲むには、shortcodeタグを使用します。
- ショートコードの名前を定義するには、tagというタグを使用します。この場合、vc_text_separatorになります。必要に応じて、タグにオプションのカスタムラベルを追加できます。これらのラベルは、高度な翻訳エディタおよびクラシック翻訳エディタの両方でテキストの横に表示されます。エクスポートされたXLIFFファイルにもこれらのラベルが含まれます。タグと属性にラベルを追加する方法については、以下の例をご覧ください。
- ショートコードには1つ以上の属性を含めることができるため、それらをattributes （複数形）タグで囲み、attribute （単数形）タグを使用して各属性のタイトルを定義する必要があります。
ページビルダーには、リンク属性を持つデザイン要素が含まれる場合があります。
リンクオプションtype="link"を使用すると、内部リンクがその投稿の翻訳版を自動的に指すように設定できます。
これにはencoding属性を使用できます。これは、さまざまなページビルダーが使用する特殊なエンコーディングを処理します。encoding属性は通常、使用するページビルダーに固有のものです。次の値を受け入れます。
- base64 – Visual Composerのraw HTMLショートコード。ショートコードはHTMLをbase64文字列として保存します。
- vc_link – Visual Composer用の特別なリンクフォーマット。
- vc_values – progress-bar、pie-chart、line-chartウィジェットの値に対する特別な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のメディア翻訳を使用すると、ページビルダーコンテンツで言語ごとに異なる画像を使用できます。これは、画像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属性タイプを使用して、背景画像などのメディアを翻訳することもできます。これはショートコードと同様に機能しますが、<gutenberg-block>要素とネストされた<key>要素を使用して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</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エンコードされた配列）に適応しようとします。
追加リソース
wpml-config.xmlファイルの詳細については、言語設定ファイルのガイドをご覧ください。
wpml-config.xmlファイルを使用して他の要素をカスタマイズする方法については、追加のガイドをご覧ください。