Les widgets vous permettent d'ajouter des éléments qui ne sont pas du contenu dans une barre latérale ou toute zone prête pour les widgets sur votre site WordPress. Vous pouvez les utiliser pour ajouter des bannières, des publicités, des formulaires d'inscription à la newsletter et d'autres éléments à votre site Web.
Vous pouvez également créer un widget personnalisé pour intégrer des fonctions uniques avec une touche personnalisée, comme des flux de médias sociaux, des articles récents ou des balises HTML.
Chez WPBeginner, nous utilisons des widgets personnalisés pour afficher différents types de contenu dans la barre latérale de notre site Web. Et dans cet article, nous vous montrerons comment créer un widget WordPress personnalisé, étape par étape.
Note : Ce tutoriel s'adresse aux utilisateurs de WordPress qui apprennent le développement et le codage de WordPress. apprennent WordPress.
Qu'est-ce qu'un widget WordPress ?
Les widgets WordPress contiennent des morceaux de code que vous pouvez ajouter aux barres latérales ou aux zones prêtes pour les widgets de votre site Web.
Considérez-les comme des modules que vous pouvez utiliser pour ajouter différents éléments et fonctionnalités à votre site.
Par défaut, WordPress est livré avec un ensemble standard de widgets que vous pouvez utiliser avec n'importe quel thème WordPress. Pour plus de détails, consultez notre guide pour débutants sur comment ajouter et utiliser des widgets dans WordPress.
WordPress permet également aux développeurs de créer leurs propres widgets personnalisés.
De nombreux thèmes WordPress et plugins premium sont livrés avec leurs propres widgets personnalisés que vous pouvez ajouter à vos barres latérales.
Par exemple, vous pouvez ajouter un formulaire de contact, un formulaire de connexion personnalisé, une galerie de photos, un formulaire d'inscription à une liste d'e-mails, et plus encore à une barre latérale sans écrire une seule ligne de code.
Cela dit, voyons comment vous pouvez facilement créer vos propres widgets personnalisés dans WordPress.
Avant de créer un widget personnalisé dans WordPress
Si vous apprenez le codage WordPress, vous aurez besoin d'un environnement de développement local. Cela vous donne la liberté d'apprendre et de tester des choses sans craindre que votre site ne soit en ligne.
Vous pouvez installer WordPress localement sur Mac en utilisant MAMP ou Windows en utilisant WAMP.
Si vous avez déjà un site en ligne, vous pouvez le déplacer vers un hôte local. Pour plus de détails, consultez notre guide sur comment déplacer un site WordPress en ligne vers un serveur local.
Après cela, il existe plusieurs façons d'ajouter votre code de widget personnalisé dans WordPress.
Idéalement, vous pouvez créer un plugin spécifique au site et y coller votre code de widget. Cela vous permet d'ajouter du code à WordPress qui n'est pas dépendant de votre thème WordPress.
Vous pouvez également coller le code dans le fichier functions.php de votre thème. Cependant, il ne sera disponible que lorsque ce thème particulier sera actif.
Un autre outil que vous pouvez utiliser est le plugin WPCode qui vous permet d'ajouter facilement du code personnalisé à votre site Web.
Dans ce tutoriel, nous allons créer un widget simple qui salue simplement les visiteurs. L'objectif ici est de vous familiariser avec la classe de widget WordPress.
Prêt ? Commençons.
Créer un widget WordPress de base
WordPress est livré avec une classe de widget WordPress intégrée. Chaque nouveau widget WordPress étend la classe de widget WordPress.
Il existe 19 méthodes mentionnées dans le manuel du développeur WordPress qui peuvent être utilisées avec la classe WP Widget.
Cependant, pour les besoins de ce tutoriel, nous nous concentrerons sur les méthodes suivantes.
- __construct() : C'est la partie où nous créons l'ID du widget, le titre et la description.
- widget : C'est ici que nous définissons la sortie générée par le widget.
- form : Cette partie du code est celle où nous créons le formulaire avec les options du widget pour le backend.
- update : C'est la partie où nous sauvegardons les options du widget dans la base de données.
Pour créer un widget personnalisé, vous pouvez copier et coller l'extrait de code suivant dans votre fichier functions.php ou dans WPCode (recommandé) :
<?php
// Creating the widget
class wpb_widget extends WP_Widget {
function __construct() {
parent::__construct(
// Base ID of your widget
'wpb_widget',
// Widget name will appear in UI
__( 'WPBeginner Widget', 'textdomain' ),
// Widget description
[
'description' => __( 'Sample widget based on WPBeginner Tutorial', 'textdomain' ),
]
);
}
// Creating widget front-end
public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
// before and after widget arguments are defined by themes
echo $args['before_widget'];
if ( ! empty( $title ) ) {
echo $args['before_title'] . $title . $args['after_title'];
}
// This is where you run the code and display the output
echo __( 'Hello, World!', 'textdomain' );
echo $args['after_widget'];
}
// Widget Settings Form
public function form( $instance ) {
if ( isset( $instance['title'] ) ) {
$title = $instance['title'];
} else {
$title = __( 'New title', 'textdomain' );
}
// Widget admin form
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>">
<?php _e( 'Title:', 'textdomain' ); ?>
</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
}
// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
return $instance;
}
// Class wpb_widget ends here
}
// Register and load the widget
function wpb_load_widget() {
register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );
La manière la plus simple d'ajouter du code personnalisé à votre site WordPress est d'utiliser WPCode. C'est le meilleur plugin d'extraits de code qui aide à gérer et insérer des extraits de code sur votre site sans risquer de tout casser.
Tout d'abord, vous devrez installer et activer le plugin WPCode sur votre site. Si vous avez besoin d'aide, veuillez consulter notre guide sur la façon d'installer un plugin WordPress.
Après l'activation, vous pouvez accéder à Extraits de code » + Ajouter un extrait depuis le panneau d'administration de WordPress. À partir d'ici, sélectionnez l'option 'Ajouter votre code personnalisé (Nouvel extrait)'.
Après cela, vous pouvez coller le code du widget personnalisé dans la zone d'aperçu du code.
Vous devrez également cliquer sur le menu déroulant 'Type de code' et sélectionner l'option 'Extrait PHP'.
Ensuite, vous pouvez faire défiler vers le bas et sélectionner la méthode d'insertion pour votre code.
WPCode vous permet de choisir où exécuter le code. Pour ce tutoriel, vous pouvez utiliser les options par défaut et l'exécuter partout.
Une fois que c'est fait, vous pouvez remonter en haut pour enregistrer l'extrait.
Pour activer l'extrait, cliquez simplement sur le bouton bascule pour le mettre sur 'Actif'.
Pour en savoir plus, consultez notre guide sur comment ajouter du code personnalisé à votre site WordPress.
Après avoir ajouté le code à WordPress, vous devez vous rendre sur la page Apparence » Widgets dans votre panneau d'administration WordPress.
Ensuite, cliquez sur l'icône d'ajout de bloc « Plus », recherchez « WPBeginner Widget » et sélectionnez le nouveau widget.
Ce widget n'a qu'un seul champ de formulaire à remplir.
Vous pouvez ajouter votre texte et cliquer sur le bouton « Mettre à jour » pour enregistrer vos modifications.
Maintenant, vous pouvez visiter votre site web WordPress pour voir le widget personnalisé en action.
Voici un exemple de ce à quoi il ressemble sur notre site de démonstration.
Ajout d'un widget personnalisé dans l'éditeur classique de WordPress
Si vous utilisez l'éditeur de widgets classique pour ajouter de nouveaux widgets à votre site, le processus sera similaire.
Il y aura un nouveau widget appelé « WPBeginner Widget » dans la liste des widgets disponibles. Vous devez faire glisser et déposer ce widget dans votre barre latérale.
Ensuite, entrez un titre et cliquez sur « Enregistrer » pour sauvegarder les paramètres de votre widget.
Votre nouveau widget personnalisé sera maintenant en ligne sur votre site web.
Maintenant, étudions à nouveau le code.
Tout d'abord, nous avons enregistré le « wpb_widget » et chargé notre widget personnalisé. Après cela, nous avons défini ce que fait ce widget et comment afficher le back-end du widget.
Enfin, nous avons défini comment gérer les modifications apportées au widget.
Maintenant, il y a quelques questions que vous pourriez vous poser. Par exemple, quel est le but de textdomain ?
WordPress utilise « gettext » pour gérer la traduction et la localisation. Ce textdomain et _e indiquent à « gettext » de rendre une chaîne disponible pour la traduction. Pour en savoir plus, consultez notre guide sur comment trouver des thèmes WordPress prêts à être traduits.
Si vous créez un widget personnalisé pour votre thème, vous pouvez remplacer textdomain par le domaine de texte de votre thème.
Alternativement, vous pouvez utiliser un plugin de traduction WordPress pour traduire WordPress facilement et créer un site WordPress multilingue.
Bonus : Ajoutez des styles personnalisés à vos widgets WordPress
Une fois que vous avez créé un widget WordPress, vous pouvez également y ajouter des styles personnalisés. Cela peut améliorer l'apparence de votre site Web, maintenir la cohérence et attirer l'attention sur des informations importantes.
Pour ce faire, visitez la page Apparence » Widgets et ajoutez le widget que vous souhaitez personnaliser. Vous verrez maintenant des options pour modifier ses couleurs et sa typographie dans le panneau de blocs à droite.
Cependant, si le widget n'affiche pas cette option, vous pouvez le personnaliser en ajoutant des classes CSS après avoir développé l'onglet « Avancé ».
Vous pouvez maintenant ajouter du CSS personnalisé à votre thème WordPress en ciblant cette classe CSS particulière.
Pour ce faire, rendez-vous sur la page Apparence » Personnaliser et basculez vers l'onglet CSS additionnel. Ici, vous verrez un aperçu de votre site web avec une boîte pour ajouter vos règles CSS.
Vous pouvez maintenant utiliser du CSS personnalisé pour personnaliser l'apparence de votre widget. Pour plus de détails, consultez notre tutoriel sur comment ajouter des styles personnalisés à vos widgets WordPress.
Nous espérons que cet article vous a aidé à apprendre comment créer facilement un widget WordPress personnalisé. Vous voudrez peut-être aussi consulter notre guide sur comment désactiver les blocs de widgets dans WordPress et notre tutoriel sur comment supprimer les widgets inactifs dans WordPress.
Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.
Dan
La chaîne « wpb_text_domain » n'est pas trouvée dans le code d'exemple. Je suppose que le code d'exemple a été mis à jour et que le texte de l'article ne l'a pas été ?
Pour confirmer également, est-ce que « wpb_text_domain » est en fait « web_widget_domain » du code d'exemple ?
Merci d'avance pour vos commentaires.
Support WPBeginner
Merci d'avoir signalé cela, nous allons mettre à jour cet article et clarifier cela mieux et le rendre clair.
Admin
marwan
salut,
puis-je mettre le code dans une classe.php séparée et non dans functions.php
Karel Hanton
Merci pour ce super tutoriel. J'ai ajouté le code à mon plugin de test et cela fonctionne parfaitement comme décrit – je vois le widget dans la liste Apparence » Widgets et je peux l'ajouter à la barre latérale.
Mais je ne vois pas le nouveau widget dans la liste de l'éditeur de page. Est-ce que je rate quelque chose, faut-il une autre enregistrement ou des réglages ?
Merci encore pour votre aide.
Aldo
Ceci est maintenant affiché comme un « Widget hérité » dans Wordpress. Existe-t-il une nouvelle façon de créer des widgets ?
JP
C'est super, l'exemple simple de copier-coller était exactement ce que je cherchais. Merci !
Support WPBeginner
You’re welcome
Admin
Banu
J'ai créé un plugin CRUD et j'ai besoin de l'utiliser sur une page. Pouvez-vous me guider sur la façon de l'utiliser sur une page ?
Support WPBeginner
Cela dépendrait de la façon dont vous avez configuré le plugin. Pour l'avoir sur une page, vous pourriez soit utiliser un shortcode pour l'affichage front-end, soit regarder du côté de l'API des options si vous vouliez l'afficher sur le côté admin d'un site.
Admin
Kishan
Comment puis-je créer plus d'un widget personnalisé ?
Et aussi, comment puis-je définir d'autres champs comme radio, case à cocher, liste déroulante, texte dans le widget ?
Support WPBeginner
Vous devriez remplacer wpb_widget par le nom que vous souhaitez donner à votre nouveau widget, puis le code dépendrait de ce que vous aimeriez ajouter spécifiquement. Si vous regardez dans le codex de WordPress, vous pouvez voir les différents codes disponibles.
Admin
Carmen
Bonjour !
Actuellement, je développe un plugin et j'ai besoin de créer un widget pour permettre à l'utilisateur d'ajouter une fonctionnalité spécifique à son site.
J'ai copié le code de votre widget dans un fichier et j'ai enregistré le fichier dans le répertoire de mon plugin. J'ai utilisé add_action et do_action dans le fichier principal de mon plugin pour le charger, mais cela ne fonctionne toujours pas. Pouvez-vous m'aider, s'il vous plaît ?
Merci !
Support WPBeginner
Malheureusement, cela dépendrait fortement de la façon dont votre plugin est configuré. Vous voudrez peut-être vous assurer que les deux sections de ce code sont chargées pour que le widget soit ajouté et affiché.
Admin
Maximilian K.
Une question rapide, que faire si je veux créer des widgets dans lesquels je peux aussi placer d'autres widgets ? Comme des colonnes bootstrap vides de 6-3-3 par exemple, et dans chaque colonne je peux ensuite placer des widgets comme image, texte, derniers articles, etc.
Y a-t-il une commande / un mot-clé pour signaler qu'il y a de la place pour d'autres widgets dans ce widget...
parce que je suis un peu confus au sujet de mon propre thème créé et de la façon dont WP fonctionne... vous voyez, je suis un débutant ^^
J'ai déjà placé des informations générales comme le titre de la page, créé des zones de widgets dans mon pied de page afin que je puisse y placer des menus, des liens connexes, etc. Cela a fonctionné.
Mais maintenant, je suis confus quant à la façon dont je peux réaliser mon contenu dans WordPress comme je l'avais conçu auparavant. Peut-être que quelques mots-clés m'aideront à en savoir plus à leur sujet.
Support WPBeginner
Cela nécessiterait plus de personnalisation que ce que nous abordons dans cet article. Vous devrez peut-être vous renseigner sur la façon de créer une barre latérale pour le code que vous pouvez utiliser : https://www.wpbeginner.com/wp-themes/how-to-add-dynamic-widget-ready-sidebars-in-wordpress/
Admin
Lars
Excellent tutoriel ! A parfaitement fonctionné.
Support WPBeginner
Glad our tutorial could help
Admin
Watson Anikwai
Comment obtenir un champ de type de publication personnalisé de la base de données wp et l'utiliser dans un widget pour l'afficher sur le front-end ?
vicky
Je ne peux pas ajouter deux widgets personnalisés... le deuxième widget ne s'affiche pas....
Que dois-je faire ???.. S'il vous plaît, aidez-moi.
Ahad Bhatti
Vraiment compréhensible et utile. Merci.
Belitza Gomez
bonjour, j'aimerais savoir où je peux trouver dans les widgets disponibles le « menu personnalisé ». il ne s'affiche pas et je n'ai pas réussi à ajouter une page dans le pied de page via ce widget.
merci pour votre aide !!!!
Samdoxer
Bonjour, comment puis-je afficher un logo à la place du texte. Est-ce que remplacer l'URL du logo par le texte suffirait.
Merci d'avance.
Support WPBeginner
Veuillez consulter les paramètres de votre thème ou visiter la page Apparence » Personnaliser dans la zone d'administration. Vous y trouverez une option pour télécharger votre image de logo.
Admin
Gary Foster
Qu'est-ce qui est venu en premier, le widget ou l'application ?
Un widget doit-il être enregistré, si oui, comment s'il vous plaît ?
Comment protéger au mieux votre idée de widget ou d'application ?
Merci à tous.
shelley
Ces instructions ont magnifiquement fonctionné pour créer mon widget personnalisé. Je n'arrive cependant pas à comprendre comment changer la taille de la police à 60px. J'ai réussi à ajouter du CSS aux options du thème Divi qui ont centré le texte et ajouté une bordure. Mais comment changer le style de la police s'il vous plaît ? Ajouter « font-size:60px » ne fonctionne pas. Je veux que la police soit grande, comme un slogan qui traverse la page. Merci.
Ahmad Farhan
Very helpfull. tankyou
Eyad
Merci beaucoup pour vos tutoriels
Luigi Briganti
Salut ! J'espère que vous pourrez m'aider.
J'ai créé un type de publication personnalisé qui affiche l'horaire d'une boutique. Bien sûr, vous pouvez créer autant d'horaires que vous le souhaitez, mais ma nécessité est d'afficher un horaire donné dans la barre latérale du site web.
À cette fin, j'ai créé un widget qui boucle les publications d'horaire en n'en affichant qu'une seule (à savoir la première, puisque je l'ai ordonnée en ordre ASC). C'est une solution temporaire, juste pour voir si le widget fonctionne et il fonctionne, en fait.
Ce que je veux vraiment faire, c'est afficher dans le backend une liste déroulante de toutes les publications appartenant au type de publication "horaire" afin que je puisse choisir celle dont j'ai besoin quand j'en ai besoin et l'afficher sur le frontend. Comment puis-je faire cela ?
Merci si vous pouvez/voulez aider.
Anees Ijaz
Merci mec de m'avoir fait gagner du temps..
Kevin
J'adore ce post, il m'a souvent beaucoup aidé ! Merci !