Tuto Pods : 4. Dopez vos widgets !

Le système de widget de WordPress est très pratique, beaucoup de thèmes premium en usent (et en abusent), mais lorsqu’on a besoin d’une widget pas prévue par le thème, on se trouve bien dépourvu avec la « widget texte », bien trop limitée aussi bien en taille d’affichage qu’en fonctionnalités…

En effet, comment ajouter une image ? Il faut l’envoyer dans la bibliothèque de WordPress, puis trouver son adresse, la copier dans un code HTML que l’on mets dans le widget, etc… Et si c’était aussi simple que d’écrire un article ? …

…grâce à Pods c’est possible ! 🙂

Il existe 2 options, la widget WYSIWYG (avec un éditeur de texte comme pour les articles), la widget Template (avec un template, comme dans le tuto précédent).

J’ai utilisé cette méthode sur un des derniers site que j’ai mis en ligne (lien), toute la homepage est gérée avec des widgets, une mini formation au client sur les shortcodes, et roulez jeunesse ! 🙂

Avant de démarrer, il faut activer 2 nouveaux composants : Advanced Content Types, Table Storage (je ferai un article détaillant chaque composant très prochainement).

Widget WYSIWYG

C’est la widget la plus simple, il suffit de créer un Pod avec un champ WYSIWYG, qu’il faudra afficher dans notre widget.

Créons notre Pod:

On choisi « Type de contenu avancé ( séparé de WordPress) », disponible grâce aux 2 composants qu’on a activer un peu plus tôt.

Etape suivante :

Vous pouvez supprimer tous les champs et ne garder que « Name » (je ne sais pas trop pourquoi ces champs sont automatiques, je vais voir avec la Team…)

Voila notre pod près à être utiliser

On oublie pas de « save Pod », puis on passe à l’écriture de notre Pod, une ligne s’est insérée dans votre admin, vous pouvez ajouter des Pods exactement comme si vous écriviez un nouvel article.

J’ai volontairement mis aucun espace,accent,majuscule dans le champ « Name » (celui en haut), pour que le slug soit identique, ce champ ne sera pas affiché.

Maintenant, il faut afficher ce Pod dans notre widget, malheureusement, WordPress ne permet pas cela par défaut, il faut activer les shortcodes dans les widgets, pour cela il faut ajouter une ligne dans la fichier « functions.php » de votre thème:

add_filter('widget_text', 'do_shortcode');

Si vous ne voulez absolument pas modifier votre thème, il y a des plugins qui font cela : Shortcode Widget.

Il suffit ensuite créer une widget text et d’y mettre notre shortcode

[pods name="widget_wysiwyg" id="1"]{@contenu}[/pods] 

ou  
[pods name="widget_wysiwyg" slug="pods-super"]{@contenu}[/pods]

Vous trouverez l’Id en éditant votre Pod, l’adresse est de type : « /wp-admin/admin.php?page=pods-manage-widget_wysiwyg&action=edit&id=1 »

Widget Template

Vous remarquerez que les widgets sur fond vert du site (lien) ont une structure très stricte: une image, un titre et un sous-titre.

Pour cela, j’ai utilisé le même principe que pour la recette de cuisine, je créé une Widget Template, comme l’exemple précédent, mais au lieu d’avoir un seul champ contenu, j’ai un champ « File Image », 3 champs « Plain Text » : Titre, Sous Titre, Lien.

Je créé le template de ma widget, qu’il suffit ensuite d’indiquer dans mon shortcode comme cela:

[pods name="widget_template" template="ma_widget" id="1"]

Encore plus de puissance !

Widgets événementielles

Lorsque vous modifiez une widget « normale », l’ancienne version n’est enregistrée nulle part… en cas d’erreur, votre texte est perdu ! Avec Pods, il suffit de créer une nouvelle version, et de changer l’Id dans le shortcode. Par exemple, en janvier, vous voulez mettre un message « Bonne année », vous pourrez en février remettre le message du reste de l’année !

Widgets rotatives

Vous voulez afficher du texte aléatoirement ? Il suffit de créer un shortcode « liste »:

[pods name="widget_template" template="ma_widget" limit="1" orderby="RAND()"]

RAND() signifie aléatoire en langage SQL.