Créer un site WordPress pas à pas : le cas BatiPro 🏗️
Vous êtes recruté·e au sein de la société BatiPro, entreprise spécialisée dans la construction de maisons individuelles clés en main, qui se diversifie progressivement dans la construction de maisons à ossature bois (MOB).
Votre mission : créer un site vitrine WordPress pour améliorer la visibilité de BatiPro sur internet. Vous disposez d’un dossier d’annexes numériques (textes, images, vidéo) et d’une série de tutoriels vidéo.
Pour réaliser ce tutoriel dans de bonnes conditions, chaque étudiant dispose d’un site d’entraînement WordPress dédié. Trouvez votre prénom dans le tableau ci-dessous et cliquez sur le lien correspondant : c’est l’adresse à utiliser pendant tout le module.
🔑 Identifiants (login / mot de passe) : fournis par le professeur en début de séance.
À la fin de ce tutoriel, vous devrez être capable de :
- Faire la différence entre frontoffice et backoffice dans WordPress.
- Installer et personnaliser un thème adapté à un site vitrine.
- Créer les pages de base : Accueil, Nos prestations, Contact.
- Créer une catégorie d’articles et publier des articles dans le blog.
- Mettre en forme vos contenus en utilisant les ressources fournies (textes, images, vidéo).
Mini glossaire 🧠
- Frontoffice : partie publique du site, visible par les visiteurs.
- Backoffice : interface d’administration réservée aux personnes qui gèrent le site.
- Thème : modèle graphique qui contrôle l’apparence du site.
- Extension (plugin) : module qui ajoute une fonctionnalité.
- Widget : petit bloc de contenu affiché dans une zone précise.
- Page : contenu “statique” (Accueil, Prestations, Contact…).
- Article : contenu d’actualité publié dans le blog.
- Catégorie : regroupement d’articles par thème.
Plan du chapitre
Étape 1 – Découvrir le backoffice et le frontoffice 🌍
WordPress est divisé en deux grandes parties :
- Frontoffice : la partie publique du site, visible par tous les visiteurs (ex. www.batipro.fr).
- Backoffice : l’interface d’administration, réservée aux personnes qui gèrent le site (ex. www.batipro.fr/wp-admin).
- Connectez-vous au backoffice avec l’URL et les identifiants fournis par votre professeur.
- Ouvrez le frontoffice dans un deuxième onglet.
- Gardez toujours un onglet backoffice et un onglet frontoffice ouverts : après chaque modification, actualisez le frontoffice pour voir le résultat.
Les principaux menus du backoffice
| Menu | Rôle dans le projet BatiPro |
|---|---|
| Articles | Créer et gérer les articles du blog (ex. “Réglementation Énergétique 2020”, “Maison ossature bois”). |
| Médias | Ajouter et gérer les images, vidéos, PDF du site (logo, photos, vidéo des prestations…). |
| Pages | Créer les pages vitrines : Accueil, Nos prestations, Contact… |
| Commentaires | Modérer les commentaires (si vous les activez). |
| Apparence | Choisir et personnaliser le thème, gérer les menus, les widgets… |
| Extensions | Ajouter des fonctionnalités (formulaire de contact, newsletter, SEO…). |
| Comptes | Créer des utilisateurs avec des rôles différents (administrateur, contributeur…). |
| Réglages | Configurer la langue, le fuseau horaire, le format des URL, etc. |
Étape 2 – Installer le thème et personnaliser la page d’accueil 🎨
Dans cette étape, vous allez :
- installer le thème Heroic ;
- modifier le titre du site, le slogan et le logo ;
- paramétrer l’image d’en-tête ;
- ajouter des widgets utiles dans la barre latérale.
🎬 Vidéo 1 – Installer un thème WordPress (Heroic)
Cette vidéo vous montre comment chercher, installer et activer le thème Heroic pour votre site BatiPro.
2.1 Installer le thème Heroic
Chemin : Apparence >> Thèmes >> Ajouter
- Recherchez le thème “Heroic” dans la barre de recherche.
- Cliquez sur “Installer”, puis sur “Activer”.
🎬 Vidéo 2 – Modifier le logo, le titre et le slogan
Suivez cette vidéo pendant que vous remplissez les informations d’identité du site.
2.2 Modifier le titre, le slogan et le logo
Chemin : Apparence >> Personnaliser >> Identité du site
- Titre du site : BATIPRO
- Slogan : Votre maison personnalisée clés en main
- Logo : téléverser BatiPro-logo.png (fichier fourni).
2.3 Paramétrer l’en-tête (image, titre, bouton)
Chemin : Apparence >> Personnaliser >> Homepage Section Setting >> Slider Setting
- Remplacer l’image d’en-tête par batipro-accueil.jpg (photo du chantier / maison BatiPro).
- Compléter les champs (titre, sous-titre, description, bouton) avec les textes comme sur l’illustration ci-dessous.
🎬 Vidéo 3 – Ajouter des widgets à un site WordPress
Cette vidéo illustre comment ajouter et organiser des widgets (coordonnées, logo, etc.) dans la barre latérale.
2.4 Ajouter et paramétrer des widgets utiles
Chemin : Apparence >> Widgets
Dans la barre latérale, ajouter :
- Un widget “Texte préformaté” avec les coordonnées de BatiPro.
- Un widget “Image” qui rappelle le logo de l’entreprise.
- Supprimer les widgets inutiles (Articles récents, Commentaires récents, etc.).
Étape 3 – Créer les pages et publier le contenu 📄
Vous allez maintenant créer les trois pages principales du site vitrine : Accueil, Nos prestations et Contact, en utilisant les textes, images et vidéos fournis.
🎬 Vidéo 4 – Créer une page et ajouter du contenu
Regardez cette vidéo pendant que vous créez vos premières pages (Accueil, Prestations).
3.1 Créer une page d’accueil statique
Chemin : Pages >> Ajouter
- Créer une page intitulée “Accueil”.
- Ajouter le texte de présentation de BatiPro (annexe).
- Insérer la photo batipro-accueil.jpg dans le corps de la page.
Puis définir cette page comme page d’accueil statique :
Chemin : Réglages >> Lecture
- Votre page d’accueil affiche → Une page statique.
- Page d’accueil → Accueil.
3.2 Créer la page “Nos prestations” avec une vidéo
Chemin : Pages >> Ajouter
- Créer une page intitulée “Nos prestations”.
- Ajouter un bloc Vidéo.
- Insérer la vidéo batipro_prestations.mp4 depuis la médiathèque.
🎬 Vidéo 5 – Ajouter un formulaire de contact (Contact Form 7)
Tutoriel pour installer Contact Form 7 et insérer un formulaire dans une page WordPress.
3.3 Créer la page “Contact” avec formulaire
3.3.1 Installer l’extension Contact Form 7
Chemin : Extensions >> Ajouter
- Rechercher “Contact Form 7”.
- Installer puis activer l’extension.
- Un formulaire par défaut “Formulaire de contact 1” est créé.
3.3.2 Créer la page et y insérer le formulaire
Chemin : Pages >> Ajouter
- Créer la page “Contact”.
- Ajouter un bloc Contact Form 7 et sélectionner le formulaire “Formulaire de contact 1”.
- Publier la page.
🎬 Vidéo 6 – Ajouter une carte Google Maps dans WordPress
Tutoriel pour intégrer une carte Google dynamique à la page Contact de BatiPro.
3.3.3 Ajouter une carte Google dynamique
- Aller sur Google Maps et saisir l’adresse de BatiPro.
- Cliquez sur Partager > Intégrer une carte > copier le code HTML.
- Dans la page Contact, ajouter un bloc HTML personnalisé et coller le code.
Étape 4 – Créer le blog BatiPro et publier les premiers articles ✍️
BatiPro souhaite publier régulièrement des contenus d’expertise pour informer ses clients. Pour cela, vous allez créer une catégorie de blog et y publier deux articles.
🎬 Vidéo 7 – Créer des articles et des catégories dans WordPress
Vidéo qui montre comment créer une catégorie et publier des articles dans le blog.
4.1 Créer la catégorie d’articles “Blog”
Chemin : Articles >> Catégories
- Ajouter une catégorie nommée Blog.
- Enregistrer.
4.2 Créer et publier les deux articles
Chemin : Articles >> Ajouter
- Article 1 : “Règlementation Énergétique 2020”
- Texte : annexe fournie.
- Image mise en avant : Reglementation_Energetique_2020.jpg.
- Catégorie : Blog.
- Article 2 : “Maison ossature bois”
- Texte : annexe fournie.
- Image mise en avant : maison-ossature-bois.jpg.
- Catégorie : Blog.
À ce stade, votre site BatiPro doit :
- afficher une page d’accueil statique avec texte + image ;
- proposer une page “Nos prestations” avec une vidéo intégrée ;
- offrir une page “Contact” avec formulaire + carte Google ;
- avoir un blog avec 2 articles publiés dans la catégorie “Blog”.