WordPress, Widget, Plugin – Créer un widget à l’aide d’un plugin pour votre thème dans WordPress
Lorsque on est responsable éditorial d’un site sous WordPress, on en vient vite à se demander pourquoi ne pas gérer l’intégralité du contenu sous la forme de widgets. En effet, cela présente l’avantage indéniable de pouvoir ajouter ou retirer à l’envie ces modules éditoriaux sans être dans l’obligation d’effectuer des acrobaties en terme de développement et/ou une gestion à la hache de publication/dépublication… Bref de se prendre la tête.
Il est évident que si en tant que chef de projet ou responsable éditorial, vous êtes amené(e) à briefer une équipe de développement autant annoncer la couleur en demandant de ne faire que des widgets et bien évidement un thème widgetisable pour WordPress. Cela vous évitera bien des déboires ultérieurement quand il s’agira de faire évoluer votre site ou simplement de l’administrer. Pourquoi ? Parce que sans même vous connaitre l’équipe de développement vous déteste déjà et une fois que vous serez vraiment haï(e), vous pourrez de toutes les façons allègrement couper le cordon avec l’équipe de développement.
On va donc voir comment sans trop se fatiguer faire un widget purement éditorial, un vrai truc de limace éditorial. Notre widget consistera à faire circuler au maximum le peu d’articles publiés. A chaque rechargement de page, via un système de tirage aléatoire, on affichera un article de WordPress toutes catégories confondues.
Dans le même temps, on va faire de ce widget, un plugin pour pouvoir assouplir au maximum la gestion éditoriale. Deux avantages à cela :
- Ne pas interférer avec le fichier
functions.phpdu thème. - Installer et retirer à loisir cette fonction éditorial sans endommager le site.
Notre plugin/widget a été installé et conçu sous WordPress FR Version 3.2.1.
Comment créer un widget et un plugin WordPress
La première chose à faire est de mettre ce commentaire qui vous permet d’initier la création de votre plugin. C’est la déclaration nécessaire à tout démarrage de plugin WordPress.
L’en-tête du plugin
/*
Plugin Name: Exemple Plugin Widget
Plugin URI: http://social.hecube.net/
Description: Un plugin pour créer un widget dans WordPress
Version: 1.0
Author: Hecube
Author URI: http://social.hecube.net/
License: GPLv2
*/ |
Notre plugin va s’appuyer sur la classe de WordPress pour faire des widgets. On doit donc étendre la classe native de WordPress WP_Widget avec notre porpre class he3_widgetexample_widget_my_info. C’est le sens de la ligne ci-dessous.
class he3_widgetexample_widget_my_info extends WP_Widget |
Pour peu que vous connaissiez un peu le php, vous retrouverez facilement parmi ce code du plugin. Notre plugin / widget a pour but d’afficher un profil composé des valeurs suivantes :
Le code complet de notre plugin he3widgetplugin.php
/*
Plugin Name: he3widgetplugin
Plugin URI: http://social.hecube.net/
Description: Un plugin pour créer un widget dans WordPress
Version: 1.0
Author: Hecube
Author URI: http://social.hecube.net/
License: GPLv2
*/
// use widgets_init action hook to execute custom function
add_action( 'widgets_init', 'he3_widgetexample_register_widgets' );
//register our widget
function he3_widgetexample_register_widgets() {
register_widget( 'he3_widgetexample_widget_my_info' );
}
//he3_widgetexample_widget_my_info class
class he3_widgetexample_widget_my_info extends WP_Widget {
//process the new widget
function he3_widgetexample_widget_my_info() {
$widget_ops = array(
'classname' => 'he3_widgetexample_widget_class',
'description' => 'Mon profil.'
);
$this->WP_Widget( 'he3_widgetexample_widget_my_info', 'Mon Widget', $widget_ops );
}
//build the widget settings form
function form($instance) {
$defaults = array( 'title' => 'Mes infos', 'name' => '', 'firstname' => '', 'age' => '' );
$instance = wp_parse_args( (array) $instance, $defaults );
$title = $instance['title'];
$name = $instance['name'];
$firstname = $instance['firstname'];
$age = $instance['age'];
?>
<p>Titre : <input class="widefat" name="get_field_name( 'title' ); ?>" type="text" value="" /></p>
<p>Nom : <input class="widefat" name="get_field_name( 'name' ); ?>" type="text" value="" /></p>
<p>Prénom : <input class="widefat" name="get_field_name( 'firstname' ); ?>" type="text" value="" /></p>
<p>Age : <input class="widefat" name="get_field_name( 'age' ); ?>" type="text" value="" /></p>
<?php
}
//save the widget settings
function update($new_instance, $old_instance) {
$instance = $old_instance;
$instance['title'] = strip_tags( $new_instance['title'] );
$instance['name'] = strip_tags( $new_instance['name'] );
$instance['firstname'] = strip_tags( $new_instance['firstname'] );
$instance['age'] = strip_tags( $new_instance['age'] );
return $instance;
}
//display the widget
function widget($args, $instance) {
extract($args);
echo $before_widget;
$title = apply_filters( 'widget_title', $instance['title'] );
$name = empty( $instance['name'] ) ? ' ' : $instance['name'];
$firstname = empty( $instance['firstname'] ) ? ' ' : $instance['firstname'];
$age = empty( $instance['age'] ) ? ' ' : $instance['age'];
if ( !empty( $title ) ) { echo $before_title . $title . $after_title; };
echo '<p>Name : ' . $name . '</p>';
echo '<p>Firstname : ' . $firstname . '</p>';
echo '<p>Age : ' . $age . '</p>';
echo $after_widget;
}
} |
En savoir plus
- Codex – Template Tags/get posts
http://codex.wordpress.org/Template_Tags/get_posts - Create a WordPress Recent-Posts Widget
http://blue-anvil.com/archives/create-a-wordpress-recent-posts-widget/ - Codex – Function Reference/wp register sidebar widget
http://codex.wordpress.org/Function_Reference/wp_register_sidebar_widget - Codex – Function Reference/wp register widget control
http://codex.wordpress.org/Function_Reference/wp_register_widget_control
