WordPressでアイキャッチ画像を表示させてみるの巻

 ブログ記事を鮮やかに彩るものとして、また記事の内容をユーザーにより強く印象付けるため、記事の冒頭に挿入するアイキャッチ画像はたいへん便利なものです。いくつかの設定が必要なことと、画像の大きさの取り扱いに初心者の方には難しく感じるかもしれませんが、一度設定してしまえばあとは画像をアップロードする作業だけですので、がんばって設置してみてください。

設定と使い方

設定は簡単です。使っているテーマの function.php を開き、次の一行を追加してください。

すると、管理画面の記事投稿ページにアイキャッチの設定項目が追加されます。テーマによっては最初から使えるようになっているものもあるので、ご自分の環境で確認してください。その場合には function.php の編集は不要です。

表示されていない場合には、画面上部の「表示オプション」をクリックし、「アイキャッチ画像」にチェックを入れてください。

アイキャッチ画像をページに挿入するには、以下のソースコードを PHP ファイルに追加します。

画像サイズの設定

the_post_thumbnail テンプレートタグの引数に指定できるIDは、次の4種類が定義されています。IDを指定しない場合にはサムネイルサイズが適用されます。

  • thumbnail:サムネイル
  • medium :中サイズ
  • large :大サイズ
  • full :フルサイズ

各サイズを変更したい場合には、管理画面の「設定」→「メディア」に移動します。

例えば、single.php に大サイズのアイキャッチを挿入したいとします。テーマの幅が最大655ピクセルだった場合、このように設定します。高さの上限が0になっていますが、これは高さには上限を設けないという意味です。

single.php を開き、アイキャッチを挿入したい場所に次のソースコードを追加します。

今回は WordPress に1600X1200ピクセルの画像をアップロードしましたが、これを縦横比を保ったまま幅655ピクセルに縮小した画像が作成されるので、表示はこのようになります。

ちなみに、先ほど管理画面からメディアの大きさを変更しましたが、この変更は記事投稿の「メディアを追加」のサイズも同時に変更されるので注意してください。

「メディアを追加」のサイズを変更したくない場合、次のソースコードを function.php に追加することで対応が可能です。

「切抜きの有無」ですが、trueで縦横比で縮小後に不要な部分を切り抜きます。falseで縦横比を維持して縮小して切り抜きを行いません。

先ほど管理画面からメディアサイズの変更をしましたが、同様の設定したい場合には次のようになります。

デザインのカスタマイズ

single.php

WordPress で記事に画像を挿入すると、デフォルトの設定では img タグを自動的に p タグで囲んだ HTML が出力されます。ところが、アイキャッチとして出力された img タグは p タグで囲まれていません。そのため、ほかの画像と同じデザインで表示されないかもしれません。

この対策として、ひとつは single.php にアイキャッチを設置するときのソースコードを前もって p タグで囲んでしまうというものです。

もうひとつは、アイキャッチとして出力された画像は WordPress が wp-post-image クラスを自動で割り振ってくれるので、このクラスに対してスタイルシートを指定すればよいかと思います。

index.php

例えば、ブログのトップページをアイキャッチを使って次のようにデザインカスタマイズをしたいとします。

出力される HTML は特別なカスタマイズをしていなければ次のようになるかと思います。

スタイルシートの簡単なサンプルを掲載しておきます。

簡単に解説します。

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 を編集することで変更することができます。次のソースコードを追加してください。

今回、画像の下にテキストが回りこまないスタイルシートの解説のために少し長めに設定しましたが、見栄えの良いデザインになるように長さを調節するとよいでしょう。

デフォルトアイキャッチ

さらに、デフォルトのアイキャッチを設定することも可能です。うっかりアイキャッチを指定し忘れてデザインが崩れるのを防ぐことができます。function.php に次のソースコードを追加してください。

$meta_value に指定する ○○○ は画像IDなのですが、これはどのように調べたらよいのでしょうか。管理画面の「メディア」→「ライブラリ」に移動しIDを調べたい画像をクリックしてください。

「添付ファイルの詳細」ダイアログが表示されるので、右側にある「さらに詳細を編集」というリンクの上にマウスカーソルをもってきます。すると、画面左下にアドレスらしきものが表示されますが、post=○○○ の ○○○ の部分が目的のIDになります。

例えばIDが12だった場合、先ほどの5行目は次のように修正すればよいです。

ただし、設定適用前のアイキャッチには自動でデフォルト画像を割り当ててくれないので、表示されない記事があるかもしれません。その場合には、なにも記事を修正していなくてもかまわないので、記事の更新ボタンを押してみたください。デフォルトアイキャッチが記事に適用されて表示されるようになるはずです。

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP