WordPressのカスタムフィールドに登録した画像のリサイズの仕方についてメモっておきます。
かみーゆ/フロントエンドエンジニア
資金ゼロからフィリピンで起業した海外ノマドエンジニア。IT業界10年以上でテクニカルディレクター（技術責任者）・エンジニア講師・ブリッジSEを経てLenzTechnologies Inc.を設立し、代表を務める。CMS concreteCMSエバンジェリスト。テックブログ以外も「磨耗しない人生」や「海外ノマド」のライフスタイルについて発信。好きなものは肉とハイボール。
functions.phpにリサイズを登録
画像のリサイズをできるようにするためにはまず、アイキャッチを有効にしなければいけません。
functions.phpに以下コードを追記します。
add_theme_support('post-thumbnails');//アイキャッチを有効にするWordPressでは画像をアップロードしたときに、リサイズした画像を生成できます。
リサイズする画像の登録
なのでadd_image_size()でリサイズする画像サイズを登録します。
add_image_size( $name, $width, $height, $crop );
- $name…新しい画像サイズの名前
- $width…画像の幅（px）
- $height…画像の高さ（px）
- $crop…画像を切り抜くか否か(初期値はfalse)
ただ、画像サイズ名に予約名があるのでそれ以外で指定します。
- thumb
- thumbnail
- medium
- large
- post-thumbnail
ということで、「newResizeImage」という名前で画像サイズを作るとするとこんな感じになります。
get_post_meta($post->ID, 'customImage', true);カスタムフィールドの画像情報を取得
出力したいカスタムフィールドの画像情報を取得します。
get_post_meta($post_id, $key, $single);
- $post_id…カスタムフィールド を取得したい投稿のID
- $key…取得したい値のキー名の文字列。オプションで初期値はnull
- $single…初期値はfalse。falseでカスタムフィールドの配列を返す。true をセットした場合、文字列として単一の結果を返す。
わざわざ配列にする必要はないのでtrueをセット。 IDは時と場合によるのでですが、whileなどで回してなりして取得します。今回は割愛します。
あとは画像をwp_get_attachment_image_src()で画像情報を取得します。
取得できる値は配列で以下のようになってます。
- [0] => url
- [1] => width
- [2] => height
- [3] => 真偽値: リサイズされいている場合は true、元のサイズの場合は false
なのでパスを取得してimgタグなどに出力したい時は以下のような感じになります。
$imagepath = wp_get_attachment_image_src(get_post_meta($post->ID, 'photo1', true), 'newResizeImage');
echo '<img src="' . $imagepath[0] . '" width="' . $imagepath[1]. '" height="' . $imagepath[2]. '">';パスだけ取得できたら、JSなどにも応用できて便利です。
