WordPressのアイキャッチ画像を投稿記事のヘッダー画像として使う方法

関連記事などで利用しているアイキャッチ画像を応用して使う

せっかく作ったアイキャッチ画像をページ一覧などのサムネイル画像としてだけ使うのはもったいないですよね。ここでは、設定したアイキャッチ画像を自動的に投稿記事タイトルの真下に表示する方法について説明していきます。

基本的な使い方(get_the_post_thumbnail)

single.phpなどの表示したい場所に、get_the_post_thumbnailを使います!するとページ上ではimgタグで表示されます。

$post_id
投稿記事のID(そのままでいい。)
$size
サイズは「thumbnail(サムネイル)」「medium(中)」「large(大)」「full(オリジナルサイズ)」または「 array( 横幅, 縦幅 )」から選択
$attr
いろいろな属性を設定できる。

画像のサイズはどれがいいか?

タイトル下の画像となるので「full」を選択することをおすすめしますが、あなたのお好みの設定を選択してください。
投稿記事のタイトル直下では、「full」を指定し大きな画像を使い、サイドバーなどの一覧ではサムネイルサイズが自動で表示されるように、
管理画面の設定→メディアのページで「サムネイルのサイズ」を指定し、「サムネイルを実寸法にトリミングする」のチェック項目にチェックをいれることをおすすめします。

サムネイルのサイズ

imgタグにclass属性追加する方法

例えばBootstrapで使う場合は

画像をレスポンシブデザインで使う(横幅をフルに使う)class属性「img-responsive」
画像を中央寄せにするclass属性「img-center-block」を追加する場合は、以下のようになります。

まとめ(コードサンプル)

投稿記事上(single.php)でタイトルの直下にアイキャッチ画像を設定するコード(サンプル)。 表示されるHTMLタグは、だいたい下記のような感じになります。

詳細設定は下記のページを参考にしてください。

このページの関連ワード