WordPressの記事一覧にアイキャッチを表示させてみた（＋αで個別記事にも）

さらにトップページの記事一覧を抜粋表示にする方法はこちらにまとめています。

トップページを抜粋記事の一覧表示にする-WordPress Twenty Eleven篇-

上記 2 つのカスタマイズを行った上で、以下の内容へ進んでいくようになります。また、取り扱っているテンプレートはワードプレスにデフォルトで入っている Twenty Eleven になります。

記事へのパーマリンクをコピペで設定する

ワードプレスは主に PHP で動いているわけで、記事タイトルやパーマリンクなんかのタグは全て PHP のタグになっています。PHP についてはまだよく分からないのですが、記事タイトルをクリックすれば個別記事ページに飛ぶのだから、タイトル部分と同じような表記にすればうまくいくだろうことは何となく想像がつきます。
早速目的のタグを探してみましょう。

どのように個別記事へのパーマリンクは指定されているのか？

記事一覧ページに表示されている内容は、【 content.php 】で編集できます。すでに前述の別記事の通りにアイキャッチは表示されるように設定しているので、以下のようになっています（だいたい40行目あたりです）。

<div class="entry-content">
	<span style=" float: left; margin-right: 1em;"><?php the_post_thumbnail('thumbnail'); ?></span> /* サムネイル形式でのアイキャッチ表示 */
	<?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?>
	<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->

また、同じ【 content.php 】内で記事タイトルを吐き出すタグにどのようなリンクタグが貼ってあるかを見てみると、以下のようにタイトルを吐き出すタグをリンクタグが挟んでいました。15 行目の記述です。

<h2 class="entry-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>

つまり記事タイトルを表示させる【 <?php the_title( ) ; ?> 】タグの前後を、【 <a href=””> 〜 </a> 】のリンクタグで挟んでいるわけです。なので、同じようにアイキャッチを出力している PHP タグを <a> タグで挟めばアイキャッチをクリックした際に個別記事ページへ飛ぶようになるはずです。

アイキャッチ画像にパーマリンクを指定する

早速以下のようにしてアイキャッチをリンクタグで挟んでみます。

<div class="entry-content">
	<a href="<?php the_permalink(); ?>" rel="bookmark"><span style="float: left; margin-right: 1em;"><?php the_post_thumbnail('thumbnail'); ?></span></a>
	<?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?>
	<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->

これでアイキャッチをクリックすると、個別記事のページが表示されるようになります。「タイトル」、「続きを読む」そしてアイキャッチと、記事を全文表示させるための導線が広がりました。これはユーザビリティ的にも必須ですね。早くしておけばよかった・・・。
ちなみに、<span> で指定しているスタイルは、アイキャッチ画像の表示を回り込ませるための指定なので、好みで変更するなり削除するなりしてください。

アイキャッチ画像の上にマウスを持って来た時に発光させる方法

これでアイキャッチからも個別記事へリンクできるのですが、今のままだとアイキャッチにマウスポインタを持って来ても変化がないので、リンクだと気付かれないかもしれません。
通常テキストリンクなどは、マウスポインタを重ねると（いわゆるロールオーバーで）アンダーラインが表示されたり色が変わったりしますよね？　また画像の場合でも枠線が現われたり光ったり暗くなったりと、「ココはリンクです！」ということを主張しているのが基本です。
なのでアイキャッチ画像も「リンクなんです！」ということを誇示できるようにしたいと思います。これらは全て CSS での指定になりますので、ここからは CSS のお話・・・。

結論

以下のように【 content.php 】と、【 style.css 】を変更すれば OK です。

content.phpの変更

<div class="entry-content">
	<a href="<?php the_permalink(); ?>" rel="bookmark"><span style="float: left; margin-right: 1em;" class="linkimg" ><?php the_post_thumbnail('thumbnail'); ?></span></a>
	<?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?>
	<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->

2 行目の <span> の中に【 class=”linkimg” 】を追記しました。これでサムネイルだけに class を指定したことになります。

style.cssに追記

/* =リンクの発光
----------------------------------------------- */
/* サムネイル */
a .linkimg {
	background:none!important;
}
.entry-content a:hover .linkimg {
	opacity:0.6;
	filter:alpha(opacity=60);
	-ms-filter: "alpha( opacity=60 )";
	background:none!important;
}

CSS へは上記をそのまま追記すれば OK です。これでアイキャッチ画像にマウスのポインタを重ねると淡く発光するようになります。発光というか、正確には半透明にしているわけです。これで光っているかのように見えます。
クロスブラウザ対応のテクニックのようなので、どんどん使っても問題なさそうです。
半透明具合を調節したい場合も、CSS の方で変更できます。上記の 9、10、11 行目には 0.6 とか 60 といった数字が記載されていますが、これは透明度を表しています。なので、数字を小さくすると透明度が増してより発光しているように見えますし、数字を大きくすると変化が乏しくなります。
ちなみに上記の書き方は、アイキャッチだけに適用される書き方です。気になった方はぜひ試してみてください。

参考にさせて頂いたブログ

― Design Plus
ありがとうございました！

アイキャッチ画像を設定すると、ブログが消えた！？

とにかく、めちゃくちゃ苦労しました。ワードプレスの記事投稿画面に「アイキャッチ画像を設定」という項目があるので、そこから簡単に設定できるものと思っていたのですが、どうもカスタマイズの過程でいろいろいじった結果、表示がされなくなってしまっていたようです・・・。
表示がされないどころか、アイキャッチに画像を追加すると、ブログ記事自体が見れなくなるという困った現象が起きてしまいました。それを解決するため、テンプレートを初期状態に戻して試してみたところうまくいったので、その方法をメモしておきたいと思います。
ただし、何が原因で（どのカスタマイズが原因で）アイキャッチ画像のを設定するとブログが消えてしまったのかは、現在も不明なままです。

アイキャッチ画像の設定方法

まず、最新の WordPress（Ver.3.3.1以降）を使用しているのであれば、記事投稿画面の右下に【 アイキャッチ画像 】という部分があると思います。
この記事では WordPress Ver.4.2.2 の仕様に基づいて説明していきます。
また、解説で仕様している画像やコードは Twenty Eleven のものです。
Twenty Eleven はデフォルトの状態ではアイキャッチが表示されない仕様なので、Twenty Eleven をのカスタマイズで学んだ方がいいと思い取り上げています。
もし WordPressの バージョンに問題がないのに、【 アイキャッチ画像 】という設定項目が表示されていない場合は、右上の【 表示オプション 】を開いてみてください。
【 画面に表示 】の中の【 アイキャッチ画像 】のチェックボックスのチェックが外れているかと思いますので、チェックを入れてください。そうするとアイキャチを設定するウィジェットが表示されるはずです。

アイキャッチ画像のアップロード

アイキャッチ画像をまずは選びましょう。【 アイキャッチ画像を設定 】をクリックすると、画像のアップロード用ウィンドウが開きます。新たにアイキャッチ用の画像をアップロードしてもいいですし、既にアップロード済みの画像を使っても構いません。

画像を選択したら、「アイキャッチ画像として使用」という選択肢があるので、こちらをクリックすれば、アイキャッチ画像の設定は完了です。右下にもアイキャッチ画像が確認できると思います。

アイキャッチ画像を実装するタグ（基本設定の必要はなし）

アイキャッチ画像を表示させるためには、PHP のタグを functions.php に書き込まなければなりません。以下がそのタグです。

<?php add_theme_support('post-thumbnails'); ?>

ですが、Twenty Eleven の場合このタグはすでに書き込まれています（functions.php の 110 行目辺りです。）ですので、この設定は必要なさそうでした。

アイキャッチ画像を出力するタグ

あとは、アイキャッチ画像を表示させたい位置に、アイキャッチを表示してくれる PHP タグを書き込めばいいわけです。
こちらがそのタグです。

<?php the_post_thumbnail(); ?>

表示のさせ方で色々バリエーションがあるようです。

サムネイル表示（150×150）

<?php the_post_thumbnail('thumbnail'); ?>

サイズを100×100（希望のサイズ）に指定

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

※【 array(100.50) 】と指定しても、小さい方の50に合わせて正方形表示されてしまうとのこと。

アイキャッチ画像の表示場所

アイキャッチ画像を表示させるタグは分かりましたが、どこを見ても「表示させたい位置に配置してください」と書かれているばかりで、具体的にどこに埋め込んだらどこに表示されるのかよく分かりませんでした。
というわけでいくつか試してみましょう。

トップページの記事一覧にアイキャッチ画像を表示させる

アイキャッチ画像は、その名の通り“記事に目を留めてもらう”ことが目的です。ですので、記事一覧のページに表示されなきゃ意味ないですよね……。
というわけで、トップページの記事一覧や、アーカイブページの一覧表示の部分でアイキャッチ画像が表示されるようにしてみました。
【 content.php 】を子テーマフォルダ内に複製します。複製したファイルを開くと以下のような部分があります。

</header><!-- .entry-header -->
	<?php if ( is_search() ) : // Only display Excerpts for Search ?>
<div class="entry-summary">
	<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php else : ?>
<div class="entry-content">
	<?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?>
	<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->
<?php endif; ?>

このテーマファイル上の 33 行目辺りで、記事タイトルやメタ情報を出力しているヘッダー部分が終わって、その後にコンテンツ部分が始まっています。今回は 40 行目辺り（上記で言うと 9 行目）の【 <div class=”entry-content”> 】と指定されている部分の後にアイキャッチのタグを埋め込みました。

</header><!-- .entry-header -->
<?php if ( is_search() ) : // Only display Excerpts for Search ?>
<div class="entry-summary">
	<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php else : ?>
<div class="entry-content">
	<?php the_post_thumbnail('thumbnail'); ?> /* ！追加したアイキャッチ画像表示タグ */
	<?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?>
	<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->
<?php endif; ?>

今回は常にサムネイル表示されるタグにしました。大きさは常に 150 × 150 になります。
すると、こんな感じで表示されました。

個別記事にもアイキャッチ画像を表示させてみる

投稿記事の一覧にはアイキャッチ画像を表示することはできましたが、この記事を見ようと続きを読むなどのリンクをクリックすると、個別記事ページではアイキャッチ画像は表示されなくなります。
表示されなくても構わないという人もいると思いますが、中には個別記事にもアイキャッチと同じ画像が必要だ！　という方もいるでしょう。あなたがそういうタイプかは分かりませんが、個別記事にもアイキャッチ画像を表示させる方法をメモしておきます。
【 content-single.php 】を開きます。

<div class="entry-content">
	<?php the_content(); ?>
	<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->

こちらは 22 行目辺りに【 <div class=”entry-content”> 】がありますので、このすぐ後にもアイキャッチ画像のタグを埋め込みましょう。

<div class="entry-content">
	<?php the_post_thumbnail('thumbnail'); ?>　/* ！追加したアイキャッチ画像表示のタグ（サムネイル表示バージョン） */
	<?php the_content(); ?>
	<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->

すると・・・個別記事にもアイキャッチ画像が表示されました！

ちなみに、content-single.php は「標準」で記事投稿した場合のファイルです。その他のフォーマット、例えば「ギャラリー」で投稿した記事をカスタマイズしたい場合は content-gallery.php のファイルを編集します。
さて、これで問題なく表示されそうです……と思ったのですが、確認してみるとなんだか不格好ですね。
レイアウトを整えた方が良さそうです。

アイキャッチ画像のレイアウトを整える

ただタグを埋め込んだだけでは、画像と記事が縦に並んで表示されるだけです。アイキャッチ画像の大きさがコンテンツを表示させる幅と同じだけあれば自然な表示だと思いますが、今回みたいにサムネイル表示させたり、画像のサイズを小さめで表示させたい場合は右か左に回り込みをしたいところです。
というわけで、これは CSS の話ですが、アイキャッチが回り込みをして表示されるようにしたいと思います。クラス指定をして【 style.css 】の方でレイアウトをしてもよかったのですが、今回は直接指定してみました。
以下のタグでアイキャッチ画像の PHP タグを挟めば OK です。

<span style=" float: left; margin-right: 1em;"><?php the_post_thumbnail('thumbnail'); ?></span>

回り込みを指定しているので、【 clear: both; 】で回り込み解除をするのが普通ですが、Twenty Eleven の場合は既にメタ情報の部分で回り込み解除が指定されていますので、必要なさそうです。

.entry-meta {
	color: #666;
	clear: both; /* メタ情報は回り込みが解除されるようになっている！ */
	font-size: 12px;
	line-height: 18px;
}

Twenty Eleven の style.css のだいたい 760 行目辺り。
と、いうわけで、実際の表示はこんな感じですね。

これでスッキリしました。
以上、ワードプレスでのアイキャッチ画像設定と表示の方法でした。

アイキャッチに個別記事ごとのパーマリンクを指定するには？

ちなみに、今のままだとアイキャッチをクリックして個別記事へ行く事ができないので、アイキャッチ画像に記事ごとのパーマリンクを指定したいと思いませんか？
そういうわけで、こちらの記事にパーマリンクの設定方法をまとめてみました。

アイキャッチに個別記事へのパーマリンクを貼る方法

参考にさせて頂いたブログ

ありがとうございました。