前提
Wordpressでプラグイン無しでカスタム投稿フォームのカスタムフィールドを制作しています。
メディアアップローダーを使用した画像投稿欄を２種類以上設置したく、下記のコードを書いたのですが、
２つ目の画像データが保存されないようです。（１つ目は保存されます）
(メディアアップローダーで画像を入力した際、投稿欄にサムネイル画像は表示されますが、更新ボタンを押すと消えてしまいます)
エラーメッセージは特に出ていません。
実現したいこと
２つ目以降の画像投稿欄からも画像データを保存できるようにし、複数の画像投稿欄を設置できるようにしたいと思います。
該当のソースコード
functions.php
<?php function insert_custom_fields($post) { //nounceフィールドの追加 wp_nonce_field('custom_field_save_meta_box_data', 'custom_field_meta_box_nonce'); //すでに保存されているデータを取得 $company_image01 = get_post_meta($post->ID, 'company_image01', true); $company_image02 = get_post_meta($post->ID, 'company_image02', true); ?> //htmlコード <div class="l-item mediaArea"> <form method="post" action="admin.php?page=site_settings"> <label for="company_image01">イメージ画像</label> <input style="width:0;height:0;padding:0;margin:0;visibility:hidden" name="company_image01" type="text" value="<?php echo $company_image01 ?>" id="media01"/> <input style="width:80px" type="button" name="media1" value="画像選択" class="media-btn" /> <input style="width:80px" type="button" name="media-clear1" value="削除" class="media-clear-btn" /> <div id="mediabox01"> <img src="<?php echo $company_image01; ?>" alt=""> </div> </form> </div> <div class="l-item mediaArea"> <form method="post" action="admin.php?page=site_settings"> <label for="company_image02">イメージ画像２</label> <input style="width:0;height:0;padding:0;margin:0;visibility:hidden" name="company_image02" type="text" value="<?php echo $company_image02 ?>" id="media02"/> <input style="width:80px" type="button" name="media2" value="画像選択" class="media-btn" /> <input style="width:80px" type="button" name="media-clear2" value="削除" class="media-clear-btn" /> <div id="mediabox02"> <img src="<?php echo $company_image02; ?>" alt=""> </div> </form> </div> <?php } function save_custom_fields($post_id) { //nounceがセットされているか確認 if (!isset($_POST['custom_field_meta_box_nonce'])) { return; } //nounceが正しいか検証 if (!wp_verify_nonce($_POST['custom_field_meta_box_nonce'], 'custom_field_save_meta_box_data')) { return; } //company_image01データを保存 if (isset($_POST['company_image01'])) { update_post_meta($post_id, 'company_image01', $_POST['company_image01']); } //company_image02データを保存 if (isset($_POST['company_image02'])) { update_post_meta($post_id, 'company_image02', $_POST['company_image02']); } add_action('save_post', 'save_custom_fields'); ?>
admin.js
jQuery(document).ready(function($){ var custom_uploader; var target_input; var target_display; $('.media-btn').click(function(e) { target_input = $(this).prev().attr('id'); target_display = $(this).next().next().attr('id'); e.preventDefault(); if (custom_uploader) { custom_uploader.open(); return; } custom_uploader = wp.media.frames.file_frame = wp.media({ title: "画像を選択", //タイトルのテキストラベル button: { text: "画像を設定" //ボタンのテキストラベル }, multiple: false //選択できる画像を1つだけにする。 }); custom_uploader.on('select', function() { attachment = custom_uploader.state().get('selection').first().toJSON(); $( '#' + target_input ).val(""); //テキストフォームをクリア $( '#' + target_display ).empty(); //id mediaタグの中身をクリア $( '#' + target_input ).val(attachment.url); $( '#' + target_display ).append('<img src="'+attachment.url+'" />'); //プレビュー用にメディアアップローダーで選択した画像を表示させる }); custom_uploader.open(); }); }); jQuery(document).ready(function($){ $(".media-clear-btn").click(function() { var clear_input = $(this).prev().prev().attr('id'); var clear_display = $(this).next().attr('id'); $( '#' + clear_input ).val(""); //テキストフォームをクリア $( "#" + clear_display ).empty(); //id mediaタグの中身をクリア }); });
$('.media-btn')をクリックした時に、.next()や.prev()で操作したいタグを指定し、入力するようにしています。
この方法に限らず、プラグインを使わずに複数の画像投稿欄を設置する方法をご存じでしたら掲載箇所の情報でも助かりますので教えていただけると幸いです。
何卒よろしくお願い致します。
0 コメント