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