ホームテクノサービスのスタッフによるブログです。WEBデザイン全般、IT関連、業務関連情報など。

  • 〒824-0001
  • 福岡県行橋市行事5-3-20
  • TEL:0930-26-6050

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



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

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

~ 目次 ~

  1. 基本的な使い方
  2. the_post_thumbnail()関数の応用:アイキャッチ画像を「メディア設定」のサイズに表示する
  3. the_post_thumbnail()関数の応用:アイキャッチ画像を任意のサイズに表示する
  4. 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' ) ); ?>