Pages, articles, Gutenberg et médias
Votre site WordPress est configuré, vos extensions sont installées. Il est temps de construire. Cette séance est celle où votre site commence à ressembler à quelque chose.
Avant de foncer dans l’éditeur, nous allons poser les bases qui font la différence entre un site bien structuré et un site fouillis : comprendre la différence entre pages et articles, organiser le contenu avec des catégories et des mots-clés, esquisser un wireframe sur papier, puis créer votre contenu avec l’éditeur Gutenberg — le tout en gérant vos images correctement dès le départ.
1. Pages vs Articles — Ne pas confondre les deux
C’est l’erreur la plus fréquente des débutants WordPress : mettre le même contenu en page ET en article, ou utiliser l’un à la place de l’autre. Voici la distinction essentielle.
Les pages — pour le contenu statique
Une page est un contenu permanent qui fait partie de la structure de votre site. Elle ne change pas (ou rarement) et n’est généralement pas liée à une date ou à un thème.
Exemples typiques :
- Accueil
- À propos / Qui sommes-nous
- Services / Prestations
- Contact
- Mentions légales
Les pages ne sont pas organisées par catégories. Elles peuvent être hiérarchisées (une page « Mère » avec des sous-pages « Filles »), mais elles n’apparaissent pas dans votre fil d’actualités.
Les articles — pour le contenu dynamique
Un article est un contenu daté, organisé par thème. C’est le format naturel pour tout ce qui évolue dans le temps : actualités, billets de blog, recettes, critiques, événements passés, etc.
Les articles sont classés par catégories et mots-clés (étiquettes). Ils apparaissent dans votre fil d’articles, du plus récent au plus ancien. Ils sont idéaux pour le référencement naturel car ils signalent à Google que votre site est actif et mis à jour régulièrement.
Tableau comparatif
| Pages | Articles | |
|---|---|---|
| Type de contenu | Permanent | Daté |
| Exemples | Accueil, Contact, Services | Actualités, Blog, Recettes |
| Catégories | Non | Oui |
| Ordre d’affichage | Hiérarchique | Chronologique (récent en premier) |
| Idéal pour | Structure du site | Contenu régulier |
| SEO | ✅ Bon | ✅✅ Très bon (si régulier) |
Règle simple : Si le contenu serait valable dans 2 ans sans modification → Page. Si le contenu est lié à une date ou à un sujet d’actualité → Article.
2. Wireframe — Dessiner avant de construire
Avant de créer la moindre page dans WordPress, prenez une feuille de papier et dessinez l’organisation de votre site. C’est ce qu’on appelle un wireframe — une esquisse simplifiée de votre structure et de votre mise en page.
Pourquoi le wireframe vous fait gagner du temps
Construire sans plan, c’est l’assurance de devoir tout refaire. Le wireframe vous oblige à répondre à trois questions fondamentales :
- Quelles pages mon site va-t-il contenir ? (structure de navigation)
- Qu’est-ce que le visiteur voit en arrivant ? (page d’accueil)
- Comment les pages sont-elles liées entre elles ? (arborescence)
Une fois ces questions résolues sur papier, la construction dans WordPress devient un exercice d’exécution — vous savez exactement quoi créer et dans quel ordre.
Ce que doit contenir votre wireframe
Pour cette formation, votre wireframe doit comporter au minimum :
- La liste des pages de votre site (minimum 3 : Accueil, une page de contenu, Contact)
- L’arborescence : quelles pages sont « mères » et lesquelles sont des « filles »
- Un croquis sommaire de votre page d’accueil : que voit le visiteur en premier ? (titre, image principale, boutons d’appel à l’action…)
- La liste des catégories si vous avez des articles : 3 à 7 maximum
💡 Outil numérique : Si vous préférez un outil digital, draw.io est gratuit et idéal pour les arborescences. Mais pour démarrer rapidement, papier et stylo font parfaitement l’affaire.
3. La taxonomie — Catégories et mots-clés
La taxonomie est le système de classification de vos articles. WordPress propose deux niveaux : les catégories (obligatoires) et les étiquettes/mots-clés (facultatifs).
Les catégories
Les catégories sont les grandes familles dans lesquelles vous rangez vos articles. Elles structurent votre contenu et permettent aux visiteurs de naviguer par thème.
Règle d’or : entre 3 et 7 catégories maximum.
Trop de catégories = perte de sens + difficulté pour le visiteur à s’orienter + mauvais signal pour Google.
Exemple pour un site d’association sportive :
- Actualités
- Résultats et classements
- Vie du club
- Partenaires
Exemple pour un blog culinaire :
- Recettes salées
- Recettes sucrées
- Conseils et techniques
- Restaurants et sorties
Pour créer des catégories : Articles → Catégories → Ajouter une catégorie
Chaque catégorie possède :
- Un nom (ex. « Actualités »)
- Un identifiant généré automatiquement, modifiable (ex.
actualites) - Une catégorie parente optionnelle (pour créer des sous-catégories)
- Une description facultative (utile pour le SEO)
⚠️ Attention : WordPress crée une catégorie par défaut appelée « Non classé ». Renommez-la ou évitez de l’utiliser — elle indique à Google que vous n’avez pas organisé votre contenu.
Les étiquettes (mots-clés)
Les étiquettes sont des descripteurs fins, plus précis que les catégories. Un article peut avoir plusieurs étiquettes. Elles permettent de relier des articles qui partagent un point commun sans appartenir à la même catégorie.
Exemple : Un article dans la catégorie « Recettes salées » pourrait avoir les étiquettes : rapide, végétarien, été, sans gluten.
Les étiquettes sont facultatives. Si vous n’avez pas de besoin précis, n’en créez pas par défaut — elles n’apportent de valeur que si elles sont utilisées avec cohérence.
Pour gérer les étiquettes : Articles → Étiquettes
Résumé : catégories vs étiquettes
| Catégories | Étiquettes | |
|---|---|---|
| Nombre recommandé | 3 à 7 | Illimité (avec cohérence) |
| Hiérarchie possible | Oui (catégories mères) | Non |
| Obligatoire | Oui (au moins 1 par article) | Non |
| Rôle | Structure principale | Descripteurs fins |
4. L’éditeur Gutenberg
Gutenberg est l’éditeur de contenu de WordPress depuis la version 5.0 (2018). Il fonctionne par blocs : chaque élément de votre page (titre, paragraphe, image, bouton…) est un bloc indépendant que vous pouvez déplacer, dupliquer et personnaliser.
Créer une page ou un article
- Pour une page : Pages → Ajouter (ou + Nouveau → Page dans la barre d’administration)
- Pour un article : Articles → Ajouter (ou + Nouveau → Article)
L’interface Gutenberg se compose de :
- La zone d’édition centrale — votre contenu
- La barre d’outils supérieure — actions globales (enregistrer, publier, prévisualiser)
- Le panneau latéral droit — options du document (statut, image à la une, catégories) et du bloc sélectionné (couleur, espacement, typographie…)
Les 5 blocs essentiels
🅰️ Bloc Paragraphe
Le bloc de base. Chaque portion de texte est un bloc paragraphe. Pour l’ajouter : cliquez sur le + dans la zone d’édition ou appuyez sur Entrée après un paragraphe existant.
Options utiles : taille du texte, gras, italique, couleur, lien.
🔤 Bloc Titre
Structure votre contenu en niveaux (H2, H3, H4…). En appuyant sur / dans la zone d’édition et en tapant « titre », vous l’insérez rapidement.
💡 Bonne pratique SEO : Chaque page ne doit avoir qu’un seul titre H1 (généralement le titre principal de l’article/page défini en haut). Utilisez des H2 pour les grandes sections, des H3 pour les sous-sections.
🖼️ Bloc Image
Insère une image depuis votre médiathèque ou depuis votre ordinateur. Une fois l’image insérée, renseignez toujours le texte alternatif (alt text) — c’est essentiel pour l’accessibilité et pour le référencement.
Options utiles : alignement, légende, lien vers l’image ou vers une URL externe.
📐 Bloc Colonnes
Divise votre contenu en 2, 3 ou 4 colonnes côte à côte. Idéal pour les sections « Nos services », « L’équipe », ou toute mise en page comparative.
⚠️ Attention sur mobile : Les colonnes s’empilent verticalement sur smartphone. Vérifiez toujours le rendu en mode responsive avant de publier.
🔵 Bloc Bouton
Crée un bouton cliquable avec un lien. Indispensable pour les appels à l’action : « Contactez-nous », « En savoir plus », « Télécharger le document ».
Options utiles : couleur du bouton, couleur du texte, style (plein, contour), URL cible.
Raccourcis utiles dans Gutenberg
| Action | Raccourci |
|---|---|
| Insérer un bloc | / (barre oblique) + début du nom du bloc |
| Déplacer un bloc | Glisser-déposer la poignée (⠿) à gauche du bloc |
| Dupliquer un bloc | Clic droit → Dupliquer (ou Ctrl+D sur PC) |
| Supprimer un bloc | Backspace quand le bloc est sélectionné (sans curseur dans le texte) |
| Annuler | Ctrl+Z (PC) / Cmd+Z (Mac) |
| Enregistrer en brouillon | Ctrl+S (PC) / Cmd+S (Mac) |
Structure d’une page bien construite
Pour la plupart des pages de votre site, adoptez cette structure de base :
- Titre de la page (H1 — défini dans le champ titre en haut, pas dans un bloc)
- Introduction — 2 à 3 phrases qui expliquent de quoi parle la page
- Sections organisées avec des titres H2 et H3
- Visuels — au moins une image par section de contenu
- Appel à l’action — un bouton ou un lien vers la prochaine étape logique (Contact, Inscription…)
5. Les médias — Gérer et optimiser vos images
La médiathèque WordPress centralise toutes les images, vidéos, PDFs et autres fichiers de votre site. Avant d’y déposer quoi que ce soit, il faut préparer vos fichiers correctement.
Optimiser avant d’uploader — impératif
Une image non optimisée peut peser 5 à 10 Mo. Chaque image lourde ralentit votre site, et Google pénalise les sites lents dans ses résultats de recherche.
L’outil recommandé : squoosh.app
Squoosh est gratuit, s’utilise directement dans le navigateur (aucune installation), et permet de réduire drastiquement le poids de vos images sans perte visible de qualité.
Paramètres recommandés dans Squoosh :
- Format : WebP (excellent ratio qualité/poids, supporté par tous les navigateurs modernes)
- Qualité : 75–85 % (bon compromis qualité/poids)
- Dimensions : voir le tableau ci-dessous
Dimensions recommandées par usage
| Type d’image | Largeur maximale recommandée | Poids cible |
|---|---|---|
| Image à la une d’article | 1200 px | < 200 Ko |
| Image de page d’accueil (hero) | 1600 px | < 400 Ko |
| Image dans une colonne | 800 px | < 150 Ko |
| Logo | 300 px | < 30 Ko |
| Photo de l’équipe | 600 px | < 100 Ko |
💡 Règle pratique : La plupart des sites WordPress affichent leur contenu dans une colonne d’environ 1200 px de large. Il est inutile d’uploader des images plus grandes — WordPress les réduit de toute façon, mais continue de stocker l’original lourd.
Renseigner le texte alternatif (alt text)
Chaque image que vous uploadez dans WordPress doit avoir un texte alternatif. C’est une description textuelle de l’image, utilisée par :
- Les lecteurs d’écran pour les visiteurs malvoyants
- Google Images pour indexer votre image
- Le navigateur, si l’image ne se charge pas (il affiche le texte à la place)
Comment renseigner l’alt text :
- Cliquez sur une image dans votre médiathèque ou dans l’éditeur
- Dans le panneau droit, remplissez le champ Texte alternatif
- Décrivez ce que montre l’image en une phrase naturelle
Bon exemple : Portrait de Marie Durand, présidente de l'Association XYZ
Mauvais exemple : IMG_2047 ou photo-1 ou laisser vide
Organiser la médiathèque
WordPress ne permet pas de créer des dossiers dans la médiathèque par défaut. Pour un site avec peu d’images (< 50), ce n’est pas un problème. Si vous prévoyez beaucoup de médias, installez l’extension FileBird (version gratuite disponible) pour organiser vos fichiers en dossiers.
Récapitulatif — Ce que vous savez faire après cette séance
À l’issue de cette deuxième séance, vous êtes capable de :
- ✅ Distinguer pages et articles et choisir le bon type selon votre contenu
- ✅ Dessiner un wireframe simple de votre site avant de construire
- ✅ Créer une taxonomie cohérente : 3 à 7 catégories et des étiquettes pertinentes
- ✅ Créer une page et un article avec l’éditeur Gutenberg
- ✅ Utiliser les 5 blocs essentiels : Paragraphe, Titre, Image, Colonnes, Bouton
- ✅ Optimiser vos images avec squoosh.app avant de les uploader
- ✅ Renseigner le texte alternatif pour chaque image
Exercices de la séance
EX 2.1 — Wireframe sur papier (25 min)
Sur une feuille de papier :
- Listez toutes les pages que contiendra votre site (minimum 3)
- Dessinez l’arborescence : quelles pages sont au premier niveau ? Y a-t-il des sous-pages ?
- Esquissez votre page d’accueil : que voit le visiteur en premier ?
- Listez vos catégories d’articles (si votre site en prévoit)
Montrez votre wireframe au formateur avant de passer à la suite.
EX 2.2 — Créer la taxonomie (25 min)
- Allez dans Articles → Catégories
- Créez vos 3 à 5 catégories (selon votre wireframe). Donnez un nom clair et une description courte à chacune
- Renommez (ou supprimez) la catégorie par défaut Non classé
- Si pertinent, créez 3 à 5 étiquettes dans Articles → Étiquettes
EX 2.3 — Créer 2 pages statiques (20 min)
Créez deux pages en allant dans Pages → Ajouter :
Page 1 — Accueil : Utilisez au minimum les blocs suivants : un titre (H2), un paragraphe de présentation, un bloc colonnes (2 colonnes), une image, un bouton « En savoir plus ».
Page 2 — À propos ou Contact : Créez une structure claire avec titre, texte et au minimum une image. Pour la page Contact, vous ajouterez un formulaire de contact à la séance 4.
💡 Pour l’instant, laissez les pages en Brouillon (ne publiez pas encore) — vous les publierez quand votre site sera complet.
EX 2.4 — Créer 2 articles (15 min)
Allez dans Articles → Ajouter et créez deux articles dans vos catégories :
- Article 1 : Titre accrocheur, paragraphe d’introduction (3–4 phrases), une image optimisée, catégorie assignée
- Article 2 : Même structure, catégorie différente si possible
Pour chaque article, renseignez aussi une image à la une (panneau droit → Image à la une).
À la prochaine séance
La séance 3 porte sur la navigation et la mise en page : vous créerez votre menu principal, configurerez la page d’accueil statique, et commencerez à travailler sur l’apparence de votre site avec les menus et les widgets.
Pour préparer : regardez 2 ou 3 sites dans votre domaine que vous trouvez bien faits. Notez comment leur navigation est organisée : combien d’entrées dans le menu ? Y a-t-il des sous-menus ? Quel est le premier message sur la page d’accueil ?
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