Kirby CMS で言語切り替え機能を設定することは、 海外からの訪問者が あなたのサイトと引き続きやり取りできるようにするための重要な機能です。異なる言語を簡単に切り替えられることは、多くのオンラインプラットフォームにとって必須の要件となっています。
Kirby CMSで言語切り替え機能を設定することで、海外からの訪問者に対するサイトのアクセシビリティを大幅に向上させ、検索エンジンのパフォーマンスを改善し、ブランドへのグローバルな信頼を高めることができます。一見難しそうに思えるかもしれませんが、このガイドでは、 Kirby CMSのウェブサイトでこの機能を効率的に実装する手順を説明し、スムーズでユーザーフレンドリーな多言語体験を実現します。
Kirby CMSで言語切り替え機能を設定する重要性
Kirby CMSに言語切り替え機能を実装することは、単なる機能追加ではありません – ウェブサイトのパフォーマンスとリーチに大きな影響を与える可能性がある戦略的な決断です。Kirby CMSのウェブサイトに言語切り替えを設定すべき主な理由を見ていきましょう。.
- ユーザーエクスペリエンスの向上： 言語切り替え機能により、訪問者は好みの言語でコンテンツにアクセスできるようになり、ウェブサイトの理解度とエンゲージメントが大幅に向上します。
- 直帰率の低下： 自分の言語でコンテンツを見つけられない訪問者は、すぐに離脱する可能性が高いです。複数の言語オプションを提供することで、ユーザーがサイトをさらに探索するよう促します。
- コンバージョン率の向上： ユーザーが製品の詳細、ポリシー、購入プロセスを母国語で理解できると、購入や望ましい行動を起こす可能性が高まります。
- 多言語SEOの強化： 検索エンジンはウェブサイトのランキング時にユーザー体験を考慮します。直感的な言語切り替え機能は、さまざまな言語のコンテンツへの容易なアクセスを可能にし、 多言語SEO のパフォーマンスを向上させることができます。
Kirby CMSで言語スイッチャーを設定する方法
多言語対応のKirby CMSウェブサイトに言語切り替え機能を実装する重要性について考察してきましたので、次はその設定の実践的な側面について詳しく見ていきましょう。多くのウェブサイト翻訳サービスがこの機能を提供していますが、高度にカスタマイズ可能でユーザーフレンドリーな言語切り替え機能を提供するサービスを見つけるのは難しい場合があります。.
さまざまなフレームワークで問題なく動作するだけでなく、柔軟な言語切り替え機能を提供する自動翻訳サービスを選ぶことが重要です。これらの要件を満たす際に際立っているサービスは、 Linguise 自動翻訳ウェブサイトです。その言語切り替え機能は、カスタマイズの容易さとユーザーフレンドリーなインターフェースで知られており、Kirby CMSとの統合に最適な選択肢となっています。
Linguise をKirby CMSにシームレスに組み込むことで、多言語アプリケーションに言語切り替え機能を簡単に追加できます。 Linguiseの高度な機能と直感的なインターフェースにより、Kirby CMSウェブサイトでの言語切り替え機能の設定とメンテナンスが簡素化されます。.
多言語対応のKirby CMSに Linguiseをインストール Linguise する手順に従い 、言語切り替え機能を設定しましょう。
ステップ1： Linguise アカウントを登録する
まず、Kirby CMSのウェブサイトを翻訳用に準備します。これにはKirby CMSの管理ダッシュボードへのアクセスが必要です。次に、無料の Linguise アカウントを作成し、ウェブサイトのドメインを追加します。サブスクリプションプランを選択する前に、30日間の無料トライアルを利用できます。.
ステップ2：Kirby CMSのウェブサイトドメインを追加する
Linguise Linguise アカウントの設定が完了したら、ダッシュボードに移動し、Kirby CMSウェブサイトのドメインを追加します。 “ドメインを追加” をクリックし、以下の詳細を入力してください：
- アカウント
- URL
- プラットフォーム（Kirby CMS）
- デフォルト言語
- 翻訳言語
- URLを翻訳
- 動的コンテンツ翻訳
ステップ3： Linguise スクリプトをアップロードして接続する
Linguise 翻訳スクリプトをダウンロードし、Kirby CMS インストールのルートフォルダにアップロードします。.
スクリプトを解凍し、「linguise」という名前のフォルダがウェブサイトのルートレベルに残っていることを確認してください。.
次に、 Linguise APIキーをサーバー上の`Configuration.php`ファイルにコピーします。ファイルを開き、`REPLACE_BY_YOUR_TOKEN`をAPIキーに置き換えて、変更を保存してください。.
ステップ4：Kirby CMSのURLリライトを設定する
Kirby CMS では URL リライトがデフォルトで有効になっています。有効になっていない場合は、ホスティングプロバイダーを通じて有効にできます。.
言語ごとにURLを設定するには、デフォルトのKirby CMS `.htaccess`ファイル内の`RewriteEngine on`行の直後に、以下のコードを`.htaccess`ファイルに追加してください。.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^(af|sq|am|ar|hy|az|eu|be|bn|bs|bg|ca|ceb|ny|zh-cn|zh-tw|co|hr|cs|da|nl|en|eo|et|tl|fi|fr|fy|gl|ka|de|el|gu|ht|ha|haw|iw|hi|hmn|hu|is|ig|id|ga|it|ja|jw|kn|kk|km|ko|ku|ky|lo|la|lv|lt|lb|mk|mg|ms|ml|mt|mi|mr|mn|my|ne|no|ps|fa|pl|pt|pa|ro|ru|sm|gd|sr|st|sn|sd|si|sk|sl|so|es|su|sw|sv|tg|ta|te|th|tr|uk|ur|uz|vi|cy|xh|yi|yo|zu|zz-zz)(?:$|/)(.*)$ linguise/linguise.php?linguise_language=$1&original_url=$2 [L,QSA]
</IfModule>
ステップ5：言語切り替え機能を有効化＆カスタマイズする
SEO目的でフラグと代替URLを含む言語スイッチャーを表示するには、 Linguise JavaScriptリンクをすべてのKirby CMSページに読み込む必要があります。.
Linguise ダッシュボードのドメイン設定からスクリプトリンクを取得してコピーします。.
Kirby CMS でこのスクリプトを読み込む最も簡単な方法は、ウェブサイトの header.php または <head> セクションに追加することです。手順は以下のとおりです：
- ウェブサイトのルートフォルダにアクセスします。.
- site > snippets > header.php に移動します。
- ヘッダーセクションにスクリプトリンクを含めるために、header.phpファイルを編集します。.
言語切り替えツールは、最初はデフォルトの形式で表示されます。しかし、 言語切り替えツールをカスタマイズ して、 Linguise ダッシュボードで 設定 > 言語の国旗表示 に移動することができます。このセクションでは、メイン表示設定、言語名、デザイン要素など、さまざまなカスタマイズオプションを提供しています。
ステップ6：メインディスプレイを設定する
言語スイッチャーの設定を開始するには、 Linguise ダッシュボードで「設定」>「言語フラグの表示」に移動します。.
このセクションでは、さまざまな設定を調整できます。主な表示設定では、以下のような要素をカスタマイズできます。.
- 国旗アイコンのスタイル： 並列表示、ドロップダウンメニュー、ポップアップから選択できます。
- 位置： ウェブサイト上の言語切り替えボタンの配置を決定します。訪問者が簡単にアクセスできる位置を選択してください。
ステップ7：フラグのデザインを設定する
メインの表示設定を構成した後、表示されるフラグのデザインをカスタマイズします。.
- 言語名の表示: 「French」や「Français」のように、国または言語自体に基づいて言語名を表示することを選択します。
- 英語の国旗タイプ： これは、米国英語や英国英語など複数のバリエーションがある言語に役立ち、スペイン語、台湾語、ドイツ語、ポルトガル語にも適用できます。
- フラグのスタイル: フラグアイコンの形状をラウンドまたは長方形から選択します。
ステップ8: 色とサイズを設定する
フラグのデザインを設定した後、フラグの色とサイズをカスタマイズします。調整できる設定は以下のとおりです。.
- 旗の角丸： 長方形の旗の角丸をピクセル単位で調整します。
- 言語名の色: 言語名を表示するためのデフォルトのテキスト色を選択します。
- ポップアップ言語の色： ポップアップまたはドロップダウンエリアの言語タイトルテキストの色を設定します。
- フラグのサイズ: フラグアイコンのサイズを調整します。
- 言語名ホバーカラー: 言語名にマウスオーバーしたときに表示されるテキストの色を指定します。
- ポップアップ言語ホバーカラー： ポップアップまたはドロップダウンエリアで言語タイトルにカーソルを合わせたときに表示されるテキストの色を定義します。
ステップ9：box-shadowを設定する
最後に、旗のボックスシャドウ設定を調整します。最初のオプションでは、ウェブサイトに表示される各旗アイコンに影の効果を追加できます。2番目のオプションでは、ユーザーが言語の旗にホバーしたときの影の効果を制御します。.
必要な調整を行った後、保存ボタンをクリックして変更を適用します。その後、Kirby CMSのウェブサイトを確認して、設定が正常に実装されたことを確かめます。これにより、言語切り替え機能がどのように表示されるかを確認できます。.
セットアッププロセスが完了すると、Kirby CMSの 多言語ウェブサイトで言語切り替え機能が動作しているのを確認できます。
次に、 Kirby CMSを自動翻訳し 、フランス語などの他の言語にウェブサイトを対応させます。
Kirby CMSで言語切り替えを最適化するための4つのヒント
言語スイッチャーを改善し、グローバルなオーディエンスにとってより効果的にするための4つの重要なヒントをご紹介します。.
#1 明確に識別できる言語フラグアイコンを使用する
言語切り替え機能に、すぐに認識できる言語記号や国旗を取り入れることは、言語をすばやく識別するために重要です。このアプローチにより、訪問者は希望の言語をすばやく見つけて選択でき、直感的なユーザー体験を生み出します。誤解を避けるために、普遍的に理解される指標を選ぶことがポイントです。.
国旗アイコンを実装する際は、小さなサイズでも高品質で容易に識別できるようにしてください。国旗と言語コードを組み合わせて使用し、ユーザーに視覚的およびテキストによる手がかりを提供することを検討してください。.
例:
世界中の目的地をカバーするKirbyベースの旅行ブログを想像してみてください。サイトの言語切り替え機能では、地球アイコンと小さな国旗アイコン、および2文字の言語コードを使用できます。.
🌎 🇺🇸 EN | 🇪🇸 ES | 🇫🇷 FR | 🇩🇪 DE | 🇯🇵 JP
この設定により、ユーザーは国旗または言語コードのどちらを認識しても、自分の言語をすばやく特定できるようになり、全体的なユーザーエクスペリエンスが向上します。.
#2 言語名を国旗と並べて表示する
国旗は視覚的な手がかりとして便利ですが、言語のネイティブ名と組み合わせることで、より明確になります。この戦略は、特に異なる国旗を持つ複数の国で話されている言語において、混乱を防ぐのに役立ちます。.
実際の言語名を表示することで、曖昧さをなくし、訪問者が希望する言語を正確に識別できるようになります。このアプローチは、文化的多様性への尊重を示し、包括性を促進します。.
例:
複数の言語でコースを提供するKirby搭載の教育プラットフォームを考えてみましょう。その言語切り替え機能はこのようになるかもしれません。.
🇺🇸 English | 🇪🇸 Español | 🇫🇷 Français | 🇩🇪 Deutsch | 🇯🇵 日本語
このデザインにより、ユーザーは国旗と言語名をその言語のネイティブスクリプトで同時に確認でき、その言語の話者にとって即座に認識できるようになります。これは、異なる国旗を持つ複数の国で話されているスペイン語や英語のような言語に特に役立ちます。.
#3 言語切り替えボタンを慎重に配置する
言語切り替え機能の配置は、その効果を左右する重要な要素です。ウェブサイト上で目立ち、簡単にアクセスできるようにする必要があります。一般的で効果的な位置には、ヘッダー、フッター、メインナビゲーションメニューなどがあります。.
言語切り替え機能は、サイト内のどのページからでも見つけやすく、アクセスしやすい場所に配置してください。配置を一貫させることで、ユーザーは現在のページに関わらず、言語オプションをすばやく見つけられます。.
例:
たとえば、多国籍建築事務所向けのKirbyベースのポートフォリオウェブサイト。彼らは言語切り替えを次のように実装できます。.
- ヘッダー配置: 言語切り替えは、ヘッダーの右上隅、検索アイコンの隣に配置されています。
- スティッキーナビゲーション： ユーザーがスクロールしてもヘッダーは上部に固定され、言語切り替えが常にアクセス可能になります。
- モバイル最適化： モバイルデバイスでは、言語切り替えはハンバーガーメニューに含まれ、小さな画面を煩雑にすることなく簡単にアクセスできます。
この戦略的な配置により、ユーザーはプロジェクトギャラリーの閲覧中でも、会社の沿革を読んでいるときでも、連絡先情報を確認しているときでも、いつでも簡単に言語を切り替えることができます。.
#4 すべてのページで言語切り替えの一貫性を維持する
言語切り替え機能の外観と機能性をウェブサイト全体で統一することが重要です。ユーザーは、現在のページや閲覧中のコンテンツに関係なく、簡単に言語を切り替えられるべきです。.
この一貫性により、シームレスなユーザー体験が提供され、言語オプションのアクセシビリティが強化され、多言語ウェブサイトへの信頼と自信を築くことができます。.
例:
Kirbyを活用したグローバルに商品を販売するeコマースサイトを考えてみましょう。一貫した言語切り替え戦略をどのように実装するかの例を紹介します。.
- 統一デザイン： 言語切り替えは、商品一覧、個別商品ページ、チェックアウトページを含むすべてのページの右上隅に、「言語」とラベル付けされたドロップダウンメニューとして表示されます。
- コンテンツの保持： ユーザーが言語を切り替えても同じページにとどまりますが、コンテンツは新しく選択された言語で表示されます。例えば、ユーザーが手作りの花瓶の説明を英語で見てからフランス語に切り替えると、同じ商品の詳細がフランス語で表示されます。
- URL構造： 言語を切り替えると、URL構造が一貫して変化します。
英語: www.yourmarket.com/products/blue-ceramic-vase
フランス語: www.yourmarket.com/fr/produits/vase-ceramique-bleu
すべてのページで一貫した体験を提供することで、ユーザーは自信を持って好みの言語でナビゲートし、買い物をすることができ、購入を完了して将来再びサイトに戻る可能性が高まります。.
LinguiseでKirbyウェブサイトに言語切り替え機能を設定しましょう！
Kirby CMSで言語切り替え機能を設定することは、真にグローバルでユーザーフレンドリーなウェブサイトを作成するための重要なステップです。この機能を実装することで、多様な国際的オーディエンスへのデジタルの扉を開き、エンゲージメントの向上、直帰率の低下、サイト全体のパフォーマンス改善が期待できます。.
このプロセスを効率化し、最適な結果を得るために、Kirby CMSウェブサイトには Linguise の使用を検討してください。 Linguise は、Kirby CMSとシームレスに統合する強力でカスタマイズ可能な言語切り替え機能を提供し、多言語戦略を簡単に実装・微調整できるようにします。さあ、 Linguise アカウントを作成し、 Kirby CMSウェブサイトと統合して、ユーザーエクスペリエンスをさらに向上させるために言語切り替え機能をカスタマイズしましょう。
