Formation WordPress

Video Design Formation

Novembre 2025 / Simon Duflo

TPE, indés, assos...

Créer son site web ?

• développement web: code
• logiciel graphique + code, type Dreamweaver
• CMS type WordPress

Développement web

Code HTML, CSS, JS, PhP, MySQL...

Logiciel graphique + code

CMS

WordPress

• le plus répandu

• 63% des sites créés avec des CMS !

• 43% des sites web dans le monde !!!

• 1,86 milliard de téléchargements !!!!

WordPress

CMS open source, gratuit (free)

disponible depuis 2004.

Web 3.0 ?

Sémantique ?

IoT ? (Internet of Things, objets connectés)

Metaverse !?

A.I ???!!!

Open source ? Free ?

(Parenthèse)

• open source : code accessible et éditable, souvent projets collaboratifs et ouverts ≠ logiciel propriétaire

• free : dans le sens "gratuit" en anglais

CMS : Content Management System

Comment ça marche ?

• c'est une application web : s'utilise dans navigateur web, cad indépendant de l'OS de l'ordinateur (Mac, PC, Linux)
• MAIS il faut quand même 3 serveurs, en résumé/simplifié :
• serveur web "Apache" : stocker les fichiers constitutifs du CMS et afficher HTML/CSS (les pages du site) dans les navigateurs web des visiteurs
• serveur base de données "MySQL" (BDD / DB data base) : stocker réglages du site et contenus (rédactionnels, multimédias)
• serveur d'application "PhP" : construire les pages HTML/CSS en interrogeant la BDD

CMS : Content Management System

Comment ça marche ?

CMS : Content Management System

Comment ça marche ?

Tester WP avec un package des 3 serveurs en "local", qui simule un package serveur "web", mais hors-ligne. Gratuit. C'est ce qu'on va faire.

avec le logiciel MAMP

Serveur local : télécharger MAMP

• aller sur https://mamp.info
• cliquer "try now" ou "free download", c'est pareil
• choisir ensuite la version de Mamp selon le processeur de son Mac (Intel ou M1)
• on l'installe sur l'ordi, c'est assez lourd : 1,8 Go
• on a donc dans le répertoire "Applications" du Mac un dossier MAMP et MAMP PRO
• on n'a pas besoin de MAMP PRO
• on travaillera uniquement avec MAMP

Serveur local : configurer MAMP

• dans le répertoire MAMP, on prend le logiciel (icône éléphant) et on le place dans la barre du dock
• on le lance et deux choses se passent :
• la fenêtre du logiciel MAMP s'ouvre
• une "page web locale" http://localhost:8888/MAMP/ s'ouvre dans votre navigateur web par défaut

Serveur local :

fenêtre du logiciel MAMP

• accès à la page "webstart", qui s'est déjà ouverte automatiquement (par défaut)
• "stop" ou "start" : arrêter/démarrer le serveur local
• "localhost" : nom du serveur local
• "préférences" : pour ne pas ouvrir systématiquement la page "webstart" quand on lance MAMP, arrêter le serveur local quand on quitte MAMP etc.
• webserver : Apache, PHP version : comme vu dans le schéma des serveurs, qq slides plus haut

Serveur local : MAMP webstart page

• la page qui s'est ouverte dans le navigateur au lancement du logiciel s'appelle la "webstart page"
• on n'en a besoin qu'une fois, quand on configure MAMP
• on va devoir créer une base de données:
• en haut à gauche de la page, cliquer tools > phpMyAdmin
• la page http://localhost:8888/phpMyAdmin5/ s'ouvre
• elle fait un peu peur à première vue, mais c'est simple :)

Serveur local : MAMP : phpMyAdmin

création d'une base de données

• dans l'onglet "base de données" : nommer et créer une base de données, c'est tout ce dont on a besoin, après on ne touche plus à rien
• conseil : nom simple, par ex : "bddnomdusitelocal" (bdd : base de données)
• obligatoire : créer une BDD par site web local créé avec MAMP et WP (revoir schéma serveurs)

Serveur local :

télécharger WordPress

• maintenant qu'on a installé et lancé MAMP, et qu'on a créé la BDD qui sera liée à notre site WP, il faut:
• télécharger WordPress sur https://fr.wordpress.org/
• cliquer en haut à droite "obtenir WordPress"
• puis en bas de la nouvelle page : "téléchargez WordPress et utilisez-le sur votre site", cliquez le bouton de téléchargement
• un "zip" est alors sur l'ordi, on le dézippe, c'est maintenant un dossier intitulé "wordpress" 
• qu'on va placer dans applications > mamp > htdocs
• très important ! à cet endroit et pas ailleurs !

Serveur local :

télécharger WordPress

• conseil : renommer ce dossier du nom de votre site local
• car il est bien sûr possible de faire plusieurs sites locaux avec MAMP, et de les créer chacun avec WordPress 
• ce qui signifiera re-télécharger WordPress pour chaque site local qu'on va créer: une instance de WP par site local
• (et donc créer aussi une nouvelle BDD dans phpMyAdmin pour chaque site local créé, car chaque site WP doit avoir une BDD, sa propre BDD, "DataBase" en anglais: DB)
• mais comme chaque téléchargement de WP s'appelle toujours "wordpress", je vous conseille de le renommer du nom du site local pour lequel vous le téléchargez

Serveur local :

configurer WordPress

• taper dans la barre d'URL du navigateur: localhost:8888/nomdudossier/wp-admin/setup-config.php
• attention ! on va avoir besoin du nom de la base de données (BDD) qu'on a créé préalablement pour ce site WP
• l'identifiant à renseigner est "root" (convention technique)
• le password à renseigner est "root" aussi
• l'adresse de la BDD à renseigner est "localhost"

Serveur local :

configurer WordPress

Serveur local :

installer WordPress

• vous y êtes presque !
• choisir un nom pour votre site local (modifiable ensuite)
• un identifiant / user name pour votre site WP (non-modifiable)
• un mot de passe, conservez bien ces infos !
• un e-mail de contact (sans importance pour un site local)
• puis cliquez "installer WordPress"

Serveur local:

installer WordPress

Serveur local :

se connecter à WordPress

• vous arrivez sur la page http://localhost:8888/nomdusitelocal/wp-login.php
• renseignez vos identifiant et mot de passe
• cliquez "se connecter"
• ça y est, vous utilisez WP en local !

Utiliser WordPress en ligne ! (pas en local)

WordPress.org ≠ WordPress.com

Bon à savoir !

WordPress.org ≠ WordPress.com

Bon à savoir !

.org (organisation: non commercial) ≠ .com (commercial)

WordPress : le "back-office"

administration et gestion du site

WordPress : le "back-office"

en haut : la barre d'outils

WordPress : liens utiles !

toujours sous le coude

• accessibles depuis le menu WP (logo) en haut à gauche de la barre d'outils
• wpfr.net/ communauté francophone
• codex.wordpress.org/ documentation technique
• wpfr.net/support/ forums francophones

WordPress : le "back-office"

à gauche : la barre de menus

WordPress : le "back-office"

au centre : les modules d'édition

WordPress : le "back-office"

les modules d'édition : astuce !

RGPD !

WordPress

Quelques notions avant d'attaquer

• aujourd'hui WP version 6.7
• Responsive Design : optimisé pour tous les écrans
• éditeur Gutenberg (depuis WP 5)
• block themes (depuis WP 5.8) => FSE : Full Site Editing
• WP initialement un "moteur de blog" (articles ordre antéchronologique), puis bien + versatile
• structure de WP : 3 couches : 1 le noyau: "core", fonctionnalités natives, 2 les extensions : "plugins", ajouts, 3 le thème, cad le design graphique, la mise en page, "l'affichage" (différents éléments affichés selon thème)

WordPress

les 3 couches

WordPress : le thème

l'affichage "classique" du site

WordPress : choisir un thème (template)

• wordpress.org/themes

• depuis le back-office > apparence > thèmes > ajouter

• plein de sites spécialisés de webdesigners:  FabThemes, ThemeForest, Press75, Mojo, ElegantThemes etc...

• certains gratuits, certains payants...

• selon le thème: "affichage" de différents éléments d'informations, cad "information design", ce n'est pas que du design "graphique", pas qu'une question esthétique mais aussi de structuration de l'information

• depuis WP 5.8 et surtout depuis WP 6 : FSE "Full Site Editing" pour les "thèmes basés sur des blocs". Révolution WP mais c'est complexe !

WordPress : créer une page ou un article

• multiples façons : top menu, left-menu...
• le TITRE important pour SEO (indexation web)
• (on fera un focus sur le SEO)
• in éditeur Gutenberg : article : affecter catégorie et tags, image mise en avant, extrait (chapeau) etc. dans l'onglet "article" à droite

WordPress : page ou article :

ergonomie de l'éditeur Gutenberg

• top-bar : "molette": masquer/afficher right-column (onglets article/bloc)
• top-bar : "3 points": masquer/afficher left-column (barre d'outils) avec mode plein écran (attention c'est perturbant entre éditeur et préviz !) masquer top-bar, truc bien: highlight le bloc sur lequel on travaille

WordPress : page ou article

WordPress : multi-utilisateurs

• dimension importante de WordPress :
  un CMS multi-users : on peut administrer, gérer le site à plusieurs personnes, avec plusieurs comptes
• des "rôles" définis par le.a créateur.ice du site, cad l'administrateur.ice du site par défaut
• vous êtes admin ? attention à qui vous donnez accès au site, et quel rôle vous leur attribuez !

WordPress : multi-utilisateurs

• rôles, par ordre de responsabilité et de "droits"
• administrateur.ice : tous les droits, seul.e qui peut changer les rôles des uns et des autres
• éditeur.ice : gestion du contenu du site, mais pas le paramétrage du site (thème, réglages)
• auteur.ice : accès au contenu avec limitations, peut créer article mais pas modif ceux des autres, pas accès aux "catégories" et "tags", pas d'accès aux "pages"
• contributeur.ice : droits très limités, accès aux articles (proposer à la publication seulement) et commentaires
• abonné.e : aucun droit sur gestion site, édition profil, seul avantage par rapport aux visiteurs: afficher articles privés

WordPress : importer des médias

• photos : gif, jpg, png, now also WebP, avif, HEIC
• taille ? dépend du thème => lire la doc du thème
• néanmoins, bonne pratique > Photoshop > exporter pour le web (optimisation des images, rapport qualité/poids le + light possible)
• vous n'avez pas Photoshop? pas de soucis, un plugin fait ça aussi (automatiquement) + des outils en ligne
• bien sûr, importer pas que des images : audio, vidéo, document pdf, feuille de calcul... attention taille upload max !

WordPress : page ou article, en résumé

• top-bar : préviz ordi, simulation tablette et smartphone
• right-column, onglet page/article : visibilité : public, password, privé (admin + éditeurs only)
• date : modifier : antédater ou planifier (date dans le futur)
• épingler article : faire apparaître en haut du site
• tip : n'oubliez pas : click "mettre à jour" si modifs faites !
• tip : top-bar : re-"enregistrer comme brouillon" pour dépublier si besoin (un article ou page déjà publié)
• révisions : historique des enregistrements d'un article, dans la colonne de droite (propriétés page/artil)
• affichage des articles dans le site => dépend du thème !! par ex les metadata du post
• permalien : remember > réglages, utile pour SEO, et lisibilité, custom dans tableau admin ou onglet doc

WordPress : différences article /page

• article : "hot" news, actu "chaude" (rappel : WP initialement moteur de blog)
• page : info "statique", permanente
• principe de menu, et hiérarchie/arbo éventuelle

WordPress : similarités article /page

• s'édite pareillement, avec Gutenberg
• de plus en plus interchangeables
• car WP n'est plus juste un moteur de blogs, depuis longtemps

diff

• pas de taxinomie "catégories" et "tags"
• "I don't believe in categories of any kind", Duke Ellington
• aparté : WordPress et le jazz =)

WordPress : l'éditeur Gutenberg,

en résumé

• éditeur WYSIWYG : What You See Is What You Get, plus que jamais

• logique de blocs : intuitifs, divers et puissants !

• un élément par bloc : paragraphe, image, vidéo, ressource web... il y en a plein dans la "bibliothèque de blocs"

• chaque bloc est customizable, paramétrable

• à droite dans l'interface de l'éditeur : onglets "bloc" et "page" (paramétrer article ou page)

• Gutenberg pour éditer articles et pages

WordPress : widgets ≠ plugins !

• widgets : "composants d'interface": natifs dans WP, constitutifs de WP, exemples : catégories, archives, fil rss, commentaires, meta, nuage de tags
• avec l'éditeur Gutenberg, certains widgets peuvent être intégrés comme blocs au corps de l'article ou page
• plugins : "extensions", ajouts, plus de 59.000 en 2025 sur le site officiel
• avec l'éditeur Gutenberg, certains plugins peuvent être intégrés comme blocs au corps de l'article ou page

WordPress : rappel !

widgets ≠ plugins

WP : plugins utiles / de référence

• Akismet : antispam
• WP Maintenance (site en construction)
• Cookie Notice / Cookie Yes : message d'accueil RGPD
• WP Forms : formulaires de contact conformes RGPD
• Yoast Duplicate Post : dupliquer pages et articles
• Spectra : + de blocs
• All-in-one WP Migration : sauvegardes et export
• Resize Image After Upload, by Short Pixel
• SEO Press : référencement web "naturel"
• Burst Statistics (ou avoir compte Google Analytics 4)
• Wordfence / Secu Press : sécurité anti malware

WordPress: plugins/extensions

• le nombre ralentit le site (performance)
• plus de failles potentielles de sécurité

WordPress : Bonnes pratiques SEO

• titre de la page
• url (WP : slug (modifs rapides) + structure permaliens (réglages))
• description de la page => plugin SEO
• choix des mots-clefs de la page => plugin SEO
• inclure des images, optimisées pour le web !...
• ... systématiquement avec un "texte alternatif" (accessibilité)
• site optimisé pour appareil mobile
• structurer la page : H1/H2/H3, paragraphes et phrases clairs, courts
• liens internes à votre site ("maillage" interne)
• liens externes vers d'autres sites web

WordPress : Bonnes pratiques SEO

• image vignette + texte partage pour réseaux sociaux => plugin SEO
• site map, plan du site
• site sécurisé (https)
• site léger et rapide (images optimisées, peu de plugins actifs)
• carte Google Maps géolocalisation ?
   
• back-links : liens d'autres sites web vers votre site => stratégie
• présence sur les réseaux sociaux => stratégie

Quelques liens d'infos sur le SEO "organic"

oclock // adimeo // google // francenum gouv.fr // semrush

Search Engine Optimization

WordPress : Tutos vidéos en français

• Eddy de Whodunit, les meilleurs tutos selon moi
• Alex de WP Marmite
• éventuellement Alexis de WP Origami, parfois bien, parfois non
• éventuellement Greg Noyelle, très bien mais niveau très avancé, geek
   
• le bouquin "Je crée mon site avec WordPress" de Lydia Diaz,
  qui date un peu (2023, rien sur le FSE), à quand une mise à jour ?
   
• et si vous vous passionnez pour WordPress, et habitez Paris ou la RP,
  vous pouvez rejoindre la formidable association "WordPress Paris"

WordPress: rappel: le thème

l'affichage "classique" du site

WordPress: rappel:

choisir un thème (template)

• wordpress.org/themes

• depuis le back-office > apparence > thèmes > ajouter

• plein de sites spécialisés de webdesigners:  FabThemes, ThemeForest, Press75, Mojo, ElegantThemes etc...

• certains gratuits, certains payants...

• remember: pas que du design graphique ! du "design d'information" aussi: du thème choisi dépend l'affichage, ou non, de certains éléments...

• depuis WP 5.8 et surtout depuis WP 6 : FSE "Full Site Editing" pour les "thèmes basés sur des blocs", Révolution WP mais c'est complexe ! Niveau avancé.
  On en parlera cette semaine... !

WordPress: le thème,

c'est plus complexe aujourd'hui

• plusieurs possibilités pour éditer le thème :

• apparence > personnaliser 

• "block theme": nouveauté, s'édite "visuellement", dans Gutenberg, + souple mais pas très lisible ni évident pour les débutants, avec le FSE (Full Site Editing) grande liberté mais c'est complexe, utilisateur avancé / expert !

• utiliser un constructeur de page (Divi builder ou Elementor) avec éventuellement un thème payant, cad être dans une interface et une logique ≠ de Gutenberg !
  quasiment un autre logiciel dans le logiciel WP !

• créer un thème enfant (avec du code CSS)

WordPress: thème:

créer un "thème enfant" (avancé)

• c'est une bonne pratique à effectuer pour modifier un thème téléchargé qui me plaît mais que je souhaite modifier, personnaliser, customizer

• car si on modifie un thème dans l'éditeur de thème de WP, les modifs sont perdues lors des mises à jour, nécessaires, et des erreurs de code peuvent créer des bugs !

• implique de connaître un minimum le code CSS (Cascading Style Sheet), et plus globalement d'être assez à l'aise avec l'écriture de langages web informatiques

WordPress: thème:

créer un "thème enfant" (avancé)

• dans wp-content > themes > créer un répertoire et le nommer par ex "nomdutheme-child"

• on va y placer deux fichiers:

• "functions.php" qui indique à WP de mettre le thème "parent" en file d'attente, cad d'afficher le thème "enfant",
  conseil: copier l'exemple fourni (slide suivant)

• "style.css" où l'on attribue les crédits: nom du thème, auteur, site concerné... voir l'exemple fourni

• also: un plugin gratuit "WP Child Theme Configurator" qui fait ça bien, mais nécessite ensuite de savoir coder en CSS

WordPress: thème "enfant": functions.php

WordPress: thème "enfant":

style.css

WordPress: thème "enfant":

CSS

ensuite écrire, coder en CSS dans l'éditeur de thème de WP les spécificités de design graphique qu'on souhaite effectuer: typos, couleurs, taille des colonnes etc...

Stage WordPress : 2eme partie !
Atelier : création d'un site

• écrire, rédiger succinctement: objectif du site, contenu, audience visée, structure, navigation

• matrice SWOT, marketing : comment distinguer/différencier le site

• information design:

• mindmap: carte heuristique

• wireframe: maquettes, gabarits d'interface

• puis créer/produire les contenus : textes, médias...

• ...selon le design voulu du site

Yapluka !

Bon courage =)

simonduflo@ik.me

linkedin.com/in/simonduflo