Le lien entre un article Wordpress et la fusion nucléaire

Un snippet a réutiliser pour tester les styles de vos articles Wordpress

Si vous êtes développeur et qu'il vous arrive de réaliser des thèmes pour vos clients. Vous faites probablement face a l'un de ces trois cas de figure :

  • Aucun design ne vous a été transmit (damn !)
  • Vous disposez des designs, mais ils sont incomplet (c'est le plus commun)
  • Vous disposez des designs, complets (mais c'est rare)

Rapidement, lors de votre progression sur le développement du thème, arrive l'étape d'intégration de la page d'un article. Concrètement, cela est généralement du style basique, il faut ajouter un style à tous les niveaux de titre (oui, tous, TOUS !!), les paragraphes, les blockquotes, les liens, les text en gras, etc. Toutes les possibilités que l'éditeur de Wordpress autorise l'utilisateur a insérer en somme.

Cette étape sera nécessaire même lorsque Gutenberg sera la norme sur Wordpress. (Pour info, Wordpress 5.0 arrive dans les jours / semaines a venir, et Gutenberg sera la norme).

Bref, vous le savez probablement, la personne qui sera chargée de rédiger les articles sur le site final finira par utiliser toutes les options de formatage que lui offrira l'éditeur de texte WYSIWYG. Et si vous n'aviez pas prévu la plupart des cas de figure, l'affichage sera au mieux, moche, au pire, désastreux.

GIF from Giphy.com

C'est pourquoi il vaut mieux prévoir un style, même rudimentaire pour les balises les plus communément utilisées.

Voici donc un petit snippet qui peut être réutilisé pour créer le contenu d'un article de test, afin de vérifier que la plupart de ces balises HTML générées par l'éditeur Wordpress s'affichent correctement.

Vous me direz, ça prends 10 minutes tout au plus de créer un tel article de test. Oui, 10 minutes, mais si vous réalisez 100 thèmes Wordpress cela représentera une quinzaine d'heures de votre vie a créer ce genre d'article. Votre temps vaut mieux que ça.

Cet article est à l'origine d'un tweet que je venais de poster...

blog comments powered by Disqus
Licence Creative Commons Cet article est mise à disposition sous Licence Creative Commons Attribution - Partage dans les mêmes Conditions 4.0 International.