Help us understand the problem. What is going on with this article?

WordPressで任意のサムネイル画像サイズを追加・サムネイルを再生成する方法

More than 3 years have passed since last update.

WordPressでサイトを作っていると、記事の一覧を表示するときにアイキャッチ画像を表示することが多いと思います。

その際、任意のサイズのサムネイル画像を表示したくなるのが人情です。

この記事では、「任意のサイズのサムネイル画像を生成する方法」とWordPressでサイトを構築して運用し始めた後、新しくサムネイル画像のサイズを追加して再生成する方法をご紹介します。

任意のサイズのサムネイル画像を生成する方法

WordPressで画像をアップロードすると、

  • サムネイル「150 x 150px」
  • 中サイズ「300 x 225px」
  • フルサイズ「600 x 450px」

上記の3パターンで自動的に画像が生成されます。

これはデフォルト設定の場合で、これ以外のサイズで画像をリサイズ・切り出して欲しい場合は少し手を加える必要があります!

といっても簡単で、テーマにある functions.php というファイルに一行加えるだけ。

<?php add_image_size( $name, $width, $height, $crop ); ?>

引数の$nameは、新しい画像サイズの名前を指定します。
$widthは、切り出したいサムネイル画像の幅をピクセル単位で指定します。
$heightは、切り出したいサムネイル画像の高さをピクセル単位で指定します。
$cropは、画像を切り出すかどうか。デフォルトはfalseで、指定の幅または高さに合わせてリサイズ、trueの場合は、指定のサイズで切り抜きます。

参考サイト:

関数リファレンス/add image size

メディアのサイズを追加する

例えば、functions.phpに以下のように画像サイズを指定したとします。

<?php add_image_size('post_100x100_thumbnail', 100, 100, true); ?>

指定した後、画像をアップロードすると、100x100pxで画像が切り出されます。

100x100pxで切り出された画像を利用する場合は、こんな感じで指定します。
※ループでpostを回している場合

<?php the_post_thumbnail('post_100x100_thumbnail'); ?>

めっちゃ簡単です!

サムネイル画像を再生成する方法

WordPressでサイトを運用し始めたあと、サイトの改修などでサムネイル画像のサイズを新しく追加してそちらを使いたい場合があります。

そのときに問題になるのが、過去にアップした画像の新しいサムネイル画像をどう生成するのかという問題。

いまからアップロードする画像は指定したサムネイルの画像サイズで生成されるのですが、過去の画像については改めて画像をアップロードするなどしないといけません。

とてもめんどくさい......

でも、WordPressはプラグインが豊富!解決してくれるプラグインがありました!

Regenerate Thumbnails

使い方もめちゃ簡単!

まず、プラグインの新規追加からregenerate-thumbnailsで検索してインストールして有効化します。

すると、サイドバーのツールにRegen. Thumbnailsと表示されるようになるのでクリックします。

regenerate-thumbnailsの管理画面に遷移すると、Regenerate All Thumbnails表示されたボタンがあるのでクリックするとサムネイル画像の再生成が始まります。

これで、functions.phpに追加した新しいサイズのサムネイル画像が再生成されるはずです。

※自分のブログ内容から転載しています。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした