WordPressで記事のアイキャッチ画像を指定していなくても、記事内の最初の画像を勝手に取得してアイキャッチ代わりに使ってくれたら便利ですよね。
今回はそんな便利なカスタマイズに役立つコードをご紹介します。
まず記事内の一番目にある画像を取得する
アイキャッチ代わりとなる記事内の最初の画像を取得するために、WordPressテーマにあるfunctions.phpに次のコードを書き加えてください。
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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(empty($first_img)){ // 記事内で画像がなかったときのためのデフォルト画像を指定 $first_img = "/images/default.jpg"; } return $first_img; } |
preg_match_all()で正規表現検索を繰り返してimgタグを順番に取得しています。
そして、取得したimgタグの一番最初のものを$first_imgに入れています。
記事内に画像がなかった場合を想定してデフォルト画像を決めてパスを設定しておくと良いでしょう。
アイキャッチ画像の有無で条件分岐
取得した画像をアイキャッチ代わりにサイト表示に使用するときのコードは次のようになります。
1 2 3 4 5 | <?php if (has_post_thumbnail()) : ?> <?php the_post_thumbnail('thumbnail'); ?> <?php else : ?> <img src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>" /> <?php endif ; ?> |
このようにすれば、アイキャッチ画像が設定されている場合はそのままアイキャッチ画像を表示し、アイキャッチ画像がないときはcatch_that_image()にて作成した$first_imgの値を画像パスとしてimgタグを表示するように条件分岐できます。
参考記事
今回の記事はこちらのリンクを参考にさせていただきました。ありがとうございました！
以上、記事内の最初の画像をアイキャッチ代わりに使う方法でした。
WordPressを利用したホームページ制作にお役立てください。
それではまた！
中小企業のホームページ制作やサイトリニューアルならシンス株式会社まで。
