Discussion :

[CosmoKnacki]

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.

[onirisme]

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :









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.

[CosmoKnacki]

Oh que oui! Merci beaucoup, c'est exactement ce que je cherchais!

Je vais tester ça demain, car là je suis vanné.

Merci encore!