Dans ce didacticiel, nous allons apprendre à créer un widget personnalisé qui affiche les informations sur votre entreprise, telles que son nom officiel, son adresse, son numéro de téléphone et son adresse e-mail. Mais nous allons aller plus loin en le produisant avec des microdonnées ou un balisage de schéma, ce qui permettra aux moteurs de recherche de comprendre votre contenu.
Les widgets sont des blocs dynamiques qui peuvent être placés dans les zones disponibles de votre thème. Habituellement, votre thème aurait au minimum une barre latérale et une ou plusieurs zones en pied de page. Avoir les informations sur votre entreprise sous forme de widget dans le pied de page est courant et assez intelligent, car le pied de page apparaît sur toutes les pages de votre site.
Les microdonnées sont des attributs HTML supplémentaires qui expliquent ce que contient une balise HTML spécifique afin qu’une machine puisse comprendre ce qu’elles sont (par exemple, nom commercial, numéro de téléphone, adresse professionnelle, adresse e-mail professionnelle, etc.). Cela permet aux moteurs de recherche tels que Google d’extraire des informations sur votre entreprise à partir de votre code HTML.
Ce que nous allons créer
Notre widget affichera des informations à l’aide du schéma de microdonnées LocalBusiness, ce qui est parfait pour une organisation ou une entreprise. C’est à vous de décider quelles propriétés vous souhaitez afficher, cliquez simplement sur le lien ci-dessus pour lire toutes les propriétés possibles dans LocalBusiness (y compris héritées). Votre entreprise ou votre pays peut préférer différents types d’informations.
Le widget de ce didacticiel affichera les informations facultatives suivantes :
- Nom de l’entreprise (propriété des microdonnées :
legalName) - ID de TVA ou numéro d’organisation (propriété des microdonnées :
vatID) - Adresse postale (balise de microdonnées :
PostalAddressavec les propriétés pourstreetAddress,postalCodeetaddressLocality) - Adresse e-mail de l’entreprise (propriété des microdonnées :
email) - Numéro de téléphone (propriété des microdonnées :
telephone)
Ce didacticiel ne vous guidera pas à travers le style du widget, car cela devrait être assez simple. En frontend, notre widget ressemblera à un widget texte normal. Mais bien sûr, sous le capot, il y a un balisage de schéma qui aide Google.
Les bases de la création d’un widget personnalisé
Vous pouvez mettre votre code dans votre thème functions.phpou créer un plugin personnalisé. N’oubliez pas que si vous le conservez dans un plugin, vous perdrez le widget lors de la désactivation du plugin ; et de même le garder dans le thème vous fera perdre le widget si vous passez à un autre thème. Dans cet exemple, je vais ajouter le code dans le fichier functions.php.
La création d’un widget se fait avec du code PHP orienté objet. Vous écrivez une classe PHP qui étend la classe de widgets de WordPress et l’initialisez en appelant register_widget()et en fournissant le nom de votre classe. Dans ce tutoriel, j’ai nommé ma classe widget LocalBusiness.
Commençons par appeler à l’ register_widget()intérieur d’une fonction accrochée à l’action widgets_init.
add_action('widgets_init', function() {
register_widget('LocalBusiness');
});Examinons rapidement le squelette d’une classe de widget personnalisée :
class LocalBusiness extends WP_Widget {
// Initialize your widget in the class constructor
public function __construct() { }
// Responsible for outputting the widget in frontend
public function widget($args, $instance) { }
// Responsible for outputting the widget settings in admin
public function form($instance) { }
// Responsible for saving settings in admin
public function update($new_instance, $old_instance) { }
}Comme vous pouvez le voir ci-dessus, vous aurez besoin de quatre fonctions dans votre classe. Passons en revue chaque fonction une par une et remplissons-les.
Création d’un widget de microdonnées d’entreprise locale
L’endroit le plus logique pour commencer est le constructeur, qui est responsable de la configuration de votre widget.
La fonction __construct()
Dans le constructeur, vous devez configurer certaines variables, telles que le nom du widget, et appeler la fonction constructeur du parent (la classe parent est celle que vous étendez ; WP_Widget). En savoir plus sur les options possibles dans le constructeur ici. Je fournirai un ID de base, un titre et une description, comme ceci :
Vous pouvez faire plus dans __constructla méthode, comme mettre des scripts en file d’attente ou définir plus de paramètres de widget. Mais ce qui précède est généralement suffisant dans la plupart des cas.
La fonction formulaire()
L’étape suivante consiste à créer tous les paramètres et entrées que votre widget accepte dans l’administration. Pour envoyer les paramètres à l’administrateur du Widget, nous utilisons la fonction form()qui vous donne un paramètre ; un tableau qui contient toutes vos options de widget éventuellement enregistrées. Il est important que vous produisiez le paramètre enregistré correspondant dans toutes vos entrées afin que les données soient conservées. (Nous verrons comment enregistrer les paramètres à l’étape suivante).
Il y a beaucoup de choses à suivre dans la fonction de formulaire, alors ajoutons d’abord une entrée, pour le nom légal, et assurons-nous de comprendre ce que nous devons faire :
Tout d’abord, le code ci-dessus génère des wrappers HTML et des classes sous la forme sous laquelle WordPress génère ses formulaires de widgets – nous le faisons pour que le formulaire soit agréable.
Il y a deux fonctions avec lesquelles vous devez vous familiariser ; get_field_id()et get_field_name()et ils sont tous les deux des fonctions à l’intérieur WP_Widget(c’est pourquoi vous appelez " $this->" devant – alors que $thisfait référence à l’instance de la classe). Les fonctions renvoient respectivement l’ID et le nom d’un champ fourni, à utiliser dans vos entrées idet nameattributs. C’est très important de ne pas oublier d’ajouter un nameattribut sur votre entrée, sinon vous ne saisirez jamais sa valeur lors de l’enregistrement.
Et enfin, nous produisons la valeur enregistrée actuelle comme valuepour notre entrée en référençant l’argument passé $instance. Sans le faire pour votre valeur, l’entrée ne sera jamais remplie avec tout ce qui est enregistré dans la base de données et apparaîtra vide à chaque fois, ce qui peut dérouter les utilisateurs.
Si vous souhaitez différentes entrées de formulaire, telles que des cases à cocher ou des listes déroulantes, vous devriez pouvoir les ajouter facilement en suivant les règles mentionnées ci-dessus. Ajoutons le reste de nos paramètres de widget. Ce sont toutes des entrées de texte, c’est donc le même code que ci-dessus répété, à l’exception de leurs ID de champ. Notre form()méthode finit par ressembler à ceci :
Si vous ajoutez votre widget dans une zone de widget disponible, il devrait ressembler à ceci :
La fonction mise à jour()
La update()fonction est chargée de sauvegarder réellement vos valeurs saisies dans admin. Malheureusement, WordPress ne le fait pas automatiquement pour vous. Fournis dans cette fonction sont deux paramètres ; généralement nommé $new_instanceet $old_instance. Dans le premier paramètre, $new_instance, vous trouverez toutes les valeurs qui ont été soumises, et dans le second, $old_instance, vous trouverez les valeurs actuellement enregistrées dans la base de données. Cela vous permet de faire des comparaisons intelligentes si nécessaire.
Habituellement, vous créez simplement un nouveau tableau de tous vos paramètres de widget et enregistrez tout ce qui est défini à l’intérieur $new_instance. Nous nous occupons également de certaines désinfections. Enfin, nous renvoyons simplement ce tableau, qui indiquera à WordPress ce qu’il faut enregistrer.
// Responsible for saving settings in admin
public function update($new_instance, $old_instance) {
$instance = [];
$instance['legal_name'] = (!empty($new_instance['legal_name']))? strip_tags($new_instance['legal_name']): '';
$instance['vat_id'] = (!empty($new_instance['vat_id']))? strip_tags($new_instance['vat_id']): '';
$instance['street_address'] = (!empty($new_instance['street_address']))? strip_tags($new_instance['street_address']): '';
$instance['postal_code'] = (!empty($new_instance['postal_code']))? strip_tags($new_instance['postal_code']): '';
$instance['postal_city'] = (!empty($new_instance['postal_city']))? strip_tags($new_instance['postal_city']): '';
$instance['email_address'] = (!empty($new_instance['email_address']))? strip_tags($new_instance['email_address']): '';
$instance['phone_number'] = (!empty($new_instance['phone_number']))? strip_tags($new_instance['phone_number']): '';
return $instance;
}Vous pouvez maintenant tester votre widget si vous le souhaitez et vérifier que vos valeurs saisies sont enregistrées. Et si vous vous souvenez de définir valuecorrectement l’attribut dans form(), lorsque vous enregistrez et appuyez sur Actualiser, les valeurs doivent être conservées. Super! Passons maintenant à la dernière étape, et certes la plus amusante, à savoir la sortie du bit frontal.
La fonction widget()
La widget()fonction est responsable de la sortie de votre widget en frontend. Nous aurons deux arguments pour la fonction ; premièrement un tableau avec des informations utiles telles que les wrappers de zone de widget définis du thème, et deuxièmement vos valeurs de paramètres de widget enregistrées.
La sortie de votre widget doit toujours commencer par echoing $args['before_widget']et toujours se terminer par echoing $args['after_widget']. Cela garantit que votre widget est enveloppé dans les mêmes wrappers HTML de widget que ceux définis par le thème. Sur les mêmes pistes, vous pouvez faire écho $args['before_title']et $args['after_title']pour générer des wrappers HTML corrects autour du titre du widget. Nous n’avons pas de véritable titre de widget en soi, mais nous allons envelopper le nom légal de l’entreprise en tant que titre de widget.
Sinon, vous obtenez vos valeurs enregistrées en référençant le deuxième argument, $instance, par vos noms de clé définis dans form()et update(). Il est recommandé de n’afficher que les paramètres qui ont été définis et d’ignorer ceux qui sont vides.
Étant donné que nous produisons également des microdonnées, nous devons ajouter les propriétés correspondantes en suivant les règles de schema.org.
C’est à vous de décider comment vous voulez afficher votre widget ; vous pourriez probablement envisager d’ajouter plus de wrappers HTML pour un style plus facile.
Personnalisez la sortie, ajoutez du style et c’est tout !
Pour votre information : votre widget obtiendra le nom de la classe d’emballage "widget_<base ID>" (l’ID de base est celui que vous avez fourni dans le constructeur). Dans notre cas, notre widget obtiendra la classe " widget_local_business". Cela pourrait vous aider à ajouter un style ciblé.
Conclusion et code final
Dans ce didacticiel, nous avons appris à créer un widget personnalisé et à rendre une sortie au format Microdata à partir de ses paramètres. Vous devriez pouvoir créer vos propres widgets, en suivant les bases d’une classe de widgets !
Pour référence, voici le code complet, tous ensemble.