WordPress 投稿記事の最初の画像のサムネイルを取得して表示させる-2022年版

Filed under: functions.php,wordpress — kdcs @ 22年1月18日 火曜日

wordpress5.7.3で投稿記事の最初の画像のサムネイルを取得して表示させる動作が不安定になり、表示出来たりできなかったりしたため、過去のコードを見直した。

preg_match_allの記述を変更

変更前

preg_match_all('/<img.+?class=".+?wp-image-(.+).*?".*?>/i', $post->post_content, $matches);

変更後

preg_match_all( '/<img.+class=[\'"].*wp-image-([0-9]+).*[\'"].*>/i', $post->post_content, $matches );

function.phpにこちらを記述する(全体)
記事内に画像が無い場合の代替画像「default1.png」

/* ---------------------------------------------------------------------------------------
   ◆◆◆ 投稿記事の最初の画像のサムネイル ?php echo my_first_image_thumb(); ? で表示 ####
------------------------------------------------------------------------------------------*/
function my_first_image_thumb(){
  global $post, $posts;
  $img_url = '';
  //デフォルト画像の設定
  $defaute_url = get_stylesheet_directory_uri(). '/images/default1.png';

  //最初の画像を取得してIDを取得
  preg_match_all( '/<img.+class=[\'"].*wp-image-([0-9]+).*[\'"].*>/i', $post->post_content, $matches );
  if(isset($matches[1][0])){
    $img_id = ($matches[1][0]);
  }

  //最初の画像があれば分岐
  if(!empty($img_id)){
    //最初の画像IDからサムネイルのパスを取得してセット
    $img_url = my_wp_get_attachment_medium_url($img_id);
  } else {
    //最初の画像がない場合、デフォルト画像のパスをセット
    $img_url = $defaute_url;
  }
  return $img_url;
}

  //画像IDからサムネイルサイズのパスを取得(画像サイズ変更可能)
  //画像サイズ (thumbnail, medium, large, full or custom size)
function my_wp_get_attachment_medium_url( $id ) {
  $thumbnail_array = image_downsize( $id, 'thumbnail' );
  $thumbnail_path = $thumbnail_array[0];
  return $thumbnail_path;
}

ページ内の表示させたい部分に以下を記述

<img src="<?php echo my_first_image_thumb(); ?>">

参考【WordPress】記事内の最初の画像をサムネイルとして取得する方法【全サイズ・srcset&sizes対応版】

function.php

// $get_size: 取得する画像のサイズ
// $altimg_id: 代替画像のID。(画像はあらかじめメディアライブラリからアップロードしておく)
//             nullの場合、投稿内に画像が無ければ何も出力しない
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;
}

ページ内の出力場所

<?php
$catch_thumbnail_size = 'thumbnail';
if(has_post_thumbnail()){
    the_post_thumbnail($catch_thumbnail_size);
} else {
    echo catch_thumbnail_image($catch_thumbnail_size);
}
?>

サイト内検索

カテゴリー

最近の投稿

« |WordPress 投稿記事の最初の画像のサムネイルを取得して表示させる-2022年版| »
↑上に戻る