在其他帖子类型上使用 Woocommerce 产品库元框

Question

我想向自定义帖子类型添加一个元框，该类型的工作方式类似于 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');

?>

Answer 1

首先要启用 Wordpress Wp 媒体上传器，您必须在 functions.php admin_enqueue_scripts 挂钩中使用 wp_enqueue_media(); 将媒体 js 排入队列，

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

然后您必须为单击 media.uploader 的锚分配一个 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>

然后将 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 url，image_id var 是图片或附件的id。