WordPress 記事中、最初の画像を取得する

「catch_that_image」で Google 検索しますと、WordPress の記事中の一番最初の画像を取得する方法として、多くの記事で紹介されています。関心を持っておられる方が多いようです。「catch_that_image」はファンクション名なのですが、WordPress 標準のファンクションではありませんので、function.php に自身でコードを入力して利用します。
わたしも、このコードをベースに、いろいろな記事を参考にして、ちょっとだけ手を加えて利用しています。

<?php
if ( ! function_exists( 'catch_that_image' ) ) :
function catch_that_image($posts) {
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+?src=[\'"]([^\'"]+?)[\'"].*?>/imu', $posts, $matches,PREG_PATTERN_ORDER);
  $first_img = $matches [1] [0];
  if(empty($first_img)) {
?>
    <img src="arrow.gif" alt="" />
<?php 
  } else {
?>
    <img src="<?php echo $first_img; ?>" alt="" />
<?php 
  }
}
endif;
?>

記事中の img タグを PHP の preg_match_all () で正規表現指定で検索し、最初の画像ファイルのアドレスを戻します。記事中にない場合は、代替え画像を指定して戻します。正規表現の箇所が、このテクニックのポイントになりそうです。

<div data-role="content">
   <ul data-role="listview">
     <?php while ( have_posts() ) : the_post(); ?>
       <li data-icon="arrow-r">
         <a href="<?php the_permalink(); ?>" ><?php catch_that_image(get_the_content()); ?><h2><?php the_title(); ?></h2><p>&nbsp;<small><?php the_time('Y年n月j日 (l) H:i'); ?></small></p><p><?php the_excerpt(); ?></p></a>
      </li>
    <?php endwhile; ?>
  </ul>
</div>

このブログで利用している JQuery Mobile の listview の部分を抜粋しています。

わたしのように比較的短文な記事ばかりでアクセスもチョロチョロであれば、負荷はそれほど気になりませんが、ガッツリ大量記事でガンガンアクセスの場合は、負荷も気になるところです。

なお、WordPress 3 以降からは、アイキャッチ画像機能が追加され、自動でアイキャッチ画像を作成してくれるプラグインなども多くの記事で紹介されていますので、こちらの利用を試してみるのも良さそうです。