サポート » 使い方全般 » 複数の画像投稿欄の設置について

  • Wordpressでプラグイン無しでカスタム投稿フォームのカスタムフィールドを制作しています。
    メディアアップローダーを使用した画像投稿欄を2種類以上設置したく、下記のコードを書いたのですが、
    2つ目以降の画像データが保存されないようです。(1つ目は保存されます)

    console.logで調べたところ、各画像フォームへの入力は上手く行っているようですが、
    更新ボタンを押すと保存がされない状態のようで、コード下部にある保存に関する記述に問題があるようです。

    
    <?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_media = get_post_meta($post->ID, 'company_media', true);
      $company_photo = get_post_meta($post->ID, 'company_photo', true);
    ?>
    
    <div class="l-item mediaArea">
    	<form method="post" action="admin.php?page=site_settings">
    		<label for="company_image01">イメージ画像</label>
    	    <input id="media01" name="company_image01" type="text" value="<?php echo $company_image01; ?>" style="width:0;height:0;padding:0;margin:0;visibility:hidden"/>
    	    <input style="width:80px" type="button" name="media01_select" value="画像選択"/>
    	    <input style="width:80px" type="button" name="media01_clear" value="削除"/>
    	    <div id="media01_thumb">
    	        <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_media">イメージ画像2</label>
    	    <input id="media02" name="company_media" type="text" value="<?php echo $company_media; ?>" style="width:0;height:0;padding:0;margin:0;visibility:hidden"/>
    	    <input style="width:80px" type="button" name="media02_select" value="画像選択"/>
    	    <input style="width:80px" type="button" name="media02_clear" value="削除"/>
    	    <div id="media02_thumb">
    	        <img src="<?php echo $company_media; ?>" alt="">
    	    </div>
    	</form>
    </div>
    <div class="l-item mediaArea">
    	<form method="post" action="admin.php?page=site_settings">
    		<label for="company_photo">イメージ画像3</label>
    	    <input id="media03" name="company_photo" type="text" value="<?php echo $company_photo; ?>" style="width:0;height:0;padding:0;margin:0;visibility:hidden"/>
    	    <input style="width:80px" type="button" name="media03_select" value="画像選択"/>
    	    <input style="width:80px" type="button" name="media03_clear" value="削除"/>
    	    <div id="media03_thumb">
    	        <img src="<?php echo $company_photo; ?>" alt="">
    	    </div>
    	</form>
    </div>
    
    <script>
      (function($) {
        /**
         * WP アップローダー
         各画像フォームのidを指定し、メディアアップローダーを呼び出し入力しています
         */
        function new_wp_uploader(_uniq_id) {
          var custom_uploader;
    	  var valueCheck = $('#' + _uniq_id).val();
    	  	  console.log(valueCheck);
          $('input:button[name=' + _uniq_id + '_select]').click(function(e) {
            e.preventDefault();
            if (custom_uploader) {
              custom_uploader.open();
              return;
            }
            custom_uploader = wp.media({
              title: '画像を選択してください',
              // ライブラリの一覧は画像のみにする
              library: {
                type: 'image'
              },
              button: {
                text: '画像の選択'
              },
              // 選択できる画像を1枚のみにする => false
              multiple: false
            });
            /**
             * 画像選択時
             */
            custom_uploader.on('select', function() {
              var images = custom_uploader.state().get('selection');
              images.each(function(file) {
                // リセット
                $('#' + _uniq_id + '_thumb').empty();
                $('#' + _uniq_id).val('');
                // 画像取得してセット
                $('#' + _uniq_id).val(file.attributes.sizes.full.url);
                $('#' + _uniq_id + '_thumb').append('<img src="' + file.attributes.sizes.full.url + '">');
    			var valueId = $('#' + _uniq_id).val();
    			  console.log(valueId);
              });
            });
            custom_uploader.open();
          });
          /**
           * クリアボタン クリック時
           */
          $('input:button[name=' + _uniq_id + '_clear]').click(function() {
            $('#' + _uniq_id).val('');
            $('#' + _uniq_id + '_thumb').empty();
          });
        };
        new_wp_uploader('media01');
        new_wp_uploader('media02');
        new_wp_uploader('media03');
      })(jQuery);
    
    </script>
    
    <?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_mediaデータを保存
      if (isset($_POST['company_media'])) {
           update_post_meta($post_id, 'company_media', $_POST['company_media']);
      }
      //company_image01データを保存
      if (isset($_POST['company_photo'])) {
           update_post_meta($post_id, 'company_photo', $_POST['company_photo']);
      }
    }
    add_action('save_post', 'save_custom_fields');

    2つ目以降の画像投稿欄からも画像データを保存できるようにし、複数の画像投稿欄を設置できるようにしたいと思います。
    この方法に限らず、プラグインを使わずに複数の画像投稿欄を設置する方法をご存じでしたら掲載箇所の情報でも助かりますのでご教示いただけると幸いです。
    何卒よろしくお願い致します。

1件の返信を表示中 - 1 - 1件目 (全1件中)
  • kousuke07さん、こんにちは。

    コードを検証した訳ではないので、思い付きですが…
    画像を登録するコードそれぞれが別の form になっているようですが、すべての post データがちゃんと送られていますか?送信された post データに中身が入っているか確認されてみてはいかがでしょうか。

    ご参考になれば。

1件の返信を表示中 - 1 - 1件目 (全1件中)
  • トピック「複数の画像投稿欄の設置について」には新たに返信することはできません。