Blog ENI : Toute la veille numérique !
🐠 -25€ dès 75€ 
+ 7 jours d'accès à la Bibliothèque Numérique ENI. Cliquez ici
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
  1. Livres et vidéos
  2. WordPress et ses extensions
  3. Créer une extension widget en PHP
Extrait - WordPress et ses extensions Développez votre site de A à Z (théorie, TP, ressources)
Extraits du livre
WordPress et ses extensions Développez votre site de A à Z (théorie, TP, ressources) Revenir à la page d'achat du livre

Créer une extension widget en PHP

Introduction

Les widgets sont des extensions qui s’intègrent facilement dans la barre latérale (sidebar). Vous pouvez les organiser comme vous le souhaitez, grâce à un système Ajax de drag and drop (ou glisser-déposer en français). Plusieurs widgets par défaut sont disponibles, tels qu’une liste d’articles les plus récents, un nuage d’étiquettes, un champ de recherche, un menu personnalisé...

De plus, vous avez la possibilité de télécharger des widgets supplémentaires pour enrichir les fonctionnalités de votre site.

Dans ce chapitre, vous allez apprendre à créer votre propre widget. Ce widget aura pour but de faire apparaître une liste d’articles en fonction d’une ou plusieurs catégories. Il pourra être configuré via l’onglet de l’administration Apparence - Widgets. Vous découvrirez comment utiliser l’objet WP_widget dans votre propre classe et l’objet WP_Query pour faire une requête à la base de données et récupérer des informations sur les articles.

Configurer l’extension

Pour créer un widget, procédez comme pour toute extension en créant un sous-dossier au dossier wp-content/plugins et donnez-lui un nom. Pour l’exercice, appelez-le « widget-post ».

À l’intérieur du dossier widget-post, créez un fichier widget-post.php. Insérez dans le dossier les fichiers readme.txt, licence.txt et index.php (vide), si vous le souhaitez.

En haut du fichier widget-post.php, ajoutez en en-tête un commentaire avec les informations sur l’extension, et activez l’extension. Puis, vérifiez qu’elle apparaît bien dans l’administration avec les bonnes informations.

Le commentaire est le suivant :

<?php  
/*  
Plugin Name: Widget post   
Description: widget permettant l'affichage d'une liste d'articles 
selon la catégorie.  
Version: 1.0  
License: GPLv2  
This program is free software; you can redistribute it and/or  
modify it under the terms of the GNU General Public License  
as published by the Free Software Foundation; either version 2  
of the License, or (at your option) any later version.  
  
This program is distributed in the hope that it will be useful,  
but WITHOUT ANY WARRANTY; without even the implied warranty of  
MERCHANTABILITY or FITNESS...

La classe WP_Widget

L’API des widgets de WordPress permet de gérer, créer, modifier des widgets grâce à plusieurs méthodes. Elle permet également d’étendre la classe WP_Widget, pour créer des widgets d’une façon très intuitive.

Référence au codex : https://codex.wordpress.org/Widgets_API

Structure de construction d’un widget : https://codex.wordpress.org/Widgets_API#Example

La classe WP_Widget a été conçue spécialement pour faciliter le développement de widgets. Elle autorise la création de classe étendue, ce qui va vous permettre d’utiliser ses méthodes.

Pour créer la classe de votre propre widget, vous allez vous servir de la classe WP_Widget de cette manière :

class Ma_class extends WP_Widget {} 

Ce dispositif permet de simplifier la création de widget, il faudra donc vous familiariser avec sa mise en œuvre et les méthodes de la classe WP_Widget.

Pour développer un widget, votre classe devra contenir quatre méthodes spécifiques :

  • La méthode constructeur __construct(), qui sert à configurer le widget.

    PHP permet aux développeurs de déclarer des constructeurs pour les classes. Les classes qui possèdent une méthode constructeur appellent cette méthode à chaque création...

Configurer le widget

Pour configurer le widget, il faut instancier l’objet parent de la méthode constructeur __construct(), de cette façon : parent::__construct(). Cela permet de paramétrer le widget et d’indiquer à WordPress qu’il y a un nouveau widget.

public function __construct(){   
    parent::__construct( $id_base , $name, $widget_ops, $control_ops ); 
} 

Voici le détail pour instancier le parent de la méthode __construct() :

parent::__construct( $id_base, $name, $widget_ops, $control_ops ); 

$id_base : nom clé du widget.

$name : nom du widget.

$widget_ops : accepte un tableau contenant un nom de classe HTML et une description.

Exemple

$widget_ops =array( 'classname' => 'your_class', 'description' => 
'your_description' ); 

$control_ops : accepte un tableau additionnel de paramètres (largeur, hauteur, id).

Exemple

$control_ops = array( 'width' =>'your_width', 'height'  
=>'your_height', 'id_base' => 'your_id' ); 

La méthode __construct() a le code suivant :

public function __construct() {  
  $widget_ops = array( 'classname' => 'widget-post',  
                'description' => 'widget...

Enregistrer le widget avec la fonction register_widget()

Avant d’utiliser le widget, enregistrez-le à l’extérieur de la classe, grâce à la fonction WordPress register_widget().

<?php register_widget( $widget_class ); ?> 

$widget_class : le nom de classe du widget concerné.

Il existe une fonction inverse permettant de supprimer l’enregistrement d’un widget :

<?php unregister_widget( $widget_class ); ?> 

Voici les noms de classes des widgets natifs de WordPress :

  • WP_Widget_Pages : nom de classe pour le widget Pages.

  • WP_Widget_Calendar : nom de classe pour le widget Calendrier.

  • WP_Widget_Archives : nom de classe pour le widget Archives.

  • WP_Widget_Links : nom de classe pour le widget Widget post.

  • WP_Widget_Media_Audio : nom de classe pour le widget Son.

  • WP_Widget_Media_Image : nom de classe pour le widget Image.

  • WP_Widget_Media_Video : nom de classe pour le widget Vidéo.

  • WP_Widget_Meta : nom de classe pour le widget Méta.

  • WP_Widget_Search : nom de classe pour le widget Chercher.

  • WP_Widget_Text : nom de classe pour le widget Texte.

  • WP_Widget_Categories : nom de classe pour le widget Catégories.

  • WP_Widget_Recent_Posts : nom de classe pour le widget Articles récents. 

  • WP_Widget_Recent_Comments : nom de classe pour...

Afficher le widget grâce à un hook

Pour afficher le widget, greffez le module au core de WordPress à l’aide du hook d’action widgets_init, qui s’exécute lors de l’initialisation des widgets. 

add_action( 'widgets_init', 'register_my_widget' ); 

Désormais, le widget apparaît dans l’administration dans l’onglet Apparence - Widgets et/ou dans les éléments de l’extension Elementor. Si l’onglet Widgets n’est pas présent, cela signifie que le thème ne l’a pas intégré. Il faut soit changer de thème, soit activer cette fonctionnalité avec la fonction register_sidebar($args), si vous comptez utiliser le système de barre latérale.

<?php register_sidebar($args) ?> 

La fonction accepte un argument sous forme d’un tableau contenant des paramètres ; voici les valeurs par défaut :

<?php   
$args = array( 'name' => 'nom de la sidebar',  
             'id' => 'id de la sidebar',  
             'description' => '',  
             'class' => '',  
             'before_widget'...

Créer le formulaire du widget

1. Ajouter les champs HTML

Pour créer le formulaire du widget, intégrez du code HTML dans la méthode form().

Ajoutez deux champs HTML : un input texte pour le titre et un menu déroulant select comportant une boucle sur les catégories. Cette boucle permet d’afficher toutes les catégories du site, offrant ainsi la possibilité de sélectionner celle désirée.

Attribuez l’identifiant de chaque catégorie comme valeur (value) dans les champs option. Cela facilitera la récupération de l’identifiant de la catégorie sélectionnée pour l’utiliser dans la requête qui extraira les informations sur les articles avec l’objet WP_Query et la fonction get_posts().

Assurez-vous qu’au moins une catégorie existe. Associez à chaque catégorie un ou plusieurs articles, sinon la boucle ne retournera aucun résultat. Une catégorie ne s’affiche que si elle est associée à un ou plusieurs articles !

Voici le code :

public function form($instance) { ?>  
<p>  
   <label for="">Titre:</label>  
   <input type="text" id="" name="" value="" style="width:100%;" /> 
</p>  
<p>  
   <label for="">Catégorie: 
   </label>  
   <select id="" name="" value="" style="width:100%;" >  
    <option>toutes les catégories</option>  
<?php  
 foreach((get_categories()) as $cat) {  
    echo '<option value="'.$cat->cat_ID.'">'.$cat->cat_name.'</option>'; 
 }   
?>  
 </select>  
</p>  
<?php   ...

Enregistrer et mettre à jour les options du widget

Pour mettre à jour ou enregistrer les informations dans la base de données, vous devez modifier la méthode update(). WordPress simplifie la tâche en vous demandant de lui retourner un tableau $instance avec les nouvelles valeurs, pour qu’il puisse enregistrer les modifications.

Les deux arguments passés à la méthode sont automatiquement gérés par WordPress. Ils permettent de récupérer facilement l’ancien tableau et le nouveau tableau.

Utilisez la fonction PHP strip_tags() lors de l’enregistrement du widget, pour sécuriser les champs du tableau afin d’éviter l’injection de code. L’injection de code consiste à taper du code malveillant dans un champ afin de pénétrer dans le site sans y être autorisé.

Voici le code pour la méthode update() :

public function update($new_instance,$old_instance ){  
   $instance = $old_instance;  
  
   $instance['title'] = strip_tags( $new_instance['title'] );  
   $instance['category'] = strip_tags( $new_instance['category'] ); 
  
   return $instance;  
} 

Afficher le widget dans la colonne latérale (sidebar)

Pour afficher le widget sur le site internet, il ne reste plus qu’à alimenter la méthode d’affichage widget().

Dans un premier temps, utilisez la fonction PHP extract() sur le tableau $args pour extraire les clés du tableau sous forme de variables et leur attribuer automatiquement la valeur associée. Rappelons que $args est un tableau contenant des informations sur la barre latérale (sidebar). Les variables sont donc définies directement selon la configuration de la barre latérale. 

Exemple

$args=array('before_title'=>'<h1>','after_title'=>'</h1>');  
extract($args);  
echo $before_title.'mon titre'.$after_title; 

Le titre sera entouré des balises HTML <h1></h1>, les clés du tableau s’utilisent directement en tant que variables, ainsi la clé before_title est utilisable sous la forme $before_title, grâce à la fonction PHP extract().

Lien vers le guide officiel de PHP, pour la fonction PHP extract() : http://php.net/manual/fr/function.extract.php

Voici le code de la méthode widget :

public function widget($args,$instance) {  
 extract($args);  
} 

Dans votre cas, le tableau $args a pour variables...

Conclusion

Dans ce chapitre, vous avez découvert comment créer une extension Widget et constaté la puissance de WordPress pour y parvenir facilement. Tout a été prévu pour simplifier la vie des développeurs et créer toute sorte de widgets réutilisables.

Vous avez appris comment l’intégrer facilement au site avec Gutenberg ou Elementor, ou en créant une zone pour la colonne latérale (sidebar) pour accueillir les widgets.

Pour aller plus loin sur l’intégration des colonnes latérales, il sera nécessaire d’explorer davantage la construction des thèmes WordPress.