Tutoriel : création d'une widget Wordpress

Nous allons maintenant créer une widget sous forme de plugin. Les widgets wordpress permettent d'insérer des parties de code facilement sous forme de bloc pour l'utilisateur final. Elles peuvent être ensuite ajoutées dans les barres d'outils prédéfinies selon les thèmes que vous utilisez.

A partir de notre plugin Wordpress wp_jschat

Vous l'avez compris, notre chat sera effectif pour les utilisateurs en partie sous forme de widget wordpress.

Dans notre classe principale wp_jschat, créons la fonction d'affichage de la widget :

function widget_myJsChat($args)
{
    extract($args);
    print $before_widget;
    print $before_title;
    _e('Chat', 'wp_jschat');
    print $after_title;
    include('php/widget.php');
    print $after_widget;
}

Cette fonction est ce que nous allons montrer à l'écran des utilisateurs lorsque nous afficherons notre widget dans l'une des barres d'outils. Cette widget est optimisée pour un meilleur affichage dans les différents thèmes, car elle respecte la problématique de compatibilité des thèmes. Tout le monde n'utilise pas forcément le même thème, à cet effet, Wordpress a prévu un système en ce sens et nous l'exploitons :

L'argument passé à la fonction widget_myJsChat() contient donc les informations nécessaires à propos du HTML à générer (balises HTML, CSS etc.), c'est l'objet des variables extraites $before_widget $before_title, $after_title et $after_widget. Ainsi, si le thème que vous utilisez est codé correctement, vous ne risquez pas d'obtenir un mauvais affichage.

Nous effectuons aussi l'inclusion du fichier qui contient la widget, que nous plaçons dans notre dossier php :

<form class="wp_jschat_widget_form" action="<?php bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php" method="post">
    <div class="wp_jschat_widget_text">
        <?php for ($i = count($messages) - 1; $i >= 0; $i--): ?>
            <p><span class='author'><u><?php print $messages[$i]->pseudo; ?></u> : <?php print strToSmileys($messages[$i]->message); ?></span></p>
        <?php endfor; ?>
    </div>
    <div class="wp_jschat_smileys">
        <a href="#" class="wp_jschat_smile"><img src="<?php bloginfo('wpurl'); ?>/wp-includes/images/smilies/icon_razz.gif" alt="razz" /></a>
        <a href="#" class="wp_jschat_smile"><img src="<?php bloginfo('wpurl'); ?>/wp-includes/images/smilies/icon_lol.gif" alt="lol" /></a>
        <a href="#" class="wp_jschat_smile"><img src="<?php bloginfo('wpurl'); ?>/wp-includes/images/smilies/icon_mrgreen.gif" alt="mrgreen" /></a>
        <a href="#" class="wp_jschat_smile"><img src="<?php bloginfo('wpurl'); ?>/wp-includes/images/smilies/icon_question.gif" alt="question" /></a>
        <a href="#" class="wp_jschat_smile"><img src="<?php bloginfo('wpurl'); ?>/wp-includes/images/smilies/icon_rolleyes.gif" alt="rolleyes" /></a>
        <a href="#" class="wp_jschat_smile"><img src="<?php bloginfo('wpurl'); ?>/wp-includes/images/smilies/icon_sad.gif" alt="sad" /></a>
        <a href="#" class="wp_jschat_smile"><img src="<?php bloginfo('wpurl'); ?>/wp-includes/images/smilies/icon_wink.gif" alt="wink" /></a>
        <a href="#" class="wp_jschat_smile"><img src="<?php bloginfo('wpurl'); ?>/wp-includes/images/smilies/icon_surprised.gif" alt="surprised" /></a>
        <a href="#" class="wp_jschat_smile"><img src="<?php bloginfo('wpurl'); ?>/wp-includes/images/smilies/icon_idea.gif" alt="idea" /></a>
    </div>
    <div class="form">
        <input type="hidden" class="hasSmileys" value="<?php print $enable_smileys; ?>" />
        <input type="hidden" class="blog_url" value="<?php bloginfo('wpurl'); ?>" />
        <input type="hidden" class="wp_jschat_last_date" name="wp_jschat_last_date" value="<?php print current_time('mysql'); ?>" />
        <input type="hidden" class="wp_jschat_canal" name="wp_jschat_canal" value="1" />
        <input type="text" class="wp_jschat_text" name="wp_jschat_text" style="width:150px;" />
        <input type="submit" name="wp_jschat_submit" value="ok" />
        <p><a href="#" class="wp_jschat_widget_refresh"><?php _e('Rafraîchir', 'wpjschat'); ?></a></p>
    </div>
</form>

Fichier php/widget.php

Si vous n'êtes pas familiarisé avec la structure du plugin, reportez-vous à la structure du plugin wordpress.

Enregistrement du plugin wordpress

Nous devons maintenant signaler à wordpress qu'il existe une nouvelle widget, il faut donc l'enregistrer. Nous appellerons cette widget 'Chat'. Créons la fonction d'initialisation de la widget dans notre classe principale :

function initWidget()
{
     register_sidebar_widget(__('Chat','wpjschat'), array(&$this, 'widget_myJsChat'));
}

Cette fonction enregistre une nouvelle widget dans le système, voici la description de la méthode register_sidebar_widget() :

register_sidebar_widget( $name, $function);

• $name : le nom de la widget,
• $function : la fonction à appeler,

Nous devons également ajouter une action et appeler cette initialisation une fois que notre plugin est chargé par le système :

add_action('plugins_loaded', array(&$inst_wp_jschat, 'initWidget'));

Nous utilisons l'accroche 'plugins_loaded', et appelons notre méthode initWidget() sur l'instance de la classe wp_jschat.
Si vous n'êtes pas encore familiarisé avec les actions, reportez vous au cours sur l'actions wordpress.