言語スイッチャーのスタイリングとCSSの問題を修正する方法

カスタムメニュージェネレーターを備えた一部のテーマでは、WPML言語スイッチャーが正しく表示されない場合があります。ここでは、言語スイッチャーのスタイリングに関する問題のトラブルシューティング手順を提供します。

高度なカスタマイズを行う場合のために、WPMLのメニュー言語スイッチャーで使用されるCSSの詳細な説明も記載しています。

ドロップダウンおよびメニュー言語スイッチャーの表示問題のトラブルシューティング方法

あらゆるデバッグプロセスと同様に、言語スイッチャーの正常なレンダリングを妨げているものがあるかどうかを検出するための初期手順があります。

1. 非常にシンプルなCSSを使用しており、ほぼすべてのサイトで機能するフッター言語スイッチャーを一時的に追加します。
2. カスタムCSSを一時的に削除し、デフォルト設定でWPMLの言語スイッチャーを使用します。
3. ブラウザのCSSデバッガーを使用し、明らかなCSSの競合がないか確認します。原因が見つかった場合は、WPML → 言語ページの「言語スイッチャーのオプション」セクションでCSSスタイリングを上書きできます。そこで「追加のCSS」リンクをクリックします。

テーマとWPMLの間に問題がある場合、WPMLサポートチームは互換性チームおよびテーマ開発者と協力して、適切な解決策を提供します。

言語ごとのCSSクラス

各言語のCSSクラスのリストは以下のとおりです。

• wpml-ls-slot-{slug}: 例「wpml-ls-slot-sidebar-1」。
• wpml-ls-item。
• wpml-ls-item-{language_code}: 例「wpml-ls-item-en」。
• wpml-ls-current-language: 現在の言語アイテムのみ。
• wpml-ls-menu-item: メニュー内の言語スイッチャーのみ。
• wpml-ls-first-item: リストの最初の言語アイテムをターゲットにします。
• wpml-ls-last-item: リストの最後の言語アイテムをターゲットにします）

各言語のCSSクラスを変更する必要がある場合、WPMLはwpml_ls_model_language_css_classesフィルターフックを提供しています。

たとえば、すべての言語にmy-custom-item-classクラスを追加する必要があるとします。その場合、テーマのfunctions.phpファイルに以下のようなコードを追加できます。

add_filter( 'wpml_ls_model_language_css_classes', 'my_custom_ls_item_css_classes' );
function my_custom_ls_item_css_classes( $classes ) {
    $classes[] = 'my-custom-item-class';
    return $classes;
}

言語スイッチャーラッパーのCSSクラス

言語スイッチャーラッパーのCSSクラスのリストは以下のとおりです。

• wpml-ls
• wpml-ls-{group}-{slug}: 例「wpml-ls-statics-footer」。
• wpml-ls-{template-slug}: 例「wpml-ls-legacy-dropdown-click」。
• wpml-ls-rtl: RTL言語用。
• wpml-ls-touch-device: このクラスはモバイルおよびタブレットデバイス用に追加されます。

以下の表は、{group}と{slug}に応じてCSSクラスがどのように構築されるかを示しています。

前述と同様に、言語スイッチャーラッパーにカスタムCSSクラスを追加する必要がある場合は、wpml_ls_model_css_classesフィルターフックを使用できます。テーマのfunctions.phpファイルに以下のようなコードを追加すると、my-custom-wrapper-class CSSクラスが追加されます。

add_filter( 'wpml_ls_model_css_classes', 'my_custom_ls_wrapper_css_classes' );
function my_custom_ls_wrapper_css_classes( $classes ) {
    $classes[] = 'my-custom-wrapper-class';
    return $classes;
}

注: WPMLはメニューの言語スイッチャーオプションに対して一部の要素のみを挿入します。その結果、ラッパークラスは持ちません。

CSSを使用した言語スイッチャーのカスタマイズ

WPML → 言語ページの「言語スイッチャーのオプション」セクションで、カスタムCSSスタイルを簡単に追加できます。そこで「追加のCSS」リンクをクリックします。

例1: 現在の言語を太字で表示する

.wpml-ls-current-language {
font-weight: bold;
}

例2: フッターの言語スイッチャーのみフォントサイズを変更する

.wpml-ls-statics-footer {
    font-size: 18px;
}

例3: 最後の言語アイテムの右側にマージンを設ける

.wpml-ls-last-item {
    margin-right: 10px;
}

セレクタを組み合わせて、ターゲットをより正確に絞り込むこともできます。

例4: フッターの言語スイッチャーの現在の言語を太字にする

.wpml-ls-statics-footer .wpml-ls-current-language {
   font-weight: bold;
}

例5: メニュー内の言語スイッチャーの幅を固定する

nav ul[class*="menu"] li.wpml-ls-menu-item ul.sub-menu,
nav ul[class*="menu"] li.wpml-ls-menu-item ul.sub-menu li a {
  width: auto;
  min-width: 30px;
}