Craft CMS に言語スイッチャーを設定することは、世界中のユーザーにリーチすることを目指すウェブサイトにとって不可欠な機能です。今日のグローバル化時代において、複数の言語をシームレスに切り替える機能は喫緊の課題です。.
Craft CMSに言語スイッチャーを設定すると Craft CMSでスムーズかつ効率的に設定できます。
Craft CMSで言語スイッチャーを設定することの重要性
Craft CMSで言語スイッチャーを設定する方法を詳しく説明する前に、まず言語スイッチャーを設定することの重要性について説明しましょう。以下にいくつか例を挙げます。.
- より優れたユーザー エクスペリエンス:言語切り替え機能により、訪問者は好みの言語でコンテンツに簡単にアクセスできるようになり、Web サイトに対する理解と関与が向上します。
- 直帰率の低減：希望する言語が見つからない訪問者は、ウェブサイトをすぐに離脱してしまう可能性があります。複数の言語に対応した言語スイッチャーを導入すれば、サイトからの離脱を防ぐことができます。
- コンバージョンの増加:製品の詳細、ポリシー、購入プロセスをその言語で理解することで、訪問者が購入したり、その他のアクションを取ったりすることを促すことができます。
- 多言語SEOの最適化：検索エンジンはウェブサイトのランキング付けにおいて、ユーザーエクスペリエンスを考慮します。ユーザーフレンドリーな言語スイッチャーは、多言語SEOランキングの向上につながります。コンテンツを正しく翻訳することで、検索エンジンに対し、サイトが様々な言語のクエリに関連性が高いという肯定的なシグナルを送ることができます。
Craft CMSで言語切り替えを設定する方法
多言語対応の Craft CMS ウェブサイトで言語スイッチャーを使用することの重要性を理解した上で、その使い方について説明しましょう。通常、ウェブサイト翻訳サービスではこの機能が提供されており、ニーズに合わせてカスタマイズできます。.
しかし、すべての翻訳サービスが、簡単にカスタマイズでき、ユーザーフレンドリーな言語スイッチャーを提供しているわけではありません。そのため、様々なフレームワークと互換性があり、柔軟な言語スイッチャー機能を備えた自動翻訳サービスを選ぶことが重要です。.
これらの基準を満たすサービスの一つがLinguise。LinguiseLinguise、簡単にカスタマイズでき、ユーザーフレンドリーな言語切り替え機能を提供しており、 Craft CMSとスムーズに統合。
Linguise と Craft CMS フレームワークのシームレスな統合により、多言語アプリケーションに言語スイッチャーを簡単に追加できます。Linguiseの高度 Linguise機能とユーザーフレンドリーなインターフェースにより、 Craft CMS ウェブサイトでの言語スイッチャーの設定と管理がはるかに簡単になります。.
#1: 無料の Linguise アカウントに登録する
#2: ドメインウェブサイトを追加する Craft CMS
Linguiseと、ダッシュボードに移動し、 Craft CMSウェブサイトのドメインを入力します。 「ドメインを追加」、以下のフィールドに入力します。
- アカウント
- URL
- 使用プラットフォーム (Craft CMS)
- デフォルト言語
- 翻訳言語
- URLを翻訳
- 動的コンテンツ翻訳
後続の手順で貼り付ける必要がある API キーを取得できます。.
#4: Linguise スクリプトをアップロードする
次に、 Craft CMS がインストールされているサーバーに Linguise 翻訳スクリプトをアップロードする必要があります。.
PHP-JS 変換スクリプトをダウンロードし、解凍して、 Craft CMS インストールのルート ディレクトリにアップロードします。.
スクリプトが、 Craft CMS ファイルが配置されている Web サイトのルート ディレクトリに配置され、フォルダーが元の名前「linguise」を維持していることを確認します。
その後、サーバーにアップロードしたConfiguration.phpファイルに Linguise APIキーを挿入します。ファイルを開いて編集し、引用符で囲んだAPIキーを貼り付け、「REPLACE_BY_YOUR_TOKEN」というテキストを置き換えます。.
#5: 言語スイッチャーを有効にしてカスタマイズする
フラグ付きの言語スイッチャーを表示し、SEO のメリットのために HTML ヘッダーに代替 URL を含めるには、 Linguise JS スクリプト リンクを Craft CMS のすべてのページに組み込む必要があります。.
スクリプト リンクを取得するには、 Linguise ダッシュボード内のドメイン設定に移動し、そこから提供されているスクリプト リンクをコピーします。.
このコードを Craft CMS に組み込む簡単な方法は、テンプレートのインデックスに追加することです。/templateフォルダにアクセスし、インデックスファイルを編集して、ヘッダーセクションにスクリプトリンクを追加します。.
希望の言語を選択するためのフラグポップアップで表示される言語スイッチャーを表示するには、ウェブサイト設定の最後にあるコードをコピーし、HTMLページのヘッダーに貼り付けることで読み込むことができます。この操作により、フラグ言語スイッチャーが自動的に読み込まれるようになります。.
言語スイッチャーは最初はデフォルトの形式で表示されますが、カスタマイズできます。Linguiseダッシュボードの「設定」>「言語フラグ表示」にアクセスして、言語スイッチャーをカスタマイズできますLinguiseこのセクションには、メイン画面、言語名、デザイン要素など、さまざまなカスタマイズオプションが含まれています。
#6 メインディスプレイを構成する
言語スイッチャーの設定を開始するには、 Linguise内の「設定」>「言語フラグの表示」。
このセクションでは、いくつかの設定をカスタマイズできます。まず、メインの表示設定では、次のようなさまざまな要素を変更できます。.
- フラグアイコンのスタイル:並べて表示、ドロップダウン メニュー、ポップアップから選択できます。
- 位置：この設定は、ウェブサイト上の言語スイッチャーの配置を指定します。配置オプションは複数ありますので、訪問者がアクセスしやすい位置を選択してください。
#7 旗のデザインを設定する
メインの表示設定を調整したら、表示されるフラグのデザインをカスタマイズできます。.
- 言語名の表示：国名または言語自体に基づいて言語名を表示できます。例えば、「French」や「Français」のように表示できます。
- 英語の国旗タイプ：この機能は、アメリカ英語やイギリス英語など、複数のバリエーションを持つ言語に役立ちます。スペイン語、台湾語、ドイツ語、ポルトガル語にも適用されます。
- フラグ スタイル:このオプションを使用すると、フラグ アイコンの形状 (丸型または長方形) を選択できます。
#8 色とサイズを設定する
旗のデザイン設定が完了したら、旗の色とサイズのカスタマイズに進みます。調整可能な設定は以下の通りです。.
- 旗の境界線の半径:長方形の旗のスタイルの境界線の半径をピクセル単位で調整します。
- 言語名の色:名前を表示するためのデフォルトのテキスト色を選択します。
- ポップアップ言語の色:ポップアップまたはドロップダウン領域の言語タイトルテキストの色を定義します。
- 旗のサイズ:旗アイコンのサイズを変更します。
- 言語名ホバーカラー: 言語名にマウスオーバーしたときに表示されるテキストの色を指定します。
- ポップアップ言語のホバーカラー:ユーザーがポップアップまたはドロップダウン領域の言語タイトルにマウスを移動したときに表示されるテキストの色を決定します。
#9 ボックスの影を設定する
最後に、国旗ボックスの影の設定を調整できます。最初のオプションでは、ウェブサイトに表示される各国旗アイコンに影の効果を追加できます。次のオプションでは、ユーザーが言語の国旗にマウスオーバーした際の影の効果を調整できます。.
必要な調整をすべて完了したら、「保存」ボタンをクリックしてカスタマイズを適用します。その後、 Craft CMS ウェブサイトにアクセスし、設定が正常に適用されていることを確認してください。言語スイッチャーの表示は、おおよそ以下のようになります。.
セットアッププロセスが完了すると、 Craft CMS 多言語 Web サイトで言語スイッチャーの機能を確認できます。.
Craft CMSの言語スイッチャーを最適化するための5つのヒント
Craft CMSで言語スイッチャーを設定したらサイトと訪問者の両方にメリットをもたらす言語セレクターの設計とそのパフォーマンスに関するベスト プラクティスを理解することが重要です
簡単に認識できる言語の国旗ロゴを使用する
訪問者が希望の言語を素早く識別し、選択できるように、世界的に認知されている言語アイコンや国旗を使用することが重要です。混乱や曖昧さを避けるため、使用するアイコンや国旗は明瞭で、色のコントラストが良好で、様々な文化圏で広く理解されていることを確認してください。.
馴染みのあるシンボルやアイコンは、直感的でユーザーフレンドリーな体験を提供し、訪問者が希望する言語バージョンに簡単に移動できるようにします。誤解や混乱を避けるために、世界的に知られているアイコンや国旗を選択することが非常に重要です。.
言語名と国旗の使用
国旗のみを使用するだけでなく、国旗と元の言語名の両方を組み込むことを検討することをお勧めします。一部の言語は複数の国で話されており、国旗も異なるため、このアプローチは混乱を避けるのに役立ちます。.
言語名を直接使用することで曖昧さがなくなり、訪問者は誤解することなく希望の言語を明確に識別し、選択できるようになります。さらに、言語名を使用することで、より包括的で文化的多様性を尊重することができます。.
言語切り替えボタンを戦略的に配置する
言語切り替えボタンをウェブサイトの目立つ、アクセスしやすい場所に配置しましょう。標準的な配置場所としては、ヘッダー、フッター、メインナビゲーションメニューなどがあります。これらの場所は、ほとんどのインターネットユーザーにとって直感的で、言語オプションを探す際の期待に合致しています。.
すべてのページで一貫した配置にすることで、訪問者はどのページにアクセスしたかに関わらず、言語スイッチャーに簡単にアクセスできます。この一貫した配置は、スムーズで予測可能なユーザーエクスペリエンスの実現に役立ちます。.
レスポンシブな言語スイッチャーデザインを実装する
言語切り替えボタンがデスクトップ、タブレット、スマートフォンなど、様々なデバイスや画面サイズでレスポンシブかつ適切に機能することを確認してください。様々なデバイスや画面解像度でテストを行い、要素が途切れたり重なったりすることなく、シームレスなユーザーエクスペリエンスを実現してください。.
レスポンシブ デザインにより、訪問者は使用するどのデバイスからでも簡単に言語オプションにアクセスできるようになり、言語切り替えのアクセシビリティと利便性が向上します。.
言語スイッチャーがページ間で一貫していることを確認します
言語スイッチャーの外観と動作は、ウェブサイト全体で統一されていることを確認してください。ユーザーは、現在表示しているページや閲覧中のコンテンツに関係なく、スムーズに言語を切り替えられる必要があります。一貫性は、統一されたユーザーエクスペリエンスを提供するだけでなく、言語オプションのアクセシビリティと可用性を向上させ、多言語ウェブサイトへの信頼と安心感を高めます。
言語スイッチャーに一貫性がないと、ユーザーを混乱させ、イライラさせ、Web サイトを離れてしまう可能性があります。.
