DÉVELOPPEMENT WEB
Travaux Pratiques
Développement Web
Travaux Pratiques
Dr Abdul Nasser RAOUF
29 octobre 2025
1
DÉVELOPPEMENT WEB
Travaux Pratiques
Table des matières
1 Description de l’UE 6
2 Objectifs des TPs 7
1 Installation et découverte (4 heures) 8
1.1 Installation de LocalWP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.1.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.1.2 Prérequis Système Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.1.3 Téléchargement de LocalWP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.1.4 Installation Pas à Pas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.2 Premier Site WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
1.2.1 Création du Premier Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
1.2.2 Configuration de l’environnement . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
1.2.3 Accès au site et à l’administration . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
1.3 Livrables de la séance 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
2 Administration WordPress (4 heures) 25
2.1 Découverte de l’environnement & de la gestion du contenu . . . . . . . . . . . . . . . . . . 25
2.1.1 Exploration du tableau de bord . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
2.1.2 Les articles et les pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
2.1.3 Gestion des utilisateurs et rôles . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
2.2 Contenu de Base et Personnalisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
2.2.1 Création des pages fondamentales . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
2.2.2 Personnalisation de l’apparence . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
2.2.3 Gestion des menus de navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
2.3 Livrables de la séance 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
A Problèmes possibles 38
A.1 Installation bloquée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
A.2 Le site ne démarre pas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
A.3 Erreur de certificat SSL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
A.4 Conflit de ports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
TABLE DES MATIÈRES 1
DÉVELOPPEMENT WEB
Travaux Pratiques
Table des figures
1.1 Configuration système requise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.2 Installateur LocalWP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.3 Contrat de licence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.4 Choix du répertoire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.5 Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
1.6 Premier lancement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
1.7 Lancement de LocalWP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
1.8 Créer un nouveau site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
1.9 Nom du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
1.10 Option Préférée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
1.11 Informations de connexion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
1.12 Fin de création du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
1.13 Accès au site dans l’explorateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
1.14 Renseignement des champs de login . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
1.15 Enregistrement des informations de connexion . . . . . . . . . . . . . . . . . . . . . . . . 17
1.16 Tableau de bord de WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
1.17 Onglet Overview dans LocalWP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
1.18 Version de PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
1.19 Configuration PHP du site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
1.20 Dossier de localisation du fichier [Link] . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
1.21 Fichier [Link] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
1.22 Acces a la base de données MySQL via AdminNeo . . . . . . . . . . . . . . . . . . . . . . 20
1.23 Localisation du fichier [Link] . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
1.24 Tables WordPress dans AdminNeo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
1.25 Exécution de requêtes SQL dans AdminNeo . . . . . . . . . . . . . . . . . . . . . . . . . 22
1.26 Export de sauvegardes dans AdminNeo . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
1.27 Import de sauvegardes dans AdminNeo . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
1.28 Modification de données dans AdminNeo . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
1.29 Accéder au site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
2.1 Ouverture du Tableau de bord WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
2.2 Menu du Tableau de bord WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
2.3 Personnalisation du Tableau de bord à travers les Widgets . . . . . . . . . . . . . . . . . . 27
2.4 Ajouter un nouvel article . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
2.5 Titre d’article . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
2.6 Contenu d’article . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
2.7 Catégorie d’article . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
2.8 Publication d’article . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
2.9 Verification de l’article dans Activité . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
TABLE DES FIGURES 2
DÉVELOPPEMENT WEB
Travaux Pratiques
2.10 Ajout d’un compte et d’un rôle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
2.11 Ajout de pages nouvelles dans "Pages Toutes les pages" . . . . . . . . . . . . . . . . . 31
2.12 Contenu de la page Contact" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
2.13 Accès à "Réglage Lecture" dans le menu . . . . . . . . . . . . . . . . . . . . . . . . . . 32
2.14 Définir la page en page statique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
2.15 Définir la page "Accueil" comme page d’accueil . . . . . . . . . . . . . . . . . . . . . . . . 33
2.16 Thèmes d’apparence de site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
2.17 Ajout d’un thème d’apparence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
2.18 Prévisualisation du thèmes "Astra" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
2.19 Installation et activation du thèmes Astra . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
2.20 Personnalisation du thèmes "Astra" dans "Apparence" . . . . . . . . . . . . . . . . . . . . 35
2.21 Création d’un menu principal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
2.22 Création d’un menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
2.23 Publication d’un menu principal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
2.24 Vérification du menu principal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
TABLE DES FIGURES 3
DÉVELOPPEMENT WEB
Travaux Pratiques
Liste des tableaux
1.1 Description de l’UE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
LISTE DES TABLEAUX 4
SÉANCE 1
Description de l’UE
Code UE RDW233407
Enseignant Dr Abdul Nasser RAOUF
Niveau Master 1
Spécialité EST
Durée 20 heures
Mode TP/Projet
TABLE 1.1 – Description de l’UE
SÉANCE 2
Objectifs des TPs
SÉANCE 1
Installation et découverte (4 heures)
1.0 OBJECTIFS DE LA SÉANCE 1
— Maîtriser l’installation d’un environnement de développement WordPress local
— Savoir créer et configurer un site WordPress from scratch
— Comprendre l’interaction entre WordPress, PHP et MySQL
— Être capable d’accéder et de gérer la base de données WordPress
— Préparer l’environnement pour les développements futurs
1.1 INSTALLATION DE LOCALWP
1.1.1 Introduction
LocalWP est un environnement de développement local pour WordPress. L’utilisation de LocalWP pour les
travaux pratiques apporte l’avantage d’une installation simplifiée avec une interface graphique intuitive, de
développer sur des projets isolés et de faciliter l’export/import des projets vers les hébergeurs.
1.1.2 Prérequis Système Windows
Pour pouvoir utiliser LocalWP, il est impératif d’avoir cette configuration minimale :
— Windows : 10 ou 11 (64 bits)
— RAM : 4 GB minimum
— Espace disque : 2 GB libre
— Droits administrateurs pour l’installation
F IGURE 1.1 – Configuration système requise
Vous pouvez vérifier votre configuration de la façon suivante :
1. Version Windows : Win + R winver
2. Espace disque : Explorateur Ce PC
3. RAM : Ctrl + Shift + Échap Onglet Performance
DÉVELOPPEMENT WEB
Travaux Pratiques
1.1.3 Téléchargement de LocalWP
Étape 1 Accès au site
(a) Ouvrez votre navigateur
(b) Allez sur https: // localwp. com
(c) Cliquez sur "Download for Windows"
Étape 2 Téléchargement du fichier .exe
— Nom du fichier : Local-[version].exe
— Taille : 725 MB
— Enregistrez-le dans votre dossier Téléchargements
1.1.4 Installation Pas à Pas
Étape 1 Lancement de l’installateur
(a) Allez dans votre dossier Téléchargements
(b) Double-cliquez sur Local-[version].exe
F IGURE 1.2 – Installateur LocalWP
(c) Autorisation UAC : Cliquez sur "Oui"
Étape 2 Assistant d’installation
— Acceptez le contrat de licence
F IGURE 1.3 – Contrat de licence
— Choix du répertoire :
C :\Users\[Vous]\AppData\Local\Programs\Local
CHAPITRE 1. INSTALLATION ET DÉCOUVERTE (4 HEURES) 8
DÉVELOPPEMENT WEB
Travaux Pratiques
F IGURE 1.4 – Choix du répertoire
— Création du raccourci menu Démarrer
— Création du raccourci bureau (recommandé)
Étape 3 Installation
— Laissez l’installation se dérouler (2-5 minutes)
— Barre de progression verte
— Ne pas interrompre
CHAPITRE 1. INSTALLATION ET DÉCOUVERTE (4 HEURES) 9
DÉVELOPPEMENT WEB
Travaux Pratiques
F IGURE 1.5 – Installation
Étape 4 Premier lancement
(a) Cochez "Run Local" si décoché
(b) Cliquez sur "Finish"
(c) Lancez LocalWP ensuite depuis le menu Démarrer ou le Bureau
CHAPITRE 1. INSTALLATION ET DÉCOUVERTE (4 HEURES) 10
DÉVELOPPEMENT WEB
Travaux Pratiques
F IGURE 1.6 – Premier lancement
L’option "Run Local" lors de l’installation de LocalWP est une option très pratique. Voici ce que cela
signifie :
"Run Local" = Hébergement Local Simplifié par LocalWP
Quand cette option est cochée, LocalWP fait deux choses principales :
i Création d’un Domaine Local Automatique : Au lieu d’utiliser localhost ou une IP complexe,
LocalWP crée une URL de type "vrai site web" mais qui fonctionne uniquement sur votre
machine. Si votre site s’appelle mon-blog, l’URL sera [Link] et ce sera beaucoup plus
propre et réaliste pour développer.
ii Configuration SSL Intégrée : LocalWP configure automatiquement un certificat SSL pour votre
site local. Votre site sera accessible en https :// même en local. Il n’est donc plus nécessaire de
configurer manuellement les certificats auto-signés.
En pratique, lorsque "Run Local" est coché, l’URL du site devient :
https: // mon-site-test. local
Le site se comporte comme un vrai site web avec connexion sécurisée. En revanche, sans
"Run Local", l’URL du site devient :
http: // localhost: 1000
L’URL est donc moins professionnelle et il n’y a pas de SSL par défaut.
CHAPITRE 1. INSTALLATION ET DÉCOUVERTE (4 HEURES) 11
DÉVELOPPEMENT WEB
Travaux Pratiques
1.2 PREMIER SITE WORDPRESS
1.2.1 Création du Premier Site
Étape 1 Lancement de LocalWP en utilisant le menu Démarrer :
F IGURE 1.7 – Lancement de LocalWP
Étape 2 Cliquez sur "Créer un nouveau site" et ensuite sur "Continuer" :
F IGURE 1.8 – Créer un nouveau site
Étape 3 Donnez un nom à votre site et "Continuez" en utilisant la structure de nom suivante :
TP_Dev_Web_Votre_Nom
CHAPITRE 1. INSTALLATION ET DÉCOUVERTE (4 HEURES) 12
DÉVELOPPEMENT WEB
Travaux Pratiques
F IGURE 1.9 – Nom du site
Étape 4 Sélectionnez l’option "Préférée" et "Continuez" :
F IGURE 1.10 – Option Préférée
Étape 5 Définissez un Username et un Password WordPress, sélectionnez la langue française et "Ajoutez
le site" :
CHAPITRE 1. INSTALLATION ET DÉCOUVERTE (4 HEURES) 13
DÉVELOPPEMENT WEB
Travaux Pratiques
F IGURE 1.11 – Informations de connexion
Étape 6 Attendez la fin de la création du site et acceptez l’UAC :
F IGURE 1.12 – Fin de création du site
Prenez le temps de bien identifier les différents éléments de cette interface. Vous voici avec votre
gestionnaire de sites LocalWP.
Étape 7 Accès au site en cliquant sur "WP Admin"
— Admin WordPress : Bouton "ADMIN"
— Site public : Bouton "VIEW SITE"
— Adresse :
https: // mon-premier-tp. local
Étape 8 Accédez au site :
Il n’y a aucun danger !
CHAPITRE 1. INSTALLATION ET DÉCOUVERTE (4 HEURES) 14
DÉVELOPPEMENT WEB
Travaux Pratiques
F IGURE 1.13 – Accès au site dans l’explorateur
Notez bien l’ajout de /wp-admin qui vous permet de modifier le site :
http: // tpdevwebdrraouf. local/ wp-admin/
Étape 9 Renseignez les champs de login suivants en utilisant les informations données en Étape 5 :
F IGURE 1.14 – Renseignement des champs de login
Étape 10 Enregistrez vos informations de connexion pour une connexion future facilitée.
CHAPITRE 1. INSTALLATION ET DÉCOUVERTE (4 HEURES) 15
DÉVELOPPEMENT WEB
Travaux Pratiques
F IGURE 1.15 – Enregistrement des informations de connexion
Vous voici maintenant sur l’outil "Tableau de bord" de WordPress qui va vous permettre de réaliser le
design graphique de votre site Web :
F IGURE 1.16 – Tableau de bord de WordPress
Prenez le temps de découvrir le "Tableau de bord" et d’identifier les différents éléments. La documentation
en ligne est disponible en cliquant sur le lien suivant :
[Link]
Un fichier PDF joint est aussi disponible : [Link]
CHAPITRE 1. INSTALLATION ET DÉCOUVERTE (4 HEURES) 16
DÉVELOPPEMENT WEB
Travaux Pratiques
1.2.2 Configuration de l’environnement
i Configuration de l’environnement PHP
1. Cliquez sur votre site dans l’interface LocalWP :
F IGURE 1.17 – Onglet Overview dans LocalWP
2. Cliquez sur "PHP" dans la sidebar et sélectionnez la version 8.2.27 de PHP :
F IGURE 1.18 – Version de PHP
Pour avoir plus d’informations sur sa configuration, il faut visiter ce lien :
[Link]
CHAPITRE 1. INSTALLATION ET DÉCOUVERTE (4 HEURES) 17
DÉVELOPPEMENT WEB
Travaux Pratiques
F IGURE 1.19 – Configuration PHP du site
3. Configurez [Link] pour gérer la mémoire, le temps d’exécution et autres :
F IGURE 1.20 – Dossier de localisation du fichier [Link]
CHAPITRE 1. INSTALLATION ET DÉCOUVERTE (4 HEURES) 18
DÉVELOPPEMENT WEB
Travaux Pratiques
F IGURE 1.21 – Fichier [Link]
ii Configuration de l’environnement MySQL
La procédure d’accès à la configuration MySQL dans LocalWP est la suivante :
1. Ouvrir LocalWP et sélectionner le site
2. Cliquer sur "Database" dans le menu du site
3. Choisir "Open AdminNeo" pour accéder à l’interface de gestion
F IGURE 1.22 – Acces a la base de données MySQL via AdminNeo
4. Utiliser les identifiants pré-remplis pour se connecter.
Afin de retrouver les paramètres de connexion, il faut donc :
— Accéder au fichier [Link] dans le dossier du site
CHAPITRE 1. INSTALLATION ET DÉCOUVERTE (4 HEURES) 19
DÉVELOPPEMENT WEB
Travaux Pratiques
F IGURE 1.23 – Localisation du fichier [Link]
— Localiser les constantes :
— DB_NAME → nom de la base
— DB_USER → utilisateur
— DB_PASSWORD → mot de passe
— DB_HOST → hôte
Dans l’admistrateur de base de données AdminNeo, il est possible de :
— Visualiser les tables WordPress
[Link]
F IGURE 1.24 – Tables WordPress dans AdminNeo
CHAPITRE 1. INSTALLATION ET DÉCOUVERTE (4 HEURES) 20
DÉVELOPPEMENT WEB
Travaux Pratiques
— Exécuter des requêtes SQL
F IGURE 1.25 – Exécution de requêtes SQL dans AdminNeo
— Exporter/Importer des sauvegardes
F IGURE 1.26 – Export de sauvegardes dans AdminNeo
CHAPITRE 1. INSTALLATION ET DÉCOUVERTE (4 HEURES) 21
DÉVELOPPEMENT WEB
Travaux Pratiques
F IGURE 1.27 – Import de sauvegardes dans AdminNeo
— Modifier les données directement
F IGURE 1.28 – Modification de données dans AdminNeo
Réinitialisation de la base :
Menu "Database"
"Reset" Confirmer l’effacement
Cette procédure permet un contrôle complet de la base de données sans configuration manuelle.
1.2.3 Accès au site et à l’administration
Cliquez sur :
Pages > Toutes les pages > Voir
F IGURE 1.29 – Accéder au site
CHAPITRE 1. INSTALLATION ET DÉCOUVERTE (4 HEURES) 22
DÉVELOPPEMENT WEB
Travaux Pratiques
1.3 LIVRABLES DE LA SÉANCE 1
— Environnement LocalWP opérationnel
— Premier site WordPress accessible
— Compréhension de l’écosystème LocalWP
CHAPITRE 1. INSTALLATION ET DÉCOUVERTE (4 HEURES) 23
SÉANCE 2
Administration WordPress (4 heures)
2.0 OBJECTIFS DE LA SÉANCE 2
— Se familiariser avec l’interface d’administration et comprendre la structure d’un backoffice
— Créer et publier un nouvel article
— Ajouter des comptes et gérer les rôles des utilisateurs
— Créer une structure de base d’un site WordPress
— Personnaliser un thème sans coder
— Créer et gérer la navigation d’un site
2.1 DÉCOUVERTE DE L’ENVIRONNEMENT & DE LA GESTION DU CONTENU
2.1.1 Exploration du tableau de bord
Vous venez d’installer WordPress avec LocalWP. C’est ici le centre de commande. Vous devez vous
familiariser avec l’interface d’administration et comprendre la structure du backoffice. Voici les différentes
étapes à suivre pour cette activité :
Étape 1 Connectez-vous à votre site LocalWP et accédez à WordPress en cliquant sur WP Admin. Le
Tableau de bord WordPress va s’ouvrir.
F IGURE 2.1 – Ouverture du Tableau de bord WordPress
Étape 2 Dans le Tableau de bord, identifiez les sections principales : le menu de gauche, la zone de travail
centrale.
DÉVELOPPEMENT WEB
Travaux Pratiques
F IGURE 2.2 – Menu du Tableau de bord WordPress
Étape 3 Cliquez sur chaque élément du menu (Accueil, Articles, Médias, Pages, Commentaires, Appa-
rence, Extensions, Comptes, Outils, Réglages) et décrivez briévement leur utilité.
Étape 4 Personnalisez votre Tableau de bord en explorant les Widgets :
CHAPITRE 2. ADMINISTRATION WORDPRESS (4 HEURES) 25
DÉVELOPPEMENT WEB
Travaux Pratiques
F IGURE 2.3 – Personnalisation du Tableau de bord à travers les Widgets
Le Tableau de bord vous permet de personnaliser les Widgets, de petites fenêtres qui affichent des
informations essentielles. Pour comprendre leur rôle, observez ceux déjà présents : "Activité" vous
montre les derniers événements, "D’un coup d’œil" résume l’état de votre site, "État de santé du
site" vérifie ses performances, et "Brouillon rapide" vous permet de noter une idée rapidement.
N’hésitez pas à les réorganiser par un simple glisser-déposer pour créer un tableau de bord qui vous
ressemble.
2.1.2 Les articles et les pages
i Création d’un article
Étape 1 Aller dans la section Articles Dans votre tableau de bord LocalWP :
— Cliquez sur "Articles" dans le menu de gauche
— Puis sur "Ajouter un article"
F IGURE 2.4 – Ajouter un nouvel article
Étape 2 Créer le titre de votre premier article :
F IGURE 2.5 – Titre d’article
CHAPITRE 2. ADMINISTRATION WORDPRESS (4 HEURES) 26
DÉVELOPPEMENT WEB
Travaux Pratiques
Étape 3 Configurer du contenu au choix :
F IGURE 2.6 – Contenu d’article
Étape 4 Modifier la catégorie de l’article :
F IGURE 2.7 – Catégorie d’article
Les catégories servent à classer et organiser vos articles par thème pour mieux les retrouver et aider
les visiteurs à naviguer.
CHAPITRE 2. ADMINISTRATION WORDPRESS (4 HEURES) 27
DÉVELOPPEMENT WEB
Travaux Pratiques
Étape 5 Publier l’article en cliquant à droite de l’écran, sur "Publier" :
F IGURE 2.8 – Publication d’article
L’article est maintenant en ligne ! Maintenant, Retournez sur le Tableau de bord et observez le widget
"Activité" :
CHAPITRE 2. ADMINISTRATION WORDPRESS (4 HEURES) 28
DÉVELOPPEMENT WEB
Travaux Pratiques
F IGURE 2.9 – Verification de l’article dans Activité
2.1.3 Gestion des utilisateurs et rôles
Pour ajouter un compte et un rôle, cliquez sur Comptes Ajouter un compte :
F IGURE 2.10 – Ajout d’un compte et d’un rôle
Étape 1 Créez un utilisateur_test avec le rôle "Contributeur"
Étape 2 Connectez-vous avec ce compte
Étape 3 Essayez de créer un article constatez les limitations
Étape 4 Reconnectez-vous en admin, changez le rôle en "Auteur"
Étape 5 Retestez voyez la différence
CHAPITRE 2. ADMINISTRATION WORDPRESS (4 HEURES) 29
DÉVELOPPEMENT WEB
Travaux Pratiques
Étape 6 Recommencez avec "Éditeur"
2.2 CONTENU DE BASE ET PERSONNALISATION
2.2.1 Création des pages fondamentales
Pour cette activité, il faut créer une structure de base d’un site WordPress :
Étape 1 Créez 4 pages essentielles :
— Accueil (page d’accueil du site)
— À propos (présentation)
— Blog (Page d’archive des articles)
— Contact (formulaire de contact)
F IGURE 2.11 – Ajout de pages nouvelles dans "Pages Toutes les pages"
Étape 2 Rédigez un contenu minimal :
— À propos : 2-3 phrases de présentation
— Blog : "Découvrez tous mes articles ci-dessous"
— Contact : "Utilisez le formulaire ci-dessous"
F IGURE 2.12 – Contenu de la page Contact"
Étape 3 Paramétrez la page d’accueil :
— Allez dans Réglages Lecture
CHAPITRE 2. ADMINISTRATION WORDPRESS (4 HEURES) 30
DÉVELOPPEMENT WEB
Travaux Pratiques
F IGURE 2.13 – Accès à "Réglage Lecture" dans le menu
— "Votre page d’accueil affiche" "Une page statique"
F IGURE 2.14 – Définir la page en page statique
CHAPITRE 2. ADMINISTRATION WORDPRESS (4 HEURES) 31
DÉVELOPPEMENT WEB
Travaux Pratiques
— Définissez cette page comme page d’accueil :
F IGURE 2.15 – Définir la page "Accueil" comme page d’accueil
— Page des articles : Blog
2.2.2 Personnalisation de l’apparence
Pour cette activité, vous devez personnaliser le thème sans coder en suivant les étapes suivantes :
Étape 1 Explorez le personnalisateur de thèmes d’apparence :
— Allez dans Apparence Thèmes.
F IGURE 2.16 – Thèmes d’apparence de site
— Cliquez sur "Ajouter un thème" puis sur "Thèmes populaires".
CHAPITRE 2. ADMINISTRATION WORDPRESS (4 HEURES) 32
DÉVELOPPEMENT WEB
Travaux Pratiques
F IGURE 2.17 – Ajout d’un thème d’apparence
— Prévisualiser les thèmes "Astra" ou "Hello Elementor" (ils sont légers et parfaits pour ap-
prendre).
F IGURE 2.18 – Prévisualisation du thèmes "Astra"
— Installez et activez le thème "Astra". Votre site a maintenant un nouveau look !
CHAPITRE 2. ADMINISTRATION WORDPRESS (4 HEURES) 33
DÉVELOPPEMENT WEB
Travaux Pratiques
F IGURE 2.19 – Installation et activation du thèmes Astra
Étape 2 Personnaliser le thèmes en allant dans Apparence Personnaliser :
F IGURE 2.20 – Personnalisation du thèmes "Astra" dans "Apparence"
— Couleurs : Changez la couleur principale
— Logo : Ajoutez un logo (image simple)
CHAPITRE 2. ADMINISTRATION WORDPRESS (4 HEURES) 34
DÉVELOPPEMENT WEB
Travaux Pratiques
— Arrière-plan : Choisissez une couleur de fond
— Typographie : Changez la police (si disponible)
— En-tête et pied de page :
— Modifiez le texte du pied de page
— Ajoutez un slogan dans l’en-tête
— Utilisez des couleurs contrastées pour bien voir les changements
2.2.3 Gestion des menus de navigation
Pour cette activité, vous devrez créer et gérer la navigation du site, en créant un menu :
Étape 1 Allez dans "Apparence Menus"
F IGURE 2.21 – Création d’un menu principal
Étape 2 Créez un menu avec pour nom "Mon Menu" :
F IGURE 2.22 – Création d’un menu
Étape 3 Ajoutez des pages au menu :
— Sélectionnez les 4 pages créées
— Ajoutez-les au menu
— Réorganisez l’ordre par glisser-déposer
Étape 4 Paramétrez l’emplacement en assignant le menu à "Menu principal" et publiez :
CHAPITRE 2. ADMINISTRATION WORDPRESS (4 HEURES) 35
DÉVELOPPEMENT WEB
Travaux Pratiques
F IGURE 2.23 – Publication d’un menu principal
Étape 5 Testez la navigation :
— Allez sur la page d’accueil
— Vérifiez que le menu fonctionne
— Testez tous les liens
F IGURE 2.24 – Vérification du menu principal
2.3 LIVRABLES DE LA SÉANCE 2
— Maîtrise du backoffice WordPress
— Site avec structure de base (Accueil, À propos, Blog, Contact)
— Menu de navigation fonctionnel
CHAPITRE 2. ADMINISTRATION WORDPRESS (4 HEURES) 36
ANNEXE A
Problèmes possibles
A.1 INSTALLATION BLOQUÉE
A.2 LE SITE NE DÉMARRE PAS
A.3 ERREUR DE CERTIFICAT SSL
A.4 CONFLIT DE PORTS