[WordPress]アイキャッチや記事本文の最初の画像を取得する方法

WordPress

2014.10.09

WordPressの構築案件で、OGP画像やブログ記事一覧ページのサムネイル画像の表示などで条件分岐が必要になる場合があるのですが、今回は

「ブログ記事にアイキャッチ画像があればアイキャッチを表示して、アイキャッチ画像がなければ記事本文の最初の画像を表示して、何も画像が設定（登録）されていなければ、あらかじめ決まった画像（固定画像）を表示させる」

…という例で処理をまとめてみました。

アイキャッチを取得して表示
記事本文の最初の画像を取得して表示
アイキャッチがない場合に記事本文の最初の画像を表示

アイキャッチを取得して表示

最初にアイキャッチ画像を取得する方法からご紹介します。

<?php
//アイキャッチの取得
if (has_post_thumbnail()){
	$image_id = get_post_thumbnail_id();
	$image = wp_get_attachment_image_src( $image_id, 'full');
	echo '<img src="'.$image[0].'" alt="'.get_the_title().'">';
//アイキャッチがない場合
} else {
	echo '<img src="noimage.jpg">';
<?php }?>

<?php

//アイキャッチの取得

if (has_post_thumbnail()){

$image_id = get_post_thumbnail_id();

$image = wp_get_attachment_image_src( $image_id, 'full');

echo '<img src="'.$image[0].'" alt="'.get_the_title().'">';

//アイキャッチがない場合

} else {

echo '<img src="noimage.jpg">';

<?php }?>

アイキャッチ画像がない場合は、noimage.jpg という固定画像を替わりに表示させています。

記事本文の最初の画像を取得して表示

次に、ブログの記事本文で使用している画像を取得して表示する方法ですが、

まずは以下のコードをご利用のテーマ内の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)){
        $first_img = "noimage.jpg";
    }
    return $first_img;
}

//記事本文の最初の画像を取得

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)){

$first_img = "noimage.jpg";

}

return $first_img;

}

こちらも、記事本文内に画像がない場合はnoimage.jpg という固定画像を替わりに表示させています。

次に、テーマファイルの画像を表示したい箇所に以下のコードを記述します。

<img src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>">

1	<img src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>">

参考ページ
記事内の最初に使用されている画像を取得する[WordPress]

アイキャッチがない場合に記事本文の最初の画像を表示

ようやく本題の「アイキャッチがない場合に記事本文の最初の画像を表示する」方法についてですが、

本当はアイキャッチ取得部分をfunctions.php でまとめたい所でしたが、上記の条件分岐をそのまま組み合わせて、以下のようなコードで実現可能になるかなと。

<?php
//アイキャッチの取得
if (has_post_thumbnail()){
	$image_id = get_post_thumbnail_id();
	$image = wp_get_attachment_image_src( $image_id, 'full');
	echo '<img src="'.$image[0].'" alt="'.get_the_title().'">';
//記事本文の最初の画像を取得+アイキャッチも記事本文にも画像がない場合の処理
} else {?>
	<img src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>">
<?php } ?>