WordPress ブロックエディターはサイトのカスタマイズに関する新たな可能性を常に追い求めています。このチュートリアルでは、ブロックを使用して2つの言語でサイトのメニューを作成する方法、および訪問者がサイトに表示される言語を変更できるようにする言語スイッチャーを作成する方法について見ていきます。
こちらから、これがどのように動作するのかがわかるデモをご覧いただけます。
このガイド内
- この言語スイッチャーはお使いのページを翻訳するものではありませんが、訪問者に対し2つ以上の言語でサイトを表示できます。ページはご自身で翻訳する必要があります。
- この言語スイッチャーは、それぞれの言語の開始ページにユーザーをリダイレクトするだけです。
- サイトにページを追加する場合は、メニューも更新する必要があります。
- 初期設定には少し時間がかかりますが、一度設定してしまえば、調整と更新を素早く実行できます。
このチュートリアルでは次の機能を利用します。
1. ページとページスラッグを設定する
2. メニューと言語スイッチャーのレイアウトを選択する
3. 言語スイッチャーを作成する
4. ナビゲーションメニューを追加する
5. 新しいメニューと言語スイッチャーを保存する
6. 第二言語メニュー
7. その他のページに新しいメニューを追加する
8. さらにページを追加する
このチュートリアルを最も効果的に活用するためには、こちらに一覧表示された、ブロックエディター対応のテーマのいずれかを利用することをお勧めします。
「参加サイト」→「サイト」→「ページ」の順に移動します。サイトに使用する言語ごとに、1つの開始ページを作成することから始めます。ここではまだ多くのコンテンツを追加する必要はありません。ページのタイトルだけで十分です。
各ページを投稿して、更新し、それぞれのページがその言語を参照するように、各ページのページ スラッグを変更します。この例では、フランス語の開始ページに「Accueil」というタイトルが付けられ、ページスラッグに /fr/ が設定されています。
サイトの固定フロントページとして、優先する言語の開始ページを割り当てます。これにより、サイトにアクセスする訪問者はある言語で最初にサイトを表示し、その後、他の言語に変更できるようになります。
必要な開始ページがすべて用意できたら、複数の言語でいくつかの他のコンテンツページを作成します。まだコンテンツを追加する必要はありません。ここでは、タイトルのみのページを投稿するだけで構いません。
これらのページを作成し、言語の開始ページの子ページとして割り当てる場合、「ページ属性」セクションを使用します。
例 – ページ構造の概要
「参加サイト」→「サイト」→「ページ」で、主言語の開始ページのタイトルをクリックし、WordPress エディターで開きます。
エディターのページのタイトルの下にカラムブロックを追加し、2カラムのレイアウトを選択します。選択する言語を途中で変更したくなった場合も心配する必要はありません。ブロック設定で変更できます。これを行う方法の詳細については、「カラムブロック」ガイドを参照してください。
大きめのカラム1つと小さめのカラム1つのレイアウトを使用することをお勧めします。小さめのカラムには言語スイッチャーを、大きめのカラムにはメニューを含むようにします。
カラムブロックは幅広または全幅に設定します。
言語スイッチャーの表示方法に合わせて2つの方法があります。言語で名前を入力するか、フラグが表示されるインライン画像を使用することができます。
注意: 次の2つの理由から、言語の表示にフラグを使用することはお勧めしません。
1.フラグ画像を表示できない可能性がある訪問者にとってアクセスが難しくなる
2.どのフラグが訪問者と特定の言語を関連付けているかにより混乱が起こる場合がある (全員が同じように思うわけではない)
明確にするために、テキストリンク (方法1または2) を使用することをお勧めします。
方法1 – ナビゲーションブロックのテキストリンク
次に各項目のテキストを変更すると、その言語の名前 (または短縮版) が表示されます。
方法2 – 段落ブロックのテキストリンク
お好みの形式で言語名を入力します (たとえば「EN」と「FR」または「English」と「French」)。
それぞれの言語名を強調表示し、「ハイパーリンクを挿入」ボタンをクリックして、言語名を開始ページにリンクします。例:
方法3 – インライン画像
画像が追加されると、それをクリックしサイズを変更できます。
新しい言語スイッチャーの反対側のカラムで、ナビゲーションブロックを追加しましょう。空のカラムをクリックして「ブロック」メニューを開き、ナビゲーションを探すか、「レイアウト要素」セクションで見つけます。
ブロックは2つのオプションで表示されます。「空のメニューを作成」を選択します。ブロックにページを追加する準備ができたことがわかります。
第一言語のそれぞれのページにリンクを追加します。ナビゲーションブロックの右側にある「ブロックを追加」ボタン (黒の「+」ボタン) をクリックします。
エディターの上部にある「ブロックナビゲーション」ボタンを使用し、カラムを選択します。
カラムのブロックツールバー を使用して詳細オプションを表示し、「再利用可能ブロックに追加」を選択します。
新しい再利用可能ブロックに名前 (「メニュー – 英語」など) を付けることで、識別しやすくします。詳細については、このガイドの再利用可能ブロックの仕組みについてお読みください。
ページを更新してページへの変更も保存するようにしてください。おめでとうございます。第一言語メニューと言語スイッチャーが完成しました。
第二言語でメニューを作成するには、1から5の手順を再度実行するか、次のショートカットを利用できます。
WordPress エディターでいずれかの第二言語のページを開きます。「ブロックを追加」ボタン (黒い「+」ボタン) をクリックし、ページに新しいブロックを追加します。ブロックの一覧で、右側を一番下までスクロールし、メニューが保存される再利用可能ブロックのカテゴリーを探します。あるいは、検索ボックスを使用し、検索します。
メニューブロックがそのページに追加されたら、詳細オプションのメニューを使用して通常のブロックに変換します。
再利用可能ブロックではなく、通常ブロックとしてブロックが表示されたら、ナビゲーションブロックを更新して、代わりにそれを第二言語のページにリンクできます。
方法1 – 新しいナビゲーションブロックを削除し、再度追加する
方法2 – ナビゲーション項目を変更する
変更が終了したら、この新しいカラムブロックを新しい再利用可能ブロックとして保存し (前述の手順5)、それが第二言語のメニューであることがわかるように明確な名前を付けます。
ページを更新してページへの変更も保存するようにしてください。おめでとうございます。第二言語メニューと言語スイッチャーが完成しました。
メニューと言語スイッチャーの準備ができました。これで、前述の手順6で説明したように、2つの言語メニューをそれぞれの言語のその他のページに追加できるようになりました。再利用可能ブロックが保存されると、それを簡単に他のページに追加できますが、通常ブロックに変換する必要はないことにご注意ください。
それぞれの言語で追加のページを作成して、メニューに追加する必要がありますか ? 心配いりません。再利用可能ブロックは編集できます。また、メニューは追加されたそれぞれのページで更新されます。詳細はこちらでご覧いただけます。
日本語サポート 
コメントを投稿するにはログインしてください。