延迟回答(&A);编辑免责声明:以下是no &复制;粘贴多哥代码
由于我从未尝试将媒体模式用于其他任何事情,因此这里是一个简短的概述,通过从我当前参与的项目中提取一部分来进行概述。这不是一个现成的例子,但它应该能让你离得足够近。只需仔细阅读注释,并在对象中实现以下PHP。
PHP在我们的构造函数中,我们注册脚本,添加包含信息和媒体按钮的元框,过滤其他MIME类型(例如ZIP),并注意保存其他数据:
public function __construct()
{
add_action( \'admin_enqueue_scripts\', array( $this, \'enqueue_scripts\' ) );
foreach( $this->post_types as $post_type )
add_action( "add_meta_boxes_{$post_type}", array( $this, \'add_meta_box\' ) );
add_filter( \'media_view_settings\', array( $this, \'filter_media_view_settings\' ), 10, 2 );
add_action( \'wp_insert_post_data\', array( $this, \'wp_insert_post_data\' ), 10, 2 );
}
如果不需要特定页面上的脚本,请确保中止。这样可以节省内存、请求时间,并有助于保持安装干净。
public function enqueue_scripts( $page )
{
if (
! in_array( $page, array( \'post.php\', \'post-new.php\' ) )
# Assuming that there\'s a class property array that holds post types we want to add to
# OR ! in_array( get_current_screen()->post_type, array_keys( $this->post_types ) )
)
return;
wp_enqueue_media();
wp_enqueue_script(
\'wpse_media_modal\',
plugins_url( \'assets/js/media-modal.js\', dirname( __FILE__ ) ),
array(
# \'jquery\',
\'media-views\'
),
null,
true
);
wp_localize_script(
\'wpse_media_modal\',
\'wpse_obj\',
$this->get_media_props()
);
}
然后我们添加元框。在函数内部,我们可以依赖
$post
对象
post_type
属性,该属性也将为新帖子设置。由于我们已经将构造函数中的回调注册到适当的上下文挂钩中,所以我们可以简单地采用出现的任何post类型。
public function add_meta_box( $post )
{
add_meta_box(
\'wprd_upload\',
__( \'Upload\', \'our_textdomain\' ),
array( $this, \'render_content\' ),
$post->post_type,
\'advanced\',
\'default\',
array()
);
}
附加MIME类型只需插入一个数组,该数组覆盖或添加到媒体模式的默认MIME类型。您也可以添加或覆盖其他设置。只是
var_dump( $settings );
查看回调提供了什么。还要确保我们没有截获错误的帖子类型。
public function filter_media_view_settings( $settings, $post )
{
if ( ! in_array( $post->post_type, array_keys( $this->post_types ) ) )
return $settings;
$settings[\'mimeTypes\'] += array( \'application/zip\' );
return $settings;
}
渲染内容
public function render_content()
{
$props = array(
\'modalTitle\' => __( \'Select ZIP Archives\', \'our_textdomain\' ),
// The following data is what we will access later
// SomeIDfromLocalizedScriptOBJ
\'buttonID\' => \'open-media-lib\',
\'buttonClass\' => \'open-media-button\',
\'buttonText\' => __( \'Add ZIP\', \'our_textdomain\' ),
\'buttonDataText\' => __( \'Select\', \'our_textdomain\' ),
\'buttonDataTitle\' => __( \'Select Whatever\', \'our_textdomain\' ),
\'mimeTypes\' => array(
$zip => __( \'ZIP Archive\', \'our_textdomain\' ),
),
);
wp_nonce_field( plugin_basename( __FILE__ ), $this->nonce_name );
?>
<input type="button"
class="button <?php echo $props[\'buttonClass\']; ?>"
id="<?php echo $props[\'buttonID\']; ?>"
value="<?php echo $props[\'buttonText\']; ?>"
data-title="<?php echo $props[\'buttonDataTitle\']; ?>"
data-button-text="<?php echo $props[\'buttonDataText\']; ?>" />
}
保存数据最后,我们要确保数据正确保存并进行检查。使用所有
esc_*()
函数、类型转换、nonce等等。
public function wp_insert_post_data( $data, $post_array )
{
if (
! in_array( $post_array[\'post_type\'], array_keys( $this->post_types ) )
# OR ( defined( \'DOING_AUTOSAVE\' ) AND DOING_AUTOSAVE )
OR ! isset( $_POST[ $this->nonce_name ] )
OR ! wp_verify_nonce( $_POST[ $this->nonce_name ], plugin_basename( __FILE__ ) )
)
return $data;
$post_array[\'zip\'] = array_map( \'array_filter\', $post_array[\'zip\'] );
$id = $post_array[\'ID\'];
update_post_meta(
$id,
\'zip\',
$post_array[\'zip\'],
get_post_meta( $id, \'zip\' )
);
return $data;
}
最后一点,在开始JS示例之前:代码是当前项目的分解代码。因此,正如前面提到的那样,默认情况下它不会工作!这只是一个指南,没有别的。
Javascript本身非常简单。不但正如您所看到的,我将jQuery作为自定义本地化脚本对象注入到函数中。从那以后,你必须添加你可能需要的任何逻辑。提供了不同状态和回调的基本环境console.log()
存在。
var ds = ds || {};
( function( $, obj ) {
var media;
ds.media = media = {};
_.extend( media, {
view: {},
controller: {}
} );
media.buttonID = \'#\' + obj.buttonID,
_.extend( media, {
frame: function() {
if ( this._frame )
return this._frame;
var states = [
new wp.media.controller.Library(),
new wp.media.controller.Library( {
id: \'image\',
title: \'Images\',
priority: 20,
searchable: false,
library: wp.media.query( { type: \'image\' } ),
multiple: true
} ),
/*new wp.media.controller.Library( {
id: \'video\',
title: \'Video\',
priority: 40,
library: wp.media.query( { type: \'video\' } ),
multiple: false,
contentUserSetting: false // Show the Upload Files tab.
} ),*/
new wp.media.controller.Library( {
id: obj.SomeIDfromLocalizedScriptOBJ,
title: obj.SomeTitlefromLocalizedScriptOBJ,
priority: 30,
searchable: true,
// filterable: \'uploaded\',
library: wp.media.query( { type: obj.SomeMIMETypesfromLocalizedScriptOBJ } ),
multiple: true
// contentUserSetting: true
} ),
];
this._frame = wp.media( {
// className: \'media-frame no-sidebar\',
states: states
// frame: \'post\'
} );
this._frame.on( \'open\', this.open );
this._frame.on( \'ready\', this.ready );
this._frame.on( \'close\', this.close );
this._frame.on( \'menu:render:default\', this.menuRender );
this._frame.state( \'library\' ).on( \'select\', this.select );
this._frame.state( \'image\' ).on( \'select\', this.select );
this._frame.state( obj.ZIPTabID ).on( \'select\', this.select );
return this._frame;
},
open: function() {
console.log( \'Frame opened\' );
},
ready: function() {
console.log( \'Frame ready\' );
},
close: function() {
console.log( \'Frame closed\' );
},
menuRender: function( view ) {
/* view.unset( \'library-separator\' );
view.unset( \'embed\' );
view.unset( \'gallery\' ); */
},
select: function() {
var settings = wp.media.view.settings,
selection = this.get( \'selection\' );
selection.map( media.showAttachmentDetails );
},
showAttachmentDetails: function( attachment ) {
// This function normally is used to display attachments
// Handle removal of rows
media.removeAttachmentRow( /* some var */ );
},
removeAttachmentRow: function( row ) {
// Remove stuff callback
},
init: function() {
// Open media frame
$( media.buttonID ).on( \'click.media_frame_open\', function( e ) {
e.preventDefault();
media.frame().open();
} );
}
} );
$( media.init );
} )( jQuery, wpse_obj );
《WP 3.5媒体管理器》的作者多米尼克·席林(DominikSchilling)编写了一套媒体模式的演示。你可以
view them on GitHub.