WordPress で効果的な言語ドロップダウンを作成する方法

公開: 2023-04-01

Web サイトを複数の言語に翻訳することは、ユーザーにとって有益であり、トラフィックにとって素晴らしいことです。 訪問者は、サイトのコンテンツを自分の言語で読むことができるとわかると、サイトにとどまる時間が長くなります。 翻訳を提供している限り、ユーザーが好みの言語にできるだけ簡単に切り替えられるようにしてみませんか? TranslatePress では、言語ドロップダウンを表示する方法が複数あります。

  • メニュードロップダウン
  • ウィジェットまたはフッターのドロップダウン
  • フローティングセレクター

この投稿では、それらすべての使用方法を紹介します。 しかし、最初に、効果的な言語ドロップダウンの条件について話しましょう。

効果的な言語ドロップダウンの設計

Web サイトのデザインのあらゆる側面と同様に、すべてはユーザーにかかっています。 言語のドロップダウン (またはスイッチャー) について話している場合、主に意識する必要があるのは、サイトの訪問者がそれをどのように表示し、操作するかです。

重要な設計上の選択の 1 つは、言語をサイトの母国語で表示するか、表示される特定の言語で表示するかです。 たとえば、英語のサイトでは、言語を「スペイン語」と表示するのではなく、「スペイン語」と表示できます。 これにより、ユーザーは自分の言語を簡単に識別し、すぐに快適にサイトを閲覧できるようになります。

役立つもう 1 つの視覚的ガイドは、言語の横に国旗を表示することです。 スイッチャーの言語テキストの横に韓国国旗を表示すると、韓国の訪問者がすぐに認識できるようになります。

サイトのレイアウトを計画するときは、言語ドロップダウンの配置についても考慮することが重要です。 すべてのサイトは固有であるため、サイトに最適な配置は別のサイトとは異なる場合があります。 繰り返しますが、訪問者がサイトとどのようにやり取りするかを考えてください。 ドロップダウンを表示する最も明白な場所を検討してください。 右下にある場合もありますが、他に重要なコンテンツがある場合は、ページの左側に移動することを検討してください。

言語ドロップダウンをフッターに配置すると、訪問者はそれを簡単に見つけることができますか? サイドバーやナビゲーション メニューなど、複数の領域に言語スイッチャーを配置することも検討してください。

言語ドロップダウンを表示する際の最も重要な要素は、特定のユーザーがどのように言語ドロップダウンを見つけて操作するのが最適かを考えることです。

設計の側面について説明したので、すべてを実行に移す方法を見ていきましょう。

言語スイッチャーの設定

WordPress ダッシュボード (プラグイン → 新規追加) から無料の TranslatePress プラグインをインストールしたら、最初に設定にアクセスする必要があります。 それらは WordPress ダッシュボード メニューのSettings → TranslatePressで見つけることができます。 [全般]タブを下にスクロールして、 [言語スイッチャー]セクションを見つけます。

TranslatePress 設定のスクリーンショット

それぞれ独自の設定を持つ 3 つのオプションが表示されます。

  • ショートコード
  • メニュー項目
  • フローティング言語選択

オプションごとに、ドロップダウン メニューを使用して、言語名の表示方法を選択します。 たとえば、完全な言語名短い言語名言語名付きのフラグなどを選択できます。

さらに、フローティング言語の選択により、ダークまたはライトのテーマを選択したり、ページ上の配置を選択したりできます.

選択を行って変更を保存したら、ページにドロップダウンを表示することに移りましょう。

言語ドロップダウンを表示する

繰り返しますが、言語ドロップダウンを表示するかどうかは個々の選択です。 サイトに最適なものが見つかるまで、さまざまな設定や表示オプションを試す必要がある場合があります。

ショートコード

言語ドロップダウンに shortcode [language-switcher]オプションを使用すると、ショートコード Gutenberg ブロックを受け入れるサイトのほぼどこにでもスイッチャーを表示できます。 通常、ショートコードを使用するのに最適な場所はウィジェットです。これは、サイドバーまたはフッターに配置できます。

ブロック テーマと完全なサイト編集を使用している場合は、フッターにショートコードを簡単に追加することもできます。

WordPress サイトエディターのスクリーンショット

フロント エンドでは、訪問者はドロップダウンを使用して優先言語を選択できます。

言語ドロップダウンのある WordPress サイトフッターのスクリーンショット

メニュー項目

必要に応じて、ナビゲーション メニューに言語ドロップダウンを表示できます。 TranslatePress は、WordPress にオプションを自動的に追加して簡単にします。 メニューを編集すると、追加できるメニュー項目のリストに言語スイッチャーが表示されます。

WordPress メニューエディターのスクリーンショット

まず、現在の言語と、ドロップダウンで表示する言語を選択します。 [メニューに追加]をクリックします。 次に、現在の言語の下にサブ項目として言語を配置します。

メニューを保存したら、サイトのヘッダーで適切なメニューが選択されていることを確認する必要があります。これは、テーマによって異なります。 フロント エンドでは、言語のドロップダウンがナビゲーション メニューに表示されます。

ナビゲーション メニューに言語ドロップダウンがある WordPress ヘッダーのスクリーンショット

フローティング言語の選択

ユーザーがどこをスクロールしても、常にすべてのページで言語ドロップダウンを使用できるようにする場合は、フローティング言語選択を使用する必要があります。

前に説明したように、TranslatePress 設定でこのオプションを有効にしている場合は、指定した場所に自動的に表示されます。他に何もする必要はありません。

フロント エンドでは、フローティング言語スイッチャーが専門的に洗練されたボタンとして表示されます。 クリックすると、使用可能にしたすべての言語のオプションが展開されます。

フローティング言語スイッチャーを備えた WordPress サイトのスクリーンショット

TranslatePress の有料版を使用している場合は、必要な数の言語を表示できます。 ただし、追加の言語が 1 つだけ必要な場合は、無料版を使用できます。

言語ドロップダウンで訪問者を簡単に

訪問者が優先言語を簡単に選択できるようにするためにできることはたくさんあります。 翻訳されたサイトを設計するときは、次の選択肢について検討してください。

  • 母国語の名前表示またはサイトの言語。
  • フラグを使用して、ユーザーが自分の言語をすばやく識別できるようにします。
  • 言語ドロップダウンの配置。

ユーザーのエクスペリエンスを改善すればするほど、ユーザーがサイトにとどまり、戻ってくる可能性が高くなります!

TranslatePress 多言語対応

TranslatePress は、WordPress サイトを翻訳する最も簡単な方法です。 高速で、ウェブサイトの速度が低下せず、あらゆるテーマやプラグインで動作し、SEO フレンドリーです。

プラグインを入手する

または無料版をダウンロード

独自の言語ドロップダウンを設定する方法について他に質問がある場合は、コメントで遠慮なくお知らせください。