WordPressで投稿記事内の最初の画像を取得する方法
先日、とある案件でWordPressサイトの改修を行いました。
ブログの記事一覧ページで各投稿記事のサムネイルを表示させる必要があったのですが、そのクライアントはアイキャッチ画像を設定しておらず・・・かろうじて使えそうなのは投稿記事内に貼られた画像。
仕方なく、アイキャッチ画像の代わりに各記事の一番最初の画像をサムネイルに利用することにしたのですが、今回はその方法を備忘録的に。
実装方法
function.php
function.phpに下記を記述します。
「$first_img = “/images/noimg.png”;」のnoimg.pngの部分は、投稿記事に画像が一枚も無い場合の代替画像になります。パスは適宜合わせてください。
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 = "/images/noimg.png";
}
return $first_img;
} 「preg_match_all()」という関数をつかって、投稿記事内のimgタグを「$matches」に格納し、「$first_img」に代入します。「$first_img」に値が入らなかった場合は代替画像のパスを出力します。
出力コード
下記をサムネイルを表示させたい場所に記述します。
<img src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>" />出力された画像のサイズ調整
この方法だと関数でサイズを自動調整することが出来ないようです。なので、CSSでサイズを制御してあげる必要があります。ご注意を。
