トップページ等で投稿記事に使用した画像を表示したい時は「アイキャッチ画像」に
その画像を入力して・・・という方法をとっている方も多いと思います。
手間的にはそう大したものでもないのですが、
日々の更新では、これをうっかり忘れちゃったり面倒だったり←特に私が。
「投稿記事に使用した画像をそのまま表示できないの？！」
ってことで調べたらその方法がありました。
今回は、投稿記事に使用した1枚目の画像をアイキャッチ風にする方法をご紹介します。
まずは以下のコードを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 = "/img/logo_sp.jpg";
}
return $first_img;
}
[/xml]
if(empty($first_img)){ //Defines a default image
$first_img = “/img/logo_sp.jpg”;
↑この部分が記事内に画像がない時の処理。
画像がない場合、ここに記述された画像が表示されます。
次に、画像を表示したいところに以下のコードを記述します。
<img src="<?php echo catch_that_image(); ?>" alt="" width="" height="" /></div>
[/xml]
画像のサイズは↑のwidthやheightで指定してもいいし、
CSSで縦横どちらかを指定＆画像が入るボックスで幅or高さを指定＋overflow:hidden;で
はみ出た分を切り取っちゃってもいいかも。
この他にもget_postsタグやget_childrenタグを使用する方法もあるみたいですが、
ご紹介した方法だと投稿記事内に画像がない場合に表示する画像の指定もできるので、
私はこちらをトップページで使用しました。
get_postsやget_childrenを使用したコードはこちらのサイトをご参照ください。
＞＞WordPressの投稿記事内の画像の最初の1枚をサムネイルとして表示する方法│memocarilog様
http://memocarilog.info/wordpress/theme-custom/3554
1980年6月生まれ。
秋田県在住。
地元のIT関連会社や市の機関でweb制作に携わり、2011年1月にフリーランスに。現在は子育てしながら日々業務にあたっています。