Post Thumbnail Editorで狙い通りのサムネイルを作る！ – WordPressプラグイン紹介
イラストページのギャラリーを改修する際にあたって、規定サイズにトリミングしたサムネイルを表示したかったのですが、自動でトリミングされたサムネイルでは切り出す位置が一定で、絵によってはめちゃくちゃどうでもいいところが切り出されちゃうんですよね。
やっぱりサムネイルひとつひとつにも気を使いたい。
ローカルで改修作業中、Photoshopでいちいちトリミングしたサムネイル用画像を用意して、サムネイル用の画像フィールドを追加して…とやっていたんですが………
やってられるか〜〜！！！！！！！となったので作戦を変更しました。
さすがに4、5枚はともかく10枚超えてくると面倒の極みです。
これプラグインでなんとかならないかな〜！と探していたらありました。
「Post Thumbnail Editor」というプラグインを入れてみることにしました。
今回はこのプラグインについて紹介したいと思います。
サボりたい気持ちがプラグインとの出会いを生む。サボりたい気持ちが効率化を生む。わたしはサボって楽することは大事なことだと思いますね〜。
※記事内では以下、WordPressを「WP」と表記いたします。
この記事の目次
Post Thumbnail Editorとは
「Post Thumbnail Editor」は、メディアにアップロードした画像から、任意の範囲を切り抜いたサムネイルを生成することができるプラグインです。
通常、サムネイルは任意位置でトリミングができないので、一辺を基準にして縮小・はみ出した部分がトリミングされるという形になります。そのため、写真やイラストによっては、「そこで切られたら意味わからん画像になるやんけ！！」ということもあります。
あります…実際。
なお、このブログの最新記事一覧（Recent Posts）の正方形のサムネイルなんかがまさにそういう状況（記事執筆時点）。
このプラグインの便利ポイントまとめ
- ・メディアにアップ済の画像のトリミングを自由にできる。
- ・別途サムネイル画像を用意しないでも狙い通りのサムネイルが作れる
- ・一度トリミングした後でも、なんどでもトリミング範囲を変えられる
本サイトのIllustration作品個別ページを例に、具体的に使い方を見ていきましょう。
Illustration作品個別ページは、作品説明の下に他の作品ページへのリンクが付いています。
このサムネイルを作成するのに、「Post Thumbnail Editor」を使用しました！
プラグイン使用前の下準備
下準備1：functions.phpにサムネイルの設定をする
まず先に、サムネイルの設定をします。
テーマの中のfunctions.phpを開きます（なければ新規で作る）。
※functions.phpはミスると画面がふっとぶので注意しながら触ってくださいね。
// functions.php
add_theme_support('post-thumbnails', array('post','gallery','portfolio'));
add_image_size('thumbnail_190x190', 190, 190, true);array()の中はどの投稿タイプで使うのかを書きます。わたしの場合は、post（ブログ）、gallery（イラスト作例）、portfolio（Web制作実績）で使うので3つのカスタム投稿タイプ名を入れています。
add_image_size('任意の名前', width, height, trueまたはfalse);2行目がサムネイルの設定です。わたしはサムネイルのサイズが一目でわかるような名前をつけています。
複数のサイズを設定する場合は、1行ずつ増やしていきます。
これで、上記のコードを例にいうと、190px × 190pxのサムネイルが生成できるようになりました。
下準備2：出力先のページに出力コードを書く
次に出力側である、ギャラリーの詳細ページ（single-gallery.php）にサムネイルを呼び出すコードを書きます。
ギャラリーの投稿画面はAdvanced Custom Fields（ACF）を使用したカスタムフィールドで作成していますので、下記のコードはACFの画像フィールドの出力コードとなります。
// single-gallery.php
<?php
$img01 = get_field('illust'); //カスタムフィールド名
$imgurl01 = wp_get_attachment_image_src($img01, 'thumbnail_190x190');
if($imgurl01){ ?>
<img src="<?php echo $imgurl01[0]; ?>" alt="<?php the_title(); ?>">
<?php } ?>
この状態で表示すると下の図のようになります。
単純に画像の中央でトリミングされていますね。
キャラクターが両サイドに見切れてて、ちょっといまいちです。
それでは、このいまいちサムネイルを、いい感じにトリミングしていきましょう！！
Post Thumbnail Editorの使い方
プラグイン設定画面
プラグインをインストール＆有効化したら、サイドバーの「設定」の中に「Post Thumbnail Editor」が追加されます。
これをクリックしてプラグインの設定画面にいきましょう。
特別に設定しないといけないことはあまりないのですが、このサイトではデフォルトのサムネイルサイズは使用せず、functions.phpで設定した比率のサムネイルのみを使うので、デフォルトのサムネイルサイズの「Hidden」にチェックしておきます。これは任意で構いません。
単純にサムネイルをトリミングする画面で不要なものを表示したくないので、気にならなかったらこの行程はスルーOKです。
メディアから画像を選択
「メディア」（または投稿編集画面の「メディアを追加」等の画像挿入時）から、サムネイル作成を行いたい画像を選択します。
あまり目立ちませんが、こっそりと、「Post Thumbnail Editor」という項目が増えています。
一瞬気づかないぐらいのこっそり具合ですよね…ここをクリックしてください。
作成するサムネイルサイズを選択
「Post Thumbnail Editor」の編集画面です。
右カラムにThumbnailsというテーブルがありますが、ここにfunctions.phpで設定したサムネイルが並んでいます（下準備1参照）。
また、先述のプラグイン設定画面であった「Hidden」のチェックボックスにチェックを入れていると、このテーブルに表示されません。
まずは作成したいサイズにチェックを入れ、「Options」をクリックして開きます。
「Aspect Ratio」はトリミング時の縦横比率になります。ここは「1」と入れれば1:1＝正方形、「2」と入れれば1:2の長方形になります。
今回は正方形なので「1」と入力しましょう。
トリミングしたい範囲を選択
画像の上にカーソルを置くと十字カーソルになります。
ドラッグすると、点線が点滅し、トリミング範囲が表示されます。
大きく範囲をとった場合、表示されるサムネイルサイズに合わせて縮小され、小さく範囲をとった場合は拡大されます。
サムネイルとして見せたい範囲をドラッグしましょう。
一度ドラッグして範囲が作られた後も、範囲の位置を動かしたり範囲の広さを変えることができます。
また、範囲外（緑色になっている部分）をクリックすれば、範囲選択が消えるので、やり直すことができます。
この位置・範囲でOK！と決めたら、「Crop」ボタンをクリックしましょう。
プレビュー確認したら保存して確定
「Crop」をクリックすると、プレビューが表示されます。
左にボタンが3つ並んでいますが、
真ん中のフロッピーディスクアイコンのボタンで確定・保存できます。
余談ですがフロッピーディスクアイコン＝保存という概念、いつまで残るんでしょうか笑
上のくるくる矢印アイコンをクリックすれば、
「Post Thumbnail Editor」でトリミングする前の状態のサムネイルが表示され、トリミング後と比較できます。
また、ゴミ箱アイコンをクリックすると、トリミングをやり直せますよ。
確定すると枠がグレーになり、これでサムネイル作成は完了です！！
今作ったサムネイル以外にも、その他のサイズのサムネイルがプレビューされていますが、もちろん一つ一つのサムネイルに対して自由にトリミングができますので、「正方形のサムネイル」と「長方形のサムネイル」で切り取り方を変えることも可能です。
反映されているかページを確認しましょう
実際のページを確認すると、きちんとサムネイルがトリミング後のものになっていますね！
こんな感じで、アップ済みのイラストのサムネイルをすべてトリミングしました！
キャラクターの顔を中心にトリミングするようにできたので、どんなイラストかわかりやすくなりましたね。
直感的にトリミングできるのでとても簡単でした！
Post Thumbnail Editorのすごいところ
何度でも再作成が可能！
一回保存した後でも、やっぱりトリミング範囲が気にくわない！やり直したい！という場合でも、何度でもやり直すことができます。
実際にページで見るとイマイチでも、作ってファイル保存してアップして…の手間なく納得いくまで簡単に調整できるのが嬉しいですね。
1枚の画像から複数サイズのサムネイルが作成できる
もし画像ソフトで1サイズごとにサムネイル画像を作っていたとしたら、その分だけアップロードしないといけないし、その分だけ画像設定しないといけないですよね。
このプラグインであれば、メディアにアップロードするのはオリジナルの1枚だけ。
あとはプラグインで切り取るので、メディア一覧がサイズ違いの画像でもりもり！ということにならないのも地味に魅力的です。
Post Thumbnail Editor使用の注意点
お気付きの方もいると思いますが、
このプラグインは最終更新が2年前となっています。
もしかしたらこれから先も更新はされないかもしれません。。
セキュリティ的に、など古いプラグインを使うことに抵抗がある方はお気をつけください。
また、いつ最新のWPで動かなくなるかもわからないので、動かせる間だけなんとか使えるプラグイン…ということになります。
更新し続けてる似たようなプラグインがないのかなぁ…と思いながら探してますが、今の所は動くのでしばらくは頼ります。
いちいちサムネイル画像作りたくねえ！！な人にはおすすめ
すこしでも楽したい！でも理想的なサムネイルが欲しい！というワガママガール（ボーイ）はぜひ使ってみてくださいね。
写真やイラストなどのギャラリーページを設けている方には特におすすめですー。
