Ajouter le bouton "upload media" dans le champ de la méta box
-
-
Voir letutorielet leplugin simple créé àpartir de celui-ci que vouspouvezessayer [ici] (https://www.skyverge.com/blog/custom-post-type-with-image-uploads/#download).M'a aidé.See tutorial and simple plugin made from it that you can try [here](https://www.skyverge.com/blog/custom-post-type-with-image-uploads/#download). Helped me.
- 0
- 2019-10-25
- Fanky
-
2 réponses
- votes
-
- 2012-10-04
Voir ce squelette detéléverseurmultimédia . Vouspouvez également l'utiliser dans votrebalisagepersonnalisé,comme Meta Box.
Unindice,vérifiez que vousn'utilisez que les scripts de lapage où vous activez votre Meta Box. Sinon,c'est souvent unproblème sur lespagespar défautet letéléchargeur.
Essayezmaintenant d'effacer lespartiesimportantespourinclure leprogramme detéléchargement dans votrepartiepersonnalisée.
Commencezparinclure unbouton dans laméta-boîte:
<input id="upload_image" type="text" size="36" name="upload_image" value="" /> <input id="upload_image_button" type="button" value="Upload Image" />
Maintenant,mettez les scriptsen file d'attente:
function my_admin_scripts() { wp_enqueue_script('media-upload'); wp_enqueue_script('thickbox'); wp_register_script('my-upload', WP_PLUGIN_URL.'/my-script.js', array('jquery','media-upload','thickbox')); wp_enqueue_script('my-upload'); } function my_admin_styles() { wp_enqueue_style('thickbox'); } // better use get_current_screen(); or the global $current_screen if (isset($_GET['page']) && $_GET['page'] == 'my_plugin_page') { add_action('admin_print_scripts', 'my_admin_scripts'); add_action('admin_print_styles', 'my_admin_styles'); }
La dernièrepartieest votre scriptpersonnalisépour utiliser la Thickboxet letéléchargeur à l'intérieur.
jQuery(document).ready( function( $ ) { $('#upload_image_button').click(function() { formfield = $('#upload_image').attr('name'); tb_show( '', 'media-upload.php?type=image&TB_iframe=true' ); window.send_to_editor = function(html) { imgurl = $(html).attr('src'); $('#upload_image').val(imgurl); tb_remove(); } return false; }); });
See this media uploader skeleton. You can also use it in your custom markup, like Meta Box.
A hint, check, that you only use the scripts on the page, where you active your Meta Box. Otherwise is it often a problem on the default pages and the uploader.
Now a attempt to clear the important parts to include the uploader to your custom part.
First include an button in the meta box:
<input id="upload_image" type="text" size="36" name="upload_image" value="" /> <input id="upload_image_button" type="button" value="Upload Image" />
Now enqueue the scripts:
function my_admin_scripts() { wp_enqueue_script('media-upload'); wp_enqueue_script('thickbox'); wp_register_script('my-upload', WP_PLUGIN_URL.'/my-script.js', array('jquery','media-upload','thickbox')); wp_enqueue_script('my-upload'); } function my_admin_styles() { wp_enqueue_style('thickbox'); } // better use get_current_screen(); or the global $current_screen if (isset($_GET['page']) && $_GET['page'] == 'my_plugin_page') { add_action('admin_print_scripts', 'my_admin_scripts'); add_action('admin_print_styles', 'my_admin_styles'); }
The last part is your custom script to use the thickbox and the uploader inside this.
jQuery(document).ready( function( $ ) { $('#upload_image_button').click(function() { formfield = $('#upload_image').attr('name'); tb_show( '', 'media-upload.php?type=image&TB_iframe=true' ); window.send_to_editor = function(html) { imgurl = $(html).attr('src'); $('#upload_image').val(imgurl); tb_remove(); } return false; }); });
-
Juste unpetit rappel via lapage Codexpour `admin_print_scripts`indique que` admin_print_scripts`estprincipalement utilisépourfaire écho aujavascripten ligne.`admin_print_scripts`ne doitpas être utilisépourmettreen file d'attente des styles ou des scripts sur lespages d'administration.Utilisezplutôt [`admin_enqueue_scripts`] (http://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts).Just a little reminder via the Codex page for `admin_print_scripts` says that `admin_print_scripts` mainly used to echo inline javascript. `admin_print_scripts` should not be used to enqueue styles or scripts on the admin pages. Use [`admin_enqueue_scripts`](http://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts) instead.
- 3
- 2013-01-22
- Zulian
-
J'aiessayé cetteméthodeet la zone de saisie detexte `# upload_image`n'estjamais remplieI tried this method and the text input box `#upload_image` is never populated
- 0
- 2016-07-07
- Mr Pablo
-
cette réponsene fonctionnepas.voir d'autres réponses.this answer doesnt work. see other answers.
- 1
- 2016-09-01
- T.Todua
-
- 2016-09-01
Solution:
1) dans votre functions.php ,ajoutez lebloc d'enregistrement des scriptsnécessaires:
// add necessary scripts add_action('plugins_loaded', function(){ if($GLOBALS['pagenow']=='post.php'){ add_action('admin_print_scripts', 'my_admin_scripts'); add_action('admin_print_styles', 'my_admin_styles'); } }); function my_admin_scripts(){ wp_enqueue_script('jquery'); wp_enqueue_script('media-upload'); wp_enqueue_script('thickbox'); } // Proper way to enqueue // wp_register_script( // 'my-upload', // WP_PLUGIN_URL.'/my-script.js', // array('jquery','media-upload','thickbox') /* dependencies */ // ); // // wp_enqueue_script('my-upload'); function my_admin_styles(){ wp_enqueue_style('thickbox'); }
2)puis ajoutez lebloc metabox :
add_action( 'add_meta_boxes', function(){ add_meta_box( 'my-metaboxx1', // ID 'my-metaboxx1-title', // Title 'func99999', // Callback (Construct function) get_post_types(), //screen (This adds metabox to all post types) 'normal' // Context ); }, 9 ); function func99999($post){ $url = get_post_meta($post->ID, 'my-image-for-post', true); ?> <input id="my_image_URL" name="my_image_URL" type="text" value="<?php echo $url;?>" style="width:400px;" /> <input id="my_upl_button" type="button" value="Upload Image" /><br/> <img src="<?php echo $url;?>" style="width:200px;" id="picsrc" /> <script> jQuery(document).ready( function($) { jQuery('#my_upl_button').click(function() { window.send_to_editor = function(html) { imgurl = jQuery(html).attr('src') jQuery('#my_image_URL').val(imgurl); jQuery('#picsrc').attr("src", imgurl); tb_remove(); } formfield = jQuery('#my_image_URL').attr('name'); tb_show('', 'media-upload.php?type=image&TB_iframe=true' ); return false; }); // End on click }); </script> <?php } add_action('save_post', function ($post_id) { if (isset($_POST['my_image_URL'])){ update_post_meta($post_id, 'my-image-for-post', $_POST['my_image_URL']); } });
p.s. au cas où vous auriezbesoin deplusieurs champs,vouspouvezfacilementfaire comme ceci: http://pastebin.com/raw/xpU1ch2W
Solution:
1) in your functions.php, add the block for registering the necessary scripts:
// add necessary scripts add_action('plugins_loaded', function(){ if($GLOBALS['pagenow']=='post.php'){ add_action('admin_print_scripts', 'my_admin_scripts'); add_action('admin_print_styles', 'my_admin_styles'); } }); function my_admin_scripts(){ wp_enqueue_script('jquery'); wp_enqueue_script('media-upload'); wp_enqueue_script('thickbox'); } // Proper way to enqueue // wp_register_script( // 'my-upload', // WP_PLUGIN_URL.'/my-script.js', // array('jquery','media-upload','thickbox') /* dependencies */ // ); // // wp_enqueue_script('my-upload'); function my_admin_styles(){ wp_enqueue_style('thickbox'); }
2) and then add metabox block:
add_action( 'add_meta_boxes', function(){ add_meta_box( 'my-metaboxx1', // ID 'my-metaboxx1-title', // Title 'func99999', // Callback (Construct function) get_post_types(), //screen (This adds metabox to all post types) 'normal' // Context ); }, 9 ); function func99999($post){ $url = get_post_meta($post->ID, 'my-image-for-post', true); ?> <input id="my_image_URL" name="my_image_URL" type="text" value="<?php echo $url;?>" style="width:400px;" /> <input id="my_upl_button" type="button" value="Upload Image" /><br/> <img src="<?php echo $url;?>" style="width:200px;" id="picsrc" /> <script> jQuery(document).ready( function($) { jQuery('#my_upl_button').click(function() { window.send_to_editor = function(html) { imgurl = jQuery(html).attr('src') jQuery('#my_image_URL').val(imgurl); jQuery('#picsrc').attr("src", imgurl); tb_remove(); } formfield = jQuery('#my_image_URL').attr('name'); tb_show('', 'media-upload.php?type=image&TB_iframe=true' ); return false; }); // End on click }); </script> <?php } add_action('save_post', function ($post_id) { if (isset($_POST['my_image_URL'])){ update_post_meta($post_id, 'my-image-for-post', $_POST['my_image_URL']); } });
p.s. in case you need multiple fields, then you can easily do like this: http://pastebin.com/raw/xpU1ch2W
-
Fonctionne comme un charme,mais uniquement avec desimages.Commentfaire demême avec lesfichiers vidéo?Works like a charm, but only with images. How can I do the same with video files?
- 0
- 2018-07-18
- Alex
J'ai unmessagepersonnalisé qui a unebalise Meta qui doit utiliser untéléchargement defichier (pour lesfichiers vidéo).Jeme demande quelleest labonnefaçon d'ajouter unbouton "Télécharger" quipointe vers letéléchargeur demédias WordPresset définit l'URL dufichiertéléchargé sélectionné dans le champ detexte qui a causé cebouton detéléchargement.
Jene cherchepas de code sur la création de l'option debalisemeta réelle,mais unmoyen d'ajouter correctement unbouton detéléchargementmultimédia Wordpress.