「Regenerate Thumbnails」:WordPress の投稿サムネイル画像を一括して再生成(リサイズ)してくれるプラグイン

WordPress › Regenerate Thumbnails « WordPress Plugins

WordPress › Regenerate Thumbnails « WordPress Plugins

「Regenerate Thumbnails」を使えば過去にアップロードした際に作られたサムネイル画像を、もう一度新たに再生成することができます。テーマを変更したり、「外観」→「テーマの編集」で「テーマのための関数(functions.php)」でサムネイルの設定を変更したときなどには必要です。

投稿サムネイル画像

投稿サムネイル画像というのは、WordPress のバージョン 2.9 から導入された機能です。トップページの記事一覧に、各々の記事の内容を示す小さな画像が表示されていることがよくありますね。

投稿サムネイル – WordPress Codex 日本語版

WordPress ではアップロードされた画像を元にしてサムネイル画像が作られます。アップロードされたときに作られるサムネイル画像のサイズ設定は、管理画面の「設定」→「メディア」で行います。

メディア設定 でサムネイル画像サイズを変更する

「サムネイルのサイズ」にある幅と高さを設定すれば、それ以後、設定したサムネイル画像のサイズが変更されて保存されます。「0」に設定しておけば、アップロードした画像からサムネイル用にリサイズし、保存されることはなくなります。

ただし、注意しなければいけないのは、サムネイル画像のサイズ設定を変更しても、過去のサムネイル画像は変更されないという点です。

たとえば、もともと縦150px・横150pxのサムネイル画像を使用していた場合、新しく設定を300×300にしても、過去にアップロードして作られたサムネイル画像が自動的に新しい設定でリサイズされることはありません。したがって、300×300のサムネイル画像出力スペースには150×150の画像が表示されるばかりで、多くの余白部分が生まれてしまいます。

設定後にアップロードされた画像は300×300でサムネイル画像が作られますが、それ以前の画像は150×150のままです。それでは困りますね。全てのサムネイル画像を新しい設定サイズ300×300に合わせるためには、過去のサムネイル画像をリサイズ(再生成)する必要があります。

リサイズするメリット

スタイルシートで無理やり画像サイズを合わせることもできますが、それだと画像の鮮明さが失われたり、比率が合わなくなる場合があります。また、大きい画像を小さく表示してしまうと、表示スペースに比べてファイルサイズが大きすぎるため、サイト表示を遅くする原因になってしまいかねません。

出力する画像サイズは Web ページに合わせたぴったりのサイズにしておくことをおすすめします。

「Regenerate Thumbnails」は、サムネイル画像の再生成が簡単にできます。テーマを変更したり、「外観」→「テーマの編集」で「テーマのための関数(functions.php)」でサムネイルの設定を変更したときなどに利用するといいでしょう。

インストール方法

管理画面の「プラグイン」→「新規追加」で「Regenerate Thumbnails」と打ち込んで検索します。

「Regenerate Thumbnails」プラグインを追加

「いますぐインストール」をクリックしてください。また、公式ページからダウンロードして、インストールすることもできます。

WordPress › Regenerate Thumbnails « WordPress Plugins

インストールしたら、有効化してください。

使い方

手順は、先に管理画面のメディア設定でサムネイル画像のサイズを決めておき、それから次にこのプラグインで再生成(リサイズ)を行います。

過去に画像をアップロードした際に作られたサムネイル画像全てを一括して再生成することもできますし、画像ごとに再生成することも可能です。

一括で再生成する方法

管理画面の「ツール」→「Regen. Thumbnails」で行います。

Regenerate Thumbnails で一括再生成する

画面に「Regenerate All Thumbnails」というボタンしかないので、このボタンをクリックするだけだとわかります。

Regenerate Thumbnails を実行中

実行中は、進行具合のパーセンテージが表示され、どの画像のリサイズが何秒で終わったのかがリストアップされていきます。

サムネイル画像の数が多い場合や、サーバーの性能が低い場合には時間がかかると思います。当ブログは600ほどの数を4分ほどで終えました。リサイズが完了すると、画面上部にこのような表示が出ます。

Regenerate Thumbnails のりサイズ完了のお知らせ

All done! 619 image(s) were successfully resized in 247 seconds and there were 5 failure(s). To try regenerating the failed images again, click here. (すべて完了しました! 619の画像が247秒でうまくリサイズされ、失敗したのは5つです。失敗した画像をもう一度再生成するには、こちらをクリックしてください。)

文字通りの内容です。何らかの理由で失敗したサムネイル画像を再生成するには「click here」をクリックすれば、もう一度やってくれます。

画像ごとに再生成する

画像ごとにサムネイル画像をリサイズしたいのなら、「メディア」の「ライブラリ」から選択しましょう。マウスを重ねるとこのように、

メディアライブラリでリサイズする

「Regenerate Thumbnails」という表示が出ますので、こちらをクリックします。すると一括リサイズのときと同じ画面になります。あとは同じです。

サムネイル画像を出力するためのテンプレートタグ

もし利用している WordPress にサムネイル画像を表示する機能が備わっていないのなら、カスタマイズして表示できるようにしてみるといいかもしれません。ただし、配布されているテーマの中にはカスタマイズが禁止されているものもありますので、ご注意ください。

アイキャッチ画像を使えるようにするコード

まず、トップページやカテゴリーページなどの記事一覧に「アイキャッチ画像」を表示できるようにするため、functions.php に以下のコードを追加します。

「アイキャッチ画像」というのは、アップロードした画像の中から一枚を選んで、記事に関連付けて出力させる画像を指します。

サムネイル画像を出力するためのコード

「アイキャッチ画像」は <?php the_post_thumbnail(); ?> というコマンドで出力します。メディアの設定にある「サムネイルのサイズ」「中サイズ」「大サイズ」で決めた画像サイズをサムネイル画像に使いたい場合には、以下のように記述します。

これだけなので簡単ですね。

アイキャッチ画像の出力サイズを指定するコード

なお、メディア設定で変更せず、あらかじめアイキャッチ画像のサイズを決めておきたい場合には、

のようにしておきます。配布されているテーマで、アイキャッチ画像のサイズを変更するとデザインが崩れる場合には、あらかじめ設定してあると思います。

当ブログもこちらの方法を利用しています。

デフォルトの3つ以外に追加したい場合

さらに、デフォルトの3つ以外にも、別のサイズでサムネイル画像を使用したい場合には、新しく作ることができます。こちらは好きな名前をつけてください。

今後は、画像をアップロードするたびに「サムネイルのサイズ」「中サイズ」「大サイズ」に加えて「Another(400×300のサイズ)」の画像が自動で生成され、保存されるようになります。

あとは、出力したい場所に

と記述するだけです。

さらに詳しい使い方

もっと詳細な設定をしたいのであれば、最新版の公式情報を参考にしてください。

Post Thumbnails « WordPress Codex

さいごに

テーマを変更したり、サムネイル画像サイズをカスタマイズするときには、サーバーに保存されているサムネイル用の画像を再生成しなければいけません。ゼロから作り直すのではなく、プラグインの機能で一括して作れるので、ほとんど手間がかからず簡単です。

使い終わったらもう必要ないので、プラグインを削除しておけばいいでしょう。

関連記事

「Acunetix WP Security」:サイトの脆弱性スキャン・パーミションの設定・データベースの接頭辞の変更・その他の安全性を高めるセキュリティ対策が総合的にできるプラグイン

WordPressプラグイン「Acunetix WP Security」が指摘する全ての対策方法を解説しています。とくに手動で行う必要がある「.htaccess」「install.php」「upgrade.php」ファイルについても書いています。

「WordPress Popular Posts」:サイトの人気記事をランキング表示させることができるプラグイン

「Wordpress Popular Posts」はサイト内の人気記事をウィジェットに表示させることのできるプラグインです。 投稿した記事が溜まってくると、人気のある記事が増えてくるものです。それをランキングにしてウィジェットに表示しておけ…