皆様はWordpressでアップロードした画像をリサイズして表示したいときに、どのような方法で行っているでしょうか？
多くの方はプラグインを使用しているかと思います。
プラグインを使用するメリットはやはり機能の設置が容易なことでしょう。誰でも設置でき、誰もがその機能を扱え、画像のリサイズを実現できます。
しかし、プラグインの使用には次のようなデメリットもあります。
- WordPressの動作が重くなることがあります。
- プラグインには制作で使用しない、画像リサイズ以外の機能が含まれていることがままあります。
- リサイズが必要な画像がたったの１枚であっても、uploadsフォルダにある画像すべてがリサイズされてしまうプラグインが多く、不必要にリサイズされた画像がサーバーの容量を使用してしまいます。
こうしたデメリットを解消できる方法があります。
それはAqua-Resizerという非常にコンパクトなスクリプトを使用する方法です。
純粋に画像リサイズだけを取り入れたい、特定の一枚の画像だけをリサイズしたい、といった要望に応えてくれるのがAqua-Resizerです。
Aqua-Resizerはテンプレート上にスクリプトを書いて画像リサイズを実現するので、ある程度php、Wordpressタグの知識がある方、サイト制作者の方向けのツールになります。
それではAqua-Resizerがどのようなものなのか、見ていきましょう。
Aqua-Resizerの配布元
Aqua-ResizerはGitHubの以下のページで公開されています。英語のサイトですが頑張って読んでみてください。
https://github.com/syamilmj/Aqua-Resizer
Aqua-ResizerのWikiはこちらです。
https://github.com/syamilmj/Aqua-Resizer/wiki
Aqua-Resizerの設置
機能の設置はたったの2ステップでできます。
【Step1】
スクリプトの公開先からaq_resizer.phpをダウンロードしてきましょう。そしてWordpressテーマフォルダのテンプレート階層に置きます。
【Step2】
テンプレート階層にある functions.php に以下のようなスクリプトを記述し、aq_resizer.phpを読み込みます。
require_once(‘aq_resizer.php’);
これでAqua-Resizerが使えるようになりました。設置方法はとても簡単ですね。
Aqua-Resizerによる画像リサイズ方法
では画像のリサイズ方法を見ていきましょう。
今回はカスタムフィールドで登録した画像のリサイズ例を使用してリサイズ方法を解説していきたいと思います。
前提として、リサイズ画像はすでにWordpressの機能でアップロードされていることとします。
以下がサンプルスクリプトになります。
<?php $photo =get_post_meta(get_the_ID(), ‘image’, true); ?>
<?php $thumb = aq_resize($photo, 200, 150, false); ?>
<img src=”<?php echo $thumb; ?>” alt=””>
<?php endif; ?>
- 1行目：カスタムフィールドの値（画像ファイルのURL）を取得します
- 2行目：aq_resizeという関数を使用して画像リサイズを実行します
この例では$photoを幅200px、高さ150pxに縮小した画像を生成し、その画像のURLが$thumbに格納されています。
aq_resize関数を詳細に見てみましょう。
この関数には６つの値を渡すことができます。
<?php aq_resize( $url, $width, $height, $crop, $single, $upscale ) ?>
引数について説明していきます。
$url：画像ファイルのURLを入れます。必須項目です。
$width：リサイズ後の画像の横幅をピクセル値で入れます。
$height：リサイズ後の画像の高さをピクセル値で入れます。
$crop：画像リサイズ時に画像をトリミングするか、拡大縮小するかを論理値で入れます。トリミングする場合はtrue、縮小する場合はfalseを入れます。
$single：返り値の型を指定します。指定は論理値で行います。
falseを入れると、リサイズ画像のURL、横幅、高さの値を配列で返してくれます。
trueを入れるとリサイズ画像のURLを文字列で返してくれます。デフォルトはtureです。
$upscale：アップロードした画像が$width、$heightで指定した値より小さい場合に、画像をリサイズするかどうかを指定します。Trueで画像をリサイズします。falseで画像をリサイズしません。デフォルトではfalseが指定されています。
$url以外はすべて必須項目ではありません。リサイズ条件を任意で設定してください。
画像のリサイズは画像中央を基点として行われます。そして画像の長辺に合わせて$cropや$upscaleで指定したリサイズを行います。
- 3行目：②で取得したリサイズ画像のURLをimgタグ内に出力しています。
以上がAqua-Resizerの使用方法になります。
たった一行のスクリプトで必要な時に必要な画像リサイズを必要な分だけ行うことができます。
軽量で柔軟な画像リサイズができるAqua-Resizer。
ぜひ使ってみてください。
- 3603 views
- キム
