こんにちは、福岡のホームページ制作シンス株式会社の越水です。
ブログやメディアタイプのホームページを制作する時に欠かせないのがアイキャッチ画像の設定です。
WordPressではアイキャッチ画像を表示させるための機能を備えており、やり方さえ覚えれば簡単にアイキャッチ画像で記事を目立たせることができます。
今回はWordPressでアイキャッチ画像を使うためのコーディングをまとめました。
まずはアイキャッチ画像を有効にして表示してみる。
まず最初に加えておきたいのがテーマ内でアイキャッチ画像を有効にする記述です。
これ書かないとアイキャッチ画像が使えるようにならないのでfunctions.phpに書いておきましょう。
1 2 | // アイキャッチ画像を有効にする。 add_theme_support('post-thumbnails'); |
これで記事投稿画面よりアイキャッチ画像の設定が行えるようになっているはずです。
投稿画面で設定したアイキャッチ画像をテンプレートファイルで読み込むためには次のような記述をします。
1 2 3 4 | <?php if(have_posts()): while(have_posts()): the_post(); ?> // アイキャッチ画像を表示するテンプレートタグ <?php the_post_thumbnail('thumbnail'); ?> <?php endwhile; endif; ?> |
アイキャッチ画像のサイズはデフォルトでthumbnailとmediumとlarge、そしてfull（投稿した画像そのままのサイズ）の4種類を選ぶことができるので、テンプレートタグの引数になっているサイズを必要なものに書き換えてください。
アイキャッチ画像が設定されていない時は決まった画像を表示する。
投稿にアイキャッチ画像が設定されてないときに、何か適当な画像を表示させておきたいというときは次のような書き方をします。
1 2 3 4 5 6 7 | <?php if(have_posts()): while(have_posts()): the_post(); ?> <?php if (has_post_thumbnail()) : ?> <?php the_post_thumbnail('thumbnail'); ?> <?php else : ?> <img src="<?php bloginfo('template_url'); ?>/img/noimage.gif" width="100" height="100" alt="デフォルト画像" /> <?php endif ; ?> <?php endwhile; endif; ?> |
アイキャッチ画像が設定されている時にはそれが表示され、設定されてない時にはnoimage.gifが表示されるような条件分岐になっています。
よくあるパターンとしてサムネイル画像に記事へのリンクが貼ってあることがあるので、そのコードも載せておきます。
1 2 3 4 5 6 7 | <?php if(have_posts()): while(have_posts()): the_post(); ?> <?php if (has_post_thumbnail()) : ?> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a> <?php else : ?> <a href="<?php the_permalink(); ?>"><img src="<?php bloginfo('template_url'); ?>/img/noimage.gif" width="100" height="100" alt="デフォルト画像" /></a> <?php endif ; ?> <?php endwhile; endif; ?> |
カスタム投稿タイプでアイキャッチ画像を使う。
通常の投稿とは別にカスタム投稿タイプを作成した場合は、デフォルトではアイキャッチ画像が使用できません。
なのでカスタム投稿タイプでもアイキャッチ画像が設定できるようにfunctions.phpに記述してあげましょう。
次のコードでは例としてeventというカスタム投稿タイプでアイキャッチ画像を有効にしています。
1 2 3 4 5 | register_post_type( 'event', // 'supports'に'thumbnail'を追記 array('supports' => array('title','editor','thumbnail')) ); |
このコードを加えることでカスタム投稿タイプの記事投稿画面でもアイキャッチ画像が設定できるようになっているはずです。
カスタム投稿タイプのテンプレートファイルでアイキャッチ画像を読み込む方法は、すでにご紹介したやり方と同じです。
以上、WordPressでアイキャッチ画像を使うときの書き方でした。
参考URL
テンプレートタグやWordPressの関数について詳しくは以下のCodexページを参考にしてください。
ホームページ制作だけでなくSNSの運用、リスティング広告やFacebook広告の運用サポートも行っています。
〈 この記事を書いた人 〉
WEBプロデューサー越水大輔
シンス株式会社 代表取締役
社内ではWeb制作のディレクション、マーケティング、経営を担当しています。Webマーケティングで福岡に元気な企業を増やします。
