BLOG

  • Facebook
  • Twitter

WordPressでアイキャッチ画像を表示させるときの書き方

越水大輔

越水大輔

こんにちは、福岡のホームページ制作シンス株式会社の越水です。

ブログやメディアタイプのホームページを制作する時に欠かせないのがアイキャッチ画像の設定です。

WordPressではアイキャッチ画像を表示させるための機能を備えており、やり方さえ覚えれば簡単にアイキャッチ画像で記事を目立たせることができます。

今回はWordPressでアイキャッチ画像を使うためのコーディングをまとめました。

まずはアイキャッチ画像を有効にして表示してみる。

まず最初に加えておきたいのがテーマ内でアイキャッチ画像を有効にする記述です。

これ書かないとアイキャッチ画像が使えるようにならないのでfunctions.phpに書いておきましょう。

これで記事投稿画面よりアイキャッチ画像の設定が行えるようになっているはずです。

投稿画面で設定したアイキャッチ画像をテンプレートファイルで読み込むためには次のような記述をします。

アイキャッチ画像のサイズはデフォルトでthumbnailとmediumとlarge、そしてfull(投稿した画像そのままのサイズ)の4種類を選ぶことができるので、テンプレートタグの引数になっているサイズを必要なものに書き換えてください。

アイキャッチ画像が設定されていない時は決まった画像を表示する。

投稿にアイキャッチ画像が設定されてないときに、何か適当な画像を表示させておきたいというときは次のような書き方をします。

アイキャッチ画像が設定されている時にはそれが表示され、設定されてない時にはnoimage.gifが表示されるような条件分岐になっています。

よくあるパターンとしてサムネイル画像に記事へのリンクが貼ってあることがあるので、そのコードも載せておきます。

カスタム投稿タイプでアイキャッチ画像を使う。

通常の投稿とは別にカスタム投稿タイプを作成した場合は、デフォルトではアイキャッチ画像が使用できません。

なのでカスタム投稿タイプでもアイキャッチ画像が設定できるようにfunctions.phpに記述してあげましょう。

次のコードでは例としてeventというカスタム投稿タイプでアイキャッチ画像を有効にしています。

このコードを加えることでカスタム投稿タイプの記事投稿画面でもアイキャッチ画像が設定できるようになっているはずです。

カスタム投稿タイプのテンプレートファイルでアイキャッチ画像を読み込む方法は、すでにご紹介したやり方と同じです。

以上、WordPressでアイキャッチ画像を使うときの書き方でした。

参考URL

テンプレートタグやWordPressの関数について詳しくは以下のCodexページを参考にしてください。

ホームページ制作だけでなくSNSの運用、リスティング広告やFacebook広告の運用サポートも行っています。

〈 この記事を書いた人 〉

越水大輔

WEBプロデューサー越水大輔

シンス株式会社 代表取締役
社内ではWeb制作のディレクション、マーケティング、経営を担当しています。Webマーケティングで福岡に元気な企業を増やします。

その他のオススメの記事

ホームページのことは何でもお気軽にご相談ください!

092-406-8630

平日10:00〜18:00セールス目的のお電話はご遠慮ください

シンス株式会社

Webマーケティングのお役立ち情報を発信しています!