WordPressのテーマにアイキャッチ画像を複数サイズ設定する

投稿やページでメイン画像のような扱いで登録出来るアイキャッチ画像機能。 テーマファイルのfunctions.phpに以下を追加するとダッシュボードに表示され登録できるようになります。

 
<?php
//アイキャッチ画像
//※引数に"true"を追加しておくと指定のサイズにトリミング。
//※hogeは適当な名称に変更。
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 100, 9999 ); // w100px、h9999px (縦成り行き)
add_image_size( 'hoge', 180, 180, true); //2個目の画像設定 180pxの正方形
?>
 

アイキャッチ画像を読み込みたい場所に以下を追加。

 
<?php the_post_thumbnail(); ?>
<?php the_post_thumbnail('hoge'); ?> //2枚目の画像
//フルサイズの画像のパスを取得する場合
<img src="
<?php 
$the_pic_id = get_post_thumbnail_id();
$image = wp_get_attachment_image_src($the_pic_id, 'full');
echo $image[0];
?>
" alt="thumb" width="400px">
 

ダッシュボードのメディア設定で”サムネイル”、”中サイズ”、”大サイズ”の設定ができますが、そこで設定したサイズを使う場合は以下を追加。

 
<?php the_post_thumbnail('thumbnail'); ?> //サムネイル
<?php the_post_thumbnail('medium'); ?> // 中サイズ
<?php the_post_thumbnail('large'); ?> // 大サイズ
<?php the_post_thumbnail('full'); ?> // フルサイズ
 
  • このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

17 + 12 =