在自定义插件管理页面中获取媒体库弹出窗口

时间:2021-04-26 作者:krystof18

我正在创建插件,我需要上传图片。我想知道我是否能以某种方式触发与“添加特色图像”触发器相同的弹出窗口。这可能吗?如果没有,我如何选择?

非常感谢您的回答。

1 个回复
SO网友:Tony Djukic

有几件事需要考虑,比如你把这个放在哪里。。。您没有指定,因此以下是它在自定义帖子类型中的工作方式:

首先,您必须添加metabox和输入以上载文件,然后确保所有内容都已保存。。。

<?php
function add_your_custom_posttype_metaboxes() {
    //you have to set the above function as the the metabox callback in your CPT register
    add_meta_box(
        \'upload_image\',
        \'Upload Image\',
        \'upload_image\',
        \'your_custom_posttype\',
        \'normal\',
        \'high\'
    );
}
function upload_image( $post_object ) {
    wp_nonce_field( basename( __FILE__ ), \'upload_image_fields\' ); 
    $uploaded_img           = get_post_meta( $post_object->ID, \'uploaded_img\', true );
?>
    <table class="form-table">
        <tr>
            <th>
                <label><?php _e( \'Upload Image\', \'textdomain\' ); ?></label>
            </th>
            <td>
                <input type="text" class="large-text" name="uploaded_img" id="uploaded_img" value="<?php echo esc_attr( $uploaded_img ); ?>"/>
                <button type="button" class="upload-image-button" id="uploaded_img_btn" data-media-uploader-target="#uploaded_img">
                    <?php _e( \'Upload Image\', \'textdomain\' )?>
                </button>
                <!-- //The followin line is optional. -->
                <small><?php _e( \'I usually like to add some instructions below an option I have created for a CPT.\', \'textdomain\' ); ?></small>
            </td>
        </tr>
    </table>
<?php
}
function upload_image_savedata( $post_id, $post ) {
    if( !current_user_can( \'edit_post\', $post_id ) ) {
        return $post_id;
    }
    if( !isset( $_POST[\'upload_image_fields\'] ) || !wp_verify_nonce( $_POST[\'upload_image_fields\'], basename(__FILE__) ) ) {
        return $post_id;
    }
    $uploaded_image_meta[\'uploaded_img\']        = esc_textarea( $_POST[\'uploaded_img\'] );
    
    foreach( $uploaded_image_meta as $key => $value ) :
        if( \'revision\' === $post->post_type ) {
            return;
        }
        if( get_post_meta( $post_id, $key, false ) ) {
            update_post_meta( $post_id, $key, $value );
        } else {
            add_post_meta( $post_id, $key, $value);
        }
        if( !$value ) {
            delete_post_meta( $post_id, $key );
        }
    endforeach;
    return $post_id;
}
add_action( \'save_post\', \'upload_image_savedata\', 1, 2 );
?>
接下来,您必须添加一些JS,以便在单击按钮时启动媒体上载程序。。。因此,在插件中的一个新文件中,名为your-js-file.js 我会把它放在/js/ 要保持事物整洁,您需要添加以下内容:

(function( $ ) {
    \'use strict\';
    $( document ).ready( function() {
        if( $( \'#uploaded_img_btn\' ).length ) { //checks if the button exists
            var metaImageFrame;
            $( \'body\' ).click( function( e ) {
                var btn = e.target;
                if ( !btn || !$( btn ).attr( \'data-media-uploader-target\' ) ) return;
                var field = $( btn ).data( \'media-uploader-target\' );
                e.preventDefault();
                metaImageFrame = wp.media.frames.metaImageFrame = wp.media( {
                    button: { text:  \'Use this file\' },
                } );
                metaImageFrame.on( \'select\', function() {
                    var media_attachment = metaImageFrame.state().get( \'selection\' ).first().toJSON();
                    $( field ).val( media_attachment.url );
                } );
                metaImageFrame.open();
            } );
        }
    } );
} )( jQuery );
现在该文件已经完成,我们必须确保将其包含在自定义帖子类型的管理屏幕中,并且当您将该文件排队时,您还需要将WP media uploader脚本排队。。。

function your_custom_posttype_admin_scripts() {
    global $post_type;
    if( \'your_custom_posttype\' == $post_type ) {
        wp_enqueue_media();
        //you should probably define your plugin version somewhere so you can use it instead of manually changing the 1.0 below every time you update
        wp_enqueue_script( \'cpt-admin-script\', plugins_url( \'js/your-js-file.js\', __DIR__ ), array( \'jquery\' ), \'1.0\', true );
    }
}
add_action( \'admin_enqueue_scripts\', \'your_custom_posttype_admin_scripts\' );
因此,您现在得到的是一个带有按钮的输入字段,该按钮将启动默认WP media uploader并与之交互。然后,它会将媒体文件的URL添加到输入中,并在更新帖子时保存。

我不知道你具体想把它包括在哪里,所以我猜了一下,但使用输入和按钮并添加依赖于WP媒体脚本的脚本的原理与你想在管理中使用它的任何地方都是完全一样的。