Téléchargement personnalisé de l'image du widget WordPress

Je suis occupé à construire mon propre widget WordPress. Tout fonctionne bien sauf pour le chargeur multimédia WordPress. J'ai créé huit boutons et huit champs de texte d'entrée qui doivent contenir l'URL de l'image qui a été téléchargée.

L'événement de clic n'est pas déclenché, probablement parce que WordPress produit le HTML deux fois (une fois dans la barre des widgets disponibles et une fois dans la barre des widgets actuellement actifs).

Est-ce que quelqu'un voit ce que je fais mal?

Ci-dessous, vous trouverez mon code.

Merci d'avance pour l'aide!

<?php /* Plugin Name: Home_Rollover_Widget Plugin URI: Description: Home Rollover Widget Version: 1.0 Author: Author URI: */ // Initialize widget add_action('widgets_init', array('Home_Rollover_Widget', 'register')); /** * Home_Rollover_Widget * * @package * @author * @copyright 2012 * @version $Id$ * @access public */ class Home_Rollover_Widget extends WP_Widget { /** * __construct() * * @return void */ public function __construct() { parent::__construct('home-rollover-widget'); } /** * control() * * @return void */ public function control() { // Load upload an thickbox script wp_enqueue_script('media-upload'); wp_enqueue_script('thickbox'); // Load thickbox CSS wp_enqueue_style('thickbox'); // Load all widget options $data = get_option('Home_Rollover_Widget'); ?> <!-- Widget title --> <p><label>Titel<input name="home_rollover_widget_title" type="text" value="<?php echo $data['home_rollover_widget_title']; ?>" /></label></p> <?php // If there's a title provided, update it. if (isset($_POST['home_rollover_widget_title'])){ $data['home_rollover_widget_title'] = attribute_escape($_POST['home_rollover_widget_title']); } // Show 8 input groups for image URL and text for ($i = 1; $i <= 8; ++$i) { ?> <p><a href="#" id="upload-button-<?php echo $i; ?>">UPLOAD IMAGE</a></p> <p><label>IMAGE <?php echo $i; ?><input id="home_rollover_widget_image_url_<?php echo $i; ?>" name="home_rollover_widget_image_url_<?php echo $i; ?>" type="text" value="<?php echo $data['home_rollover_widget_image_url_'.$i]; ?>" /></label></p> <p><label>TEXT <?php echo $i; ?><input name="home_rollover_widget_text_<?php echo $i; ?>" type="text" value="<?php echo $data['home_rollover_widget_text_'.$i]; ?>" /></label></p> <?php // If there's an URL provided, update it. if (isset($_POST['home_rollover_widget_image_url_'.$i])){ $data['home_rollover_widget_image_url_1'] = attribute_escape($_POST['home_rollover_widget_image_url_'.$i]); } // if there's a text provided, update it. if (isset($_POST['home_rollover_widget_text_'.$i])) { $data['home_rollover_widget_text_1'] = attribute_escape($_POST['home_rollover_widget_text_'.$i]); } ?> <script type="text/javascript"> var formField = ''; var imgUrl =''; jQuery(document).ready(function() { jQuery('#upload-button-<?php echo $i; ?>').click(function() { alert('Clicked on upload button'); formField = jQuery('#upload-button-<?php echo $i; ?>').attr('name'); tb_show('', 'media-upload.php?type=image&amp&TB_iframe=1'); return false; }); // send url back to plugin editor window.send_to_editor = function(html) { imgUrl = jQuery('img',html).attr('src'); alert('Sending image url'+imgUrl+' to text field'); jQuery('#home_rollover_widget_image_url_<?php echo $i; ?>').val(imgUrl); tb_remove(); } }); </script> <hr /> <?php } // Update widget data update_option('Home_Rollover_Widget', $data); } /** * widget() * * @param mixed $args * @return void */ function widget($args) { // Load all widget options $data = get_option('Home_Rollover_Widget'); ?> <h4><?php echo $data['home_rollover_widget_title']; ?></h4> <div id="all"> <?php // Loop though the widget elements for ($i = 1; $i <= 8; ++$i) { // Find image URL $imageUrl = $data['home_rollover_widget_image_url_'.$i]; // Check for first slash, if not present, add it. if (substr($imageUrl, 0, 1) != '/') { $imageUrl = '/'.$imageUrl; } ?> <ul> <li><a href="#"><img src="<?php echo get_template_directory_uri(); ?><?php echo $imageUrl; ?>" /><h4><?php echo $data['home_rollover_widget_text_'.$i]; ?></h4></a></li> </ul> <?php } ?> </div> <?php } /** * register() * * @return void */ function register() { // Register for sidebar register_sidebar_widget('Home Rollover Widget', array('Home_Rollover_Widget', 'widget')); // Register for control panel register_widget_control('Home Rollover Widget', array('Home_Rollover_Widget', 'control')); } } 

J'ai simplifié un peu le widget pour cet exemple, en supprimant la boucle for, car je pense que vous pourriez créer de nouvelles instances du widget. Cela permet également d'ajouter le bénéfice du tri des éléments. J'ai déplacé le js vers un autre fichier car il n'est pas nécessaire de répéter le code.

La classe des widgets

 class Home_Rollover_Widget extends WP_Widget { public function __construct() { parent::__construct( 'home-rollover-widget', 'Home Rollover Widget', array( 'description' => 'Home rollover widget' ) ); } public function widget( $args, $instance ) { // basic output just for this example echo '<a href="#"> <img src="'.esc_url($instance['image_uri']).'" /> <h4>'.esc_html($instance['image_uri']).'</h4> </a>'; } public function form( $instance ) { // removed the for loop, you can create new instances of the widget instead ?> <p> <label for="<?php echo $this->get_field_id('text'); ?>">Text</label><br /> <input type="text" name="<?php echo $this->get_field_name('text'); ?>" id="<?php echo $this->get_field_id('text'); ?>" value="<?php echo $instance['text']; ?>" class="widefat" /> </p> <p> <label for="<?php echo $this->get_field_id('image_uri'); ?>">Image</label><br /> <input type="text" class="img" name="<?php echo $this->get_field_name('image_uri'); ?>" id="<?php echo $this->get_field_id('image_uri'); ?>" value="<?php echo $instance['image_uri']; ?>" /> <input type="button" class="select-img" value="Select Image" /> </p> <?php } } // end class // init the widget add_action( 'widgets_init', create_function('', 'return register_widget("Home_Rollover_Widget");') ); // queue up the necessary js function hrw_enqueue() { wp_enqueue_style('thickbox'); wp_enqueue_script('media-upload'); wp_enqueue_script('thickbox'); // moved the js to an external file, you may want to change the path wp_enqueue_script('hrw', '/wp-content/plugins/home-rollover-widget/script.js', null, null, true); } add_action('admin_enqueue_scripts', 'hrw_enqueue'); 

Nouveau fichier js: utilisez la méthode .on() au lieu de .click() pour joindre le gestionnaire d'événements.

 var image_field; jQuery(function($){ $(document).on('click', 'input.select-img', function(evt){ image_field = $(this).siblings('.img'); tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true'); return false; }); window.send_to_editor = function(html) { imgurl = $('img', html).attr('src'); image_field.val(imgurl); tb_remove(); } }); 

Ce script m'a beaucoup aidé. Plus tard, j'ai découvert qu'il a malmené le téléchargement de médias dans mes messages, peut-être parce qu'il appelait deux fois les scripts de téléchargement de média. Je l'ai résolu en ajoutant

 if( $hook != 'widgets.php' ) return; 

Comme ça:

 // queue up the necessary js function hrw_enqueue($hook) { if( $hook != 'widgets.php' ) return; wp_enqueue_style('thickbox'); wp_enqueue_script('media-upload'); wp_enqueue_script('thickbox'); // I also changed the path, since I was using it directly from my theme and not as a plugin wp_enqueue_script('hrw', get_template_directory_uri() . '/js/script.js', null, null, true); } add_action('admin_enqueue_scripts', 'hrw_enqueue'); 

De cette façon, le widget appelle le script de téléchargement uniquement dans la page des widgets et non dans l'intégralité de l'administrateur.