WordPressの関数を少しずつまとめていきます。
今回は、アイキャッチ画像を出力する関数「the_post_thumbnail」です。
目次
基本的な使い方
アイキャッチ画像を出力する関数です。
パラメータ | (1)サイズ、(2)クラス名を指定 |
戻り値 | 無し |
利用箇所 | WordPressループ内 |
パラメータを指定しない場合の記述は以下となります。
<?php the_post_thumbnail(); ?>
例
「has_post_thumbnail」関数とセットで使用。
投稿にアイキャッチ画像が有るか否かを確認し、有る場合は画像を表示。
<?php if (has_post_thumbnail()): ?>
/* 投稿にアイキャッチ画像が有る場合の処理 */
<?php the_post_thumbnail(); ?>
<?php endif; ?>
*アイキャッチ画像を有効にするには、
functions.phpに「 add_theme_support( ‘post-thumbnails’ ); 」の記述が必要となります。
the_post_thumbnail 関数の応用:アイキャッチ画像を「メディア設定」のサイズに表示する
1つ目のパラメータで文字列を記述することにより、アイキャッチ画像を「メディア設定」どおりのサイズに表示します。
WordPressの「設定」→「メディア」で設定、設定しなければデフォルト値で表示されます
また、指定サイズよりも元画像が小さい場合は、元画像のサイズで表示されます。
文字列 | サイズ |
---|---|
thumbnail | 「サムネイル」で指定したサイズ デフォルト:150px x 150px(最大値) |
medium | 「中サイズ」で指定したサイズ デフォルト:300px x 300px(最大値) |
large | 「大サイズ」で指定したサイズ デフォルト:640px x 640px(最大値) |
full | 画像の元サイズ |
例
「サムネイル」で設定したサイズで表示する
<?php the_post_thumbnail( 'thumbnail' ); ?>
the_post_thumbnail 関数の応用:アイキャッチ画像を任意のサイズに表示する
1つ目のパラメータで、アイキャッチ画像を任意のサイズに指定することも可能です。
指定サイズよりも元画像が小さい場合は、元画像のサイズで表示されます。
例
横「200px」縦「150px」で表示する
<?php the_post_thumbnail( array(200,150) ); ?>
the_post_thumbnail 関数の応用:アイキャッチ画像にクラス名を付与する
2つ目のパラメータで、アイキャッチ画像にクラス名を付与することも可能です。
例
クラス名「icatch」を指定する
<?php the_post_thumbnail( 'thumbnail', array( 'class' => 'icatch' ) ); ?>