その後、サーバーにアップロードしたConfiguration.phpファイルに Linguise APIキーを挿入します。ファイルを開いて編集し、引用符内にAPIキーを貼り付け、REPLACE_BY_YOUR_TOKENというテキストを置き換えます。.
#5: 言語スイッチャーを有効化 & カスタマイズする
Linguise のJSスクリプトリンクは、フラグ付きの言語切り替えを表示し、SEO効果のためにHTMLヘッダーに代替URLを含めるために、 Craft CMS のすべてのページに組み込む必要があります。.
スクリプトリンクを取得するには、 Linguise ダッシュボード内のドメイン設定に移動し、提供されたスクリプトリンクをそこからコピーします。.
このコードを Craft CMS に組み込む簡単な方法は、テンプレートのインデックスに追加することです。/templateフォルダにアクセスし、indexファイルを編集して、ヘッダーセクションにスクリプトリンクを含めます。.
希望する言語を選択するためのフラグポップアップで表される言語スイッチャーを表示するには、ウェブサイト設定の最後に提供されているコードをコピーして、HTMLページのheadに貼り付けることで読み込むことができます。この操作により、フラグ言語スイッチャーが自動的に読み込まれるようになります。.
言語切り替えは最初はデフォルトの形式で表示されますが、カスタマイズできます。言語切り替えは Linguise ダッシュボードから 設定 > 言語フラグの表示にアクセスしてカスタマイズできます。このセクションには、メイン表示、言語名、デザイン要素など、さまざまなカスタマイズオプションが含まれています。
#6 メインディスプレイの設定
言語スイッチャーの設定を開始するには、セクションに移動します。 Linguise ダッシュボード内の「設定」>「言語フラグの表示」
このセクションでは、いくつかの設定をカスタマイズできます。まず、メイン表示設定があり、次のようなさまざまな要素を変更できます。.
- 国旗アイコンのスタイル： 並列表示、ドロップダウンメニュー、またはポップアップから選択できます。
- 位置： この設定は、ウェブサイト上の言語切り替えボタンの配置を決定します。複数の位置オプションがあるため、訪問者がアクセスしやすいものを選択してください。
#7 フラグデザインを設定する
メインの表示設定を調整したら、表示される国旗のデザインをカスタマイズできます。.
- 言語名の表示： 国名または言語自体に基づいて言語名を表示できます。たとえば、「フランス語」または「Français」と表示できます。
- 英語の旗の種類： この機能は、アメリカ英語やイギリス英語のように複数のバリエーションがある言語に役立ちます。スペイン語、台湾語、ドイツ語、ポルトガル語にも適用できます。
- 旗のスタイル： このオプションでは、旗アイコンの形状を丸型または長方形から選択できます。
#8 色とサイズを設定する
旗のデザイン設定が完了したら、旗の色とサイズをカスタマイズできます。以下は調整可能な設定の一部です。.
- 旗の角丸: 長方形の旗スタイルの角丸をピクセル単位で調整します。
- 言語名の色： 名前を表示するためのデフォルトのテキスト色を選択します。
- ポップアップ言語の色： ポップアップまたはドロップダウンエリアの言語タイトルテキストの色を定義します。
- フラグのサイズ： フラグアイコンのサイズを変更します。
- 言語名ホバーカラー: 言語名にマウスオーバーしたときに表示されるテキストの色を指定します。
- ポップアップ言語ホバー色： ポップアップまたはドロップダウン領域で言語タイトルにホバーしたときに表示されるテキストの色を指定します。
#9 ボックスシャドウを設定する
最後に、フラッグボックスのシャドウ設定を調整できます。最初のオプションでは、ウェブサイトに表示される各フラッグアイコンにシャドウ効果を追加できます。次のオプションでは、ユーザーが言語フラッグにマウスをホバーしたときのシャドウ効果を管理します。.
必要な調整をすべて完了したら、保存ボタンをクリックしてカスタマイズ変更を適用します。その後、 Craft CMS のウェブサイトに移動して、設定が正常に適用されたことを確認してください。言語スイッチャーはおおよそこのように表示されます。.
セットアッププロセスを完了すると、 Craft CMS の多言語ウェブサイトで言語切り替え機能の動作を確認できます。.
Craft CMSで言語切り替えを最適化するための5つのヒント
Craft CMSの多言語ウェブサイトで言語切り替え機能を設定したら、 Craft CMS 言語セレクターのデザインに関するベストプラクティスとそのパフォーマンスを理解することが重要です。これにより、サイトと訪問者の両方にメリットがあります。
誰にでもわかりやすい言語旗のロゴを使用する
訪問者が素早く自分の好みの言語オプションを識別して選択できるように、広く認識されている言語アイコンや国旗を使用することが重要です。使用するアイコンや国旗は明確で、十分な色のコントラストがあり、混乱や曖昧さを避けるために異なる文化圏でも広く理解されるものにしてください。.
見慣れた記号やアイコンは、直感的でユーザーフレンドリーな体験を生み出し、訪問者が目的の言語版へ簡単に移動できるようにします。誤解や混乱を避けるために、世界中で知られているアイコンや国旗を選ぶことが非常に重要です。.
言語名と国旗を使用する
旗のみを使用するだけでなく、旗と元の言語名の両方を組み込むことを検討することをお勧めします。このアプローチは、一部の言語が異なる旗を持つ複数の国で話されているため、混乱を避けるのに役立ちます。.
言語名を直接使用すると曖昧さがなくなり、訪問者が誤解することなく希望する言語を明確に識別して選択できるようになります。さらに、言語名を使用することで、文化の多様性をより包括的かつ尊重することができます。.
言語切り替えボタンを戦略的に配置する
言語切り替えボタンは、ウェブサイト上で目立つ、アクセスしやすい場所に配置しましょう。標準的な配置場所には、ヘッダー、フッター、メインナビゲーションメニューがあります。これらの場所は、ほとんどのインターネットユーザーにとって直感的であり、言語オプションを探す際の期待に沿うものです。.
すべてのページで一貫した配置にすることで、訪問者がどのページからアクセスしても、言語切り替え機能に簡単にアクセスできるようになります。この一貫した配置は、スムーズで予測可能なユーザー体験を生み出すのに役立ちます。.
レスポンシブな言語切り替えデザインを実装する
言語切り替えボタンがレスポンシブで、デスクトップ、タブレット、スマートフォンなど、さまざまなデバイスや画面サイズで適切に機能することを確認してください。異なるデバイスや画面解像度でテストし、要素が切れたり重なったりすることなく、シームレスなユーザーエクスペリエンスを確保しましょう。.
レスポンシブデザインにより、訪問者は使用するデバイスに関係なく言語オプションに簡単にアクセスでき、言語切り替えのアクセシビリティと利便性が向上します。.
言語スイッチャーがページ間で一貫していることを確認します
言語切り替え機能がウェブサイト全体で一貫した外観と動作を維持するようにしてください。ユーザーは、どのページにいても、どのコンテンツを閲覧していても、スムーズに言語を切り替えられるべきです。一貫性は、まとまりのあるユーザー体験を提供するだけでなく、言語オプションのアクセシビリティと可用性を強化し、 多言語ウェブサイト
言語スイッチャーの一貫性が欠けていると、ユーザーが混乱し、フラストレーションを感じて、ウェブサイトを離れてしまう可能性があります。.
新しい市場を開拓する準備はできていますか？リスクフリーの1ヶ月トライアルで、当社の自動翻訳サービスを無料でお試しください。クレジットカードは不要です！
Craft CMS で Linguiseを使って言語スイッチャーを設定しましょう！
この時点で、 Craft CMS 多言語ウェブサイトの言語スイッチャーを設定していることを認識する必要があります。言語スイッチャーを確立することで、さまざまな利点が得られ、前述のポイントに基づいて微調整することができます。.
言語スイッチャーを最適化することで、全体的なユーザーエクスペリエンスを大幅に向上させることができます。次に、 Linguise アカウントに登録し、 Craft CMS のウェブサイトと統合して、言語スイッチャーを微調整し、ユーザーエクスペリエンスをさらに向上させましょう。
