WordPressでアイキャッチ画像を設定していれば、アーカイブ一覧に記事のサムネイルとして表示させることは簡単です。
しかし、なんらかの理由でアイキャッチ画像が使用不可であったり、アイキャッチ画像を設定していなかったりするケースは多々あります。
そんな時に、記事内の一番最初の画像を取得して、サムネイルとして表示させたいところです。
「記事の一番最初の画像を取得する方法」などで検索すると、同じような方法がたくさん出てきますが、これらだと僕の求める形ではなかったので、備忘録として記しておきます。
なぜ検索でヒットした方法だとダメなのか
検索でたくさん出てくる方法は、確かに「記事の一番最初の画像」を取得してくれます。
しかし、それは記事に「表示」されている画像を大きさも含めてそのままを取得してきてしまうのです。
WordPressが生成する小さなサムネイルを使用したい
アーカイブ一覧ページに使用したいので、取得した画像をCSSで調整して表示させるのではなく、なるべく軽い小さな画像をサムネイルとして使用したい。
そこで、WordPressに画像をアップロードした時に自動生成される、150×150の「サムネイル – 小」を利用したいと思いました。
単純に「ファイル名 + -150×150.拡張子」とすると、生成されている場合には表示されるはずです。
画像クリックが効いているから
Lightbox系プラグインを利用していると、場合によって表示画像は「サムネイル – 中」であり、クリックするとオリジナル画像が拡大表示されるようになっているかと思います。
この「サムネイル – 中」は、WordPressが自動生成し、画像の比率によってファイル名が可変してしまうので、コントロールがしにくいです。
よって、imgタグの値を取得するのではなく、aタグのオリジナル画像への値を利用して、「サムネイル – 小」を利用しようという目論見です。
functions.phpに追記
検索して出てきた方法をカスタマイズしたコードを追記します。
動作確認は甘めにしかしていないので、どこか間違っているかもしれません（汗）
function catch_that_image() {
$field = get_field('hoge'); // 投稿（カスタムフィールド）を取得
$first_img = '';
preg_match_all('/<a[^>]href\s?=\s?[\"\']([^\"\']+)[\"\'][^>]*>/i', $field, $matches); // 投稿（カスタムフィールド）よりaタグのhref取得
$imgflg = false;
foreach ($matches[1] as $first_img) {
if(exif_imagetype($first_img)){ // hrefの値が画像かどうか判定
$smallThumbnail = substr_replace($first_img, '-150x150',strrpos($first_img,'.'),0); // hrefが画像の場合URLを編集して代入
if (file_get_contents($smallThumbnail)) { // 150x150のサムネイルが存在するか判定
$first_img = $smallThumbnail;
}
$imgflg = true;
break;
}
}
if (!$imgflg) { // 投稿（カスタムフィールド）に画像がなかった場合
$first_img = "img/noimage_150.png";
}
return $first_img;
}僕の場合はカスタムフィールドから取得していますが、普通に投稿から取得したい場合は、二行目を以下のように書き換えると良いかもしれません。
※動作確認していません
global $post, $posts;出力コード
アーカイブ一覧など、表示させたいループ内に下記コードを追記します。
<img src="<?php echo catch_that_image(); ?>">適宜width/height/altを追記してください。
また、「サムネイル – 小」が無い画像が表示される場合用に、別途CSSでの調整が必要です。
まとめ
phpでforeachにて回しているので、少し処理は重いかもしれません。
しかし、ユーザー（特にスマホ）にはなるべく軽いページを表示させたいので、こういった方法を考えてみました。
記事を投稿する側にも負担は少ないので、気軽に更新できるかと思います。
コメント