ホームページ制作・SEO対策 福岡のアイドットデザイン。Webマーケティングのご相談も承ります。

お問い合わせ・ご相談はコチラ

blog

ブログ

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

| カテゴリー : WordPress

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

参考URL

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

アイドットデザインのブログはWeb業界の話題に限らず幅広いビジネストピックについて書いています。
よろしければFacebookページのフォローをどうぞ!ビジネスに役立つ情報をお届けします!

福岡のホームページ制作・SEO対策はアイドットデザインまでご相談ください!
インターネット集客やWebマーケティングのご相談も承ります。

follow us in feedly

Facebookページに「いいね!」して更新情報をチェック!

お気軽にお問い合わせください!

お見積りやご相談は、メール/お電話にてお気軽にご連絡ください。専属の担当者が丁寧にご対応いたします。