Créer ses widgets WordPress

Créer ses widgets WordPress

Tech web
Cloche d'abonnement aux notifications | |
  • Recevoir les notifications
  1. Qu'est ce qu'un widget WordPress ?
  2. Comment créer une zone à widgets ?
  3. Comment créer un widget personnalisé ?
    1. Mon premier widget statique
    2. Mon premier widget dynamique
  4. Désactiver les widgets par défaut
  5. Sources

1 - Qu’est-ce qu’un widget WordPress ?

Un widget est un petit élément vous permettant d’afficher du texte, des images ou d’autres éléments dynamiques ou statiques sur plusieurs pages. Les widgets peuvent être gérés en un seul endroit, à savoir via le panneau d’administration WordPress, en cliquant sur Apparence puis Widgets.

Depuis ce panneau, vous pouvez ajouter des widgets dans des zones prévues à cet effet. Pour ce faire, il suffit de glisser le widget que vous désirez ajouter dans la zone à widgets adéquate (colonne de droite). Ces zones sont à placer directement dans le thème WordPress.

Sur ce panneau, vous pouvez placer des widgets dans des zones prévues à cet effet. Pour ce faire, il suffit de glisser le widget que vous désirez ajouter dans la zone à widgets adéquate (colonne de droite). Un widget placé dans la zone “colonne de droite” s’affichera donc à droite sur votre site internet.

Un widget peut avoir plusieurs paramètres, comme un titre, une image, etc. Les possibilités sont infinies et WordPress propose de base plusieurs types de widget différents.

La plupart des thèmes proposent différentes zones par défaut, dans la sidebar de la page listant les articles par exemple, ou encore dans le footer. Mais si vous désirez avoir une parfaite maîtrise de ces zones, vous pouvez l’avoir ! Et sans y passer des heures :) Rendez-vous au chapitre suivant :)


2 - Comment créer une zone à widgets ?

Nous allons voir comment ajouter une zone à widgets personnalisée. Pour ce faire, nous allons devoir utiliser la fonction WordPress register_sidebar(). Dans functions.php, ajoutez-y le code suivant :

add_action( 'widgets_init', 'nouvelle_zone_widgets_init' );

function nouvelle_zone_widgets_init() {
    register_sidebar( array(
        'name'          => 'Nouvelle zone à Widgets',
        'id'            => 'nouvelle_zone',
    ) );
}

Dans le code ci-dessus, nous avons utilisé le strict minimum, à savoir :

  • name : Le texte qui va s’afficher dans le backend
  • id : L’identification de la zone (l’id est utile pour appeler la zone dans une page spécifique par exemple)

Vous pouvez y ajouter d’autres propriétés fortes utiles. Reprenons notre bout de code et ajoutons lui quelques lignes.

add_action( 'widgets_init', 'nouvelle_zone_widgets_init' );

function nouvelle_zone_widgets_init() {

    register_sidebar( array(
        'name'          => 'Nouvelle zone à Widgets',
        'id'            => 'nouvelle_zone',
        'before_widget' => '<div>',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="rounded">',
        'after_title'   => '</h2>',
        'class'         => 'nom_de_la_classe',
    ) );
}

En plus de définir les deux propriétés obligatoires (name et id), nous avons ajouté :

  • before_widget : Le code HTML à placer avant chaque widget présent dans cette zone
  • after_widget : Le code HTML à placer après chaque widget présent dans cette zone
  • before_title : Le code HTML à placer avant chaque titre de widget présent dans cette zone
  • after_title : Le code HTML à placer après chaque titre de widget présent dans cette zone
  • class : Le nom de la classe de la zone à widgets

Notre zone à widgets est maintenant prête ! Allez vérifier par vous-même ! Dans votre panneau d’administration Apparence -> Widgets, vous devriez apercevoir la nouvelle zone. Vous pouvez y glisser des widgets à votre guise :) Mais, ils s’affichent où ces widgets ajoutés à cette nouvelle zone ? Pour l’instant nulle part :( Nous allons corriger cette injustice de suite !

nouvelle-zone-widgets-wordpress


Pour afficher la zone à widgets, et surtout les widgets qui ont été placés dedans, rendez-vous dans le fichier s’occupant d’afficher l’endroit où vous désirez y ajouter les widgets (par exemple un template d’un certain type de page, footer.php, un single d’un type de post, etc.), et ajoutez-y la fonction dynamic_sidebar() en spécifiant comme propriété l’id de la zone (à savoir "nouvelle_zone" dans notre exemple).

<?php dynamic_sidebar( 'nouvelle_zone' ); ?>

Et voilà, le tour est joué ! Vous pouvez bien évidemment entourer la fonction par du code HTML et y ajouter du CSS pour rendre le tout plus visuel :)


3 - Comment créer un widget personnalisé ?

De base, WordPress nous propose quelques widgets par défaut, mais il peut être intéressant de créer ses propres widgets personnalisées. Ceux-ci peuvent être créés directement dans functions.php, mais je vous déconseille d’agir ainsi ! Pour avoir quelque chose de plus propre, nous allons créer un plugin qui aura pour but d’ajouter nos widgets fait maison.

Pour créer le plugin, rendez-vous dans le dossier wp-content/plugins, puis ajoutez-y un répertoire que nous allons appeler mes-widgets. À l’intérieur de ce dossier, nous allons créer un fichier index.php contenant le code suivant :

<?php
/*
  Plugin Name: mes widgets
  Description: Plugin fournissant des widgets
  Author: karac
  Version: 1.0.0
 */

Maintenant que votre plugin est créé, vous pouvez l’activer dans votre panneau d’administration. Pour cela, rendez-vous dans l’onglet Extensions, puis cherchez votre nouveau plugin et cliquez sur Activer.

plugins-mes-widgets

 

Passons aux choses sérieuses et regardons comment ajouter dans ce plugin des widgets custom. Pour l’exercice, nous allons créer deux widgets différents, un statique et un dynamique.

 

3.1 - Mon premier widget statique

Dans le fichier index.php du plugin mes-widgets, nous allons commencer par y ajouter l’action, puis appeler une fonction utilisant register_widget, qui comme son nom l’indique, permet d’enregistrer un widget :

add_action( 'widgets_init', 'register_mon_premier_widget_statique' );

function register_mon_premier_widget_statique() {
    register_widget( 'mon_premier_widget_statique' );
}

Ensuite, nous allons créer une classe que nous allons appeler mon_premier_widget_statique, c’est dans celle-ci que nous y mettrons le reste du code:

class mon_premier_widget_statique extends WP_Widget {
}

Dans la classe, ajoutons le constructeur :

function __construct() {
        parent::__construct(
            'mon_premier_widget_statique',
            esc_html__( 'Mon premier widget statique', 'textdomain' ),
            array( 'description' => esc_html__( 'Affiche karac', 'textdomain' ), )
        );
}

Nous avons défini le titre du widget ("Mon premier widget statique"), ainsi que la description de celui-ci ("Affiche karac"). Ces deux informations s’afficheront que dans le panneau d’administration. Continuons.

Créons une fonction public widget() et ajoutons-y le code suivant :

public function widget( $args, $instance ) {
        echo $args['before_widget'];

        echo "<h2>karac</h2>";
        
        echo $args['after_widget'];
}

Voilà ! Notre Widget va maintenant afficher "karac" dans un titre 2 ! Depuis le panneau d’administration, rendez-vous dans Apparence -> Widgets et glissez ce nouveau widget dans la zone à widgets créée précédemment.

zone-avec-widgets-wordpress

 

Maintenant, si vous vous dirigez dans le frontend, à l’endroit où vous avez décidé d’afficher la zone à widgets "Nouvelle zone à Widgets", vous devriez voir apparaître le titre "karac" :)

Voici le code complet de notre petit widget statique :

// Mon premier widget statique
class mon_premier_widget_statique extends WP_Widget {

    function __construct() {
        parent::__construct(
            'mon_premier_widget_statique',
            esc_html__( 'Mon premier widget statique', 'textdomain' ),
            array( 'description' => esc_html__( 'Affiche karac', 'textdomain' ), )
        );
    }

    public function widget( $args, $instance ) {
        echo $args['before_widget'];

        echo "<h2>karac</h2>";
        
        echo $args['after_widget'];
    }
}

add_action( 'widgets_init', 'register_mon_premier_widget_statique' );

function register_mon_premier_widget_statique() {
    register_widget( 'mon_premier_widget_statique' );
}

Vous en conviendrez que ce widget n’est pas très utile … Passons maintenant aux choses sérieuses, à savoir les widgets dynamiques !

 

3.2 - Mon premier widget dynamique

Pour ce second exercice, nous allons créer un widget qui affiche les coordonnées de l’entreprise. Celles-ci devant être affichées à plusieurs endroits, nous estimons qu’il serait judicieux d’en créer un widget, afin d’être en mesure de pouvoir les modifier partout à partir d’un seul endroit.

Ajoutons ce deuxième widget à la suite du premier, à savoir dans le fichier index.php du plugin mes-widgets. Voici le code que je vous propose :

// Mon premier widget dynamique
class mon_premier_widget_dynamique extends WP_Widget {

    function __construct() {
        parent::__construct(
            'mon_premier_widget_dynamique',
            esc_html__( 'Mon premier widget dynamique', 'textdomain' ),
            array( 'description' => esc_html__( 'Affiche les coordonnées', 'textdomain' ), )
        );
    }

    private $widget_fields = array(
        array(
            'label' => 'Nom',
            'id' => 'nom_text',
            'type' => 'text',
        ),
        array(
            'label' => 'Adresse',
            'id' => 'adresse_text',
            'type' => 'text',
        ),
        array(
            'label' => 'Email',
            'id' => 'email_email',
            'type' => 'email',
        ),
        array(
            'label' => 'Téléphone',
            'id' => 'tlphone_tel',
            'type' => 'tel',
        ),
    );

    public function widget( $args, $instance ) {
        echo $args['before_widget'];

        // Output generated fields
        echo '<p>'.$instance['nom_text'].'</p>';
        echo '<p>'.$instance['adresse_text'].'</p>';
        echo '<p>'.$instance['email_email'].'</p>';
        echo '<p>'.$instance['tlphone_tel'].'</p>';
        
        echo $args['after_widget'];
    }

    public function field_generator( $instance ) {
        $output = '';
        foreach ( $this->widget_fields as $widget_field ) {
            $default = '';
            if ( isset($widget_field['default']) ) {
                $default = $widget_field['default'];
            }
            $widget_value = ! empty( $instance[$widget_field['id']] ) ? $instance[$widget_field['id']] : esc_html__( $default, 'textdomain' );
            switch ( $widget_field['type'] ) {
                default:
                    $output .= '<p>';
                    $output .= '<label for="'.esc_attr( $this->get_field_id( $widget_field['id'] ) ).'">'.esc_attr( $widget_field['label'], 'textdomain' ).':</label> ';
                    $output .= '<input class="widefat" id="'.esc_attr( $this->get_field_id( $widget_field['id'] ) ).'" name="'.esc_attr( $this->get_field_name( $widget_field['id'] ) ).'" type="'.$widget_field['type'].'" value="'.esc_attr( $widget_value ).'">';
                    $output .= '</p>';
            }
        }
        echo $output;
    }

    public function form( $instance ) {
        $this->field_generator( $instance );
    }

    public function update( $new_instance, $old_instance ) {
        $instance = array();
        foreach ( $this->widget_fields as $widget_field ) {
            switch ( $widget_field['type'] ) {
                default:
                    $instance[$widget_field['id']] = ( ! empty( $new_instance[$widget_field['id']] ) ) ? strip_tags( $new_instance[$widget_field['id']] ) : '';
            }
        }
        return $instance;
    }
}

add_action( 'widgets_init', 'register_mon_premier_widget_dynamique' );

function register_mon_premier_widget_dynamique() {
    register_widget( 'mon_premier_widget_dynamique' );
}

Revenons un peu plus en détail sur le code ci-dessus. Contrairement au widget statique, nous avons ajouté un tableau contenant différents champs dynamiques. Dans la fonction widget(), nous affichons le contenu de ces champs. Les fonctions field_generator() et form() servent à afficher les champs dans le backend, tandis que la fonction update() permet de gérer l’update du contenu du widget.

Maintenant que votre widget dynamique est créé, il ne vous reste plus qu’à le glisser dans la zone à widgets désirée et remplir ses différents champs :)

widgets-dynamique

 

Si vous ne voulez pas utiliser les champs mais que vous préférez avoir quelque chose de plus automatique, libre à vous d’aller chercher vos différents types de posts et de les afficher dynamiquement au sein du widget :)

 

4 - Désactiver les widgets par défaut

À l’installation d’un site WordPress, plusieurs widgets sont ajoutés. Que ça soit dans un souci de confort pour l’éditeur du site ou de sûreté concernant la compatibilité avec le thème, désactiver ces widgets par défaut peut-être une bonne idée.

Pour cela, nous allons devoir ajouter une fonction dans functions.php de notre thème parent. Nous allons l’appeler remove_default_widgets :

add_action( 'widgets_init', 'remove_default_widgets' );
function remove_default_widgets() {
}

À l’intérieur de cette fonction remove_default_widgets(), il nous faudra appeler la fonction unregister_widget() en y spécifiant quel widget nous désirons supprimer.

Par exemple, si nous voulons enlever le widget du calendrier, nous ajouterons dans la fonction remove_default_widget() ce code-ci :

unregister_widget( 'WP_Widget_Calendar' );

La liste des différents widgets ajoutés par défaut par WordPress est consultable dans la documentation officielle de WordPress.

Voici le code complet qui vous permettra d’enlever tous les widgets par défaut (code à ajouter dans functions.php) :

add_action( 'widgets_init', 'remove_default_widgets' );

function remove_default_widgets() {
  unregister_widget( 'WP_Widget_Pages' ); // Le widget Pages
  unregister_widget( 'WP_Widget_Calendar' ); // Le widget Calendrier
  unregister_widget( 'WP_Widget_Archives' ); // Le widget Archives
  unregister_widget( 'WP_Widget_Links' ); // Le widget Liens
  unregister_widget( 'WP_Widget_Media_Audio' ); // Le widget Audio
  unregister_widget( 'WP_Widget_Media_Image' ); // Le widget Image
  unregister_widget( 'WP_Widget_Media_Video' ); // Le widget Vidéo
  unregister_widget( 'WP_Widget_Media_Gallery' ); // Le widget Galerie
  unregister_widget( 'WP_Widget_Meta' ); // Le widget Meta
  unregister_widget( 'WP_Widget_Search' ); // Le widget Rechercher
  unregister_widget( 'WP_Widget_Text' ); // Le widget de Texte
  unregister_widget( 'WP_Widget_Categories' ); // Le widget Catégories
  unregister_widget( 'WP_Widget_Recent_Posts' ); // Le widget Articles récents
  unregister_widget( 'WP_Widget_Recent_Comments' ); // Le widget Commentaires récents
  unregister_widget( 'WP_Widget_RSS' ); // Le widget RSS
  unregister_widget( 'WP_Widget_Tag_Cloud' ); // Le widget Nuage d'étiquettes
  unregister_widget( 'WP_Nav_Menu_Widget' ); // Le widget Menu personnalisé
  unregister_widget( 'WP_Widget_Custom_HTML' ); // Le widget HTML personnalisé
}

 

5 - Sources

Lire d'autres articles en rapport avec WordPress

 

Catégories :
Tech web

Tags :
PHP Wordpress

Vous avez aimé cet article ? Suivez-nous sur Facebook pour ne rien manquer !