wpml-config.xml言語設定ファイルを使用して、WPMLとDiviモジュールの互換性を維持する方法について説明します。
このドキュメントは、Divi開発チームおよびDiviを使用するWeb開発者を対象としています。言語設定ファイルを更新して、WPMLとDivi Builderの互換性を維持するプロセスについて説明します。
このページは、コンテンツをGutenberg互換ブロックとして保存するDivi 5を対象としています（Divi 4ではショートコードを使用していました）。
WPMLとDivi Builderの統合の仕組み
WPMLとDivi Builderがどのように連携するかを理解するために、まずDivi Builderを使用してシンプルなページを作成します。以下の例では、Text、Number Counter、Iconなどのいくつかのモジュールを追加しました。
翻訳するには、WPML → 翻訳ダッシュボードに移動し、固定ページセクションでページを見つけます。ページを選択し、コンテンツを翻訳をクリックして翻訳方法を選択します。自動翻訳クレジットがある場合は、数分でこのページを自動翻訳できます。
言語設定ファイルの使用
wpml-config.xmlファイルでは、以下の要素を設定できます。
- ページビルダーのブロック
- カスタムフィールド
- カスタムタクソノミー
- 管理テキスト / wp_options
- 言語スイッチャーの設定
構造と構文の詳細については、言語設定ファイルのガイドをご覧ください。
Divi用の設定ファイルの取得
wpml-config.xmlファイルを設定すると、Divi Builderを使用して構築されたページから文字列が抽出され、高度な翻訳エディタに読み込まれます。このファイルを使用して、新しいブロックタイプや属性を追加したり、古いブロックタイプを削除したりできます。
言語設定ファイルはリポジトリからダウンロードできます。設定後、テーマのルートフォルダーに配置してください。
Divi用の言語設定ファイルはWPMLのサーバーでホストされているため、Diviのルートフォルダーに配置されたローカルの設定ファイルよりも優先されます。これにより、設定ファイルは常に最新の状態に保たれます。
言語設定ファイルでのブロックの設定
Divi 5ではブロック構文を使用するため、翻訳用にDiviモジュールを登録するプロセスは、Gutenbergブロックの翻訳プロセスと似ています。
- すべてのブロック定義は、親要素である<gutenberg-blocks>内にラップされます。
- 個々のブロックは<gutenberg-block>要素で宣言され、type属性はブロックの登録名に対応します。
- 翻訳可能なフィールドは、子要素の<key>として宣言されます。
DiviのCall to Actionモジュールを例に見てみましょう。
<!-- wp:divi/cta {"module":{"title":"CTA","button_text":"Contact Us","button_url":"https://example.com/contact/"}} /-->
wpml-config.xmlでの設定方法は以下のとおりです。
言語設定ファイルにおけるDiviブロックのXML例
<gutenberg-blocks>
<gutenberg-block type="divi/cta" translate="1">
<key name="module">
<key name="title" />
<key name="button_text" />
<key name="button_url" type="link" />
</key>
</gutenberg-block>
</gutenberg-blocks>構造は以下のようになります。
- <gutenberg-blocks>要素は、すべてのブロック定義をラップします。
- <gutenberg-block>要素は単一のブロックタイプを定義し、type属性によって識別されます。
translate="1"は、WPMLにこれを処理するよう指示します。 - 各<key>要素は1つの翻訳可能なフィールドを識別します。プレーンテキストフィールドにはtitleとbutton_text、リンクにはbutton_urlが使用されます。
type="link"属性は、リンクされた投稿またはページの翻訳バージョンにURLを自動的に置き換えるようWPMLに指示します。
言語設定ファイルのテスト
更新した言語設定ファイルをテストするには、以下の手順に従います。
1. DiviとWPMLの両方を有効にしたサイトをセットアップします。文字列翻訳とメディア翻訳のアドオンも必ず有効にしてください。
2. リモートの言語設定ファイルを更新したバージョンで上書きするには、WPML → 設定に移動し、カスタム XML 設定タブをクリックします。更新した言語設定ファイルの内容をエディタにコピーし、保存をクリックします。
3. 新しいページを作成し、新しいモジュールを追加します。既存のモジュールの属性をいくつか更新した場合は、それらもページに追加します。この例では、ButtonモジュールがDivi Builderに新しく追加されたと想定します。これをページに追加し、公開をクリックします。
4. ボタンを含むページを翻訳するには、翻訳ダッシュボードを使用できます。別の方法として、高度な翻訳エディタ（ATE）を使用することもできます。これはテスト時に便利で、ページ上のすべてのDivi要素のモジュールタグを確認できます。ATEを開くには、ページの編集に移動し、右サイドバーの言語ボックスの下にあるプラスアイコンをクリックします。
5. 要素を確認し、翻訳を追加するか、ATEに自動翻訳させます。
これで、フロントエンドで翻訳されたページを確認できます。翻訳されたページにはすべての翻訳済み文字列が表示されるはずです。これは、更新した言語設定ファイルが正常に機能していることを意味します。
問題が発生した場合は、互換性開発チームにお問い合わせください。言語設定ファイルに関する問題の確認をサポートいたします。
テストが完了したら、リポジトリにマージリクエストを送信してください。互換性開発者がリクエストを受け取り、レビューします。