देर से जवाब और संपादित करें। अस्वीकरण: निम्नलिखित कोई कॉपी और पेस्ट-टूगो कोड नहीं है।
कच्चा स्केच
जैसा कि मैंने कभी भी किसी अन्य चीज़ के लिए मीडिया मोडल का दुरुपयोग करने की कोशिश नहीं की, यहाँ एक संक्षिप्त अवलोकन है, एक ऐसी परियोजना से एक भाग को तोड़कर जो मैं वर्तमान में कर रहा हूँ। यह उदाहरण के लिए तैयार नहीं है, लेकिन यह आपको काफी करीब ला सकता है। बस टिप्पणियों को ध्यान से पढ़ें और निम्नलिखित PHP को अपनी वस्तुओं में लागू करें।
पीएचपी
हमारे कंस्ट्रक्टर में हम अपनी स्क्रिप्ट को पंजीकृत करते हैं, मेटा बॉक्स जोड़ते हैं जो जानकारी और एक मीडिया बटन रखते हैं, अतिरिक्त MIME प्रकार (उदाहरण के लिए ज़िप) में फ़िल्टर करें और अतिरिक्त डेटा को बचाने के बारे में ध्यान रखें:
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 प्रकारों में जोड़ता है। आप अन्य सेटिंग्स को भी जोड़ या ओवरराइड कर सकते हैं। बस 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;
}
जेएस उदाहरण के ऊपर जाने से पहले अंतिम नोट: वर्तमान परियोजना से कोड टूट गया है। तो यह होगा - जैसा कि पहले ही उल्लेख किया गया है - डिफ़ॉल्ट रूप से काम नहीं! यह केवल एक मार्गदर्शक है और कुछ नहीं।
जावास्क्रिप्ट
जावास्क्रिप्ट स्वयं बहुत सीधे आगे है। नहीं। लेकिन जैसा कि आप देख सकते हैं, मैं दोनों 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 पर देख सकते हैं ।