投稿した画像の最初の画像をサムネイルで、、

2019/08/05

これまで、「投稿の最初の画像をサムネイルとして取り出して、新着一覧で表示する」よく使用させている方法ですが、、、

日田盆地（http://www.bonchi-hita.jpn.org/）での画面

これまで使用していた方法では、いくつか問題があって、

一つは、最初の画像が表示されずにほかの画像になるときがあったり、投稿によっては、表示順序として、最初に表示するのは投稿内容に合わない。とか、「トップページに表示するのは、この画像にしてほしい。」などの要望もあったちなど、、、

そこで調べると見つかった！参考にさせていただいたのは、以下のサイト。

https://qiita.com/ryujisanagi/items/96d5d67bb9fc4cf8315a

この度は、お世話になります。

「WordPressの記事一覧などで『アイキャッチ画像が設定されていればそれを取得し、設定されていなければ投稿内の最初の画像を取得』する方法は、調べればすぐ出てくる。」とされているので、ほかにも紹介されているさいともあると思います。

 

やりたかったのは、これでして、最初の画像以外でも、望む画像をアイキャッチに設定すれば、そちらが表示されるというもの。

手順は、

  1. functions.phpの変更
  2. トップページの変更
  3. 画像サイズ調整。サムネイルサイズの変更（設定→メディア）

functions.phpへの設定では、

// 投稿の最初の画像を取り出す
function catch_thumbnail_image($get_size = 'thumbnail', $altimg_id = null) {
    global $post;
    $image = '';
    $image_get = preg_match_all( '/<img.+class=[\'"].*wp-image-([0-9]+).*[\'"].*>/i', $post->post_content, $matches );
    $image_id = $matches[1][0];
    if( !$image_id && $altimg_id ){
        $image_id = $altimg_id;
    }
    $image = wp_get_attachment_image( $image_id, $get_size, false, array(
        'class' => 'thumbnail-image',
        'srcset' => wp_get_attachment_image_srcset( $image_id, $get_size ),
        'sizes' => wp_get_attachment_image_sizes( $image_id, $get_size )
    ) );
    if( empty($image) ) {
        $image = '';
    }
    return $image;
}
//	画像の切り出しここまで

トップページの変更

<div class="img_left">
    <a href="<?php the_permalink() ?>" rel="bookmark">
        <?php
            $catch_thumbnail_size = 'thumbnail';
            if(has_post_thumbnail()){
                the_post_thumbnail($catch_thumbnail_size);
        } else {
            echo catch_thumbnail_image($catch_thumbnail_size);
            }
        ?>
    </a>
</div>

class設定で表示される画像を左にフロートさせているのですが、その下の＜a＞～</a>の間が画像の表示部分で投稿記事にリンクさせたもの。

新着情報の表示部分（サムネイル部分のみですが）

表示するのがサムネイルサイズということで、サムネイルサイズをセットする。

ダッシュボードから「設定」→「メディア」でサムネイルサイズを調整する。今回は横幅120ピクセルで設定した。

これで、希望する画像をアイキャッチ画像に登録することで、トップページに出せるようになりました。ありがとうございました。

Netjobs BONCHI