言語スイッチャーは、多言語Webサイトを作成する際に注意を払う必要がある重要な要素です。言語スイッチャーは、ユーザーが言語を切り替えたいときに頻繁にアクセスするものです。.
したがって、使いやすく、アクセスしやすく、利用しやすい言語切り替えを作成することが重要です。.
この記事では、 OpenCartの言語スイッチャーの設定方法について説明します。 OpenCartで多言語のウェブサイトやeコマースを運営している方は、この記事を最後までお読みください。
多言語 OpenCart ウェブサイトにおける言語スイッチャーの作成が重要な理由
ユーザーフレンドリーな言語スイッチャーを作成することは、多言語Webサイトの成功に不可欠です。 OpenCart の多言語サイト用に言語スイッチャーを作成するべき理由は次のとおりです。.
- ユーザーエクスペリエンスの向上: ユーザーフレンドリーな言語スイッチャーは、言語間のスムーズな切り替えを提供し、ユーザーがコンテンツをナビゲートして理解しやすくします。これにより、全体的なユーザーエクスペリエンスが向上し、フラストレーションが軽減され、エンゲージメントが向上します。
- 直感的なナビゲーション: ユーザーは、言語スイッチャーを簡単に見つけて使用できる必要があります。ユーザーフレンドリーな設計により、スイッチャーが明確に配置され、わかりやすいアイコンやラベルが使用され、ユーザーが言語を切り替えるインスピレーションを得られるようにします。
- 直帰率の低減：ユーザーフレンドリーな言語切り替えは、直帰率の低減に貢献します。訪問者が迅速に言語を選択できる場合、サイトに留まり、コンテンツを探索し、場合によってはコンバージョンする可能性が高くなります。
- 明確なコミュニケーション: 言語通訳者は、ユーザーと効果的にコミュニケーションをとる必要があります。明確で簡潔なラベルやシンボルは、利用可能な言語オプションを伝えるのに役立ち、混乱を減らし、ユーザーが情報に基づいた選択を行えるようにします。
- SEO最適化: 検索エンジンは、ウェブサイトをランキング付けする際にユーザーエクスペリエンスを考慮します。 適切に実装されたユーザーフレンドリーな言語切り替え機能は、SEOにプラスの影響を与え、多言語で検索するユーザーにとってサイトをより見やすく、アクセスしやすくします。
OpenCartの言語切り替えを設定する方法は？
言語切り替え機能は通常、ウェブサイト翻訳サービスによって提供されます。この機能は、ユーザーが設計したい内容に応じて調整できます。.
ただし、翻訳サービスによっては、カスタマイズや使用が簡単な言語切り替え機能を提供していない場合があります。したがって、多くのCMSと互換性があり、提供する自動翻訳サービスを探すことが重要です。その1つがLinguise自動翻訳です。
Linguiseは柔軟で簡単にカスタマイズできる言語切り替え機能を提供し、はOpenCartと統合されています。この翻訳サービスはあなたにとって解決策になる可能性があります。
では、言語切り替えツールの設定方法について説明します。OpenCartまたはeCommerceウェブサイト向けです。詳細は以下の説明をご覧ください。
ステップ1: Linguise 無料アカウントの登録
言語切り替えをLinguiseで使用できるようにするには、まずLinguiseアカウントを登録する必要があります。また、さまざまな機能を備えた1か月間の無料トライアルも提供しています。
ステップ2：ドメインウェブサイト OpenCartを追加する
2番目のステップは、所有するOpenCartウェブサイトドメインをLinguiseダッシュボードに追加することです。記入する必要がある項目がいくつかあります。
- アカウント
- URL
- プラットフォーム、 OpenCartを選択
- 言語
- 翻訳言語
- URLを翻訳する
その後、APIキーをアクティブ化し、言語URLを設定する必要があります。ウェブサイトドメインを追加するための完全なガイドについては、インストールLinguise自動翻訳をOpenCartに設定するか、以下のビデオチュートリアルをご覧ください。
ステップ3: 言語切り替えツールを有効化
OpenCartLinguiseダッシュボード > 設定 > このURLをコピーします。
スクリプトをコピーしたら、OpenCartウェブサイトのテーマエディタに挿入する必要があります。そのためには、次の手順に従います。デザイン > テーマエディタ > デフォルトの順に進みます。OpenCart管理パネルで、以下の画像のように指定された領域にスクリプトを貼り付けます。
その後、通常、 Opencart の言語切り替え機能は、ウェブサイトを追加する際に選択した言語に応じて、右上隅に自動的に表示されます。.
ただし、上記の言語切り替えの表示はまだデフォルトです。 Linguise を使用すると、ニーズと欲求に応じてこの表示をカスタマイズできます。.
ステップ4：メイン表示の設定
言語スイッチャーまたは言語フラグの表示を設定するには、Linguiseダッシュボード > 設定 > 言語フラグの表示を介して行うことができます。
最初の設定では、メインディスプレイを設定します。いくつかの部分が含まれています。
- フラグアイコンの形状：ここでは、並べて表示、ドロップダウン、ポップアップの3つのオプションから選択できます。.
- 位置: この位置は、言語スイッチャーが表示される場所を示します。利用可能なさまざまな位置オプションから選択できます。訪問者が簡単に見つけられる位置を選択してください。.
- 最終的に、フラグと言語名、フラグと短い名前、または言語名のみを組み合わせることができます。ユーザーが言語を認識しやすいように、フラグと言語名を一緒に使用することをお勧めします。.
ステップ5: フラグのデザインを設定する
その後、メインの表示の下に、フラグのデザイン設定があります。以下の画像に示すように、いくつかの設定があります。.
- 表示言語名:国名または言語名に基づいて表示名を選択できます。たとえば、フランス語またはフランセ。
- 英語のフラグタイプ:これは、米国英語や英国英語（スペイン語、台湾語、ドイツ語、ポルトガル語と同じ）など、複数のタイプを持つ言語に使用されます。
- フラグスタイル:フラグアイコンの形状、円形または長方形を設定します。
ステップ6: フラグの色とサイズを設定する
フラグのデザインを設定した後の次のステップは、色、サイズ、その他のいくつかの設定を行うことです。以下の表示には、カスタマイズできるいくつかの設定があります。.
- 境界線の半径:四角形を使用する場合のカスタム境界線の半径（ピクセル単位）。
- 言語名の色:言語名のデフォルトのテキスト色を選択します。
- ポップアップ言語の色:ポップアップまたはドロップダウン領域の言語タイトルの色。
- フラグサイズ: フラグサイズ
- 言語名のホバー色:言語名のマウスホバー時のテキスト色
- ポップアップ言語ホバー色: ポップアップまたはドロップダウンの言語タイトルのマウスホバーテキスト色。
ステップ7：フラグのボックスシャドウを設定する
最後に、フラグボックスの影を設定することができます。最初の設定では、Webサイト上の各フラグの影を設定でき、次の設定では、マウスホバー時の言語フラグの影を設定できます。.
すべての設定を調整したら、必ず 保存 を選択して変更を保存してください。これで、行ったカスタマイズの結果がどのように表示されるかを確認できます。
これは、ドロップダウンを使用して言語スイッチャーの例であり、右上隅に配置され、フラグと言語名を使用しています。これとは別に、イタリア語に翻訳しようとしているWebサイトの表示もあります。.
How to create a user-friendly language switcher on your OpenCart website?
OpenCartの言語切り替えを設定する方法を理解した後、次は、あなたのウェブサイトにさらに多くのメリットを提供できるユーザーフレンドリーな言語切り替えを作成する方法を知る時です。.
- 馴染みのあるアイコンまたはフラグ: さまざまな言語を表すために馴染みのある言語アイコンまたはフラグを使用します。アイコンまたはフラグが視覚的にわかりやすく、一般的に理解されていることを確認して、すべてが明確であることを確認します。
- 便利な配置:言語切り替えツールをWebサイトの目立つ位置に配置します。すべてのページで一貫した場所に配置するのが理想的です。一般的な場所には、ヘッダー、フッター、ナビゲーションメニューなどがあります。翻訳ツールがはっきりと見え、簡単にアクセスできることを確認してください。
- Language label on each country flag: clearly label each language option in the appropriate language. For example, use “English” for English, “Español” for Spanish, “Deutsch” for German, and so on. This helps users identify and select the desired language easily.
- 革新的なデザイン:翻訳ツールのデザインは革新的であるべきです。言語の選択を示すために馴染みのあるシンボルやテキストを使用してください。たとえば、英語には「EN」、インドネシア語には「ID」を使用できます。言語切り替えツールがページ上の他の要素から際立っていることを確認してください。たとえば、異なる色を使用したり、ハイライト表示したりします。
- 簡単な切り替え: デフォルトの言語がユーザーの設定と一致しない場合に、別の言語に簡単に切り替えられるようにします。言語選択にドロップダウンメニュー、フラグ/アイコンリスト、トグルボタンを使用しないようにします。
- レスポンシブデザイン:言語切り替えツールがレスポンシブで、さまざまなデバイスや画面サイズでうまく機能することを確認してください。デスクトップ、スマートフォン、タブレットで機能をテストし、すべてのユーザーがスムーズに使用できるようにします。
