やっとできました！ アイキャッチの表示。
アイキャッチとは、その名の通り目をキャッチするためのもので、一般的には画像・写真が使われています。人は写真に注意を惹きつけられてしまう癖があるため、ブログなどの記事に注目してもらうためにこのアイキャッチが有効なのです。
WordPress にも実装されていて、アイキャッチ、またはサムネイルなどと呼ばれています。テーマによってはただ写真をアップロードするだけで表示されるものもありますが、中には自分でカスタマイズしないと表示されないテーマもあります。
ですので、ここでアイキャッチ（サムネイル）の一般的な実装方法について試行錯誤して分かったことをまとめておきたいと思います。
アイキャッチ画像を設定すると、ブログが消えた！？
とにかく、めちゃくちゃ苦労しました。ワードプレスの記事投稿画面に「アイキャッチ画像を設定」という項目があるので、そこから簡単に設定できるものと思っていたのですが、どうもカスタマイズの過程でいろいろいじった結果、表示がされなくなってしまっていたようです・・・。
表示がされないどころか、アイキャッチに画像を追加すると、ブログ記事自体が見れなくなるという困った現象が起きてしまいました。それを解決するため、テンプレートを初期状態に戻して試してみたところうまくいったので、その方法をメモしておきたいと思います。
ただし、何が原因で（どのカスタマイズが原因で）アイキャッチ画像のを設定するとブログが消えてしまったのかは、現在も不明なままです。
アイキャッチ画像の設定方法
まず、最新の WordPress（Ver.3.3.1以降）を使用しているのであれば、記事投稿画面の右下に【 アイキャッチ画像 】という部分があると思います。
この記事では WordPress Ver.4.2.2 の仕様に基づいて説明していきます。
また、解説で仕様している画像やコードは Twenty Eleven のものです。
Twenty Eleven はデフォルトの状態ではアイキャッチが表示されない仕様なので、Twenty Eleven をのカスタマイズで学んだ方がいいと思い取り上げています。
もし WordPressの バージョンに問題がないのに、【 アイキャッチ画像 】という設定項目が表示されていない場合は、右上の【 表示オプション 】を開いてみてください。
【 画面に表示 】の中の【 アイキャッチ画像 】のチェックボックスのチェックが外れているかと思いますので、チェックを入れてください。そうするとアイキャチを設定するウィジェットが表示されるはずです。
・WordPressのバージョン：4.2.2
・テーマ：Twenty Eleven Ver.2.1
アイキャッチ画像のアップロード
アイキャッチ画像をまずは選びましょう。【 アイキャッチ画像を設定 】をクリックすると、画像のアップロード用ウィンドウが開きます。新たにアイキャッチ用の画像をアップロードしてもいいですし、既にアップロード済みの画像を使っても構いません。
画像を選択したら、「アイキャッチ画像として使用」という選択肢があるので、こちらをクリックすれば、アイキャッチ画像の設定は完了です。右下にもアイキャッチ画像が確認できると思います。
アイキャッチ画像を実装するタグ（基本設定の必要はなし）
アイキャッチ画像を表示させるためには、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">→</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">→</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 行目辺り。
と、いうわけで、実際の表示はこんな感じですね。
これでスッキリしました。
以上、ワードプレスでのアイキャッチ画像設定と表示の方法でした。
アイキャッチに個別記事ごとのパーマリンクを指定するには？
ちなみに、今のままだとアイキャッチをクリックして個別記事へ行く事ができないので、アイキャッチ画像に記事ごとのパーマリンクを指定したいと思いませんか？
そういうわけで、こちらの記事にパーマリンクの設定方法をまとめてみました。
参考にさせて頂いたブログ
ありがとうございました。
![プラグイン[WP Multibyte Patch]](https://presentnote.com/wp-content/uploads/2012/04/wp_multibyte_patch.png "wp_multibyte_patch")
