Widget

Un widget permet d'ajouter du contenu dans des zones spécifiques qui dépendent de votre thème. Dans le menu Apparence, le menu Widgets permet d'accéder aux widgets de votre Wordpress.

Widget

https://developer.wordpress.org/themes/functionality/widgets/

MéthodeClass WP_Widget

On crée un widget en étendant la classe WP_Widget.

1
class VV_Widget extends WP_Widget {
2
3
    public function __construct() {
4
        // construction de l'instance
5
    }
6
7
    public function widget( $args, $instance ) {
8
        // affichage du widget
9
    }
10
11
    public function form( $instance ) {
12
        // formulaire du widget
13
    }
14
15
    public function update( $new_instance, $old_instance ) {
16
        // gestion des données du formulaire
17
    }
18
}

Méthode__construct()

Le constructeur permet d'initialiser nos instances :

1
function __construct()
2
{
3
  parent::__construct(
4
               'idWidget',
5
               'mon Widget',
6
               array('description' => "creation d'un Widget")
7
  );
8
}

Un appel au constructeur du parent WP_Widget est lancé.

1
WP_Widget::__construct($id, $nom, $options, $controle)

$id : identifiant de votre widget. Il doit être unique.

$nom : nom de votre widget qui sera affiché sur la page de configuration.

$options : tableau des options de votre widget.

$controle : tableau d'options de contrôle de votre widget.

Toutes ces paramètres sont optionnels.

Méthodeform($instance)

La méthode form permet de décrire le formulaire de votre widget.

$instance : représente le tableau des valeurs envoyé par votre formulaire.

1
public function form($instance)
2
{
3
  $texte = $instance['texte'] ?? '';
4
?>
5
  <p>
6
    <label for="<?php echo $this->get_field_id('texte'); ?>">Texte</label>
7
    <input class="widefat"
8
           id="<?php echo $this->get_field_id('texte'); ?>"
9
           name="<?php echo $this->get_field_name('texte'); ?>"
10
           type="text"
11
           value="<?php echo esc_attr($texte); ?>"/>
12
  </p>
13
<?php
14
}
Widget

Mon formulaire est constitué d'un champ texte :

  • La variable $texte reçoit le contenu précédent du champ texte.

  • get_field_id('texte') retourne l'identifiant du champ texte.

  • get_field_name('texte') retourne le nom du champ texte.

  • esc_attr($texte) échappe les caractères HTML de la variable $texte.

Méthodeupdate($new_instance, $old_instance)

La méthode update permet de traiter les données du formulaire pour d'éventuelles modifications ou corrections.

$new_instance : contient les nouvelles données du formulaire.

$old_instance : contient les anciennes données du formulaire.

La fonction doit retourner les données traitées sous forme de tableau associatif.

1
public function update($new_instance, $old_instance)
2
{
3
  $instance['texte'] = $new_instance['texte'] ?? '';
4
  $instance['texte'] = ucfirst($instance['texte']);
5
  return $instance;
6
}

Dans l'exemple :

  • La variable$instance['texte'] reçoit le contenu $new_instance['texte'] si elle existe sinon une chaîne vide.

  • On met une majuscule à la première lettre de texte avec ucfirst().

  • Le tableau $instance est retourné.

Méthodewidget($args, $instance)

La méthode widget génère le HTML affiché dans vos pages.

$args : c'est un tableau associatif qui contient des morceaux de code HTML dépendant de votre thème.

$instance : contient les données du formulaire.

1
public function widget($args, $instance)
2
{
3
  echo $args['before_widget'];
4
5
  echo $args['before_title'] . "Exemple de Widget" . $args['after_title'];
6
  
7
  echo $instance['texte'] ?? '';
8
9
  echo $args['after_widget'];
10
}
Affichage du widget
MéthodeDans quel fichier ?
Le code doit être ajouté à un fichier lancé par wordpress :
  • Dans le fichier functions.php de votre thème. Le risque est que si vous changez de thème, vous perdez votre widget.
  • Dans une extension.
Ajoutez le dossier vv-widget dans le dossier plugins.
Ajoutez le fichier vv-widget.php
1
<?php
2
3
/**
4
 * Plugin Name: Exemple Widget
5
 * Description: permet de découvrir la création de widget.
6
 * Version: 1.0.0
7
 * Author: Moi
8
 * License: GPL-3.0
9
 */
10
if (!defined('ABSPATH')) {
11
    exit;
12
}
13
14
if (!class_exists('VV_widget')) {
15
    class VV_widget extends WP_Widget
16
    {
17
18
        function __construct()
19
        {
20
            parent::__construct('idVVWidget', 'mon Widget', array('description' => "creation d'un Widget"));
21
        }
22
23
        // Contenu affiché sur le site
24
        public function widget($args, $instance)
25
        {
26
            echo $args['before_widget'];
27
28
            echo $args['before_title'] . "Exemple de Widget" . $args['after_title'];
29
30
            echo $instance['texte'] ?? '';
31
32
            echo $args['after_widget'];
33
        }
34
35
        // formulaire dans l'administration
36
        public function form($instance)
37
        {
38
            $texte = $instance['texte'] ?? '';
39
            ?>
40
            <p>
41
                <label for="<?php
42
                echo $this->get_field_id('texte'); ?>">Texte</label>
43
                <input class="widefat"
44
                       id="<?php
45
                       echo $this->get_field_id('texte'); ?>"
46
                       name="<?php
47
                       echo $this->get_field_name('texte'); ?>"
48
                       type="text"
49
                       value="<?php
50
                       echo esc_attr($texte); ?>"/>
51
            </p>
52
            <?php
53
        }
54
55
        // action sur les valeurs du formulaire
56
        public function update($new_instance, $old_instance)
57
        {
58
            $instance['texte'] = $new_instance['texte'] ?? '';
59
            $instance['texte'] = ucfirst($instance['texte']);
60
            return $instance;
61
        }
62
    }
63
64
  // ajout de notre widget à la liste des widgets
65
  function vv_load_widget()
66
  {
67
      register_widget('VV_widget');
68
  }
69
70
  add_action('widgets_init', 'vv_load_widget');
71
}
72
register_widget : cette fonction permet d'ajouter votre widget à la liste des widgets.
Pour que votre widget soit effectif, il faut que cette fonction soit chargée à l'initialisation de tous les widgets de wordpress.
Pour cela, on va utiliser le Hook widgets_init auquel on va ajouter une fonction de rappel qui ajoutera notre widget.
function vv_load_widget : notre fonction de rappel
add_action('widgets_init', 'vv_load_widget') : ajout au Hook
MéthodeApplication
  • Activez l'extension Exemple Widget.
  • Dans Apparence->Widgets déplacez "mon Widget" dans une barre latérale.
  • Remplissez le formulaire du widget, enregistrez.
  • Allez sur votre site et vérifiez les barres latérales.