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

Je suis occupé avec la création de ma propre Widget WordPress. Tout fonctionne bien sauf pour le WordPress médias jusqu'chargeur.
J'ai créé huit boutons et huit champs de texte de saisie qui doit contenir l'url de l'image qui a été téléchargé.

L'événement de clic n'est pas de feu, probablement parce que WordPress sorties HTML deux fois(une Fois dans la barre de widgets disponibles et une fois dans le bar actuellement active widgets).

Quelqu'un voit ce que je fais mal?

Vous trouverez ci-dessous 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'));
}
}

source d'informationauteur Ivo van Beek

J'ai simplifié le widget un peu pour cet exemple, la suppression de la boucle for, comme je pense que vous pouvez simplement créer de nouvelles instances de la widget. Cela permet aussi à l'avantage de trier les éléments. J'ai déplacé le js à un autre fichier comme il n'y a pas besoin de répéter le code.

De la classe de widget

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: utiliser le .on() méthode au lieu de .click() pour joindre le gestionnaire d'événement.

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, cependant, j'ai trouvé qu'il a sali avec les médias de téléchargement dans mes posts, peut-être parce que c'était l'appel de la media uploader des scripts à deux reprises. Je l'ai résolu en ajoutant

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

Comme ceci:

//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 appels à uploader le script uniquement dans les widgets de la page et non pas dans l'ensemble de l'admin.

Vous devez vous connecter pour publier un commentaire.