トリコロールな猫

猫とつくばと茨城をこよなく愛するnekotricolorのブログです

Wordpressでアイキャッチ画像を後から有効にする方法

アイキャッチって必要性がいまいちわからなかったんですが、NAVERまとめとでまとめを作ってみたり、nanapiワークスで記事書いたりしてたら、少なくともカテゴリ「Lifehack」や「Blog」にはやっぱりあった方がいいなあと思うようになりました。

インパクトあるよねやっぱり。見にくる目的がはっきりしているWordpressiPhoneアプリの記事にはいらない気がしてたけど、タグ代わりに使えるかもしれないなと思ってます。たとえばこの記事なら、Wordpressのロゴの上に「アイキャッチ」って文字を入れるとか。今考えたんで適当ですけど。

アイキャッチ画像とは

そもそもアイキャッチ画像とはなんぞやという話ですが、直訳だと「人目を引く」というような意味で、その記事を表すような画像のことをいいます。 最近のサイトによくある記事の一番最初にでっかくのっている画像、記事一覧のタイトル部分に表示されるサムネイル、あれのことです。

アイキャッチ画像があると、FacebookでシェアされたときやNAVERまとめに載せるときなどに画像がつくのでいい感じです。まあ記事内のほかの画像を選べたりもするんですが、やっぱちょっとしゃれおつな画像があるとインパクト大きいじゃないですか。 Wordpress上だと、その記事に紐づいた一意の画像ということで記事一覧にアイコンの形で載せるなどがやりやすくなります。

アイキャッチ画像を有効にする

function.phpに以下の行を追加します。 [php] add_theme_support( 'post-thumbnails' ); [/php]

名前にthumbnails(サムネイル)と入っているのがややこしいんですが、ここではあくまでアイキャッチという単語で統一しておいて、「サムネイル」は元画像を小さく表示したいわゆるサムネイルのことを指すこととします。

これで、投稿画面に[アイキャッチ画像]というメニューが追加されます。

2013-02-28-1

set_post_thumbnail_size()でアイキャッチ画像のサイズを指定できるのですが、いろいろな場所で使うことになりそうなのでデフォルトとしては特に指定せず、下記のthe_post_thumbnail()関数で指定するようにしています。

the_post_thumbnail()関数を追加

記事内でアイキャッチ画像を表示したい場所にthe_post_thumbnail()関数を追加します。だいたい皆さん記事のタイトルと本文の間に入れてますよね。私もそうします。

個別記事に表示するわけなので、single.phpに以下を追加します。 [php] <?php the_post_thumbnail(array(630, 9999), array('alt'=>$title, 'title'=>$title)); ?> [/php] the_post_thumbnail()がアイキャッチ画像を呼び出して表示する関数。引数は最初が画像のサイズ、2番目は画像の属性です。どちらも省略可能。ただし私はset_post_thumbnail_size()でサイズを指定していないので、ここで指定しないと元画像のサイズで表示されることになります。

第一引数:画像のサイズ

array()で指定します。最初が横、次が縦。 で、うちのサイトは本文の幅が630pxなので、横幅は最大630pxにしないといけません。縦は特に制限はないので9999pxにしてます。縦幅の指定、これが正しいやり方なのかは定かじゃないですすいません。

第二引数:画像の属性

array()でalt属性やタイトルを指定します。

すでにアップしている画像をアイキャッチ用に再生成する

どうやら、これまでにアップした画像をアイキャッチ画像として使うには再度アップロードしなきゃいけないらしい。そんなめんどくさいことできないよ!

大丈夫です。プラグインがあります。

インストールして[ツール]->[Regen. Thumbnails]をクリックし([設定]でなく[ツール]なんですね)、[Regenerate All Thumbnails]をクリックすると、それまでにアップした画像をアイキャッチ用に再生成してくれます。 2013-02-28-2

これで準備ができました。

記事にアイキャッチ画像を登録する

ではさっそく、既存の記事のトップに使っている画像をアイキャッチとして登録してみます。 以下のページでやってみます。

まずは記事内に追加した画像のタグを削除して。

記事投稿画面の右下の[アイキャッチ画像を設定]をクリック。

2013-02-28-3

アイキャッチ画像にしたい画像をクリックし、[]をクリック。

2013-02-28-4

これで、投稿画面の右下に、指定したアイキャッチ画像が表示されます。 2013-02-28-5

で、[更新]をクリックすれば、アイキャッチ画像の追加が完了します。見た目は変わらないですけどね。

これ結局今までの記事のは手動でやんなきゃいけないんですよね。やっぱ最初に色々決めとくっていうのが大事ですねー。後から変更しても作業があんまりいらないように汎用に作っておくのも重要です。 記事一覧にサムネイルを表示するのはまた次回に。

参考