Un précédent article, nous a montré qu’il était assez facile de rendre un thème compatible avec les widgets. Nous avons à notre disposition, un assez grand nombre de widgets disponibles, en plus de ceux présents en standard dans WordPress. Malgré cela, nous pouvons avoir besoin de développer les nôtres pour, par exemple, une meilleure intégration avec notre thème.
Voyons donc maintenant comment développer nos propres widgets

Le développement d’un widget s’effectue en trois étapes:

  1. Création de la fonction PHP qui affichera le widget,
  2. Création de la fonction PHP qui va prendre en charge le panneau de configuration du widget,
  3. Enregistrement des deux fonctions précédentes

Les widgets peuvent être embarqués dans un thème ou dans un plugin. Dans le premier cas, le code PHP doit être placé dans le fichier function.php du thème. Dans le second cas, les fonctions doivent figurer dans le fichier principal du plugin, ou dans un fichier appelé par ce dernier.

Création du widget lui-même

La structure est relativement simple. Lorsque WordPress veut afficher le widget, il utilise la fonction indiquée, en lui transmettant en argument, les options du type before_widget, after_widget… (vu dans l’article Themes et Widgets)
La fonction PHP prend donc la forme suivante:

1
2
3
4
5
6
7
8
9
10
11

function widget_[nom du widget]( $args ) {
	extract( $args );
	$options = get_option( 'widget_[nom du widget]' );
 
	echo $before_widget;
	echo $before_title . $options['title'] . $after_title;
 
	/* Partie principale du widget - Affichage */
 
	echo $after_widget;
}

Application: Affichage de liens RSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function widget_feeds( $args ) {
        $options = get_option('widget_feeds_options');
	extract($args);
	echo $before_widget;
        echo $before_title . $options['feed_title'] . $after_title;
?>
        <ul>
             <li><a href="<?php bloginfo('rss2_url') ?>">RSS for posts</a></li>
             <li><a href="<?php bloginfo('comments_rss2_url'); ?>">
                                    RSS for comments</a></li>
        </ul>
<?php
	echo $after_widget;
}

Création du panneau de configuration

Les fonctions définissant le comportement du panneau de configuration sont plus complexes. Il faut

  • Récupérer les options courantes du widget,
  • Récupérer les valeurs provenant du formulaire (dans le cas de l’appui sur le bouton ‘Modifier’),
  • Affichage du formulaire.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function widget_[nom du widget]_control( $args ) {
        $newoptions = $options = get_option( ... );
        if ( $_POST['submit'] ) {
	       /* Récupération des valeurs,
                    et initialisation de la variable new_options */
        }
        if ( $options != $newoptions ) {
            $options = $newoptions;
            update_option('widget_', $options);
        }
?>
    <label for="id du champ"> Titre du premier champ
        /* Champ du formulaire: balise input, select ... */
    </label>
 
    <label for="id du champ"> Titre du second champ
        /* Champ du formulaire: balise input, select ... */
    </label>
    <input id="id du champ" name="nom du champ" type="hidden" value="1" />

Application: suite de l’exemple précédent. Le panneau de contrôle va nous permettre de saisir le titre du widget.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function widget_feed_control( $args ) {
        $newoptions = $options = get_option('widget_feeds_options');
        if ( $_POST['submit'] ) {
	       $newoptions['feed_title'] = $_POST['feed_title'];
        }
        if ( $options != $newoptions ) {
            $options = $newoptions;
            update_option('widget_feeds_options', $options);
        }
?>
    <label for="feed_title">Title: 
           <input name="feed_title" id="feed_title" 
                      value="<?php echo $options['feed_title']; ?>" />
    </label>
    <input id="id du champ" name="nom du champ" type="hidden" value="1" />

Enregistrement des deux fonctions

Il ne reste donc plus qu’a indiquer à WordPress, l’existence de ces deux nouvelles fonctions. Cet enregistrement s’effectue grâce à deux fonctions: register_sidebar_widget et register_widget_control.

register_sidebar_widget( $name, $output_callback, $classname)

  • $name correspond à la fois au nom et à l’id (identifiant) du widget,
  • $output_callback permet d’indiquer la fonction PHP qui affichera le widget
  • $classname est le style appliqué au widget

register_widget_control($name, $control_callback, $width = '', $height = '')

  • $name correspond à la fois au nom et à l’id (identifiant) du widget,
  • $output_callback permet d’indiquer la fonction PHP qui affichera le panneau de configuration du widget
  • $width et height sont la largeur et hauteur du panneau de configuration.

Conclusion

Grâce à une structure assez ingénieuse, la conception de Widget est relativement facile. Elle demande cependant une certaine rigueur, pour éviter notamment, les conflits ou les interactions possibles entre widgets. Attention également à la « charge » que représente un widget dans l’affichage de vos pages: Plus il y a de widgets, plus la page sera longue à calculer. Il faut donc penser à bien optimiser le code ou se limiter à de simples affichages.