Wordpressで記事の一番最初の画像を取得し、サムネイルとして使う方法をご紹介します。
当サイトもトップページの記事一覧はサムネイル画像と、文章出だしの一覧になっていると思いますが、構造としては記事の一番最初に画像を挿入し、文章出だしを書いてmoreタグをつけるという手順を踏んでいます。
ただ、この方法だと画像が一番上にきて、つづきの文章があり、という形を変えることは難しいです。
もちろん、抜粋などを利用して頑張れば色々出来ることはあると思いますが、今回紹介する方法であればサムネイル画像を自由に設置することができます。
以下手順。
functions.phpの設定
コードはこちらの記事を参考にさせて頂いてます。
まずは、functions.phpに以下のコードを追加します。
function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('//i', $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //Defines a default image
$first_img = "piyopiyo.jpg";
}
return $first_img;
}
これで、設定は終わりです。
piyopiyo.jpgの部分は記事内に画像がない場合に表示する画像です。
画像の呼び出し
あとは記事タイトル等を呼び出すときと同じ手順で、（ループ内で）サムネイルを表示させたいところに下記のコードを追加します。
<img src="<?php echo catch_that_image(); ?>" />
これで好きな場所でサムネイルを呼び出すことが可能です。
参考にさせて頂いた記事
記事内の一番最初の画像を取得してサムネイル画像表示
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
