WordPressでアイキャッチ画像を表示させるためプラグインを入れてテーマをいじってみた。

2018年06月1日 正午の月齢:17.0  月名:居待月  潮汐:中潮 月齢:17.0[居待月] 潮汐:中潮
7か月前に投稿 | WordPress | コメントはありません

この記事を読むのに必要な時間の目安: 4分ぐらい

かなり前に、「ブログに挿入する、無意味なイメージ画像の存在価値。」ということでアイキャッチ画像について批判めいたことを書いたのですが、最近になって「関連性のある画像だったらあってもいいかな」と思えるようになってきました。でもあまりに大きな画像や、記事の内容と関係ない画像については今でも否定派です。

さて、WordPressにアイキャッチ画像の機能がついて久しいのですが、今まで何にも事前準備をしていなかったので1からの実装です。

まずはアイキャッチ画像の有効化のため、テーマ内のfunctions.phpに以下の記述を追加します。

add_theme_support('post-thumbnails');

次に、サイドバーの「最近の記事」にもサムネイルサイズの画像が出るようにします。sidebar.phpにもともとあった記述

<h2>最近の記事</h2>
<ul id="recent">
<?php wp_get_archives('type=postbypost&limit=50'); ?>
</ul>

を、以下のように書き換えます。

<h2>最近の記事</h2>
<ul id="recent">
<?php $posts = get_posts('numberposts=50'); ?>
<?php foreach($posts as $post): ?>
<li>
<span class="eye"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(array(40,40), array('class' => 'left')); ?></a></span><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</li>
<?php endforeach; ?>
</ul>

ずいぶん複雑になりましたね。サムネイルのサイズはいろいろ試してみた結果、40×40ピクセルに設定しました。

サイドバーのアイキャッチ画像

各記事のダイジェスト版にあたるcategory.php、search.php、archive.phpにも<?php the_excerpt(); ?>の直前に以下のような記述を。

<p><span class="eyecatch"><?php the_post_thumbnail( array(150,150) ); ?></span></p>

こんな感じに表示されます。

アイキャッチ画像サンプル

これでOKなのですが、過去の記事にもアイキャッチ画像を設定したいな、ということで、プラグイン「Auto Post Thumbnail」をインストールしました。「Generate Thumbnails」というボタンを押すと、投稿した記事に使った画像から自動的に選んでくれて、アイキャッチ画像として一括で設定してくれます。ただし、記事に画像を1つも使っていない場合はアイキャッチ画像は設定されません。

これで少しサイトの雰囲気が華やかになりましたー。

前の記事・次の記事

前の記事
次の記事

この記事のトラックバックURL

https://susu.cc/2018/06/wordpress-eyecatch.html/trackback

コメントはありません »

[RSS on this post] [TrackBack URI]

コメントをどうぞ