【WordPress】カスタマイザーに切り抜き（リサイズ・クロップ）ができる画像アップロードの実装方法

今回は、カスタマイザーで切り抜き（クロップ）に対応した画像アップロードの実装方法を紹介します。

「カスタマイズ」→「ヘッダー画像」には、切り抜きができる画像アップローダーが最初からありますね。

これと同じ物を追加します。

画像の比率を固定してアップロードできるので、何かと便利な機能です。

カスタマイザーに画像アップロード機能を追加

functions.phpに以下のコードを追加してください。


<?php
/**
 * サニタイズ
 */
function sanitize_cropped_image ( $id, $setting ) {
  return ( is_int( $id ) ) ? $id : $setting->default;
}

/**
 * カスタマイザーに追加する処理
 */
if( !function_exists( 'theme_customize_register' ) ) {
  function theme_customize_register( $wp_customize ) {
    /**
     * ヘッダー画像の設定
     */
    $wp_customize->add_setting( 'setting_image', array(
      'sanitize_callback' => 'sanitize_cropped_image',
      'type' => 'theme_mod',
    ) );
    $wp_customize->add_control( new WP_Customize_Cropped_Image_Control($wp_customize, 'setting_image', array(
      'label'       => 'ここにタイトル',
      'description' => '2400x750でピッタリ表示されます。',
      'section'     => 'header_image', //任意のセクションを記述してください。
      'settings'    => 'setting_image',
      'width'  => 2400, //任意の数値
      'height' => 750, //任意の数値
      'flex_width' => false,
      'flex_height'=> false,
    ) ) );
  }
  add_action( 'customize_register', 'theme_customize_register' );
}

これでカスタマイザーに切り抜きできる画像アップローダーが実装できます。

サニタイズというのは不正な値が設定されていないかデータを検証することです。

これをしないとテーマチェッカーでエラーが出るので必ずサニタイズは行いましょう。

画像をアップロードすると画像の投稿IDが整数で保存されるので、値が整数型なのかを関数で検証しています。

サニタイズについては以下の記事を参考にしてください。

データ検証 – WordPress Codex 日本語版

アップロードされた画像の取得

以下の方法でアップロードされた画像のURLを取得することができます。


$image_mod = get_theme_mod( 'setting_image' );
$image_data = wp_get_attachment_image_src( $image_mod, '' );

$image_url = $image_data[0]; //urlの取得

get_theme_mod( 'setting_image' );で取得できるのは画像の投稿IDで、型は整数型（int）です。

wp_get_attachment_image_src( $image_mod, '' );の第二引数を空にすることで、クロップされたサイズの画像情報を取得することができます。

縦横比を固定して画像をアップロードできるようにしたい場合に利用してください。

カスタマイザーに画像アップロード機能を追加

アップロードされた画像の取得

関連記事