Comment créer un Widget WordPress ?

Créer des widgets WordPress passe par la création d’un plugin et la création d’une nouvelle classe que nous allons venir greffer aux Widgets. Regardons ensemble comment développer vos propres widgets dans WordPress.

Avant toute chose, si vous ne savez pas trop comment vous êtes arrivés ici et que vous vous demandez ce qu’est un widget, je vous invite à commencer par lire notre guide : Qu’est-ce qu’un widget ?

Pour développer un widget sur WordPress, vous devez commencer par créer un plugin personnalisé dans lequel vous intégrerez le code de votre Widget. Un plugin est un ensemble de fichiers contenant du code PHP qui ajoute des fonctionnalités supplémentaires à votre site WordPress.

Comment créer son Widget personnalisé sur WordPress

Voici comment faire pour créer un widget personnalisé pour votre site WordPress

1ère partie : créer un plugin

Nous n’allons pas nous attarder sur la création d’un plugin et nous contenter du résumé. Si vous souhaitez plus d’informations sur la création d’un plugin en détail, consultez notre guide à ce sujet.

1. Ouvrez votre éditeur de code préféré et créez un nouveau dossier pour votre plugin personnalisé. Donnez-lui un nom significatif, par exemple “mon-plugin-widget”.
2. À l’intérieur du dossier de votre plugin, créez un fichier principal que vous nommerez de manière appropriée. Par exemple, “mon-plugin-widget.php”.
3. Ouvrez le fichier “mon-plugin-widget.php” et ajoutez l’en-tête de base pour un plugin WordPress. Voici un exemple :

<?php
/*
Plugin Name: Mon Plugin Widget
Plugin URI: https://wpnuls.fr
Description: Description de votre plugin
Version: 1.0
Author: WPNULS
Author URI: https://wpnuls.fr
*/

// Ajoutez ici le code de votre widget

4. Enregistrez le fichier “mon-plugin-widget.php”.

2ème partie : créer une classe pour notre Widget

Maintenant que vous avez configuré votre plugin, vous pouvez créer une classe pour votre widget personnalisé. Voici comment procéder :

1. Ouvrez le fichier “mon-plugin-widget.php” que vous avez créé précédemment.
2. Ajoutez le code suivant pour définir votre classe de widget en dessous ou à la place de // ajoutez ici le code de votre widget

class Mon_Widget extends WP_Widget {

    // Constructeur du widget
    function __construct() {
        parent::__construct(
            'mon_widget',  // Identifiant unique du widget
            'Mon Widget',  // Nom du widget affiché dans l'administration
            array( 'description' => 'Description de mon widget' )  // Description du widget affichée dans l'administration
        );
    }

    // Méthode d'affichage du widget sur le site
    public function widget( $args, $instance ) {
        // Le code d'affichage de votre widget sera ajouté ici
    }

    // Méthode d'affichage du formulaire de configuration du widget dans l'administration
    public function form( $instance ) {
        // Le code du formulaire de configuration de votre widget sera ajouté ici
    }

    // Méthode de mise à jour des paramètres du widget
    public function update( $new_instance, $old_instance ) {
        // Le code de mise à jour des paramètres de votre widget sera ajouté ici
    }
}

3. Personnalisez les valeurs dans le constructeur de votre classe. L’identifiant unique doit être un nom en minuscules sans espaces ni caractères spéciaux. Le nom du widget est celui qui sera affiché dans l’administration, et la description est une brève description du widget.

3ème partie : Définir les méthodes du widget

Maintenant, vous pouvez ajouter le code à l’intérieur des méthodes de votre widget pour son fonctionnement. Comme vous l’avez vu dans le code il y a 3 méthodes a définir :

• Affichage (site)
• Paramétrage (admin)
• Traitement des données (mise à jour)

Fonction Widget (affichage côté client)

À l’intérieur de la méthode “widget”, vous devez ajouter le code qui définit comment votre widget sera affiché sur le site. Vous pouvez utiliser des fonctions telles que “echo” pour afficher du contenu HTML, des boucles WordPress pour afficher des articles, etc.

Fonction Form (affichage côté admin)

Dans la méthode “form”, vous pouvez ajouter le code pour afficher le formulaire de configuration de votre widget dans l’administration. Vous pouvez utiliser des balises HTML et des fonctions spécifiques à WordPress pour créer les champs de formulaire nécessaires.

Fonction Update (enregistrement des données du Widget)

Dans la méthode “update”, vous devez ajouter le code pour traiter et enregistrer les paramètres du widget lorsque l’utilisateur les modifie. Cela peut inclure la validation des entrées, la mise à jour des valeurs des options, etc.

4ème partie : Enregistrer son Widget

Maintenant que vous avez créé votre classe de widget, vous devez l’enregistrer auprès de WordPress pour qu’il soit disponible dans l’administration. Voici comment procéder :

1. Ajoutez le code suivant à la fin de votre fichier “mon-plugin-widget.php” :

// Fonction d'enregistrement du widget
function register_mon_widget() {
    register_widget( 'Mon_Widget' );
}
add_action( 'widgets_init', 'register_mon_widget' );

2. Enregistrez et fermez le fichier “mon-plugin-widget.php”.

5ème et dernière étape : Télécharger et activer notre nouveau plugin

Maintenant que votre plugin personnalisé avec votre widget est prêt, vous devez le télécharger et l’activer dans WordPress :

1. Compressez le dossier de votre plugin personnalisé “mon-plugin-widget” en un fichier ZIP.
2. Accédez à l’interface d’administration de votre site WordPress.
3. Dans le menu de gauche, allez dans “Extensions” puis cliquez sur “Ajouter” pour télécharger un nouveau plugin.
4. Sélectionnez le fichier ZIP de votre plugin personnalisé et cliquez sur “Installer maintenant”.
5. Une fois l’installation terminée, cliquez sur “Activer” pour activer votre plugin.

Votre widget personnalisé est maintenant disponible dans l’administration de WordPress et peut être ajouté aux zones de widgets de votre thème.

Bonus : sécuriser son widget WordPress contre le piratage

Lorsque vous développez un widget personnalisé pour WordPress, il est important de prendre en compte la sécurité afin de protéger votre site et ses utilisateurs. Voici quelques conseils pour sécuriser votre widget :

1. Sanitisez et validez les entrées utilisateur :
   • Lorsque vous traitez les données entrées par l’utilisateur, assurez-vous de les nettoyer (sanitize) et de les valider (validate) correctement. Utilisez les fonctions de nettoyage et de validation fournies par WordPress, telles que sanitize_text_field() ou esc_html(), pour éliminer les balises HTML et les caractères dangereux des entrées utilisateur.
   • Si votre widget accepte des URL, utilisez esc_url() pour nettoyer les URLs fournies par les utilisateurs.
   • Évitez d’exécuter du code PHP directement à partir des entrées utilisateur sans validation appropriée.
2. Évitez les failles de sécurité :
   • Assurez-vous d’utiliser les fonctions et les méthodes de WordPress pour accéder et manipuler les données. Évitez d’accéder directement à la base de données en utilisant des requêtes SQL brutes.
   • Utilisez les fonctions de nonces de WordPress pour protéger les actions sensibles, telles que les formulaires de soumission.
   • Appliquez le principe du moindre privilège en vous assurant que votre widget n’accède qu’aux ressources nécessaires. Limitez les autorisations de votre widget aux utilisateurs qui en ont besoin.
3. Sécurisez les fichiers inclus :
   • Si votre widget inclut des fichiers externes, tels que des scripts JavaScript ou des fichiers CSS, assurez-vous de les charger de manière sécurisée en utilisant les fonctions de WordPress, telles que wp_enqueue_script() et wp_enqueue_style(). Cela permettra de prévenir les attaques de type “Cross-Site Scripting” (XSS).
   • Assurez-vous de ne pas inclure de fichiers provenant de sources non fiables ou d’utiliser des fonctions obsolètes et non sécurisées.
4. Limitez l’accès aux ressources :
   • Si votre widget nécessite une action spécifique ou l’accès à certaines ressources, assurez-vous que seuls les utilisateurs autorisés peuvent y accéder. Vous pouvez vérifier les rôles et les capacités des utilisateurs en utilisant les fonctions appropriées de WordPress, telles que current_user_can().
5. Effectuez des tests de sécurité :
   • Testez votre widget dans un environnement de développement sécurisé avant de le déployer sur un site en production.
   • Effectuez des tests de sécurité, tels que des tests d’intrusion, pour identifier et résoudre les éventuelles vulnérabilités.

Ces conseils vous aideront à renforcer la sécurité de votre widget personnalisé dans WordPress. Il est également recommandé de suivre les bonnes pratiques de développement sécurisé et de rester informé des dernières mises à jour de sécurité de WordPress.