画像の登録と表示

画像サイズの登録

// 画像を登録しておく

// 投稿画面でサムネイル画像を設定できるようになる
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;
}

$post->IDの由来について

WordPressのテンプレート内でよく見かけるget_the_post_thumbnail($post->ID,'detail')という関数ですが、この中の$post->IDがどこから来ているのか、という疑問は非常に自然なものです。

$post->IDは、現在のループ内で扱っている投稿のIDを表します。

具体的な流れ

1. The Loopの開始: WordPressのテンプレート内で、投稿一覧を表示したい場合など、The Loopと呼ばれる処理が実行されます。このループは、データベースから投稿を取得し、一つずつ処理していきます。
2. $postグローバル変数: The Loopが一回回るごとに、$postというグローバル変数に、現在の投稿に関する情報が格納されます。この$postオブジェクトには、投稿のタイトル、内容、ID、投稿日など、様々な情報が含まれています。
3. $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) . '">';
  }
}

画像を取得して背景画像にする