雨過天晴

カテゴリ別のアイキャッチを自動で表示する

2014.08.05

アイキャッチ!

img from: ふわふわ。り

この記事は2014年8月5日に書かれたものです。古い内容や非推奨要素を含む可能性がありますのでご注意ください。

トップページの記事一覧が字だらけで見難い…。
そんなわけで、アイキャッチを設定することにしました。

でもきっとそのうち、アイキャッチ画像作るの面倒くさくて嫌になる→じゃあ画像が無い場合でも自動でなにか可愛い絵が表示されたら嬉しいんじゃね?→いずれ、ずらっと同じ画像が並ぶことになりそう→あ、カテゴリー別に別々の画像を設定しよう!

…です。

1.アイキャッチを使えるようにする

やはり皆様使われる機能なのですね。
あちこち解説記事を書いてくださってます。

function.phpに「アイキャッチ使えるよ」と書いて、テーマ内the_post_thumbnailで呼び出したらOKってことですね。

2.記事内の好きな所に入れられるようにする

はい、テーマ内にthe_post_thumbnailを入れて表示させました。

たとえば常に記事トップに表示するとか「more」の直後に表示するとか、位置固定ならこれでいいのです。
…しかし、記事ごとに表示箇所を変えてみたい場合に困る。

投稿画面に「ここにアイキャッチ!」と書けば表示されるように、ショートコードを登録しておきましょ。

3.カテゴリ別のアイキャッチ画像を自動で表示

さて、本題。

ここまでの作業で、トップページにはthe_post_thumbnailで画像を表示、本文中にはショートコードで画像を表示、ができています。

現状、投稿ごとにアイキャッチ画像を設定しないといけません。
設定忘れると何も表示されない…ひゅるりら…。

これで何かしらの画像は表示されるようになりました。
次はカテゴリーごとに指定した画像を表示します。

トップページ用のループ全体はこちら。

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php if (has_post_thumbnail()): ?>
	<?php the_post_thumbnail( array(横幅,高さ) ); ?> //アイキャッチ指定時の画像
	<?php elseif(in_category('カテゴリ1のスラッグ')): ?><img src="カテゴリ1用アイキャッチ画像" />
	<?php elseif(in_category('カテゴリ2のスラッグ')): ?><img src="カテゴリ2用アイキャッチ画像" />
	<?php elseif(in_category('カテゴリ3のスラッグ')): ?><img src="カテゴリ3用アイキャッチ画像" />
	<?php else: ?><img src="カテゴリ「未設定」用アイキャッチ画像" /><?php endif; ?>
	
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
<?php endwhile; ?>

できた!できたよ!
これでものぐさでも大丈夫。