韓国留学、ベルリン短期ワーホリ、転職、Webデザイン、英語勉強、旅行、食べ物、ディズニーなど

WordPress アイキャッチ機能を使わず投稿の最初の画像をリサイズする

今WordPressで作っているブログサイトで、投稿にアイキャッチ画像を一つずつ設定するのが面倒くさいので、投稿に画像を追加した場合、自動でその画像をサムネイルとして色々な場所に使いたいと思いました。
その方法をメモしておきます。

1、投稿の最初の画像を表示する方法

functions.phpに、以下のコードを記述します。

//記事内の最初に使用されている画像を取得する
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)){
    $first_img = "";
  }
  return $first_img;
}

そして、この画像をサムネイルとして使いたい場所(home.phpなど)に、以下のように記述すると、表示できます。

<?php if(catch_that_image()): ?>
 <img src="<?php echo catch_that_image(); ?>" alt="">
<?php endif; ?>

ただ、これだと投稿の画像をそのまま表示するので、トリミングされません。

スポンサーリンク

2、投稿の最初の画像を、好きなサイズに切り抜いて表示する

functions.phpに、1番で書いたコードの下に、以下のコードを追記します。

//画像サイズをセット
add_image_size( 'thumbnail', 150, 150, true );

これは、サイズの違うアイキャッチ画像を設定(リサイズ)するときのコードと同じです。
※以前こちらの記事に書いています。
WordPressでブログ作り4(アイキャッチ画像)

上のコードでは、幅150px, 高さ150pxの「thumbnail」という名前の画像サイズを作っています。「true」は切り抜きするときで、「false」にすると、切り抜きせずに指定した大きさでリサイズになります。

そして、サムネイルとして使いたい場所(home.phpなど)で、以下のように記述すると、表示できます。

<?php if( catch_that_image()):
 $imgurl = catch_that_image();
 $attachment_id = attachment_url_to_postid ($imgurl);
 echo wp_get_attachment_image( $attachment_id, 'thumbnail', false, array( 'class' => 'gaiyou__img' ) );
endif; ?>

こちらは、1番と違い、<img src=””>は書かなくて良いです。
echo wp_get_attachment_imageで、imgタグ部分を書き出してくれます。
wp_get_attachment_imageの()内の、$attachment_idは、画像のIDが入ります。
その次に、functions.phpで作ったサイズの名前(ここでは「thumbnail」)を書きます。
array( ‘class’ => ‘gaiyou__img’ )の部分は、好きなクラス名を入れます。

$attachment_idは、画像のIDが入るのですが、画像のIDは、attachment_url_to_postid()という関数で、()内に画像のURLを入れると取得できます。
画像のURLは、catch_that_image();で取得できます。(1番でfunctions.phpで定義しているため)
なので、上のようなコードになります。

このように書いたら、1番のように、投稿の画像をそのまま使うこともできるし、他の場所で、好きなサイズに切り抜いたものを使うこともできます。両立できるのが良いです。

アイキャッチ画像って、設定し忘れることが多いので、投稿するときに少し楽になると思います。

スポンサーリンク