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