Web’Notes

WordPressでアイキャッチ画像を設定する方法

Detail of eye of the Grandma of Graffiti. By: Chris_Samuel

WordPressでは、投稿ごとにアイキャッチ画像(サムネイル)を入れることが出来ます。

記事で最も最初に目に付くのがアイキャッチ画像であり、記事の内容を一目で伝えるために設置しようとする人も多いと思います。

今回は、そのアイキャッチ画像の設定方法についてまとめましたので紹介します。

1. アイキャッチ画像の有効化
2. アイキャッチ画像の設置
3. アイキャッチ画像のリサイズ

アイキャッチ画像の有効化

アイキャッチ画像を有効化するためには、function.phpに以下のコードを追加します。

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

これで、記事の投稿画面にアイキャッチの設定項目が追加されます。

アイキャッチ画像の設置

アイキャッチ画像をページに設置するときは、以下のコードをphpファイルに追加します。

<?php the_post_thumbnail('画像サイズのID'); ?>

画像サイズのIDには以下が設定できます。

各サイズについては「設定」>「メディア」で変更できます。

IDを指定しなかった場合は、デフォルトでサムネイルの画像サイズが使用されますが、以下のコードをfunction.phpに追加するとデフォルトで使用される画像サイズが変更できます。

<?php set_post_thumbnail_size(横のサイズ, 縦のサイズ, 切り抜きの有無); ?>

「切抜きの有無」は、trueで切り抜きを行い、falseで縦横比を維持して縮小を行います。

• 切り抜き：縦横比で縮小後に不要な部分を切り取ります

このように指定すると、横は300px, 縦は225pxで切抜きを行います。

<?php set_post_thumbnail_size(300, 225, true); ?>

アイキャッチ画像のリサイズ

アイキャッチ画像は、アップロード後に画像サイズの設定を変更してもリサイズしてくれないため、再度アップロードを行う必要があります。

そういった場合は、「Regenerate Thumbnails」を使用すると、自動でアップロード済みの画像をリサイズしてくれます。

使用方法は簡単で、まず「Regenerate Thumbnails」インストールし有効化します。

「ツール」＞「Regen. Thumbnails」を選択し、「Regenerate All Thumbnails」ボタンをクリックします。

後は自動でリサイズを行ってくれます。

また、「メディア」から個別に画像のリサイズを行うことも出来ます。

画像サイズをリサイズをするときは、元々設定されていたサイズの画像が無くなるためバックアップを取ってから行ってください。

WordPress WordPress, アイキャッチ