Sélectionner une page


Voulez-vous créer vos propres widgets personnalisés dans WordPress? Les widgets vous permettent d’ajouter des éléments non liés au contenu à une barre latérale ou à toute zone de votre site Web compatible avec les widgets.

Vous pouvez utiliser des widgets pour ajouter des bannières, des publicités, des formulaires d’abonnement à la newsletter et d’autres éléments à votre site Web.

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

Créer un widget WordPress personnalisé

Noter: Ce tutoriel est destiné aux utilisateurs de DIY WordPress qui apprennent le développement et le codage 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 activées pour les widgets de votre site Web.

Considérez-les comme des modules qui vous permettent d’ajouter différents éléments à l’aide d’une simple interface glisser-déposer.

Par défaut, WordPress est livré avec un ensemble standard de widgets que vous pouvez utiliser avec n’importe quel thème WordPress. Consultez notre guide du débutant sur comment ajouter et utiliser des widgets dans WordPress.

Ajouter des widgets dans WordPress

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

De nombreux thèmes et plugins WordPress premium ont leurs propres widgets que vous pouvez ajouter à vos barres latérales.

Par exemple, vous pouvez en ajouter un Formulaire de contact, une formulaire d’inscription personnalisé, ou un galerie de photos dans une barre latérale sans écrire de code.

Voyons maintenant comment vous pouvez facilement créer vos propres widgets personnalisés dans WordPress.

Didacticiel vidéo

Abonnez-vous à WPBeginner

Si vous préférez des instructions écrites, veuillez lire la suite.

Créer un widget personnalisé dans WordPress

Si vous apprenez le codage WordPress, vous aurez besoin d’un environnement de développement local. Vous pouvez Installez WordPress sur votre ordinateur (Mac ou Windows).

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 collez-y le code de votre widget.

Vous pouvez également coller le code dans la rubrique fichier functions.php. Cependant, il n’est disponible que lorsque ce sujet particulier est actif.

Un autre outil que vous pouvez utiliser est que Extraits de code Plugin avec lequel vous pouvez facilement Ajoutez un code personnalisé à votre site Web WordPress.

Dans ce tutoriel, nous allons créer un widget simple qui n’accueille que les visiteurs. Le but est de se familiariser avec la classe de widgets WordPress.

Commençons.

Créez un widget WordPress simple

WordPress a une classe de widget WordPress intégrée. Chaque nouveau widget WordPress étend la classe de widgets WordPress.

Le guide du développeur WordPress mentionne 18 méthodes qui peuvent être utilisées avec le Classe de widget WP.

Cependant, dans ce didacticiel, nous nous concentrerons sur les méthodes suivantes.

  • __construct (): Dans cette partie, nous allons créer l’ID, le titre et la description du widget.
  • Widget: Ici, nous définissons la sortie générée par le widget.
  • Formulaire: Dans cette partie du code, nous allons créer le formulaire avec des options de widget pour le backend.
  • Mise à jour: C’est la partie où nous stockons les options de widget dans la base de données.

Examinons le code suivant à l’aide de ces quatre méthodes dans la classe WP_Widget.


// Creating the widget 
class wpb_widget extends WP_Widget {

// The construct part  
function __construct() {

}
 
// Creating widget front-end
public function widget( $args, $instance ) {

}
         
// Creating widget Backend 
public function form( $instance ) {

}
     
// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {

}

// Class wpb_widget ends here
} 


Dans la dernière partie du code, nous enregistrons le widget et le chargeons dans WordPress.


function wpb_load_widget() {
    register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );

Maintenant, mettons tout cela ensemble pour créer un widget WordPress simple.

Vous pouvez copier et coller le code suivant dans le fichier functions.php de votre plugin ou thème personnalisé.



// 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', 'wpb_widget_domain'), 
 
// Widget description
array( 'description' => __( 'Sample widget based on WPBeginner Tutorial', 'wpb_widget_domain' ), ) 
);
}
 
// 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!', 'wpb_widget_domain' );
echo $args['after_widget'];
}
         
// Widget Backend 
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) ) {
$title = $instance[ 'title' ];
}
else {
$title = __( 'New title', 'wpb_widget_domain' );
}
// Widget admin form
?>
<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 
}
     
// 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' );


Après avoir ajouté le code, vous devez aller Apparence »Widgets Page. Vous remarquerez le nouveau widget WPBeginner dans la liste des widgets disponibles. Vous devez faire glisser et déposer ce widget dans une barre latérale.

Widget de démonstration

Ce widget n’a besoin de remplir qu’un seul champ de formulaire. Vous pouvez ajouter votre texte et cliquer sur le bouton Enregistrer pour enregistrer vos modifications.

Vous pouvez maintenant visiter votre site Web pour le voir en action.

Prévisualisez votre widget personnalisé

Maintenant, étudions à nouveau le code.

Nous avons d’abord enregistré le ‘wpb_widget’ et chargé notre widget personnalisé. Après cela, nous avons défini ce que fait ce widget et comment le backend du widget sera affiché.

Enfin, nous avons défini comment les modifications apportées au widget doivent être gérées.

Maintenant, il y a quelques choses que vous voudrez peut-être demander. Par exemple quel est le but wpb_text_domain?

WordPress utilise gettext pour effectuer la traduction et la localisation. Celles-ci wpb_text_domain et __e Indique à gettext de rendre une chaîne disponible pour la traduction. Voir Comment trouvez-vous des thèmes WordPress prêts à être traduits?.

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

Nous espérons que cet article vous a aidé à apprendre à créer facilement un widget WordPress personnalisé. Vous voudrez peut-être également consulter notre liste de widgets WordPress les plus utiles pour votre site Web.

Si vous avez apprécié cet article, veuillez vous abonner au nôtre chaîne Youtube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.





Source link

Recent Posts