カテゴリ:News

ブログの記事にアイキャッチ画像を設定してみる

𝕏

※記事の内容は執筆時点のものです。記事内のリンクからアフィリエイト報酬を得ることがあります。

wplogo-stacked-cmyk

このサイト、トップページとアーカイブページでは画像のサムネイルを表示しています。いままでは「Thumbnail For Excerpts」というプラグインを使っていたのですが、表示される画像は元の画像の縮小のため、画像によってサイズがばらばらだったりしてあまり美しくはありませんでした。

そんな折、goryugo.comで「Auto Post Thumbnail」というプラグインが紹介されていたので使用してました。

WordPressにはVer.2.9からアイキャッチ画像というのを設定できるようになりました。アイキャッチ画像というのはその記事を象徴するような画像のこと。記事に利用されている画像がそのまま使われていることが多いようです。ただ、投稿画面から毎回アイキャッチ画像を設定する必要があり意外と面倒なのと、それ以前に過去の投稿にもすべて設定しなければいけないとか考えるとやってられません。

そこでこのプラグインの出番となるわけですが、「Auto Post Thumbnail」は投稿時に自動的に投稿に含まれる画像をアイキャッチ画像として設定してくれます。このとき画像の置き場にFlickrなど外部サイトを使っている場合でもサーバにコピーした上でアイキャッチ画像にしてくれるのがなにげに便利です(このプラグインをもとに上手く修正すれば投稿に含まれる外部サイトに置いている画像すべてをサーバ側にコピーすることもできそうですが、それはまた別の話)。そしてなんといっても、過去記事に対しても一括でアイキャッチ画像を設定してくれるのがありがたいです。

media

プラグインで過去記事のアイキャッチを一括作成する前に、アイキャッチに使用されるサムネイル画像のサイズを設定します。「設定」>「メディア」で指定できます。「サムネイルを実寸法にトリミングする」のチェックを入れるとこのサイズにトリミングしてくれます。元画像のサイズにかかわらず正方形のサムネイルを使用したい場合などにはチェックをいれます。チェックを入れない場合には幅と高さそれぞれを最大寸法として縮小されるだけです。

thumbnails

プラグインの設定画面で「Generate Thumbnails」ボタンを押すとアイキャッチ画像の作成が始まります。過去記事の件数にもよりますが、そこそこ時間がかかるので気長に待ちましょう。なお、記事に画像が含まれていない場合とすでにアイキャッチ画像が設定されている場合には、このプラグインではアイキャッチの作成は行われません。

こうして出来上がったアイキャッチ画像(サムネイル画像)ですが、使用するには、表示させたい場所に以下のコードを挿入します。

<?php the_post_thumbnail(); ?>

あえてサイズ指定したい場合には、

<?php the_post_thumbnail(array(150,150)); ?>

とすればOK。

早速、「Thumbnail For Excerpts」をやめて、インデックスページとアーカイブページに上記のタグを設定してみました。いままでよりも統一感が出てすっきりした気がします。表示の際に毎回変換する必要もなくなったので、表示速度も(コンマ何秒という世界ですが)早くなったはずです。

(via goryugo.com)