Craft CMS で言語スイッチャーを設定することは、グローバルなオーディエンスへのリーチを目指すあらゆるウェブサイトにとって極めて重要な機能です。グローバル化が進む現代において、複数の言語をシームレスに切り替えられることは喫緊のニーズです。.
言語切り替え機能を設定する と、 Craft CMS は、さまざまな国の訪問者のアクセシビリティを向上させ、検索エンジンのランキングを改善し、グローバルなブランド信頼を構築することができます。複雑に思えるかもしれませんが、このステップバイステップのガイドが、あなたの Craft CMS ウェブサイトでスムーズかつ効率的に行うお手伝いをします。
Craft CMS で言語切り替えを設定する重要性
Craft CMSで言語スイッチャーを設定する方法を詳しく説明する前に、まず言語スイッチャーを設定する重要性についてお話ししましょう。その理由のいくつかをご紹介します。.
- ユーザーエクスペリエンスの向上： 言語切り替え機能により、訪問者は好みの言語でコンテンツに簡単にアクセスでき、ウェブサイトへの理解とエンゲージメントが高まります。
- 直帰率の削減： 希望する言語が見つからない訪問者は、すぐにあなたのウェブサイトを離れてしまう可能性があります。複数の言語を提供する言語切り替え機能は、訪問者がサイトを離れるのを防ぐことができます。
- コンバージョンの向上： 製品の詳細、ポリシー、購入プロセスを母国語で理解できることで、訪問者の購入やその他のアクションを促すことができます。
- 多言語SEOの最適化： 検索エンジンはウェブサイトのランキングを決定する際にユーザーエクスペリエンスの要素を考慮します。ユーザーフレンドリーな言語切り替え機能は、訪問者が自分の言語でコンテンツにアクセスしやすくすることで、 多言語SEO のランキングを向上させることができます。コンテンツを正確に翻訳することも、あなたのサイトがさまざまな言語の多様なクエリに関連しているというポジティブなシグナルを検索エンジンに送ることになります。
Craft CMSで言語スイッチャーを設定する方法
多言語の Craft CMS ウェブサイトで言語切り替え機能を使う重要性を理解したところで、その設定方法について説明します。通常、ウェブサイト翻訳サービスはこの機能を提供しており、ニーズに合わせてカスタマイズできます。.
ただし、すべての翻訳サービスが、簡単にカスタマイズできてユーザーフレンドリーな言語スイッチャーを提供しているわけではありません。そのため、さまざまなフレームワークに対応し、柔軟な言語スイッチャー機能を提供する自動翻訳サービスを選ぶことが重要です。.
これらの基準を満たすサービスの1つが Linguiseです。 Linguise は、簡単にカスタマイズできてユーザーフレンドリーな言語切り替え機能を提供しており、 統合することもできます Craft CMS。
Linguise と Craft CMS フレームワークのシームレスな統合を利用することで、多言語アプリケーションに言語切り替え機能を簡単に追加できます。 Linguiseの高度な機能と使いやすいインターフェースにより、 Craft CMS ウェブサイトでの言語切り替え機能の設定と維持がはるかに簡単になります。.
以下は、多言語の Linguiseをインストールし、 Linguise 言語スイッチャーを設定する手順です。 Craft CMS ウェブサイトに
#1：無料の Linguise アカウントを登録する
無料の Linguise アカウント に登録して、1か月間の無料トライアルを利用して始めましょう。メールアドレスを入力するだけで、ユーザー名とパスワードが生成されます。
トライアル期間中は、 Linguise が提供するすべての魅力的な機能にアクセスできます。トライアル終了後は、 Linguise のダッシュボードに移動します。.
#2: ドメインウェブサイト Craft CMS を追加する
Linguise Linguise アカウントを作成すると、ダッシュボードに移動して Craft CMS ウェブサイトのドメインを入力するよう求められます。 「ドメインを追加」 を選択し、表示される項目を入力してください：
- アカウント
- URL
- 使用プラットフォーム（Craft CMS）
- デフォルト言語
- 翻訳言語
- URLを翻訳する
- 動的コンテンツの翻訳
APIキーを取得できます。次のステップで貼り付ける必要があります。.
#4: Linguise スクリプトをアップロードする
次に、 Linguise の翻訳スクリプトを、 Craft CMS がインストールされているサーバーにアップロードする必要があります。.
PHP-JS翻訳スクリプトをダウンロードして解凍し、 Craft CMS インストールのルートディレクトリにアップロードします。.
スクリプトは、 Craft CMS ファイルが置かれているウェブサイトのルートディレクトリに配置し、フォルダ名は元の「linguise」のままにしてください。
その後、サーバーにアップロードしたConfiguration.phpファイルに Linguise APIキーを挿入します。ファイルを開いて編集し、引用符内にAPIキーを貼り付け、REPLACE_BY_YOUR_TOKENというテキストを置き換えてください。.
#5: 言語スイッチャーを有効化してカスタマイズする
Linguise のJSスクリプトリンクは、 Craft CMS のすべてのページに組み込む必要があります。これにより、旗付きの言語切り替えボタンを表示し、SEO効果のためにHTMLヘッダーに代替URLを含めることができます。.
スクリプトリンクを取得するには、 Linguise ダッシュボード内のドメイン設定に移動し、そこに表示されているスクリプトリンクをコピーしてください。.
このコードを Craft CMS に組み込む簡単な方法は、テンプレートのindexに追加することです。/templateフォルダにアクセスし、indexファイルを編集して、ヘッダーセクションにスクリプトリンクを含めます。.
希望する言語を選択するためのフラッグポップアップで表される言語スイッチャーを表示するには、ウェブサイト設定の最後に提供されたコードをコピーし、HTMLページのheadに貼り付けて読み込むことができます。この操作により、フラッグ言語スイッチャーが自動的に読み込まれるようになります。.
言語切り替えツールは最初はデフォルトの形式で表示されますが、カスタマイズすることができます。言語切り替えツールは、 Linguise ダッシュボードの 設定 > 言語フラグの表示 からカスタマイズできます。このセクションには、メイン表示、言語名、デザイン要素など、さまざまなカスタマイズオプションが含まれています。
#6 メイン表示の設定
言語切り替えの設定を開始するには、セクションに移動します。 Linguise ダッシュボード内の「設定」>「言語フラグの表示」
このセクションでは、いくつかの設定をカスタマイズできます。まず、メインの表示設定があり、次のようなさまざまな要素を変更できます。.
- 国旗アイコンのスタイル： 並べて表示、ドロップダウンメニュー、ポップアップから選択できます。
- 位置： この設定は、ウェブサイト上の言語切り替えボタンの配置を決定します。位置のオプションはいくつかあるため、訪問者がアクセスしやすいものを選択してください。
#7 フラッグのデザインを設定する
主要な表示設定を調整したら、表示される旗のデザインをカスタマイズすることができます。.
- 言語名の表示： 言語名は、国名または言語自体のいずれかに基づいて表示できます。たとえば、「French」または「Français」と表示できます。
- 英語の国旗タイプ： この機能は、アメリカ英語やイギリス英語など、複数のバリエーションを持つ言語に役立ちます。スペイン語、台湾語、ドイツ語、ポルトガル語にも適用できます。
- 旗のスタイル: このオプションでは、旗アイコンの形状を丸型または長方形から選択できます。
#8 色とサイズを設定する
フラグのデザイン設定が完了したら、フラグの色とサイズのカスタマイズに進むことができます。以下は調整可能な設定の一部です。.
- 国旗の角丸: 長方形の国旗スタイルの角丸をピクセル単位で調整します。
- 言語名の色： 名前を表示するためのデフォルトのテキスト色を選択します。
- ポップアップ言語の色： ポップアップまたはドロップダウンエリア内の言語タイトルテキストの色を定義します。
- フラグのサイズ: フラグアイコンのサイズを変更します。
- 言語名のホバーカラー： ユーザーが言語名にホバーしたときに表示されるテキストの色を指定します。
- ポップアップ言語ホバー色： ポップアップまたはドロップダウン領域で言語タイトルにカーソルを合わせたときに表示されるテキストの色を指定します。
#9 ボックスシャドウを設定する
最後に、フラッグボックスのシャドウ設定を調整できます。最初のオプションでは、ウェブサイトに表示される各フラッグアイコンにシャドウ効果を追加できます。次のオプションでは、ユーザーが言語フラッグにマウスをホバーしたときのシャドウ効果を管理します。.
必要な調整をすべて行ったら、Saveボタンをクリックしてカスタマイズ変更を適用します。その後、 Craft CMS のウェブサイトに移動して、設定が正常に適用されたことを確認してください。言語スイッチャーはおおよそこのように表示されます。.
セットアッププロセスを完了すると、 Craft CMS の多言語ウェブサイトで言語切り替えの機能を確認できます。.
次に、 自動翻訳します Craft CMS ウェブサイトをドイツ語などの他の言語に。
Craft CMSの言語切り替えを最適化する5つのヒント
Craft CMSの多言語ウェブサイトで言語切り替え機能を設定したら、 Craft CMS 言語セレクターのデザインに関するベストプラクティスと、そのパフォーマンスを理解することが重要です。これにより、サイトと訪問者の両方にメリットがあります。 言語セレクターをデザインするためのベストプラクティス とそのパフォーマンスを理解することは、サイトと訪問者の両方に利益をもたらします。
一目でわかる言語旗のロゴを使用する
訪問者が好みの言語オプションをすばやく見つけて選択できるよう、世界的に認知された言語アイコンや国旗を使用することが重要です。使用するアイコンや国旗は明確で、十分な色のコントラストがあり、混乱や曖昧さを避けるために異なる文化圏でも広く理解されるものにしてください。.
見慣れた記号やアイコンは、直感的で使いやすい体験を生み出し、訪問者が目的の言語版へ簡単に移動できるようにします。誤解や混乱を避けるため、広く知られているアイコンや国旗を選ぶことが非常に重要です。.
言語名とフラッグを使用する
旗のみを使用するだけでなく、旗と元の言語名の両方を組み合わせることを検討することをお勧めします。このアプローチは、一部の言語が異なる旗を持つ複数の国で話されているため、混乱を避けるのに役立ちます。.
言語名を直接使用することで曖昧さがなくなり、訪問者が誤解することなく希望する言語を明確に識別して選択できるようになります。さらに、言語名を使用することは、文化的多様性をより包括的かつ尊重するものとなります。.
言語切り替えボタンを戦略的に配置する
言語切り替えボタンは、ウェブサイト上で目立つ、アクセスしやすい場所に配置しましょう。標準的な配置場所としては、ヘッダー、フッター、メインナビゲーションメニューなどがあります。これらの場所はほとんどのインターネットユーザーにとって直感的であり、言語オプションを探す際の期待にも合致します。.
すべてのページで一貫した配置にすることで、訪問者がどの入口から来ても、またどのページを訪れても、言語切り替え機能に簡単にアクセスできるようになります。この一貫した配置は、スムーズで予測可能なユーザー体験を生み出すのに役立ちます。.
レスポンシブな言語切り替え機能のデザインを実装する
言語切り替えボタンがレスポンシブで、デスクトップ、タブレット、スマートフォンなど、さまざまなデバイスや画面サイズで適切に機能することを確認してください。異なるデバイスや画面解像度でテストし、要素が切れたり重なったりすることなく、シームレスなユーザー体験を提供できるようにしましょう。.
レスポンシブデザインにより、訪問者は使用するどのデバイスからでも言語オプションに簡単にアクセスでき、言語切り替えのアクセシビリティと利便性が向上します。.
言語切り替えがページ間で一貫していることを確認する
Ensure the language switcher maintains consistent appearance and behaviour across your website. Users should be able to switch languages smoothly, regardless of the page they are on or the content they are viewing. Consistency not only provides a cohesive user experience but also strengthens the accessibility and availability of language options, building trust and confidence in your multilingual website.
言語スイッチャーに一貫性がないと、ユーザーが混乱し、いらいらして、ウェブサイトから離れてしまう可能性があります。.
Linguiseで Craft CMS に言語スイッチャーを設定しましょう！
この時点で、 Craft CMS 多言語ウェブサイトの言語スイッチャーを設定していることを認識する必要があります。言語スイッチャーを設置することでさまざまな利点が得られ、前述のポイントに基づいて微調整することができます。.
言語切り替え機能を最適化することで、全体的なユーザー体験を大幅に向上させることができます。次に、 Linguise アカウントに登録し、お使いの Craft CMS ウェブサイトに統合して、言語切り替え機能を微調整し、ユーザー体験をさらに高めましょう。
