アイキャッチ画像とサムネイル

2020.04.06 2020.04.06

TOPICS

翻訳元記事はこちらです。

アイキャッチ画像は、個々の投稿、ページ、またはカスタム投稿タイプを表す画像です。テーマを作成する際には、アーカイブページ、ヘッダー、投稿の上など、さまざまな方法でアイキャッチ画像を出力することができます。

アイキャッチ画像を有効化する

テーマは、アイキャッチ画像インターフェースが編集画面に表示される前に、アイキャッチ画像関数のサポートを宣言しなければなりません。テーマのfunctions.phpファイルに以下を記述することでサポートを宣言します。

add_theme_support( 'post-thumbnails' );

特定の投稿タイプにのみアイキャッチ画像を有効にするには、add_theme_support() を参照してください。

アイキャッチ画像を設定する

アイキャッチ画像を有効化すると、アイキャッチ画像メタボックスは、該当するコンテンツアイテムの編集画面で表示されます。ユーザーが表示できない場合は、画面オプションで有効にすることができます。

関数リファレンス

add_image_size() – 新しい画像のサイズを追加する

set_post_thumbnail_size() – サムネイルの画像サイズを登録する

has_post_thumbnail() – アイキャッチ画像があるかチェックする

the_post_thumbnail() – アイキャッチ画像を表示する

get_the_post_thumbnail() – アイキャッチ画像のパスを取得する

get_post_thumbnail_id() – アイキャッチ画像のIDを取得する

画像サイズ

WordPress のデフォルトの画像サイズは、「サムネイル」「中」「大」「フルサイズ」（アップロードした画像の元のサイズ）です。これらの画像サイズは、WordPress 管理画面の「設定」→「メディア」で設定することができます。また、画像の寸法を配列で渡すことで、独自の画像サイズを定義することもできます。

the_post_thumbnail(); // Without parameter ->; Thumbnail
the_post_thumbnail( 'thumbnail' ); // Thumbnail (default 150px x 150px max)
the_post_thumbnail( 'medium' ); // Medium resolution (default 300px x 300px max)
the_post_thumbnail( 'medium_large' ); // Medium-large resolution (default 768px x no height limit max)
the_post_thumbnail( 'large' ); // Large resolution (default 1024px x 1024px max)
the_post_thumbnail( 'full' ); // Original image resolution (unmodified)
the_post_thumbnail( array( 100, 100 ) ); // Other resolutions (height, width)

アイキャッチ画像のカスタムサイズを追加する

以下のコードを使って、個別に画像サイズを定義することに加えて、

the_post_thumbnail( array(  ,  ) );

テーマの関数ファイルにカスタムのアイキャッチ画像のサイズを作成し、それをテーマのテンプレートファイルで呼び出すことができます。

add_image_size( 'category-thumb', 300, 9999 ); // 300 pixels wide (and unlimited height)

ここでは、テーマのfunctions.phpファイルでカスタムのアイキャッチ画像サイズを作成する方法の例を示します。

if ( function_exists( 'add_theme_support' ) ) {
    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 150, 150, true ); // default Featured Image dimensions (cropped)
 
    // additional image sizes
    // delete the next line if you do not need additional image sizes
    add_image_size( 'category-thumb', 300, 9999 ); // 300 pixels wide (and unlimited height)
}

アイキャッチ画像の出力サイズを設定する

functions.phpファイルに以下のコードを追加します。
set_post_thumbnail_size()を使用して、画像のサイズをプロポーショナルにリサイズして(つまり、画像を歪めずに)デフォルトのアイキャッチ画像のサイズを設定することができます。

set_post_thumbnail_size( 50, 50 ); // 50 pixels wide by 50 pixels tall, resize mode

画像をトリミングして、デフォルトのアイキャッチ画像のサイズを設定します。(横から、または上下から)

set_post_thumbnail_size( 50, 50, true ); // 50 pixels wide by 50 pixels tall, crop mode

アイキャッチ画像のスタイリング

アイキャッチ画像には「wp-post-image」というクラスが与えられます。また、表示されるサムネイルのサイズに応じてクラスが与えられます。これらのCSSセレクタを使って、出力のスタイルを設定することができます。

img.wp-post-image
img.attachment-thumbnail
img.attachment-medium
img.attachment-large
img.attachment-full

また、the_post_thumbnail()の属性パラメータを使用することで、アイキャッチ画像に独自のクラスを与えることもできます。
以下のコードでは、アイキャッチ画像を “alignleft “クラスで表示します。

the_post_thumbnail( 'thumbnail', array( 'class' => 'alignleft' ) );

例

基本的な使い方

// check if the post or page has a Featured Image assigned to it.
if ( has_post_thumbnail() ) {
    the_post_thumbnail();
}

アイキャッチ画像を表示するのではなく PHP コードで使用するために返すには、次のようにします: get_the_post_thumbnail()

// check for a Featured Image and then assign it to a PHP variable for later use
if ( has_post_thumbnail() ) {
    $featured_image = get_the_post_thumbnail();
}

投稿のパーマリンク、大きい画像とリンクする

例1. アイキャッチ画像と投稿パーマリンクを特定のループでリンクするには、テーマのテンプレートファイル内で以下のように記述します。

<?php if ( has_post_thumbnail()) : ?>
    <a href="<?php the_permalink(); ?>" alt="<?php the_title_attribute(); ?>">
        <?php the_post_thumbnail(); ?>
    </a>
<?php endif; ?>

例2. ウェブサイト上のすべての投稿サムネイルを投稿パーマリンクにリンクするには、現在のテーマのfunctions.phpファイルに次のように記述します。

add_filter( 'post_thumbnail_html', 'my_post_image_html', 10, 3 );
 
function my_post_image_html( $html, $post_id, $post_image_id ) {
 
  $html = '<a href="' . get_permalink( $post_id ) . '">' . $html . '</a>';
  return $html;
 
}

次の例は、「大きな」アイキャッチ画像にリンクしており、ループ内で使用する必要があります。

if ( has_post_thumbnail()) {
   $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
   echo '<a href="' . $large_image_url . '">';
   the_post_thumbnail('thumbnail');
   echo '</a>';
}