Choisir son thème et structurer son site
Votre contenu est prêt. Il est temps de décider comment votre site va ressembler et comment les visiteurs vont s’y déplacer.
Cette séance commence par une question fondamentale que beaucoup de débutants ignorent complètement : quel type de thème choisir ? Ce choix conditionne tout — la façon dont vous personnalisez l’apparence, la façon dont vous créez les menus, et même l’interface dans laquelle vous allez travailler au quotidien. Nous verrons ensuite comment construire un menu de navigation efficace, configurer une vraie page d’accueil et créer des liens internes.
1. Les deux familles de thèmes WordPress
WordPress a traversé une révolution depuis 2022. Aujourd’hui, il existe deux types de thèmes radicalement différents dans leur fonctionnement — et il est essentiel de savoir dans lequel vous vous trouvez.
Les thèmes classiques — personnalisation via le Customizer
Les thèmes classiques (aussi appelés thèmes « traditionnels ») existent depuis les origines de WordPress. Ils utilisent le Customizer — un panneau de personnalisation accessible via Apparence → Personnaliser — pour modifier les couleurs, les typographies, la mise en page, le header et le footer.
Ces thèmes fonctionnent avec Gutenberg pour le contenu des pages, mais le reste de l’apparence du site (parties communes : header, footer, sidebar…) est géré séparément, hors de l’éditeur de contenu.
Exemples de thèmes classiques : GeneratePress, Astra, Neve, OceanWP.
Points forts :
- Interface familière et intuitive pour les débutants
- Customizer visuel avec aperçu en temps réel
- Très nombreux thèmes disponibles, souvent très documentés
- Contrôle structuré des paramètres via des options dédiées
Points d’attention :
- Deux interfaces distinctes à apprendre (Customizer + Gutenberg)
- Header et footer ne sont pas éditables dans Gutenberg
- Personnalisation avancée souvent réservée aux versions premium
Les thèmes de blocs — édition complète du site (Full Site Editing)
Les thèmes de blocs sont apparus avec WordPress 5.9 (début 2022) et représentent l’avenir officiel de la plateforme. Ils activent le Full Site Editing (FSE) — l’édition complète du site — qui permet de modifier tout le site (header, footer, pages, modèles de pages) directement depuis l’éditeur Gutenberg, avec des blocs.
Il n’y a plus de Customizer. Tout se passe dans Apparence → Éditeur.
Exemples de thèmes de blocs : Twenty Twenty-Two, Twenty Twenty-Three, Twenty Twenty-Four, Twenty Twenty-Five, Blocksy, Ollie.
Points forts :
- Une seule interface pour tout le site (contenu + apparence)
- Liberté de mise en page totale grâce aux blocs
- Performances excellentes (thèmes souvent très légers)
- Direction officielle de WordPress — l’avenir de la plateforme
Points d’attention :
- Courbe d’apprentissage plus raide, surtout si Gutenberg est encore nouveau
- L’éditeur de site peut dérouter au premier abord
- Moins de documentation grand public que certains thèmes classiques établis
2. Comparaison — Twenty Twenty-Five vs GeneratePress
Pour illustrer concrètement la différence entre les deux familles, voici une comparaison entre les deux thèmes utilisés dans cette formation.
Twenty Twenty-Five — thème de blocs officiel
Twenty Twenty-Five est le thème par défaut livré avec WordPress depuis fin 2024. Conçu par l’équipe officielle de WordPress, c’est un thème de blocs épuré qui tire pleinement parti du Full Site Editing. Il est livré avec plusieurs styles de site (combinaisons de couleurs et de typographies prédéfinies) que vous pouvez appliquer en un clic.
Ce que vous faites avec Twenty Twenty-Five :
- Modifiez le header et le footer dans l’éditeur de site (Apparence → Éditeur → Modèles)
- Changez la palette de couleurs globale et la typographie dans Éditeur → Styles
- Créez et modifiez des modèles de pages (accueil, article, archive…)
- Utilisez les Parties de modèle pour réutiliser des blocs communs sur plusieurs pages
GeneratePress — thème classique de référence
GeneratePress est l’un des thèmes classiques les plus respectés de l’écosystème WordPress. Ultra-léger (< 30 Ko), entièrement personnalisable via le Customizer, utilisé par des centaines de milliers de sites dans le monde.
Ce que vous faites avec GeneratePress :
- Personnalisez toute l’apparence via Apparence → Personnaliser avec aperçu en temps réel
- Configurez couleurs, typographies, header, footer et mise en page dans des panneaux dédiés
- Avec GP Premium : contrôle avancé des espacements, sections en pleine largeur, hooks
Tableau comparatif
| Critère | Twenty Twenty-Five | GeneratePress |
|---|---|---|
| Type | Thème de blocs (FSE) | Thème classique |
| Interface de personnalisation | Éditeur de site (Gutenberg) | Customizer |
| Header/Footer dans Gutenberg | ✅ Oui | ❌ Non |
| Styles prédéfinis | ✅ Oui (plusieurs variantes) | ❌ À configurer manuellement |
| Courbe d’apprentissage | Modérée à élevée | Faible à modérée |
| Version gratuite | ✅ Complète | ✅ Très complète |
| Version premium | Non | GP Premium (~60 USD/an) |
| Performance | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
| Idéal pour | WordPress moderne, sites épurés | Sites structurés, gestion clients |
| Futur-proof | ✅ Direction officielle WP | ✅ S’adapte progressivement au FSE |
Lequel choisir ?
Il n’y a pas de réponse universelle — tout dépend de votre profil et de votre projet.
Choisissez Twenty Twenty-Five si :
- Vous voulez apprendre WordPress tel qu’il évolue officiellement
- Votre projet est un site vitrine, blog ou portfolio relativement simple
- Vous êtes à l’aise avec Gutenberg et souhaitez aller plus loin
Choisissez GeneratePress si :
- Vous avez besoin d’un contrôle précis et d’une grande stabilité
- Vous gérez ou prévoyez de gérer des sites pour des clients
- Vous préférez une interface de personnalisation structurée et prévisible
💡 Dans cette formation : nous travaillons avec Twenty Twenty-Five pour couvrir l’approche moderne du Full Site Editing. Deux articles dédiés approfondissent chaque thème séparément :
- 📄 Module 3B — Édition complète du site avec Twenty Twenty-Five
- 📄 Module 3C — Installation et personnalisation de GeneratePress
3. Installer et activer un thème
Quelle que soit la famille choisie, la procédure d’installation est identique.
Depuis le répertoire officiel WordPress (thèmes gratuits) :
- Apparence → Thèmes → Ajouter
- Recherchez le thème par son nom (ou filtrez par Thèmes de blocs pour voir uniquement les thèmes FSE)
- Survolez → Installer → Activer
Depuis un fichier .zip (thème premium) :
- Apparence → Thèmes → Ajouter → Téléverser un thème
- Sélectionnez le fichier
.zip→ Installer maintenant → Activer
Comment savoir quel type de thème est actif :
Allez dans Apparence. Si vous voyez Éditeur dans le menu → thème de blocs. Si vous voyez Personnaliser → thème classique.
⚠️ Ne gardez qu’un seul thème actif et supprimez les thèmes inutilisés. Chaque thème inactif représente du code supplémentaire sur le serveur et une surface de faille potentielle s’il n’est pas mis à jour.
4. Les menus de navigation
La création des menus diffère selon le type de thème actif. Le résultat final est identique — mais le chemin est différent.
Avec un thème classique (ex. GeneratePress)
Apparence → Menus :
- Créer un menu, donnez-lui un nom (ex. « Menu principal »)
- Cochez l’emplacement Navigation principale → Enregistrer le menu
- Ajoutez pages, catégories ou liens personnalisés depuis le panneau gauche
- Réorganisez par glisser-déposer — faites glisser légèrement à droite pour créer un sous-menu
Avec un thème de blocs (ex. Twenty Twenty-Five)
Les menus classiques n’existent plus — ils sont remplacés par le bloc Navigation, édité directement dans l’éditeur de site :
- Apparence → Éditeur → Modèles → En-tête (Header)
- Cliquez sur le bloc Navigation
- Utilisez le + pour ajouter des liens (pages, URL, catégories…)
- Imbriquez un élément sous un autre pour créer un sous-menu
- Enregistrez
💡 Dans les thèmes de blocs, le bloc Navigation peut être placé n’importe où sur le site — pas seulement dans le header. Vous pouvez en avoir plusieurs (menu principal en header, menu secondaire en footer).
Bonnes pratiques communes
- 4 à 6 entrées au premier niveau — au-delà, le visiteur est submergé
- Noms courts et clairs : « Services » plutôt que « Ce que nous proposons comme services »
- Toujours une entrée Contact — c’est la page la plus cherchée sur un site professionnel
- Maximum 2 niveaux de hiérarchie — les sous-sous-menus sont inutilisables sur mobile
- Le logo renvoie toujours à l’accueil — convention universelle appliquée par tous les thèmes
5. Configurer la page d’accueil
Par défaut, WordPress affiche le fil de vos derniers articles en page d’accueil. Pour un site professionnel, vous voulez une page d’accueil personnalisée.
Ce réglage est identique quel que soit le thème — c’est un paramètre WordPress global.
Étapes :
- Créez une page intitulée Accueil dans Pages → Ajouter (laissez-la vide pour l’instant)
- Allez dans Réglages → Lecture
- Sous La page d’accueil affiche, sélectionnez Une page statique
- Choisissez votre page Accueil dans le menu déroulant Page d’accueil
- Si vous prévoyez un blog, créez une page vide Blog et assignez-la dans Page des articles
- Enregistrez
Structure d’une page d’accueil efficace
Une bonne page d’accueil répond à trois questions en moins de 5 secondes : qui vous êtes, ce que vous proposez, et ce que le visiteur doit faire maintenant.
[Bloc Couverture — image de fond + titre H1 + bouton principal]
──────────────────────────────────────────────────────────────
[Bloc Colonnes (3) — 3 points forts ou services]
──────────────────────────────────────────────────────────────
[Bloc Médias et texte — photo + paragraphe de présentation]
──────────────────────────────────────────────────────────────
[Bouton d'appel à l'action final — « Contactez-nous »]
💡 Le bloc Couverture permet de superposer du texte sur une image de fond avec un overlay coloré semi-transparent. C’est l’outil idéal pour créer un « hero banner » en haut de la page d’accueil. Réglez l’opacité de l’overlay dans le panneau latéral droit → Superposition.
6. Les liens internes
Un lien interne pointe d’une page de votre site vers une autre page de votre site. C’est l’un des leviers SEO les plus simples et les plus négligés.
Pourquoi c’est important :
- Google suit ces liens pour comprendre la structure et l’importance relative de vos pages
- Ils maintiennent le visiteur sur le site en le guidant vers du contenu complémentaire
- Ils transmettent de l’autorité SEO des pages populaires vers les pages moins visibles
Créer un lien interne dans Gutenberg :
Sélectionnez le texte → Ctrl+K (PC) / Cmd+K (Mac) → tapez le nom d’une page → sélectionnez dans la liste → validez.
Règle des textes d’ancre : utilisez des textes descriptifs — jamais « cliquez ici ».
| À éviter | Préférez |
|---|---|
| Cliquez ici | Consultez notre page de services |
| En savoir plus | Découvrez nos formations WordPress |
| Ce lien | Voir le glossaire WordPress |
Récapitulatif — Ce que vous savez faire après cette séance
- ✅ Distinguer thèmes classiques (Customizer) et thèmes de blocs (FSE)
- ✅ Choisir le bon type de thème selon son projet et son profil
- ✅ Installer et activer un thème depuis le répertoire WordPress
- ✅ Créer un menu de navigation (via Apparence → Menus ou via l’éditeur de site)
- ✅ Configurer une page d’accueil statique dans Réglages → Lecture
- ✅ Construire une page d’accueil structurée avec Gutenberg
- ✅ Créer des liens internes avec des textes d’ancre pertinents
📄 Pour aller plus loin :
- Module 3B — Édition et personnalisation complète avec Twenty Twenty-Five
- Module 3C — Installation et personnalisation de GeneratePress
Exercices de la séance
EX 3.1 — Identifier son thème et activer Twenty Twenty-Five (15 min)
- Allez dans Apparence et notez ce que vous voyez : Éditeur ou Personnaliser ?
- Dans Apparence → Thèmes → Ajouter, cliquez sur le filtre Thèmes de blocs et parcourez quelques thèmes — observez la différence avec les thèmes classiques
- Installez et activez Twenty Twenty-Five
- Vérifiez l’affichage de votre site — notez ce qui a changé
EX 3.2 — Créer le menu de navigation (20 min)
- Allez dans Apparence → Éditeur → Modèles → En-tête
- Cliquez sur le bloc Navigation et ajoutez vos pages principales (minimum 4 : Accueil, une page de contenu, À propos, Contact)
- Créez un sous-menu en imbriquant un élément sous un autre
- Enregistrez et vérifiez le rendu sur la partie publique du site
EX 3.3 — Construire la page d’accueil (25 min)
- Ouvrez votre page Accueil en édition dans Gutenberg
- Construisez 4 zones :
- Bloc Couverture : image de fond + titre H1 accrocheur + bouton « En savoir plus »
- Bloc Colonnes (3) : 3 points forts de votre site ou association
- Bloc Médias et texte : photo + paragraphe de présentation
- Bouton final : « Contactez-nous » (lien vers votre page Contact)
- Allez dans Réglages → Lecture et définissez cette page comme page d’accueil statique
- Publiez et vérifiez le rendu
EX 3.4 — Liens internes (15 min)
Créez au moins 3 liens internes sur votre site :
- Page d’accueil → lien vers « À propos » ou « Services »
- Dans un article → lien vers une catégorie ou une page pertinente
- Page « À propos » → lien vers « Contact »
Pour chaque lien : texte d’ancre descriptif, jamais « cliquez ici ».
À la prochaine séance
La séance 4 porte sur les extensions et plugins : configuration avancée de Yoast SEO, formulaire de contact, sécurité et sauvegardes.
Pour préparer : réfléchissez aux fonctionnalités dont vous avez besoin que WordPress ne propose pas nativement — formulaire de contact, galerie photo, calendrier d’événements, boutique ? Notez vos besoins.
Formation WordPress — Roland Graber — roland.graber@triskel.ch — 079 440 85 58
Cours privé : 120.- / heure via l’UPL — Accompagnement professionnel : triskel.ch
Laisser un commentaire