あまり使う機会は少ないかと思いますが、タイトルの通り、一覧ページ（アーカイブページ、カテゴリーページ等）で、アイキャッチ画像が設定されていなかったら一番目に表示される画像を取得して表示し、さらに画像一つもがなかったら予め定義した画像を表示する、というカスタマイズをご紹介します。
どういう時に使うの？
カテゴリー一覧や年月ページ等のアーカイブ一覧ページにおいて、記事が10件等並んでいる箇所があるかと思います。記事一覧部分ですね。
その部分の画像表示において、基本的にはアイキャッチ画像を表示させたいが、アイキャッチ画像を未設定の投稿の場合、一番目に設定している画像を自動的に取得して表示させたい。さらに、何も画像がない投稿はデフォルト画像を設定したい、という要望を実現します。
普通に「アイキャッチ画像全部設定すればいいじゃん」って感じなんですが、
例えば、MT等の別のCMSを使ってきて、WordPressへ移行したいが記事が既に数百件ありますというケース。
全てにアイキャッチ画像の設定するのが大変だけど、基本的に1枚目にアイキャッチ画像として各記事設定していますという場合なんかに該当するのかなと思います。
設定後は目視でザーッと見て、アイコン画像や予期せぬバナー画像等が設定されている場合は手動で修正する、という感じで対応できれば全件アイキャッチ画像登録という無駄な作業をしなくて済みます。
アイキャッチ画像を取得する場合と一番目の画像を設定したときの見た目の違い
サンプルサイトのテーマはTwentySeventeenです。見やすいように全文表示ではなく、抜粋表示に変更しています。
まずは通常の何も設定していない場合。
上の投稿はアイキャッチ画像を設定していないので、画像が表示されていません。
下の投稿はアイキャッチ画像を設定していて、画像が見えているのが確認できると思います。
続いて、アイキャッチ画像がなかったら一番目の画像を取得して表示する場合。
下の投稿はアイキャッチ画像が設定されているため変わりませんが、上の投稿は一枚目の画像を表示するようになったのがわかると思います。
また、デフォルト画像も問題なく表示されています。
以上を実現するカスタマイズとなります。
サンプルコード
追加する場所は2つあります。
1. functions.php
2. 表示したいテンプレートファイル（archive.phpやcategory.php等）
1で関数定義をして、2で表示したい場所のテンプレートファイル側に記載をし呼び出します。
どちらもすぐに戻せるようにバックアップを取るなどしておいてください。
まずは以下コードをfunctions.phpへ追加します。
/*
* カテゴリーページにおいて、一番目の画像を取得する関数を生成
*/
function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
if(has_post_thumbnail()){
$image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id, true);
$first_img = $image_url[0];
}
if(empty($first_img)){ //Defines a default image
//アイキャッチ画像があればそちらを優先する
if(has_post_thumbnail()){
$image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id, true);
$first_img = $image_url[0];
} else {
$first_img = bloginfo('template_directory') . "/images/default.jpg"; //デフォルト画像のディレクトリ、画像名は適宜変更
}
}
return $first_img;
}
デフォルト画像のディレクトリ名や画像名称は任意に設定変更してください。
保存します。
続いて、表示したい側のテンプレートファイルを開きます。サンプルのTwentySeventeenでは、archive.phpから呼び出されているcontent.phpへ追加します。
1行目のcatch_that_image()を含む行が必要なコードとなります。
3行目の「<div class=”entry-content”>」は位置参考のため記載しているだけです。
<figure><img src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>" width="100%"></figure> <div class="entry-content"><?php //ここから各エントリーの文章部分 ?>
タグやwidth属性の数値はご自由に設定してください。（サンプルではfigureタグを利用しました）
