記事のアイキャッチ画像を活用して、ページデザインの幅を広げる

記事のアイキャッチ画像の登録と、表示させる方法

使用しているテーマがアイキャッチ画像に対応していない場合に対応させる方法について説明する。

functions.phpに記述

この記述を行うことで、投稿画面等にアイキャッチ画像の項目が表示される。

<?php
function eyecatch() {
add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'eyecatch' );
?>

アイキャッチ画像の呼び出し方

アイキャッチ画像を表示させたい箇所に下記を記述する。
基本的に記事のwhileループ内で使用する。

<?php the_post_thumbnail(); ?>

アイキャッチ画像の大きさの変更の仕方

300×300にしたい場合は、下記のようになる。

<?php the_post_thumbnail( array(300,300) ); ?>

管理画面上の「設定」→「メディア」で指定したサイズで出力する場合

<?php
//サムネイルサイズ
the_post_thumbnail('thumbnail');
//中サイズ
the_post_thumbnail('medium');
//大サイズ
the_post_thumbnail('large');
//フルサイズ
the_post_thumbnail('full');
?>

アイキャッチ画像のスタイルシートによるデザイン指定も可能

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

アイキャッチ画像の大きさを最初から設定する方法

先ほどまでは、アイキャッチ画像の有効化をfunctions.phpで行い、投稿画面に「アイキャッチ画像」の項目を追加した。
そして、記事のループ内にてアイキャッチ画像の大きさを指定した。
そうではなく、アイキャッチ画像の大きさを指定する場合、functions.phpに下記を記述する。

サンプルコード

add_theme_support( 'post-thumbnails', array( 'post' ) );
set_post_thumbnail_size( 300, 300, true );

set_post_thumbnail_size の第一引数で横幅、第二引数で縦幅を決定している。
第三引数で画像の縮小時に切り抜きするかどうかを指定。
切り抜きはtrue、切り抜かない場合は、falseを指定する。省略時はfalseが設定される。
アイキャッチ画像の呼び出し方法は、先ほどと同じように呼び出したい箇所にthe_post_thumbnail();を記述する。

アイキャッチ画像のURLを取得して、imgタグと併用して画像表示させる

<img src="アイキャッチ画像のURL" width="280">
上記のようにしたい場合、アイキャッチ画像のURLを取得すれば良い。
<img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>" width="280">

この記事が気に入ったら下のボタンをクリック