前台展示媒体库的方法

时间:2016-10-20 作者:user105307

前端是否有显示媒体库部分的php代码?

代码应该在前端显示完整的后端媒体库部分,就像我有根据类别和标记的图像过滤器一样upload, edit,delete 后端的函数还需要在前端显示所有这些部分。

在php或WordPress中是否有这样做的方法?

1 个回复
SO网友:CodeMascot

据我所知,我已经为您编写了一个简单的系统。请在您的functions.php-

add_action( \'wp_enqueue_scripts\', \'the_dramatist_enqueue_scripts\' );
add_filter( \'ajax_query_attachments_args\', \'the_dramatist_filter_media\' );
add_shortcode( \'the_dramatist_front_upload\', \'the_dramatist_front_upload\' );

/**
 * Call wp_enqueue_media() to load up all the scripts we need for media uploader
 */
function the_dramatist_enqueue_scripts() {
    wp_enqueue_media();
    wp_enqueue_script(
        \'some-script\',
        get_template_directory_uri() . \'/js/media-uploader.js\',
        // if you are building a plugin
        // plugins_url( \'/\', __FILE__ ) . \'/js/media-uploader.js\',
        array( \'jquery\' ),
        null
    );
}
/**
 * This filter insures users only see their own media
 */
function the_dramatist_filter_media( $query ) {
    // admins get to see everything
    if ( ! current_user_can( \'manage_options\' ) )
        $query[\'author\'] = get_current_user_id();
    return $query;
}
function the_dramatist_front_upload( $args ) {
    // check if user can upload files
    if ( current_user_can( \'upload_files\' ) ) {
        $str = __( \'Select File\', \'text-domain\' );
        return \'<input id="frontend-button" type="button" value="\' . $str . \'" class="button" style="position: relative; z-index: 1;"><img id="frontend-image" />\';
    }
    return __( \'Please Login To Upload\', \'text-domain\' );
}
在主题文件夹中创建一个名为js 并在文件夹中创建一个名为media-uploader.js. 内部media-uploader.js 文件放置以下代码-

(function($) {
    // When the DOM is ready.
    $(function() {
        var file_frame; // variable for the wp.media file_frame

        // attach a click event (or whatever you want) to some element on your page
        $( \'#frontend-button\' ).on( \'click\', function( event ) {
            event.preventDefault();

            // if the file_frame has already been created, just reuse it
            if ( file_frame ) {
                file_frame.open();
                return;
            }

            file_frame = wp.media.frames.file_frame = wp.media({
                title: $( this ).data( \'uploader_title\' ),
                button: {
                    text: $( this ).data( \'uploader_button_text\' ),
                },
                multiple: false // set this to true for multiple file selection
            });

            file_frame.on( \'select\', function() {
                attachment = file_frame.state().get(\'selection\').first().toJSON();

                // do something with the file here
                $( \'#frontend-button\' ).hide();
                $( \'#frontend-image\' ).attr(\'src\', attachment.url);
            });

            file_frame.open();
        });
    });

})(jQuery);
实际上,上面的全部内容最终给了您一个名为the_dramatist_front_upload. 将此短代码放在您想要查看媒体管理器的位置。并且它将仅向登录的用户显示媒体管理器。希望这件事对你有帮助。我从here

相关推荐

Upload media only to DB

我使用的是最新的WordPress(5.6),据我所知,没有将媒体直接上传到DB的可见设置。是否有这样一个隐藏的选项,或者WordPress不支持DB作为媒体存储而不是wp-content/uploads?我希望使用DB作为优先(或唯一,如果可能的话)存储,而不是文件系统,然后直接从DB加载媒体(如post映像)。