カテゴリバナーの表示方法|WordPressで記事カテゴリに応じて共通画像を自動表示する方法
この記事にはプロモーション広告が含まれます
WordPressの記事で、カテゴリごとに決まった画像を表示したいことがあります。
たとえば「ブログ副業の基礎知識」の記事には基礎知識用の共通画像、「実践記録」の記事には実践記録用の共通画像、といった形です。
もちろん、記事を書くたびに画像を手作業で入れることもできます。
でも、毎回同じ作業をするのであれば、できれば自動化したいところです。
そこで今回は、記事に設定されたカテゴリを判定して、対応する画像を自動表示する仕組みを作ってみました。
使ったのは、WordPressにPHPコードを追加できる「Code Snippets」と、ショートコードです。
一度設定してしまえば、記事を書くときはいつもどおりカテゴリを選ぶだけです。
さらに、記事本文やカテゴリページには画像URLを直接書かないため、あとからカテゴリ画像を変更するときにも管理しやすくなります。
私の環境では、WordPressテーマ「THE WORLD」の「最初のH2直前」に表示できるウィジェットへショートコードを入れています。
同じようにショートコードを設置できる場所があるテーマなら、応用できると思います。
今回やること
仕組み自体はそれほど複雑ではありません。
カテゴリごとに画像を用意し、その画像URLとカテゴリのスラッグをPHPで対応させます。
そのうえで、記事に設定されているカテゴリを確認し、該当する画像を表示するショートコードを作ります。
最後に、画像を表示したい場所へショートコードを1つ設置すれば完成です。
つまり、記事を書くたびに画像を選ぶのではなく、
「カテゴリを選ぶと、そのカテゴリ用の画像も自動的に決まる」
という形にします。
カテゴリごとの画像を用意する
まず、カテゴリごとに表示する画像を用意します。
りらぶろでは現在7つのカテゴリがあるため、それぞれに共通画像を作りました。
今回作った画像は、横1200px×縦300pxです。
最初はもっと大きな画像を使っていたのですが、すべての記事へ自動表示することを考えると、アイキャッチ画像と存在感が重なってしまいました。
そこで、記事固有の画像である「アイキャッチ」と、カテゴリを示す「共通画像」の役割が分かれるように、横長のデザインへ変更しました。
画像をWordPressのメディアライブラリへアップロードしたら、それぞれの画像URLを控えておきます。
Code Snippetsでショートコードを作る
次に、カテゴリを判定して画像を表示するショートコードを作ります。
私は「Code Snippets」というWordPressプラグインを使いました。
新しいスニペットを作成し、次のコードを登録しています。
下のコードは右上の「コピー」ボタンからコピーできます。
ただし、画像URLやカテゴリのスラッグは、自分のブログに合わせて変更してください。
function relablo_category_banner_shortcode() {
$banners = array(
'basic' => array(
'url' => 'https://thisismylife1.com/wp-content/uploads/2026/11/rr_cb_basic003.jpg',
'alt' => 'ブログ副業の基礎知識'
),
'start' => array(
'url' => 'https://thisismylife1.com/wp-content/uploads/2026/11/rr_cb_start003.jpg',
'alt' => 'ブログ副業の始め方'
),
'first-income' => array(
'url' => 'https://thisismylife1.com/wp-content/uploads/2026/11/rr_cb_first-income003.jpg',
'alt' => '初収益の作り方'
),
'writing' => array(
'url' => 'https://thisismylife1.com/wp-content/uploads/2026/11/rr_cb_writing003.jpg',
'alt' => '記事の書き方'
),
'tools' => array(
'url' => 'https://thisismylife1.com/wp-content/uploads/2026/11/rr_cb_tool003.jpg',
'alt' => '教材・ツール紹介'
),
'log' => array(
'url' => 'https://thisismylife1.com/wp-content/uploads/2026/11/rr_cb_log003.jpg',
'alt' => '実践記録'
),
'mailmagazine' => array(
'url' => 'https://thisismylife1.com/wp-content/uploads/2026/11/rr_cb_mailmagazine003.jpg',
'alt' => 'メルマガバックナンバー'
),
);
// 通常の記事
if ( is_single() ) {
foreach ( $banners as $slug => $banner ) {
if ( has_category( $slug ) ) {
return relablo_banner_html( $banner );
}
}
}
// カテゴリ一覧ページ
if ( is_category() ) {
$category = get_queried_object();
if ( isset( $banners[ $category->slug ] ) ) {
return relablo_banner_html( $banners[ $category->slug ] );
}
}
return '';
}
function relablo_banner_html( $banner ) {
return '<div style="margin:1.5em 0 2em;">
<img src="' . esc_url( $banner['url'] ) . '"
alt="' . esc_attr( $banner['alt'] ) . '"
style="width:100%;height:auto;display:block;">
</div>';
}
add_shortcode(
'relablo_category_banner',
'relablo_category_banner_shortcode'
);
function relablo_category_description_shortcode( $description ) {
if ( is_category() ) {
$description = str_replace(
'[relablo_category_banner]',
relablo_category_banner_shortcode(),
$description
);
}
return $description;
}
add_filter(
'term_description',
'relablo_category_description_shortcode'
);記事内ではショートコードが勝手に実行されないように、角括弧をHTMLエンティティで記述しています。
ただし、今回作ったコピーボタンはコード枠内の画面に表示されている文字列をコピーするため、「コピー」を押すと通常の角括弧に戻った状態でコピーされます。
つまり、Code Snippetsへ貼り付けるときには、次の通常の記述になります。
$description = str_replace(
'[relablo_category_banner]',
relablo_category_banner_shortcode(),
$description
);たとえば、次の部分では「basic」がカテゴリのスラッグ、「url」が表示する画像です。
'basic' => array(
'url' => 'ここに画像URL',
'alt' => 'カテゴリ名'
),この組み合わせをカテゴリの数だけ用意します。
表示したい場所にショートコードを入れる
PHP側の設定が終わったら、実際に画像を表示したい場所へ次のショートコードを入れます。
[relablo_category_banner]私の場合は、THE WORLDのウィジェット機能を使って「最初のH2直前」に設置しました。
ここへショートコードを一度入れておけば、以降は記事ごとに画像を設定する必要はありません。
「ブログ副業の基礎知識」の記事なら基礎知識用の画像、「教材・ツール紹介」の記事なら教材・ツール用の画像というように、自動的に切り替わります。
この方法では1記事1カテゴリを基本にする
今回のコードを使うときに、ひとつ注意しておきたいことがあります。
基本的に、1つの記事には1つのカテゴリだけを設定する前提で使います。
WordPress自体は、1つの記事に複数のカテゴリを設定できます。
ただし今回のコードでは、記事に複数のカテゴリが設定されている場合、コード内の一覧を上から確認し、最初に一致したカテゴリの画像が表示されます。
たとえば、ひとつの記事に「ブログ副業の基礎知識」と「実践記録」の両方を設定した場合、どちらの画像を出すべきなのかが曖昧になります。
そのため、今回の仕組みをシンプルに運用するのであれば、記事のメインカテゴリは1つに決めておくのが分かりやすいと思います。
カテゴリ画像を変更するときも一か所直せばよい
この方法には、画像を自動表示できること以外にもメリットがあります。
それは、カテゴリ画像の管理場所をスニペットにまとめられることです。
記事本文には、カテゴリ画像そのもののURLを書いていません。
ウィジェットに書いているのも、次のショートコードだけです。
[relablo_category_banner]カテゴリページの説明欄にも同じショートコードを入れているだけなので、そこにも画像ファイルのURLは直接書いていません。
実際の画像URLを管理しているのは、Code Snippetsに登録したコードの中だけです。
そのため、たとえば「実践記録」のカテゴリバナーを新しいデザインに変更した場合でも、各記事をひとつずつ開いて画像を差し替える必要はありません。
スニペット内の次の部分だけを変更します。
'log' => array(
'url' => '新しい画像URL',
'alt' => '実践記録'
),URLを変更すると、そのショートコードを使っている場所へ新しい画像が表示されます。
記事数が増えてくるほど、この違いは大きくなります。
「どの記事に、どの画像URLを書いたのか」を探さなくてよいので、カテゴリ画像を変更するときの管理も簡単になります。
最初はテスト用ショートコードで確認した
いきなり本番用のコードを作るのが不安な場合は、まずショートコードが設置場所で動くか確認しておくと安心です。
私は最初に、次の簡単なショートコードを作って確認しました。
function relablo_test_shortcode() {
return '<div style="padding:15px;background:#fff4df;border:1px solid #f4a340;">ショートコード動作テスト</div>';
}
add_shortcode(
'relablo_test',
'relablo_test_shortcode'
);そしてウィジェット側に、次のショートコードを入れます。
[relablo_test]実際の記事に「ショートコード動作テスト」と表示されたので、その場所ではショートコードを使えることが確認できました。
確認できたら、このテスト用コードは不要です。
カテゴリ一覧ページにも同じ画像を表示する
最初は記事だけに表示できればよいと考えていました。
ところが、実際に使ってみると、カテゴリの記事一覧ページにも同じ画像があると分かりやすいことに気づきました。
そこで、先ほどのコードでは通常の記事だけではなく、カテゴリ一覧ページも判定できるようにしています。
カテゴリページの場合は、次の関数でカテゴリページかどうかを確認しています。
is_category()そして、現在表示しているカテゴリを取得するために次の関数を使っています。
get_queried_object()ただし、ここでひとつ問題がありました。
WordPressのカテゴリ説明欄へショートコードを入力しても、私の環境では最初はショートコードとして処理されず、その文字がそのまま表示されました。
そこで、カテゴリ説明欄に書かれた今回のショートコードだけを置き換える処理を追加しました。
function relablo_category_description_shortcode( $description ) {
if ( is_category() ) {
$description = str_replace(
'[relablo_category_banner]',
relablo_category_banner_shortcode(),
$description
);
}
return $description;
}
add_filter(
'term_description',
'relablo_category_description_shortcode'
);この処理を追加したところ、カテゴリ説明ページにも対応する画像を表示できるようになりました。
技術記事にショートコードを書くときは注意が必要だった
今回、記事そのものを書いている途中で、ひとつ想定していなかったことが起きました。
記事の中で、読者向けのサンプルとしてショートコードを書いたところ、そのサンプルまでWordPressが本物のショートコードとして処理してしまったのです。
コード例として書いたつもりでも、WordPress側から見れば有効なショートコードだったため、記事の複数箇所にカテゴリバナーが表示されてしまいました。
そこで、記事内でショートコードそのものを見せる場合は、角括弧をHTMLエンティティとして記述するようにしました。
記事のHTMLでは、たとえば次のように書いています。
[relablo_category_banner]ブラウザ上では通常のショートコードとして見えますが、記事を生成するときにはショートコードとして評価されにくくなります。
今回作ったコピーボタンでは、表示されたコードの文字列を取得しているため、読者がコピーすると通常の角括弧を使ったショートコードを取得できます。
WordPressのショートコードについて解説する記事を書く場合は、この点にも注意が必要だと分かりました。
今回この仕組みを作った理由
そもそも、最初からここまで自動化するつもりだったわけではありません。
りらぶろのカテゴリごとに、共通の画像があると分かりやすいと思い、まずカテゴリ用の画像を作りました。
当初は必要なところだけに入れるつもりだったので、画像も比較的大きめに作っていました。
ところが、実際の記事へ入れてみると、
「これなら各記事に共通して入れてもいいかもしれない」
と思うようになりました。
ただし、全記事へ毎回手作業で入れるとなると面倒です。
さらに、最初に作ったカテゴリ画像はアイキャッチ画像と雰囲気が似ていたため、記事の中で大きな画像が続いてしまう問題もありました。
そこで、カテゴリ画像そのものを1200×300pxの横長デザインに変更しました。
記事ごとの内容を表すのがアイキャッチ画像、カテゴリを示すのが共通画像、と役割を分けた形です。
そして、せっかく全記事で使うのであれば、記事を書くたびに設定するのではなく、自動化してしまおうと考えました。
結果として、現在は記事を書くときにカテゴリを選択するだけで、対応した画像まで自動的に表示されるようになっています。
ブログ運営では繰り返し作業を少しずつ減らしたい
今回やったことは、ブログ運営全体から見れば小さな変更です。
画像を1枚入れるだけなら、それほど時間もかかりません。
でも、記事を書くたびに同じ作業を続けるのであれば、一度仕組みを作って自動化してしまったほうが楽になります。
記事を書くことそのものに加えて、画像を設定したり、リンクを入れたり、表示を確認したりと、ブログ運営には細かな作業がたくさんあります。
その中で、機械的に繰り返している作業を少しずつ減らしていくことも、ブログを続けやすくする方法のひとつだと思います。
まとめ
WordPressでは、カテゴリの判定とショートコードを組み合わせることで、記事カテゴリに応じた共通画像を自動表示できます。
今回の方法では、最初にカテゴリと画像の対応を設定しておけば、その後は記事を書くときにカテゴリを選択するだけです。
さらに、画像URLをスニペット側にまとめているため、カテゴリバナーのデザインを変更したときにも、基本的にはスニペット内のURLを変更するだけで対応できます。
各記事やカテゴリページに画像ファイルの場所を直接書かなくてよいので、記事が増えても管理しやすいのが、この方法のもうひとつのメリットです。
ただし、今回のコードは1記事1カテゴリで使うことを前提にしています。
カテゴリを複数設定すると、コード内で先に一致したカテゴリの画像が表示されるため、運用ルールを決めておくと分かりやすいです。
また、ショートコードそのものをブログ記事で紹介するときは、説明用に掲載したショートコードまで実行されないよう注意が必要でした。
小さな自動化ですが、毎回の作業をひとつ減らすことができます。
ブログを運営していると、こうした「毎回やっている作業」が少しずつ出てきます。
自動化できそうなものを見つけたら、一つずつ仕組みに置き換えていくのもよいと思います。
