2017年6月12日 2024年4月3日 seigetsu-web

アイキャッチ画像を出力する関数「the_post_thumbnail」：WordPress関数まとめ

WordPressの関数を少しずつまとめていきます。
今回は、アイキャッチ画像を出力する関数「the_post_thumbnail」です。

～目次～

基本的な使い方

アイキャッチ画像を出力する関数です。

パラメータを指定しない場合の記述は以下となります。

<?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’ ); 」の記述が必要となります。＊

1つ目のパラメータで文字列を記述することにより、アイキャッチ画像を「メディア設定」どおりのサイズに表示します。

WordPressの「設定」→「メディア」で設定、設定しなければデフォルト値で表示されます

また、指定サイズよりも元画像が小さい場合は、元画像のサイズで表示されます。

文字列	サイズ
thumbnail	「サムネイル」で指定したサイズデフォルト：150px x 150px（最大値）
medium	「中サイズ」で指定したサイズデフォルト：300px x 300px（最大値）
large	「大サイズ」で指定したサイズデフォルト：640px x 640px（最大値）
full	画像の元サイズ

例

「サムネイル」で設定したサイズで表示する

<?php the_post_thumbnail( 'thumbnail' ); ?>

1つ目のパラメータで、アイキャッチ画像を任意のサイズに指定することも可能です。

指定サイズよりも元画像が小さい場合は、元画像のサイズで表示されます。

例

横「200px」縦「150px」で表示する

<?php the_post_thumbnail( array(200,150) ); ?>

2つ目のパラメータで、アイキャッチ画像にクラス名を付与することも可能です。

例

クラス名「icatch」を指定する

<?php the_post_thumbnail( 'thumbnail', array( 'class' => 'icatch' ) ); ?>

星月WEBデザインでは
ホームページ（WEBサイト）・バナー画像等の制作依頼を受け付けています。

遠隔地の方は、クラウドソーシングのランサーズからお申し込みください。