WordPress に言語スイッチャーを追加する方法

それで、あなたは多言語になろうと考えていますよね？おめでとうございます！潜在的な視聴者を海外の顧客にまで拡大することは常に良いアイデアです。

しかし、WordPress の言語スイッチャーについて考えたことはありますか?

サイトを多言語化するには、Web サイトのコンテンツを翻訳するだけでは済みません。もちろん、翻訳がプロセスの主要部分であることに変わりはありませんが、翻訳されたコンテンツが正しく、SEO に優しく、訪問者が簡単にアクセスできることを確認することも、ユーザーエクスペリエンスにとって同様に重要です。

ユーザーが多言語の WordPress Web サイトを操作する場合、適切に機能する言語スイッチャーを使用することが不可欠です。

言語スイッチャーとは何ですか?

言語スイッチャーは大きな影響を持つ小さなボタンです。

言語スイッチャーは、Web サイト訪問者が (指定した) 2 つ以上の言語を切り替え、サイトに移動する言語を選択できるクリック可能なセレクターです。これは海外の Web サイトにとって非常に役立ち、訪問者はサイト上でより良いエクスペリエンスを楽しむことができます。

たとえば、英語、フランス語、ルーマニア語の 3 つの言語で表示できる Web サイトがあるとします。コンテンツ全体が 3 つの言語に翻訳されているので、ユーザーが行う必要があるのは、サイトを表示するために提供されている言語から好みの言語を選択することだけです。こうすることで、ユーザーは知っている言語、または場合によっては母国語でサイトを快適にスクロールできます。

言語スイッチャーは通常、Web サイトの隅に、またはメニューやウィジェットの一部として表示されます。ドロップダウンの形式をとることもでき、完全な言語名、言語コード、またはフラグを表示することもできます。

あなたの選択肢は何ですか?

多言語 Web サイトを作成する方法は数多くありますが、利用可能なツールのすべてに、メニュー、フッター、またはその他の希望する場所に言語スイッチャーを簡単に追加するオプションが付属しているわけではありません。

機能的でアクセスしやすい言語スイッチャーを非常に簡単な方法で追加するための最良のオプションは次のとおりです。

1.翻訳プレス

TranslatePress は、使いやすいフロントエンド翻訳エディターと Web サイトのコンテンツを 100% 翻訳する機能を備えたビジュアル翻訳プラグインです。

多くの多言語機能とカスタマイズオプションの中で、このプラグインは、サイトに表示してニーズに合わせてカスタマイズするための 3 種類の言語スイッチャーを提供します。すべてのページでユーザーを追跡するフローティング言語セレクター、メニュー項目スイッチャー、および次のことを可能にするショートコードスイッチャーです。サイト上のほぼどこにでも配置できます (ウィジェットやフッターなど)。

2.WPML

WPML プラグインは、WordPress API を使用するすべてのテーマまたはプラグインと互換性のある、多言語 Web サイト用のバックエンドベースの翻訳ツールです。

言語スイッチャーに関しては、WPML はメニュー項目、ウィジェット、フッター、投稿の翻訳への直接リンクの 4 種類の言語スイッチャーをユーザーに提供します。これらのタイプはすべて個別にカスタマイズできます。

3. ポリラング

Polylang は、WordPress サイト向けのもう 1 つの人気のある多言語ソリューションであり、プラットフォームとシームレスに統合されます。

バックエンド翻訳インターフェイスが付属しており、さまざまな表示オプションと言語スイッチャーのカスタマイズ機能も提供します。 Polylang はメニュースイッチャーとウィジェットスイッチャーも提供しており、PHP テンプレートタグを使用してサイトの任意の場所に追加することもできます。

4. ヴェグロット

Weglot は小規模な多言語 Web サイト向けの SaaS ソリューションであり、Web サイト自体に翻訳を保存することで翻訳を完全に制御する上記の他のオプションとは対照的に、翻訳を独自のサーバーに保存します。

Weglot はデフォルトでフローティング言語セレクターを表示しますが、その位置と外観は後でカスタマイズできます。カスタマイズを通じて、スイッチャーをメニュー、ウィジェット、またはショートコードをサポートするその他の場所に移動できます。

これらのプラグインはすべて、言語スイッチャーの表示場所や外観など、言語スイッチャーに優れたカスタマイズオプションを提供します。

WordPress サイトに言語スイッチャーを追加する方法

オプションがわかったところで、実際にこの機能を独自の WordPress Web サイトに実装する方法を示したいと思います。

これを行うために、多言語 WordPress プラグインである TranslatePress を利用して言語スイッチャーを追加するプロセスを説明します。完了したら、言語スイッチャーに関するヒントとベストプラクティスについてこの投稿を確認してください。

ステップ 1: プラグインをインストールする

すべてを始めるには、まず WordPress サイトに TranslatePress をインストールする必要があります。

プラグインをインストールするには、まず WordPress ダッシュボードでプラグイン → 新規追加に移動します。検索バー（右上隅）に「TranslatePress」と入力し、表示される最初のプラグインの今すぐインストールをクリックします。プラグインをインストールしたら、忘れずに有効化してください。

ステップ 2: 言語を追加する

インストールが完了し、プラグインが起動して実行されたら、言語の選択と Web サイトへの追加に進むことができます。

これを行うには、設定 → TranslatePress に移動し、全般タブにすべての言語 セクションがあります。ここでドロップダウンを開いて、Web サイトに追加する言語を選択できます。言語を選択するたびに、[追加] ボタンをクリックすることを忘れないでください。

ここで変更を保存し、次のステップに進みます。

ステップ 3: 言語スイッチャーのタイプを選択する

TranslatePress を使用する場合、言語スイッチャーを表示するには 3 つの方法があります。好みに応じて、すべてを同時に使用したり、2 つを組み合わせたり、1 つだけを使用したりできます。

言語スイッチャーには次の 3 種類があります。

ショートコード
メニュー項目
フローティング言語セレクター

好みの言語スイッチャーを選択するには、設定 → TranslatePress に移動し、全般タブを少しスクロールします。ここには 3 種類の言語スイッチャーが表示され、左側のチェックボックスをオンまたはオフにすることで有効または無効にすることができます。

これら 3 つのオプションのいずれかを使用して、完全な言語名、言語コード、フラグ、または選択した組み合わせを表示することを選択できます。 TranslatePress には、スイッチャーを表示するための 5 つのオプションがあります。

では、それぞれを実際に Web サイトに表示する方法を見てみましょう。

ショートコード言語スイッチャー

ショートコード – Web サイトのフッターまたはサイドバーに言語スイッチャーをウィジェットとして表示する最も簡単な方法です。 WordPress テーマによっては、ショートコードを使用してスイッチャーを Web サイト上の他の場所に配置することもできます。

スイッチャーをサイトに表示するには、まず外観 → ウィジェットに移動し、利用可能なウィジェットのリストからテキストウィジェットをサイドバーなどの希望の場所にドラッグします。フッター、またはその他。

テキストウィジェットに、言語スイッチャーのショートコード [ language-switcher ] を挿入する必要があります。オプションで、「言語」などの代表的なタイトルをスイッチャーに追加できるため、ユーザーがページ上で簡単に識別できるようになります。

新しく追加したスイッチャーをページに表示するには、[保存] をクリックすることを忘れないでください。

スイッチャーの外観をカスタマイズしたい場合は、前に示したように、TranslatePress 設定の一般タブで利用可能な 5 つの表示オプションのいずれかを選択できます。

言語スイッチャーは、選択した場所に表示されるはずです。

メニュー項目言語スイッチャー

言語スイッチャーは、他のすべてのメニュー項目とともにメインナビゲーションメニュー (または Web サイトで利用可能な他のメニュー) に表示することもできます。

このタイプのスイッチャーを追加するには、まず外観 → メニューに移動し、スイッチャーを追加したいメニューを選択します。左側の項目リストから言語スイッチャーを拡張します。ここには、Web サイトに追加した言語のリストと、「現在の言語」というラベルの付いた項目が表示されます。

スイッチャーをメニューに表示するには、これらすべての項目をメニューに追加し、ドロップダウンを作成するためにすべての言語項目を [現在の言語] 項目の下に (サブ項目として) 配置する必要があります。メニューに -type スイッチャーを追加します。

完了したら、必ずメニューを保存をクリックしてください。新しいメニュー言語スイッチャーは次のようになります。

フローティング言語スイッチャー

このタイプのスイッチャーは、Web サイトのすべてのページに常に言語が表示されるため、Web サイトの訪問者がいつでも言語を切り替えられるようにしたい場合に特に役立ちます。

まず、TranslatePress 設定 → 一般 タブで、フローティング言語選択オプションが有効になっていることを確認します。

ここでは、ダークテーマまたはライトテーマを選択してフローティングスイッチャーをカスタマイズしたり、Web ページ上の位置を選択したりできます。このタイプのスイッチャーを表示するためのオプションは次のとおりです。

右下
左下
右上
左上

選択を行ったら、[変更を保存] をクリックすることを忘れないでください。これで完了です。新しいフローティングスイッチャーがどのように見えるかを見てください。

ステップ 4: 楽しんで<i>切り替えてください

すべての主要なセットアップが完了したら、次に進んで、利用可能な他のカスタマイズオプションを見つけることができます。 TranslatePress を使用すると、次のこともできます。

カスタム言語を追加する

Web サイトに新しい言語を追加しようとすると、探している言語がドロップダウン言語メニューに表示されない場合があります。ただし、心配しないでください。カスタム言語はいつでも作成して追加できます。

TranslatePress 設定の詳細タブに移動し、カスタム言語セクションまで下にスクロールするか、上部にあるカスタム言語ボタンをクリックしてください。セクション。

ここで、必要な言語、そのネイティブ名、ISO コード、カスタムフラグを追加できます。完了したら、変更を保存することを忘れないでください。

新しいカスタム言語を追加した後、TranslatePress 設定の全般タブからその言語を Web サイトの言語に追加して、実際に Web サイトに表示できるようにします。メニュー項目スイッチャーを選択した場合は、そのカスタム言語も項目としてメニューに追加することを忘れないでください (外観 → メニューから)。

デフォルトのフラグを独自のフラグに置き換えます

Web サイトに特定のデザインがあり、デフォルトの TranslatePress フラグではうまくいかない場合は、Web サイトにアップロードした他の写真でいつでも簡単に置き換えることができます。

TranslatePress 設定の詳細タブに移動し、カスタム言語セクションに移動して、フィールドにカスタム言語の情報を入力します。 [フラグ URL] の下に、すでに WordPress にアップロードした画像の URL を貼り付けます。

カスタム言語は、言語を追加するときにドロップダウンメニューにすでに存在する言語にすることができます。ただし、デフォルトのフラグは使用しないため、この新しいカスタムフラグを Web サイトに追加するときに、カスタムとして再入力し、元のフラグを削除する必要があります。

メニュー項目スイッチャーを使用している場合は、メニューにも忘れずに追加してください。

メニューに反対側のフラグを表示します

Web サイトがバイリンガルで、スイッチャーで現在表示されている言語とは反対の言語を常に表示したい場合、選択したスイッチャーのタイプに応じて 2 つの方法があります。

方法 1: ショートコードスイッチャー

ショートコードスイッチャーで反対言語を表示するには、反対言語ショートコードプラグインをダウンロードするだけです。

Web サイトに 2 つの言語しか追加されていない場合、プラグインがインストールされた直後のショートコード言語スイッチャーは次のようになります。

方法 2: メニュー項目スイッチャー

ただし、メニュー項目スイッチャーに対して同じことを実行したい場合は、いくつかの手順に従う必要があります。ただし、心配しないでください。これにもそれほど時間はかかりません。

まず、メニューから「現在の言語」項目を削除し、2 つの言語だけを通常の項目としてメニューに残します。もうサブアイテムであってはなりません。

次に、右上隅の画面オプションに移動し、CSS クラスのチェックボックスが選択されていることを確認します。

次に、メニューに戻り、各言語の CSS オプションクラスに、各言語に対応するカスタム CSS を追加します。最後の部分は、次のように独自の Web サイトの言語に置き換えてください (それぞれ英語またはフランス語の場合)。

.translatepress-en_US .tp_en
.translatepress-fr_FR .tp_fr

スラッグ内では常に自分の言語を置き換える必要があることに注意してください。これらは単なる例です。

両方の言語で同じことを行い、メニューを保存をクリックします。

次に、WordPress → 外観 → カスタマイズ → 追加 CSS に移動し、次のようにカスタム CSS を追加できます。

.translatepress-en_US .tp_en,
.translatepress-fr_FR .tp_fr
{ display: none !important }

最終的には次のように動作するはずです。

前に

後

それでおしまい！

ほら、ありますよ！ WordPress Web サイトに言語スイッチャーを追加する方法を学習しました。

あとは、翻訳を開始して (まだ翻訳を行っていない場合)、海外からの訪問者に可能な限り最高のユーザーエクスペリエンスを提供するだけです。

楽しく翻訳してください！