Tutoriel WordPress: Créer un widget
Facile
php
WordPress utilise nativement un système de « widgets » dans la barre latérale (la « sidebar »). Les widgets sont intiment liés au thème utilisé. Il est possible directement depuis un thème de créer son propre widget.
Nous allons donc voir ici, comment créer simplement un widget, qui affichera les photos d’un compte Flickr donné.
1. Préambule
Pour notre widget, nous allons avoir besoin de quatre paramètres :
- title: le titre du widget
- identifiant: l’identifiant du compte Flickr
- pseudo: le pseudonyme du compte Flickr
- nb_display: le nombre de photos à afficher
Nous verrons comment utiliser ces 4 paramètres dans les fonctions qui suivent.
A présent, rendez-vous dans votre le répertoire où est installé votre thème généralement situé ici:
/wp-content/themes/votre-theme/
Ouvrez ensuite le fichier functions.php
et ajouter le code suivant :
<?php class FlickrGallery extends WP_Widget { function FlickrGallery() { // Constructeur } function widget($args, $instance) { // Contenu du widget à afficher } function update($new_instance, $old_instance) { // Modification des paramètres du widget } function form($instance) { // Affichage des paramètres du widget dans l'admin } } ?>
Pour créer un widget, nous devons donc créer une classe portant le nom de notre widget, en l’occurence « FlickrGallery« . Dans cette classe, nous disposons de quatre méthodes :
- FlickrGallery() : Il s’agit du constructeur, c’est ici que l’on va instancier le widget.
- widget() : Dans cette fonction, nous allons pouvoir définir le code html qui sera affiché dans notre widget.
- update() : Cette méthode s’occupe de mettre à jour les paramètres que l’on aura définis pour notre widget.
- form() : Cette fonction permet de définir le code html qui sera affiché dans l’administration pour saisir les paramètres.
Développement des fonctions
Méthode FlickrGallery()
function FlickrGallery() { parent::WP_Widget(false, $name = 'FlickrGallery', array("description" => 'Affichage de votre galerie Flickr')); }
Tout ce que l’on fait dans cette méthode, c’est appeler le constructeur de la classe parente « WP_Widget« , en lui passant trois paramètres :
- Le premier est l’ID du widget, si false il sera défini automatiquement
- Le deuxième est le nom du widget
- Le troisième est un tableau de paramètres pour par exemple ajouter une description
Méthode widget()
C’est dans cette méthode que nous allons définir le code HTML qui sera affiché dans notre widget, dans la barre latérale.
Il y a un peu plus de code, c’est le gros morceau du widget :
<?php function widget($args, $instance) { // Extraction des paramètres du widget extract( $args ); // Récupération de chaque paramètre $title = apply_filters('widget_title', $instance['title']); $identifiant = $instance['identifiant']; $pseudo = $instance['pseudo']; $nb_display = $instance['nb_display']; // Voir le détail sur ces variables plus bas echo $before_widget; // On affiche un titre si le paramètre est rempli if($title) echo $before_title . $title . $after_title; /* Début de notre script /* Nous allons ici récupérer un webservice de Flickr, un fichier XML /* Puis le parcourir /* Et afficher un nombre défini de photos */ ?> <ul> <?php $url = "http://api.flickr.com/services/feeds/photos_public.gne?id=".$identifiant."&lang=en-us&format=rss_200"; $flickr = simplexml_load_file($url); if($flickr != false) { $nb = $nb_display; for($i = 0; $i<$nb; $i++) { $photo = $flickr->channel->item[$i]; $picture = $photo->xpath("media:thumbnail"); $pic = $picture[0]['url']; $w = $picture[0]['width']; $h = $picture[0]['height']; $title = $photo->title; echo "<li><a href='$photo->link' rel='external' title=\"$title\"><img src='$pic' alt=\"$title\" width='$w' height='$h' /></a></li>"; } } else echo "<li>Erreur lors du chargement des photos Flickr.</li>"; ?> </ul> <div class="clear"></div> <p class="right"><a href="http://www.flickr.com/photos/<?php echo $pseudo; ?>/">Plus de photos</a></p> <?php echo $after_widget; }
Voici le widget que nous aurons dans notre sidebar (après avoir rajouté un peu de CSS):
Méthode update()
<?php function update($new_instance, $old_instance) { $instance = $old_instance; /* Récupération des paramètres envoyés */ $instance['title'] = strip_tags($new_instance['title']); $instance['identifiant'] = $new_instance['identifiant']; $instance['pseudo'] = $new_instance['pseudo']; $instance['nb_display'] = $new_instance['nb_display']; return $instance; } ?>
Pas grand chose à expliquer ici, la fonction récupère les paramètres du widget, et WordPress s’occupe du reste, de la modification en base de données. Toute cette partie base de données est transparente pour nous !
Méthode form()
<?php function form($instance) { $title = esc_attr($instance['title']); $identifiant = esc_attr($instance['identifiant']); $pseudo = esc_attr($instance['pseudo']); $nb_display = esc_attr($instance['nb_display']); ?> <p> <label for="<?php echo $this->get_field_id('title'); ?>"> <?php _e('Title:'); ?> <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" /> </label> </p> <p> <label for="<?php echo $this->get_field_id('identifiant'); ?>"> <?php _e('Identifiant:'); ?> <input class="widefat" id="<?php echo $this->get_field_id('identifiant'); ?>" name="<?php echo $this->get_field_name('identifiant'); ?>" type="text" value="<?php echo $identifiant; ?>" /> </label> </p> <p> <label for="<?php echo $this->get_field_id('pseudo'); ?>"> <?php _e('Pseudo:'); ?> <input class="widefat" id="<?php echo $this->get_field_id('pseudo'); ?>" name="<?php echo $this->get_field_name('pseudo'); ?>" type="text" value="<?php echo $pseudo; ?>" /> </label> </p> <p> <label for="<?php echo $this->get_field_id('nb_display'); ?>"> <?php _e('Nombre de photos:'); ?> <input class="widefat" id="<?php echo $this->get_field_id('nb_display'); ?>" name="<?php echo $this->get_field_name('nb_display'); ?>" type="text" value="<?php echo $nb_display; ?>" /> </label> </p> <?php } ?>
Ici, nous allons simplement récupérer les informations enregistrées en base de données et afficher des champs de formulaire pour les modifier. Nous utilisons pour cela deux méthodes :
- $this->get_field_id(‘identifiant’) : permet de récupérer l’ID du paramètre
- $this->get_field_name(‘identifiant’): permet de récupérer le nom du paramètre
Voilà ! Nos quatre fonctions sont terminées ! Il nous reste encore une chose à faire :
- Dire à WordPress d’inclure ce widget
Dernière étape
Rajoutez juste après la classe FlickGallery la ligne de code suivante :
add_action('widgets_init', create_function('', 'return register_widget("FlickrGallery");'));
Nous indiquons à WordPress d’ajouter notre widget FlickGallery à la liste des widgets à initialiser.
Et voici le widget que nous avons dans l’administration :
Pour peaufiner
Vous avez sans doute vu que nous avons utilisé quatre variables qui sortent de nulle part tout à l’heure :
- $before_widget
- $after_widget
- $before_title
- $after_title
Ces variables correspondent au code HTML qu’il est possible d’adapter à notre thème.
Ainsi, vous trouverez dans le fichier functions.php
un bout de code comme celui-là :
<?php if(function_exists('register_sidebar')) register_sidebar(array( 'before_widget' => '<li id="%1$s" class="widget %2$s">', 'after_widget' => "</li>n", 'before_title' => '<h2 class="widgettitle">', 'after_title' => "</h2>n" )); ?>
Vous pouvez donc ici modifier le code HTML qui entoure le titre du widget ainsi que l’élément de liste lui même.
A vous de jouer !
Voilà ! Vous avez maintenant toutes les clés en main pour construire vos propres widgets de thème ! Bon développement !
15 commentaires
Laisser une réponse

Merci beaucoup pour ce tutoriel.
J’ai passé un bon moment à m’arracher les cheveux pour comprendre le fonctionnement d’un widget avant d’enfin arriver sur un tuto clair et qui fonctionne.
Bonne journée.
Bonjour,
Merci beaucoup pour ce tuto complet et bien expliqué.
J’ai juste une question : le fichier php qui définit mon widget, je peux le placer où je veux dans l’arborescence de mon thème ?
Un simple « add_action* » suffit à WordPress pour retrouver ce plugin ?
*add_action(‘widgets_init’, create_function( », ‘return register_widget(« FlickrGallery »);’));
Ce que je fais personnellement, c’est que je mets le code de mes widgets dans un fichier séparé, par exemple widgets.php, que j’include dans mon fichier de fonctions.
Tu peux donc mettre le fichier widgets.php où tu veux.
Superbe tutoriel en effet, clais simple, limpide, par contre lorsque je vais dans la gestion de mes widgets en administration WordPress, j’obtiens cette erreur :
Fatal error: Class ‘lgpf_widget_infos’ not found in…
Une idée???
Hum, ben peut être n’as-tu pas bien référencé ta classe de widget ?
merci pour le tuto ca ma beaucoup aidé. bonne journée
Merci, c’est de loin la meilleure ressource que j’ai trouvée pour créer mon premier widget.
Paix.
Excellent,
Merci pour ce tuto claire.
Sa marche niquell jusque 4 photos et après pour la cinquième, j’ai le droit à: »Fatal error: Call to a member function xpath() on a non-object in ……. »A la place de la 5ème. Quelqu’un a une idée ?
Cela vient certainement du fait que tu n’as pas suffisamment d’images disponibles et qu’il essaie d’itérer sur un nombre d’images plus grand que celles disponibles.
Bonjour,
Tout d’abord merci pour cet excellent tuto !
J’ai le même problème que 2F lorsque je n’ai pas assez d’images… donc je sais bien que je n’ai cas modifier le nombre d’images… mais comme je suis un peu tatillonne… comment peut-on faire pour gérer ça dans le plugin ?
On peut récupérer le nombre d’images dispos sur Flickr ? ou autre chose de plus simple ???
Merci
On peut a priori avoir cela. Dans l’API de flickr: http://www.flickr.com/services/api/flickr.galleries.getInfo.html il y a une info count_photos= »17″.
Un article que je vais bookmarké immédiatement et garder sous le coude le jour ou je voudrais passer l’étape au-dessus et commencer à créer des choses sur WordPress.
Toute la méthode pour créer des widgets exposée en un seul article : chapeau bas.
Ignorant comment ajouter des widgets, j’ajoutais du code directement dans la sidebar, et ce n’était pas satisfaisant.
La prochaine version de mon site sera plus propre grâce à cet article.
Merci.
اخبار بروز تکنولوژی در دیجی وی اس