Comment créer un widget WordPress personnalisé (étape par étape)

Voulez-vous créer vos propres widgets personnalisés dans WordPress ?

Les widgets vous permettent d’ajouter des éléments qui ne font pas partie du contenu dans une colonne latérale ou dans toute autre zone de votre site pouvant accueillir des widgets. Vous pouvez utiliser les widgets pour ajouter des bannières, des annonces, des formulaires d’inscription à des bulletins d’information et d’autres éléments à votre site.

Dans cet article, nous allons vous afficher comment créer un widget WordPress personnalisé, étape par étape.

Note : Ce tutoriel s’adresse aux utilisateurs/utilisatrices WordPress bricoleurs/développeuses qui apprennent le développement et le codage WordPress.

Qu’est-ce qu’un widget WordPress ?

Les widgets WordPress contiennent des éléments de code que vous pouvez ajouter aux colonnes latérales de votre site ou à des zones prêtes à recevoir des widgets.

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 par défaut. Pour plus de détails, consultez notre guide du débutant sur l’ajout et l’utilisation de widgets dans WordPress.

WordPress permet également aux développeurs/développeuses de créer leurs propres widgets personnalisés.

De nombreux thèmes et extensions WordPress premium sont livrés avec leurs propres widgets personnalisés que vous pouvez ajouter à vos colonnes 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, etc. à une colonne latérale sans écrire de code.

Ceci étant 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 à coder WordPress, vous aurez besoin d’un environnement de développement local. Cela vous donne la liberté d’apprendre et de tester des choses sans avoir à vous soucier que votre site soit en direct.

Vous pouvez installer WordPress localement sur Mac à l’aide de MAMP ou sur Windows à l’aide de WAMP.

Si vous avez déjà un site en direct, alors vous pouvez le déplacer vers un hébergeur local. Pour plus de détails, consultez notre guide sur la façon de déplacer un site WordPress en direct vers un serveur local.

Ensuite, il y a plusieurs façons d’ajouter votre code de widget personnalisé dans WordPress.

Idéalement, vous pouvez créer une extension spécifique à votre site et y coller le code de votre widget. Cela vous permet d’ajouter du code à WordPress qui ne dépend pas de votre thème WordPress.

Vous pouvez également coller le code dans le fichier functions.php de votre thème. Cependant, il sera uniquement disponible lorsque ce thème particulier est activé.

Un autre outil que vous pouvez utiliser est l’extension WPCode qui vous permet d’ajouter facilement du code personnalisé à votre site WordPress.

Dans ce tutoriel, nous allons créer un widget simple qui se contente d’accueillir les internautes. L’objectif ici est de vous familiariser avec la classe de widget de WordPress.

Vous êtes prêts ? Premiers pas.

Créer un widget WordPress de base

WordPress est livré avec une classe de widgets WordPress intégrée. Chaque nouveau widget WordPress étend la classe de widget WordPress.

Le manuel du développeur/développeuse WordPress mentionne 19 méthodes pouvant être utilisées avec la classe WP Widget.

Toutefois, dans le cadre de ce tutoriel, nous nous concentrerons sur les méthodes suivantes.

• __construct() : C’est la partie où nous créons l’ID, le titre et la description du widget.
• widget : C’est ici que nous définissons la sortie générée par le widget.
• formulaire : Cette partie du code est l’endroit où nous créons le formulaire avec des options de widget pour l’interface d’administration.
• mise à jour : c’est ici que nous enregistrons 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 une extension spécifique au site.

<?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' );

Un moyen plus facile d’ajouter du code personnalisé à votre site WordPress est d’utiliser WPCode. C’est la meilleure extension d’extrait de code qui aide à gérer et à insérer des extraits de code sur votre site sans risquer de casser quoi que ce soit.

Tout d’abord, vous devrez installer et activer l’extension WPCode sur votre site. Si vous avez besoin d’aide, veuillez consulter notre guide sur l’installation d’une extension WordPress.

Une fois activé, vous pouvez vous rendre sur  » Code Snippets  » + Add Snippet à partir du panneau d’administration de WordPress. À partir de là, sélectionnez l’option  » Add Your Custom Code (New Snippet)  » (Ajouter votre code personnalisé (nouvel extrait)).

Ensuite, vous pouvez coller le code du widget personnalisé dans la zone de Prévisualisation du code.

Vous devez également cliquer sur le menu déroulant « Type de code » et sélectionner l’option « Extrait PHP ».

Ensuite, vous pouvez 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 défiler jusqu’en haut pour enregistrer l’extrait.

Pour activer l’extrait, il suffit de cliquer sur le permuter sur Actif.

Pour en savoir plus, veuillez consulter notre guide sur la façon d’ajouter du code personnalisé sur un site WordPress.

Après avoir ajouté le code à WordPress, vous devez vous rendre sur la page Apparence  » Widgets dans votre panneau d’administration WordPress.

Cliquez ensuite sur l’icône d’ajout de blocs « Plus », recherchez « WPBeginner Widget » et sélectionnez le nouveau widget.

Ce widget comporte uniquement un champ de formulaire à remplir.

Vous pouvez ajouter votre texte et cliquer sur le bouton « Mettre à jour » pour stocker vos modifications.

Vous pouvez maintenant visiter votre site WordPress pour voir le widget personnalisé en action.

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 est 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 colonne latérale.

Saisissez ensuite un titre et cliquez sur « Enregistrer » pour enregistrer les réglages de votre widget.

Votre nouveau widget personnalisé est désormais en direct sur votre site.

Maintenant, étudions à nouveau le code.

Tout d’abord, nous avons inscrit le ‘wpb_widget’ et chargé notre widget personnalisé. Ensuite, nous avons défini ce que fait ce widget et comment afficher l’interface d’administration du widget.

Dernier point, nous avons défini comment gérer les modifications apportées au widget.

Maintenant, il y a quelques questions que vous pouvez vous poser. Par exemple, à quoi sert un domaine de texte?

WordPress utilise ‘gettext’ pour gérer la traduction et la localisation. Ce domaine de texte et _e indique à ‘gettext’ de rendre une chaine disponible pour la traduction. Pour en savoir plus, consultez notre guide sur la façon de trouver des thèmes WordPress prêts pour la traduction.

Si vous créez un widget personnalisé pour votre thème, vous pouvez remplacer textdomain par le domaine de texte de votre thème.

Vous pouvez également utiliser une extension de traduction WordPress pour traduire WordPress facilement et créer un site WordPress multilingue.

Nous espérons que cet article vous a aidé à apprendre comment créer facilement un widget WordPress personnalisé. Vous pouvez également consulter notre guide sur la différence entre un nom de domaine et un hébergeur et nos choix d’experts sur les meilleurs hébergements de sites gratuits comparés.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.