WordPressでアイキャッチを記事一覧に表示する
料理ブログを書いていて、その一覧ページに、タイトルに合わせたアイキャッチの画像を並べたいと思いました。
個別の記事ページで利用しているアイキャッチのサイズだと大きすぎます。
その大きな画像を無理やりwidthで縮めるのも、ページ表示のスピードを落とすだけなので避けたいです。
というわけで、記事のアイキャッチを使って、一覧に入る大きさになるように書き出させる方法をご紹介します。
function.phpに書く内容
まずは、アイキャッチを任意のサイズへ書き出す指示をします。|
1 2 3 4 |
// アイキャッチ画像 一覧 (このサイズで切り抜く設定) add_image_size('index-thumbnails', 300, 100, false ); |
幅300px、高さ100pxに切り抜くという設定です。
falseとは
縮小時に切り抜きする場合はtrue、しない場合はfalseを指定（省略時はfalse）です。
ただ縮小しても、縦横の比率が変わらず綺麗に表示されるサイズであれば、falseにします。
比率が変わる場合は、trueでcrop（切り抜き）しましょう。
サムネイルはfunction.phpに書いた分だけ利用することが可能です。
function.phpにこのように書けば、アイキャッチとogpで利用することができます。
|
1 2 3 4 5 6 7 |
// アイキャッチ画像 一覧 (このサイズで切り抜く設定) add_image_size('index-thumbnails', 300, 100, false ); //OGP用にカスタムサムネイルサイズを追加 add_image_size('custom_thumbnail', 300, 300, true); |
テンプレートに書く内容
次に、書きだしたアイキャッチを一覧へ表示させます。index-thumbnailsを表示してください。無い場合は、「nothumbnail.png」を表示してください。という指示をしたコードです。
nothumbnail.pngを用意しておくと、デザインが綺麗にまとまりますね。
|
1 2 3 4 5 6 7 8 9 |
<div class="eyeCatch"> <?php if (has_post_thumbnail()) : ?> <?php the_post_thumbnail('index-thumbnails'); ?> <?php else: ?> <img alt="" src="<?php echo get_template_directory_uri(); ?>/img/nothumbnail.png" /> <?php endif; ?> </div> |
個別記事に書くアイキャッチ
ちなみに、個別記事ページでのアイキャッチは以下のように書いてありますので、ご参考までに。function.phpには、
|
1 2 3 4 5 |
// アイキャッチ画像 add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size(630, 210, true ); // 幅 630px、高さ 210px、切り抜きモード |
single.phpには、
|
1 2 3 4 5 |
<div class="eyeCatch"> <?php if(has_post_thumbnail()) { echo the_post_thumbnail(); } ?> </div> |
アイキャッチはブログにおいて、わりと重要かなと考えております。
もちろん、一番大切なのは、コンテンツですが、そこまで興味を持たせるのはアイキャッチだったりする場合もあります。
濃紺ピッチャーの料理ブログでは、アイキャッチを毎回丁寧に作ることで、サイトのクオリティをあげて、信頼性を高める効果があり、その結果が数字にあらわれているのではないかと考えております。