[3.5.1]Choisir une image dans un Widget
Bonjour,
Je souhaite avoir accès à la bibliothéque de médias (aux images plus précisément) afin d'en choisir un depuis un widget dans l'admin.
Voici le scénario (je suis dans l'admin) :
- je clique sur le bouton "choisir une image" de mon widget
- à ce moment apparait le pop-up "insèrer un media" avec les thumbnails de toutes les images (<-- le même qui apparait lorsque l'on souhaite insèrer un média dans un article)
- je choisis une image dans ce pop-up et clique sur "insérer"
- l'url de l'image est transmise au widget
Ma question est: comment faire ça?
Peux t'on utiliser des briques de WP pour faire ça facilement (d'ailleurs si au passage on peut customizer le bouton "insérer dans l'article" pour remplacer le texte, et limiter le choix de média aux images)?
Est-on obligé, au contraire, de coder cette fonctionnalité de bout en bout juste pour séléctionner une image de la bibliothéque (la fonctionnalité d'upload ne m'interesse pas)?
Merci de vos réponses.
Utilisation du media uploader de Wordpress dans un Widget
Bonjour,
Il est possible d'utiliser le media uploader de Wordpress. Le chargement se fait via javascript et il est necessaire de charger 3 bibliothèques + css thickbox:
Code:
1
2
3
4
| wp_enqueue_style('thickbox');
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_enqueue_script('jquery'); |
Je ne sais pas si tu es familier avec la création de Widget Wordpress, si ce n'est pas le cas, je te conseille de consulter le codex Wordpress http://codex.wordpress.org/WordPress_Widgets et http://codex.wordpress.org/Widgets_API
Voilà un Widget réaliser rapidement pour exemple. J'ai intégré ce code dans mon theme mais tu peux tout aussi bien l'intégré dans un plugin.
Code du fichier widgets.php (chargé depuis functions.php) :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
| <?php
class owMediaWidget extends WP_Widget{
//Initialisation du widget
public function __construct(){
parent::__construct(
'ow-media-widget',
'ow Media Widget',
array(
'description' => 'openWab Media uploader widget'
)
);
}
// Affichage du Widget dans le sidebar
public function widget( $args, $instance ){
extract($args);
$title = apply_filters('widget_title', $instance['title']);
echo $before_widget;
echo '<h4>'.esc_html($instance['text']).'</h4><img src="'.esc_url($instance['image_uri']).'" />';
echo $after_widget;
}
// Le formulaire qui affiche notre media uploader + Titre/text dans l'admin
public function form( $instance ){
?>
<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
}
}
//Function ppermettant d'initialiser notre Widget
function myplugin_register_widgets() {
register_widget('owMediaWidget');
}
add_action('widgets_init', 'myplugin_register_widgets');
// enqueue des fichiers javascript necessaires
function owMediaWidget_enqueue(){
wp_enqueue_style('thickbox');
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
// Le fichier Javascript externe, chemin à modifier selon emplacement
wp_enqueue_script('owmw', THEME_URL.'admin/js/ow-media-uploader.js', null, null, true);
}
add_action('admin_enqueue_scripts', 'owMediaWidget_enqueue');
?> |
Le fichier 'ow-media-uploader.js'
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
| 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&TB_iframe=true');
return false;
});
window.send_to_editor = function(html) {
imgurl = $('img', html).attr('src');
image_field.val(imgurl);
tb_remove();
}
}); |
Quelques captures d'écran :
http://www.openwab.com/wp-content/up...a-uploader.jpg
http://www.openwab.com/wp-content/up...le-sidebar.jpg
http://www.openwab.com/wp-content/up...-wordpress.jpg
http://www.openwab.com/wp-content/up...nd-sidebar.jpg
Deuxième solution, le Plugin directory de Wordpress. Par exemple : http://wordpress.org/extend/plugins/image-widget/
J’espère avoir répondu à ta question.
