Web制作で役立つメモをWEB MEMO LOG

2017.09.15

【WordPress】優先度付きのサムネイル画像の表示方法(アイキャッチ・記事の最初の画像)

WordPressで記事のサムネイル画像を表示したいとき、アイキャッチがあれば、アイキャッチを表示、なければ記事の最初の画像(自動リサイズ・絵文字を除外)、それもなければあらかじめ設定した画像を表示する方法をメモメモ。

優先度

[1] アイキャッチ
[2] 記事の最初の画像
 ・画像サイズが大きい場合でも自動的にリサイズ
 ・画像より先に絵文字(GIF)を使用した場合でも、絵文字をサムネイルとして表示しない
[3] あらかじめ設定した画像

function outputThumbnail() {
    global $post;
    $noimage = '*******/noimage.jpg'; //アイキャッチ、記事中画像がない場合、表示する画像のパス設定
     
    // アイキャッチが設定されている場合
    if ( has_post_thumbnail() ) {
        $thumbnail_id = get_post_thumbnail_id(); 
        $eye_img = wp_get_attachment_image_src( $thumbnail_id , 'medium' );//ミディアムサイズ
        echo '<img src="'.$eye_img[0].'">';
    } else {
        //記事中の最初の画像を取得(絵文字[gif]を除く)
        if ( preg_match_all( '/<img[^>]+src=[\'"]([\-_\.\!\~\*\'\(\)a-z0-9\;\/\?\:@&=\+\$\,\%\#ぁ-んァ-ヶー一-龠]+(jpg|jpeg|png))/iu', $post->post_content, $matches) ) {
            //最初の画像があれば分岐
            if(isset($matches [1][0])){
                $first_url = $matches [1][0];
                //最初の画像の画像IDを取得
                $first_id = my_get_image_id($first_url);
                //最初の画像IDからサムネイルのパスを取得してセット
                $first_img = my_wp_get_attachment_medium_url($first_id);
                 
                //最初の画像の画像IDからサムネイルのパスが取得できず、かつ、最初の画像のファイル名にサイズを表す文字列(e.g. -300x300)があった場合
                if(empty($img_url) && preg_match_all('/(-.[0-9].+?x[0-9].+?).(jpg|jpeg|png)$/iu', $first_url , $matches2) ) {
                    //サイズを表す文字列を削除
                    $first_url = str_replace($matches2[1][0], '' , $first_url);
                    //最初の画像の画像IDを再取得
                    $first_id = my_get_image_id($first_url);
                    //再取得した画像IDからサムネイルのパスを取得してセット
                    $first_img = my_wp_get_attachment_medium_url($first_id);
                }
            }
            //取得した画像のダウンロードサイズがない場合等
            if (empty($first_img)) {
                $first_img = $matches[1][0];
            }           
            echo '<img src="'.$first_img.'">';
        } else {
            echo '<img src="'.$noimage.'">';
        }
    }
}
 
//記事に挿入された最初の画像のURLから画像のIDを取得する関数
function my_get_image_id($image_url) {
    global $wpdb;
    $attachment = $wpdb->get_col($wpdb->prepare("SELECT ID FROM $wpdb->posts WHERE guid='%s';", $image_url ));
    if(isset($attachment[0])){
        return $attachment[0];
    }
}
//画像のIDから、記事に挿入された最初の画像のサムネイルのサイズのURLを取得する関数
function my_wp_get_attachment_medium_url( $id ) {
    $medium_array = image_downsize( $id, 'medium' );//ミディアムサイズ
    $medium_path = $medium_array[0];
    return $medium_path;
}

サムネイルを表示したい部分に下記を追加

<?php outputThumbnail();?>

About Site

同じことを何度も検索していたりするんで、検索して解決したことを残そうと思いまして。