Kirby CMSで言語スイッチャーを設定することは、海外からの訪問者がサイトを簡単に操作できるようにするための重要な機能です。 異なる言語を簡単に切り替える機能は、多くのオンライン プラットフォームにとって必須の要件となっています。
Kirby CMS で言語スイッチャーを設定すると、海外からの訪問者に対するサイトのアクセシビリティが大幅に向上し、検索エンジンのパフォーマンスが向上し、ブランドに対する世界的な信頼が高まる可能性があります。 最初はプロセスが難しそうに思えるかもしれませんが、このガイドでは、 Kirby CMS Web サイト、スムーズでユーザーフレンドリーな多言語エクスペリエンスを確保するための手順を説明します。
Kirby CMS で言語スイッチャーをセットアップすることの重要性
Kirby CMS に言語スイッチャーを実装することは単なる機能ではなく、Web サイトのパフォーマンスとリーチに大きな影響を与える戦略的な決定です。 Kirby CMS Web サイトに言語スイッチャーを設定する主な理由を見てみましょう。
- ユーザー エクスペリエンスの向上:言語スイッチャーを使用すると、訪問者は好みの言語でコンテンツにアクセスできるようになり、Web サイトへの理解とエンゲージメントが大幅に向上します。
- 直帰率の低下:自分の言語でコンテンツを見つけられない訪問者はすぐに離れる可能性があります。 複数の言語オプションを提供すると、ユーザーはサイトをさらに詳しく調べることができます。
- コンバージョン率の向上:ユーザーが製品の詳細、ポリシー、購入プロセスを母国語で理解できると、購入や望ましいアクションを起こす傾向が高まります。
- 多言語 SEO の強化:検索エンジンは、Web サイトをランク付けするときにユーザー エクスペリエンスを考慮します。 直感的な言語スイッチャーを使用すると、さまざまな言語のコンテンツに簡単にアクセスできるようになり、多言語 SEO の
Kirby CMS で言語スイッチャーをセットアップする方法
多言語の Kirby CMS Web サイトに言語スイッチャーを実装する重要性を調べたので、セットアップの実践的な側面を詳しく掘り下げてみましょう。 多くの Web サイト翻訳サービスがこの機能を提供していますが、高度にカスタマイズ可能でユーザーフレンドリーな言語スイッチャーを提供するサービスを見つけるのは難しい場合があります。
さまざまなフレームワークとうまく連携するだけでなく、柔軟な言語切り替え機能を提供する自動翻訳サービスを選択することが重要です。 これらの要件を満たす際に際立っているサービスの 1 つは、 Linguise自動翻訳 Web サイト。 同社の言語スイッチャーはカスタマイズの容易さとユーザーフレンドリーなインターフェイスで知られており、Kirby CMS との統合に最適です。
Linguise Kirby CMS にシームレスに組み込むことで、多言語アプリケーションに言語スイッチャーを簡単に追加できます。 Linguiseの高度な機能と直感的なインターフェイスにより、Kirby CMS Web サイトでの言語スイッチャーのセットアップとメンテナンスが簡素化されます。
多言語の Kirby CMS Web サイトにLinguiseをインストールし、言語スイッチャーを設定する手順に従ってください
ステップ 1: Linguise アカウントを登録する
まず、Kirby CMS Web サイトの翻訳を準備します。これには、Kirby CMS 管理ダッシュボードへのアクセスが必要です。 次に、無料の Linguise アカウントを作成し、Web サイトのドメインを追加します。 サブスクリプション プランを選択する前に、30 日間の無料トライアルを利用できます。
ステップ 2: Kirby CMS Web サイトのドメインを追加する
Linguiseれたら、ダッシュボードに移動して、Kirby CMS Web サイトのドメインを追加します。 「ドメインを追加」をクリックし、次の詳細を入力します。
- アカウント
- URL
- プラットフォーム（カービィCMS）
- 既定の言語
- 翻訳言語
- URLを翻訳する
- 動的コンテンツ翻訳
ステップ 3: Linguise スクリプトをアップロードして接続する
Linguise 翻訳スクリプトをダウンロードし、Kirby CMS インストールのルート フォルダーにアップロードします。
スクリプトを解凍し、「linguise」という名前のフォルダーが Web サイトのルート レベルに残っていることを確認します。
次に、 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 にロードする最も簡単な方法は、Web サイトの header.php または セクション。 その方法は次のとおりです。
- Web サイトのルート フォルダーにアクセスします。
- サイト > スニペット > header.phpに移動します
- header.php ファイルを編集して、ヘッダー セクションにスクリプト リンクを含めます。
言語スイッチャーは、最初はデフォルト形式で表示されます。 Linguiseを使用してに移動すると、言語スイッチャーをカスタマイズできます。 このセクションでは、メインの表示設定、言語名、デザイン要素などのさまざまなカスタマイズ オプションを提供します。
ステップ 6: メインディスプレイを構成する
言語スイッチャーの構成を開始するには、 Linguise ダッシュボードで [設定] > [言語フラグの表示] に移動します。
このセクションでは、さまざまな設定を調整できます。 メインの表示設定では、次のような要素をカスタマイズできます。
- フラグ アイコン スタイル:並べて表示、ドロップダウン メニュー、またはポップアップから選択します。
- 位置: Web サイト上の言語スイッチャーの位置を決定します。 訪問者がアクセスしやすい位置を選択してください。
ステップ7：旗のデザインを設定する
主な表示設定を行った後、表示されるフラグのデザインをカスタマイズします。
- 言語名の表示: 「フランス語」や「Français」など、国または言語自体に基づいて言語名の表示を選択します。
- 英語の国旗タイプ:これは、米国英語やイギリス英語など、複数のバリエーションがある言語に便利です。また、スペイン語、台湾語、ドイツ語、ポルトガル語にも適用できます。
- 旗のスタイル:旗アイコンの形状を円形または長方形から選択します。
ステップ 8: 色とサイズを設定する
旗のデザインを構成した後、旗の色とサイズをカスタマイズします。 調整できる設定をいくつか示します。
- フラグの境界半径:長方形のフラグの境界半径をピクセル単位で調整します。
- 言語名の色:言語名を表示するデフォルトのテキストの色を選択します。
- ポップアップ言語の色:ポップアップまたはドロップダウン領域の言語タイトル テキストの色を設定します。
- 旗のサイズ:旗のアイコンのサイズを調整します。
- 言語名のホバー色:ユーザーが言語名の上にマウスを置いたときに表示されるテキストの色を指定します。
- ポップアップ言語のホバー色:ユーザーがポップアップまたはドロップダウン領域の言語タイトルの上にマウスを移動したときに表示されるテキストの色を定義します。
ステップ 9: box-shadow を構成する
最後に、フラグ ボックスの影の設定を調整します。 最初のオプションでは、Web サイトに表示される各旗アイコンに影効果を追加できます。 2 番目のオプションは、ユーザーが言語フラグの上にマウスを移動したときの影の効果を制御します。
必要な調整を行った後、「保存」ボタンをクリックして変更を適用します。 次に、Kirby CMS Web サイトをチェックして、構成が正常に実装されていることを確認します。 これにより、言語スイッチャーがどのように表示されるかがわかります。
多言語 Web サイトで言語スイッチャーが動作しているのを確認できます
その後、 Kirby CMS Web サイトをフランス語などの他の言語に自動的に翻訳します。
Kirby CMS で言語スイッチャーを最適化するための 4 つのヒント
ここでは、言語スイッチャーを改良し、世界中の視聴者にとってより効果的なものにするために役立つ 4 つの重要なヒントを紹介します。
#1 明確に識別できる言語フラグアイコンを使用する
言語を素早く識別するには、簡単に認識できる言語記号またはフラグを言語スイッチャーに組み込むことが重要です。 このアプローチにより、訪問者は好みの言語を迅速に見つけて選択することができ、直感的なユーザー エクスペリエンスを生み出すことができます。 重要なのは、誤解を避けるために、普遍的に理解されている指標を選択することです。
フラグ アイコンを実装する場合は、サイズが小さくても高品質で簡単に区別できるようにしてください。 フラグと言語コードを組み合わせて使用して、視覚的とテキストの両方の手がかりをユーザーに提供することを検討してください。
例：
世界中の目的地をカバーするカービィベースの旅行ブログを想像してみてください。 このサイトの言語スイッチャーでは、小さな旗のアイコンや 2 文字の言語コードとともに地球儀のアイコンを使用できます。
🌎 🇺🇸 JP | 🇪🇸 ES | 🇫🇷フランス | 🇩🇪 DE | 🇯🇵 JP
この設定により、ユーザーは国旗を認識するか言語コードを認識するかにかかわらず、自分の言語をすぐに識別できるようになり、全体的なユーザー エクスペリエンスが向上します。
#2 フラグと一緒に言語名を表示する
フラグは視覚的に素早く参照できますが、言語のネイティブ名と組み合わせるとさらに明確になります。 この戦略は、特に国旗が異なる複数の国で話されている言語の混乱を防ぐのに役立ちます。
実際の言語名を含めることで曖昧さがなくなり、訪問者が好みの言語を正確に識別できるようになります。 このアプローチは、文化的多様性の尊重を示し、包括性を促進します。
例：
複数の言語でコースを提供する、Kirby を活用した教育プラットフォームを検討してください。 言語スイッチャーは次のようになります。
🇺🇸 英語 | 🇪🇸 スペイン語 | 🇫🇷 フランセ | 🇩🇪 ドイツ語 | 🇯🇵 日本語
このデザインにより、ユーザーは国旗と言語名の両方をネイティブ スクリプトで表示できるため、その言語の話者がすぐに認識できるようになります。 これは、国旗の異なる複数の国で話されているスペイン語や英語などの言語に特に役立ちます。
#3 言語切り替えボタンを慎重に配置する
言語スイッチャーを効果的に使用するには、言語スイッチャーの配置が非常に重要です。 ウェブサイト上で目立つようにし、簡単にアクセスできるようにする必要があります。 一般的で効果的な位置には、ヘッダー、フッター、またはメイン ナビゲーション メニューが含まれます。
言語スイッチャーが表示され、サイト上のどのページからでも簡単にアクセスできることを確認してください。 この配置の一貫性により、ユーザーは Web サイト内の現在の位置に関係なく、言語オプションをすぐに見つけることができます。
例：
たとえば、多国籍建築会社のカービーベースのポートフォリオ Web サイトです。 次のように言語スイッチャーを実装できます。
- ヘッダーの配置:言語スイッチャーはヘッダーの右上隅、検索アイコンの隣にあります。
- スティッキー ナビゲーション:ユーザーがスクロールしても、ヘッダーは上部に固定されたままとなり、言語スイッチャーに常にアクセスできるようになります。
- モバイルの最適化:モバイル デバイスでは、小さな画面を煩雑にすることなく簡単にアクセスできるように、言語スイッチャーがハンバーガー メニューに含まれています。
この戦略的な配置により、ユーザーはプロジェクト ギャラリーを閲覧しているとき、会社の歴史を読んでいるとき、連絡先情報を確認しているときなど、いつでも簡単に言語を切り替えることができます。
#4 すべてのページにわたって言語スイッチャーの一貫性を維持する
言語スイッチャーの外観と機能を Web サイト全体で均一に保つことが重要です。 ユーザーは、現在のページや表示しているコンテンツに関係なく、言語を簡単に変更できる必要があります。
この一貫性により、シームレスなユーザー エクスペリエンスが提供され、言語オプションのアクセシビリティが強化され、多言語 Web サイトの信頼性が高まります。
例：
Kirby を利用して製品を世界中に販売する電子商取引サイトを考えてみましょう。 一貫した言語スイッチャー戦略を実装する方法は次のとおりです。
- 統一されたデザイン:言語スイッチャーは、製品リスト、個々の製品ページ、チェックアウト ページを含む各ページの右上隅に「言語」というラベルの付いたドロップダウン メニューとして表示されます。
- コンテンツの保持:ユーザーが言語を切り替えても、同じページに残りますが、コンテンツは新しく選択した言語で表示されます。 たとえば、ユーザーが手作りの花瓶の説明を英語で表示し、フランス語に切り替えると、同じ商品の詳細がフランス語で表示されます。
- URL 構造:言語を切り替えると、URL 構造は一貫して変化します。
英語: www.yourmarket.com/products/blue-ceramic-vase
フランス語: www.yourmarket.com/fr/produits/vase-ceramique-bleu
すべてのページにわたるこの一貫したエクスペリエンスにより、ユーザーは自信を持って好みの言語でナビゲートしてショッピングできるようになり、将来的に購入を完了してサイトに戻る可能性が高まる可能性があります。
Linguiseを使用して、Kirby Web サイトに言語スイッチャーをセットアップしてください。
Kirby CMS で言語スイッチャーを設定することは、真にグローバルでユーザーフレンドリーな Web サイトを作成するための重要なステップです。 この機能を実装すると、世界中の多様な視聴者にデジタルの扉が開かれ、エンゲージメントが向上し、直帰率が減少し、サイト全体のパフォーマンスが向上する可能性があります。
このプロセスを合理化し、最適な結果を確保するには、 Kirby CMS Web サイトにLinguise Linguise、Kirby CMS とシームレスに統合する強力でカスタマイズ可能な言語スイッチャーを提供し、多言語戦略を簡単に実装して微調整できるようにします。 Linguiseを作成し、 Kirby CMS Web サイトと統合し、言語スイッチャーをカスタマイズしてユーザー エクスペリエンスをさらに向上させましょう。
