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 Media Uploader，你必须使用函数内的wp_enqueue_media();将媒体js入队.php admin_enqueue_scripts hook，

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

然后你必须为锚点分配一个id，它点击了media.uploader 会弹出来的。就像这个......

<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 var为图片或附件的ID。

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

1 个答案: