アイキャッチ画像の機能は、個々の投稿や固定ページにその投稿を端的に表すことができる機能です。
アイキャッチ画像を有効にする
WordPressはアイキャッチ画像を制御する機構が組み込まれていますが、初期状態では無効になっています。
この機能の有効にするには、テーマの functions.php に以下のadd_theme_support()という関数を追加します。
functions.php
function twpp_setup_theme() {
add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'twpp_setup_theme' );ページを限定してアイキャッチ画像を有効にする
投稿ページだけでアイキャッチ画像を有効化する場合など、ページのタイプを限定してアイキャッチ画像の機能を有効にするには、add_theme_support の関数を指定します。
投稿ページに限定してアイキャッチ画像を有効
functions.php
function twpp_setup_theme() {
add_theme_support( 'post-thumbnails', array( 'post' ) );
}
add_action( 'after_setup_theme', 'twpp_setup_theme' );固定ページに限定してアイキャッチ画像を有効
functions.php
function twpp_setup_theme() {
add_theme_support( 'post-thumbnails', array( 'page' ) );
}
add_action( 'after_setup_theme', 'twpp_setup_theme' );固定ページとカスタム投稿タイプ(hogehoge)に限定してアイキャッチ画像を有効
functions.php
function twpp_setup_theme() {
add_theme_support( 'post-thumbnails', array( 'page', 'hogehoge' ) );
}
add_action( 'after_setup_theme', 'twpp_setup_theme' );アイキャッチ画像を判別して出力
ページにアイキャッチ画像が割当られているかどうかを、has_post_thumbnail という関数で調べます。
通常は、WordPressループの中で has_post_thumbnail 関数を実行して、アイキャッチ画像があるかどうかで出力を分けるようにします。
PHP
<?php if(has_post_thumbnail()): ?>
<?php the_post_thumbnail('thumbnail'); ?>
<?php else: ?><!--アイキャッチ画像がない場合は、デフォルトの画像を表示-->
<img src="<?php echo get_template_directory_uri(); ?>/images/default.jpg" alt="デフォルトのアイキャッチ画像"/>
<?php endif; ?>アイキャッチ画像の出力
ページにアイキャッチ画像が割当られている場合、the_post_thumbnail()をループの中で使いアイキャッチ画像を出力します。
PHP
<?php the_post_thumbnail(); ?>この関数には、パラメータとして以下の文字列を渡すことができます。
| 種類 | 文字列 | 画像のサイズ |
|---|---|---|
| サムネイル | 'thumbnail' | 150×150 |
| 中サイズ | 'medium' | 300×300 |
| 大サイズ | 'large' | 1000×1000 |
画像のサイズは、WordPressの［設定］→［メディア］でそれぞれ設定されているので、変更が可能です。
ループの中で出力するには、以下のように記述します。
PHP
<?php the_post_thumbnail( 'thumbnail' ); ?>アイキャッチ画像のURL(文字列)を取得して出力
アイキャッチ画像のURL(文字列)を出力するには、the_post_thumbnail_url の関数を使います。
PHP
<img src="<?php the_post_thumbnail_url(); ?>" alt="">imgタグの中に記述して、アイキャッチ画像を表示することができます。
PHP
<?php if(has_post_thumbnail()): ?>
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<img src="<?php the_post_thumbnail_url(); ?>"/>
</a>
<?php endif; ?>
