WordPress est un système de gestion de contenu incroyable avec de nombreuses fonctionnalités telles que des widgets. Dans ce tutoriel, je vais vous expliquer comment créer vos propres widgets dans un petit plugin. Cet article couvrira quelques points supplémentaires que vous devez comprendre avant de créer le widget lui-même. Et c’est parti!

Étape 1: Créez votre plugin de widget

J’ai récemment créé un plugin appelé “Freelancer Widgets Bundle”, et certaines personnes m’ont demandé comment créer un tel plugin, j’ai donc décidé d’écrire ce post. La première étape est la création du plugin. Et comme vous le verrez, ce n’est pas la partie la plus difficile. Un plugin est un code supplémentaire ajouté à WordPress une fois que vous l’avez activé. WordPress crée une boucle dans un dossier pour récupérer tous les plugins disponibles et les lister dans le back-office. Pour créer votre plugin, vous aurez besoin d’un éditeur tel que Coda (Mac) ou Dreamweaver (PC et Mac). Je vous recommande de créer votre plugin dans une installation locale de WordPress, le faire sur un serveur en direct peut causer des problèmes si vous faites une erreur. Alors s’il vous plaît, attendez de tester notre plugin avant d’y placer votre hébergement.

Ouvrez maintenant le dossier wp-content / plugins. C’est là que vous allez ajouter votre plugin. Créez un nouveau répertoire et appelez-le «widget-plugin» (en fait, ce nom peut être celui que vous voulez). Même si notre plugin n’aura qu’un seul fichier, il est toujours préférable d’utiliser un dossier pour chaque plugin. Dans votre répertoire, créez un nouveau fichier appelé «widget-plugin.php» (ce nom peut également être changé) et ouvrez-le. Nous sommes maintenant sur le point d’ajouter nos premières lignes de code. La définition d’un plugin sous WordPress suit quelques règles que vous pouvez lire ici sur le codex. Voici comment WordPress définit un plugin:

<?php
/*
Plugin Name: Name Of The Plugin
Plugin URI: http://URI_Of_Page_Describing_Plugin_and_Updates
Description: A brief description of the Plugin.
Version: The Plugin's Version Number, e.g.: 1.0
Author: Name Of The Plugin Author
Author URI: http://URI_Of_The_Plugin_Author
License: A "Slug" license name e.g. GPL2
*/

Nous devons donc modifier ce code pour l’adapter à nos besoins:

<?php
/*
Plugin Name: My Widget Plugin
Plugin URI: http://www.wpexplorer.com/create-widget-plugin-wordpress/
Description: This plugin adds a custom widget.
Version: 1.0
Author: AJ Clarke
Author URI: http://www.wpexplorer.com/create-widget-plugin-wordpress/
License: GPL2
*/

Enregistrez votre fichier. En ajoutant uniquement du code à notre fichier widget-plugin.php, nous avons créé un plugin! Eh bien, pour l’instant, le plugin ne fait rien, mais WordPress le reconnaît. Pour vous assurer que c’est bien le cas, allez dans votre administration, et allez dans le menu «Plugins». Si votre plugin apparaît dans la liste des plugins, vous êtes bon, sinon assurez-vous d’avoir suivi mes instructions et réessayez. Vous pouvez maintenant activer le plugin.

Étape 2: créer le widget

Nous allons maintenant créer le widget lui-même. Ce widget sera une classe PHP étendant la classe WordPress principale WP_Widget. En gros, notre widget sera défini de cette façon:

// The widget class
class My_Custom_Widget extends WP_Widget {

    // Main constructor
    public function __construct() {
        /* ... */
    }

    // The widget form (for the backend )
    public function form( $instance ) { 
        /* ... */
    }

    // Update widget settings
    public function update( $new_instance, $old_instance ) {
        /* ... */
    }

    // Display the widget
    public function widget( $args, $instance ) {
        /* ... */
    }

}

// Register the widget
function my_register_custom_widget() {
    register_widget( 'My_Custom_Widget' );
}
add_action( 'widgets_init', 'my_register_custom_widget' );

Ce code donne à WordPress toutes les informations dont le système a besoin pour pouvoir utiliser le widget:

  1. le constructeur, pour lancer le widget
  2. le fonction form () pour créer le formulaire widget dans l’administration
  3. le fonction update (), pour enregistrer les données du widget lors de l’édition
  4. Et le fonction widget () pour afficher le contenu du widget sur le front-end

1 – Le constructeur

Le constructeur est la partie du code qui définit le nom du widget et les principaux arguments, voici un exemple de ce à quoi il peut ressembler.

// Main constructor
public function __construct() {
    parent::__construct(
        'my_custom_widget',
        __( 'My Custom Widget', 'text_domain' ),
        array(
            'customize_selective_refresh' => true,
        )
    );
}

Veuillez ne pas utiliser __ () autour du nom du widget, cette fonction est utilisée par WordPress pour la traduction. Je vous recommande vraiment de toujours utiliser ces fonctions, pour rendre votre thème entièrement traduisible. Et l’utilisation du paramètre ‘personnaliser_selective_refresh’ permet d’actualiser le widget sous Apparence> Personnaliser lors de la modification du widget, au lieu d’actualiser la page entière, seul le widget est actualisé lors des modifications.

2 – La fonction form ()

Cette fonction est celle qui crée les paramètres du formulaire de widget dans la zone d’administration de WordPress (soit sous Apparence> Widgets ou Apparence> Personnaliser> Widgets). C’est là que vous entrerez vos données à afficher sur le site Web. Je vais donc vous expliquer comment vous pouvez ajouter des champs de texte, des zones de texte, des cases de sélection et des cases à cocher aux paramètres de formulaire de votre widget.

// The widget form (for the backend )
public function form( $instance ) {

    // Set widget defaults
    $defaults = array(
        'title'    => '',
        'text'     => '',
        'textarea' => '',
        'checkbox' => '',
        'select'   => '',
    );
    
    // Parse current settings with defaults
    extract( wp_parse_args( ( array ) $instance, $defaults ) ); ?>

    <?php // Widget Title ?>
    <p>
        <label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php _e( 'Widget Title', 'text_domain' ); ?></label>
        <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
    </p>

    <?php // Text Field ?>
    <p>
        <label for="<?php echo esc_attr( $this->get_field_id( 'text' ) ); ?>"><?php _e( 'Text:', 'text_domain' ); ?></label>
        <input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'text' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'text' ) ); ?>" type="text" value="<?php echo esc_attr( $text ); ?>" />
    </p>

    <?php // Textarea Field ?>
    <p>
        <label for="<?php echo esc_attr( $this->get_field_id( 'textarea' ) ); ?>"><?php _e( 'Textarea:', 'text_domain' ); ?></label>
        <textarea class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'textarea' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'textarea' ) ); ?>"><?php echo wp_kses_post( $textarea ); ?></textarea>
    </p>

    <?php // Checkbox ?>
    <p>
        <input id="<?php echo esc_attr( $this->get_field_id( 'checkbox' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'checkbox' ) ); ?>" type="checkbox" value="1" <?php checked( '1', $checkbox ); ?> />
        <label for="<?php echo esc_attr( $this->get_field_id( 'checkbox' ) ); ?>"><?php _e( 'Checkbox', 'text_domain' ); ?></label>
    </p>

    <?php // Dropdown ?>
    <p>
        <label for="<?php echo $this->get_field_id( 'select' ); ?>"><?php _e( 'Select', 'text_domain' ); ?></label>
        <select name="<?php echo $this->get_field_name( 'select' ); ?>" id="<?php echo $this->get_field_id( 'select' ); ?>" class="widefat">
        <?php
        // Your options array
        $options = array(
            ''        => __( 'Select', 'text_domain' ),
            'option_1' => __( 'Option 1', 'text_domain' ),
            'option_2' => __( 'Option 2', 'text_domain' ),
            'option_3' => __( 'Option 3', 'text_domain' ),
        );

        // Loop through options and add each one to the select dropdown
        foreach ( $options as $key => $name ) {
            echo '<option value="' . esc_attr( $key ) . '" id="' . esc_attr( $key ) . '" '. selected( $select, $key, false ) . '>'. $name . '</option>';

        } ?>
        </select>
    </p>

<?php }

Ce code ajoute simplement 5 champs au widget (Titre, texte, zone de texte, sélection et case à cocher). Donc, vous définissez d’abord les valeurs par défaut de votre widget, puis la fonction suivante analyse les paramètres actuels définis / enregistrés pour votre widget avec les valeurs par défaut (donc tous les paramètres qui n’existent pas reviendraient à la valeur par défaut, comme lorsque vous ajoutez votre barre latérale). Et le dernier est le html pour chaque champ. Notez l’utilisation de esc_attr () lors de l’ajout des champs de formulaire, ceci est fait pour des raisons de sécurité. Chaque fois que vous faites écho à une variable définie par l’utilisateur sur votre site, vous devez vous assurer qu’elle est d’abord nettoyée.

3 – La fonction update ()

La fonction update () est vraiment simple. Comme les développeurs principaux de WordPress ont ajouté une API de widgets vraiment puissante, il suffit d’ajouter ce code pour mettre à jour chaque champ:

// Update widget settings
public function update( $new_instance, $old_instance ) {
    $instance = $old_instance;
    $instance['title']    = isset( $new_instance['title'] ) ? wp_strip_all_tags( $new_instance['title'] ) : '';
    $instance['text']     = isset( $new_instance['text'] ) ? wp_strip_all_tags( $new_instance['text'] ) : '';
    $instance['textarea'] = isset( $new_instance['textarea'] ) ? wp_kses_post( $new_instance['textarea'] ) : '';
    $instance['checkbox'] = isset( $new_instance['checkbox'] ) ? 1 : false;
    $instance['select']   = isset( $new_instance['select'] ) ? wp_strip_all_tags( $new_instance['select'] ) : '';
    return $instance;
}

Comme vous pouvez le voir, tout ce que nous avons à faire est de vérifier chaque paramètre et s’il n’est pas vide, enregistrez-le dans la base de données. Remarquez l’utilisation des fonctions wp_strip_all_tags () et wp_kses_post (), elles sont utilisées pour nettoyer les données avant qu’elles ne soient ajoutées à la base de données. Chaque fois que vous insérez un contenu soumis par un utilisateur dans une base de données, vous devez vous assurer qu’il ne contient aucun code malveillant. La première fonction wp_strip_all_tags supprime tout sauf le texte de base afin que vous puissiez l’utiliser pour tous les champs où la valeur finale est une chaîne et la deuxième fonction wp_kses_post () est la même fonction utilisée pour le contenu de l’article et elle supprime toutes les balises en plus du HTML de base comme les liens , travées, divs, images, etc.

4 – La fonction widget ()

La fonction widget () est celle qui affichera le contenu sur le site Web. C’est ce que verront vos visiteurs. Cette fonction peut être personnalisée pour inclure des classes CSS et des balises spécifiques pour correspondre parfaitement à l’affichage de votre thème. Voici le code (veuillez noter que ce code peut être modifié facilement pour répondre à vos besoins):

// Display the widget
public function widget( $args, $instance ) {

    extract( $args );

    // Check the widget options
    $title    = isset( $instance['title'] ) ? apply_filters( 'widget_title', $instance['title'] ) : '';
    $text     = isset( $instance['text'] ) ? $instance['text'] : '';
    $textarea = isset( $instance['textarea'] ) ?$instance['textarea'] : '';
    $select   = isset( $instance['select'] ) ? $instance['select'] : '';
    $checkbox = ! empty( $instance['checkbox'] ) ? $instance['checkbox'] : false;

    // WordPress core before_widget hook (always include )
    echo $before_widget;

   // Display the widget
   echo '<div class="widget-text wp_widget_plugin_box">';

        // Display widget title if defined
        if ( $title ) {
            echo $before_title . $title . $after_title;
        }

        // Display text field
        if ( $text ) {
            echo '<p>' . $text . '</p>';
        }

        // Display textarea field
        if ( $textarea ) {
            echo '<p>' . $textarea . '</p>';
        }

        // Display select field
        if ( $select ) {
            echo '<p>' . $select . '</p>';
        }

        // Display something if checkbox is true
        if ( $checkbox ) {
            echo '<p>Something awesome</p>';
        }

    echo '</div>';

    // WordPress core after_widget hook (always include )
    echo $after_widget;

}

Ce code n’est pas complexe, tout ce dont vous avez besoin est de vérifier si une variable est définie, si vous ne le faites pas et si vous souhaitez l’imprimer, vous obtiendrez un message d’erreur.

Le code complet du plugin Widget

Maintenant, si vous avez suivi correctement, votre plugin devrait maintenant être entièrement fonctionnel et vous pouvez le personnaliser en fonction de vos besoins. Si vous n’avez pas suivi le guide ou si vous souhaitez vérifier le code, vous pouvez visiter la page Github pour afficher le code complet.

Voir le code complet sur Github

Conclusion

Nous avons vu que créer un widget à l’intérieur d’un plugin est très intéressant, maintenant vous devez savoir créer un plugin simple contenant un widget avec différents types de champs et vous avez appris à aller un peu plus loin en utilisant des techniques avancées pour personnaliser le widget. Félicitations, vous avez fait un travail incroyable!

Share: