Avia Layout BuilderとWPMLの互換性は、言語設定ファイルを通じて確保されます。このファイルを使用して互換性を維持する方法について説明します。
このページは、Enfold開発チーム、カスタマイズ版のページビルダーを提供する開発者、Avia Layout Builderのアドオンを開発する作成者、およびEnfoldを使用するWeb開発者を対象としています。
Avia Layout BuilderとWPMLの統合の仕組み
Avia Layout BuilderがWPMLとどのように連携するかを理解するために、まずはAvia Layout Builderを使用してシンプルなページを作成してみましょう。テキストブロック、アイコンボックス、ボタンなどのいくつかのモジュールを含めます。
これらのモジュールは、コンテンツをショートコードで囲みます。
作成したページを翻訳するには、サイドバーの言語メタボックスにあるプラスアイコンをクリックします。
これにより、ページが高度な翻訳エディタで開き、ページを翻訳できるようになります。翻訳を追加し、完了をクリックします。
これで、フロントエンドで翻訳されたページを表示すると、翻訳されたコンテンツを確認できます。
言語設定ファイルの更新
さまざまな理由から、言語設定ファイル内のページビルダーのショートコードを更新する必要がある場合があります。
- ページビルダーへの新しいショートコードの追加
- 既存のショートコードへの新しい属性の追加
- 廃止されたショートコードの削除
言語設定ファイルは、当社のリポジトリからダウンロードできます。言語設定ファイル内の既存のショートコードに、ショートコードまたは属性を追加します。
言語設定ファイル内のページビルダーショートコードの構造
Avia Layout Builderを使用して構築されたページから文字列を抽出し、翻訳エディタ画面に読み込むには、翻訳が必要な文字列を含むショートコードと属性を識別するようにWPMLを設定する必要があります。これを行うには、通常テーマのルートフォルダーに配置されるwpml-config.xmlというファイルを追加します。Enfoldの場合、当社のサーバーで言語設定ファイルをホストしています。これはEnfoldのルートフォルダーに配置されたローカルの設定ファイルを上書きするように設定されており、設定ファイルが常に最新の状態に保たれるようになっています。
wpml-config.xmlファイルは、以下の要素の設定にも使用されます。
- カスタムフィールド
- カスタムタクソノミー
- 管理テキスト / wp_options
- 言語スイッチャーの設定
- ページビルダーのショートコード
言語設定ファイルの構造と構文の詳細については、詳細なドキュメントを参照してください。
例として、wpml-config.xmlファイルにButtonショートコードを追加した方法を見てみましょう。
<wp-config>
<shortcodes>
<shortcode>
<tag>av_button</tag>
<attributes>
<attribute>label</attribute>
<attribute type="link" encoding="av_link">link</attribute>
</attributes>
</shortcode>
</shortcodes>
</wp-config>
上記の例の構造は、次のように分類できます。
- すべてのショートコードは、メインのshortcodes（複数形）タグで囲まれます。
- shortcode（単数形）タグは、1つのショートコードに属するすべてのタグを囲みます。
- tagタグはショートコードの名前を定義します。この場合はav_buttonです。
- ショートコードには1つ以上の属性を含めることができるため、それらをattributes（複数形）タグで囲み、attribute（単数形）タグを使用して各属性のタイトルを定義します。この場合、label属性とlink属性があります。
リンク属性を含むショートコードの場合、前の例で示したように属性にtypeオプション「link」を使用することで、内部リンクが自動的にその投稿の翻訳版を指すように設定できます。
言語設定ファイルのテスト
更新された言語設定ファイルをテストするには、次の手順に従います。
- EnfoldとWPMLの両方を有効化したインストール環境をセットアップします。文字列翻訳とメディア翻訳のアドオンを有効化します。
- リモートの言語設定ファイルを更新されたファイルで上書きする必要があります。これを行うには、WPML → 設定ページに移動し、カスタム XML 設定タブをクリックします。更新した言語設定ファイルの内容をエディタにコピーし、保存をクリックします。
- 新しいページを作成し、そこに新しいモジュールを追加します。既存のモジュールの属性を更新した場合は、それらもページに追加します。この例では、ButtonモジュールがAvia Layout Builderに新しく追加されたと仮定します。これをページに追加して公開します。
- プラスアイコンをクリックしてページを翻訳します。これにより、高度な翻訳エディタ画面が表示されます。
- モジュールのテキストが高度な翻訳エディタに表示されていることを確認します。
- 翻訳を追加し、完了をクリックして翻訳を保存し、適用します。
- フロントエンドで翻訳されたページを確認します。
翻訳されたページにはすべての翻訳済み文字列が表示され、更新された言語設定ファイルが正常に機能していることがわかります。問題が発生した場合は、当社の互換性開発チームにお問い合わせください。言語設定ファイルに関連する問題の確認を喜んでお手伝いします。
テストが完了したら、当社のリポジトリにマージリクエストを送信してください。当社の互換性開発者がリクエストを受け取り、レビューします。