WordPressでアイキャッチ(サムネイル)を表示させるメモ

WordPressには、投稿や固定ページでページ毎に画像を1枚指定して、詳細ページのメイン画像や、一覧ページのサムネイル画像として表示させる事ができる「アイキャッチ」という機能があります。

アイキャッチを表示させる事によって、どんな内容が書かれているページなのかが視覚的にわかりやすくなったり、興味を引いてページを読んでもらいやすくなるというようなメリットが期待できます。
またブランドイメージやサイトの雰囲気に合わせた画像を配置して、見た目をカッコ良くするという目的で使用する場合もあるでしょう。

アイキャッチの機能を有効にする

アイキャッチの機能はそのままでは使えませんので、まずは機能を使えるようにするための設定が必要です。「functions.php」に次の1行を追加すると、記事の編集画面のサイドバーに「アイキャッチ画像」という項目が表示され、アイキャッチの機能を使用できるようになります。

アイキャッチ

「アイキャッチ画像を設定」をクリックし、通常のメディアを追加する要領で画像をアップロードして選択するだけです。

functions.php

特に理由がなければ両方使えるようにしておいて問題ないと思います。

アイキャッチを表示させる

アイキャッチ画像を表示させるためにはテンプレートのループ内に次の1行を追加します。パラメータにサイズを指定する事で、いろいろなサイズのアイキャッチを表示させる事ができます。

アイキャッチのサイズは管理画面の「設定→メディア設定」で設定されているサイズがそれぞれ適用されます。その他のサイズを指定すると、新しい画像が作成されるわけではなく、近いサイズの画像がリサイズされた形で表示されます。

テンプレート

毎回アイキャッチがある場合は上記の一行だけでもいいですが、記事によってはアイキャッチがない場合もあるかもしれません。そんなときはアイキャッチの有無を判定して、いわゆる「No Image」を表示させる事ができます。

テンプレート

新しいアイキャッチサイズを追加する

画像をアップロードすると、元のサイズの画像の他に「サムネイル」「中」「大」のサイズが自動的に生成されますが、「add_image_size」を使うと、さらにこれ以外のサイズの画像を生成する事ができます。

「画像サイズの名前」はテンプレートから呼び出す時に使用する名前で、「thumbnail(thumb)」「medium」「large」「full」以外の名前を自由につけます。今回は「my_size」にします。第4パラメータの部分は指定したサイズに画像を切り抜くかどうかを「true/false」で指定します。デフォルト値は「false」なので切り抜かない場合は空欄でかまいません。以下は「functions.php」への記入例です。

functions.php

新しく追加したアイキャッチを表示させる

新しく追加したアイキャッチを表示させるには、通常のアイキャッチを表示させるのと同じで、パラメータ部分に先ほど自由につけた名前「my_size」を入れるだけです。

テンプレート

カスタム投稿でアイキャッチを使う

カスタム投稿では、はじめに述べた「add_theme_support('post-thumbnails');」だけではアイキャッチが使えません。「functions.php」のカスタム投稿の設定が書いてある部分の「supports」内に「thumbnail」を追加するとアイキャッチが使用できるようになります。

functions.php

カスタム投稿の場合でも表示方法は投稿や固定ページのときと同じです。

記事内の最初の画像をアイキャッチにする

毎回アイキャッチを設定するのがめんどくさい、すでに記事が数百あって今からアイキャッチを導入したいけど全部の記事一つ一つアイキャッチを設定していくのは無理・・・という場合もあります。

そんなとき、記事内の一番最初の画像を取得して、アイキャッチとして表示させる方法もあります。こちらは僕のスキルでは作れませんので、ぐぐってみてください。

ぐぐってみてください

アイキャッチ画像のURLを取得

アイキャッチの画像をクリックしたら拡大表示させたいなど、アイキャッチ画像のURLだけを取得したい場合があります。アイキャッチ画像を表示させるときと同じように、テンプレートのループ内に以下のように記述します。

テンプレート

「wp_get_attachment_image_src」のパラメータにアイキャッチのサイズ(full・large・medium・thumbnail)を指定するとそれぞれのURLを取得する事ができます。

thumbnailを指定または指定しない
https://www.tsukimi.net/cms/wp-content/uploads/2017/01/sample-150x100.jpg

mediumを指定
https://www.tsukimi.net/cms/wp-content/uploads/2017/01/sample-300x200.jpg

largeを指定
https://www.tsukimi.net/cms/wp-content/uploads/2017/01/sample-600x400.jpg

fullを指定
https://www.tsukimi.net/cms/wp-content/uploads/2017/01/sample.jpg

最終更新日:2017/08/17