他の投稿タイプのWoocommerce製品ギャラリーのメタボックスの使用

Question

私は、ウオコマースが使用する商品ギャラリーのメタボックスのように機能するカスタム投稿タイプにメタボックスを追加したいと思います。私は実際にこのプロジェクトにWoocommerceをインストールしました。

私はWoocommerceが製品ギャラリーのメタボックスを作成するために使用するコードを見つけました。私は表示するメタボックスを取得できますが、jQueryはWordpressが画像を追加するために使用するメディアライトボックスをプルアップするためのものではありません。追加する必要のあるフックやスクリプトをエンキューする必要があるかどうかはわかりません。ここで

は、あなたがあなたの中wp_enqueue_media();を使用して、メディアのJSをエンキューする必要がWordpressのWpのメディアアップローダを有効にするには

<?php 
function add_mtg_meta_boxes() { 
    add_meta_box('mtg_hotel_gallery_meta_box', 'Hotel Gallery', 'setup_mtg_hotel_gallery_meta_box', 'meeting', 'side', 'low'); 
} 

add_action('add_meta_boxes', 'add_mtg_meta_boxes'); 

function setup_mtg_hotel_gallery_meta_box($post) { 
    echo '<input type="hidden" name="mtg_hotel_gallery_meta_box_nonce" value="'. wp_create_nonce('mtg_hotel_gallery_meta_box'). '" />'; 

?> 

<div id="product_images_container"> 
<ul class="product_images"> 
    <?php 
     if (metadata_exists('post', $post->ID, '_product_image_gallery')) { 
      $product_image_gallery = get_post_meta($post->ID, '_product_image_gallery', true); 
     } else { 
      // Backwards compatibility. 
      $attachment_ids = get_posts('post_parent=' . $post->ID . '&numberposts=-1&post_type=attachment&orderby=menu_order&order=ASC&post_mime_type=image&fields=ids&meta_key=_woocommerce_exclude_image&meta_value=0'); 
      $attachment_ids = array_diff($attachment_ids, array(get_post_thumbnail_id())); 
      $product_image_gallery = implode(',', $attachment_ids); 
     } 
     $attachments   = array_filter(explode(',', $product_image_gallery)); 
     $update_meta   = false; 
     $updated_gallery_ids = array(); 
     if (! empty($attachments)) { 
      foreach ($attachments as $attachment_id) { 
       $attachment = wp_get_attachment_image($attachment_id, 'thumbnail'); 
       // if attachment is empty skip 
       if (empty($attachment)) { 
        $update_meta = true; 
        continue; 
       } 
       echo '<li class="image" data-attachment_id="' . esc_attr($attachment_id) . '"> 
        ' . $attachment . ' 
        <ul class="actions"> 
         <li><a href="#" class="delete tips" data-tip="' . esc_attr__('Delete image', 'woocommerce') . '">' . __('Delete', 'woocommerce') . '</a></li> 
        </ul> 
       </li>'; 
       // rebuild ids to be saved 
       $updated_gallery_ids[] = $attachment_id; 
      } 
      // need to update product meta to set new gallery ids 
      if ($update_meta) { 
       update_post_meta($post->ID, '_product_image_gallery', implode(',', $updated_gallery_ids)); 
      } 
     } 
    ?> 
</ul> 

<input type="hidden" id="product_image_gallery" name="product_image_gallery" value="<?php echo esc_attr($product_image_gallery); ?>" /> 

</div> 
<p class="add_product_images hide-if-no-js"> 
<a href="#" data-choose="<?php esc_attr_e('Add images to product gallery', 'woocommerce'); ?>" data-update="<?php esc_attr_e('Add to gallery', 'woocommerce'); ?>" data-delete="<?php esc_attr_e('Delete image', 'woocommerce'); ?>" data-text="<?php esc_attr_e('Delete', 'woocommerce'); ?>"><?php _e('Add product gallery images', 'woocommerce'); ?></a> 
</p> 


<?php 

} 

function save_mtg_hotel_gallery_meta_box($post_id) { 
    // check nonce 
    if (!isset($_POST['mtg_gallery_meta_box_nonce']) || !wp_verify_nonce($_POST['mtg_gallery_meta_box_nonce'], 'mtg_gallery_meta_box')) { 
     return $post_id; 
    } 

    // check capabilities 
    if ('meeting' == $_POST['post_type']) { 
     if (!current_user_can('edit_post', $post_id)) { 
      return $post_id; 
     } 
    } elseif (!current_user_can('edit_page', $post_id)) { 
     return $post_id; 
    } 

    // exit on autosave 
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) { 
     return $post_id; 
    } 

    $attachment_ids = isset($_POST['product_image_gallery']) ? array_filter(explode(',', wc_clean($_POST['product_image_gallery']))) : array(); 
     update_post_meta($post_id, '_product_image_gallery', implode(',', $attachment_ids)); 
} 

add_action('save_post', 'save_mtg_hotel_gallery_meta_box'); 

?> 

Answer 1

まず、私がこれまでに（WooCommerceコードに基づいていますが、私の使用のために変更された）したものですfunctions.php admin_enqueue_scriptsフック、

function enqueue_media_uploader() { 
    wp_enqueue_media(); 
} 
add_action('admin_enqueue_scripts', 'enqueue_media_uploader'); 

、その後、あなたはmedia.uploader このup.Likeポップアップ表示されますクリックあなたのアンカーにIDを割り当てる必要があり...

<a href="#" id="add_product_image" data-choose="<?php esc_attr_e('Add images to product gallery', 'woocommerce'); ?>" data-update="<?php esc_attr_e('Add to gallery', 'woocommerce'); ?>" data-delete="<?php esc_attr_e('Delete image', 'woocommerce'); ?>" data-text="<?php esc_attr_e('Delete', 'woocommerce'); ?>"><?php _e('Add product gallery images', 'woocommerce'); ?></a> 

そしてカスタムのjsファイルにコードの行を追加しますadd_product_image IDにonclickのリスナーをバインドする...

jQuery('#add_product_image').click(function(e) { 
    e.preventDefault(); 
    var image = wp.media({ 
     title: 'Upload Image', 
     multiple: false 
    }).open() 
    .on('select', function(e){ 
     var uploaded_image = image.state().get('selection').first(); 
     var image_url = uploaded_image.toJSON().url; 
     var image_id = uploaded_image.toJSON().id; 
    }); 
}); 

ここimage_url VARをアップロードまたは選択した画像のsrc URLをとimage_id varがあるさ画像または添付ファイルのID。