このブログでは、カテゴリページで、各記事のアイキャッチ画像をサムネイル表示しています。
アイキャッチ画像は、<?php the_post_thumbnail; ?>というテンプレートタグで呼び出せる上、大きさも変えられるので、カテゴリ別ページやアーカイブページのphpに書き込むことで、いろいろな使い方ができます。
特定カテゴリの記事をホームの新着記事一覧に表示させず、別枠のウィジェットに表示する方法に書いたように、ウィジェットに表示する記事をアイキャッチ画像付きにすることもできます。
アイキャッチ画像はブログを華やかにしてくれますが、逐一設定するのは面倒です。それでこのエントリでは、極力労力を使わずにアイキャッチ画像を設定する4つの方法を解説します。
1.他記事にリンクを貼るだけで画像を挿入できるHeartRails Capture
2.商品リンクを画像付きで表示するG-Tools
3.記事内のあらゆる画像をアイキャッチにできるAuto Post Thumbnail
4..それでも無理な場合は手動設定できるDrag & Drop Featured Image
目次 ( 各項目までジャンプできます)
関連記事はHeartRails Captureで紹介する
このブログでは、下記のように、自分のブログおよび他の方のブログの別のエントリを紹介するとき、HeartRails Capture | サムネイル画像／PDF ファイル作成サービスという無料サービスを使ってサムネイルを生成しています。
今見ているページをカンタンにリンク＆引用できるブックマークレットlinclip Singlesを使えば、このサービスをいつでも呼び出せます。
サムネイル付きで今見てるページをカンタンにリンク＆引用するブックマークレット: point of view point
このブックマークレットを使うことで、スクリーンショットを挿入したり、無料画像を探したりするなどの手間を掛けなくても、記事に画像成分を加えられます。自分のブログや他の方のブログの関連記事を紹介するだけで、記事が華やかになります。意味のある画像ではないのが欠点ですが、文字だけよりかは随分印象が変わります。
関連商品はG-Toolsで紹介する
関連商品を紹介するときにも、同じようにサムネイル画像を設定してくれるのがG-Toolsです。
G-Tools ブログとAmazon(アマゾン) アソシエイトでアフィリエイト
使えるのはAmazonのみですが、さまざまな大きさのサムネイル画像をブログに貼り付けることができます。楽天など他のリンクも用意したい場合は、少し設定が面倒ですが、ヨメレバ・カエレバ・ポチレバを使うこともできます。
Auto Post Thumbnailを使って画像をアイキャッチに
ここまでの過程は、単に記事を華やかにするだけですが、プラグインAuto Post Thumbnailを使えば、これら各記事に挿入した画像を手軽にアイキャッチ画像に変換できます。
Auto Post Thumbnailは前述のlinclip SinglesやG-Toolsで生成したサムネイル画像も読み取ってアイキャッチ画像に設定してくれるので、ほぼすべての記事に何らかのアイキャッチ画像が存在するようにできました。
ダッシュボードの「プラグイン」→「新規追加」からAuto Post Thumbnailを検索し、インストールし、有効化します。
すると、「設定」に「Auto Post Thumbnail」の項目が現れるので、“Generate Post Thumbnails”のボタンをクリックし、しばらく待ちます。これで各記事にアイキャッチ画像が設定されます。
Auto Post Thumbnailを使うにあたり、以下のエントリを参考にさせていただきました。
Dream Seed » ブログの記事にアイキャッチ画像を設定してみる
類似プラグインのThumbnail for Excerptsは、どうやらアイキャッチ画像を設定するわけではないようです。
抜粋を使うときにサムネイル画像が表示されますが、テンプレートタグ<?php the_excerpt(); ?>でしか呼び出せないようでした。つまり、抜粋の文章とセットでしかサムネイル画像が使えないことになります。
しかも<?php the_excerpt(); ?>を挿入すると、抜粋だけを表示したいところにまでサムネイル画像が表示されてしまいます。
一方Auto Post Thumbnailは実際にアイキャッチ画像を設定しているので、<?php the_post_thumbnail; ?>というテンプレートタグでサムネイル画像を単独で呼び出すことができます。
ですから、抜粋表示を使うとき、どんな場合もアイキャッチ画像をセットで使いたい場合はThumbnail for Excerptsが楽ですが、アイキャッチ画像の大きさを変更したり、抜粋だけを用いたりして柔軟に使いたい場合はAuto Post Thumbnailのほうが良いようです。
手動で設定する場合はDrag & Drop Featured Image
なおAuto Post Thumbnailを使っても、記事内の画像を認識してくれず、アイキャッチ画像が設定されないエントリがときどきあります。
その場合は、Drag & Drop Featured Imageというプラグインを用いれば、手動で設定するのが楽になります。このプラグインは、以下のように、「投稿の編集」画面に、アイキャッチ画像のアップローダーウィジェットを用意してくれます。
詳しくは以下のエントリが参考になると思います。
WordPressのアイキャッチ画像をドラッグ&ドロップで設定出来るプラグイン・Drag & Drop Featured Image - かちびと.net
また、これとは別にアイキャッチ画像が未設定の際に、代替画像を表示させる方法もあるようです。
WPのアイキャッチ画像が未設定だったら場合に代替え画像を表示する方法 - ぷろめし｜プログラミングよりも飯が好き
アイキャッチ画像の活用例
このように設定したアイキャッチ画像は、<?php the_post_thumbnail; ?>というテンプレートタグをテーマの好きな位置に記述することで呼び出すことができます。
例えば、カテゴリ別ページにサムネイルを表示したいなら、category.phpの好きな位置に<?php the_post_thumbnail; ?>を記述します。
詳しい使い方は、以下のリンクをご覧ください。
テンプレートタグ/the post thumbnail - WordPress Codex 日本語版
テンプレートタグ/the excerpt - WordPress Codex 日本語版
このサイトでは、子テーマのcategory.phpに以下のように記述しています。WordPressのカテゴリ別ページを、記事タイトルによるリスト表示にすると組み合わせた特殊な方法なので、参考程度にご覧ください。
<?php
if ( !is_full() ) {
echo '<ul>';
if ($posts) {
start_wp();
foreach ($posts as $post) { ?>
<li> <a href="<?php echo get_permalink($post->ID) ?>" rel="bookmark" title="Permanent Link: <?php echo $post->post_name; ?>"><?php echo $post->post_title; ?></a>
<span style=" float: left; margin-right: 1em;"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array(100,100) ); ?></a></span>
<?php
$days = 7;
$today = date_i18n('U');
$entry = get_the_time('U');
$kiji = date('U',($today - $entry)) / 86400 ;
if( $days > $kiji ){
echo '<font color="#d16349">New!</font>';
}
?>
<?php the_excerpt(); ?></li><hr>
記事タイトル→アイキャッチ画像の表示→新着記事のNEW!表示→抜粋表示→水平線
という順番で記述しています。赤字は今回紹介したテンプレートタグです。なおテーマの編集には子テーマを用いて細心の注意を払うようお勧めします。
