Craft CMSで言語スイッチャーを設定することは、グローバルなオーディエンスにリーチしようとするすべてのウェブサイトにとって重要な機能です。今日’ s グローバリゼーション時代において、複数の言語間をシームレスに切り替える能力は緊急のニーズです。.
言語スイッチャーを設定する Craft CMS上での設定は、さまざまな国からの訪問者のアクセシビリティを向上させ、検索エンジンのランキングを改善し、グローバルなブランド信頼を構築できます。複雑に聞こえるかもしれませんが、このステップバイステップガイドは、Craft CMSのウェブサイトでスムーズかつ効率的に実行するのに役立ちます。
Craft CMSで言語スイッチャーを設定する重要性
Craft CMSで言語スイッチャーを設定する方法に取り組む前に、let’s まず言語スイッチャーを設定する重要性について議論しましょう。以下にいくつか挙げます。.
- より良いユーザー体験: 言語スイッチャーは訪問者が好みの言語でコンテンツに簡単にアクセスできるようにし、ウェブサイトの理解とエンゲージメントを向上させます。
- 直帰率の低減： 希望する言語が見つからない訪問者は、すぐにサイトを離脱する可能性があります。複数の言語を提供する言語スイッチャーは、訪問者がサイトを離れるのを防ぐことができます。
- コンバージョンの向上： 製品の詳細、ポリシー、購入プロセスを自分の言語で理解することで、訪問者が購入したり他の行動を取ったりする意欲が高まります。
- 多言語SEOの最適化： 検索エンジンはウェブサイトのランキング時にユーザーエクスペリエンス要因を考慮します。ユーザーフレンドリーな言語スイッチャーはあなたの 多言語SEO ランキングは、訪問者が自分の言語でコンテンツにアクセスしやすくすることで向上します。コンテンツを正確に翻訳することは、検索エンジンに対して、あなたのサイトがさまざまな言語の異なるクエリに対して関連性があるというポジティブなシグナルを送ります。
Craft CMSで言語スイッチャーを設定する方法
多言語対応のCraft CMSウェブサイトで言語スイッチャーを使用する重要性を理解した後、let’s どのように行うかを議論しましょう。通常、ウェブサイト翻訳サービスはこの機能を提供しており、ニーズに合わせてカスタマイズできます。.
しかし、すべての翻訳サービスが簡単にカスタマイズでき、ユーザーフレンドリーな言語スイッチャーを提供しているわけではありません。そのため、さまざまなフレームワークに対応し、柔軟な言語スイッチャー機能を提供する自動翻訳サービスを選択することが重要です。.
これらの基準を満たすサービスの一つはLinguiseです。Linguiseは、簡単にカスタマイズ可能でユーザーフレンドリーな言語スイッチャー機能を提供し、うまく Craft CMSと統合できます。
LinguiseとCraft CMSフレームワークのシームレスな統合を利用すれば、マルチリンガルアプリケーションに言語スイッチャーを簡単に追加できます。Linguise’の高度な機能とユーザーフレンドリーなインターフェースにより、Craft CMSサイト上で言語スイッチャーを設定・維持することがはるかに簡単になります。.
以下は手順です： 多言語対応のCraft CMSウェブサイトにLinguiseをインストールする そして言語スイッチャーを設定します。
#1: 無料のLinguiseアカウントを登録する
無料のLinguiseアカウントに登録する そして、開始するための無料の1か月トライアルの特典を受け取れます。メールアドレスを入力してユーザー名とパスワードを生成してください。
トライアル期間中、あなた’ll はLinguiseが提供するすべての魅力的な機能にアクセスできます。あなた’ll はトライアルの終了時にLinguiseのダッシュボードへ案内されます。.
#2: Craft CMS のドメインウェブサイトを追加
Linguise アカウントが作成されると、ダッシュボードにリダイレクトされ、Craft CMS のウェブサイトドメインを入力します。選択 “Add domain” と提供されたフィールドを完了してください：
- アカウント
- URL
- 使用プラットフォーム (Craft CMS)
- デフォルト言語
- 翻訳言語
- URL を翻訳
- 動的コンテンツ翻訳
API キーを取得できます。次のステップで貼り付けてください。.
#4: Linguise スクリプトをアップロード
次に、あなたは’ Craft CMS がインストールされているサーバーに Linguise 翻訳スクリプトをアップロードする必要があります。.
PHP-JS 翻訳スクリプトをダウンロードし、解凍して、Craft CMS のインストール先のルートディレクトリにアップロードしてください。.
スクリプトが website’ のルートディレクトリに配置され、Craft CMS のファイルがある場所で、フォルダ名が元の “linguise” のままであることを確認してください。
その後、サーバーにアップロードした Configuration.php ファイルに Linguise API キーを挿入してください。ファイルを編集用に開き、引用符内に API キーを貼り付け、テキスト REPLACE_BY_YOUR_TOKEN を置き換えます。.
#5: 有効化 & カスタマイズ言語スイッチャー
Linguise の JS スクリプトリンクは、フラッグ付きの言語スイッチャーを表示し、SEO 効果のために HTML ヘッダーに代替 URL を含める必要があります。.
スクリプトリンクを取得するには、Linguise ダッシュボード内のドメイン設定に移動し、そこから提供されたスクリプトリンクをコピーしてください。.
このコードを Craft CMS に組み込む簡単な方法は、テンプレートのインデックスに追加することです。/template フォルダーにアクセスし、インデックスファイルを編集してヘッダーセクションにスクリプトリンクを含めてください。.
言語スイッチャー（希望する言語を選択するためのフラッグポップアップで表されます）を表示するには、ウェブサイト設定の最後に提供されたコードをコピーし、HTMLページの<head>に貼り付けてロードできます。この操作により、フラッグ言語スイッチャーが自動的にロードされます。.
言語スイッチャーは最初にデフォルト形式で表示されますが、パーソナライズできます。Linguise ダッシュボードからアクセスして言語スイッチャーをカスタマイズします 設定 > 言語フラッグ表示。このセクションには、メイン表示、言語名、デザイン要素など、さまざまなカスタマイズオプションが含まれています。
#6 メイン表示を構成する
言語スイッチャーの設定を開始するには、次の場所へ移動します “設定” > “言語フラッグ表示” セクションは Linguise ダッシュボード内にあります。
このセクションでは、いくつかの設定をカスタマイズできます。まず、メインの表示設定があり、さまざまな要素を変更できます。.
- フラッグアイコンのスタイル： 横並び表示、ドロップダウンメニュー、またはポップアップから選択できます。
- 位置： この設定は、ウェブサイト上の言語スイッチャーの配置を決定します。位置オプションは複数あり、訪問者がアクセスしやすいものを選択してください。
#7 フラッグデザインを設定
メインの表示設定を調整したら、表示されているフラッグのデザインをカスタマイズできます。.
- 言語名の表示: 国名または言語自体に基づいて言語名を表示できます。例えば、“French”や“Français.”を表示できます。
- 英語フラッグの種類: この機能は、米国英語や英国英語のように複数のバリエーションがある言語に役立ちます。It’s also applicable to Spanish, Taiwanese, German, and Portuguese。
- フラッグスタイル: このオプションでは、フラッグアイコンの形状（丸形または長方形）を選択できます。
#8 色とサイズを設定
フラッグデザイン設定が完了したら、フラッグの色とサイズをカスタマイズできます。以下は調整可能な設定です。.
- フラッグのボーダー半径: 長方形のフラッグスタイルのボーダー半径をピクセル単位で調整します。
- 言語名の色: 名前を表示するデフォルトのテキスト色を選択します。
- ポップアップ言語の色: ポップアップまたはドロップダウン領域の言語タイトルテキストの色を定義します。
- フラッグサイズ: フラッグアイコンのサイズを変更します。
- 言語名ホバー色： ユーザーが言語名にマウスオーバーしたときに表示されるテキストカラーを指定します。
- ポップアップ言語ホバー色: ポップアップまたはドロップダウン領域でユーザーが言語タイトルにホバーしたときに表示されるテキスト色を決定します。
#9 ボックスシャドウを設定
最後に、フラッグボックスの影設定を調整できます。最初のオプションは、ウェブサイトに表示される各フラッグアイコンに影効果を追加することを可能にします。次のオプションは、ユーザーが言語フラッグ上にマウスをホバーしたときの影効果を管理します。.
必要な調整をすべて行ったら、保存ボタンをクリックしてカスタマイズ変更を適用してください。その後、Craft CMS のウェブサイトに移動し、設定が正常に適用されたことを確認します。これが言語スイッチャーの表示イメージです。.
セットアッププロセスが完了したら、Craft CMS の多言語ウェブサイトで言語スイッチャーの機能を確認できます。.
その後、 Craft CMS を自動的に翻訳する 他の言語（例：ドイツ語）にウェブサイトを翻訳します。
Craft CMS の言語スイッチャーを最適化するための5つのヒント
Craft CMS の多言語ウェブサイトで言語スイッチャーを設定したら、重要なのは以下を理解することです 言語セレクターを設計するためのベストプラクティス そして、そのパフォーマンスはサイトと訪問者の両方に利益をもたらします。
認識しやすい言語フラッグロゴを使用する
訪問者が自分の好む言語オプションをすぐに識別し選択できるよう、普遍的に認識されている言語アイコンや旗を使用することは重要です。使用するアイコンや旗は明確で、色のコントラストが良く、異なる文化圏でも広く理解されるようにして、混乱や曖昧さを避けてください。.
親しみやすいシンボルやアイコンは、直感的でユーザーフレンドリーな体験を作り出し、訪問者が希望する言語バージョンへ簡単にナビゲートできるようにします。It’ は、誤解や混乱を避けるために、普遍的に知られているアイコンや旗を選ぶことが非常に重要です。.
言語名と旗の使用
フラッグだけを使用するだけでなく、フラッグと元の言語名の両方を組み合わせることを検討することが望ましいです。このアプローチは、いくつかの言語が異なるフラッグを持つ複数の国で話されているため、混乱を防ぐのに役立ちます。.
言語名を直接使用することで曖昧さがなくなり、訪問者が誤解なく希望する言語を明確に識別し選択できるようになります。さらに、言語名の使用は文化的多様性に対してより包括的で敬意を示すことができます。.
言語切替ボタンを戦略的に配置する
Let’s 言語切替ボタンを目立ち、かつアクセスしやすい領域に配置しましょう。標準的な配置場所にはヘッダー、フッター、またはメインナビゲーションメニューが含まれます。これらの場所はほとんどのインターネットユーザーにとって直感的で、言語オプションを検索する際の期待に合致しています。.
すべてのページで一貫した配置により、訪問者はエントリーポイントや閲覧する特定のページに関係なく、言語切替ボタンに簡単にアクセスできるようになります。この一貫した配置は、スムーズで予測可能なユーザー体験の創出に役立ちます。.
レスポンシブな言語切替スイッチャーのデザインを実装する
言語切替ボタンがレスポンシブで、デスクトップ、タブレット、スマートフォンを含むさまざまなデバイスや画面サイズで適切に機能することを確認してください。異なるデバイスや画面解像度でテストし、要素が切れたり重なったりせず、シームレスなユーザー体験が得られるようにします。.
レスポンシブデザインにより、訪問者は使用しているデバイスから言語オプションに簡単にアクセスでき、言語切替のアクセシビリティと利便性が向上します。.
ページ間で言語切替スイッチャーが一貫していることを確認してください
言語スイッチャーがウェブサイト全体で一貫した外観と動作を保つようにしてください。ユーザーは、閲覧しているページやコンテンツに関係なく、スムーズに言語を切り替えられるべきです。一貫性は、統合されたユーザー体験を提供するだけでなく、言語オプションのアクセシビリティと利用可能性を強化し、信頼と自信を築きます。 多言語ウェブサイト。
言語スイッチャーの不整合は、ユーザーを混乱させ苛立たせ、結果としてウェブサイトから離脱させる可能性があります。.
Linguise を使用して Craft CMS に言語スイッチャーを設定しましょう！
この段階で、Craft CMS の多言語サイト用に言語スイッチャーを設定していることを認識すべきです。言語スイッチャーを導入することでさまざまな利点が得られ、前述のポイントに基づいて細かく調整することが可能です。.
言語スイッチャーの最適化は、全体的なユーザー体験を大幅に向上させることができます。次に、 Linguise アカウントにサインアップ、Craft CMS ウェブサイトと統合し、言語スイッチャーを微調整してユーザー体験をさらに向上させます。
