【WordPress】任意のサイズでトリミングしたアイキャッチ画像のパスを取得する方法
WordPress2016年9月21日
以前の記事では単純にアップロードした画像のパスをそのまま取得する方法をご紹介いたしましたが、本記事ではアップロードした画像を任意のサイズでトリミングしたアイキャッチ画像のパスを取得する方法をご紹介いたします。
<?php the_post_thumbnail(); ?>は使わずにパスだけ取得しますので、ある程度どんなテーマでも応用が利くと思います。
想定ケース
- 660×300の画像の中央部分を300×300でトリミング
- サイドバーでトリミングした画像パスを取得
実装手順
①function.phpにアイキャッチ画像をトリミングする記述を追加
add_image_size('任意の名前',任意の縦サイズ,任意の横サイズ,true);- 任意の名前：テンプレートphpで呼び出す際の名前
- 任意の縦サイズ：トリミング画像の縦サイズを規定
- 任意の横サイズ：トリミング画像の横サイズを規定
今回は「thum300」という名前で300×300の画像を書き出すため、以下のように記述します。
add_image_size('thum300',300,300,true);②アイキャッチ画像をアップロード
function.phpに記載したサイズでのトリミングは、設定以降にアップロードした画像に限られますのでご注意ください。
③サイドバーのphpでトリミングした画像パスを取得するphpを記述
ちょっと長ったらしいですが、以下のソースコードでトリミングした画像のパスを取得できます。
<?php if ( has_post_thumbnail() ) : ?>
<?php $img_id = get_post_thumbnail_id();
$img_thumbnail = wp_get_attachment_image_src( $img_id , 'thum300' );
echo ''.$img_thumbnail[0].'';?>
<?php else: ?>
<?php endif; ?>- ※「/wp-content/uploads/アップしたファイル名-縦サイズx横サイズ.jpg|gif|png」を取得
Web屋の芝生DIYでは、サイドバーの「最新の記事」「人気記事」でトリミングした画像パスを取得して表示しています。
まとめ
本記事の内容は以前の記事の応用編といった感じです。
先日、本記事の実装に合わせてトップページでもアイキャッチ画像を表示するデザインに変更しました。トップページはリサイズの必要は無くアップロードした660×300の画像をそのまま使用したかったため、以前ご紹介した以下のソースコードで、アップロードした画像パスをそのまま取得しています。
<?php if ( has_post_thumbnail() ) {
$image_id = get_post_thumbnail_id ();
$image_url = wp_get_attachment_image_src ($image_id, true);
echo $image_url[0];
} else {
echo get_bloginfo( 'template_directory' ) . '//アイキャッチが存在しない場合の代替画像パスを記述';
} ?>さらに別サイズでトリミングして使い分けたい場合は、function.phpに記述を追加して対象のテンプレートphpで呼び出せばよいです。
テキストだけのサイトではどうしても味気なくなりがちなので、上手にアイキャッチを実装することでデザインも華やかになります。
ぜひ本記事の内容をお役立ていいただければ幸いです。