WordPress アイキャッチ画像

  Code Tips minimum Theme

作成中の「Code Tips minimum Theme」でアイキャッチ画像(サムネイル)を使えるようにします。

アイキャッチ画像(Thumbnails)とは、1つの投稿に対して1つ画像を登録でき、アーカイブページなどで投稿のアイコン的な役割をはたす画像です。
アイキャッチ画像の機能を登録すると、ダッシュボードの「新規投稿」または既存の投稿の「編集」から画像を設定できるようになります。

作成中の「Code Tips minimum Theme」では、まだ「アイキャッチ画像」の設定項目は無い状態です。

 

アイキャッチ画像の登録

アイキャッチ画像を使えるようにするためには、【functions.php】に add_theme_support(‘post-thumbnails’) を登録します。

【functions.php】

// thumbnails
add_theme_support('post-thumbnails');

 

add_theme_support(‘post-thumbnails’)

WordPress Codex : 投稿サムネイル

オプションとして、アイキャッチ画像を有効にしたい投稿タイプの配列を第2引数で渡すことができます。

add_theme_support( 'post-thumbnails', array('post')); // 投稿のみ
add_theme_support( 'post-thumbnails', array('page')); // 固定ページのみ
add_theme_support( 'post-thumbnails', array('post', 'movie')); // 投稿と動画

 

キャッチ画像を出力するためのテンプレートタグの設置

キャッチ画像を出力するためのテンプレートタグを【index.php】、【home.php】、【single.php】それぞれに追加します。

アイキャッチ画像は the_post_thumbnail() を追加してキャッチ画像を表示するよにします。
また、 the_post_thumbnail() の前に条件分岐 if (has_post_thumbnail()) を使ってキャッチ画像があるかどうかを判定します。

【index.php】と【home.php】

・・・略・・・
<?php echo get_the_date(); ?>
  <?php if(has_post_thumbnail()) : ?>
  <?php the_post_thumbnail(); ?>
  <?php endif; ?>
・・・略・・・

 

【single.php】では「大」サイズのキャッチ画像を表示させてみます。

<?php the_title( '<h2>', '</h2>' ); ?>
 <?php if(has_post_thumbnail()) : ?>
 <?php the_post_thumbnail('large'); ?>
 <?php endif; ?>

 

the_post_thumbnail()

現在の投稿について、投稿編集画面で設定されたアイキャッチ画像(以前は投稿サムネイルと呼ばれていました)を表示します。

WordPress Codex : テンプレートタグ/the post thumbnail

the_post_thumbnail( $size, $attr )

 

位置

ループ内

 

パラメータ
引数 説明
$size
文字列/配列
オプション
画像サイズ。キーワード(thumbnail, medium, large, full)、または add_image_size() で定義したカスタムサイズのキーワード、もしくは幅と高さをピクセルで指定する要素2つの配列、例えば array( 32, 32 )
初期値: 'post-thumbnail' – テーマ(の functions.php)内で set_post_thumbnail_size() を使って設定したサイズ。
$attr
配列
オプション
アイキャッチ画像を表示する HTMLimg タグに含める属性/値を配列で記述。詳細は the_post_thumbnail が依存している wp_get_attachment_image() を参照。
初期値: なし

 

画像サイズ

WordPress のデフォルトの画像サイズは thumbnail, medium, large, full(アップロードした画像のサイズ)です。
これらの画像サイズは WordPress の管理画面の 「設定」 > 「メディア」 で確認と設定することができます。

the_post_thumbnail();  // パラメータなし = the_post_thumbnail( 'thumbnail' );
the_post_thumbnail( 'thumbnail' );  // サムネイル (デフォルト 150px x 150px :最大値)
the_post_thumbnail( 'medium' );  // 中サイズ   (デフォルト 300px x 300px :最大値)
the_post_thumbnail( 'large' );  // 大サイズ   (デフォルト 640px x 640px :最大値)
the_post_thumbnail( 'full' );  // フルサイズ (アップロードした画像の元サイズ)
the_post_thumbnail( array(100, 100));  // 他のサイズ

 

has_post_thumbnail()

投稿にアイキャッチ画像(以前は投稿サムネイルと呼ばれていました)が登録されているかどうかをチェックする関数です。

WordPress Codex : 関数リファレンス/has post thumbnail

has_post_thumbnail( $post_id )

 

パラメータ
引数 説明
$post_id
整数
オプション
投稿 ID
初期値:null – 現在の投稿

 

戻り値
真偽値 アイキャッチ画像が付いていれば true を、付いていなければ false を返す。

 

以上でキャッチ画像の設定は完了です。
ダッシュボードの「新規投稿」または既存の投稿の「編集」からアイキャッチ画像の設定ができるようになります。

 

Code Tips minimum Theme

【functions.php】

<?php
// css
function register_style() {
  wp_register_style('style', get_stylesheet_uri(), array(), false, 'all');
}
function add_stylesheet() {
  register_style();
  wp_enqueue_style('style');
}
add_action('wp_enqueue_scripts', 'add_stylesheet');

// sidebar
function my_widgets_init() {
  $my_widgets_param = array(
    'name' => 'Sidebar',
    'id' => 'sidebar-1'
  );
  register_sidebar( $my_widgets_param );
}
add_action( 'widgets_init', 'my_widgets_init' );

// custom menu
function register_my_menu() {
  register_nav_menu('primary', 'Primary Menu');
}
add_action('after_setup_theme', 'register_my_menu');

// search-form >> html5
add_theme_support('html5', array('search-form'));

// custom background
$background_param = array(
  'default-color' => 'ffffff'
);
add_theme_support( 'custom-background', $background_param );

// custom header
$header_params = array(
  'width' => 1140,
  'height' => 250,
  'header-text' => false
  );
add_theme_support( 'custom-header', $header_params );

// thumbnails
add_theme_support('post-thumbnails');
?>

 

【index.php】

<?php get_header(); ?>
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

  <?php the_title( '<h3><a href="' . esc_url( get_permalink() ) . '">', '</a></h3>' ); ?>

  <?php if(has_post_thumbnail()) : ?>
  <?php the_post_thumbnail(); ?>
  <?php endif; ?>

  <?php echo get_the_date(); ?>

  <?php endwhile; ?>
  <?php
    $pagination_param = array(
      'mid_size' => 2,
      'prev_text' => '&lt;',
      'next_text' => '&gt;',
      'screen_reader_text' => 'Page Navigation'
    );
    the_posts_pagination($pagination_param);
  ?>
  <?php endif; ?>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

 

【home.php】

<?php get_header(); ?>
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

  <?php the_title( '<h2><a href="' . esc_url( get_permalink() ) . '">', '</a></h2>' ); ?>
  <?php if(has_post_thumbnail()) : ?>
  <?php the_post_thumbnail(); ?>
  <?php endif; ?>
  <?php the_content('続きを読む…'); ?>
  <?php echo get_the_date(); ?>

  <?php endwhile; ?>
  <?php
    $pagination_param = array(
      'mid_size' => 2,
      'prev_text' => '&lt;',
      'next_text' => '&gt;',
      'screen_reader_text' => 'Page Navigation'
    );
    the_posts_pagination($pagination_param);
  ?>
  <?php endif; ?>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

 

【single.php】

<?php get_header(); ?>
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
 
  <?php the_title( '<h2>', '</h2>' ); ?>
  <?php echo get_the_date(); ?>
  <?php if(has_post_thumbnail()) : ?>
  <?php the_post_thumbnail('large'); ?>
  <?php endif; ?>
  <?php the_content(); ?>
  <?php previous_post_link('%link','&lt; PREVIOUS'); ?> | <?php next_post_link('%link','NEXT &gt;'); ?>

  <?php endwhile; ?>
  <?php endif; ?>

<?php get_sidebar(); ?>
<?php get_footer(); ?>