アイキャッチの画像を表示するのではなく記事内に追加した画像を表示したいとの要望があったのでテンプレートを修正しましたが、後日問題があったので解決した経緯も含めて記事を書くことにします。
目次／Contents
functions.phpにコードを追加
コードはこちらの記事を参考にさせて頂きました。ありがとうございます。
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(empty($first_img)){ //Defines a default image
$first_img = "default.jpg";
}
return $first_img;
}10行目のdefault.jpgの部分は画像が無い場合に代替表示画像を設定でします。以上で設定は完了です。
画像の表示
あとは以下コードを表示したい部分に追加します。
<img src="<?php echo catch_that_image(); ?>" />表示がおかしいと連絡が。。。
後日、最初の画像が表示できないと連絡があり、重箱の隅をつつかれましたｗ
それは画像を複数すると最後の画像が表示されるとの事でした。焦ってきました。複数設置しても問題なかったはずと思いながら再度検証すること。。。色々な方法で試した結果、最後の画像が表示される現象を見つけました。色々と試したところ原因を追究すると事ができました。
改行しないとダメみたい。。。
見つけるのに多少時間がかかってしまいイラつきましたよｗ。私の検証なので正解なのか分かりませんが色々試したところ連続して画像を挿入すると最後の画像を表示するようです。例えば2枚画像を続けて追加すると最後2枚目の画像を表示してしまいます。その回避方法としては改行すると大丈夫でした。
<img src="img01.jpg"><img src="img02.jpg">一行として繋がっている場合、最後の画像が表示されてしまう。
<img src="img01.jpg">
<img src="img02.jpg">改行することで最初の画像が表示できる。
それでは困るのですよ。
いやいや改行で回避するなんてのは困るのですよ。。。と、困っていると私と同じ状況でそれを解決してくれている方がいたのでそちらを試してみる事にしました。
コードはこちらの記事を参考にさせて頂きました。ありがとうございます。
functions.phpに以下コードを追加します。
function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all("/<img[^>]+src=[\"'](s?https?:\/\/[\-_\.!~\*'()a-z0-9;\/\?:@&=\+\$,%#]+\.(jpg|jpeg|png|gif))[\"'][^>]+>/i", $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //Defines a default image
$first_img = "default.jpg";
}
return $first_img;
}<img src="<?php echo catch_that_image(); ?>" />ほとんど内容は変わりませんが6行目が違います。厳密にコードを書かれたそうです。
このコードを使うと無事問題が解決しました。本当に感謝です。お礼のコメント書きにいきましたｗ
