WPMLとWPBakery Page Builderの互換性の維持

WPBakery Page BuilderとWPMLの互換性は、言語設定ファイルを通じて確保されます。このファイルを使用して互換性を維持する方法について説明します。

このページは、WPBakery開発チーム、ページビルダーのカスタマイズ版を提供する開発者、WPBakeryアドオンを開発する作成者、およびWPBakery Page Builderを使用するWeb開発者を対象としています。

WPBakeryで構築されたサイトの翻訳を検討しているクライアントの場合は、詳細なドキュメントを参照して、WPBakery Page BuilderとWPMLを使用した多言語サイトの構築について詳しく確認してください。

WPMLとWPBakery Page Builderの統合の仕組み

WPBakery Page BuilderがWPMLとどのように連携するかを理解するために、まずWPBakery Page Builderを使用してシンプルなページを作成します。Text Block、Message Box、Hover Boxなどのいくつかのモジュールを含めます。

作成したページを翻訳するには、右サイドバーの言語メタボックスにあるプラスアイコンをクリックします。

これにより、高度な翻訳エディタ画面に移動し、ページを翻訳できます。各文の翻訳を入力し、緑色のチェックマークをクリックして確定します。すべての翻訳に満足したら、完了をクリックします。

言語設定ファイルの更新

さまざまな理由から、言語設定ファイル内のページビルダーのショートコードを更新する必要がある場合があります。

1. ページビルダーへの新しいショートコードの追加
2. 既存のショートコードへの新しい属性の追加
3. 廃止されたショートコードの削除

言語設定ファイルはリポジトリからダウンロードできます。言語設定ファイル内の既存のショートコードにショートコードまたは属性を追加します。

テーマにカスタマイズ版のWPBakery Page Builderをバンドルしている作成者の場合は、そのカスタマイズ版プラグインの言語設定ファイルを更新する必要があることに留意してください。

言語設定ファイルにおけるページビルダーのショートコード構造

WPBakery Page Builderを使用して構築されたページから文字列を抽出し、翻訳エディタ画面に読み込むには、翻訳が必要な文字列を含むショートコードと属性を識別するようにWPMLを設定する必要があります。これを行うには、通常テーマのルートフォルダーに配置されるwpml-config.xmlというファイルを追加します。WPBakery Page Builderの場合、言語設定ファイルは当社のサーバーでホストされています。これは、WPBakery Page Builderのルートフォルダーに配置されたローカルの設定ファイルを上書きするように設定されており、設定ファイルが常に最新の状態に保たれるようになっています。

wpml-config.xmlファイルは、以下の要素を設定するためにも使用されます。

1. カスタムフィールド
2. カスタムタクソノミー
3. 管理テキスト / wp_options
4. 言語スイッチャーの設定
5. ページビルダーのショートコード

言語設定ファイルの構造と構文について詳しくは、詳細なドキュメントを参照してください。

例として、Tabsショートコードをwpml-config.xmlファイルに追加した方法を見てみましょう。

<shortcode>
         <tag>vc_tta_tabs</tag>
         <attributes>
            <attribute encoding="allow_html_tags">title</attribute>
         </attributes>
</shortcode>

上記の例の構造は、次のように分類できます。

• すべてのショートコードは、メインのshortcodes（複数形）タグで囲まれます。
• shortcodeタグは、1つのショートコードに属するすべてのタグを囲みます。
• tagタグはショートコードの名前を定義します。この場合はvc_tta_tabsです。
• ショートコードには1つ以上の属性を持たせることができます。そのため、それらをattributes（複数形）タグで囲み、attribute（単数形）タグを使用して各属性のタイトルを定義します。この場合、title属性があります。

リンク属性を含むショートコードの場合、属性にtypeオプションを使用することで、内部リンクが自動的にその投稿の翻訳版を指すようにすることができます。以下に例を示します。

<shortcode>
         <tag>vc_button</tag>
         <attributes>
            <attribute encoding="allow_html_tags">title</attribute>
            <attribute encoding="vc_link" type="link">href</attribute>
         </attributes>
</shortcode>

言語設定ファイルのテスト

更新された言語設定ファイルをテストするには、次の手順に従います。

1. WPBakery Page BuilderとWPMLの両方を有効化したインストール環境をセットアップします。文字列翻訳とメディア翻訳のアドオンをダウンロードして有効化します。
2. リモートの言語設定ファイルを更新されたファイルで上書きする必要があります。これを行うには、WPML → 設定ページに移動し、カスタム XML 設定タブをクリックします。更新した言語設定ファイルの内容をエディターにコピーし、保存をクリックします。

3. 新しいページを作成し、新しいモジュールを追加します。既存のモジュールの属性を更新した場合は、それらもページに追加します。この例では、WPBakery Page BuilderにCall To Actionモジュールが新しく追加されたと仮定します。これをページに追加して公開します。

4. プラスアイコンをクリックしてページを翻訳します。これにより、高度な翻訳エディタ画面に移動します。
5. モジュールのテキスト要素が高度な翻訳エディタに表示されていることを確認します。
6. 翻訳を入力し、緑色のチェックマークで確定します。完了したら、完了ボタンをクリックします。

7. フロントエンドで翻訳されたページを確認します。

翻訳されたページにすべての翻訳済み文字列が表示されれば、更新された言語設定ファイルが正しく機能していることを意味します。

元の言語のページ要素のCSSスタイルは、翻訳言語にコピーされることに注意してください。これにより、言語間で見た目が正しく保たれます。この機能を無効にする場合は、手順についてこちらの記事を参照してください。

問題が発生した場合は、当社の互換性開発チームにお問い合わせください。言語設定ファイルに関連する問題を確認いたします。

テストが完了したら、リポジトリにマージリクエストを送信してください。当社の互換性開発者がリクエストを受け取り、レビューします。

当社のリポジトリでホストされている言語設定ファイルは、デフォルト版のWPBakery Page Builder用であることに注意してください。カスタマイズ版のWPBakery Page Builderの言語設定ファイルを更新する場合は、プラグインのルートフォルダー内にある設定ファイルに変更を適用してください。