menu

Web制作のTipsとかアレコレ。

[WordPress]アイキャッチ画像を登録してない時に記事中の最初の画像を表示させる

2014.03.02

ワードプレスの記事一覧などを画像付きで表示することは多いと思います。

まあちょっとググればいくらでもコードが出てくるんですけど、自分用にチョコチョコいじったので、ここにメモしておきます。
関数の中で、アイキャッチ画像の有無、記事中画像の有無を判別して、以下の優先順位で画像URLを出力。

  1. アイキャッチ画像
  2. 記事中に現れる最初の画像
  3. どちらもなければデフォルト画像(ここではnoimage.png)

以下、コードです。

functions.php

function get_first_image_url( $id = '' ){
	global $post;
	$image_url = '';
	if( empty($id)) { $id = $post->ID; }
	if ( has_post_thumbnail( $id )) { // アイキャッチ画像がある場合
		$image = wp_get_attachment_image_src( get_post_thumbnail_id($id), 'thumbnail', true);
		$image_url = $image[0]; // urlのみを返す
	} else {
	    ob_start();
	    $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
	    if( !$matches || empty($matches[1][0])){ //Defines a default image
	        $image_url = get_stylesheet_directory_uri()."/images/noimage.png";
	    } else {
		    $image_url = $matches [1][0];
	    }
	    ob_end_clean();
	}
	return $image_url;
}

特定の投稿を指定したい場合は引数に投稿IDを渡す。省略時は4行目でカレント記事のIDを取得させます。
デフォルト画像へのパスにget_stylesheet_directory_uri()を使用しているのは、親子テーマで開発しているためですので、適宜環境に合わせて設定すればよいでしょう。
ob_start()とob_end_clean()は必要なのかどうか微妙なところですが($post->post_contentは出力までやるわけじゃないはず)、なんか書いてあるスクリプトが多いのでそのままにしてます(爆)
別にこれ削っても挙動は変わらないと思われ。

で、出力時には、アーカイブと検索の場合を指定して(これは出力場所によりいろいろでしょう)

	<?php if ( is_archive() || is_search() ) { ?>
		<div class='archive-img'>
			<img src='<?php echo get_first_image_url();?>' alt='' width='150' height='150'>
		</div>
	<?php } ?>

とまあこんな感じですね。
altテキストは面倒なので空欄にしてますが、functionsの方で、戻り値をアイキャッチ画像とaltテキストの配列にして、出力時にaltにハメてやってもいいかな、と。
ただし記事中最初の画像は単純にURI文字列で取ってくるしかできないので、これに関しては諦めるしかないかな。
ま、クライアントさんからの要望でもない限りやらないとは思いますが(笑)

今回は以上です!!

Comments

  1. 画像無しの時の、ここならnoimage.pngを複数の画像からランダムに選ぶような仕様にしたらよりステキ ^^
    Related Postsを見て思った。

please leave your comment...

▲ Page Top