フィーチャー画像のサポートを有効にする

テーマは、フィーチャー画像インターフェースが編集画面に表示される前に、フィーチャー画像機能のサポートを宣言する必要があります。サポートは、テーマの functions.php ファイルに以下を追加することで宣言されます： 

  1. add_theme_support( 'post-thumbnails' );

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

フィーチャー画像を設定する

フィーチャー画像のサポートを追加すると、フィーチャー画像メタボックスが適切なコンテンツアイテムの編集画面に表示されます。ユーザーがそれを見られない場合は、画面オプションで有効にできます。

デフォルトでは、フィーチャー画像メタボックスは、投稿編集画面とページ編集画面のサイドバーに表示されます。

devhbook-featured_image

関数リファレンス

add_image_size() – 新しい画像サイズを登録します。

set_post_thumbnail_size() – 投稿サムネイル用の画像サイズを登録します。

has_post_thumbnail() – 投稿に添付された画像があるか確認します。

the_post_thumbnail() – 投稿サムネイルを表示します。

get_the_post_thumbnail() – 投稿サムネイルを取得します。

get_post_thumbnail_id() – 投稿サムネイルIDを取得します。

画像サイズ

WordPressのデフォルトの画像サイズは「サムネイル」、「中」、「大」、および「フルサイズ」（アップロードした画像の元のサイズ）です。これらの画像サイズは、WordPress管理メディアパネルの **

設定 > メディア** で設定できます。また、画像の寸法を含む配列を渡すことで独自の画像サイズを定義することもできます： 

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

カスタムフィーチャー画像サイズを追加する

画像サイズを個別に定義することに加えて、 

  1. the_post_thumbnail( array(  ,  ) );

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

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

以下は、テーマの functions.php ファイルでカスタムフィーチャー画像サイズを作成する方法の例です。 

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

フィーチャー画像の出力サイズを設定する

現在のテーマの functions.php ファイルで使用されます。

set_post_thumbnail_size() を使用して、画像を比例的にリサイズすることでデフォルトのフィーチャー画像サイズを設定できます（つまり、歪めずに）： 

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

画像をトリミングしてデフォルトのフィーチャー画像サイズを設定します（側面または上下から）： 

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

フィーチャー画像のスタイリング

フィーチャー画像には「wp-post-image」というクラスが付与されます。また、表示されるサムネイルのサイズに応じてクラスが付与されます。これらのCSSセレクタを使用して出力をスタイリングできます： 

  1. img.wp-post-image
  2. img.attachment-thumbnail
  3. img.attachment-medium
  4. img.attachment-large
  5. img.attachment-full

the_post_thumbnail() の属性パラメータを使用して、フィーチャー画像に独自のクラスを付与することもできます。

クラス「alignleft」でフィーチャー画像を表示します： 

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

例

デフォルトの使用法

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

フィーチャー画像を表示するのではなく、PHPコードで使用するために返すには、次を使用します：get_the_post_thumbnail() 

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

投稿のパーマリンクまたは大きな画像へのリンク

同じテーマ内でこれらの2つの例を一緒に使用しないでください。

例1. 特定のループ内で投稿サムネイルを投稿のパーマリンクにリンクするには、テーマのテンプレートファイル内で次を使用します： 

  1. <?php if ( has_post_thumbnail()) : ?>
  2.    <a href="<?php the_permalink(); ?>" alt="<?php the_title_attribute(); ?>">
  3.    <?php the_post_thumbnail(); ?>
  4.    </a>
  5. <?php endif; ?>

例2. ウェブサイト上の すべての投稿サムネイル を投稿のパーマリンクにリンクするには、現在のテーマの functions.php ファイルにこれを追加します： 

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

この例は「大」投稿サムネイル画像サイズにリンクし、The Loop 内で使用する必要があります。 

  1. if ( has_post_thumbnail()) {
  2.    $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
  3.    echo '<a href="' . $large_image_url[0] . '">';
  4.    the_post_thumbnail('thumbnail');
  5.    echo '</a>';
  6. }

ソースファイル

外部リソース