在其他帖子類型上使用Woocommerce產品庫元框

我想添加一個元框到類似Woocommerce使用的產品庫元框的自定義帖子類型。我實際上已經在這個項目上安裝了Woocommerce。在其他帖子類型上使用Woocommerce產品庫元框

我發現了Woocommerce用於創建產品庫元框的代碼，並且我可以獲取元框以顯示，但jQuery沒有提供Wordpress用於添加圖片的媒體燈箱。我不知道是否有我需要添加的鉤子，或者如果我應該排入腳本？

這裏是我到目前爲止（基於WooCommerce代碼，但改變了我的使用）

<?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'); 

?>

來源

2017-10-07 RiotAct

首先要啓用WordPress的wp媒體上傳您已經使用wp_enqueue_media();裏面你排隊媒體JS的functions.php admin_enqueue_scripts鉤，

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

，然後你必須分配一個id，你的錨點擊它media.uploader 會彈出up.Like這...

<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>

然後綁定的onclick監聽器add_product_image ID添加這行代碼將自定義的js文件...

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網址和image_id變種是圖像或附件的ID。

來源

2017-10-07 21:09:02

在其他帖子類型上使用Woocommerce產品庫元框

回答

相關問題