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