Word Press

CMS Wordpress Mr.
ABBASSI Kamel
CMS WordPress
Support de cours avec les ateliers
I. Découvrez WordPress et déployez votre site rapidement

I.1. Découvrez WordPress
Vous avez certainement déjà dû entendre parler de WordPress, en général comme d’un outil
pour créer des blogs. Mais WordPress est bien plus que cela ! Penchons-nous en détail sur ce
qu’est WordPress exactement.
Non aux idées reçues !
WordPress n’est pas (plus en tout cas) une plateforme de création de blogs, c’est aujourd’hui
une plateforme utilisée pour créer tous types de sites, de simples blogs jusqu’à des sites e-
commerce en passant par des solutions intranet, des applications web complexes et même des
applications mobiles !
Découvrez les notions de CMS et d’open source

Qu’est-ce qu’un CMS ?
CMS est l’abréviation “Content Management System” (système de gestion de contenu). Selon
Wikipédia, un CMS "est une famille de logiciels destinés à la conception et à la mise à jour
dynamique de sites web ou d'applications multimédia” (Wikipédia).
En clair, c’est un outil qui va offrir une interface pour créer et gérer les contenus de son site
internet, plutôt que de tout coder à la main.
Que veut dire “open source” ?
La désignation open source, ou « code source ouvert », s'applique aux logiciels (et s'étend
maintenant aux œuvres de l'esprit) dont la licence respecte des critères précisément établis par
l'Open Source Initiative, c'est-à-dire les possibilités de libre redistribution, d'accès au code
source et de création de travaux dérivés. (Wikipédia)
C’est une notion très importante qui explique en partie le succès de solutions comme
WordPress. En clair, cela veut dire que tout le monde a accès au code de WordPress, peut
proposer des contributions, peut proposer WordPress en téléchargement et créer des “forks”
(déclinaisons) de WordPress.
Page 1 sur 84
CMS Wordpress Mr. ABBASSI Kamel
Le fait que WordPress soit open source lui a permis de développer une immense communauté,
très active, ce qui est l’une de ses plus grandes forces aujourd’hui.
Il existe des centaines de CMS dont une grande partie est open source (Joomla, Prestashop,
etc.), mais WordPress se démarque du lot. C’est en effet, et de loin, la solution de loin la plus
populaire pour créer des sites internet. On peut même dire qu’il écrase complètement le marché
! Jugez plutôt :
 WordPress propulse près de 30 % des sites internet dans le monde (près d’un site sur
trois !).
 50 000 sites WordPress sont créés chaque jour !
 60 % des sites utilisant un CMS tournent sur WordPress (WordPress possède plus de la
moitié du marché des CMS).
 Surtout, le second CMS le plus utilisé, Joomla, ne détient qu'environ 10 fois moins de
part de marché que WordPress !
Découvrez l’histoire et les atouts de WordPress

Pour expliquer un tel succès, je vous propose un petit peu d’histoire pour comprendre
l’évolution et les principales caractéristiques de ce CMS.
Au regard du World Wide Web, que nous côtoyons depuis environ 1991, WordPress est plutôt
jeune. En 2003, Mike Little propose sur un forum de créer un “fork” (une déclinaison) d’un
projet existant nommé b2/cafelog et qui était sur le point d’être abandonné par ses développeurs.
Il explique le concept qu’il a en tête et ne tarde pas à être rejoint par un jeune étudiant nommé
Matt Mullenweg.
En 2003, Matt publie la première version de WordPress qui sera très bien accueillie par la
communauté. Cette première “release” apporte de nombreuses nouveautés et une interface
d’administration simple pour la création d’articles de blog (posts en anglais).
L’interface de l’époque était très basique comme vous pouvez le constater !
Page 2 sur 84
Figure 1:Interface de la première version de WordPress
La simplicité
La simplicité d’utilisation de WordPress est un facteur essentiel de son succès ! Attention,
cependant, si WordPress est en effet plus simple que la majorité des autres CMS du marché
(Joomla, Drupal, etc.), il nécessite plus d’efforts que les constructeurs de sites (site builders)
grand public comme Wix ou Squarespace. Mais cela en vaut largement la peine !
En 2004, la version 1.2 voit le jour avec une fonctionnalité qui sera très importante pour la suite
: les extensions (ou plugins en anglais). En bref, c’est la possibilité pour n’importe qui de créer
des extensions permettant d’ajouter des fonctionnalités à WordPress et surtout de les partager
avec la communauté.
“There is a plugin for that!” ("Il y a une extension pour ça !")
Une extension WordPress, c’est donc du code qui peut être ajouté à WordPress pour ajouter des
fonctionnalités spécifiques comme des formulaires de contact, des fonctionnalités e-commerce,
des moyens de paiement, des intégrations sur les réseaux sociaux, etc.
N’importe qui peut créer une extension WordPress et même la proposer sur la bibliothèque
officielle WordPress.org. Elle sera alors disponible pour le plus grand nombre, sous réserve
d’être validée par l’équipe de modération de WordPress.org.
Aujourd’hui, on compte plus de 55 000 extensions gratuites sur WordPress.org et des milliers
d’extensions payantes réparties sur différentes boutiques et marketplaces. À tel point que, quel
que soit le besoin rencontré, on trouve généralement un ou plusieurs plugins qui y répondent.
À cette époque (2004), le leader du marché des CMS était “Moveable Type”, mais il décida de
changer sa licence d’utilisation pour une version plus contraignante, à l’opposé des principes
des licences open source. Cela lui vaut la colère d’un grand nombre d’utilisateurs dont beaucoup
se tournèrent alors vers WordPress.
Page 3 sur 84
La gratuité, la philosophie open source et la communauté
WordPress est toujours resté fidèle aux principes de l’open source et cela lui a permis de
bénéficier d’innombrables contributions à son code ou à ses composants (thèmes, plugins), mais
surtout de pouvoir s’appuyer sur une communauté passionnée partageant des valeurs
communes. Et cela, ça n’a pas de prix ! Pour prendre conscience de cela, il suffit de savoir qu’il
y a eu 128 WordCamps (événements annuels de la communauté WordPress) organisés dans le
monde en 2017, réunissant plus de 41 000 personnes ayant acheté leurs tickets !
En 2005, la nouvelle version de WordPress introduit :
 Les pages, permettant ainsi de créer des sites classiques et non seulement des blogs ;
 Les thèmes, qui permettent d’installer facilement un design sur son site WordPress sur
le même principe que les plugins.
Et toujours en 2005, Automattic, la société créée par le fondateur de WordPress Matt

Mullenweg lance wordpress.com, une plateforme d’hébergement WordPress proposant une
offre gratuite et qui rencontrera un succès phénoménal.
Différence entre WordPress (wordpress.org) et wordpress.com
On confond bien trop souvent WordPress (le CMS open source) et wordpress.com (la
plateforme d’hébergement WordPress) et c’est bien compréhensible lorsque l’on n’est pas un
utilisateur averti ! Mais les deux sont très différents :
 WordPress est le nom du CMS open source. Ce n’est pas une société et il n’a pas de but
lucratif ! WordPress, le CMS, se présente sous forme d’un ensemble de fichiers
téléchargeables gratuitement sur wordpress.org, le site de la fondation WordPress !
 wordpress.com est une solution d’hébergement à but lucratif qui repose sur le CMS
WordPress. Il existe d’innombrables solutions autres que wordpress.com pour héberger
son site WordPress. Nous n’utiliserons d’ailleurs pas wordpress.com pour ce cours, car
la plateforme impose de nombreuses contraintes sur les versions gratuites et d’entrée de
gamme (publicité sur votre site, impossibilité d’accéder au code ou d’installer n’importe
quelle extension, etc.).
En 2010, on voit arriver les custom post types (types de contenus personnalisés) et custom
taxonomies (catégories personnalisées) qui permettent de créer des sites beaucoup plus
complexes avec des types de contenus aux propriétés spécifiques. Par exemple, un type de
Page 4 sur 84
contenu “maison” avec des propriétés telles que la surface ou le nombre de chambres si l’on
veut créer un site de type Airbnb.
En 2012, c’est au tour du customizer, une nouvelle interface centralisant les principaux
paramètres de l’interface WordPress au sein d’une interface plus moderne, plus simple
d’utilisation et permettant de voir en direct les changements effectués sur une grande partie des
réglages de WordPress et du thème. C’est le début du tournant que prend WordPress vers le
langage de programmation JavaScript qui va être au cœur de WordPress 5.0.
WordPress 5.0 est une étape majeure de l’histoire de WordPress. L’idée est de faire évoluer
WordPress pour le rendre plus pertinent pour le web moderne (applications web, API, micro-
services) via l’utilisation d’un nouveau concept de gestion standard des contenus, les blocs, qui
permettent la réutilisabilité des contenus sous différentes formes.
Cette évolution passe en premier lieu par l’intégration dans WordPress de Gutenberg, un nouvel
éditeur de texte riche reposant sur le concept de blocs qui remplace le très connu éditeur
TinyMCE. Nous verrons plus tard que Gutenberg offre beaucoup plus de possibilités en termes
de mise en page et d’intégrations, mais que sa prise en main reste moins évidente que celle de
l’éditeur classique, ce qui est un peu dommage quand on sait qu’il était à l’origine destiné à
faciliter la prise en main par les débutants !
Figure 2:Interface de la version 4.9.8 de WordPress avec Gutenberg activé
I.2. Initiez-vous au fonctionnement d’un site web

Comment fonctionne le web ?
Le web fonctionne sur le principe d’échanges décentralisés entre un client (vous, en général,
via votre navigateur web) et un serveur qui sert à “servir” des pages web (d'où son nom !).
Page 5 sur 84
Pour accéder à un site web, vous rentrez l’adresse d’un site web (dont le nom savant
est URL pour Uniform Resource Locator) dans votre navigateur.
On peut décomposer l’URL en plusieurs parties :
 “HTTP”, c’est le nom du protocole de communication entre le client et le serveur, ici

: Hypertext Transfer Protocol, c’est le protocole le plus utilisé permettant d’afficher des
pages web (c’est-à-dire de l’hyper text : du texte et des liens vers d’autres pages web). Il
en existe d’autres pour d’autres usages, comme FTP (pour File Transfer Protocol) que
vous connaissez peut-être et servant lui à transférer… des fichiers bien sûr !
 “google.com” est le nom de domaine du site web auquel on veut accéder. Le nom de
domaine se loue auprès d’un registrar (fournisseur de nom de domaine), c’est ce qui
permet d’identifier un site web via un nom simple à mémoriser.
 “fr/courses/5489551-creez-un-site-moderne-et-professionnel-avec-
wordpress/5804091-initiez-vous-au-fonctionnement-d-un-site-web” est le chemin
d’accès à la page spécifique que l’on veut afficher au sein de ce site web.
Comment cela se passe-t-il techniquement ?
Votre navigateur va demander sur le réseau la localisation du site google.com. Le réseau va lui
répondre sous la forme d’une IP, qui est en gros l’adresse du serveur sur le réseau, et va
permettre à la requête d’être acheminée sur le serveur contenant le site web.
Une fois la requête acheminée sur le serveur de google, le serveur va regarder le chemin d’accès
de la page demandée et la fournir au format HTML.
Le navigateur va enfin interpréter le HTML fourni pour créer la page web telle que vous la
voyez sur votre écran !
Bref, pour disposer d’un site web en ligne, il vous faut donc un serveur et un nom de domaine
! Rentrons donc un peu plus dans le détail de ces deux concepts.
Qu’est-ce qu’un hébergement web ?

Pour fonctionner, tout site internet s’appuie donc sur un serveur.
En général on loue un serveur auprès d’un hébergeur, mais il est tout à fait possible de créer
son propre serveur chez soi. Cela demande en revanche des compétences techniques qui vont
largement au-delà de ce que l’on couvrira dans ce cours.
Page 6 sur 84
Figure 3:Fonctionnement d'un site internet
Le serveur stocke les fichiers qui composent le site web et exécute le code contenu dans ces
fichiers. Dans le cas de WordPress, il s’agit d’un CMS reposant principalement sur le langage
PHP et sur une base de données MySQL.
Le serveur exécute donc le code PHP de WordPress pour récupérer les informations nécessaires
en base de données et générer la page au format HTML, lisible par votre navigateur web
(Google Chrome, Mozilla Firefox, etc.).
Pour créer votre site WordPress, vous aurez donc besoin d’un hébergement PHP / MySQL.
Deux solutions s’offrent à vous :
 Créer un environnement en local : L’idée est de simuler un serveur sur votre ordinateur
grâce à des logiciels comme MAMP, XAMPP ou encore Local by Flywheel. C’est
gratuit, mais cela demande un peu de configuration et votre site ne sera pas en ligne, il ne
sera accessible que sur votre machine.
 Louer un serveur chez un hébergeur : En vérité, il s’agit souvent de louer un espace sur
un serveur et non un serveur entier. Votre site pourra ainsi être accessible au public via
internet, mais ce n’est pas gratuit. Compter quelques euros par mois pour un hébergement
d’entrée de gamme.
Qu’est-ce qu’un nom de domaine ?

Une fois installé sur un serveur, vous souhaitez que le public puisse facilement accéder à votre
site web. En effet, par défaut, un serveur n’est accessible sur internet que via son adresse IP.
Par exemple, pour Google, c’est 172.217.4.206. Moins simple à retenir que le nom de domaine
Google.com !
Le nom de domaine se loue auprès de fournisseurs spécialisés appelés registrar, comme

Gandi.net. Cela coûte en général une dizaine d’euros par an et il faut ensuite configurer ses
DNS (Domain Name Server) pour faire pointer son domaine sur son serveur. Pas de panique,
nous verrons cela ensemble dans la suite du cours !
Page 7 sur 84
A noter aussi qu’un nom de domaine peut se décliner en plusieurs sous domaines. Par exemple,
blog.monsite.com, shop.monsite.com, www.monsite.com sont différents sous-domaines
déclinés du nom de domaine “monsite.com” et pouvant pointer vers des sites différents. Vous
pouvez créer autant de sous domaines que vous souhaitez à partir d’un nom de domaine et
surtout c’est gratuit.
C’est la raison pour laquelle tous les fournisseurs de sites gratuits (WordPress.com, Wix.com
etc.) permettent de créer gratuitement des sites sur un sous domaine de leur domaine principal.
Nous allons d’ailleurs travailler sur un sous domaine gratuit dans la suite de ce cours ce qui
vous évitera d’acheter un nom de domaine.
I.3. Choisissez votre hébergeur et mettez votre site WordPress

en ligne
Choisissez votre hébergeur
Il existe différents types d’hébergements adaptés à différents besoins :
 Hébergement mutualisé ;
 Hébergement dédié ;
 Hébergement managé (ou infogéré).
Avec un hébergement mutualisé, vous louez une portion d’un serveur qui est partagé avec
d’autres utilisateurs. C’est en général la solution la plus économique et cela peut être suffisant
pour beaucoup de projets mais il y a de nombreuses contraintes : vous avez un accès limité à la
configuration du serveur, vous pouvez subir des effets de noisy neighbours (un site sur le même
serveur que le vôtre utilise trop de ressources ou fait planter le serveur à la suite d’un hack, par
exemple) et le support est généralement très réduit.
Avec un hébergement dédié, vous louez un serveur entier ! C’est évidemment plus cher, mais
vous bénéficiez d’un contrôle total. En revanche, il faut avoir de très bonnes connaissances
techniques pour s’en occuper : c’est généralement à vous de gérer la configuration initiale,
d’intervenir en cas de problème, de gérer les mises à jour des composants comme PHP, etc.
C’est donc généralement réservé à des experts.
Avec un hébergement managé, vous louez un certain niveau de performance et de disponibilité

pour un site sans avoir à vous soucier de la partie serveur. Le prestataire s’occupe de tout pour
vous et garantit le bon fonctionnement de votre site. C’est une solution idéale si vous n’êtes pas
un expert en administration système et que vous souhaitez vous concentrer sur la gestion de
Page 8 sur 84
votre site ou de votre business sans avoir à vous soucier des aspects techniques. Le prix est en
revanche un peu plus élevé que pour un hébergement mutualisé classique.
Pour la réalisation de notre site, nous vous proposons d’utiliser Themecloud, une solution
d’hébergement WordPress managé française.
Outre le fait qu’il s’agit d’un hébergeur français, les raisons de ce choix sont les suivantes. Avec
Themecloud :
 Vous disposez d’un site WordPress en ligne immédiatement et gratuitement

! Contrairement à de nombreux hébergeurs, Themecloud ne vous oblige pas à acheter un
nom de domaine payant pour créer un site et vous bénéficiez d’une période d’essai
gratuite pour l’hébergement. Votre site est donc prêt en moins d’une minute sur un sous-
domaine temporaire du type monsite.themecloud.website. Si vous le souhaitez, vous
pourrez ensuite connecter un nom de domaine très simplement.
Attention : Themecloud propose une période d’essai de 2 jours. Il vous faudra donc tenir ce
délai pour finir votre site si vous ne souhaitez pas vous abonner à un plan d’hébergement.
 Votre site est rapide, sécurisé et sauvegardé tous les jours. Themecloud repose sur
l’infrastructure Google Cloud, une des infrastructures cloud les plus performantes au
monde. Themecloud garantit par ailleurs la sécurité de votre site et sauvegarde votre site
tous les jours, dès le premier jour. Vous pouvez aussi créer autant de sauvegardes
manuelles que vous le souhaitez et surtout les restaurer en un clic. Plutôt pratique lorsque
l’on débute et que l’on veut pouvoir revenir en arrière à la suite d’une mauvaise
manipulation !
 Vous bénéficiez d’un support réactif et en français. Themecloud propose une interface
de support via chat avec un temps de réponse moyen inférieur à 5 minutes ! Et les équipes
sont françaises, ce qui devrait faciliter la vie de certains d’entre vous.
N’hésitez pas à créer un backup manuel de votre site avant toute manipulation dont vous n’êtes
pas sûr. Cela ne prend qu’une minute environ et vous permettra de revenir en arrière rapidement
en cas de problème !
Déployez votre site WordPress

Pour commencer, rendez-vous sur Themecloud, cliquez sur “Sign Up” ou “Inscription” pour
vous inscrire et remplissez les informations demandées.
Page 9 sur 84
Sachez que vous pourrez utiliser ce même compte pour gérer plusieurs projets WordPress.
Plutôt normal pour une solution conçue prioritairement pour les agences et les freelances.
Une fois connecté à Themecloud, cliquez “New Website” et choisissez un nom pour votre site
web. Ce nom définit l’URL temporaire de votre site : [nom].themecloud.website.
Vous pouvez passer l’interface Themecloud en français via l’onglet situé en bas à droite de
l’interface. Nous continuerons cependant d’utiliser les termes en anglais dans la suite du cours.
Figure 4:Interface d’administration de l’hébergeur Themecloud
Nous allons utiliser le nom “bananadesign” pour le site créé dans le cadre de cet exercice, mais
ne choisissez pas le même, chaque nom doit être unique. Après une petite minute de
chargement, votre site est en ligne ! Vous pouvez le visiter en cliquant “Go to my website”.
Facile, non ?
Pendant la période d’essai, le site n’est accessible que par le propriétaire du site. Les visiteurs
non connectés sont redirigés sur une page d’attente.
Alternative : créer votre site en local
Il existe différentes solutions pour installer son site en local.
La plus connue est d’installer MAMP , XAMPP ou WAMP mais une solution plus simple et
plus rapide existe désormais. Il s’agit de Local by Flywheel, un logiciel gratuit disponible pour
Mac et PC et permettant de créer simplement un site WordPress en local grâce à des conteneurs
Docker.
Page 10 sur 84
1. Pour commencer, rendez-vous sur https://local.getflywheel.com, cliquez

“Download” et entrez les informations demandées.
2. Une fois le logiciel téléchargé, ouvrez-le et cliquez “Get Started” pour lancer
l’installation de tous les composants.
3. Une fois installé cliquez l’icône “plus”, “Add new site” et rentrez les informations
demandées. (Choisissez PHP version 7).
4. Une fois le site créé, il apparaît dans la colonne de gauche. Cliquez dessus pour
afficher les accès. Vous pouvez commencer à travailler !
Dans la partie suivante, nous allons rentrer dans le vif du sujet et explorer l’interface
d’administration de votre site WordPress !
II. Prenez en main l’administration de votre site

WordPress
II.1. Connectez-vous au Dashboard WordPress et créez votre
premier article
Les plus pressés délégueront la rédaction de leurs articles auprès d’un rédacteur web. Ce métier,
de plus en plus recherché, permet aux entrepreneurs du web d’avoir un contenu de qualité sur
leur site.
Afin de rendre la suite du cours plus vivante, nous allons travailler sur un cas concret. Nous
sommes en train d’apprendre à créer des sites WordPress, alors quoi de plus naturel que de créer
un site WordPress pour promouvoir une activité de création de sites web ? Nous allons donc
nous mettre dans la peau d’un web designer situé à Bordeaux et souhaitant lancer l’agence
“Banana Design” pour promouvoir son activité.
Connectez-vous au dashboard WordPress

En général, pour vous connecter à l’interface d’administration d’un site WordPress, il faut vous
rendre sur l’URL monsite.com/wp-login.php qui est l'URL de connexion par défaut. Vous
pouvez aussi aller sur l'URL du Dashboard monsite.com/wp-admin qui vous redirigera
automatiquement vers cette dernière.
Vous pouvez alors saisir vos identifiants pour vous connecter.
L’URL de connexion à WordPress
Page 11 sur 84
L’URL de connexion étant la même par défaut pour tous les sites WordPress, il est très facile
pour les hackers de chercher à se connecter à des sites en “brute force” (c’est-à-dire en testant
de nombreuses associations de login / mot de passe).
C’est la raison pour laquelle :
 Il faut absolument éviter de choisir des identifiants et mots de passe trop simples
(l’identifiant de connexion “admin” est à proscrire !) ;
 Il est recommandé de modifier l’URL de connexion par défaut avec une URL
personnalisée difficile à trouver ; nous verrons comment faire cela dans un prochain
chapitre.
Dans le cas de Themecloud, vous n’avez pas choisi d’identifiants de connexion. C’est parce
que Themecloud, comme de nombreux autres hébergeurs spécialisés WordPress, offre un
accès SSO (Single Sign On) qui permet de se connecter en un clic sans avoir à rentrer ses
identifiants (un peu comme Facebook Connect). Cela permet d’optimiser la sécurité des sites
en générant un mot de passe très complexe dont vous n’avez pas à vous souvenir, ce qui est
particulièrement utile lorsque l’on gère plusieurs dizaines de sites !
Il vous suffit donc de cliquer “Go to my Website” et vous serez automatiquement connecté.
Vous pouvez savoir si vous êtes connecté ou non en regardant en haut de la page du site. Si
vous voyez une barre noire proposant des options d’administration (la “top bar”), c’est que vous
êtes bien connecté.
Depuis l’admin bar, il suffit de survoler le nom du site à gauche et de cliquer “Dashboard” pour
accéder à l’interface d’administration WordPress. Une fois dans le Dashboard WordPress, vous
avez accès au menu d’administration de WordPress (à gauche en noir).
Ce menu peut sembler rébarbatif (d’autant plus qu’il est en anglais). Pas d’inquiétude, nous
allons très bientôt le passer en français et vous verrez qu’il est plutôt intuitif et pratique à l’usage
!
Créez votre premier article

Comme vous l’avez certainement remarqué, la page d’accueil de votre site (pas de
l’administration, donc sur l’URL monsite.com, ou dans ce cas précis,
monsite.themecloud.website) est configurée par défaut en mode “blog”. C’est-à-dire qu’elle
liste les contenus de type “articles”.
Page 12 sur 84
WordPress propose par défaut deux types de contenus qui sont les articles et les pages. La
différence entre les deux réside dans la temporalité de la publication et dans la façon d’y
accéder.
 Un article est généralement un contenu d’actualité, daté, et qui prend sa plus grande
valeur au moment de sa publication. On y accède généralement via une page listant les
articles triés de façon antéchronologique (les derniers articles publiés en premier) et non
via un lien dédié dans le menu de navigation. Bref, c’est ce qui constitue ce que l’on
appelle un blog !
 Une page est un contenu statique, généralement non daté et ayant une valeur constante
dans le temps. On s’en sert en général pour présenter une société (page “à propos”), un
service (page “nos services”), des informations et fonctionnalités de contact (page
“contact”) et on y accède généralement via un menu de navigation (dans l’entête ou le
pied de page du site).
WordPress permet aussi de créer des types de contenus personnalisés, aussi appelés Custom
Post Types. Un type de contenu “Produits” est ainsi créé quand vous installez WooCommerce,
l’extension e-commerce n°1 pour WordPress.
Pour commencer à vous familiariser avec l’administration, nous allons commencer par créer un
article. Cela permettra d’avoir un premier résultat visible sur notre site :
1. Cliquez sur “Posts” (articles en anglais).
2. Puis cliquez sur “Add new” (ajouter).
3. Saisissez un titre dans la première zone de contenu en haut.
4. Entrez un peu de contenu dans les zones de contenu suivantes. Vous remarquerez
que, lorsque vous cliquez sur une zone de contenu, le contenu de la barre à droite
(sidebar) change et propose des informations et options contextuelles (dépendant du
bloc cliqué). Vous pouvez revenir à l’affichage des options générales de l’article en
cliquant l’onglet “document” en haut de cette barre.
Page 13 sur 84
Figure 5:Panneau d'administration de WordPress
Nous utilisons ici Gutenberg, le nouvel éditeur WordPress qui repose sur le concept de blocs
pour permettre des mises en pages complexes et simplifier l’ajout de contenus dynamiques
(comme par exemple un formulaire de contact ou une galerie). Vous pouvez aussi choisir
d’utiliser l’éditeur classique, qui vous sera plus familier car son fonctionnement se rapproche
de celui d’éditeurs comme Word.
 Cliquez justement sur l’onglet “document” et ajoutez une catégorie à votre article dans
le bloc “Categories”. Pour cela, cliquez “Add new category”, entrez le nom de la catégorie
souhaitée (nous allons mettre “divers”, vous verrez pourquoi par la suite) et tapez
“entrée”.
WordPress propose par défaut deux façons de trier ses articles :
 Les catégories, qui ont une hiérarchie (on peut créer des sous-catégories) et qu’il faut
choisir soigneusement pour refléter de façon pertinente les sujets traités dans le blog et
pour optimiser son référencement naturel. On n’attribue généralement qu’une catégorie
(ou sous-catégorie) par article et on essaye de ne pas multiplier le nombre de catégories
proposées au total ;
 Les tags qui n’ont pas de hiérarchie et que l’on peut attribuer en masse à chaque article.
Leur objectif est d’identifier les sujets importants traités dans l’article et récurrents sur le
blog.
Page 14 sur 84
 Ajoutez ensuite une image dans le bloc “Featured Image” qui correspond à l’image
principale rattachée à l’article. Elle sera utilisée pour illustrer l’article dans les listes
d’articles et pourra servir d’illustration principale dans l’entête de l’article.
 Cliquez maintenant sur l’icône “plus” située en haut à gauche de la page. Cette icône
permet d’ajouter un nouveau bloc à notre contenu. Sélectionnez le type de bloc “image”.
Un bloc “image” est ainsi ajouté en dernière position de votre contenu. Cliquez “upload”
pour téléverser une image depuis votre ordinateur.
Vous pouvez télécharger les images utilisées dans ce cours en suivant ce lien (https://s3-eu-
west-1.amazonaws.com/course.oc-static.com/courses/5489551/images-cours.zip).
 Vous pouvez déplacer les blocs en “glissé-déposé” grâce à l’icône présentant 6 petits
points apparaissant au survol d’un bloc ou de façon séquentielle en cliquant sur les flèches
haut et bas encadrant cette icône.
Figure 6: Ajouter une image
1. Enfin, cliquez le bouton “Publish” bleu en haut à droite pour publier votre article.
WordPress offre la possibilité :
2. De sauvegarder les contenus en brouillon (“Save draft”). Cela signifie que l‘article
sera enregistré, mais n’apparaîtra pas sur le site pour les visiteurs ;
3. De prévisualiser le contenu (“Preview”). Cela permet de voir le contenu tel qu’il sera
affiché sur le site sans avoir à le publier ;
4. De “dépublier” un article ‘Switch to draft”. Cela permet, si l’on a publié un article

par erreur ou que l’on ne veut finalement plus qu’il soit accessible, de ne plus
l’afficher sur le site et de le conserver en brouillon.
Page 15 sur 84
Figure 7: La publication de contenus dans WordPress
Vous aurez peut-être remarqué qu’il y a de nombreuses options en haut de la barre de droite.
Vous pouvez :
 Modifier la visibilité (Visibility) : permet d’épingler l’article (le mettre en première

position de la liste quoi qu’il arrive), de rendre l’article privé (accessible seulement aux
utilisateurs connectés) ou de le protéger par mot de passe (très pratique si vous souhaitez,
par exemple, faire valider une nouvelle page par un client sans qu’elle soit accessible au
public).
 Définir une date de publication : permet de planifier la date à laquelle l’article sera
publié, ce qui est très pratique si vous souhaitez conserver un rythme de publication
régulier pendant vos vacances. ;-)
 Épingler l’article “Stick to the front page” pour faire en sorte que l’article soit “épinglé”
en tête de liste même si des articles ont été publiés plus récemment.
Vous pouvez maintenant retourner sur la page d’accueil de votre site en survolant le nom du
site en haut à gauche et en cliquant “Visit website”, avec ctrl ou cmd appuyé afin d’ouvrir
le site dans un nouvel onglet.
Et voilà, votre article est bien visible en première position ! Vous avez publié votre premier
article WordPress.
II.2. Paramétrez les options de votre site WordPress

Passez votre site en français
Comme vous l’avez certainement remarqué, l’interface de WordPress est en anglais. Il est
évidemment possible de la passer en français et nous n’allons donc pas nous en priver.
Page 16 sur 84
Remarque : WordPress est disponible en 65 langues grâce à la communauté ! N’hésitez pas à

contribuer aux traductions de WordPress ou de ses composants
sur https://fr.wordpress.org/team/
Comme la plupart des options générales de WordPress, le choix de la langue se fait dans la
rubrique Settings (réglages) >> General.
Faites défiler un peu la page et vous verrez une ligne “Language” avec un menu déroulant.
Cliquez dessus, sélectionnez la langue souhaitée et enregistrez les réglages grâce au bouton bleu
en bas de page.
Ça y est, votre interface d’administration est en français ! On se sent tout de suite plus à l’aise,
non ?
Remarque : gardez bien ce bouton bleu en tête ! Il est présent sur toutes les pages
d’administration WordPress classiques (parfois dans la colonne de droite plutôt qu’en bas de
page). Vous perdrez vos modifications si vous oubliez de l’utiliser !
Changez le titre et le slogan de votre site

Titre du site
Le nom donné à votre site WordPress lors de la création a été directement appliqué au site créé,
mais il est préférable de choisir un titre un peu plus accrocheur ! En effet, le titre du site est
celui qui va apparaître dans les résultats de recherche Google et est un facteur majeur
d’optimisation du référencement naturel (aussi appelé SEO pour Search Engine Optimization)
de la page.
Remplissez donc ce champ avec un titre un peu plus accrocheur et contenant les mots-clés
pertinents pour votre activité. Pour notre exemple, nous allons choisir le titre : “Agence
WordPress Banana Design”.
Page 17 sur 84
Figure 8: Changer le titre et slogan d'un site
Slogan du site
Le slogan est lui aussi visible dans les résultats de recherche et essentiel pour le SEO. Nous
allons choisir : “Création de sites WordPress de qualité”.
Vous pouvez maintenant visiter votre site (toujours en survolant le nom dans le top bar et en
cliquant “Aller sur le site”). Au survol de l’onglet du navigateur, vous verrez le titre et le slogan
du site !
Comme vous avez dû le voir, il y a de nombreuses autres options dans cette page. Passons-les
rapidement en revue.
Adresse web de WordPress (URL) et adresse web du site (URL)
Attention, zone à risque ! Il ne faut surtout pas modifier ces champs au risque de casser le site.
Ils ne servent qu’à des utilisateurs avancés lors d’un changement de nom de domaine.
Les autres options de la page de réglages généraux

Adresse de messagerie
Comme indiqué, c’est l’adresse à laquelle seront envoyées toutes les notifications. Pas la peine
d’y toucher, à moins qu’elle ne soit pas celle souhaitée.
Inscription
Vous pouvez laisser aux utilisateurs la possibilité de s’inscrire sur votre site. Cela n’a pas
d’intérêt dans le cadre d’un site vitrine et nous laissons donc cette case décochée.
Page 18 sur 84
Rôle par défaut de tout nouvel utilisateur
Cela n’a d’intérêt que si vous laissez les visiteurs s’inscrire sur le site ; nous n’y touchons donc
pas. Les autres options sont assez évidentes et vous pouvez les modifier comme bon vous
semble !
Modifiez la catégorie par défaut de vos articles

Écriture
Cliquez “Écriture” en dessous de la sous-rubrique “Général” de la rubrique “Réglages”.
Seul le premier champ nous intéresse. En effet, nous n’avons pas envie que les articles soient
catégorisés “uncategorized” par défaut. Cliquez le champ et sélectionnez la catégorie “Divers”
créée précédemment. C’est déjà mieux. :-)
Cachez le site aux moteurs de recherche pour le temps des

développements
Lecture
Cliquez ensuite “Lecture” dans le menu du Dashboard( Tableau de bord)
La première section permet de paramétrer ce qui est affiché lorsque l’on se rend sur la page
d’accueil du site. Pour l’instant, nous avons vu que la page d’accueil affiche la liste des articles.
Mais nous ne voulons pas créer un blog et souhaitons donc que la page d’accueil affiche une
page personnalisée.
Nous allons nous y atteler dans le prochain chapitre, mais avant cela, finissons de paramétrer
les réglages généraux du site. Une autre option intéressante sur cette page est l’option
“Demander aux moteurs de recherche de ne pas indexer ce site”. Cela est pratique pour
éviter que des visiteurs puissent tomber sur le site dans des résultats de recherche Google alors
qu’il n’est pas encore fini.
Page 19 sur 84
Figure 9: Options de lecture
Attention : il est très important, mais vraiment TRÈS IMPORTANT, de ne pas oublier de
décocher cette case lors de la mise en ligne du site ! Cela empêcherait votre site ou celui de
votre client d’être référencé sur les moteurs de recherche.
Configurez les paramètres de commentaires

Discussion
Les paramètres de discussion vous permettent de décider si les visiteurs peuvent laisser des
commentaires sur vos pages et articles. Cela ne nous semble pas nécessaire, donc nous allons
décocher la case “Autoriser les lecteurs à publier des commentaires sur les nouveaux
articles “.
Permaliens
Les paramètres de permaliens vous permettent de définir comment sont construites les URL de
vos pages. Nous pouvons laisser l’option date et titre cochée. Il faut en revanche éviter de garder
l’option “Simple” si elle est cochée par défaut. En effet, il est important d’avoir le titre de
l’article dans l’URL pour optimiser le référencement naturel.
Ça y est, nous avons fait le tour des principaux réglages de notre site WordPress. Ce n’est pas
la partie la plus sexy de la création d’un site, mais il est important de connaître ces options et
de bien les paramétrer avant de commencer à travailler. Nous allons maintenant pouvoir mettre
en place notre page d’accueil !
Page 20 sur 84
II.3. Mettez en place une page d’accueil personnalisée et créez

votre menu de navigation
Créez votre page d’accueil et votre page de blog
Avant de configurer votre page d’accueil, il faut tout d’abord en créer une ! Pour cela, on se
rend tout simplement dans “Pages >> Ajouter”.
Saisissez “Banana WordPress Design” comme titre de page et saisissez “Banana WordPress
Design est une agence de webdesign bordelaise spécialisée dans la création de sites
WordPress.” dans la zone de contenu, histoire qu’elle ne soit pas vide.
Il ne reste plus qu’à cliquer “Publier” pour créer la page.
Répétons la manipulation pour créer une page “Blog”. Ne mettez en revanche aucun contenu.
La page affichera en effet la liste des articles publiés sur le site et la zone de contenu ne sera
donc pas utilisée.
Configurez votre page d’accueil et votre page de blog

Maintenant que nos pages sont publiées, rendez-vous dans “Réglages >> Lecture” pour les
configurer en page d’accueil et de blog. En face de “La page d’accueil affiche”, sélectionnez
“Une page statique”. Choisissez “Banana WordPress Design” pour la page d’accueil et “Blog”
pour la page des articles.
Allons sur notre site pour voir ce que ces changements donnent. Comme prévu, la page
d’accueil affiche bien le contenu que nous avons inséré dans la page d’accueil. En revanche,
impossible d’accéder à la page du blog ! Il faut en effet maintenant créer un menu de navigation
pour pouvoir accéder aux différentes pages du site. C’est ce que nous allons faire dans le
prochain chapitre.
Créez votre menu de navigation

Dans WordPress, les menus sont gérés dans Apparence >> Menus. Un site WordPress peut
avoir différents emplacements de menu (menu principal, menu supérieur, menu de pied de
page, etc.).
Ces emplacements dépendent du thème choisi. Nous utilisons pour l’instant le thème Twenty
Seventeen qui est le thème WordPress par défaut au moment où j’écris ces lignes. Ce dernier
propose deux emplacements :
 Menu supérieur
 Menu des liens de réseaux sociaux.

Page 21 sur 84
Créez un menu nommé “Principal” et sélectionnez l’emplacement “supérieur”. Cliquez

ensuite “Pages” dans la colonne de gauche, sélectionnez nos deux pages (blog et Banana
WordPress Design), et cliquez “Ajouter au menu”.
Figure 10: Changer l'ordre des pages
Les pages apparaissent maintenant dans la structure du menu et vous pouvez les réorganiser en
“glissé-déposé” pour changer l’ordre (faire glisser vers le haut ou vers le bas) ou la hiérarchie
(faire glisser vers la gauche ou vers la droite).
Sur la majorité des pages d’administration WordPress vous pouvez remarquer un onglet
“Options d’écran” en haut à droite. Cet onglet permet d’activer des options sur la page, comme
ici la possibilité d’ouvrir un item de menu dans un nouvel onglet, d’ajouter une classe CSS à
chaque item de menu ou encore de définir le nombre d'articles à afficher dans la page
d'administration "Articles". N’hésitez donc pas à explorer cet onglet sur les différentes pages
d’administration pour découvrir les options proposées. Ces dernières sont souvent très utiles.
Cliquez l’indispensable bouton bleu “Enregistrer le menu” et visitez à nouveau votre site. Le
menu est bien visible en bas de page !
En revanche, le rendu ne correspond pas du tout à celui visé pour notre site Banana WordPress
Design !
II.4. Personnalisez l’apparence du site grâce au customizer

Pour modifier l’apparence de son site WordPress, il y a depuis quelques années un outil très
pratique, le customizer. Pour l’utiliser, rendez-vous dans Apparence >> Personnaliser.
La page se compose de deux sections : une colonne de gauche présentant les différentes options
modifiables et une zone de prévisualisation à droite permettant aussi de modifier directement
certains éléments en cliquant sur l’icône crayon sur fond bleu.
Page 22 sur 84
Ajoutez votre logo

 Cliquez “Identité du site” dans la colonne de gauche.
 Cliquez “Sélectionnez un logo” et sélectionnez une image sur votre poste de travail.
 L’image est visible à gauche du titre !
Ajoutez un favicon
Le favicon est la petite icône visible dans l’onglet de votre navigateur à gauche du nom de la
page courante. Il est important de la personnaliser pour permettre aux utilisateurs de facilement
identifier votre site parmi les onglets ouverts. WordPress permet de la personnaliser facilement,
ainsi que les icônes de favori qui apparaîtront sur mobile, etc., depuis le customizer.
Figure 11: Ajouter un favicon
Pour cela, cliquez “Sélectionnez une image” sous le titre “Icône du site” (la traduction de
favicon) et sélectionnez une image sur votre poste de travail. Comme indiqué, cette image
devrait idéalement faire 512 px sur 512 px. Préférez une image très simple sur fond transparent
pour qu’elle soit lisible lorsqu’elle est affichée en très petit dans l’onglet.
Vous avez sûrement remarqué que vous pouvez aussi changer le titre et le slogan du site dans
cette même zone. En effet, de nombreuses fonctionnalités du dashboard WordPress sont aussi
paramétrables depuis le customizer. Vous pouvez donc utiliser l’une ou l’autre des interfaces
en fonction de ce que vous préférez !
Modifiez les options d’apparence du thème
Page 23 sur 84
Pour revenir à la liste des options, cliquez sur la petite flèche pointant à gauche à côté de
“Identité du site”. Nous allons maintenant nous attaquer aux options du customizer qui sont
liées au thème WordPress installé.
Comme nous l’avons vu précédemment, le thème actuellement utilisé est le thème Twenty
Seventeen. Nous verrons plus tard que, lorsque nous changerons de thème, les options décrites
ci-dessous seront remplacées par des options bien plus complètes pour personnaliser
l’apparence du thème.
Couleurs
Pour commencer, cliquez sur “Couleurs” dans la colonne de gauche. Vous aurez le choix entre
différents “Jeux de couleurs” : clair, foncé et personnalisé. Cliquez le bouton radio “foncé” et
vous constaterez que l’arrière-plan de votre site passe instantanément de blanc à noir !
Options du thème
Revenez à la liste des options en cliquant sur la flèche de gauche en haut de la colonne et
sélectionnez maintenant “Options du thème”. Comme leur nom l’indique, les options proposées
ici dépendent du thème utilisé. Vous pouvez voir que Twenty Seventeen propose des options
relatives à :
 à la mise en page du site (1 ou 2 colonnes) ;
 Au contenu affiché dans les différentes sections de la page d’accueil.
Comme évoqué, nous allons changer de thème dans la suite du cours, il n’y a donc pas lieu de
s’attarder sur ces options. N’hésitez cependant pas à jouer avec !
III. Choisissez, installez et configurez les composants

WordPress adaptés à votre projet
III.1. Définissez le type de site que vous souhaitez créer
Maintenant que nous avons pris en main l’interface d’administration de WordPress, nous allons
pouvoir commencer à travailler sur notre projet.
Comme nous l’avons évoqué en introduction, la grande force de WordPress réside dans la
multitude de composants (thèmes et plugins) à disposition permettant d’ajouter des
fonctionnalités ou de personnaliser l’apparence de votre site.
La première chose à faire est donc de définir le type de site que vous souhaitez créer, d’installer
et de configurer les composants les plus adaptés.
Page 24 sur 84
Définissez les objectifs du site

Avant de se lancer dans la création d’un site, il est essentiel de définir précisément les objectifs
de ce dernier. En effet, en prenant des exemples extrêmes, on ne va pas construire le même type
de site si notre objectif est de vendre des produits en ligne (site e-commerce) ou s’il est de
partager des astuces et des bons plans (blog).
Dans notre cas, notre objectif est de trouver des clients pour notre activité de création de sites
WordPress ! Il s’agit donc d’un site qui aura vocation à générer des contacts commerciaux. Cela
implique :
 Qu’il soit visuellement attractif ;
 Qu’il soit rassurant quant à notre professionnalisme grâce à des références et/ou des
témoignages clients ;
 Que les visiteurs puissent facilement laisser un message, voire demander un devis via
un formulaire de contact ;
 Que les visiteurs soient encouragés à s’abonner à une newsletter pour nous permettre de
maintenir la relation une fois qu’ils auront quitté le site (optionnel).
Les contacts commerciaux sont précieux et les visiteurs ont peu de temps et une attention
limitée. C’est la raison pour laquelle beaucoup de sites proposent, parfois de manière un peu
agressive, de s’abonner à une newsletter. Cela permet de maintenir le contact avec le visiteur
pour potentiellement convertir le contact en client par la suite !
Pensez au référencement dès le début

L’optimisation du référencement naturel est souvent appelée SEO pour “Search Engine
Optimisation”, soit “Optimisation pour les moteurs de recherche”.
En bref, il s’agit de toutes les techniques visant à faire remonter son site dans les résultats de
moteurs de recherche tels que Google. C’est essentiel, car c’est en général ce qui va générer la
grande majorité des visites sur votre site (à moins que vous ne disposiez d’un budget publicitaire
ou de liens entrants depuis des sites à gros trafic) !
Définissez les expressions de recherche sur lesquelles vous souhaitez être

positionné
Dans notre cas, nous souhaitons être bien positionnés sur des mots-clés comme “agence web”.
C’est cependant un terme bien trop générique et sur lequel beaucoup d’agences sont déjà
Page 25 sur 84
positionnées. On va donc essayer d’affiner l’expression de recherche en ajoutant la localité :

“agence web bordeaux”.
On peut se rendre compte en effectuant la recherche “agence web bordeaux” dans Google qu’il
y a encore beaucoup de concurrence sur cette expression de recherche et qu’il risque d’être très
difficile de remonter en première page.
On peut donc encore affiner sur une spécialité, comme “agence WordPress bordeaux”. Il y a
encore un peu de monde, mais la première page semble beaucoup plus accessible ! Pour bien
choisir les expressions de recherche sur lesquelles vous positionner, vous pouvez utiliser des
outils comme https://neilpatel.com/ubersuggest/ pour comparer la concurrence et le potentiel
de trafic entre différentes expressions de recherche.
L’objectif : vous positionner sur des expressions où la concurrence est la plus faible possible,
mais avec le maximum de potentiel de trafic !
Cependant, ce type d’outils a ses limites et il est parfois préférable de se fier à son bon sens
et aux résultats de recherche Google plutôt qu’aux statistiques qu’ils proposent, en particulier
sur des expressions de recherche ayant de faibles volumes de recherche et sur lesquelles les
statistiques générées seront moins précises.
Dans notre cas, nous allons choisir l’expression de recherche principale “agence WordPress
Bordeaux”.
Il est essentiel de définir l’expression de recherche principale sur laquelle nous souhaitons nous
positionner, mais il faut aussi définir des expressions de recherche secondaires qui peuvent être
:
 Soit des déclinaisons de l’expression principale (par exemple : “freelance WordPress

Bordeaux”) ;
 Soit des expressions ciblant des activités complémentaires (par exemple : “agence de
référencement Bordeaux” ou “création de logo Bordeaux”).
Nous allons choisir les expressions de recherche secondaires suivantes :
 Freelance WordPress Bordeaux ;
 Création logo Bordeaux ;
 Agence référencement Bordeaux .
Page 26 sur 84
Ce travail préliminaire est essentiel et va contribuer à déterminer la structure du site, que nous
allons voir tout de suite !
Définissez la structure de votre site

De la même façon que l’on fait généralement des plans avant de construire une maison, il est
essentiel de définir la structure de son site avant de commencer à le créer.
Définissez une arborescence

La première chose à faire est de lister en vrac tout ce dont vous avez envie de parler et toutes
les fonctionnalités dont vous avez besoin.
Essayez ensuite de regrouper tout cela de façon cohérente pour constituer les pages du site, tout
en prenant en compte les expressions de recherche cibles identifiées précédemment.
Partout
 Pop-up newsletter
Accueil
 Présenter mes services

 Rassurer sur mes compétences
 Inciter à prendre contact
o Services
o Expertises
o Testimoniaux clients via un carrousel de témoignages
o Références clients via un carrousel de logos
Création de sites WordPress
 Présenter ce service spécifique

 Montrer des exemples de réalisations
o Description
o Réalisations via un carrousel d’images
Création de logos
 Présenter ce service spécifique

 Montrer des exemples de réalisations
o Description
o Réalisations via un carrousel d’images
Référencement naturel
 Description
 Résultats obtenus via des compteurs dynamiques
Contact
 Formulaire de contact >> pour faciliter la prise de contact
Page 27 sur 84
Nous nous limiterons dans ce cours à créer ensemble la page d’accueil sans quoi le cours serait
beaucoup trop long ! Mais une fois une première page réalisée, vous verrez qu’il vous sera très
simple d’en faire d’autres en autonomie.
Créez des wireframes

Une fois l’arborescence définie, il est recommandé de définir la structure de ses pages via des
wireframes, c’est-à-dire des schémas très simples présentant les différentes zones de la page.
Cela peut être fait tout simplement avec un crayon et un papier ou via des outils dédiés
comme Cacoo (https://cacoo.com/fr/) ou wireframe.cc.( https://wireframe.cc/)
Figure 12: Exemple de wireframe
III.2. Choisissez votre thème et votre page builder
Maintenant que nous avons une idée plus précise de ce que nous voulons réaliser, nous allons
pouvoir choisir les composants pour y arriver !
Le thème est peut-être le composant le plus important de votre site WordPress. C’est lui qui va
définir l’apparence de votre site, les options de personnalisation du design et la compatibilité
avec certaines fonctionnalités (e-commerce, etc.).
Page 28 sur 84
À quoi sert un thème WordPress ?

Le thème WordPress est ce qui va gérer l’affichage de vos contenus via des templates PHP.
Ces Templates vont définir comment sont affichés et quelles sont les options disponibles pour
:
 L’entête (header) contenant en général les logos, menu principal, barre de recherche,
etc. ;
 Le contenu lui-même avec des Templates différents pour les articles, les pages, mais
aussi les produits si vous créez un site e-commerce ;
 Le pied de page (footer) avec le menu de bas de page, les liens légaux (mentions légales,
politique de confidentialité), etc. ;
 Les barres latérales souvent présentes sur les blogs ou les boutiques e-commerce et
présentant souvent des modules de filtre, de publicité ou de réseaux sociaux.
En bref, le thème va servir à configurer la structure et l’apparence de votre site, c’est un peu la
colonne vertébrale de ce dernier.
À quoi sert un page builder ?

Un page builder (constructeur de pages) est un composant WordPress permettant de créer des
pages au design avancées en “drag-and-drop” et souvent en “front-end editing”, c’est-à-dire
que vous voyez directement les modifications sur la page telle qu’elle se présentera aux
visiteurs.
Ils disposent d’une bibliothèque de modules ou widgets (colonnes, slider, carrousel, bloc titre,
bouton, etc.) et facilitent la construction de pages complexes sans avoir à coder en
HTML/CSS/JS. Nous recommandons d’utiliser des page builders reconnus et disposant de
versions gratuites disponibles sur la bibliothèque WordPress.org.
Deux page builders se démarquent actuellement :
Page 29 sur 84
Figure 13: Elementor- un page builder
 Beaver Builder, plutôt orienté “développeurs” ayant une version gratuite assez pauvre
en termes de composants.
 Elementor, plutôt orienté “designers” et disposant d’une bibliothèque de composants

riche, même en version gratuite. Vous l’aurez compris, c’est celui que nous utiliserons
ici.
D’autres page builders connus sont Divi et WP Bakery Page Builder. Au moment où j’écris
ces lignes, ces builders sont lourds, le code généré n’est pas propre et l’interface utilisateur est
moins fluide.
Il existe des dizaines d’autres très bons page builders comme Site Origin Page Builder (gratuit,
léger, mais moins intuitif), Brix (hyper rapide, générant du code très propre mais disposant
d’une communauté moins importante), etc. Ils peuvent s’avérer plus ou moins pertinents en
fonction des projets.
Les différents types de thèmes WordPress

Il existe de très nombreux types de thèmes. Voici quelques axes de catégorisation pour essayer
d’y voir plus clair.
Le premier axe de catégorisation des thèmes concerne… le porte-monnaie !
On distingue 3 familles de thèmes :
Gratuit / freemium / premium

Gratuit
Le thème est entièrement gratuit et peut en général (s’il a été approuvé par les modérateurs de
WordPress.org) être installé directement depuis la bibliothèque WordPress.org dans
Page 30 sur 84
Apparence>> Thèmes >> Ajouter. Les thèmes gratuits sont très nombreux, mais il faut faire
attention, car nombre d’entre eux sont de qualité médiocre !
Freemium
Le thème est gratuit, mais dispose soit d’une version payante avec plus d’options, soit de
composants additionnels payants permettant d’étendre les fonctionnalités.
Les thèmes freemium sont très nombreux dans la bibliothèque WordPress.org. Bien souvent, il
faut passer payer pour débloquer des fonctionnalités essentielles. Heureusement, certains
d’entre eux sont très complets en version gratuite, nous allons le vérifier juste après.
Premium
Il s’agit de thèmes payants. Ils ne sont pas disponibles via la bibliothèque WordPress.org, mais
via des boutiques ou des marketplaces dédiées. La plus connue est Themeforest qui regroupe
10.000 thèmes premium ! La qualité de ces thèmes est très variable et il est important de bien
vérifier les points importants que nous allons évoquer avant d’en acheter un.
Le second axe de catégorisation concerne la destination du thème, c’est-à-dire le type

d’utilisation à laquelle il est destiné.
Framework / multipurpose / spécialisés

Starter themes
Il s’agit de thèmes neutres et minimalistes, en général destinés à des développeurs pour qu’ils
les déclinent afin de construire leur propre thème sur cette base. Nous n’allons donc pas explorer
cette option plus avant. On peut cependant citer quelques-uns des plus connus : Genesis
Framework, Underscores, FoundationPress...
Thèmes spécialisés
Ils représentent la majorité des thèmes, ciblant principalement les blogs (en particulier pour les
gratuits), mais couvrant tous types de sites : site immobilier, site de petites annonces, sites e-
commerce, marketplaces, etc. Il est vraiment possible de trouver n’importe quelle thématique,
même les plus précises : blog cuisine, site e-commerce automobile, etc.
Ces thèmes permettent de créer très rapidement des sites complexes entièrement fonctionnels,
mais ils sont souvent lourds, passablement codés et il est en général compliqué de les faire
évoluer ou de mettre en place des personnalisations poussées.
Thèmes multipurposes
C’est une grosse tendance commencée sur Themeforest. Initialement, ces thèmes
embarquaient généralement un page builder “maison”, étaient très lourds, généraient du code
Page 31 sur 84
médiocre et étaient globalement à éviter. Vous avez peut-être déjà entendu parler des plus
connus comme Avada ou Enfold.
Aujourd’hui, le paysage a évolué et il en existe des gratuits, légers et optimisés pour des page
builders reconnus comme Elementor ou Beaver Builder. On citera en particulier OceanWP
(notre favori) et Astra.
Pourquoi ne pas utiliser un page builder “maison” intégré à un thème ?
De nombreux thèmes premium (Avada, Enfold, etc.) proposent des page builders dédiés pour
leurs thèmes. Le problème avec ces thèmes est que vous vous retrouverez alors coincé (on parle
de user lock-in en anglais) ! Il vous faudrait en effet recréer toutes les pages du site avec un
autre page builder si vous décidez un jour de changer de thème. Et ne parlons pas du cas où le
développeur du thème déciderait d’arrêter de le maintenir…
Apprenez à bien choisir votre thème WordPress

En fonction du projet, il peut être préférable de partir sur l’un ou l’autre de ces types de thèmes,
mais dans tous les cas, il faut vérifier certains aspects essentiels avant de vous lancer.
La dernière date de mise à jour

Si un thème n’est plus mis à jour depuis plus de 6 mois, c’est inquiétant. Il est peut-être
abandonné par son développeur et vous risquez de rencontrer des incompatibilités lors des
mises à jour de WordPress ou de vos plugins (WooCommerce…) dans le futur.
Les notes et commentaires

C’est évident, mais quasiment toutes les bibliothèques de thèmes proposent des systèmes de
notes et de commentaires. Explorez rapidement ces derniers pour vérifier que les utilisateurs ne
rencontrent pas de difficultés particulières !
La notoriété
Plus un thème est utilisé, plus il y a de chances qu’il ait des qualités, qu’il soit régulièrement
maintenu, etc. Mais attention, les thèmes à éviter (surchargés d’options bling-bling, etc.) sont
souvent très populaires aussi !
La rapidité de chargement
Un thème générant des pages trop lourdes à charger va pénaliser l’expérience de vos visiteurs
et votre SEO. De plus en plus de thèmes offrent maintenant la possibilité de désactiver les
fonctionnalités non utilisées pour accélérer le chargement des pages.
L’aspect multilingue
Page 32 sur 84
Rien de pire que de commencer à travailler sur un thème et de s’apercevoir ensuite qu’il n’est
pas conçu pour être traduit.
Le support
L’existence d’une bonne documentation et la réactivité du support est un aspect très important
lorsque l’on fait face à une difficulté avec un thème. Vérifiez s’il existe une documentation bien
faite et une zone de support, et si les développeurs répondent rapidement ou non !
La source
Évitez de télécharger un thème sur un site inconnu trouvé au hasard du web. Privilégiez les
thèmes disponibles sur la bibliothèque officielle WordPress.org, ou sur des boutiques ou
marketplaces de référence (Themeforest, Elegant Themes, etc.).
Les thèmes “nulled” (initialement premium, mais proposés gratuitement sur des sites “pirates”)
sont à éviter à tout prix, ils regorgent de malwares !
La qualité du design, la flexibilité et les fonctionnalités

Cela semble évident, mais vérifiez que le design soit de qualité. Privilégiez les designs au rendu
propre et minimaliste aux designs tape-à-l’œil qui seront plus difficilement personnalisables et
risqueront de rendre beaucoup moins bien dès que vous commencerez à ajouter votre propre
contenu. Vérifiez bien que le thème dispose de suffisamment d’options de personnalisation pour
ne pas vous obliger à passer par des CSS personnalisés si vous ne maîtrisez pas le CSS.
Enfin, vérifiez sa compatibilité avec les plugins que vous prévoyez d’utiliser (WooCommerce
pour de l’e-commerce, BuddyPress pour du collaboratif, etc.).
Pour notre projet, nous allons créer un site vitrine simple. Nous ne voulons pas coder et allons
donc utiliser un page builder. Nous allons donc privilégier un thème “multipurpose” flexible et
compatible avec le page builder choisi, Elementor.
Nous choisissons donc le thème OceanWP qui répond à l’ensemble de ces critères et qui est en
plus créé par un Français
III.3. Installez et configurez votre thème WordPress

Installez votre thème WordPress
Pour installer un thème, rendez-vous dans Apparence >> Thèmes >> Ajouter.
OceanWP est gratuit et disponible dans la bibliothèque WordPress.org, vous pouvez donc
simplement utiliser le moteur de recherche pour le retrouver et l’installer en un clic ! Cherchez
donc “OceanWP” et cliquez “Installer”.
Page 33 sur 84
Remarque : s’il s’agissait d’un thème premium ou non disponible sur WordPress.org, il aurait
fallu cliquer “téléverser un thème” et sélectionner l’archive (.zip) du thème précédemment
téléchargé sur votre poste de travail. Il est aussi possible d'installer un thème ou un plugin en
déposant directement le dossier de ce dernier dans le répertoire wp-content/themes ou wp-
content/plugins via FTP.
Une fois le thème installé, cliquez “Activer” pour activer le thème. C’est aussi simple que cela
!
Figure 14: Activer un thème
Vous pouvez constater qu’une notification est apparue dans le Dashboard WordPress, vous
invitant à installer des extensions recommandées.
 Cliquez “Commencez à installer les extensions”.
 Vous êtes redirigé vers une page listant les extensions recommandées.
 Sélectionnez-les toutes en cochant la checkbox à gauche de “Extension”, sélectionnez

“Installer” dans le menu déroulant “Actions Groupées” et cliquez “Appliquer”.
Les extensions sont alors automatiquement installées et activées.
Vous pouvez visiter votre site et constater que le design a complètement changé. C’est très
minimaliste, mais pas d’inquiétude, cela va changer dès le prochain chapitre grâce à
l’importation d’un site de démo.
Page 34 sur 84
Gagnez du temps en important un site de démo

OceanWP dispose d’une extension un peu particulière s’appelant “Ocean Demo Import”. Il
s’agit d’une extension permettant d’importer l’intégralité d’un site de démonstration (site
d’exemple clé en main).
Cela permet de ne pas partir d’une base vierge et de gagner ainsi beaucoup de temps sur la mise
en place de son site.
Cette option est proposée par de nombreux thèmes WordPress, mais peut se
faire différemment selon les thèmes. Il faut parfois importer le contenu sous forme de
fichier XML via Outils >> Import.
Figure 15: Ajouter une extension
Avec OceanWP, vous pouvez importer non seulement le contenu de démo, mais aussi tous les
paramètres du thème en un clic !
1. Installez l’extension depuis “Extension >> Ajouter”.
2. Activez l’extension.
3. Rendez-vous dans Theme Panel >> Installer des démos.
4. Prévisualisez les différents modèles de sites proposés en cliquant “Prévisualiser en

direct”.
5. Cliquez sur le modèle “Gym”. Il n’est pas lié à notre activité, mais correspond plus
à nos attentes en termes de design.
Page 35 sur 84
6. Installez les extensions nécessaires à ce site de démo en dehors de celles indiquant

“Obtenir ce module”. Il s’agit en effet d’extensions premium dont nous nous
passerons dans le cadre de ce cours.
Cliquez “Aller à l’étape suivante”.
7. Laissez toutes les options cochées et cliquez “Importer”.
8. Cliquez “Voir le résultat”.
Figure 16: Importer demo
Comme vous pouvez le constater, votre site est maintenant exactement similaire au site de démo
! Nous disposons d’une bonne base pour commencer à construire nos pages.
Mais avant cela, nous allons installer des extensions supplémentaires pour ajouter des
fonctionnalités à notre site.
III.4. Choisissez et installez les extensions WordPress

pertinentes pour votre projet
Comme vous l’avez vu, nous avons déjà installé les extensions recommandées lors de
l’installation du thème OceanWP. Ces extensions ne couvrent cependant pas tous nos besoins.
Voyons donc ensemble comment bien choisir et installer les extensions pertinentes pour votre
projet.
Page 36 sur 84
Comprenez ce qu’est une extension WordPress

Nous avons déjà évoqué ce qu’est une extension WordPress : il s’agit d’un composant
WordPress permettant d’ajouter une fonctionnalité non prévue dans WordPress. Il existe des
milliers d’extensions qui, comme les thèmes, peuvent être gratuites ou payantes et peuvent être
disponibles dans la bibliothèque officielle WordPress.org ou non.
Parmi les extensions installées lors de l’installation de OceanWP, il y a par exemple “WP
Forms”. Il s’agit d’une extension permettant d’ajouter simplement des formulaires de contact.
Il existe de très nombreuses autres extensions pour créer des formulaires de contact. Nous
pouvons citer par exemple : Caldera Forms, Ninja Forms ou l’extension premium Gravity
Forms recommandée pour des formulaires complexes.
Les addons
Certains composants WordPress ont des extensions qui leur sont dédiées, il s’agit en quelque
sorte d’extensions (ou d’extensions de thèmes). C’est le cas par exemple des plugins Ocean
Extra et Ocean Demo Import installés précédemment. Il en existe aussi énormément pour
Elementor, le page builder que nous utilisons ; cherchez simplement Elementor dans la
bibliothèque d’extensions WordPress.org pour vous faire une idée !
Choisissez les extensions pertinentes pour votre projet

Les critères de choix d’une extension sont les mêmes que pour un thème :
 La dernière date de mise à jour

 Les notes et commentaires
 La notoriété
 La rapidité de chargement
 L’aspect multilingue
 Le support
 La source
 La qualité du design, la flexibilité et les fonctionnalités
N’hésitez pas à relire le chapitre associé si vous ne les avez plus en tête, car ces critères sont
très importants !
On peut enfin distinguer deux types d’extensions.
Les extensions standard

Il s’agit d’extensions ajoutant des fonctionnalités essentielles à un site web et que vous allez
utiliser sur quasiment tous vos projets.
Pour notre exemple, nous allons choisir :
Page 37 sur 84
 “SEO Press” (ou Yoast SEO) pour optimiser le référencement naturel ;
 “Broken Link Checker” pour être alerté en cas de lien cassé sur notre site ;
 “Redirection” pour identifier les erreurs 404 et les rediriger vers des pages existantes
;
 “ShortPixel” pour optimiser le poids des images ;
 “Duplicate Page” pour dupliquer facilement une page, un article ou tout autre type
de contenu ;
 “Central color palette” pour définir de façon centralisée les couleurs disponibles
dans les palettes de choix de couleur du thème, d’Elementor et de l’éditeur WordPress
classique.
Toutes ces extensions sont disponibles sur WordPress.org. Installez-les donc directement
depuis Extensions >> Ajouter, à l’aide du champ de recherche.
Figure 17: Ajouter une extension
Les extensions spécifiques

Il s’agit d’extensions répondant à des besoins spécifiques au projet. Dans notre cas, nous avons
prévu les fonctionnalités suivantes :
 Formulaire de contact
 Pop-up pour inscriptions newsletter (optionnel)
Page 38 sur 84
Elementor propose de base des modules pour créer des compteurs dynamiques et des carrousels
d’images. Nous avons par ailleurs déjà installé une extension pour les formulaires, WP Forms.
Il nous reste à chercher des extensions pour créer des pop-ups.
En faisant une recherche dans les extensions proposées sur WordPress.org, nous identifions
l’extension “Hustle” (https://wordpress.org/plugins/wordpress-popup/) permettant de créer
des pop-ups.
Installez et activez donc cette extension avant de passer à la suite.
Faites attention à ne pas multiplier les extensions si cela n'est pas indispensable. Plus
d'extensions signifie plus de travail de maintenance lors des mises à jour et peut aussi
potentiellement ralentir votre site. Il n'y a pas vraiment de recommandations concernant le
nombre d'extensions pouvant être installées sur un site car cela dépend énormément des
extensions choisies. Mais faites attention à les choisir judicieusement, à désactiver et supprimer
celles n'étant pas utilisées et à ne pas installer plusieurs extensions pour la même chose !
Nous avons maintenant tout ce qu’il faut pour créer notre site ! Nous allons voir dans le chapitre
suivant comment utiliser ces différents composants pour créer nos contenus et personnaliser
notre design.
IV. Personnalisez les contenus et le design de votre site

WordPress
IV.1. Définissez le design global de votre site
Pour qu’un site fasse pro, il faut que son design soit cohérent sur toutes les pages. C’est la raison
pour laquelle on se repose généralement sur une charte graphique qui va définir les polices de
caractères, les couleurs, les versions de logos, etc., à utiliser sur tous les supports de
communication d’une marque.
Dans notre cas, nous ne disposons pas d’une charte graphique. Nous allons donc définir nous-
mêmes les bases graphiques de notre marque : logo, couleurs, polices de caractères.
Nous n’avons pas pour ambition de vous apprendre à créer une “vraie” charte graphique, c’est
un vrai travail à part entière qui nécessite des connaissances et des compétences spécifiques.
L’idée est simplement de vous aider à créer un design cohérent pour votre site. Dans le cadre
d’un vrai projet, si cela est possible, le mieux reste de loin de faire réaliser une charte graphique
par un professionnel !
Trouvez une inspiration
Page 39 sur 84
N’étant a priori pas graphiste, je vous invite à chercher des sites d’inspiration pour vous aider
à définir une identité cohérente. Il ne s’agit bien sûr pas de copier-coller des designs existants,
mais de s’inspirer d’associations de couleurs, de typographies, etc.
De bons sites d’inspiration sont https://dribbble.com, http://collectui.com, ou même de

nombreux comptes Instagram orientés UI et design.
Nous avions en tête une inspiration de type décalé avec un univers pastel, mais fun et nous
avons trouvé une image d’inspiration sur Pinterest qui colle à cette atmosphère et qui contient
même une image de banane ! Cliquez ici pour voir .
(https://www.pinterest.co.uk/pin/680113981202068306/) Cette image d’inspiration va nous
guider dans les choix graphiques à venir.
Définissez une palette de couleur

Utilisez un service comme http://paletton.com/ ou http://colormind.io/ pour créer votre
palette de couleurs manuellement, ou plus simple encore, partez d’une image d’inspiration dont
l’atmosphère vous plaît pour générer automatiquement une palette de couleur
avec https://www.canva.com/color-palette/.
L’outil Color Palette de Canva nous génère automatiquement la palette de couleur suivante à
partir de notre image :
Figure 18: L'outil Color Palette
C’est la palette que nous allons respecter pour la suite !
Choisissez des polices de caractères

Le choix des polices de caractères a tendance à être négligé, alors que c’est peut-être l’aspect
le plus important de la charte graphique.
Page 40 sur 84
Les sites utilisent de plus en plus les typos gratuites disponibles sur Google Fonts (ce que nous
allons faire ici), mais choisir une police premium peut beaucoup apporter au design d’un site ;
nous vous conseillons donc de ne pas oublier cette option !
Il y aurait donc beaucoup à dire sur le choix d’une typo, mais cela n’est pas le sujet ici. Nous
allons donc arbitrairement partir sur :
 La police Abezee en graisse regular (400) pour les titres de page afin de donner un
côté un peu décalé tout en restant élégant ;
 La police Open Sans (un grand classique du webdesign !) pour le corps de page.
Remarque : évitez d’utiliser une police trop exotique pour le corps de page, cela risque de
nuire à la lisibilité et de donner un côté cheap au rendu global.
Choisissez un master visuel
Le master visuel va être l’image qui va représenter la marque et que l’on utilisera en priorité
sur les supports de communication.
Certains sites proposent de belles photos utilisables gratuitement. C’est en particulier le cas
de unsplash.com sur lequel nous avons retrouvé la photo de banane contenue dans le visuel
d’inspiration choisi.
Nous allons utiliser cette image (légèrement modifiée par nos soins) comme master visuel pour
notre marque :
Figure 19: Master Visuel pour le hero du site
Page 41 sur 84
Créez un logo
Si vous n’êtes pas graphiste, la simplicité est en général le meilleur choix. Le nom de votre
marque dans une belle police et éventuellement une icône simple suffit à avoir un logo
professionnel (pensez à Apple, Sony, etc.). Évitez de vouloir en faire trop avec des illustrations
ou des effets qui seront peu lisibles et feront vite amateur.
Gardez aussi en tête qu’un logo doit rester lisible en petit et doit pouvoir être décliné sur
différentes couleurs de fond (fond noir et fond blanc en particulier).
Vous pouvez chercher des icônes gratuites sur https://fr.freepik.com et créer votre logo
gratuitement sur les sites comme snappa.com ou canva.com (attention, la version gratuite
est très limitée) qui proposent des interfaces très simples pour créer des visuels en ligne.
Afin de contrebalancer le côté déjà assez fun du nom et de l’ambiance choisis, nous avons
décidé de créer un logo reposant sur la couleur “dark khaki” de notre palette, accompagnée
d’une police plutôt sérieuse et premium.
Voici la création que nous allons utiliser pour notre site (attention, le texte est en blanc sur fond
blanc) :
Figure 20: Logo créé pour notre site
Vous pouvez télécharger les images utilisées dans ce cours en suivant ce lien.
N’oubliez pas de créditer les designers ou photographes dont vous utilisez les images et icônes
! C’est non seulement plus sympa, mais aussi souvent obligatoire !
Paramétrez les options du thème en fonction de votre charte

Maintenant que nous avons défini notre direction graphique, nous allons pouvoir l’implémenter
dans notre thème.
Page 42 sur 84
Pour cela, rendez-vous dans le customizer. Pour rappel, depuis le Dashboard WordPress, allez
dans Apparence >> Personnaliser. Comme vous pouvez le constater, il y a beaucoup plus
d’options qu’avec le thème par défaut que nous utilisions en début de cours ! Mais pas
d’inquiétude, on se les approprie rapidement à l’usage.
Désactivez les styles par défaut d’Elementor

Elementor propose par défaut de gérer les styles de façon centralisée, mais ces styles ne
s’appliquent qu’aux contenus créés avec Elementor. Nous conseillons donc de désactiver cette
fonctionnalité pour tout gérer au même endroit, c’est-à-dire dans les paramètres du thème ou
dans Color Palette si vous l’utilisez. Pour cela, rendez-vous depuis le dashboard WordPress
dans Elementor >> Réglages et cochez les checkbox :
 Désactiver les couleurs par défaut
 Désactiver les polices par défaut
Les manipulations que nous allons faire ici sont dépendantes du thème. Cela veut dire que si
vous n’avez pas choisi OceanWP, vous n’aurez pas accès aux mêmes options et que si vous
changez de thème, elles ne seront plus prises en compte !
Configurez le logo
La première chose que nous allons faire est d’ajouter notre logo. Cliquez “Entête” >> “Logo”
>> “Changer le logo” >> “Téléverser des fichiers”. Sélectionnez votre logo en local et
téléversez-le.
Faites de même dans la section “Logo Retina”. Cette section est dédiée aux écrans “retina”
ayant une meilleure définition que les écrans classiques. Il faut donc si possible téléverser une
image faisant le double (en pixels) que la taille souhaitée à l’écran.
Le logo est aussi présent dans le pied de page.
 Cliquez l’icône “crayon” en bleu sur ce dernier pour accéder directement à la section
du customizer permettant de l’éditer (Widgets >> Pied de page). Vous remarquerez que
le logo et le texte en dessous sont insérés directement en HTML. Nous avions promis que
vous n’auriez pas à coder, donc nous allons tout simplement supprimer ce widget.
 Cliquez “retirer” sous la zone d’édition.
 Cliquez ensuite “Ajouter un widget”, sélectionnez le widget “Image” et glissez-le

au-dessus du widget “Icônes Sociales”.
Page 43 sur 84
 Sélectionnez le logo dans la bibliothèque de média.
N’hésitez pas à en profiter pour paramétrer les liens vers les profils de réseaux sociaux du
widget “Icônes sociales”.
Et voilà, notre logo est en place, aussi bien dans l’entête que dans le pied de page !
Paramétrez les palettes de couleurs

Nous avons précédemment installé le plugin Central Color Palette permettant de configurer de
façon centralisée la palette de couleur du site.
La personnaliser avec les couleurs de la palette que nous avons définie nous fera gagner
beaucoup de temps par la suite et nous évitera de choisir des couleurs au “feeling”, qui s’avère
être bien souvent plus du hasard.
Depuis le Dashboard WordPress,
 Allez dans “Réglages >> Central Color Palette”.

 Cochez les 4 checkbox.
 Ajoutez les couleurs et les noms de la palette définie précédemment.
 Ajoutez aussi les couleurs suivantes pour les textes :
o #333, Dark Grey, pour les textes sur fonds clairs ;
o #fff, White, pour les textes sur fonds sombres.
Evitez d’utiliser du “vrai” noir sur des fonds blancs. Le contraste est trop fort et cela va avoir
tendance à faire “vibrer” les contours. Il est donc généralement préférable d’utiliser un gris
foncé.
Figure 21: Paramétrer les palettes de couleurs
Page 44 sur 84
Retournez maintenant dans le customizer (Personnaliser) et allez dans Options Générales >>
Style Général. Choisissez :
La couleur Pale Violet Red (#DA658A) comme couleur principale et couleur
des liens ;
 La couleur Thistle (#EDDDE3) comme couleur principale au survol et couleur
au survol.
Paramétrez les polices de caractères
Retournez à l’accueil du customizer en cliquant sur la flèche de retour en arrière en haut à
gauche du customizer.
Allez dans “Typographie”.
Vous allez ici pouvoir définir de façon détaillée les réglages de typographies pour tous les
éléments du site ! Nous allons rester simples et paramétrer seulement la typographie pour le
corps de texte et les titres.
Pour le corps de page
Cliquez “Corps de page”.
 Cliquez “Famille de Police” et sélectionnez “Open Sans”.
 Saisissez “16 px” dans “Taille de la Police”.
 Cliquez ensuite sur l'icône “ordinateur” à droite de “Taille de la Police”. Cette icône
indique que l’option est déclinable selon les tailles d’écran ! Cliquez l’icône “mobile” et
saisissez “14 px”.
 Saisissez 1,4 dans “Hauteur de ligne”.
 Choisissez la couleur #333333 (Dark Grey) de notre palette.
Enregistrez et retournez à l’écran précédent.
Pour les titres
 Cliquez “Tous les titrages”.
 Cliquez “Famille de Police” et sélectionnez “Abezee”.
Vous remarquerez qu’il n’y a pas l’option de taille ; c’est parce que les tailles doivent être
différentes pour chaque niveau de titrage (h1, h2, h3, etc.).
Nous n’allons pas définir les tailles et les couleurs des titres pour l’instant parce qu’il sera
beaucoup plus simple de les définir “in situ”, lorsque nous créerons notre page d’accueil.
Nous finaliserons donc la saisie de ces paramètres dans un second temps.
Page 45 sur 84
Paramétrez les layouts de page

Nous avons prévu des pages en pleine largeur lorsque nous avons défini le wireframe (et c’est
généralement le layout utilisé lorsque l’on utilise un constructeur de pages). Il nous faut donc
paramétrer le layout par défaut comme étant en pleine largeur.
Toujours dans le customizer, allez dans Options Générales >> Options générales >>
Réglages généraux, et choisissez le layout “100 % pleine largeur”.
Figure 22: Paramétrer la mise en page
Vous pouvez aussi modifier les options de layout individuellement depuis le dashboard
WordPress dans Pages >> Modifier la page, et en sélectionnant le layout souhaité dans la zone
de Réglages Ocean WP.
Maintenant que nous avons configuré les options graphiques globales, nous allons pouvoir
commencer à designer notre page d’accueil ! C’est ce que nous allons voir dans le prochain
chapitre.
IV.2. Prenez en main Elementor et designez votre page

d’accueil
La page d’accueil ainsi que les autres pages importées via le site de démo sont déjà créées avec
Elementor. Pour les éditer avec Elementor, il suffit donc de visiter la page que vous souhaitez
éditer et de cliquer “Modifier avec Elementor” dans la « top bar » d’administration.
Si la page n’est pas encore construite avec Elementor (typiquement, si vous en créez une
nouvelle), éditez-la normalement depuis le dashboard et cliquez le bouton bleu “Modifier
avec Elementor”.
Visitez maintenant votre page d’accueil et cliquez “Edit with Elementor”.
Page 46 sur 84
La page se divise alors en deux.
 Sur la gauche, vous disposez d’une colonne contextuelle dédiée aux fonctionnalités
Elementor.
 Sur la droite, vous voyez le rendu de votre page.
Figure 23: Elementor- un page builder
Cette combinaison est très pratique, car, un peu comme dans le customizer, toutes les
modifications que vous ferez sur la page se verront instantanément dans la zone de
prévisualisation !
La colonne de gauche dispose de deux panneaux principaux.
 Le premier affiché par défaut et accessible via l’icône présentant 6 petits carrés en haut
à droite, liste les modules disponibles pour créer votre page. Vous pouvez ajouter ces
modules à votre page en glissé-déposé.
 Le second est le panneau contextuel d’édition des modules, colonnes ou sections. Pour
l’afficher, cliquez sur le crayon bleu au survol d’un module.
Personnalisez le hero de votre page d’accueil

Nous allons commencer par modifier la première section de la page, aussi appelée “hero”. C’est
la section la plus importante, car elle va donner la première impression au visiteur. Il faut donc
Page 47 sur 84
qu’elle soit impactantee, que le message soit clair et qu’elle propose un “appel à l’action” (“call
to action”) clair.
Modifiez le titre
1. Cliquez simplement sur le titre principal “DISCOVER YOUR POTENTIAL” dans
la section de prévisualisation (à droite).
2. Vous pouvez modifier le texte directement dans la zone de prévisualisation ou dans
le champ dédié dans la colonne de gauche qui affiche maintenant les options
d’édition et de personnalisation du module sélectionné.
3. Modifiez le contenu avec “Créateur de sites web à croquer !” et sélectionnez
“p” (paragraphe) dans le champ “Balise HTML”.
4. Cliquez l’onglet “Style” puis “Typographie”, et sélectionnez la taille de 60 px et
le poids de 900.
Modifiez le sous-titre
Le sous-titre est actuellement composé d’un widget “texte”.
1. Faites un clic droit sur le sous-titre dans la zone de prévisualisation et cliquez

“effacer”.
2. Cliquez ensuite sur l’icône composée de 9 carrés en haut à droite de la colonne de
gauche, c’est l’icône d’accès aux widgets Elementor. C’est le bouton permettant
d’accéder à la liste des modules Elementor.
3. Glissez-déposez le module “Titrage” dans la zone où était situé le sous-titre.
4. Remplacez le contenu par “Agence WordPress à Bordeaux : création de
sites, identité graphique, référencement naturel”.
5. Cliquez l’icône d’alignement “centré” et sélectionnez “H1” dans le champ “Balise
HTML”.
6. Dans l’onglet “Style”, choisissez la couleur “blanc”, cliquez “Typographie” et
choisissez la taille 21 qui permet d’aligner à peu près la largeur des deux titres.
Il existe différents niveaux de titres en HTML. Bien comprendre ces niveaux est essentiel pour
optimiser son référencement naturel.
 H1 : titre de la page, doit être unique et doit contenir l’expression de recherche

principale sur laquelle on souhaite positionner le site
 H2 : titre secondaire, ne doit pas être utilisé plus de 3 ou 4 fois.
 H3 : titre de niveau trois.
 Etc.
Page 48 sur 84
Il est essentiel de faire en sorte que les titres contiennent les mots-clés sur lesquels on cherche
à se positionner en SEO, les titres ayant le plus de “poids” SEO étant évidemment ceux de
plus haut niveau.
C’est la raison pour laquelle nous avons passé le premier titre qui n’est pas optimisé SEO en
“p” et le sous-titre qui contient les termes SEO cibles en “H1”.
Modifiez le master visuel

Nous allons maintenant modifier l’image de fond de la section. Techniquement, il s’agit d’une
“background image”. Cela veut dire que l’image n’est pas affichée via un widget dédié, mais
qu’elle s’affiche en arrière-plan de la section.
La section Elementor est délimitée par un rectangle bleu. Pour la modifier, survolez-la et cliquez
sur l’onglet bleu contenant 6 petits points en haut de la section.
Elementor fonctionne avec des sections (délimitées en bleu) contenant des colonnes (délimitées
en gris) pouvant elles-mêmes contenir des composants. Parmi ces composants, il y a le
composant “Section interne” qui permet d’insérer une section contenant elle-même des
colonnes, ce qui permet d’avoir des sous-colonnes pour réaliser des mises en page complexes.
Il faut bien comprendre ce fonctionnement pour pouvoir réaliser des designs complexes.
La colonne de gauche affiche maintenant les options de “Mise en page” de la section. Je vous
invite à les explorer, mais ce ne sont pas elles qui nous intéressent pour l’instant.
 Cliquez l’onglet “Style” de la colonne de gauche. Vous voyez maintenant les

options d’arrière-plan avec l’image que nous souhaitons modifier.
 Cliquez dessus puis “Téléversez des fichiers” et téléversez le master visuel
défini précédemment.
Vous pouvez télécharger les images utilisées dans ce cours en suivant ce lien.
L’image de fond est bien remplacée !
Vous noterez que vous avez aussi la possibilité de mettre une vidéo en arrière-plan. Cela peut
être très esthétique en termes de rendu, mais alourdit beaucoup la page. C’est donc à utiliser
avec parcimonie et en faisant bien attention à utiliser un fichier vidéo optimisé (éviter
YouTube).
Si vous avez besoin de vidéos de fond pour vos sections, je vous conseille l’excellent
site Youtube.com qui propose de nombreuses vidéos de qualité utilisables gratuitement.
Page 49 sur 84
Vous remarquerez en revanche qu’elle est grisée. C’est parce qu’il y a un “overlay” en
transparence de noir par-dessus notre image. Cet overlay sert en général à améliorer la lisibilité
du texte par-dessus une image, mais il peut aussi être utilisé à des fins esthétiques ; c’est ce que
nous allons faire ici.
Les options de l’image d’arrière-plan sont déjà configurées, mais il est important de les
connaître :
 Position : permet de définir comment est “calée” l’image d’arrière-plan par rapport au
bloc qui la contient (en haut, à gauche, centrée…).
 Fichier joint : permet de définir si l’image doit bouger avec le reste du contenu au
scroll ou au contraire rester fixe en arrière-plan.
 Répété : permet de définir si l’image doit être répétée dans le cas où elle ne remplirait
pas l’espace du bloc.
 Taille : permet de définir la taille de l’image par rapport au bloc la contenant. L’option
la plus utilisée est “couvrir”, ce qui veut dire que l’image va couvrir tout l’espace du bloc
(elle sera donc cropée si elle n’a pas le même ratio). Attention à utiliser une image d’une
taille suffisante si vous utilisez cette option, sinon le rendu sera pixellisé !
Scrollez dans la colonne de gauche et cliquez “Superposition d’arrière-plan”. Vous voyez

alors la couleur noire qui est choisie. Plutôt que d’utiliser une teinte unique, nous allons définir
une superposition en dégradé de couleurs :
 Cliquez l'icône “dégradé” à côté de l’icône “couleur” représentée par un pinceau.
 Cliquez ensuite la couleur noire et baissez la transparence à zéro.
 C’est déjà beaucoup mieux !
 On s’aperçoit en revanche que le jaune en haut est très clair et que cela va nuire à la
lisibilité du menu blanc en haut de page.
 Nous allons donc modifier l’angle du dégradé pour que le jaune clair soit en bas.
 Saisissez 30 à la place de 180 dans le champ “angle”.
Nous allons maintenant encore améliorer notre hero en ajoutant une forme de séparation en bas
de la section.
 Scrollez toujours dans la colonne de gauche et cliquez “Forme de séparation”.
Page 50 sur 84
 Cliquez “Bas” et sélectionnez “vague”.
Plutôt sympa, non ?
En revanche, la section s’arrête maintenant juste en dessous de la banane, ce qui n’est pas très
esthétique.
 Cliquez “Mise en page” dans la section de gauche et augmentez le champ “hauteur

minimum” à 715 px.
Modifiez le style et la couleur des boutons

Les boutons carrés ne vont maintenant plus très bien avec le reste du design. Nous allons
arranger cela.
 Sélectionnez maintenant le bouton de gauche dans la section de prévisualisation.
 Cliquez “style” dans la colonne de gauche.
 Mettez 40 dans le champ “rayon de bordure”.
 Cliquez maintenant “couleur de l’arrière-plan” et sélectionnez le bleu de notre

palette.
 Cliquez ensuite l’onglet “au survol”, cliquez “couleur de l’arrière-plan”,

sélectionnez le bleu de notre palette et baissez l’opacité à environ ⅔.
 Cliquez maintenant l’onglet “contenu” en haut de la colonne de gauche et saisissez le

texte “En savoir plus” à la place de “Learn more” et saisissez “#ensavoirplus”
dans le champ “lien”.
 Ce type de lien s’appelle une ancre et va permettre de scroller au niveau de la section

ayant l’ID “ensavoirplus” au clic sur le bouton (ce n’est pas la peine d’essayer, elle
n’est pas encore définie !).
Les ancres HTML sont des types de liens spécifiques permettant de scroller jusqu’à un élément
HTML, ou une section, dans le cas d’Elementor ayant un identifiant (ID) spécifique.
Elementor propose aussi un module "Ancre de menu" permettant d'ajouter simplement
l'élément jusqu'auquel l'on veut scroller au clic.
Une des fonctionnalités très pratiques d’Elementor est la possibilité de copier le design d’un
élément pour l’appliquer à un autre.
Nous allons donc le faire ici pour designer le deuxième bouton.
Page 51 sur 84
 Faites un clic droit sur le bouton que nous venons de designer et sélectionnez “copier”.
 Cliquez à nouveau au même endroit pour “lâcher” le bouton qui s’est collé à votre
souris.
 Faites maintenant un clic droit sur le deuxième bouton et sélectionnez “Coller le

style”.
 Le style a bien été copié, mais le bouton est maintenant à droite !
 Sélectionnez le bouton, puis dans alignement cliquez l’icône “justifié à gauche” pour
le repositionner correctement.
 Changer le texte par “Nous contacter” et le lien par “#contact”.
 Allez dans “style” et changez la couleur d’arrière-plan et la couleur d’arrière-plan au

survol avec le rose clair.
Ajoutez des animations sur les boutons

Elementor offre la possibilité d’ajouter très simplement de petites animations sur les widgets
utilisés. Nous allons en ajouter sur les boutons pour qu’ils apparaissent en slidant de part et
d’autre au chargement de la page.
Pour cela :
 Sélectionnez le bouton de gauche, cliquez “Avancé” dans la colonne de gauche et

sélectionnez “Fade in left” dans la section “Animations” ;
 Sélectionnez le bouton de droite, cliquez “Avancé” dans la colonne de gauche et

sélectionnez “Fade in right” dans la section “Animations”.
Attention : les animations peuvent donner une touche sympathique à une page, mais en abuser
fait carrément amateur et nuit à la lisibilité. À utiliser avec modération !
Ça y est, notre hero est fini ! Passons maintenant à la première section de la page.
Personnalisez le contenu de la page

Personnalisez la première section
Scrollez dans la zone de prévisualisation et cliquez sur le titre.
Modifiez le titre
Page 52 sur 84
Changez le contenu par “Création de sites WordPress”. Conservez le titre en “H2”,

puisqu’il contient bien des expressions de recherche sur lesquelles nous souhaitons nous
positionner. Après quelques tests, nous choisissons le style suivant :
 Couleur : le bleu de notre palette.
 Taille de police : 32 px.
 Poids de la police : 600.
Définissez le style par défaut des titres H2
Plutôt que de paramétrer à chaque fois ces valeurs dans Elementor, paramétrez-les comme
valeurs par défaut dans les options de votre thème. Cela vous permettra de ne pas avoir à les
appliquer à chaque fois que vous créerez un titre de niveau 2 (H2) et si jamais vous devez les
modifier dans le futur, de le faire en une seule fois plutôt que d’avoir à repasser sur tous les
titres du site !
 Notez les valeurs souhaitées, puis rétablissez les valeurs sur “par défaut” dans
Elementor.
 Retournez dans le customizer >> Typographie >> H2.
 Insérez les valeurs notées plus haut et publiez.
Attention : pour que ces nouveaux paramètres soient pris en compte dans Elementor, il faut
actualiser la page d’édition Elementor, bien entendu après avoir enregistré les derniers
changements.
Modifiez les blocs “services”
Vous pouvez télécharger les images utilisées dans ce cours en suivant ce lien
(https://s3-eu-west-1.amazonaws.com/course.oc-
static.com/courses/5489551/images-cours.zip) .
 Cliquez l’icône d’affichage des modules et glissez-déposez le module titrage en haut de
la première colonne.
 Remplacez le texte par “Sites vitrines”, choisissez la balise HTML “H3”, centrez
l’alignement, passez la couleur en blanc, et dans typographie, passez en majuscule, taille
26 px.
 Supprimez le bloc “Boîte d’icône” situé en dessous.
 Sélectionnez la colonne en cliquant l’icône grise en haut à gauche du bloc.
 Dans style, mettez une image en arrière-plan et paramétrez un dégradé de couleur.
Page 53 sur 84
 Dans avancé, paramétrez une marge de 5 px à gauche et à droite, et une marge interne
de 120 px en haut et en bas.
 Dupliquez deux fois le bloc ainsi obtenu et supprimez les 2 anciens blocs.
 Remplacez les textes, images d’arrière-plan et dégradé pour correspondre au rendu

souhaité.
Marges internes et marges externes.
Deux concepts essentiels en webdesign sont les marges externes (margin en anglais) et les
marges internes (padding en anglais). Il est essentiel de bien les maîtriser afin de laisser respirer
les contenus.
Figure 24: Modifier les marges externes et internes
Personnalisez la seconde section

Sélectionnez la section. Passez la largeur du contenu à 720 px. Changez l’image de fond avec
l’image suivante dont vous aurez tout d’abord changé l’orientation en mode paysage (cf.
remarque ci-dessous) : https://unsplash.com/photos/Km8L8QoJIq8
Important : éditer une image dans WordPress.
WordPress offre la possibilité d’effectuer des modifications simples sur une image directement
depuis le Dashboard sans avoir à passer par un éditeur externe comme Photoshop ou Gimp.
Pour cela :
 Rendez-vous dans la rubrique “Médias” du Dashboard.

 Cliquez l’image que vous souhaitez modifier et cliquez “Modifier l’image” sous la zone
de prévisualisation.
Page 54 sur 84
 Vous pouvez alors effectuer des rotations ou des symétries en cliquant sur les icônes
correspondantes ou encore recadrer l’image en sélectionnant la zone souhaitée sur la
prévisualisation, puis en cliquant l’icône de recadrage.
 Sauvegardez ensuite vos modifications en cliquant “Enregistrer”.
 Ça y est, l’image est modifiée et vous pouvez l’insérer où vous le souhaitez via l’éditeur
classique ou le page builder de votre choix.
 Paramétrez la forme de séparation “vague” en haut et en bas de la section.
 Paramétrez 120 px de marge intérieure en haut et en bas.
 Supprimez la deuxième colonne de la section.
 Sélectionnez la première colonne.
 Paramétrez un fond blanc en opacité 90 %.
o Passez le titre en bleu, “h3” taille 32 px.
o Supprimez les images des composants “boîte d’image” dans la colonne.
o Insérez les contenus souhaités dans les zones de texte.
o Ajoutez un composant “Section interne” dans la colonne et ajoutez une colonne pour en
avoir 3.
o Glissez chaque composant “boîte d’image” dans une colonne différente.
Personnalisez les sections 3, 4 et 5
Modifiez enfin les sections 3, 4 et 5 par vous-même pour les faire ressembler au site créé par
nos soins et supprimez les sections restantes.
Insérez les carrousels de témoignages clients
Depuis la liste des widgets Elementor, vous pouvez

remarquer une section appelée “Livemesh
Addons”. Elle regroupe les widgets ajoutés par
l’addon “Elementor Addons” installé
précédemment.
Utilisez simplement le widget “Testimonial Slider” pour créer les

carrousels de témoignages clients.
Adaptez le design pour tous les écrans
Avant de passer à la suite, nous allons voir une fonctionnalité essentielle d’Elementor et
d’OceanWP : la possibilité de facilement adapter le design à différentes tailles d’écran.
Page 55 sur 84
Pour cela, cliquez sur l’icône écran de la colonne de gauche en mode édition avec Elementor et
sélectionnez l’icône mobile. La zone de prévisualisation passe instantanément en mode mobile
et vous allez constater de nombreuses choses à optimiser pour ce format : taille de police,
marges, alignement des éléments etc.
Au clic sur un widget, vous allez pouvoir changer les paramètres avec l’icône bleue “mobile” à
gauche spécifiquement pour mobile. Repassez donc sur la page pour corriger tous ces aspects
et enregistrez.
Faites de même avec la version iPad.
Vous pouvez aussi changer les paramètres de typographie OceanWP (entre autre) de la même
façon dans le customizer. Je vous invite donc à configurer les valeurs par défaut pour les tailles
de corps de texte et de titres sur mobile dans le Customizer afin qu’elles soient automatiquement
appliquées partout.
Elementor dispose de nombreuses fonctionnalités et options que nous n’avons pas le temps de
passer en revue dans ce cours. Si vous souhaitez en savoir plus, je vous invite à regarder les
vidéos officielles sur la page YouTube d’Elementor (en anglais) ou de vous abonner au
groupe Facebook français Fans d’Elementor qui diffuse de nombreux tutoriaux en français
et dont les membres ne sont jamais avares de conseils !
Nous vous laissons le soin de créer les autres pages de votre site et de les ajouter au menu.
A noter qu’en plus des pages du site de démo déjà importées vous pouvez :
 Importer des templates de pages et de sections gratuits proposés par Elementor en

cliquant l’icône dossier depuis Elementor
 Importer des centaines de Templates de pages gratuits via l’extension Envato

Elements
Maintenant que vous maîtrisez la création de pages complexes avec Elementor, nous allons voir
comment intégrer des fonctionnalités supplémentaires grâce à des extensions
IV.3. Intégrez des fonctionnalités complémentaires grâce aux

extensions
Ajoutez un formulaire de contact avec WP Form
La première fonctionnalité que nous allons ajouter est un formulaire de contact, indispensable
pour faciliter l’efficacité de son site pour récupérer des demandes clients.
Page 56 sur 84
Pour cela, nous allons utiliser WP Forms, l’extension qui a été installée par défaut lors de
l’import du site de démo OceanWP.
Cette extension développée est en effet particulièrement simple d’utilisation et enregistre

automatiquement les soumissions des formulaires en base de données. Cela est très important,
car il n’est pas rare que les notifications e-mails ne fonctionnent pas ou passent en spam. Je ne
vous souhaite vraiment pas de devoir expliquer à un client que toutes les demandes de contact
prospects des dernières semaines ont été perdues à cause d’un problème de configuration d’e-
mails.
Il existe de nombreuses autres extensions permettant de créer des formulaires de contact. On

citera en particulier :
 Contact Form 7 : la préférée des développeurs, car gratuite, très flexible, et permettant de
nombreuses intégrations. Elle est cependant un peu moins simple d’utilisation.
 Gravity Forms : cette extension est premium, mais offre de très nombreuses possibilités
grâce à une interface complète, mais simple d’utilisation et de très nombreux addons permettant
des intégrations poussées avec d’autres plugins.
Création du formulaire
 Rendez-vous dans la rubrique “WP Forms” depuis le Dashboard WordPress.
 Cliquez “Nouveau”
 Saisissez “contact” comme nom pour notre formulaire et sélectionnez le modèle
“Formulaire de contact simple”.
 Vous pouvez maintenant ajouter des champs en les faisant glisser depuis la colonne de
gauche, et les réorganiser en glissé-déposé dans la zone de prévisualisation du formulaire à
droite. Plutôt simple, non ?
 Cliquez sur un champ dans la zone de prévisualisation à droite pour modifier les options du
champ. Vous pouvez ainsi rendre le champ obligatoire, modifier le libellé du champ, etc.
Réglages du formulaire
Cliquez maintenant sur l’onglet “Réglages” dans le menu de gauche.
Modifiez les libellés de la section générale au besoin, puis cliquez “Notifications”. C’est là que
vous pouvez régler les paramètres d’envoi d’e-mails pour vous prévenir qu’une demande de
contact a été effectuée.
La configuration des e-mails repose sur des balises qui permettent d’utiliser des valeurs
dynamiques dépendant des valeurs saisies dans le formulaire ou paramétrées dans le site. Ici, la
Page 57 sur 84
demande est configurée pour envoyer l’ensemble des champs (balise {all_fields}) à l’adresse
e-mail de l’administrateur du site telle que configurée dans Réglages >> Général (balise
{admin_e-mail}). Vous pouvez cliquer sur les liens “balises intelligentes” pour voir la liste des
balises disponibles.
Cliquez enfin “Confirmation” pour configurer le message de réponse automatique qui sera
envoyé à l’e-mail du visiteur et enregistrez le formulaire en cliquant “Enregistrer” en haut à
droite.
Insertion du formulaire dans la page

Solution 1 : utiliser un shortcode
Pour insérer une fonctionnalité dans un article ou une page, la solution historique et la plus
répandue est l’utilisation de “shortcodes” (ou “codes courts” en français).
Important : les shortcodes sont des codes simples à utiliser pouvant contenir des variables. Ils
sont interprétés dynamiquement lors de la génération de la page pour être remplacés par le bloc
de la fonctionnalité à laquelle ils sont associés.
Pour obtenir le shortcode WP Forms, cliquez “Embed” en haut. Le shortcode obtenu devrait
ressembler à : [wpforms id="437" title="false" description="false"] .
Les paramètres sont :
 id : l’identifiant du formulaire devant être affiché.

 title : valeur true ou false pour choisir d’afficher ou non le titre du formulaire.
 description : valeur true ou false pour choisir d’afficher ou non la description du formulaire.
Vous pouvez les modifier tout en faisant bien attention d’utiliser l’ID d’un formulaire existant,
sans quoi rien ne s’affichera !
Si vous souhaitez intégrer le shortcode dans une page éditée avec l’éditeur classique, il suffit
de le coller dans la zone de contenu.
Dans notre cas, la page est éditée avec Elementor, retournez donc maintenant sur votre page
d’accueil et cliquez “Éditez avec Elementor”.
 Ajoutez une nouvelle section en cliquant l’icône “plus” sur fond rose en bas de page.
 Choisissez “pleine largeur” comme largeur de contenu.
 Cliquez l’icône d’accès aux modules Elementor dans la colonne de gauche et cherchez “code
court”.
Page 58 sur 84
 Glissez le composant dans la section que vous venez de créer, collez le code court copié
précédemment et cliquez “Appliquer”.
Ça y est ! Votre formulaire est intégré sur votre page.
Solution 2 : utiliser un widget
La majorité des plugins génèrent aussi des widgets, pas au sens d’Elementor, mais au sens de
WordPress. Heureusement, ceux-ci sont utilisables directement dans la majorité des page
builders, dont Elementor :
 Cliquez sur l’icône d’accès aux modules Elementor.

 Cherchez “WP forms” et glissez le module dans la section souhaitée.
 Utilisez le menu contextuel pour choisir le formulaire souhaité.
Ajoutez un pop-up d’inscription à une newsletter
La seconde fonctionnalité que nous souhaitons ajouter est un pop-up s’affichant
automatiquement pour inviter à s’inscrire à notre newsletter. Cette pratique est parfois
ennuyeuse et il ne faut pas en abuser, mais elle permet de récupérer les adresses e-mail de
prospects et de maintenir le contact avec son audience.
Ce type de composant n’est pas limité à la constitution d’une base pour sa newsletter et peut
aussi être utilisé pour proposer un audit de site gratuit ou participer à un concours, etc.
Pour ajouter cette fonctionnalité, nous allons utiliser le plugin Hustle développé par la société
WPMUDEV, un des gros acteurs de l’écosystème WordPress.
Installez le plugin depuis le dashboard WordPress dans Plugins >> Ajouter.
Une fois activé, le plugin vous propose de choisir le type de fonctionnalité souhaitée.
 Choisissez “Popup”.
 Rentrez le nom “Newsletter”.
 Cliquez “Show GDPR checkbox” pour être en règle avec la législation européenne et passez
le texte en français en prenant garde à ne pas supprimer le lien vers la politique de
confidentialité.
 Cliquez “Add e-mail collection to this pop-up” pour activer la fonctionnalité d’intégration
avec les outils de newsletter.
 Sélectionnez Mailchimp et cliquez “Edit Form” pour passer les labels du formulaire en
français.
 Cliquez “Preview” à gauche pour vérifier que le pop-up s’affiche bien comme souhaité.
Page 59 sur 84
 Cliquez “continue”, et à nouveau “continue” sur la page suivante (n’hésitez cependant pas
à jouer avec les options de design).
 Cliquez ensuite “Show after certain time” et saisissez 5 s pour n’afficher le formulaire
qu’après un certain temps passé sur la page.
 Cliquez “Publish” et visitez votre site. Le pop-up devrait bien s’afficher !
Maintenant que nous avons mis en place ces fonctionnalités complémentaires, nous allons
travailler sur des fonctionnalités avancées qui ne sont pas toujours indispensables, mais qui
vous permettront de passer au niveau supérieur en termes de création de site.
Auparavant, finalisons notre page :
Enfin, vérifions que notre site est adapté pour un affichage sur mobile :
IV.4. Intégrez des fonctionnalités avancées

Configurez une page d’attente personnalisée
Nous avons vu précédemment comment demander aux moteurs de recherche de ne pas indexer
le site web, ce qui permet d’éviter que des visiteurs tombent dessus pendant les développements.
Cela ne s’avère parfois pas suffisant et certains clients souhaitent que le site soit totalement
inaccessible au public jusqu’au lancement.
Deux solutions s’offrent à vous pour faire cela :
 Utiliser une extension spécialisée comme “Maintenance”, mais les options sont assez
limitées ;
 Utiliser Elementor qui permet de créer une page totalement personnalisée.
 Pour cela nous allons créer un modèle Elementor.
 Rendez-vous dans le Dashboard WordPress et cliquez sur Elementor >> Mes Modèles.
 Cliquez “Ajoutez un nouveau” et sélectionnez le type “Page” et appelez-le

“Attente”.
 Insérez un modèle de page et personnalisez-le ou créez votre page de toutes pièces et

publiez-la.
 Retournez dans le Dashboard WordPress et cliquez Elementor >> Outils.
 Sélectionnez l’onglet “maintenance”, sélectionnez “arrive bientôt” et choisissez le

modèle “attente” que vous venez de créer.
Et voilà, seuls les utilisateurs connectés à WordPress seront capables d’accéder au site !
Page 60 sur 84
Créez un header ou un footer personnalisé avec Elementor et

OceanWP
OceanWP dispose d’une fonctionnalité très intéressante permettant de créer son entête ou son
pied de page avec Elementor. Cela permet de créer des designs complexes et originaux qui
auraient été impossibles à créer avec les seules options du customizer.
Attention, cependant, ces options peuvent sembler limitées, mais permettent aussi de ne pas
faire n’importe quoi et de rester dans les standards. Soyez donc vigilant si vous utilisez cette
option !
Voici les étapes pour créer un header ou un footer personnalisés :
 Depuis le Dashboard WordPress, cliquez “Theme Panel >> Ma Bibliothèque”.
 Cliquez “Ajoutez un nouveau”.
 Saisissez le titre “Header” et choisissez le layout “100 % pleine largeur” dans les
options OceanWP.
 Cliquez “Éditez avec Elementor” et créez votre header personnalisé. À noter que le
menu doit être inséré à l’aide du widget “menu personnalisé”.
 Publiez le modèle et retournez dans le Dashboard WordPress.
 Cliquez Apparence >> Personnaliser pour ouvrir le customizer.
 Dans “Entête” sélectionnez “Entête personnalisé” et sélectionnez le modèle

“Header” que nous venons de créer.
Et voilà, vous disposez d’un entête sur mesure pour votre site !
Le même processus est applicable pour le pied de page en créant un autre modèle et en
l’appliquant dans la section “Widgets de pied de page” du customizer.
Ajoutez des CSS personnalisés

Elementor et OceanWP sont très flexibles, mais il peut arriver qu’ils n’offrent pas les options
de personnalisation de design que l’on souhaiterait.
Il est possible de contourner le problème en ajoutant des règles CSS personnalisées dans la
section “CSS et JS personnalisés” du customizer.
Attention, cette section n’est pas obligatoire et nécessite d’avoir des bases en CSS !
Page 61 sur 84
Identifiez proprement le composant que l’on souhaite personnaliser

S’il s’agit d’un composant Elementor, vous pouvez attribuer une classe CSS au composant
souhaité dans l’onglet “avancé” de la colonne de droite, ce qui va nous permettre de le cibler
très facilement, par exemple “ma_classe_personnalisee”.
S’il ne s’agit pas d’un composant Elementor, il va falloir utiliser l’inspecteur de votre
navigateur web pour cibler le composant souhaité.
Figure 25: Ajouter des CSS personnalisés
Pour cela :
 Ouvrez la page souhaitée dans votre navigateur, faites “clic droit” sur le composant
souhaité et cliquez “inspecter”.
 Sélectionnez le bon élément HTML dans la zone de gauche, puis copiez le code utilisé
pour le cibler dans la colonne de droite.
 Par exemple, pour un lien du menu OcenaWP : #site-navigation-wrap.dropdown-menu

>li >a
 Rendez-vous dans le customizer dans la section “CSS et JS personnalisés”.
 Collez la classe que vous avez attribuée dans Elementor (“.ma_classe_personnalisee”)

ou le code CSS copié depuis l’inspecteur précédemment, puis ajoutez la règle CSS
souhaitée. Par exemple :
.ma_classe_personnalisee{
color:red;
}
Page 62 sur 84
Créez des types de contenus personnalisés

Si vous souhaitez créer des sites un peu plus complexes, il vous faudra certainement créer des
types de contenu personnalisés.
Par exemple, si vous souhaitez créer un site d’annonce de voitures d’occasion, il vous sera
nécessaire de créer un type de contenu “voiture” disposant de champs personnalisés comme
“prix neuf”, “prix de vente”, “année d’acquisition”, etc.
Pour un site plus simple comme le nôtre, ces customs post types peuvent servir à créer des types
de contenus comme des testimoniaux ou encore des portfolios pour présenter nos réalisations.
Cette fonctionnalité était auparavant réservée à des personnes maîtrisant un minimum le code,
mais elles sont maintenant beaucoup plus accessibles. Nous allons ainsi créer un type de
contenu de type “Portfolio” pour présenter nos réalisations.
Il existe de nombreuses extensions permettant de créer des types de contenus personnalisés sans
coder. Nous allons choisir “CPT UI” qui est gratuite et simple d’utilisation.
 Installez-la depuis le dashboard WordPress.
 Dans le dashboard, cliquez CPT UI >> Add / edit Post Types.
 Saisissez :
o “Portfolio” dans le champ Post Type Slug ;
o “Portfolios” dans le champ “Plural label” ;
o “Portfolio” dans le champ “Singular label” ;
o Cochez la case “Built in Categories” en bas de page ;
 Cliquez “Add post type”.
Page 63 sur 84
Vous constaterez alors qu’une nouvelle rubrique “Portfolios” apparaît dans le menu du
Dashboard WordPress !
Créez maintenant quelques contenus de type portfolio depuis cette section. N’oubliez pas de
mettre l’image de la réalisation souhaitée en “Image à la une” et de lui appliquer les catégories
correspondant au type de réalisation (logo, site web, plaquette…).
Vous avez maintenant des contenus de type “Portfolio”, mais comment les afficher ?
Depuis Elementor, insérez le widget “Posts Grid” de la section “Livemesh Addons”.

Dans le champ “Post type”, supprimez “Articles” et ajoutez “Portfolios”.
Dans le champ “Taxonomies”, sélectionnez le type de réalisation souhaité (par exemple
“logos”).
Et voilà, les dernières réalisations de type logo s’affichent automatiquement ! N’hésitez pas à
jouer avec les autres options pour en affiner la présentation.
V.Finalisez et lancez votre site WordPress

V.1. Optimisez le SEO et suivez le trafic de votre site
Les principaux axes d’optimisation SEO
Comme nous l’avons vu, le SEO est un vaste sujet et nous n’en aborderons ici que les bases les
plus essentielles.
Avant tout, il faut faire la distinction entre deux types d’optimisations.
1. Les optimisations off site

Il s’agit des optimisations qui se font en dehors du site, comme :
 la déclaration du site auprès de Google Search Console ;
 la création d’un profil Google My Business ;
 la mise en place de liens entrants sur des sites à fort trafic ou très bien référencés sur les
mots-clés ciblés ;
 et bien d’autres aspects que nous ne pouvons pas passer en revue ici...
2. Les optimisations “on site”

Il s’agit de tout ce qui peut être optimisé directement sur votre site comme le contenu, le
balisage, etc.
 La qualité du contenu. C’est le plus important : disposer d’un contenu

intéressant, bien écrit, complet et original !
Page 64 sur 84
 Pour aller encore plus loin et s'assurer que le contenu soit SEO friendly, n'hésitez pas à
faire appel à un rédacteur web SEO. Vous serez sûr que vos contenus seront visibles
sur les moteurs de recherche.
 Le nom de domaine. Disposer du mot-clé principal dans le nom de domaine du site

est un avantage énorme (tapez “plombier bordeaux” dans Google et regardez les
résultats !). Il est donc fortement conseillé de bien prendre en compte ce paramètre avant
de choisir son nom de domaine. Pour une activité locale, il pourra être pertinent de mettre
le nom de la ville. Dans notre cas, il sera judicieux de choisir le nom de domaine
“agence-bananadesign.com” plutôt que “bananadesign.com”.
 Les titres et descriptions des pages. Chaque page web dispose d’un titre et d’une
description sous forme de balises “meta” dans le header HTML. Ce titre et cette
description sont en particulier ce que vous voyez dans les pages de résultats de recherche
:
Figure 26: Résultats d'une recherche "OpenClassrooms"
Ces balises sont aussi utilisées par Google pour définir le classement dans les positions de
recherche. Il faut donc les optimiser pour les expressions de recherche choisies !
Optimisation SEO à l’aide de SEO Press

Différents plugins existent pour nous aider à optimiser tous ces aspects SEO. Dans notre cas,
nous allons utiliser SEO Press. Installez le plugin, si cela n’est pas encore fait, depuis
“Extensions >> Ajouter”.
Optimisations globales
Page 65 sur 84
La première chose à faire est d’aller depuis le Dashboard WordPress dans SEO Press >> tableau
de bord.
SEO Press va vous présenter une liste de recommandations globales pour votre site.
Mettre en place un certificat SSL
C’est ce qui permet de disposer d’une connexion sécurisée. Si vous êtes sur Themecloud et que
vous avez connecté votre domaine , il vous suffit de cliquer Enable SSL depuis l’onglet
“Outils”.
Flux RSS
Il est recommandé de n’afficher que l’extrait des contenus dans le flux RSS. Cliquez “Résoudre
cela” et choisissez “L’extrait” dans la page de réglages.
Affichez d’avantages d’articles par pages
Par défaut, le nombre d’articles par pages est configuré à trois. Cliquez “Résoudre cela” et
augmentez cette valeur à 10.
Créer un compte Google My Business
Cela a un très fort impact sur les recherches localisées, ce qui nous concerne puisque nous
ciblons une ville spécifique. Cliquez “Résoudre cela” et suivez les instructions.
Déclarer son site sur Google Search Console
Cela permet à Google de savoir que votre site existe et vous permettra aussi de suivre et
d’optimiser la façon dont il est vu par Google par la suite. Ne le faites pas pour l’instant, car
nous ne sommes pas encore prêts à être référencés, il faudra s’en occuper au dernier moment
avant le lancement.
SEO Press propose ensuite différents modules optionnels :
 Titres et métas : pour définir les règles de construction automatiques des titres et
métas de vos contenus.
 Plan de site : pour générer un sitemap.xml qui permettra de fournir aux moteurs de
recherche l’intégralité des contenus de votre site.
 Réseaux sociaux : pour connecter votre site à vos profils sociaux et optimiser les
partages de vos contenus.
 Google Analytics : pour connecter Google Analytics et suivre votre trafic de façon
précise
Page 66 sur 84
 Avancé : comme son nom l’indique, pour modifier des paramètres avancés quand on
est expert.
 Outils : pour exporter/importer les paramètres d’un site à un autre.
Nous vous conseillons évidemment de configurer correctement l’ensemble de ces modules.

Certains d’entre eux comme Google Search Console ou Google Analytics nécessitent
cependant que le site soit sur le nom de domaine final. Nous reviendrons dans le dernier chapitre
sur leur mise en place.
Optimisations des contenus
SEO Press permet aussi d’optimiser le SEO pour chaque page ou article de votre site. Nous
allons le faire ensemble pour la page d’accueil. Allez donc dans “Pages” depuis le dashboard
WordPress et cliquez “éditer” en dessous de la page d’accueil.
Scrollez un peu dans la page d’édition et vous verrez que SEO Press a généré deux nouveaux
blocs : SEO et Analyse de contenu.
La première chose à faire est de saisir les expressions de recherche dans le champ “mots-clés
cibles” du bloc “Analyse de contenu”. Chaque expression doit être séparée par une virgule.
Saisissez donc “agence wordpress bordeaux, freelance wordpress bordeaux, création

de logo bordeaux, agence référencement Bordeaux, création sites WordPress” dans le
champ mots-clés cibles, puis cliquez sur “Analyser mon contenu”. SEO Press va
automatiquement analyser votre contenu en fonction des expressions choisies et va vous donner
des recommandations pour optimiser votre page.
Nombre de mots
La première recommandation concerne le nombre de mots sur la page. En effet, Google

apprécie les pages disposant de beaucoup de contenu texte. Il faut donc faire en sorte d’avoir
au minimum 300 mots et si possible plus. C’est bien notre cas !
Titre de l’article (ou de la page)
La seconde recommandation concerne le titre de l’article qui ne contient aucune expression de

recherche cible. Nous allons donc le modifier par “Agence WordPress Bordeaux”.
Titres de niveaux deux et trois
La troisième recommandation concerne les titres de niveau 2 “H2”. Il faut faire en sorte que les
titres soient bien structurés et contiennent les mots-clés cibles. SEO Press n’est en revanche
pas encore compatible avec les page builders comme Elementor et n’est pas capable d’identifier
Page 67 sur 84
les mots-clés pour les pages créées avec des page builders. Il vous faudra donc ne pas tenir
compte de cette notification, mais bien vous assurer manuellement que les expressions clés sont
présentes dans les titres !
Balise titre et balise métadescription
Il s’agit des titres et descriptions des pages évoqués plus haut déterminant l’apparence
de votre page dans les résultats de recherche et ayant un impact très important sur le SEO.
Il est donc essentiel de les optimiser pour à la fois contenir les expressions clés cibles et donner
envie aux lecteurs de cliquer !
Nous allons mettre :
 Le titre : “Banana Design - agence WordPress Bordeaux.”
 La métadescription : “Agence web à Bordeaux : identité graphique, création de

logos, création de sites WordPress, référencement naturel. Devis rapides et gratuits.”
V.2. Optimisez les temps de chargement de votre site

Dans ce chapitre, nous allons voir comment mesurer le temps de chargement de votre site et
comment l'optimiser.
Vérifiez le temps de chargement de votre site

Un site qui met longtemps à se charger génère de la frustration et un inconfort certain pour les
visiteurs. À tel point que, selon Amazon, 100 ms de temps de chargement en plus va leur faire
perdre 1 % de chiffre d’affaires ! Le temps de chargement est par ailleurs un des critères SEO
pris en compte par les moteurs de recherche.
Il est donc important de mesurer les temps de chargement de ses pages et de les optimiser.
Attention cependant, chercher à avoir un temps de chargement hyper optimisé n’aura pas
d’impact sur votre SEO et relève souvent de la lubie (à moins que l’on s’appelle Amazon ou
Facebook). En effet, si Google va pénaliser les sites trop lents, il ne va pas accorder de “bonus”
aux sites hyper rapides.
De nombreux outils permettent de mesurer le temps de chargement d’une page. Les plus connus
sont GT Metrix et Pingdom. Nous allons ici utiliser GT Metrix. Pour tester son temps de
chargement avec GT Metrix :
 Rendez-vous sur https://gtmetrix.com et créez-vous un compte gratuit pour avoir un

historique et bénéficier de plus d’options ;
Page 68 sur 84
 Cliquez “analysis option” et choisissez la ville la plus proche de votre zone

géographique cible (ici, London) ;
 Saisissez l’URL de la page et cliquez “Analyze”.
Après une minute ou deux, vous disposez des résultats d’analyse de performances.
 L’indicateur le plus important est le temps de chargement.
 Celui-ci ne doit pas dépasser 3 s et se situer si possible autour de 1s.
 Les scores PageSpeed et Yslow n’ont pas vraiment d’importance.
 Les recommandations en dessous sont en revanche intéressantes pour identifier ce qui

ralentit votre site.
 L’onglet Waterfall est aussi intéressant et permet d’identifier les ressources (internes,
comme des images, ou externes, comme des scripts Google Analytics, Google Maps, etc.)
qui ralentissent le temps de chargement de votre page.
Optimisez le temps de chargement de votre site

Maintenant que l’on a vu comment mesurer le temps de chargement, nous allons voir comment
l’optimiser.
Mettez en place une solution de cache

Une façon simple et rapide d’optimiser le temps de chargement de ses pages est d’installer un
plugin de cache. Cela permet de stocker temporairement les pages pour ne pas les régénérer
entièrement à chaque fois qu’elles sont visitées, et ainsi de les délivrer plus vite aux visiteurs.
En revanche, cela veut aussi dire que les modifications que vous apportez au site ne seront pas
visibles immédiatement à moins de “vider le cache”. N’oubliez donc pas de le désactiver ou de
le vider régulièrement quand vous travaillez sur le site, au risque de vous arracher les cheveux
pour rien.
Je recommande l’utilisation du plugin de cache WP Rocket, développé par WP Media, une

société française spécialisée WordPress ! Il est très simple d’utilisation, extrêmement
performant, et dispose d’une bonne équipe de support francophone.
En revanche, ce plugin est payant, donc pas forcément adapté à tous les projets.
Une bonne alternative gratuite est le plugin WP Super Cache qui est très simple d’utilisation
et offre de bonnes performances. Si vous vous sentez l’âme d’un expert, vous pouvez aussi jeter
Page 69 sur 84
un œil à W3 Total Cache, gratuit aussi, mais offrant une multitude d’options pour fine tuner
les performances.
Après mise en place de WP Super Cache, vous devriez obtenir un excellent score et un temps
de chargement d’environ 1s dans GT Metrix !
Optimisez les images

Une des causes les plus fréquentes d’un temps de chargement trop long est l’utilisation d’images
non optimisées pour le web.
En effet, une image en haute résolution peut rapidement peser plusieurs mégas et ainsi mettre
plusieurs secondes à se charger !
La meilleure solution est d’optimiser les images avant de les importer dans votre WordPress
avec Photoshop ou des outils gratuits comme https://tinyjpg.com/ pour compresser vos
images.
Une image doit en général ne pas peser plus de quelques centaines de ko.
Si vous êtes pressé ou que vous récupérez un site comportant de nombreuses images non
optimisées, vous pouvez aussi utiliser des plugins d’optimisation des images.
L’équipe de WP Rocket propose le plugin Imagify, payant lui aussi. Une bonne alternative
freemium est ShortPixel qui vous permet d’optimiser gratuitement 100 images par mois sans
limite de taille ou de poids ! Attention, cependant, les miniatures sont prises en compte comme
des images, donc le crédit s’épuise rapidement…
Utilisez les bonnes tailles d’images

Même si vos images sont optimisées en termes de poids, il faut faire attention à utiliser une
taille adaptée à la taille utilisée dans le contenu.
Il est ainsi assez courant de voir des images affichées en 300 px de large à l’écran, mais dont le
fichier fait 1200 px de large ! C’est la raison pour laquelle WordPress génère automatiquement
différentes tailles de miniatures que vous pouvez sélectionner facilement dans Elementor ou
dans l’éditeur WordPress en fonction de la taille d’affichage souhaitée. Il faut juste ne pas
oublier de le faire. ;-)
Nettoyez votre base de données

Une autre raison de la lenteur des chargements est une base de données surchargée. De
nombreux plugins stockent en effet des données temporaires sans pour autant les supprimer
régulièrement, les historiques d’articles peuvent s’accumuler en base de données, etc.
Page 70 sur 84
Certains plugins de cache comme WP Rocket incluent des outils pour nettoyer et optimiser
votre base de données. Sinon, vous pouvez utiliser le plugin gratuit WP Optimize qui fait très
bien cela !
Il existe de nombreux autres axes d’optimisation des performances que nous n’avons pas le
temps de voir ici, mais pas d’inquiétudes, Google regorge de ressources à ce sujet !
Page 71 sur 84
V.3. Optimisez vos contenus

Nous allons maintenant lister toutes les vérifications à faire avant de lancer votre site !
Supprimez les contenus non utilisés

Lorsque vous importez un site de démo, de nombreux articles et pages sont générés avec du
faux contenu. Personne n’a envie que ceux-ci soient référencés dans Google, n’oubliez donc
pas de les supprimer (ou de les passer en brouillon si vous souhaitez conserver la structure pour
de prochains contenus).
Vérifiez le bon affichage des pages sur tout type d’écran

Plus de 50 % du trafic se fait maintenant sur mobile, n’oubliez donc pas de vérifier que vos
pages s’affichent bien sur tout type d’écran en les visitant depuis votre mobile ou en utilisant la
fonctionnalité de simulation de taille d’écrans de votre navigateur (clic droit sur la page,
examiner ou inspecter l'élément puis clic sur l'icône mobile dans l'inspecteur).
Figure 27: Simuler un appareil mobile depuis son navigateur
Vérifiez que vos contenus répondent bien aux bonnes pratiques d’accessibilité
L’accessibilité consiste à faire en sorte que vos contenus soient accessibles pour tout le monde,
et en particulier pour les personnes souffrant d’un handicap.
Cela peut être les malvoyants, daltoniens, malentendants, handicapés moteurs, mentaux, etc.,
et aussi les seniors, qui cumulent souvent plusieurs petits handicaps. Contrairement à ce que
l’on pourrait penser, cette population concernée par l’accessibilité représente un pourcentage
élevé de la population globale. Il est donc essentiel de faire en sorte que votre site respecte
autant que possible les règles d’accessibilité.
Page 72 sur 84
Les règles principales sont les suivantes :
 Donnez des titres et des descriptions à vos images pour que les malvoyants ou les non-
voyants sachent de quoi il s’agit.
 Faites-en sorte que le contraste entre les textes et les fonds soit suffisant pour permettre
une bonne lecture.
 Utilisez des tailles de police suffisamment grandes pour être lues facilement.
 Utilisez des labels explicites pour vos liens. Les liens de type “En savoir plus” sont à
proscrire !
Pour professionnaliser ces compétences, contactez un rédacteur web avec une spécialité SEO.
Il saura définir les bons titres et mots clés à utiliser pour optimiser la visibilité de votre site sur
les moteurs de recherche.
Il existe de très nombreuses autres règles à respecter et je vous invite
 à regarder les excellentes conférences de Claire Bizingre sur le sujet

: https://central.wordcamp.org/
 À utiliser le plugin WP Accessibility pour vous aider à les mettre en œuvre.
Vérifiez que le site ne contient pas de liens cassés
Pour cela, installez le plugin “Broken links” qui analysera automatiquement tous les liens de
votre site.
Vérifiez que les formulaires fonctionnent correctement

Il est courant que les formulaires de contact soient mal configurés. Vérifiez bien leur bon
fonctionnement avant la mise en ligne !
Vérifiez que le site est bien visible par les moteurs de recherche
Nous avons paramétré le site pour être invisibles aux moteurs de recherche en début de cours.
N’oubliez pas de désactiver cette option et de désactiver le mode maintenance avant le
lancement !
Créez les pages légalement obligatoires

Comme vous le savez peut-être, la législation française et européenne (RGPD) requiert de
mettre en place des pages contenant des informations légales obligatoires. Je vous invite à
consulter la cette page (https://www.service-public.fr/professionnels-
entreprises/vosdroits/F31228) pour déterminer quelles mentions légales sont obligatoires en
fonction de votre activité.
Page 73 sur 84
En ce qui concerne la politique de confidentialité, WordPress s’est doté d’un outil pour vous
aider à générer la page requise automatiquement !
Pour la générer, rendez-vous dans Réglages >> Confidentialité depuis votre tableau de bord
WordPress. Cliquez “Générer une page” si vous ne l’avez pas encore créée. Attention, la
page générée n’est qu’un modèle et il vous appartient de la compléter en fonction de votre
activité et des outils que vous utilisez !
Protégez votre site des hackers

Un dernier point important avant de lancer son site est de le protéger au maximum des hackers
qui ne tarderont pas à s’en prendre à lui une fois en ligne.
Si vous êtes chez Themecloud, vous bénéficiez dès la mise en ligne de la solution de sécurité
Astra Pro qui garantit la sécurité de votre site.
Sinon, n’oubliez pas d’installer un plugin de sécurité comme Wordfence (gratuit) ou SecuPress
(payant, mais très complet). Pensez aussi à modifier votre URL de connexion. Cela peut être
fait facilement avec l’extension gratuite WPS Hide Login.
V.4. Connectez votre nom de domaine et finalisez vos

configurations
Configurez votre nom de domaine
Maintenant que votre site est presque prêt, nous allons connecter le nom de domaine final du
site. Attention, cela ne veut pas dire que nous allons le mettre en ligne. Notre site est toujours
en mode “caché aux moteurs de recherche”, voire “maintenance” si vous avez mis en place
cette option.
Mais il est préférable que le site soit connecté au nom de domaine définitif pour pouvoir
effectuer les dernières tâches nécessaires. Si vous prenez l’hébergement et le nom de domaine
chez le même prestataire, les deux seront a priori déjà configurés et vous avez certainement
travaillé dès le début sur le nom de domaine final.
Dans le cas de Themecloud, vous pouvez demander un nom de domaine depuis votre interface
de gestion et il sera automatiquement connecté au site sous 24 h. Si vous décidez de prendre
votre nom de domaine chez un autre prestataire que votre hébergeur, il va falloir le faire pointer
vers votre hébergement. Cela se passe en modifiant les enregistrements DNS (DNS records) du
domaine.
Page 74 sur 84
1. Récupérez les enregistrements requis par l’hébergeur

L’hébergeur va généralement vous indiquer quels sont les enregistrements DNS à configurer
sur votre domaine. Dans le cas de Themecloud, il suffit de cliquer “Connect domain” et de
rentrer le nom de domaine souhaité.
Les enregistrements requis sont alors affichés dans la fenêtre et les enregistrements actuels sont
aussi affichés pour vous aider à vérifier s’ils coïncident bien ou non.
Un enregistrement DNS est composé de 4 parties.
Prenons par exemple l’enregistrement requis par Themecloud :

www 3600 IN CNAME my.themecloud.io.
Le nom : www
“www” correspond à l’host, cela veut dire que l’on veut rediriger les adresses de
type www.[mondomaine.com]. Si l’on veut rediriger l’intégralité du domaine, on utilise le host
“*” ou “@”.
Le TTL (time to live) : 3600
C’est le temps en secondes durant lequel l’enregistrement doit être gardé en cache par les
serveurs. En pratique, cette valeur a peu d’importance et vous pouvez laisser la valeur par défaut
(généralement 3600).
Le type : IN CNAME
C’est le type d’enregistrement DNS.
CNAME permet de rediriger vers un autre domaine ou sous-domaine. A permet de rediriger

vers une adresse IP. MX permet de rediriger vers un serveur mail.Etc.
La valeur : my.themecloud.io
C’est la cible de l’enregistrement qui dépend du type, comme on vient de le voir précédemment.
2. Modifiez les enregistrements DNS de votre domaine

Depuis l’interface de votre fournisseur de domaine, accédez à la page de modification des
enregistrements (ou zones) DNS.
Je vous recommande de faire une copie d'écran ou de noter les enregistrements DNS affichés
avant de les modifier, cela vous permettra de revenir en arrière facilement au besoin.
Modifiez les enregistrements existants et créez les nouveaux s’ils n’existent pas.
Page 75 sur 84
Plutôt que d’utiliser les serveurs DNS de votre fournisseur de domaine, vous pouvez aussi
utiliser des services externes comme Cloudflare. Cloudflare est gratuit et apporte de nombreux
avantages comme des connexions sécurisées en https, un CDN global, des règles de sécurité
supplémentaires.
3. Attendez le temps de propagation et modifiez les URL en base de données

Le temps de propagation correspond au temps que mettent les nouveaux enregistrements DNS
à se propager sur le réseau. C’est en général très rapide (quelques dizaines de minutes), mais
cela peut prendre plusieurs heures en fonction du fournisseur de domaine.
Dès que les DNS sont bien propagés, Themecloud va automatiquement modifier toutes les URL
en base de données pour passer le site sur le domaine final !
Si vous n’utilisez pas Themecloud et que vous modifiez le domaine rattaché à votre site web,
ce dernier risque d’être inaccessible, car WordPress aura encore l’ancien domaine en base de
données.
Heureusement, il existe un script très pratique qui permet de facilement modifier toutes les URL
en base de données, Search Replace par Inteconnect.it.
Il suffit :
 De télécharger l’archive du script, de la décompresser et de renommer le dossier avec un

nom simple comme “searchreplace” ;
 De l’uploader sur votre serveur via FTP ou le gestionnaire de fichiers de votre hébergeur ;
 De vous rendre sur l’URL [mondomaine.com]/searchreplace ;
 De saisir dans le champ de gauche l’ancien domaine (par exemple
monsite.anciendomaine.com) et dans le champ de droite le nouveau (par exemple
nouveaudomaine.com).
Finalisez les configurations
Voilà, votre site est en ligne, nous allons maintenant pouvoir effectuer les dernières
configurations nécessitant d’être sur le domaine définitif.
Configurez Google Analytics

Pour mettre en place Google Analytics, il faut commencer par se créer un compte
sur https://analytics.google.com.
Suivez les instructions et créez une propriété pour le nom de domaine de votre site. Récupérez
ensuite l’ID de suivi Google Analytics, de type UA-XXXX-XX.
Page 76 sur 84
Depuis le dashboard :
 Rendez-vous dans SEOPress >> Google Analtics.

 Cochez la case “Activer le suivi Google Analytics (balise globale du site : gtag.js)”.
 Rentrez l’ID de suivi dans le champ dédié.
 Si vous ne prévoyez pas un autre formulaire de consentement dédié pour le RGPD (ni
l’utilisation d’autres cookies de suivi), cochez la case de consentement RGPD et remplissez les
infos requises pour le formulaire.
Ça y est, Google Analytics est bien connecté à votre site et vous pouvez suivre les statistiques
détaillées de vos visites !
SEOPress offre de nombreuses autres options très utiles pour Google Analytics, comme
l'anonymisation des adresses IP ou le suivi d’événements (liens externes, téléchargements, etc.).
N’hésitez pas à les explorer !
Il existe des alternatives plus simples à Google Analytics comme en particulier l’extension
Slimstat qui ne nécessite aucune configuration et affiche directement les principales statistiques
dans le Dashboard WordPress.
Configurez Google Search Console

Google Search Console est un outil de Google permettant de suivre et d’optimiser votre
référencement naturel. Déclarer son site sur Google Search Console permet aussi de prévenir
Google de son existence, ce qui est indispensable si vous n’avez pas de liens entrants vers votre
site et que vous souhaitez que ce dernier apparaisse rapidement dans les résultats de recherche
!
De même que sur Google Analytics, créez-vous un compte et créez une propriété pour votre
domaine. Plusieurs méthodes de validation du domaine vous sont alors proposées. Les plus
simples sont :
 Le dépôt d’un fichier à la racine du site. Pour cela, utilisez le File Manager Themecloud dans
l’onglet “Outils” de votre interface Themecloud ou un client FTP comme Filezilla, avec les
identifiants SFTP disponibles toujours dans l’onglet “Outils” de Themecloud.
 L’ajout d’une balise meta dans le header HTML des pages. Pour cela, nous recommandons
l’utilisation du plugin “Insert Headers and Footers” qui vous permet de directement coller le
code requis dans la page Outils >> Insert Header and Footers depuis le dahsboard WordPress.
Page 77 sur 84
Une fois le domaine validé, vous recevrez automatiquement des instructions pour optimiser la
présence de votre site. Pensez en particulier à indiquer à Google l’URL de votre sitemap généré
automatiquement par SEOPress depuis SEOPress >> Plan de site HTML/XML.
Page 78 sur 84
Conclusion
Bravo ! Votre site est maintenant en ligne, déclaré à Google et votre trafic tracké par Google
Analytics. Vous pouvez faire une pause et célébrer !
L’histoire ne fait bien sûr que commencer et il sera important de publier régulièrement du
contenu, d’analyser votre trafic et votre positionnement SEO, et de procéder régulièrement aux
mises à jour de WordPress et de ses composants.
Vous avez maintenant toutes les clés en main pour :
 Expliquer ce qu'est WordPress

 Lister les éléments nécessaires au fonctionnement de WordPress
 Décrire les sections du tableau de bord de WordPress et l'organisation d'un site
 Sélectionner les composants WordPress (Thème et plugins) adaptés à un projet
 Personnaliser les contenus et le design de son site WordPress
 Lister les éléments à vérifier avant de lancer son site WordPress
 Créer un site WordPress complet et professionnel
N'oubliez pas de réaliser les exercices de fin de partie pour valider ces compétences !
J’espère que vous avez apprécié ce moment passé ensemble et que ce cours vous a donné envie
d’aller plus loin dans le monde du webdesign !
V.5. Entraînez-vous à réaliser un site WordPress professionnel

À vous de jouer !
Pour vous entraîner, réalisez cet exercice étape par étape. Une fois terminé, vous pouvez
comparer votre travail avec les pistes que je vous propose.
Vous devez créer un site web pour un club de sport qui vient d'être lancé. Ce club cible
spécifiquement les jeunes actifs souhaitant garder la forme dans une ambiance décontractée et
conviviale.
Le club proposera ainsi de nombreux cours et animations. Il communiquera à la fois sur son blog
et sur les réseaux sociaux pour promouvoir les événements à venir et partager les photos et
comptes-rendus des événements passés.
Ce client vous commande donc un site vitrine destiné à promouvoir le club sur internet et à
communiquer sur ses actualités et événements.
L’image du site doit être professionnelle, mais chaleureuse. La palette de couleurs pourra être
au choix :
 sombre, avec des couleurs chaudes (orange foncé, bordeaux…) ;
 claire, avec des couleurs vives (rouge, rose, vert…).
Page 79 sur 84
Attention, le design du site devra être original et ne pas être une simple copie de modèles
existants !
Le site devra par ailleurs être optimisé pour le référencement naturel, pour un chargement rapide
et les règles principales d'accessibilité devront être respectées.
Cahier des charges
Le client vous demande de respecter les consignes suivantes pour la structure du site web à
créer.
 Un header (en-tête) présente :
o le logo de la société ;
o le numéro de téléphone ;
o un bouton “tester gratuitement” en évidence ;
o le menu principal de navigation qui contient : activités, coachs, actualités,
infos pratiques.
 Une page d’accueil est composée de :
o un “hero” (section visuelle pleine largeur) présentant le slogan du club et un
bouton incitant à s’inscrire à une séance gratuite ;
o une section présentant les différents services et activités proposés par le club :
fitness, crossfit et boxe. Chaque activité sera illustrée à l'aide d'une
image adaptée libre de droits et d'un court texte de description ;
o une section présentant les coachs ;
o une section “témoignages” présentant les avis de différents clients ;
o une section tarifs avec 3 formules : 29 €/mois (1 activité), 49 €/mois (2
activités) et 69 €/mois (3 activités) ;
o une section "informations pratiques" incluant :
 les coordonnées du club,
 un formulaire de contact permettant de sélectionner 3 types de
demandes : cours gratuit, inscription ou partenariat,
 une carte Open Street Map ou Google Map montrant les localisations
des différentes salles.
 Un page "Actualités" de type blog, avec :
o le flux des actualités sous forme de grille et avec la possibilité de filtrer par
type d’actualités (communauté, promotions, événements) ;
o le flux Instagram et/ou Twitter dans la sidebar (barre latérale). Pas la peine de
créer de comptes sur ces réseaux sociaux ; pour cela, utilisez les comptes
Instagram de marques de sport à titre d'exemple.
Vous pouvez télécharger le logo FitActive en suivant ce lien.
Pour créer ce site, vous pouvez choisir entre ces deux solutions :
 Utiliser Themecloud
Page 80 sur 84
 Créer le site en local

Quel que soit votre choix, il vous faut envoyer un export du site réalisé avec le plugin "All in
One WP Migration" sous la forme d'un fichier .wpress.
Attention, si vous exportez le site depuis Themecloud, pensez à cocher la case concernant les
"mu plugins" avant l'export.
Vérifiez bien que vous avez les éléments suivants :
 Les couleurs et polices de caractère du thème correspondent à celles décrites dans le

brief.
 Le logo est inséré dans le header et en favicon.
 Le menu est correctement configuré dans le header et correspond à l’arborescence
décrite dans le brief.
 Les sections et pages correspondantes sont créées et paramétrées (en particulier la
page d’accueil et la page pour les actualités).
 Les composants choisis valident les critères de sélection décrits dans le cours.
 Les composants sont correctement configurés et fonctionnent comme décrit dans
le cahier des charges : carte Open Street Map ou Google Maps et formulaire de
contact (les champs doivent bien correspondre).
 Les composants sont bien intégrés et s’accorder avec le design général du site
(couleurs et polices de caractères cohérentes en particulier).
 La structure de pages (en particulier la page d’accueil) respecte le cahier des charges.
 Les pages s’affichent correctement sur tous types d’écrans (desktop, mobile et
tablette).
 Les images ont leurs champs meta renseignés.
 Les liens dont le label n’est pas explicite disposent bien d’une balise titre explicite.
 Un plugin SEO (Yoast ou SEO Press) est installé et bien configuré.
 Les fichiers sitemap.xml et robots.txt ont été créés.
 Toutes les pages ont un titre et une description (meta) renseignés.
 Les expressions de recherche choisies en focus sur chaque page sont pertinentes
(adaptées au secteur, bon équilibre entre trafic potentiel et concurrence). Les titres
dans les contenus sont bien optimisés en fonction des expressions de recherche
choisies et le balisage (h1, h2, h3) respecter les bonnes pratiques (1 unique H1, 3 ou 4
H2, etc.).
 Les images sont compressées pour le web.
 Les formats d’images choisis dans les contenus sont adaptés à leur taille effective à
l’écran.
 Un plugin de cache est installé et configuré.
Vérifiez votre travail !
Alors, vous êtes allé au bout ? Voici un exemple (http://fitactive.themecloud.website/) pour

vous permettre de vérifier votre travail.
Page 81 sur 84
Table des matières

I. Découvrez WordPress et déployez votre site rapidement.......................................................... 1
I.1. Découvrez WordPress ............................................................................................................. 1
Découvrez les notions de CMS et d’open source .............................................................. 1
Découvrez l’histoire et les atouts de WordPress ............................................................... 2
I.2. Initiez-vous au fonctionnement d’un site web........................................................................ 5
Comment fonctionne le web ? .................................................................................................... 5
Qu’est-ce qu’un hébergement web ?......................................................................................... 6
Qu’est-ce qu’un nom de domaine ? ........................................................................................... 7
I.3. Choisissez votre hébergeur et mettez votre site WordPress en ligne .................................... 8
Choisissez votre hébergeur ........................................................................................................ 8
Déployez votre site WordPress .................................................................................................. 9
II. Prenez en main l’administration de votre site WordPress........................................................ 11
II.1. Connectez-vous au Dashboard WordPress et créez votre premier article ........................... 11
Connectez-vous au dashboard WordPress ............................................................................ 11
Créez votre premier article ........................................................................................................ 12
II.2. Paramétrez les options de votre site WordPress .................................................................. 16
Passez votre site en français .................................................................................................... 16
Changez le titre et le slogan de votre site............................................................................... 17
Modifiez la catégorie par défaut de vos articles ..................................................................... 19
Cachez le site aux moteurs de recherche pour le temps des développements ............... 19
Configurez les paramètres de commentaires......................................................................... 20
II.3. Mettez en place une page d’accueil personnalisée et créez votre menu de navigation ...... 21
Créez votre page d’accueil et votre page de blog ........................................................... 21
Configurez votre page d’accueil et votre page de blog ................................................. 21
Créez votre menu de navigation........................................................................................... 21
II.4. Personnalisez l’apparence du site grâce au customizer........................................................ 22
Modifiez les options d’apparence du thème ........................................................................... 23
III. Choisissez, installez et configurez les composants WordPress adaptés à votre projet ........ 24
III.1. Définissez le type de site que vous souhaitez créer .............................................................. 24
Définissez les objectifs du site .................................................................................................. 25
Pensez au référencement dès le début .................................................................................. 25
Définissez la structure de votre site ......................................................................................... 27
III.2. Choisissez votre thème et votre page builder....................................................................... 28
À quoi sert un thème WordPress ? .......................................................................................... 29
À quoi sert un page builder ? .................................................................................................... 29
Page 82 sur 84
Les différents types de thèmes WordPress ............................................................................ 30

Apprenez à bien choisir votre thème WordPress .................................................................. 32
III.3. Installez et configurez votre thème WordPress .................................................................... 33
Installez votre thème WordPress ......................................................................................... 33
Gagnez du temps en important un site de démo ............................................................. 35
III.4. Choisissez et installez les extensions WordPress pertinentes pour votre projet ................. 36
Comprenez ce qu’est une extension WordPress .................................................................. 37
Choisissez les extensions pertinentes pour votre projet ...................................................... 37
IV. Personnalisez les contenus et le design de votre site WordPress ........................................ 39
IV.1. Définissez le design global de votre site................................................................................ 39
Paramétrez les options du thème en fonction de votre charte ............................................ 42
IV.2. Prenez en main Elementor et designez votre page d’accueil ............................................... 46
Personnalisez le hero de votre page d’accueil ...................................................................... 47
Personnalisez le contenu de la page....................................................................................... 52
IV.3. Intégrez des fonctionnalités complémentaires grâce aux extensions .................................. 56
Ajoutez un formulaire de contact avec WP Form ............................................................ 56
Ajoutez un pop-up d’inscription à une newsletter........................................................... 59
IV.4. Intégrez des fonctionnalités avancées .................................................................................. 60
Configurez une page d’attente personnalisée........................................................................ 60
Créez un header ou un footer personnalisé avec Elementor et OceanWP....................... 61
Ajoutez des CSS personnalisés ............................................................................................... 61
Créez des types de contenus personnalisés.......................................................................... 63
V. Finalisez et lancez votre site WordPress ................................................................................... 64
V.1. Optimisez le SEO et suivez le trafic de votre site .................................................................. 64
Les principaux axes d’optimisation SEO ................................................................................. 64
Optimisation SEO à l’aide de SEO Press ............................................................................... 65
V.2. Optimisez les temps de chargement de votre site ................................................................ 68
Vérifiez le temps de chargement de votre site ....................................................................... 68
Optimisez le temps de chargement de votre site................................................................... 69
V.3. Optimisez vos contenus......................................................................................................... 72
V.4. Connectez votre nom de domaine et finalisez vos configurations ....................................... 74
Configurez votre nom de domaine ........................................................................................... 74
Finalisez les configurations ....................................................................................................... 76
Conclusion ................................................................................................................................... 79
V.5. Entraînez-vous à réaliser un site WordPress professionnel .................................................. 79
À vous de jouer !........................................................................................................................... 79
Page 83 sur 84
Vérifiez votre travail ! .................................................................................................................... 81
Page 84 sur 84

Word Press

Transféré par

Droits d'auteur :

Formats disponibles

Word Press

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Word Press

Transféré par

Droits d'auteur :

Formats disponibles

CMS Wordpress Mr.

I. Découvrez WordPress et déployez votre site rapidement

Non aux idées reçues !

Découvrez les notions de CMS et d’open source

Que veut dire “open source” ?

 50 000 sites WordPress sont créés chaque jour !

Découvrez l’histoire et les atouts de WordPress

L’interface de l’époque était très basique comme vous pouvez le constater !

Figure 1:Interface de la première version de WordPress

“There is a plugin for that!” ("Il y a une extension pour ça !")

La gratuité, la philosophie open source et la communauté

En 2005, la nouvelle version de WordPress introduit :

Et toujours en 2005, Automattic, la société créée par le fondateur de WordPress Matt

Différence entre WordPress (wordpress.org) et wordpress.com

Figure 2:Interface de la version 4.9.8 de WordPress avec Gutenberg activé

I.2. Initiez-vous au fonctionnement d’un site web

On peut décomposer l’URL en plusieurs parties :

 “HTTP”, c’est le nom du protocole de communication entre le client et le serveur, ici

Comment cela se passe-t-il techniquement ?

Qu’est-ce qu’un hébergement web ?

Figure 3:Fonctionnement d'un site internet

Deux solutions s’offrent à vous :

Qu’est-ce qu’un nom de domaine ?

Le nom de domaine se loue auprès de fournisseurs spécialisés appelés registrar, comme

I.3. Choisissez votre hébergeur et mettez votre site WordPress

 Hébergement managé (ou infogéré).

Avec un hébergement managé, vous louez un certain niveau de performance et de disponibilité

 Vous disposez d’un site WordPress en ligne immédiatement et gratuitement

Déployez votre site WordPress

Figure 4:Interface d’administration de l’hébergeur Themecloud

Alternative : créer votre site en local

Il existe différentes solutions pour installer son site en local.

1. Pour commencer, rendez-vous sur https://local.getflywheel.com, cliquez

II. Prenez en main l’administration de votre site

Connectez-vous au dashboard WordPress

Vous pouvez alors saisir vos identifiants pour vous connecter.

L’URL de connexion à WordPress

C’est la raison pour laquelle :

Créez votre premier article

1. Cliquez sur “Posts” (articles en anglais).

2. Puis cliquez sur “Add new” (ajouter).

3. Saisissez un titre dans la première zone de contenu en haut.

Figure 5:Panneau d'administration de WordPress

WordPress propose par défaut deux façons de trier ses articles :

Figure 6: Ajouter une image

WordPress offre la possibilité :

4. De “dépublier” un article ‘Switch to draft”. Cela permet, si l’on a publié un article

Figure 7: La publication de contenus dans WordPress

 Modifier la visibilité (Visibility) : permet d’épingler l’article (le mettre en première

II.2. Paramétrez les options de votre site WordPress

Remarque : WordPress est disponible en 65 langues grâce à la communauté ! N’hésitez pas à

Changez le titre et le slogan de votre site

Figure 8: Changer le titre et slogan d'un site

Adresse web de WordPress (URL) et adresse web du site (URL)

Les autres options de la page de réglages généraux

Rôle par défaut de tout nouvel utilisateur

Modifiez la catégorie par défaut de vos articles

Cliquez “Écriture” en dessous de la sous-rubrique “Général” de la rubrique “Réglages”.

Cachez le site aux moteurs de recherche pour le temps des