ブログ記事を鮮やかに彩るものとして、また記事の内容をユーザーにより強く印象付けるため、記事の冒頭に挿入するアイキャッチ画像はたいへん便利なものです。いくつかの設定が必要なことと、画像の大きさの取り扱いに初心者の方には難しく感じるかもしれませんが、一度設定してしまえばあとは画像をアップロードする作業だけですので、がんばって設置してみてください。
設定と使い方
設定は簡単です。使っているテーマの function.php を開き、次の一行を追加してください。
1 | add_theme_support('post-thumbnails'); |
すると、管理画面の記事投稿ページにアイキャッチの設定項目が追加されます。テーマによっては最初から使えるようになっているものもあるので、ご自分の環境で確認してください。その場合には function.php の編集は不要です。
表示されていない場合には、画面上部の「表示オプション」をクリックし、「アイキャッチ画像」にチェックを入れてください。
アイキャッチ画像をページに挿入するには、以下のソースコードを PHP ファイルに追加します。
1 | <?php the_post_thumbnail('画像サイズのID'); ?> |
画像サイズの設定
the_post_thumbnail テンプレートタグの引数に指定できるIDは、次の4種類が定義されています。IDを指定しない場合にはサムネイルサイズが適用されます。
- thumbnail：サムネイル
- medium ：中サイズ
- large ：大サイズ
- full ：フルサイズ
各サイズを変更したい場合には、管理画面の「設定」→「メディア」に移動します。
例えば、single.php に大サイズのアイキャッチを挿入したいとします。テーマの幅が最大655ピクセルだった場合、このように設定します。高さの上限が0になっていますが、これは高さには上限を設けないという意味です。
single.php を開き、アイキャッチを挿入したい場所に次のソースコードを追加します。
1 | <?php the_post_thumbnail('large'); ?> |
今回は WordPress に1600X1200ピクセルの画像をアップロードしましたが、これを縦横比を保ったまま幅655ピクセルに縮小した画像が作成されるので、表示はこのようになります。
ちなみに、先ほど管理画面からメディアの大きさを変更しましたが、この変更は記事投稿の「メディアを追加」のサイズも同時に変更されるので注意してください。
「メディアを追加」のサイズを変更したくない場合、次のソースコードを function.php に追加することで対応が可能です。
1 | <?php set_post_thumbnail_size(横のサイズ, 縦のサイズ, 切り抜きの有無); ?> |
「切抜きの有無」ですが、trueで縦横比で縮小後に不要な部分を切り抜きます。falseで縦横比を維持して縮小して切り抜きを行いません。
先ほど管理画面からメディアサイズの変更をしましたが、同様の設定したい場合には次のようになります。
1 | <?php set_post_thumbnail_size(655, 0, false); ?> |
デザインのカスタマイズ
single.php
WordPress で記事に画像を挿入すると、デフォルトの設定では img タグを自動的に p タグで囲んだ HTML が出力されます。ところが、アイキャッチとして出力された img タグは p タグで囲まれていません。そのため、ほかの画像と同じデザインで表示されないかもしれません。
この対策として、ひとつは single.php にアイキャッチを設置するときのソースコードを前もって p タグで囲んでしまうというものです。
1 | <p><?php the_post_thumbnail('large'); ?></p> |
もうひとつは、アイキャッチとして出力された画像は WordPress が wp-post-image クラスを自動で割り振ってくれるので、このクラスに対してスタイルシートを指定すればよいかと思います。
1 2 3 | .wp-post-image { (マージンやボーダーなどを指定する) } |
index.php
例えば、ブログのトップページをアイキャッチを使って次のようにデザインカスタマイズをしたいとします。
出力される HTML は特別なカスタマイズをしていなければ次のようになるかと思います。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <DIV class="post-7 post type-post status-publish format-standard has-post-thumbnail hentry category-1" id="post-7"> <DIV class="content-inner"> <H2 class="entry-title"> <A href="http://localhost/wordpress/2017/01/27/7/">おでん</A> </H2> <DIV class="post-meta"> <SPAN class="post-date">2017年1月27日</SPAN> <SPAN class="category">カテゴリー : <A href="http://localhost/wordpress/category/%e6%9c%aa%e5%88%86%e9%a1%9e/" rel="category tag">未分類</A></SPAN> <SPAN class="comment-num"><A href="http://localhost/wordpress/2017/01/27/7/#respond">コメント : 0</A></SPAN> </DIV> <IMG width="150" height="150" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" src="http://localhost/wordpress/wp-content/uploads/2017/01/a0002_012086_m-150x150.jpg"> <P> おでん（御田）は、日本料理のうち、煮物料理の一種。鍋料理にも分類される。鰹節とコンブでとった出汁（だし）に味を付け、さつまあげ・はんぺん・焼きちくわ・つみれ・蒟蒻(こんにゃく)・大根・芋・がんもどき・つみいれ・ちくわ・すじ・ゆで卵、その他いろいろな種を入れて、長時間煮込む。おでん種、つけだれの種類は地域や家庭によって異なる。 「おでん」は元々、田楽を意味する <A href="http://localhost/wordpress/2017/01/27/7/">[…続きを読む]</A> </P> </DIV> </DIV> |
スタイルシートの簡単なサンプルを掲載しておきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .content-inner { overflow: hidden; } .content-inner img { float: left; margin-right: 15px; } .content-inner p { overflow: hidden; } .content-inner p a { display: block; float: right; margin-top: 40px; } |
簡単に解説します。
content-inner クラスの overflow:hidden; ですが、これは content-inner img に float を指定してテキストを回り込ませたため、クリアフィックスとして指定します。
content-inner p ですが、こちらの overflow:hidden; にはふたつの意味があります。ひとつは content-inner p a で指定した float を解除するためのクリアフィックス、もうひとつはテキストを画像の下に回りこませないためのものです。
content-inner p a では a タグを display プロパティによりブロック要素に変換後、float を使って右側に配置しています。
「…続きを読む」のカスタマイズ
「…続きを読む」の前の文字列の長さですが、これは function.php を編集することで変更することができます。次のソースコードを追加してください。
1 2 3 4 | function my_excerpt_length($length) { return 250; } add_filter('excerpt_length', 'my_excerpt_length'); |
今回、画像の下にテキストが回りこまないスタイルシートの解説のために少し長めに設定しましたが、見栄えの良いデザインになるように長さを調節するとよいでしょう。
デフォルトアイキャッチ
さらに、デフォルトのアイキャッチを設定することも可能です。うっかりアイキャッチを指定し忘れてデザインが崩れるのを防ぐことができます。function.php に次のソースコードを追加してください。
1 2 3 4 5 6 7 8 9 | function save_default_thumbnail($post_id) { $post_thumbnail = get_post_meta($post_id, $key = '_thumbnail_id', $single = true); if (!wp_is_post_revision($post_id)) { if (empty($post_thumbnail)) { update_post_meta($post_id, $meta_key = '_thumbnail_id', $meta_value = '○○○'); } } } add_action('save_post', 'save_default_thumbnail'); |
$meta_value に指定する ○○○ は画像IDなのですが、これはどのように調べたらよいのでしょうか。管理画面の「メディア」→「ライブラリ」に移動しIDを調べたい画像をクリックしてください。
「添付ファイルの詳細」ダイアログが表示されるので、右側にある「さらに詳細を編集」というリンクの上にマウスカーソルをもってきます。すると、画面左下にアドレスらしきものが表示されますが、post=○○○ の ○○○ の部分が目的のIDになります。
例えばIDが12だった場合、先ほどの5行目は次のように修正すればよいです。
1 | update_post_meta($post_id, $meta_key = '_thumbnail_id', $meta_value = '12'); |
ただし、設定適用前のアイキャッチには自動でデフォルト画像を割り当ててくれないので、表示されない記事があるかもしれません。その場合には、なにも記事を修正していなくてもかまわないので、記事の更新ボタンを押してみたください。デフォルトアイキャッチが記事に適用されて表示されるようになるはずです。
Comment