BLOGリニューアル（その２）　アイキャッチ画像の処理

BLOGリニューアル作業の備忘録その２です。
以前のテーマでは、記事一覧はmoreまでを表示する
仕様だったのですが、AllTutsはアイキャッチ画像と
記事抜粋を表示する仕様のようなので、アイキャッチ画像が
指定されていればそれを、されていなければエントリの最初の
画像をアイキャッチとして使用するようにしてみました。

 

 

---

 
アイキャッチ画像の処理
 
has_post_thumbnail関数でアイキャッチ指定の有無を判定し、指定されていれば
アイキャッチ画像を、指定がなければThe Attached ImageというPluginが
自動取得してくれるエントリ内の最初の画像をアイキャッチとして使用します。
 
 
１．The Attached Image導入

The Attached Image Pluginをインストール後、有効化しておく。
※今回は設定画面のGeneral Options内Custom Image SizeをWidth:160 / Height: 120で設定。
 
 
２．記事一覧ページの改造

index.php　38行目あたりにある

<div class="postThumb"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a></div>

…という記述を

<div class="postThumb"><a href="<?php the_permalink() ?>"><?php if( has_post_thumbnail() ) { the_post_thumbnail( array(160,120) ); } else { the_attached_image(); }; ?></a></div>

…へ修正。
 
 
３．記事詳細ページの改造

AllTutsの場合、記事詳細ページのエントリ本文下に、同じタグがついたエントリを
紹介する「Related Posts」という項目があり、ここにもアイキャッチ画像が
表示されます。そこで、single.php　64行めあたりの…

<li><?php the_post_thumbnail(array(40,40)); ?><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>

…という記述を

<li><?php if( has_post_thumbnail() ) { the_post_thumbnail( array(40,30) ); } else { the_attached_image('img_size=thumb&width=40&height=30'); }; ?><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>

…へ修正。

※本BLOGでは、掲載している写真が大：640×480 / 小：320×240が基本なので、
　サムネイルの最大の値を40×30を基本に縮小しておかないと、サイズが異なる画像の場合、
　ずれて表示されてしまうので注意。

　（例えば、640×480や320×240で掲載している画像は40×30に縮小されて表示されるが、
　　200×188の場合で高さの最大値を40のままにしておくと40×37に縮小されるので、
　　他のより高くなってしまい、Related Postsの部分がずれて表示されてしまう。）
 
 

【参考にしたサイト】
》WordPressのアイキャッチ画像の使用方法【基本＆応用】
》複数サイズのサムネイル（アイキャッチ画像）を表示させる方法