先日、Wordpress開発をしているとき、カスタム設定画面にアップロード機能を実装する必要が出てきました。
なのでいろいろと調べてみたところ、アップロード機能を実装する方法として、いろいろな手段がありました。
その中の実装方法を色々検討してみた結果、最も手軽かつ使い勝手がよかったメディアアップローダー実装方法がこちら。
上記記事は、非常に分かりやすく書かれており、とても参考にさせていただきました。
動作イメージとしてはこんな感じです。
記事に紹介されていた方法は、アップロード機能をカスタム設定画面に1つだけ設定するには、最善の手法だと思います。
ただ、アップロード機能を複数設定画面に設置しようと思っている場合は、機能が増えるたびに、JavaScriptをファイルを機能分だけ作成する必要があります（良い方法があるのかもしれないけど）。
なので、「カスタム設定画面に画像アップローダーを設置するコード」を関数化して、何回でも使い回せるような関数を書いてみました。
これで、アップロード機能を複数実装する場合でも、手軽に機能追加できるようになりました。
以下では、そのコードとともに実装方法も紹介したいと思います。
目次
主な手順
画像アップローダー機能を実装する主な手順は、以下となります。
- WordPressのカスタム設定画面を作成する
- functions.phpにアップロードフォーム生成関数を書く
- カスタム設定画面でアップローダー生成関数を実行する
- メディアアップローダの javascript API を管理画面で読み込む
既に、カスタム設定画面が実装された開発環境があるのであれば、結構簡単に画像アップロード機能を実装できるかと思います。
WordPressのカスタム設定画面を作成する
今回紹介する画像アップローダーの実装方法は、Wordpressのカスタム設定画面に設置するのを前提とした方法です。
なので実装を行うには以下に書かれている方法を用いて、カスタム設定画面を作成しておく必要があります。
こっちの方が分かりやすいかも。
ただ、当記事の主目的は「カスタム設定画面に画像アップロード機能の実装」です。なので、今回は「カスタム設定画面の実装方法」については詳しく書かず、割愛させていただこうと思います（長くなりすぎるので）。
ですので、今回紹介するコードは、上記リンクにあるような「カスタム設定画面」がしっかりと実装されているのを前提として説明したいと思います。
というわけで以下は、カスタム設定画面の実装を自前で行うことが出来る方向けの説明となります。
functions.phpにアップロードフォーム生成関数を書く
カスタム設定画面が実装できたら、以下のコードをfunctions.phpに貼り付けます。
//画像アップロード用のタグを出力する
function generate_upload_image_tag($name, $value){?>
<input name="<?php echo $name; ?>" type="text" value="<?php echo $value; ?>" />
<input type="button" name="<?php echo $name; ?>_slect" value="選択" />
<input type="button" name="<?php echo $name; ?>_clear" value="クリア" />
<div id="<?php echo $name; ?>_thumbnail" class="uploded-thumbnail">
<?php if ($value): ?>
<img src="<?php echo $value; ?>" alt="選択中の画像">
<?php endif ?>
</div>
<script type="text/javascript">
(function ($) {
var custom_uploader;
$("input:button[name=<?php echo $name; ?>_slect]").click(function(e) {
e.preventDefault();
if (custom_uploader) {
custom_uploader.open();
return;
}
custom_uploader = wp.media({
title: "画像を選択してください",
/* ライブラリの一覧は画像のみにする */
library: {
type: "image"
},
button: {
text: "画像の選択"
},
/* 選択できる画像は 1 つだけにする */
multiple: false
});
custom_uploader.on("select", function() {
var images = custom_uploader.state().get("selection");
/* file の中に選択された画像の各種情報が入っている */
images.each(function(file){
/* テキストフォームと表示されたサムネイル画像があればクリア */
$("input:text[name=<?php echo $name; ?>]").val("");
$("#<?php echo $name; ?>_thumbnail").empty();
/* テキストフォームに画像の URL を表示 */
$("input:text[name=<?php echo $name; ?>]").val(file.attributes.sizes.full.url);
/* プレビュー用に選択されたサムネイル画像を表示 */
$("#<?php echo $name; ?>_thumbnail").append('<img src="'+file.attributes.sizes.full.url+'" />');
});
});
custom_uploader.open();
});
/* クリアボタンを押した時の処理 */
$("input:button[name=<?php echo $name; ?>_clear]").click(function() {
$("input:text[name=<?php echo $name; ?>]").val("");
$("#<?php echo $name; ?>_thumbnail").empty();
});
})(jQuery);
</script>
<?php
}
generate_upload_image_tag関数は、$nameと$valueの2つの引数を取ります。
$nameは、設定項目名を入力します。
$valueには値（今回は前回アップロードした画像のURL）を入れます。
この関数を用いて、アップロードされた画像は、「画像URL」としてWordpressデータベースに保存されるという仕様です。
名前と値を入力するだけで使えるので、結構簡単に実装できるようになるのではないでしょうか。
参考 WordPressの管理画面内でメディアアップローダーを呼び出す | work.log
カスタム設定画面でアップローダー生成関数を実行する
あとは、カスタム設定画面用のPHPファイルに対して、実行コードを書きます。
例えば、ホーム画面に設定する画像をアップロードするのであれば、以下のようにコードを書きます。
<?php
generate_upload_image_tag('home_image_url', get_option('home_image_url'));
?>
この時点で、カスタム設定画面をブラウザ表示すると、以下のようなインターフェースが表示されます。
メディアアップローダの javascript API を管理画面で読み込む
最後に、functions.phpに対して以下のコードを書いて、Wordpress管理画面で「メディアアップローダーのJavaScript API」を読み込む処理を書きます。
function my_admin_scripts() {
//メディアアップローダの javascript API
wp_enqueue_media();
}
add_action( 'admin_print_scripts', 'my_admin_scripts' );
上記コードを書かないと、メディアアップローダーが起動しないのでご注意ください。
これで、画像アップローダーを設置するための作業は終了です。
動作確認
あとは、カスタム設定画面で、画像の選択を行えば、テキスト入力ボックスに画像URLが反映されます。
もちろん、メディアアップローダーに対して画像ファイルをドラッグ＆ドロップすれば、ファイルをアップロードして選択することも可能です。
まとめ
こんな感じで、「メディアアップローダーJavaScript API」を利用することで、画像アップローダー機能を比較的手軽に実装することができます。
僕も、「画像アップローダーの実装」を行うに当たって、様々な方法を調べてみたのですが、この方法が最も手軽かつ、利用者的にも利便性の高いものだと感じました。
また今回、関数化したことにより、カスタム設定画面で何回でも手軽に使いまわしが出来るようになり、開発を簡略化することもできました。
というわけで、「手軽にカスタム設定画面に画像アップローダー機能を実装したい」なんて場合には、それなりに便利な方法かと思います。
は
だと思います。
一瞬ビックリしました。
実装できました！
ありがとうございます。