WPML

WPMLでは、wpml-config.xmlファイルで設定を行うことで、特定のニーズに合わせて言語スイッチャーをカスタマイズできます。

wpml-config.xmlは、ウェブサイト上でのWPML言語スイッチャーの表示と動作をカスタマイズできる設定ファイルです。CSSのスタイリング、表示設定、ショートコードなど、多くの属性を設定できます。

このガイドは、組み込みのWPML言語スイッチャーをカスタマイズしたい開発者向けです。カスタムの言語スイッチャーを構築したい場合は、カスタム言語スイッチャーの作成に関するページをお読みください。

wpml-config.xmlファイルを生成する必要がありますか? Multilingual Toolsプラグインを使用して設定ファイルを自動生成するためのステップバイステップガイドをご覧ください。

言語スイッチャーでカスタマイズできる内容

WPMLでは、言語スイッチャーの多くの変数をカスタマイズできます。これには以下が含まれます。

  • インラインCSSスタイル – 言語スイッチャーに直接カスタムCSSを追加
  • 翻訳されていないコンテンツへのリンク – 翻訳されていないコンテンツへのリンクを表示するか隠すかを決定
  • コピーするURLパラメーター – 言語を切り替える際にコピーするURLパラメーターを指定
  • サイドバー / フッター言語スイッチャー – サイドバーとフッターの言語スイッチャーの外観を設定(以下を含む):
    • 国旗や言語名を表示するかどうか
    • 現在の言語をリンクとして表示するかどうか
    • 言語スイッチャーウィジェットのタイトルの設定
    • スイッチャーのレイアウト用テンプレートの選択
    • 16進数カラーコードを使用したテキスト、背景、境界線の色のカスタマイズ
  • ショートコードアクション – ショートコード経由で追加された言語スイッチャーの外観を定義
組み込みのWPML言語スイッチャーにカスタム設定を追加する例
<wpml-config>
  <language-switcher-settings>
    <key name="additional_css">{inline CSS styles}</key>
    <key name="link_empty">{0 or 1}</key>
    <key name="copy_parameters">{parameter1, parameter2}</key>
    <key name="sidebars">
        <key name="{sidebar slug}">
            <key name="display_flags">{0 or 1}</key>
            <key name="display_names_in_current_lang">{0 or 1}</key>
            <key name="display_names_in_native_lang">{0 or 1}</key>
            <key name="display_link_for_current_lang">{0 or 1}</key>
            <key name="widget_title">{widget title}</key>
            <key name="template">{template slug}</key>
            <!-- color picker keys -->
            <key name="background_normal">#{hex color}</key>
            <key name="border_normal">#{hex color}</key>
            <key name="font_current_normal">#{hex color}</key>
            <key name="font_current_hover">#{hex color}</key>
            <key name="background_current_normal">#{hex color}</key>
            <key name="background_current_hover">#{hex color}</key>
            <key name="font_other_normal">#{hex color}</key>
            <key name="font_other_hover">#{hex color}</key>
            <key name="background_other_normal">#{hex color}</key>
            <key name="background_other_hover">#{hex color}</key>
        </key>
    </key>
    <key name="statics">
        <key name="footer">
            <key name="show">{0 or 1}</key>
            <key name="display_flags">{0 or 1}</key>
            <key name="display_names_in_current_lang">{0 or 1}</key>
            <key name="display_names_in_native_lang">{0 or 1}</key>
            <key name="display_link_for_current_lang">{0 or 1}</key>
            <key name="template">{template slug}</key>
            <!-- color picker keys -->
            <key name="background_normal">#{hex color}</key>
            <key name="border_normal">#{hex color}</key>
            <key name="font_current_normal">#{hex color}</key>
            <key name="font_current_hover">#{hex color}</key>
            <key name="background_current_normal">#{hex color}</key>
            <key name="background_current_hover">#{hex color}</key>
            <key name="font_other_normal">#{hex color}</key>
            <key name="font_other_hover">#{hex color}</key>
            <key name="background_other_normal">#{hex color}</key>
            <key name="background_other_hover">#{hex color}</key>
        </key>
        <key name="post_translations">
            <key name="show">{0 or 1}</key>
            <key name="display_flags">{0 or 1}</key>
            <key name="display_names_in_current_lang">{0 or 1}</key>
            <key name="display_names_in_native_lang">{0 or 1}</key>
            <key name="display_link_for_current_lang">{0 or 1}</key>
            <key name="display_before_content">{0 or 1}</key>
            <key name="display_after_content">{0 or 1}</key>
            <key name="template">{template slug}</key>
            <key name="availability_text">{string like "See post translations: %s"}</key>
        </key>
        <key name="shortcode_actions">
            <key name="display_flags">{0 or 1}</key>
            <key name="display_names_in_current_lang">{0 or 1}</key>
            <key name="display_names_in_native_lang">{0 or 1}</key>
            <key name="display_link_for_current_lang">{0 or 1}</key>
            <key name="template">{template slug}</key>
            <!-- color picker keys -->
            <key name="background_normal">#{hex color}</key>
            <key name="border_normal">#{hex color}</key>
            <key name="font_current_normal">#{hex color}</key>
            <key name="font_current_hover">#{hex color}</key>
            <key name="background_current_normal">#{hex color}</key>
            <key name="background_current_hover">#{hex color}</key>
            <key name="font_other_normal">#{hex color}</key>
            <key name="font_other_hover">#{hex color}</key>
            <key name="background_other_normal">#{hex color}</key>
            <key name="background_other_hover">#{hex color}</key>
        </key>
    </key>
  </language-switcher-settings>
</wpml-config>

設定ファイルにこれらのセクションがすべて存在する必要はありません。プラグインやテーマに適用されるものだけで十分です。

WPML言語スイッチャーのデフォルト設定へのリセット

バックエンドから(初期値から)言語スイッチャーの設定が変更された場合、wpml-config.xmlを使用して設定をリセットすることもできます。
新しい変更を確認するには、WPML言語ページの下部にある「デフォルトに戻す」ボタンを必ずクリックしてください。

追加リソース

wpml-config.xmlファイルの詳細は、言語設定ファイルのガイドをご覧ください。

wpml-config.xmlファイルを使用して他の要素をカスタマイズする方法については、以下の追加ガイドをご覧ください。

執筆者:Amir · 最終更新日:2024年1月5日