Skip to Content

Projet Niveau 0 — Site vitrine « Le Club de lecture » (sans code)

⏱️ TL;DR — Votre tout premier contact avec WordPress : monter un site complet et publiable sans écrire une ligne de code, uniquement depuis wp-admin. Objectif : comprendre la différence articles/pages, les menus, les médias, les extensions et l’éditeur de site — le socle sur lequel tout le reste se greffe. On construit le site d’un petit club de lecture (pratique pour le fil rouge « livres » des niveaux suivants).

🎯 Niveau & objectifs

  • Niveau : 0 (découverte). Prérequis : une install WordPress locale (Partie 4) ou un hébergement de test. Aucun code.
  • Durée indicative : 2–4 h.
  • Vous allez pratiquer : tableau de bord, articles vs pages, catégories/étiquettes, médias, menus, extensions, réglages, l’éditeur de site (FSE).

📋 Cahier des charges

Contexte — Un club de lecture local veut un site pour publier ses chroniques et présenter ses rencontres. Pas de budget, pas de dev : tout doit se faire dans l’admin.

Objectif — Livrer un site en ligne, cohérent visuellement, avec du contenu réel et une navigation claire.

Périmètre inclus

  1. Un thème installé et personnalisé (couleurs, logo, titre du site).
  2. 3 pages : Accueil, À propos, Contact.
  3. 5 articles minimum (chroniques de livres), répartis dans 2 catégories (« Romans », « Essais ») avec des étiquettes.
  4. Une image à la une par article (importée dans la médiathèque).
  5. Un menu principal reliant les pages + une page listant les articles.
  6. Une page d’accueil statique définie dans les réglages (pas le flux d’articles par défaut).
  7. Un formulaire de contact via une extension gratuite.
  8. Des permaliens en mode « Titre de la publication ».

Périmètre exclu — Aucun code, aucun thème enfant, aucune extension payante, pas de SEO avancé, pas de performance. On découvre.

Contraintes

  • Thème par blocs (FSE) de préférence (ex. Twenty Twenty-Four/Five), pour rencontrer l’éditeur de site dès maintenant.
  • Contenu en français, cohérent (pas de lorem ipsum partout).

Livrables

  • Le site accessible (URL locale) avec tout le contenu ci-dessus.
  • Une note d’une page : « ce que fait chaque écran de l’admin que j’ai utilisé ».

✅ Critères de réussite

  • La home est une page statique, pas la liste d’articles.
  • Les 5 chroniques apparaissent dans une page d’articles dédiée, filtrables par catégorie.
  • Le menu fonctionne sur toutes les pages.
  • Chaque article a une image à la une visible sur la liste et l’article.
  • Le formulaire de contact envoie (ou log) un message.
  • Les URLs sont lisibles (/mon-article, pas /?p=123).
  • Vous savez expliquer article vs page et catégorie vs étiquette.

🗺️ Endroits à visiter

Avant/pendant le projet, ouvrez et explorez ces écrans — c’est la carte de WordPress :

EndroitMenuPourquoi y aller
Tableau de bordAccueilLe point d’entrée, les notifications, l’état du site
Articles vs PagesArticles / PagesLa distinction fondatrice : flux daté vs contenu statique
Catégories / ÉtiquettesArticles → CatégoriesVos deux taxonomies natives (hiérarchique vs plate)
MédiathèqueMédiasOù vivent les fichiers ; tailles générées automatiquement
Éditeur de siteApparence → ÉditeurLe cœur FSE : gabarits, styles globaux, en-tête/pied
ExtensionsExtensions → AjouterLe magasin ; installez un formulaire de contact
Réglages → LectureRéglagesChoisir la page d’accueil statique
Réglages → PermaliensRéglagesLa structure des URLs (à régler tôt)
ComptesComptesRôles : admin, éditeur, auteur… (utile P2)
Outils → Santé du siteOutilsDiagnostic ; à connaître dès le début

💡 Pour un dev React — Ici, WordPress est un CMS que vous pilotez par son UI, comme vous configureriez un Sanity ou un Strapi via leur back-office. La nuance à intégrer : dans WordPress, le contenu, la présentation (thème/FSE) et les fonctionnalités (extensions) sont trois couches distinctes. Repérez qui fait quoi — c’est la clé de tout le reste.

⚠️ Piège — Réglez les permaliens au tout début. Les changer plus tard casse les liens déjà partagés et impose des redirections. « Titre de la publication » est le bon défaut.

🚀 Étapes suggérées

  1. Réglages → Général (titre, slogan), puis Permaliens.
  2. Installer et activer un thème par blocs.
  3. Créer les 2 catégories, puis les 5 articles avec image à la une.
  4. Créer les 3 pages ; définir Accueil en page statique (Réglages → Lecture).
  5. Construire le menu (Apparence → Éditeur → Navigation).
  6. Personnaliser couleurs/logo dans Styles.
  7. Installer une extension de formulaire ; poser le formulaire sur Contact.
  8. Se relire en navigation privée comme un visiteur.

🎁 Bonus

  • Créez un compte « Auteur » et publiez une chronique sous ce rôle (aperçu de la Partie 2).
  • Ajoutez une page d’archive par catégorie au menu.
  • Testez un motif (pattern) prêt à l’emploi dans une page.

🔗 Chapitres du cours liés


Projet suivant : Niveau 1 — Thème enfant & portfolio structuré.