Listes structurées automatiques sur WordPress

Vous l’avez vu, ce site s’est offert un coup de jeune. L’occasion pour moi de tester les nouveautés de WordPress 5. Globalement l’interface est la même qu’avant, mis à part l’éditeur d’articles et pages qui s’est largement simplifié, et qui permet de facilement organiser le contenu.

Afin de faciliter la maintenance et mise à jour du site, je cherche à disposer de pages générées automatiquement à partir de contenus structurés. J’avais en tête un mécanisme qui lirait un fichier type JSON pour en générer une page propre et bien présentée. Et comme WordPress est bien pensé, ce mécanisme existe : les « Custom Content Types » (types de contenus personnalisés). L’idée est de gérer ses propres données à la manière des articles : une page de saisie standardisée, et un affichage automatique. Impeccable, comment ça marche ? C’est là que ça se complique !

Ces types personnalisés peuvent être gérés de deux façons : soit via du code (en modifiant les modèles PHP des pages), soit à l’aide d’extensions. Rappelez-vous, l’idée est d’avoir une maintenance simple, j’opte donc pour les extensions. Plusieurs extensions existent, certaines gratuites, d’autres payantes. Après quelques tests, c’est l’extension « Pods » qui a retenu mon attention. Elle permet de créer simplement des formulaires dans l’interface d’administration pour saisir ses données personnalisées.

Créer un type de données

Une fois que l’extension est installée, vous avez une nouvelle entrée dans le menu de l’interface d’administration. Vous pouvez notamment « Ajouter un nouveau pod ».

Écran d'ajout d'un pod

Ici, on va donc « Créer un nouveau », pour initier notre nouveau formulaire de saisie. Quelques informations sont ensuite demandées.

Le type de contenu est à choisir avec prudence : il conditionne la manière dont vous pourrez utiliser ce formatage par la suite. Dans la logique d’une liste structurée, on opte donc pour « Type de contenu personnalisé (semblable aux articles) ». On renseigne ensuite un nom au singulier et pluriel, qui servira pour les différents affichages.

On arrive ensuite à la configuration des champs. C’est ici que l’on définit quelles informations on souhaite pouvoir rentrer pour constituer les données.

On peut donc créer un premier champ « Intitulé », qui contiendra du texte. Veillez bien à noter la valeur du champ « Nom », qui nous servira pour la page d’affichage de ces données.

Dans cette même logique, on peut donc créer autant de champs que l’on souhaite, de types variés (adresses web, numéro de téléphone, texte riche…). Une fois vos champs créés, pensez bien à cliquer sur « Enregistrer le pod » à gauche.

Créer des données

Maintenant que le formulaire est en place, on peut commencer à constituer son jeu de données. Votre type personnalisé apparaît désormais dans le menu de gauche de l’interface d’administration de WordPress. Vous pouvez commencer à créer une nouvelle entrée.

La saisie se fait sur le mode classique d’un formulaire, c’est l’étape la plus simple mais potentiellement la plus fastidieuse. Une fois les champs remplis, cliquez sur « Publier ».

Il ne reste plus qu’à afficher ces données sous forme de liste.

Créer la page d’affichage

Pour afficher notre liste d’éléments, il faut créer soi-même une nouvelle page classique. Celle-ci peut être construite comme vous le souhaitez. Vous devez juste placer dans celle-ci un bloc de type « Code court ». C’est celui-ci qui va contenir les données à afficher. Dans ce bloc, vous allez entrer un code HTML et des codes courts qui vont permettre de structurer vos données. Un exemple :

[pods name="prix" shortcodes="1"]
 <div class="award">
   <h3>{@nom}</h3>
   <p>{@place} - {@date_evt} - {@organisateur}</p>
   <img src="{@logo}">
   <p>{@summary}</p>
 </div>
[/pods]

Quelques explications : le bloc pods va s’exécuter autant de fois que vous aurez d’objets saisis grâce à votre formulaire. Au sein de ce bloc, on peut utiliser les informations saisies dans le formulaire grâce à la syntaxe {@mavariable} (les noms que vous avez noté tout à l’heure). Le reste est du code HTML classique.

Le bloc pods doit être configuré en changeant principalement la valeur de « name », qui prendra le nom de votre pod. L’ensemble des configurations possibles est recensé sur la documentation officielle.

Il ne vous reste plus qu’à publier cette page, et voilà ! Vous avez une page qui est générée automatiquement à partir de vos saisies.

Conclusion

Vous avez découvert comment facilement créer des listes d’informations structurées sous WordPress. J’espère que ce tutoriel vous fera gagner du temps, et n’hésitez pas à me contacter si vous avez des questions.


Peinture fraîche !

Ce site web, qui présente mes activités professionnelles et mes projets personnels, s’est offert un coup de jeune ! Découvrez notamment la section cas d’usages, présentant quelques exemples de projets que j’ai mené, et la partie blog, qui va à l’avenir disposer d’articles de vulgarisation technique ou des retours d’expérience.