Пізня відповідь та редагування. Відмова від відповідальності: Далі не є копія та вставка коду.
Груба ескіз
Оскільки я ніколи не намагався використати медіа-модуль для чого-небудь іншого, ось короткий огляд, накреслений, вириваючи частину проекту, в якому я зараз перебуваю. Це не готовий приклад, але він повинен наблизити вас досить близько. Просто прочитати коментарі ретельно і реалізувати наступний 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, яка також буде встановлена для нових публікацій. Оскільки ми вже зареєстрували зворотні дзвінки в конструкторі на відповідні контекстні гачки, ми можемо просто прийняти будь-який тип пошти.
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 Media Modal. Ви також можете додати або змінити інші налаштування. Просто, 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_*()функції, набір тексту, ні на що, а що ні.
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
Сам 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 - написав набір демонстрацій для медіа-модалів. Ви можете переглянути їх на GitHub .