Analog Studio

Wordpressのカスタマイザで画像IDを保存する方法

概要

Wordpress のカスタマイザで画像を選択させる時に使う WP_Customize_Image_Control クラスを使っている方は多いと思います。
しかし、テーマの設計上でサイズの小さい画像やサムネイルも欲しい時、WP_Customize_Image_Control クラスだと画像の URL になってしまうので少し面倒です。

一般的に良くある解決法は画像 URL から Attachment ID (以降、単に「ID」と呼ぶ) を取得する attachment_url_to_postid 関数を使っています。
でもこの attachment_url_to_postid 関数は実行するたびに SQL クエリを飛ばすので頻繁には使いたくないですね。取得した ID から wp_get_attachment_image_url などの関数でもデータベースにアクセスするので無駄が多いです。
そこではじめから ID を使うことが決まっている場合にカスタマイザで ID が保存される方法をまとめます。

Wordpress4.2で追加されたWP_Customize_Media_Controlクラスを使えば一発！

まずは結論からいきましょう。
WP_Customize_Image_Control の代わりに WP_Customize_Media_Control クラスを使えば見た目は WP_Customize_Image_Control と全く同じで ID が保存されます。
超簡単です。素晴らしい仕組みです。

// 普通の画像選択 // カスタマイザによって保存される値は画像のURL // get_theme_mod( 'test_image' ) で画像URLが呼び出せます $wp_customize->add_setting( 'test_image' ); $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'test_image_class', array( 'label' => 'Imageクラスを使った場合', // 'panel' => 'パネルのID(あれば)', 'section' => 'セクションのID', 'settings' => 'test_image', ) ) ); // 画像のアタッチメントID選択 // カスタマイザによって保存される値は画像の "アタッチメントID" // get_theme_mod( 'test_image_id' ) で画像の "アタッチメントID" が呼び出せます $wp_customize->add_setting( 'test_image_id' ); $wp_customize->add_control( new WP_Customize_Media_Control( $wp_customize, 'test_media_class', array( 'label' => 'Mediaクラスを使った場合', // 'panel' => 'パネルのID(あれば)', 'section' => 'セクションのID', 'settings' => 'test_image_id', 'mime_type' => 'image', // 画像の場合は 'image'、動画は 'video'、音声は 'audio' などが使える ) ) );

カスタマイザ上の見た目はどちらも同じです。
WP_Customize_Media_Control を使った場合でも画像のアップロードや削除、変更など全く同じ動作です。

Wordpressの詳しい情報は英語で検索しましょう

こちらの情報は以下の公式記事で解説されています。
Wordpress4.2 のアップデートで WP_Customize_Image_Control への後方互換を保って追加された機能のようです。
やはり ID が必要になる場面も多く出てきたことでの改善だと思います。

ちなみにですが、今回の記事は英語で検索すればすぐに出てきました。
しかし日本語では attachment_url_to_postid 関数などを使ったものばかりがヒットしてしまい全然見つかりません。
開発元が英語の Wordpress はやはり英語で探すのが一番早道で、かつ、正確・膨大です。
それほど難しい英語ではないので苦手な方も頑張って英語を読みましょう。(私も苦手ですが今回程度なら全然大丈夫でした)

まとめ

以上、Wordpress のカスタマイザから画像の ID を保存させる方法でした。