Grâce aux widgets il est possible d’afficher des informations ou des fonctionnalités à plusieurs endroits sur les pages de votre site WordPress.
Ces widgets, vous pouvez les créer et les personnaliser par vous-même et assez facilement !
Si les widgets proposés par votre thème et vos extensions WordPress ne vous suffisent pas, il sera alors nécessaire de créer manuellement vos propres widgets WordPress.
Dans cet article, vous apprendrez pas à pas comment intégrer un widget simple dans WordPress que vous aurez codé de A à Z sans l’aide d’extension.
Sommaire :
Déposez gratuitement votre projet sur Codeur.com, recevez une quinzaine de devis et sélectionnez le prestataire WordPress idéal.
Trouver un expert WordPress
Prérequis pour créer un widget WordPress personnalisé
Pour créer votre premier widget, il ne vous faudra que quelques connaissances de base avec WordPress et en PHP.
Il faudra tout de même comprendre les notions de code pour pouvoir développer son propre widget WordPress.
Pour ce tutoriel, le code du widget sera écrit dans le fichier « functions.php » du thème utilisé sur le site WordPress, cependant il est possible de l’implémenter à d’autres endroits.
Utiliser l’API Widget
En utilisant la documentation de l’API Widget et la classe PHP « WP_Widget » existante dans l’API Widget de WordPress, vous pourrez créer un widget personnalisé.
Parmi l’ensemble des fonctions proposées par l’API, 4 seront essentielles au fonctionnement d’un widget. Ces fonctions sont les suivantes :
- __construct(): c’est le constructeur d’un widget permettant de créer un nouvel objet « Widget »
- widget(): cette fonction définit le contenu en sortie d’un widget, celui affiché sur le site WordPress
- form(): similaire à la fonction « widget() », celle-ci définit en sortie les options qui seront disponibles dans les paramètres du widget dans le panel d’administration de WordPress
- update(): permet de mettre à jour les paramètres du widget
D’autres fonctions existent et vous pouvez vous en servir pour complexifier votre widget, mes ces 4 fonctions sont les principales pour donner vie à un widget WordPress.
Trouvez le meilleur prestataire WordPress sur Codeur.com
Vos premiers devis en 15 minutes
Gratuit et sans obligation
Déjà plus de 75 000 clients
Ajouter les fonctions principales de WP_Widget
Comme vous l’avez vu dans la partie précédente de cet article, les fonctions à implémenter pour créer un nouveau widget sont « __construct() », « widget() », « form() » et « update() ».
Ce sont ces fonctions qu’il va falloir ajouter à partir de WP_Widget pour créer votre widget personnalisé.
Ouvrez dans avec un éditeur de texte le fichier où vous souhaitez implémenter le code de votre widget.
Dans notre exemple, nous ajouterons ce code dans le fichier « functions.php » de notre thème actuel.
Puis commencez par créer la classe de votre widget héritant de la classe « WP_Widget » de l’API Widget :
class mon_widget extends WP_Widget {
//Ajouter les fonctions principales ici
}Ensuite, ajoutez à l’intérieur de cette nouvelle classe les fonctions principales d’un widget en commençant par le constructeur de la classe « __construct() » .
Replacez l’identifiant, le nom et la description du widget par ceux de votre propre widget personnalisé :
function __construct() {
parent::__construct(
// identifiant du widget
'mon_widget',
// nom du widget
('Mon Premier Widget', ' mon_widget_domain'),
// description du widget
array( 'description' => __( 'Mon Premier Widget Personnalisé', 'mon_widget_domain' ), )
);
}Après avoir créé le constructeur permettant d’initialiser un nouveau widget, vous devez créer la sortie de votre widget.
La sortie d’un widget est le contenu qui sera affiché sur votre site WordPress lorsque vous le placerez sur une page de votre site.
public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
echo $args['before_widget'];
//si un titre existe
if ( ! empty( $title ) )
echo $args['before_title'] . $title . $args['after_title'];
//sortie du widget
echo __( 'Ceci est un widget personnalisé !', 'mon_widget_domain' );
echo $args['after_widget'];
}Une fois la sortie du contenu définie, il vous faudra créer la sortie des options de votre widget, ceux qui seront affichés dans le panel d’administration de votre site WordPress pour paramétrer le widget.
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) )
$title = $instance[ 'title' ];
else
$title = __( 'Mon Widget', 'mon_widget_domain' );
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
</p>
<?php
}Enfin, il ne reste plus qu’une fonction à implémenter, c’est celle permettant de mettre à jour les paramètres de votre widget « update() » :
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
return $instance;
}Toutes les fonctions principales ont été intégrées au code de votre widget personnalisé cependant ce n’est pas encore terminé.
Actuellement votre widget n’est pas enregistré sur votre site WordPress, pour cela vous devrez utiliser une nouvelle fonction « register_widget » permettant d’enregistrer votre widget.
function mon_register_widget() {
register_widget( 'mon_widget' );
}
add_action( 'widgets_init', 'mon_register_widget' );C’est désormais la fin de la création de votre widget personnalisé, si vous avez bien suivi toutes les étapes de cet article vous devriez avoir ajouté un code semblable au code suivant contenant toutes les fonctions expliquées précédemment :
function mon_register_widget() {
register_widget( 'mon_widget' );
}
add_action( 'widgets_init', 'mon_register_widget' );
class mon_widget extends WP_Widget {
function __construct() {
parent::__construct(
// identifiant du widget
'mon_widget',
// nom du widget
__('Mon Premier Widget', ' mon_widget_domain'),
// description du widget
array( 'description' => __( 'Mon Premier Widget Personnalisé', 'mon_widget_domain' ), )
);
}
public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
echo $args['before_widget'];
//si un titre existe
if ( ! empty( $title ) )
echo $args['before_title'] . $title . $args['after_title'];
//sortie du widget
echo __( 'Ceci est un widget personnalisé !', 'mon_widget_domain' );
echo $args['after_widget'];
}
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) )
$title = $instance[ 'title' ];
else
$title = __( 'Mon Widget', 'mon_widget_domain' );
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
</p>
<?php
}
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
return $instance;
}
}
Conclusion
Les widgets sont des composants très utiles sur WordPress.
Comme vous avez pu le voir, il est possible à tous de créer ses propres widgets personnalisés à partir de code PHP à intégrer dans les fichiers de votre site WordPress.
Créer un widget simple qui aura comme tâche d’afficher du texte reste accessible à tous sans grandes connaissances techniques.
Cependant lorsque vous souhaiterez créer un widget plus complexe faisant intervenir plusieurs fonctionnalités WordPress et fonctions PHP, cela demandera un travail technique plus important.
Si vous avez besoin d’un widget personnalisé complexe, mais que vous n’avez pas les compétences pour le créer, n’hésitez pas à poster une annonce gratuite sur Codeur.com. Vous trouverez rapidement un freelance qui pourra créer et installer votre widget WordPress personnalisé.
