ワードプレスでウィジェットをカテゴリーごとに表示・非表示にする方法

※当サイトにはプロモーションが含まれています。

クライアント

カテゴリーごとに表示されるバナーを切り替えられるようにしてくれ。

にゃテック

おけまるだにゃ。

たとえば、旅行に関する記事では「楽天トラベル」などの旅行系バナー、語学に関する記事では「語学学校」などの学習系バナーを表示するといったように、訪問したユーザーの興味に合った情報（バナー）を表示したいと考えている方は多いと思います。

しかし、このような機能は、多くのワードプレステーマでは標準で備わっていません。

そのため、実現するにはプラグインを導入するか、コードをカスタマイズする必要があります。

今回は、訳あってプラグインを導入することができなかったで、functions.phpを使って、カテゴリーごとにウィジェットの内容を出し分けるコードを作成してみました。

にゃテック

なお、説明はクラシックウィジェット環境を前提としています。

この記事の目次

カテゴリーごとにウィジェットを表示・非表示にする方法

カテゴリーごとにウィジェットを表示・非表示にする方法

ワードプレスで、カテゴリーごとにウィジェットの表示・非表示を制御する方法を説明します。

①検証でソースを表示

左メニューにある、外観 >ウィジェット を選択。

カテゴリーごとに、表示、非表示にしたいウィジェットの上で右クリックをします。

そして「検証」を選択して、ソースを表示させます。

右クリック > 検証

②ウィジェットIDなどの確認

すると、デベロッパーツールが起動し、ソースが表示されるので、次のような形式で書かれている箇所を探します。

https://（ドメイン名）/wp-admin/widgets.php?editwidget=block-3&sidebar=sidebar-1&key=1
https://（ドメイン名）/wp-admin/widgets.php?editwidget=custom_html-3&sidebar=sidebar-1&key=5

ポイントは編集リンクにある、･･･widgets.php?editwidget=block-3&sidebar=sidebar-1の部分を確認します。

にゃのらいと

この中で大事な箇所は次の箇所にゃ。

sidebar-1
block-3

もう１つの例、･･･widgets.php?editwidget=custom_html-3&sidebar=sidebar-1であれば、

sidebar-1
custom_html-3

が大事な箇所になります。

実際の画像例を示すと、赤い四角で囲った箇所が編集リンクのURLです。

デベロッパーツール

なお、･･･widgets.php?editwidget=block-3&sidebar=sidebar-1の形式の編集リンクを表示させるには、いったんウィジェットを保存し、ウィジェット画面から一度離れる必要があります。

③functions.phpに記載するコード

下記のコードを、functions.phpに記載します。

add_filter('sidebars_widgets', function ($sidebars_widgets) {
if (is_admin()) return $sidebars_widgets;

// ===== ここを編集してルールを増やすだけでOK =====
$rules = [
[
'sidebar' => 'sidebar-1',
'widgets' => ['block-3'], // 複数可: ['block-3','block-7']
'mode' => 'show_only_on', // 'show_only_on' または 'hide_on'
'categories' => ['wordpress'], // スラッグ or ID 混在OK
],
[
'sidebar' => 'sidebar-5',
'widgets' => ['block-10'],
'mode' => 'hide_on',
'categories' => ['wordpress'],
],
];
// ==============================================

foreach ($rules as $rule) {
$sb = $rule['sidebar'] ?? '';
$wids = $rule['widgets'] ?? [];
$mode = $rule['mode'] ?? 'hide_on';

if (empty($sb) || empty($wids) || empty($sidebars_widgets[$sb])) {
continue;
}

$match = my_widget_rule_matches($rule);

$should_remove = ($mode === 'show_only_on') ? !$match : $match;

if ($should_remove) {
$sidebars_widgets[$sb] = array_values(array_filter(
$sidebars_widgets[$sb],
fn($w) => !in_array($w, $wids, true)
));
}
}

return $sidebars_widgets;
});

/**
* ルールの条件判定（必要に応じて拡張）
*/
function my_widget_rule_matches(array $rule): bool
{
// カテゴリ
if (!empty($rule['categories'])) {
$cats = (array)$rule['categories'];
// カテゴリアーカイブが該当するか
if (is_category($cats)) return true;
// 単一投稿がいずれかのカテゴリを持つか
if (is_single() && has_category($cats)) return true;
}

return false;
}

上記のコードに、先程、調べた内容を記載します。

たとえば、サイドバーIDがsidebar-1、ウィジェットIDがcustom_html-3の場合で、カテゴリーのスラッグがstudy（＝勉強カテゴリ）のときだけ非表示にするには、次のように記述します（上段です）。

// ===== ここを編集してルールを増やすだけでOK =====
$rules = [
[
'sidebar' => 'sidebar-1',
'widgets' => ['custom_html-3'], // 複数可: ['block-3','block-7']
'mode' => 'hide_on', // 'show_only_on' または 'hide_on'
'categories' => ['study'], // スラッグ or ID 混在OK
],
[
'sidebar' => 'sidebar-5',
'widgets' => ['block-10'],
'mode' => 'hide_on',
'categories' => ['wordpress'],
],
];
// ==============================================

表示させたい場合は、modeにshow_only_on、非表示にしたい場合はhide_onを指定します。

分かりにくい箇所もあるかもしれませんが、少しでも参考になる部分があれば幸いです。

functions.phpの場所は？

functions.phpは、だいたいどのテーマも、

外観 > テーマエディター

にあります。

テーマエディターに移動したら、編集するテーマが、現在、使用しているテーマかを確認しましょう。

問題なければ、「functions.php」を選択します。

なお、functions.phpに記載する際に、ブラウザ上で全角から半角に変換すると、エンコーディング（文字コード）の関係で、不具合が発生することがあります。

その為、編集する時は、メモ帳などに貼り付けたものを編集をしてからペーストするようにしましょう。

選択したら、一番下に以下のコードを追加します。

add_filter('sidebars_widgets', function ($sidebars_widgets) {
if (is_admin()) return $sidebars_widgets;

// ===== ここを編集してルールを増やすだけでOK =====
$rules = [
[
'sidebar' => 'sidebar-1',
'widgets' => ['block-3'], // 複数可: ['block-3','block-7']
'mode' => 'show_only_on', // 'show_only_on' または 'hide_on'
'categories' => ['wordpress'], // スラッグ or ID 混在OK
],
[
'sidebar' => 'sidebar-5',
'widgets' => ['block-10'],
'mode' => 'hide_on',
'categories' => ['wordpress'],
],
];
// ==============================================

foreach ($rules as $rule) {
$sb = $rule['sidebar'] ?? '';
$wids = $rule['widgets'] ?? [];
$mode = $rule['mode'] ?? 'hide_on';

if (empty($sb) || empty($wids) || empty($sidebars_widgets[$sb])) {
continue;
}

$match = my_widget_rule_matches($rule);

$should_remove = ($mode === 'show_only_on') ? !$match : $match;

if ($should_remove) {
$sidebars_widgets[$sb] = array_values(array_filter(
$sidebars_widgets[$sb],
fn($w) => !in_array($w, $wids, true)
));
}
}

return $sidebars_widgets;
});

/**
* ルールの条件判定（必要に応じて拡張）
*/
function my_widget_rule_matches(array $rule): bool
{
// カテゴリ
if (!empty($rule['categories'])) {
$cats = (array)$rule['categories'];
// カテゴリアーカイブが該当するか
if (is_category($cats)) return true;
// 単一投稿がいずれかのカテゴリを持つか
if (is_single() && has_category($cats)) return true;
}

return false;
}

最後に、「ファイルを更新」ボタンで、保存（更新）します。

ワードプレス｜function.php

※functions.phpの設定を失敗すると、最悪、サイトが表示されなくなります。
その為、コードを追加する際は、必ずバックアップを取ってから追加するようにしてください。

にゃテック

プラグイン「Code Snippets」を使用すると、安全にfunctions.phpを編集することができます。

WordPressで安全にコードを追加できる「Code Snippets」の使い方
https://best-item.work/wordpress/plugin-code-snippets/
このブログでは、ワードプレス（WordPress）のカスタマイズ方法を多数紹介していますが、その中にはfunctions.phpの編集が必要なケースもあります。そのためか、これまでに数件「サイトが真っ白になってしまった …