新しく作ったカスタム投稿タイプでアーカイブページを作成したときに、
一覧で表示される投稿のサムネイル画像が、画像のサイズによってバラバラで統一感がなかったので、備忘録として残します。
今回使用する関数
add_image_size( $name, $width, $height, $crop );
画像のサイズを登録する関数、引数にそれぞれ任意のname、横幅、縦幅、アスペクトを維持するかの指定をする
wp_get_attachment_image_src( $attachment_id, $size, $icon );
画像ファイルのURL、横幅、縦幅を配列として返す
get_post_thumbnail_id();
投稿されているサムネイルのidを取得
手順
1,functions.phpでサムネイルを出力する設定を確認する
add_theme_support( 'post-thumbnails' );
2,functions.phpに下記を記述
if( function_exists('add_image_size')){
add_image_size('new_size',200,200, true);
}
今回はnameをnew_sizeとする。ここは任意の名前でよい。縦横のサイズを200pxで固定
第四引数にtrueを指定し、アスペクトを維持しながら、中央から切り取った画像になる。
3,phpファイルの確認
$large_image_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'new_size');
<img src="<?php echo $large_image_url[0]; ?>" width="<?php echo $large_image_url[1]; ?>" height="<?php echo $large_image_url[2]; ?>" alt="<?php bloginfo('name'); ?>" />
ここは一部を抜粋。
大事なのは
wp_get_attachment_image_srcの第二引数にadd_image_sizeのname（第一引数）を指定することと
imgタグのwidthとheightは配列の第一引数と第二引数を指定すること。
4,既存のサムネイルはリサイズされないので、必要であればプラグインを使って一括修正する
Regenerate Thumbnails
参考文献
テンプレートタグ/get post thumbnail id
https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/get_post_thumbnail_id
関数リファレンス/wp get attachment image src
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_get_attachment_image_src
投稿の画像サイズを均一にする＜WordPress＞
https://kaminarimagazine.com/web/2017/11/10/%E6%8A%95%E7%A8%BF%E3%81%AE%E7%94%BB%E5%83%8F%E3%82%B5%E3%82%A4%E3%82%BA%E3%82%92%E5%9D%87%E4%B8%80%E3%81%AB%E3%81%99%E3%82%8B%EF%BC%9Cwordpress%EF%BC%9E/
関数リファレンス/add image size
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/add_image_size