Thèmes : thèmes basés sur des blocs et thèmes classiques

Module 5: Thèmes et extensions · Temps de lecture : 9 minutes

Objectif pédagogique : après cette leçon, vous saurez expliquer la différence entre les thèmes basés sur des blocs et les thèmes classiques, et choisir un thème de manière réfléchie.

Notions clés : thème, hiérarchie des modèles, thème basé sur des blocs, modèle (template), partie de modèle (template part), theme.json, Éditeur de site, thème classique, modèles PHP, Outil de personnalisation, widgets, créateur de pages, dépendance (lock-in), répertoire du thème

Ce que fait un thème

Un thème détermine l'apparence de votre site et la structure des pages : l'en-tête avec le logo et le menu, la largeur du contenu, les polices et les couleurs, le pied de page, l'apparence d'une liste d'articles ou d'un résultat de recherche. Le contenu lui-même (vos textes, pages, images) se trouve dans la base de données et reste disponible lors d'un changement de thème.

Chaque thème se trouve dans son propre répertoire sous wp-content/themes/, par exemple wp-content/themes/twentytwentyfive/. Ce répertoire contient toujours un fichier style.css dont l'en-tête décrit le thème (nom, version, auteur). Vous le retrouverez dans la leçon 5.2.

Depuis WordPress 5.9 (début 2022), il existe deux types de thèmes, et ils fonctionnent réellement différemment.

Thèmes classiques

Un thème classique se compose de fichiers PHP : header.php, footer.php, single.php, page.php, index.php, et ainsi de suite. Le fichier utilisé pour chaque page dépend de la hiérarchie des modèles (leçon 1.2). Vous personnalisez votre site :

• dans l'Outil de personnalisation (Apparence > Personnaliser) : logo, couleurs, options proposées par le thème ;
• avec des widgets (Apparence > Widgets) : blocs dans la barre latérale ou le pied de page ;
• avec des menus (Apparence > Menus, leçon 4.3) ;
• dans le code, avec un thème enfant (leçon 5.2).

De nombreux thèmes connus sont (encore) classiques ou hybrides. Ils fonctionnent très bien et seront encore pris en charge pendant des années.

Thèmes basés sur des blocs

Un thème basé sur des blocs est construit à partir des mêmes blocs que votre contenu. Le thème comporte :

• des modèles (templates) sous forme de fichiers HTML composés de blocs, dans le répertoire templates/ : index.html, single.html, page.html, 404.html ;
• des parties de modèle (template parts) dans parts/ : header.html, footer.html ;
• un fichier theme.json contenant les réglages de style : palette de couleurs, polices, tailles de police, largeur du contenu, espacement entre les blocs.

Un petit extrait de theme.json :

{
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        { "slug": "primair", "color": "#1e3a5f", "name": "Primair" },
        { "slug": "accent", "color": "#e8a33d", "name": "Accent" }
      ]
    },
    "layout": { "contentSize": "720px", "wideSize": "1200px" }
  }
}

Vous effectuez les personnalisations dans l'Éditeur de site (Apparence > Éditeur) : vous modifiez l'en-tête, le pied de page et les modèles avec des blocs, et dans Styles, vous choisissez les couleurs, les polices et l'espacement pour l'ensemble du site.

Une différence importante à connaître : ce que vous modifiez dans l'Éditeur de site est enregistré dans la base de données, et non dans les fichiers du thème. Une mise à jour du thème n'écrase donc pas vos modifications. Mais cela signifie aussi qu'un modèle modifié dans la base de données prend le pas sur le modèle du thème. Si l'auteur publie une version améliorée d'un modèle, vous ne la verrez pas tant que votre version modifiée existe. Dans l'Éditeur de site, vous pouvez « réinitialiser » un modèle à la version du thème.

Créateurs de pages

Un créateur de pages (comme Elementor, Divi ou WPBakery) est une extension ou un thème doté d'un éditeur propre permettant de composer et de mettre en forme vos pages par glisser-déposer. Ils sont populaires car ils offrent de nombreuses possibilités sans écrire de code. Soyez conscient de leurs inconvénients :

• Dépendance (lock-in) : la mise en forme est enregistrée dans un format propriétaire (souvent des shortcodes ou des données propres dans wp_postmeta). Si vous désactivez le créateur de pages, il ne reste souvent qu'un amas de codes à la place de vos pages. Changer d'outil implique généralement de tout reconstruire.
• Plus lourd : de nombreux créateurs de pages chargent des scripts et des feuilles de style supplémentaires sur chaque page. Cela peut ralentir votre site (module 6).
• Un élément de plus à maintenir, avec ses propres mises à jour et ses propres failles.

Un créateur de pages n'est pas un mauvais choix en soi, mais faites-en un choix réfléchi. Pour de nombreux sites, ce que vous souhaitez peut aussi s'obtenir avec un thème basé sur des blocs et des compositions.

Choisir un thème

Les critères à examiner, dans cet ordre :

1. Origine : le répertoire de thèmes de wordpress.org (contrôlé par des bénévoles) ou un auteur reconnu disposant de son propre site. N'utilisez jamais de copie « gratuite » d'un thème payant provenant d'un site de téléchargement : elle contient souvent une porte dérobée (leçon 5.3).
2. Maintenance : quand le thème a-t-il été mis à jour pour la dernière fois ? Un thème sans mise à jour depuis plus d'un an devient un risque.
3. Blocs ou classique : correspond-il à votre manière de travailler ? Un thème basé sur des blocs si vous souhaitez pouvoir personnaliser votre site dans l'Éditeur de site, un thème classique si vous voulez poursuivre un site existant de la même manière.
4. Ce qu'il embarque : un thème qui « fait tout » (carrousel, portfolio, formulaire de contact, SEO) lie des fonctionnalités au thème. Si vous en changez plus tard, vous les perdez. Les fonctionnalités relèvent des extensions, la mise en forme relève du thème.
5. Accessibilité et vitesse : dans le répertoire de thèmes de wordpress.org, vous pouvez filtrer sur l'attribut « Accessibilité prête » (accessibility-ready). Vérifiez la démo du thème dans PageSpeed Insights (leçon 6.1).
6. Langue : le thème est-il traduit en français, ou pouvez-vous adapter vous-même les textes ?

Changer de thème

Lors d'un changement de thème, votre contenu reste en place, mais tout ce qui l'entoure change. Ne le faites jamais à la légère sur votre site en production :

• Testez d'abord le nouveau thème avec Prévisualiser en direct (dans Apparence > Thèmes), ou mieux, dans un environnement de préproduction (staging) (leçon 8.3).
• Vérifiez ensuite les menus (leçon 4.3), les widgets, le logo, la page d'accueil et les types d'articles fournis par l'ancien thème (leçon 4.2).
• Les shortcodes de l'ancien thème apparaissent sous forme de texte brut ([slider id="3"]) sur vos pages.

Résumé

• Un thème détermine la mise en forme et la structure ; le contenu reste séparé dans la base de données.
• Les thèmes classiques sont des modèles PHP, personnalisés via l'Outil de personnalisation, les widgets et les menus.
• Les thèmes basés sur des blocs sont construits à partir de blocs et de theme.json, et se personnalisent dans l'Éditeur de site ; ces personnalisations sont enregistrées dans la base de données.
• Les créateurs de pages offrent de nombreuses possibilités, mais créent une dépendance et peuvent alourdir votre site.
• Choisissez un thème selon son origine, sa maintenance et sa simplicité ; les fonctionnalités relèvent des extensions, pas du thème.

Quiz

Exercice

Exercice A5.1 : Quel thème votre site utilise-t-il ? Recherchez dans le code source de votre page d'accueil (Ctrl+U) la chaîne /wp-content/themes/ et indiquez le nom du répertoire du thème qui revient le plus souvent. Si vous utilisez un thème enfant (leçon 5.2), indiquez le répertoire du thème enfant ainsi que celui du thème parent. Précisez également s'il s'agit d'un thème basé sur des blocs ou d'un thème classique, et comment vous l'avez déterminé. Le programme lit la page d'accueil et le fichier style.css du thème indiqué, puis compare.

Pour aller plus loin

Pour travailler dans WordPress lui-même, nous n'avons pas encore nos propres articles ; la documentation officielle de WordPress est très complète.

• Qu'est-ce qu'un thème ? (developer.wordpress.org, en anglais) : https://developer.wordpress.org/themes/getting-started/what-is-a-theme/
• Thèmes sur wordpress.org : https://wordpress.org/themes/
• Éditeur de site (wordpress.org, en anglais) : https://wordpress.org/documentation/article/site-editor/
• theme.json (developer.wordpress.org, en anglais) : https://developer.wordpress.org/themes/global-settings-and-styles/