このゲスト投稿は、wplift.comのDaan氏によるものです。同氏は最近、Elementorテンプレートの素晴らしいプレミアムライブラリであるEasyThemePacksを立ち上げました。この記事では、WPMLを使用してそれらを翻訳する正確な方法を紹介します。
Elementorの定期的なユーザーであれば、Elementorを使用してコードを書かずに美しいデザインを作成する方法をすでによくご存知でしょう。しかし、Elementorで美しい多言語デザインを作成することもできるのでしょうか？
朗報です：WPMLを使用すれば可能です！
このチュートリアルを読み終える頃には、完全に空白の「Elementorキャンバス」オプションを使用している場合でも、Elementorで構築された多言語サイトの作成を開始する方法を正確に理解できるでしょう。
Elementorで多言語サイトを作成するために必要なもの
このチュートリアルを進めるために必要なものは以下のとおりです。
- Elementorでデザインしたページ – ここでは、空白の「Elementorキャンバス」テンプレートに基づく完全なランディングページデザインであるEasyThemePacksのBarista Bluegrassテンプレートを使用します。
- WPML Multilingual CMS – Elementorのコンテンツを含む多言語WordPressサイトの作成に役立ちます。
また、WPML Multilingual CMSパッケージの他のコンポーネント、特にWPML 文字列翻訳とWPML 翻訳管理を必ずインストールしてください。
これらの基本要素が揃ったら、WPMLを使用して多言語Elementorサイトを作成する方法を見ていきましょう。
ステップ1：WPML CMSとコンポーネントのインストールと有効化
WPML Multilingual CMSとそのコンポーネントをインストールしたら、WPML セットアップに従って、基本的な言語設定（Elementorのデザインをどの言語に翻訳するかなど）を構成できます。
この例では、テンプレートをドイツ語に翻訳します（Google 翻訳を使用します。ドイツ語の文法に厳しい方、間違いがあったら申し訳ありません！）。
翻訳マネージャーも必ず有効にしてください（ダッシュボードでWPMLからプロンプトが表示されます。見逃すことはなく、ボタンをクリックするだけです）。
ステップ2：翻訳するElementorページへの移動
WPMLの基本設定が完了したら、翻訳するElementorページのWordPressダッシュボードエディタに移動します（Elementorエディタは開かず、通常のWordPressエディタのままにしてください）。
EasyThemePacksのBarista Bluegrassテンプレートの元の英語での表示は次のとおりです。
わずか数分で、これをドイツ語に翻訳できます！
ステップ3：Elementorデザインの新しい翻訳の作成
WordPress エディタで+アイコンをクリックし、Elementorデザインの新しい翻訳を作成します。
これにより、便利な並列エディタが開きます。左側には、元の英語の翻訳からのすべての情報が表示されます。WPMLは、Elementorデザインから個々のすべての文字列を取り込むだけでなく、その他の役立つ属性（ユーザーを適切な翻訳に送信できるようにするためのボタンのリンク先URLなど）も取り込みます。
Elementorテンプレートの翻訳を開始するには、右側の対応するボックスに翻訳を入力するだけです。
作業を進める際、各翻訳を「翻訳が完了しました」としてマークし、完了した部分とまだ翻訳が必要な部分をすぐに判別できるようにしてください。また、途中の作業はいつでも保存できますが、すべてを完了としてマークするまで、フロントエンドに翻訳を表示することはできません。
翻訳を終えて保存したら、完了です。これで、必要なときにいつでも既存の翻訳を編集できるようになります。
また、サイトのフロントエンドに移動すると、好みに応じてURLを変更することで、ページの翻訳済みバージョンにアクセスできます（言語スイッチャーの作成方法については後述します）。
すべてがどのようにローカライズされているかを確認できるように、URL構造を含めたEasyThemePacksテンプレートの翻訳済みバージョンの表示を以下に示します。
元のElementorデザインを変更した場合
ある時点で、Elementorデザインの元のバージョンを変更したい状況に直面するかもしれません。
その場合どうなるでしょうか？変更を加えた後、翻訳されたコンテンツは失われてしまうのでしょうか？
いいえ！
Elementorのインターフェースを使用してページの既存の翻訳を編集する場合、WPMLはエディタ内でそれらの翻訳をマークし、変更箇所を表示するオプションを提供します。
WPMLは、変更されていない翻訳済みの文字列には何もしません。したがって、編集されたテキストを更新するだけで完了です！
Elementorキャンバステンプレートの言語スイッチャーについて
EasyThemePacksのすべてのデザインは、空白の「Elementorキャンバス」テンプレートの使用に基づいています。Elementorで独自のページを作成する場合も、空白の「Elementorキャンバス」テンプレートを使用する可能性が高いでしょう。
このテンプレートを使用する場合、テーマからのナビゲーションメニューやサイドバーはありません。これらは通常、WPMLで言語スイッチャーを追加する2つの場所です。
では、Elementorキャンバスを使用している場合、訪問者がElementorテンプレートの翻訳済みバージョンに実際にアクセスできるようにするにはどうすればよいでしょうか？
コードを使用して独自のWPML言語スイッチャーを作成することもできますが、最も簡単な方法は、Elementorテンプレートに言語スイッチャーのショートコードを含めることです。
これを行うには、Elementorのショートコードウィジェットを表示したい場所に配置し、次のショートコードを含めます。
{{wpml_language_selector_footer}}
このショートコードは、WPMLのフッター言語スイッチャーの設定を取り込みます。これらの設定を構成するには、WordPressダッシュボードでWPML → 言語に移動し、「フッター言語スイッチャー」セクションまでスクロールします。
鉛筆アイコンをクリックすると、言語スイッチャーの機能を構成できます。以下のことが可能です。
- レイアウトの変更
- 言語名と国旗を表示するかどうかの選択
- 新しいカラースキームの選択
- 個々の要素のスタイルの構成
ヒントとして、言語名を使用することは、ユーザーがCTRL + Fを使用して現地の言語を検索できるため、優れたオプションです。
Elementorの翻訳方法に関するまとめ
WPML Multilingual CMSパッケージを使用すると、EasyThemePacksで利用可能なプレミアムテンプレートのような「Elementorキャンバス」に基づくものを含め、あらゆるElementorページテンプレートを簡単に翻訳できます。ビジュアルなElementorページビルダーで構築したすべてのコンテンツを、文字列ごとに翻訳できます。また、将来的に元のElementorデザインに変更を加えた場合でも、WPMLはそれらの変更を見つけ出し、翻訳済みバージョンも確実に更新できるようにサポートします。
最後に、空白の「Elementorキャンバス」テンプレートを使用している場合でも、WPMLのショートコード、またはリンク先のカスタムコードのメソッドのいずれかを介して、ユーザーフレンドリーな言語スイッチャーを含めることができます。
Elementorデザインの翻訳方法について他に質問はありますか？ぜひコメントを残してください！
