Créer un widget de contact complet sur WordPress

Mathieu Chartier CMS (WordPress...) 0 commentaire

WordPress est rempli de bonnes intentions mais ne permet pas toujours d’obtenir ce que l’on cherche, il faut parfois mettre les mains dans le code pour créer des systèmes personnalisés à la hauteur de nos attentes. Il existe heureusement de nombreux plugins (et par extension beaucoup de widgets) qui peuvent apporter des suppléments d’âme à nos sites web mais souvent, l’accumulation d’extensions surcharge le code et le serveur avec des requêtes complémentaires et parfois lourdes.

Notre objectif est donc simple ici, nous voulons créer un petit widget de contact (personnalisable en CSS) qui permet d’afficher nos informations de contact (numéro de téléphone, email, adresse postale…). Le rôle d’un tel widget est d’éviter aux débutants de devoir rentrer ce type d’informations en dur dans le fichier sidebar.php ou dans footer.php par exemple, il suffira ici d’avoir une zone de dépôt de widget et toutes les informations pourront être modifiées en ligne, sans « code HTML ». :D

Vous pouvez télécharger le code complet dans le pack ci-dessous (avec icône, CSS, etc.) ou aller en bas de l’article pour le découvrir. Il ne s’agit que d’un exemple d’usage qui ressemble à la capture présentée ci-après…

Télécharger “Widget contact 1.0”widget-contact.zip – Téléchargé 427 fois – 123 KB

Widget de contact (code) sur WordPress

Prérequis sur les widgets WordPress

Les widgets WordPress se programment en partie en PHP objet (POO) en créant une classe fille de la classe WP_Widget native. Cette nouvelle classe doit prendre quatre méthodes que nous retrouverons dans le code suivant, voici leur rôle :

  • une méthode permet d’afficher le widget dans le liste des widgets WordPress ;
  • une seconde méthode gère l’affichage final des données (placée en seconde position dans mon code mais ce n’est pas forcément le plus « logique », chacun ordonne comme il le souhaite !) ;
  • une troisième recueille les informations mises à jour et les enregistre en mémoire ;
  • l’ultime méthode correspond au formulaire présenté dans le backoffice lorsque nous activons le widget.

L’objectif est de fournir assez d’informations de contact pour que le widget ait un intérêt. L’exemple de code présenté ci-dessous est modulable, il est possible d’ajouter ou de déplacer les champs présentés selon vos besoins au sein du code (tout est commenté, ça ne devrait pas être trop compliqué). Chaque ligne laissée vide dans le widget n’affichera pas l’information correspondante, c’est bien pratique…

Pour éviter d’utiliser des extensions externes, nous allons ajouter le code dans le fichier functions.php de notre thème WordPress qui est destiné à recevoir toutes les fonctionnalités qui nous intéressent. Il faudra ensuite utiliser la fonction register_widget('NOM_DU_WIDGET'); pour valider son utilisation.

Le code du widget de contact pour WordPress

Parce que les codes valent plus que les longs discours, voici le code complet du widget présenté ci-dessus.

Et maintenant le CSS de l’exemple, bien que celui-ci puisse être totalement modifié.

Paramètre du widget de contact WordPress

Ici, j’ai volontairement mis deux méthodes différentes pour les images, la première en « dur » pour l’image d’entête et la seconde modifiable pour l’image personnelle. Je conseille plutôt la seconde méthode, il vous suffit d’envoyer l’image dans la bibliothèque des médias puis de récupérer l’URL qui lui correspond pour l’héberger de manière sûre et surtout de pouvoir contrôler l’image.

J’espère que ce petit code vous aura plu, j’ai fait en sorte qu’il soit simple à comprendre donc ça devrait aller, n’hésitez pas si vous avez des suggestions...