// 画像を登録しておく
// 投稿画面でサムネイル画像を設定できるようになる
add_theme_support('post-thumbnails');
// それぞれの用途で使う画像のサイズを登録しておく
add_image_size('top', 1077, 622, true);
add_image_size('contribution', 557, 280, true);
add_image_size('front-contribution', 255, 189, true);
add_image_size('common', 465, 252, true);
add_image_size('detail', 1100, 330, true);
add_image_size('search', 168, 168, true);
//サムネイル画像があるなら表示する
function my_post_thumbnail($size = 'common') { if ( has_post_thumbnail() ) { the_post_thumbnail($size); } else { // アイキャッチ画像がない場合の処理（例：デフォルト画像を表示） echo '<img src="' . get_stylesheet_directory_uri() . '/img/noimage.jpg" alt="No Image">'; }
}トップと投稿ページでメイン画像と出しわける
function get_main_image() { if ( is_page() ): return get_the_post_thumbnail( $post->ID, 'detail' ); elseif ( is_category( 'news' ) || is_singular( 'post' ) ): return '<img src="'. get_template_directory_uri(). '/assets/images/bg-page-news.jpg" />'; else: return '<img src="'. get_template_directory_uri(). '/assets/images/bg-page-dummy.png" />'; endif;
}WordPressのテンプレート内でよく見かけるget_the_post_thumbnail($post->ID,'detail')という関数ですが、この中の$post->IDがどこから来ているのか、という疑問は非常に自然なものです。
$post->IDは、現在のループ内で扱っている投稿のIDを表します。
- The Loopの開始: WordPressのテンプレート内で、投稿一覧を表示したい場合など、
The Loopと呼ばれる処理が実行されます。このループは、データベースから投稿を取得し、一つずつ処理していきます。 - $postグローバル変数:
The Loopが一回回るごとに、$postというグローバル変数に、現在の投稿に関する情報が格納されます。この$postオブジェクトには、投稿のタイトル、内容、ID、投稿日など、様々な情報が含まれています。 - $post->IDの利用:
$post->IDは、この$postオブジェクトのIDプロパティにアクセスすることで取得できます。つまり、$post->IDは、現在のループで扱っている投稿の一意な識別子ということになります。
PHP
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <h2><?php the_title(); ?></h2> <?php the_content(); ?> <img src="<?php echo get_the_post_thumbnail_url( $post->ID, 'detail' ); ?>" alt="">
<?php endwhile; endif; ?>この例では、the_post()によって$post変数が更新され、get_the_post_thumbnail_url()関数で現在の投稿のアイキャッチ画像のURLを取得しています。
get_the_post_thumbnail()の使い方
WordPressのget_the_post_thumbnail()関数は、現在の投稿に設定されたアイキャッチ画像を取得し、HTMLの<img>タグとして出力する関数です。ブログ記事のトップ画像や、投稿一覧のサムネイル画像としてよく利用されます。
PHP
<?php the_post_thumbnail(); ?>このコードをテンプレート内に記述すると、現在の投稿のアイキャッチ画像がデフォルトのサイズで表示されます。
get_the_post_thumbnail()関数は、以下の3つの引数を取ることができます。
- $size: 画像サイズのスラッグ。登録済みの画像サイズを指定します。
- $attr:
<img>タグの属性を指定する配列。 - $post_id: 投稿IDを指定する場合に使用します。
PHP
<?php
get_the_post_thumbnail( $post->ID, // 投稿ID 'medium', // 画像サイズ array( 'class' => 'my-image', 'alt' => get_the_title() )
);
?>この例では、現在の投稿のIDを指定し、mediumサイズの画像を取得しています。また、<img>タグにclass="my-image"とalt属性を追加しています。
- 画像サイズ:
$size引数に指定する画像は、事前にadd_image_size()関数で登録しておく必要があります。 - 属性:
$attr引数で指定できる属性は、HTMLの<img>タグで利用できる属性がほとんど使用できます。 - 投稿ID:
$post_id引数を指定すると、別の投稿のアイキャッチ画像を取得できます。
function my_post_thumbnail($size = 'common', $class = '') { if ( has_post_thumbnail() ) { $attributes = array( 'class' => $class, ); the_post_thumbnail($size, $attributes); } else { // アイキャッチ画像がない場合の処理 echo '<img src="' . get_stylesheet_directory_uri() . '/assets/img/noimage-760x460.png" class="' . esc_attr($class) . '">'; }
}
