Créer son thème WordPress : thème « Classic » ou « block » ?

Depuis plusieurs années déjà, WordPress prend une direction clairement décriée par de nombreux développeurs avec l’ajout de fonctionnalités de « pages builder » au cœur du CMS. Il faut dire que le succès de ces constructeurs de page – comme Divi et Elementor, pour ne citer que les plus connus – est tel que l’intégration de ce type d’outil au sein de WordPress ressemble à une évolution naturelle. Même si cela fait grincer des dents tous ceux qui n’ont pas du tout besoin d’une interface cliquable pour créer un site internet. Surtout quand cette interface impose des choix discutables en terme de performances et de séparation du contenu et du style.

Code vs no-code…
Faire son site à l’ancienne

Choisir de se débarrasser du page builder natif de WordPress (Gutenberg de son petit nom) peut donc se révéler très tentant, en particulier après avoir jeté un œil à la façon dont un thème WordPress de type « block » est organisé : avec son fichier de paramètres au format Json, ses commentaires HTML destinés à l’éditeur et ses options stockées dans la base… l’édition des thèmes WordPress ne s’est pas simplifiée pour les développeurs et les intégrateurs. On peut aussi être très vite agacé par le nombre de clics et d’options à rechercher puis à modifier avec sa souris, alors qu’on pourrait faire ces modifications sur une feuille de style CSS tellement plus vite…

Gutenberg -> out

Si on choisit de se débarrasser de l’éditeur no-code de WordPress et de développer son thème à l’ancienne en html, css, javascript et php, on doit :

• Désinstaller l’éditeur Gutenberg
• installer l’éditeur classique toujours disponible
• Installer un thème classique ( blankslate est une excellente option dans ce cas de figure)
• ajouter des extensions compatibles (on aura sans doute besoin des widgets classiques)
• Modifier le thème avec son éditeur favori : les styles, le fichier function.php pour, par exemple, ajouter des emplacements de menus supplémentaires.

Pour le reste, il suffira de suivre les instructions de fabrication d’un thème classique avec WordPress. C’est très bien documenté.

Les avantages

• Le temps d’adaptation aux évolutions de WordPress tombe à zéro
• on utilise son éditeur favori pour coder comme on en a l’habitude et on gagne en efficacité… du moins dans un premier temps
• zéro perte de performance : aucun code supplémentaire n’est généré par l’éditeur
• les utilisateurs peuvent continuer d’écrire leurs articles avec TinyMce… (quoi oups ?)

Les limites

Cette option pose au moins 2 soucis (et peut-être davantage) :

1. Les extensions sont de moins en moins compatibles avec les thèmes classiques, et leurs mises à jour futures posent question. Le temps perdu sur le cliquodrome de votre page builder pourrait finalement vous sembler dérisoire comparé à celui que vous passerez sur des problèmes de compatibilité à résoudre.
2. Et puis, il y a les attentes des utilisateurs : aujourd’hui, écrire un article de blog avec un vieil éditeur et sa prévisualisation approximative est en décalage avec les possibilités offertes par un éditeur no-code. A l’usage, un constructeur de page évolué est plus agréable, et il accélère l’édition des pages et des articles une fois que le thème et les modèles ont été créés.

Code vs no-code…
Faire son site avec un page builder

Ok, ça a d’abord l’air nul…

Quand on est développeur, ça ne donne pas envie. Le constat est simple : l’interface est pleine d’options à sélectionner, les styles ajoutés au thème ne sont par défaut pas pris en compte, et quand on a trouvé l’interface pour les ajouter (l’éditeur des styles est un champ type textarea…), ils sont sauvegardés en base de donnée et injectés en ligne sur toutes les pages. N’importe quoi.

Ensuite, il y a ce fichier Json, avec des paramètres à ajouter pour permettre à l’éditeur visuel (Gutenberg) d’afficher les options qui permettrons de modifier le site. Pffff….

Et puis il y a ces templates en HTML, avec des commentaires qui ressemblent à des tags dont on a pas la liste exhaustive, avec des attributs difficilement lisibles.

Bref, apprivoiser les thèmes WordPress de type block, c’est pas gagné…

On essaie quand même ?

Pourquoi pas… tout espoir n’est pas perdu car :

• le nombre de fichiers dans un thème block reste limité
• on peut ajouter un lien vers une feuille de style et vers un script.js en bas de page de façon assez simple (c’est quand même la base ; mais notez qu’il y aura des styles à importer vers l’éditeur pour la prévisualisation du site)
• les commentaires HTML sont directement générés par l’éditeur Gutenberg, donc à priori on aura pas besoin d’apprendre le « WordPress Gutenberg Markup langage » (d’ailleurs ça n’existe pas)
• On a accès aux jokers habituels : ChatGPT, Claude, etc. Et si parfois, ça ne marche pas, il reste Google.

Démarrons…

Créer son thème WordPress pour Gutenberg

On peut créer son thème au moins de de 3 façons :

• Télécharger puis installer un thème vierge (blank theme) qui ne comprend que les options strictement nécessaires. Cela implique de rechercher puis de télécharger les thèmes qui semblent convenir, et de les comparer avant de les installer.
• Utiliser l’extension create block theme qui permet au choix de :
  • créer le thème enfant d’un thème installé
  • cloner un thème installé
  • créer un thème vierge

Il est aussi possible avec cette extension de modifier le thème puis de l’exporter. A l’usage, quelques doutes apparaissent quand à la fiabilité de ce plugin : certaines modifications ne sont pas exportées, d’autres si… le résultat de l’édition de thème est trop aléatoire. Mais cela reste un outil efficace pour partir d’une page blanche ou pour démarrer avec un thème simple que l’on clône – par exemple « Twenty twenty five » – pour éviter de perdre ses modifications avec une mise à jour.

• Générer un thème avec l’iA.

Cette dernière option est très intéressante : en interagissant avec une iA, on peut obtenir un thème de base et le faire évoluer en fonction de ses besoins par des demandes de modifications précises. Le Chat de Mistral génère par défaut un code minimaliste, pas forcément compatible avec l’éditeur. Claude ajoute pas mal d’éléments et semble être le plus complet (mais pas sûr qu’on ait vraiment besoin de tout), par contre la version gratuite s’arrête rapidement. ChatGPT est lui aussi très efficace et propose de télécharger le thème au format zip pour une installation directe sur le site. Bref, l’iA sait faire.

Créer son thème WordPress avec ChatGPT

Les iA sont efficaces mais peuvent être hésitantes avec des questions trop générales. En demandant « un thème WordPress de base », il est très possible de se retrouver avec des options importantes qui manquent, ou au contraire des ajouts franchement inutiles. Le prompt doit donc être suffisamment précis.

Voici un exemple de prompt qui devrait fonctionner, n’hésitez pas à en éditer les valeurs et à le lancer ou à télécharger les fichiers générés (lien plus bas) :

<!-- wp:template-part {"slug":"header","theme":"myaitheme","tagName":"header"} /-->

<!-- wp:template-part {"slug":"footer","theme":"myaitheme","tagName":"footer"} /-->

Voir les fichiers du thème générés par le prompt

Quelques détails sur ce prompt :

• Il peut arriver que la syntaxe générée ne convienne pas complètement à la dernière version de WordPress, il ne faut pas hésiter à lancer l’action « tentative de récupération de contenu » quand elle est proposée.
• Le support de woocomerce est inclus, les styles seront ceux des blocs woocomerce.
• Le chargement des polices de caractère Google par l’éditeur se fait très tardivement. Mieux vaut conserver les polices par défaut pour qu’elles servent de « fallback » et ajouter les déclarations nécessaires dans l’en-tête (head) en éditant directement le fichier function.php.
• Le réglage des tailles des caractère est à ajuster, ainsi que la palette de couleur. Ces réglages ainsi que d’autres peuvent être réalisés directement depuis l’éditeur. C’est sans doute plus efficace pour le coup…

Et ensuite ?

Pour chaque modèle que l’on veut éditer, on pourra soit utiliser Gutenberg, soit demander à chatGPT de générer le code html incluant les commentaires pour Gutenberg. ChatGPT peut aussi générer ce code à partir d’une simple image (à tester). A l’usage, utiliser l’éditeur peut néanmoins s’avérer plus pratique, et il faut bien apprendre un jour ou l’autre à le prendre en main…

On dispose donc à l’arrivée :

• D’un thème de base configurable et éditable dans WordPress, avec des réglages par défaut qu’on peut peaufiner ou modifier.
• D’une feuille de style liée à utiliser comme on en a l’habitude
• D’une feuille de style supplémentaire où on pourra copier/coller les styles nécessaires à une bonne prévisualisation du contenu en mode édition
• D’un lien vers un fichier javascript si on souhaite ajouter des scripts personnalisés
• d’un en-tête et un pied de page basique à éditer dans les « compositions »
• des « modèles » nécessaires qui pourront aussi être édités et complétés depuis l’éditeur.

Pour conclure

Thème classique ou block thème ? C’est à vous de voir… mais les quelques adaptations à réaliser pour travailler sur un thème FSE et bénéficier d’un constructeur de page valent le coup. WordPress avance, mieux vaut suivre pour continuer d’en profiter ; après tout, c’est quand même un super CMS. (On reparle de tous ces styles en ligne une autre fois…)