WordPressで画像をリサイズするContents Management System

WordPressで画像をリサイズする

WordPress

カスタムフィールドに登録した画像のリサイズの仕方についてメモっておきます。

ざっくりとした内容

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

なのでパスだけ取得したいときは以下のような感じになります。

$imagepath = wp_get_attachment_image_src(get_post_meta($post->ID, 'photo1', true), 'newResizeImage');
$imagepath[0] //画像のパス

関連記事もあわせてお読みください

Read More Blogs

よく読まれている記事

管理人について

IT戦士:かみーゆ

私、フロントエンドエンジニアのかみーゆです。日本でフロントエンドを中心に約10年Web制作 →→→ セブ島に転職してエンジニア講師 →→→ オフショア開発担当者(イマココ)。13歳の頃から「好きなように生きて好きなように死ぬ」が人生のKPI。なので、「楽しいか」、「かっこいいか」でやることを判断・取捨択一しています。好きなものは肉とビール。

About Me