WordPressのサムネイルに新しいサイズを追加する方法と再作成するプラグインの備忘録

WordPressのサムネイルに新しいサイズの定義を追加する方法とサムネイルのサイズを再作成する方法

WordPressテーマのカスタマイズをしていて、次のようなシーンにぶつかりました。

  • 記事一覧にサムネイルを表示したいけど、今まで設定してあったサムネイルとは別サイズのサムネイルを追加したい。
  • サムネイルの設定を追加したので、過去にアップロードした画像のサムネイルを再度作成したい。

WordPressのテーマを自作・またはカスタマイズしていると、もしかしたらまた同じようなことにぶつかることがあるかもしれないので、備忘録がてらまとめました。

WordPressのサムネイルまわりのカスタマイズ

今回は関連記事用のサムネイルの他に新着記事一覧用のサムネイルを作りたい

WordPressのテーマはStinger 5をベースに自作しています。よっひー(@yosiakatsuki)です。

最近、新しいWordPressのテーマ開発に着手したら、さっそく画像(サムネイル)まわりでちょっとめんどくさいチャレンジしなければならないことにぶつかりました。

今回やりたかったことは次の2点です。

  • 投稿サムネイルに新しいサイズを追加したい
  • 追加したサイズのサムネイル画像を全記事分作り直したい

サムネイルのサイズ追加に関してはfunctions.phpに1行コードを追加、サムネイル再作成はプラグインを活用しました。

また同じことに出くわした時のために備忘録がてらまとめまてみましたので、よろしかったら参考にしてみてください。

サムネイルに新しいサイズを追加する方法

新しいサイズのサムネイルを追加するためのコード

まず、既に設定してあるサイズとは別のサイズのサムネイルを追加する為に僕がfunctions.phpに追加したのは次のコードです。

//add_image_size( [画像サイズの名前], [幅], [高さ], [切り抜きするか(初期値:False)] );
add_image_size('thumb300',300,300,true);

add_image_size関数で「サムネイル指定する時の名前」、「画像の幅」、「画像の高さ」、「切り抜きするか」を指定します。

「切り抜きするか」の値をtrueにすると、指定した幅・高さに画像を切り抜いてサムネイルを作成してくれます。

「切り抜きするか」の値をfalseにする(もしくは指定なし)と、縦横比は保持したまま長辺を指定した幅か高さに合わせたサイズにリサイズした画像を作成してくれます。

  • add_image_size関数を使用するためにはfunctions.phpにadd_theme_support( 'post-thumbnails' );が書かれているか確認してください。無ければ追記して下さい。
  • functions.phpを修正します。できればPC・Macに作ったWordPressのローカル環境で動作検証することをお奨めします。

で、この設定によって作成されるサムネイルをテーマで呼び出す時のサンプルコードはこちら

<?php if ( has_post_thumbnail() ):  ?>
    <?php the_post_thumbnail( 'thumb300' ); ?>
<?php else:  ?>
    //サムネイル画像なしの時に表示される画像(no imageみたいなことが書かれた画像)があるといい感じ
<?php endif; ?>

もっと詳しくadd_image_size関数について知りたい場合、関数リファレンスを御覧ください。

新しいサムネイルサイズの使い道

WordPressのサムネイルサイズの設定ページ

サムネイルの画像サイズはWordPress管理画面→[設定]→[メディア]にサイズの設定と切り抜きの有無の設定項目があるのですが…

僕はここの設定で作られるサムネイルをサイドバーや記事下に表示される使っています。(150 × 150のサムネイル画像を使ってます。)

ですが、新しいテーマでは記事一覧(カテゴリやタグの記事一覧、検索した時に表示される記事の一覧など)でちょっと大きめなサイズのサムネイルが使いたくなったので新しいサイズのサムネイル画像を作るように設定を追加しました。

関連記事一覧には切り抜いたサムネイルを使うと綺麗に表示される!

個人的にはadd_image_size関数の4つ目の引数に「true」を指定して作った画像を結構重要視してます。

時々、正方形の画像を表示すべきところに、正方形以外の画像を表示してしまい、表示が崩れてる関連記事の一覧をみることがあります。

add_image_size関数の4つ目の引数に「true」を指定すると、画像の作成時に指定サイズに切り抜きしてくれるので、絶対に指定したサイズの画像が出来上がります。

もちろん、切り抜きをするので、画像から切り落とされる部分もありますが、「サムネイル画像」として使う画像ですから、画像全体が表示されている必要はないですよね。きっと。

そんなことより、一覧の表示が揃うようなサイズの画像を表示したほうがよっぽど綺麗に見えると思います。

もし、関連記事の画像表示で不満があればカスタマイズを検討してみてください。

サムネイルを再作成する方法

サムネイル画像の作成タイミング

先のコードで新しいサムネイル画像サイズの定義が出来たわけですが、コード追加しただけでは画像は再作成出来ません。

では「どのタイミングでサムネイル画像が作られるのか」…

調べてみると、どうやら画像のアップロード時に他サイズにリサイズした画像やサムネイル画像を作っているようです。

…ってことで、過去にアップロード済みの画像は再度アップロードし直さないとサムネイル画像の作成出来ないようなのですが、そんな大変なことはやってられません。

なので、今回は「Regenerate Thumbnails」というプラグインの力を借りることにしました。

ボタン一つでサムネイル画像の再作成ができるプラグイン「Regenerate Thumbnails」

サムネイルの再作成について調べたサイトの更新日が古く、プラグインがちゃんと動くかドキドキしましたが、とりあえず問題なく動きました。動作確認時の環境は次の通りです。

  • WordPressバージョン:4.3.1
  • Regenerate Thumbnailsバージョン:2.2.4

使い方の説明がいらないくらい簡単ですが、使い方について説明します。

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

まずはプラグインの追加です。

WordPressの管理画面からサムネイルを再作成するプラグインを新規追加から検索しインストールする

プラグインの追加は特に難しい操作はなく、WordPress管理画面の[プラグイン]→[新規追加]→[「Regenerate Thumbnails」で検索]→[今すぐインストール]

…というおなじみの流れになります。

インストールが完了したら、プラグインを有効化します。

「Regenerate Thumbnails」でサムネイル画像を再作成

「Regenerate Thumbnails」プラグインを有効化したら、[ツール]→[Regen. Thumbnails]をクリックしてプラグインの実行ページを開きます。

サムネイル再作成プラグインの実行ページにはボタンが1つあるので、そのボタンをおして実行します

実行ページにある「Regenerate All Thumbnails」ボタンを押してサムネイルの再作成処理を開始します。

あとは待つだけです!

サムネイル再作成プラグインの進み具合はインジケータで進捗を表示してくれます。

サムネイル再作成処理が始まるとインジケーターで進行具合を表示してくれます。

サムネイル作成は画像枚数が多ければ多いほど時間がかかるので、時間に余裕をもって実行したほうがいいかもしれません。

ボタンを押して待つだけで大量のサムネイルの再作成が完了しました!

サムネイル画像再作成のまとめ!

関連記事一覧などに表示する為に上下左右が多少切れてもいいから、サイズを固定した画像を作りたい場合、今回紹介した方法が役立つと思います!

追加するコードはちょっとだけですが、functions.phpを修正することになるので、ページ真っ白にならないためにも、まずはWordPressのローカル環境で試してみることをおすすめします。

よっしーのひとこと

よっひー

前半のコードの部分に関しては、「なんかどこかで見たことあるなぁ」と思いながら書いてたんですけど、よくよく調べたらStinger 5にあるコードを流用してました。

参考にしたものは色濃く残りますね。

ではまた。