WordPressの管理画面でプラグインを使わずに画像をアップロードするFormを作成
Wordpressでプラグインを使わずに画像をアップロードするフォームを作ります。
media-lib-uploader.jsの作成
任意の場所にmedia-lib-uploader.jsを作成してください。
media-lib-uploader.jsでWordpressのメディアAPIを利用できるようにする
media-lib-uploader.jsにおいてWordpressのメディアAPIが使用できるようにします。
functions.phpに以下のコードを実装してください。
function my_enqueue_media_lib_uploader() { wp_enqueue_media(); wp_register_script( 'media-lib-uploader-js', '/path/to/media-lib-uploader.js'); wp_enqueue_script( 'media-lib-uploader-js' ); } add_action('admin_enqueue_scripts', 'my_enqueue_media_lib_uploader');
管理画面にFormを描画させる
functions.phpに以下のコードを実装してください。
function add_custom_column() {
add_meta_box(
'image',
'画像を登録',
'on_image',
'image',
'side',
'high'
);
}
add_action('admin_menu','add_custom_column');
function on_image($post){
//すでに画像がアップロードされている場合は表示させる
$image = get_post_meta($post->ID,'image',true);
$vals = array(
'<form method="POST">',
'<p>',
'<label>カスタム画像</label><br>',
sprintf('<input class="image-url normal" type="text" value="%s" name="image" />',$image),
sprintf('<img src="%s" width="50" height="50" class="image">',$image),
'<input class="upload-button" type="button" class="button" value="Upload Image" />',
'</p>'
'<input type="submit" value="Submit" />',
'</form>'
);
foreach($vals as $val){
echo $val;
}
}
upload-buttonクラスを持つボタンをクリックした時のイベントを実装
media-lib-uploader.jsに以下のコードを実装します。
var $ = jQuery; $(document).ready(function(){ var mediaUploader; $('.upload-button').click(function(e) { 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() { attachment = mediaUploader.state().get('selection').first().toJSON(); $('.image-url').val(attachment.url); $('.image-path').attr('src',attachment.url); }); mediaUploader.open(); }); })
記事を更新するタイミングでアップロードした画像を保存する
最後に記事を更新するタイミングでアップロードしたタイミングで画像を保存します。
functions.phpに以下のコードを実装してください。
add_action('save_post','save_image'); function save_image(){ if(!get_post()){ return; } $id = get_post() -> ID; if(isset($_POST['image'])) { $image = $_POST['image']; update_post_meta( $id, 'image', $image); } }