Cocoonでカテゴリごとの「No Image」を設定する方法

WordPress(Cocoon)でカテゴリごとの「No Image」を設定する方法【プラグインなし】

「アイキャッチを用意していない記事だけ、カテゴリごとに違う画像を出したい」
「Cocoonの共通No Imageじゃなくて、カテゴリ別のロボくんを使いたい」

そんなとき、最初に思いつくのはプラグインやコード修正ですが、Cocoonには、それをかなり簡単に実現できる方法がありました。

この記事では、ぼくが実際に試してみて分かった

「カテゴリのアイキャッチ画像」を使って、アイキャッチのない記事だけカテゴリ別画像を表示させる方法

をまとめておきます。プラグインもコードもいじらずにできるので、同じことで悩んでいる方の参考になればうれしいです。

やりたいことの整理

目指すゴールはこんなイメージです。

  • 記事にアイキャッチ画像が設定されている場合
    → その記事専用のアイキャッチが表示される
  • 記事にアイキャッチが設定されていない場合
    → その記事が属しているカテゴリの画像が表示される
  • カテゴリごとに、違う「No Image」的な画像を使える

つまり、

「アイキャッチがない記事だけ、カテゴリ画像で穴埋めする」

という使い方です。

前提

  • テーマ:Cocoon
  • アイキャッチ未設定の記事がある
  • カテゴリごとに1枚、共通で使いたい画像を用意できる

ぼくの環境では、1500×800px の横長画像をカテゴリごとに1枚ずつ用意して使っています。

手順①:カテゴリ用の画像を用意する

まずは、カテゴリごとに使いたい画像を準備します。

  • できれば横長(例:1500×800px)にしておくと、一覧や単体表示でもきれいに収まります。
  • ファイル名も分かりやすくしておくと管理が楽です。
    例:

    • cat-wp-notes.jpg
    • cat-ai-friend.jpg
    • cat-diary.jpg など

準備できたら、WordPressの「メディア」にアップロードしておきます。

手順②:「投稿 → カテゴリー」でカテゴリーを編集する

次に、カテゴリごとにアイキャッチ画像を設定していきます。

  1. WordPress管理画面の左メニューから
    [投稿]→[カテゴリー] を開きます。
  2. 画像を設定したいカテゴリの行にマウスを乗せて、
    「編集」 をクリックします。
  3. カテゴリー編集画面を少し下にスクロールすると、
    「アイキャッチ画像」 という項目があります。
  4. [アイキャッチ画像を設定] をクリックして、さきほどアップロードした画像を選びます。
  5. [更新]ボタン を押して保存します。

これで、そのカテゴリに「カテゴリ用アイキャッチ画像」が登録されました。

手順③:表示を確認する

設定が終わったら、実際の表示を確認してみます。

  1. そのカテゴリに属している記事のうち、
    「アイキャッチ画像が設定されていない記事」 を開く、もしくは記事一覧を表示します。
  2. すると、今まで Cocoon の共通 No Image だったところが、
    カテゴリで設定したアイキャッチ画像に変わっている はずです。

逆に、

  • すでに記事ごとにアイキャッチを設定しているものは、
    これまで通りそのアイキャッチのまま で表示されます。

つまり、カテゴリ画像はあくまで

「アイキャッチがないときだけの“予備画像”」

として振る舞ってくれる、というイメージです。

この方法のいいところ

実際にやってみて、いいなと思った点はこのあたりです。

  • プラグイン不要
    余計なプラグインを増やさなくていいので、サイトが重くなりにくい。
  • 既存の記事のアイキャッチを壊さない
    記事ごとに設定した画像はそのまま生きている。
  • カテゴリの世界観を出しやすい
    「WordPressのメモ」「AIと仲良くなる」「心のトゲを抜く」など、カテゴリごとに違うロボやイラストを使えるので、見た目にも分かりやすくなります。

注意点・補足

  • Cocoonの共通No Image画像は、
    「カテゴリにもアイキャッチがない+記事にもアイキャッチがない」場合の最終的な予備画像、という位置づけになります。
  • 画像を差し替えたのにうまく変わらないときは、
    ブラウザのキャッシュや、キャッシュ系プラグインのクリアも試してみてください。

おわりに

最初は「カテゴリごとにNo Imageを変えるには、プラグインかコードしかないかな…」と思っていましたが、実際に触ってみたら、カテゴリのアイキャッチ機能を使うだけで、やりたいことがそのまま実現できた、というオチでした。

Cocoonは、ちゃんと触ってみると「そこまで用意してくれてたのか…」という機能がちょこちょこ隠れているテーマだな、と改めて感じています。

もしあなたも、

  • 記事ごとに全部アイキャッチを作るのはしんどいけど、
  • カテゴリごとに雰囲気は出したい…

というタイプなら、この方法はかなり楽なので、ぜひ一度試してみてください。

タイトルとURLをコピーしました