Créer votre propre widget WordPress

Le squelette de tous widget WordPress

Il faut placer ce code dans un fichier dans le répertoire wp-content/plugins/.

Remarques :

  • Le nom du fichier n’importe que peu.
  • Même si ce n’est qu’un widget, ça reste un plugin. Il faut d’abord l’activer dans le panneau de liste des plugins avant de pouvoir l’ajouter dans une sidebar.
    <p>
        <label for="<?php echo $this->get_field_id('title'); ?>">:</label>
        <input value="<?php echo $title; ?>" type="text" class="widefat" name="<?php echo $this->get_field_name('title'); ?>" id="<?php echo $this->get_field_id('title'); ?>"></input>
    </p>
    <p>
        <label for="<?php echo $this->get_field_id('text'); ?>">:</label>
        <input value="<?php echo $text; ?>" type="text" class="widefat" name="<?php echo $this->get_field_name('text'); ?>" id="<?php echo $this->get_field_id('text'); ?>"></input>
    </p>

Fonnction form() À ne PAS renommer.

C’est le formulaire qui vous permet de paramétrer le widget depuis le panneau d’administration. Vous pouvez avoir autant de types d’entrée que vous voulez.

Notez que le titre du widget affiché dans la sidebar est lui aussi un paramètre.

Fonnction update() À ne PAS renommer.

Elle permet de mettre à jour et d’enregistrer les paramètres de votre widget. Le fonctionnement de cette fonction est assez simple à comprendre.

Fonction my_widget_widget() À renommer.

C’est le constructeur du widget. Il hérite de la classe WP_Widget qui s’occupe de presque tout pour nous.

Vous renommez le nom de cette fonction ainsi que le nom de la classe du widget, toujours en gardant le suffixe _widget.

Fonction widget() À ne PAS renommer.

Elle comporte la logique du widget ainsi que son template. C’est là que vous allez le plus travailler sur votre widget.

add_action()

Il faut modifier le paramètre de cette fonction avec le nom de la fonction constructrice de votre widget. Si vous ne le faites pas, tout votre WordPress sera cassé. Même le panneau d’admin le sera.

Un exemple de widget fonctionnel pour mieux comprendre

My networks

C’est un widget WordPress que j’ai bricolé pour ce blog. C’est exactement le même en haut. Vous pouvez l’utiliser comme bon vous semble.

Voici son code. Il vous permettra de mieux comprendre comment marche le code si haut. Un exemple vaut mille images, qui valent mille mots.

    <div>
        <a href="http://www.facebook.com/<?php echo $instance['facebook']; ?>" traget="_blank"><img src="http://www.dragnucs.com/wp-content/plugins/my-networks/facebook.png" title="facebook"></img> <strong></strong> likes.</a>
    </div>
    <div>
        <a href="http://www.facebook.com/<?php echo $instance['twitter']; ?>" traget="_blank"><img src="http://www.dragnucs.com/wp-content/plugins/my-networks/twitter.png" title="twitter"></img> <strong></strong> followers.</a>
    </div>

    <p>
        <label for="<?php echo $this->get_field_id('title'); ?>">:</label>
        <input value="<?php echo $title; ?>" type="text" class="widefat" name="<?php echo $this->get_field_name('title'); ?>" id="<?php echo $this->get_field_id('title'); ?>"></input>
    </p>
    <p>
        <label for="<?php echo $this->get_field_id('twitter'); ?>">:</label>
        <input value="<?php echo $twitter; ?>" type="text" class="widefat" name="<?php echo $this->get_field_name('twitter'); ?>" id="<?php echo $this->get_field_id('twitter'); ?>"></input>
    </p>
    <p>
        <label for="<?php echo $this->get_field_id('facebook'); ?>">:</label>
        <input value="<?php echo $facebook; ?>" type="text" class="widefat" name="<?php echo $this->get_field_name('facebook'); ?>" id="<?php echo $this->get_field_id('facebook'); ?>"></input>
    </p>