メディアを選択またはアップロードする必要があるWordPressプラグインを作成している場合、ユーザーが使い慣れているWordPressの画像アップローダーを使用します。
これには、JavaScriptとwp enqueue media関数を使用することで比較的簡単に実現できます。
プラグインのメインのプログラムがすでに存在することを前提にしています。まずはプラグインのメインファイルで画像関連のエンキューとスクリプトを読み込みます。
<?php
function media_uploader_enqueue() {
wp_enqueue_media();
wp_register_script('media-uploader', plugins_url('media-uploader.js' , __FILE__ ), array('jquery'));
wp_enqueue_script('media-uploader');
}
add_action('admin_enqueue_scripts', 'media_uploader_enqueue');
?>
実際に画像を読み込みたい場所にボタンを設置し、押したときに、JavaScriptを実行します。
以下の例では、「test_image_path」というフィールドに画像のリンクをアップロードするためにボタンのnameを「test_image_path」とし、リンクの戻る場所をinputのvalueに返しています。
<tr class="form-field">
<th valign="top" scope="row">
<label for="cs_regident_path">画像ラベル</label>
</th>
<td>
<div class='image-preview-wrapper'>
<?php if (!empty( $item['cs_regident_path'] )): ?> <!--ファイルパスが存在すれば、プレビューと画像へのリンク-->
<a href="<?php echo esc_attr($item['test_image_path']); ?>" target="_blank">
<img id="image-preview" src="<?php echo esc_attr($item['test_image_path']); ?>" height="100">
</a>
<?php endif; ?>
</div>
<!--ボタンのnameをjavascriptに渡たす-->
<input id="test_image_path" type="text" name="test_image_path" style="width: 60%" value ="<?php echo esc_attr($item['test_image_path']);?>" />
<input id="upload_image_button" name="test_image_path" type="button" class="button-primary" value="画像登録"/>
</td>
</tr>
javaScriptのファイル名は「media-uploader.js」です。
jQuery(document).ready(function($){
var mediaUploader;
$('#upload_image_button').click(function(e) {
var button_name = '#' + $(this).attr("name"); //ボタンのnameを
e.preventDefault();
if (mediaUploader) {
mediaUploader.open();
return;
}
mediaUploader = wp.media.frames.file_frame = wp.media({
title: 'Choose Image',
button: {
text: 'Choose Image'
}, multiple: false });
mediaUploader.on('select', function() {
var attachment = mediaUploader.state().get('selection').first().toJSON();
$(button_name).val(attachment.url);
});
mediaUploader.open();
});
});
jQuery(document).ready(function($){
var mediaUploader;
$('#upload_image_button2').click(function(e) {
var button_name = '#' + $(this).attr("name");
e.preventDefault();
if (mediaUploader) {
mediaUploader.open();
return;
}
mediaUploader = wp.media.frames.file_frame = wp.media({
title: 'Choose Image',
button: {
text: 'Choose Image'
}, multiple: false });
mediaUploader.on('select', function() {
var attachment = mediaUploader.state().get('selection').first().toJSON();
$(button_name).val(attachment.url);
});
mediaUploader.open();
});
});
参考URL
プラグインにWordPressメディアセレクターを含める方法
How to Programmatically File upload from Custom Plugin in WordPress
WordPressのコードサンプル。記事投稿エリアにメタボックスを追加する。
プラグインまたはテーマ管理ページでWordPress Media Uploaderを使用する方法
