Posted in WordPress

アイキャッチ画像（サムネイル）を表示する関数　the_post_thumbnail()

   Published Date: 2015年9月7日

WordPressでは投稿の一番上にアイキャッチ画像を付けるのが主流になっています。

自分でテンプレートを作成するときにアイキャッチ機能を付ける方法を記載します。

投稿画面にアイキャッチ画像のメニューを表示させる方法

自分でWordPressでのテーマを作成するとき、デフォルトでは投稿画面に「アイキャッチ画像（アイキャッチ画像を設定）」項目は表示されていないので、下記のような設定作業を行ウ必要があります。

「functions.php」に一文を追加します。

add_theme_support( 'post-thumbnails', array( 'post' ) );

管理画面にメニューや機能を表示させるときには「functions.php」で設定することが多いですね。

構文

書式
void the_post_thumbnail( [ mixed $size = ‘post-thumbnail’ [ , mixed $attr = ” ] ] )

第一引数はサムネイルサイズ（省略時はpost-thumbnail）、第二引数はクラス名の指定になっています。

第一引数は以下のものが使えます。

the_post_thumbnail(); //パラメータ無し　→’post-thumbnail’
the_post_thumbnail( ‘thumbnail’ ); サムネイル（150 × 150）
the_post_thumbnail( ‘medium’ );中サイズ（300 × 300）
the_post_thumbnail( ‘large’ ); 大サイズ（640 × 640）
the_post_thumbnail( ‘full’ ); フルサイズ（アップロードした画像サイズ）
the_post_thumbnail( array(100, 100) ); //サイズを配列で指定

使い方

//アイキャッチ画像を表示
<?php the_post_thumbnail( ); ?>

//アイキャッチ画像のクラス指定（文字列）
<?php the_post_thumbnail( 'post-thumbnail', 'class=sample' ); ?>

//アイキャッチ画像のクラス指定（連想配列）
<?php the_post_thumbnail( 'post-thumbnail', array( 'class'=>'sample' ) ); ?>

表示時にサムネイルのサイズを設定

//第一引数に配列で縦横のピクセル数を指定
<?php the_post_thumbnail(array(100,100)); ?>

/*
 *アイキャッチ画像登録時に作られる各種サイズ画像を利用
*/

//サムネイルサイズを利用（小）
<?php the_post_thumbnail('thumbnail'); ?>

//中サイズ画像を利用
<?php the_post_thumbnail('medium'); ?>

//大サイズ画像を利用
<?php the_post_thumbnail('large'); ?>

サムネイルを表示させるための処理

実際にトップページに記事一覧（記事タイトルとアイキャッチ画像）を表示する場合は、画像の有無の判別が必要になります。the_post_thumbnail()関数ではアイキャッチ画像がない場合、何も表示しません。画像が無いときは画像が無いときのための表示が必要になると思います。

画像が無いときはあらかじめ準備しておいた画像を表示させるか、テキスト等でメッセージを表示させるなど、ユーザーがわかるようにしたほうが良いでしょう。

//アイキャッチ画像が存在するときの処理  
<?php if ( has_post_thumbnail() ): ?>
  //アイキャッチ画像を表示させる
  <?php the_post_thumbnail( 'thumbnail' ); ?>

//アイキャッチ画像が存在しないときの処理        
<?php else: ?>
  //必要な処理をここに記載
<?php endif; ?>



Author: webmaster