WordPress(ワードプレス)でホームページを作りたい、カスタムしたいという人のためのサイトです。

アイキャッチ画像を表示させる方法【設定編】

TOP > カスタム方法 > アイキャッチ画像を表示させる方法【設定編】

WordPressの標準機能としてついているアイキャッチ画像は使うことで色々便利にカスタムできるんですが、テーマを自作したりした時にアイキャッチ画像がうまく表示できない場合があります。
そういう時は以下のような手順でアイキャッチ画像の設定を有効化し、使用しましょう。

WordPressのアイキャッチ画像の設定方法

アイキャッチ画像の使用には以下の2つのポイントがあります。
それぞれ解説します。

  • functions.phpに追記して有効化
  • テンプレート内に記述を追記して表示させる

functions.phpに追記して有効化

まずはアイキャッチ画像の機能を有効化するために、functions.phpに以下記述を追記します。

function mysetup() {
add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'mysetup' );

この記述を行うことで、Wordpressがアイキャッチ画像の設定を読み込んでくれて、投稿画面等にアイキャッチ画像の項目を表示してくれるというわけです。

テンプレート内に記述を追記して表示させる

機能面が有効化されたので、次は表示にかかる部分です。
index.php等の任意の箇所に以下の記述を追加すると表示されます。

<?php the_post_thumbnail(); ?>

ただ、この場合注意が必要なのは表示される際のサイズはアップロードした画像のサイズになります。
運用的に同じサイズで対応する場合であればこれで全く問題ありませんが、不規則なサイズの画像をアップロードして、かつその画像を全て同じサイズで表現したい場合などはここままではサイズの制御ができませんので、以下のような形に変更します。

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

この記述に変更することで300×300ピクセルの画像にリサイズされて表示されます。
もちろんこの方法でなく、CSSでサイズを変更して対応させるという方法もありますが、この記述の場合は画像自体をWordpressが適切なサイズにリサイズして表示してくれるのでデータとしてはCSSで対応するよりも軽くなりますので、こちらの方がオススメです。

アイキャッチ画像のこんな使い方

アイキャッチ画像がうまく使いこなせると表現の幅が広がります。
新着情報をサムネイルで表現できたり、人気記事や関連記事にサムネイルを表示できたりと記事への誘導がスムーズになります。
Wordpressでデザインをする場合の選択肢も必然的に増えるので是非導入してみましょう!


« »

ABOUT THE AUTHOR

こしもあんず
こしもあんず

Wordpressをカスタマイズすることが好きなギーク女子です。
好きなエディタはSublimetext2です。
Google+やってるので、よろしくです。
デザインは好きですが、PHPはあまり得意ではないのでその辺ご容赦くださいね。


Twitterはこちら
https://twitter.com/wordpresscusto1

ad