特定のページで言語スイッチャーを表示または非表示にする方法

WPMLには使いやすい言語スイッチャーが用意されていますが、すべてのページに表示したくない場合もあります。特定のページでのみ表示または非表示にする方法について説明します。

数行のCSSを追加するだけで簡単に実現できます。

特定のページでの言語スイッチャーの表示

ステップ1：すべてのページでの言語スイッチャーの非表示

まず、言語スイッチャーが使用しているクラスを確認する必要があります。

これはブラウザの開発者ツールを使用して確認できます。

フロントエンドでサイトにアクセスし、キーボードのF12キーを押します。
「検証」ツールを使用して言語スイッチャーを選択すると、そのHTMLマークアップが表示されます。

言語スイッチャーの一般的な2つのクラスは以下のとおりです。

スイッチャーがメニューに表示される場合のwpml-ls-menu-itemクラス
スイッチャーがフッターに表示される場合のwpml-lsクラス

正しいクラスがわかったら、外観 → カスタマイズページに移動し、追加のCSSをクリックして、以下のCSSをウェブサイトに追加します。

メニュー言語スイッチャーの非表示

/*Hide menu Language Switcher*/
.wpml-ls-menu-item {
	visibility: hidden !important;
}

/*Hide footer Language Switcher*/
.wpml-ls {
	visibility: hidden  !important;
}

これにより、すべてのページで言語スイッチャーが非表示になります。

または、これらのスタイルルールをテーマのstyle.cssファイルに追加することもできますが、必ず子テーマを使用してください。そうしないと、テーマを更新したときにカスタムスタイルが失われます。

言語スイッチャーのCSSクラスの詳細については、言語スイッチャーのCSSスタイルに関するページをご覧ください。

ステップ2：特定のページでの言語スイッチャーの表示

次のステップでは、目的のページにのみ言語スイッチャーを表示するために、別のCSSスニペットを追加する必要があります。

WordPressは各ページのbodyタグに特定のクラスを自動的に追加します。これを利用すれば、特定のページの言語スイッチャーだけを指定できます。

クラスを確認するには、言語スイッチャーを表示したいページをフロントエンドで開きます。ここでもブラウザの検証ツールを使用して、bodyタグを探します。

次のように表示されます。

idクラスの検索

<body class="page-template-default page page-id-2 logged-in admin-bar wp-embed-responsive is-light-theme singular has-main-navigation customize-support">

この場合、page-id-2クラスはこの特定のページにのみ追加されます。この数字はページのIDを表しており、これを使用してスニペットを作成できます。

完全なスニペットは次のようになります。

メニュー言語スイッチャーの非表示 – 完全版

/*Hide menu Language Switcher*/
.wpml-ls-menu-item {
	visibility: hidden !important;
}

/*Hide footer Language Switcher*/
.wpml-ls {
	visibility: hidden  !important;
}

/*Display Language Switcher only in the page with ID 2*/
body.page-id-2 .wpml-ls-menu-item {
	visibility: visible !important;
}

body.page-id-2 .wpml-ls {
	visibility: visible !important;
}

page-id-2クラスをページのクラスに置き換えることを忘れないでください。

使用できる特定のクラスの例をいくつか示します。

page-id-X: ページに使用（XをページのIDに置き換えます）
postid-X: 投稿に使用（Xを投稿のIDに置き換えます）
home: ホームページに使用
single-post: すべての投稿に使用（特定の投稿ではありません）
page: すべてのページに使用（特定のページではありません）

特定のページでの言語スイッチャーの非表示

特定のページで言語スイッチャーを非表示にする方法は、前のステップと非常によく似ています。ただし、すべてのページで非表示にするのではなく、特定のページでのみ非表示にします。

そのためには、ページ固有のクラスを調べ、それを使って該当ページの言語スイッチャーを非表示にするだけです。

CSSスニペットは次のようになります。

IDが2のページでのみ言語スイッチャーを非表示

/*Hide Language Switcher only on the page with ID 2*/

/*Menu Language Switcher*/
body.page-id-2 .wpml-ls-menu-item {
	visibility: hidden !important;
}
/*Footer Language Switcher*/
body.page-id-2 .wpml-ls {
	visibility: hidden !important;
}

page-id-2クラスを特定のクラスに置き換えることを忘れないでください。