Support de formation wordpress

1. Apprendre à créer son site
WordPress

2. Votre formateur
NIVELLE Keziah
Linked’in

3. Introduction à la conception web

4. Qu’est-ce que WordPress ?

5. WordPress est un CMS
CMS = Content Management
System = Système de gestion de
contenus
WordPress est un gestionnaire de
contenu, qui vous permet de créer
tous types de site web. Il est créé
en 2003 par Michel Valdrighi.
Utilisé sur 70% des sites web

6. Autres CMS
Blogger
1.4 %
Prestashop
1 %
Drupal
2 %
Shopify
6 %
Wix
2.6 %
Joomla
3 %
WordPress
70 %

7. Les avantages de WordPress
1. Rapide à mettre en place
2. Facile à utiliser
3. Polyvalent
4. Gratuit
Le plus gros point fort de WordPress
est qu’il est gratuit. Vous ne payez que
votre hébergement et votre nom de
domaine.
Vous pouvez faire tous types de sites
avec WordPress : Site vitrine, e-
commerce, forum, marketplace,
réseaux sociaux…
Grâce aux outils disponibles sur une
majorité d'hébergeur web, vous
pouvez installer WordPress en
quelques minutes
WordPress est facile à prendre en
main. Pas besoin d'être développeur
web pour créer ses premières pages

8. Site utilisant WordPress
The Walt Disney Company
thewaltdisneycompany.com
La maison blanche
www.whitehouse.gov
Renault
www.renaultgroup.com
LVMH
www.lvmh.fr

9. La différence entre
WordPress.com et WordPress.org

10. WordPress.com
WordPress.com est une plateforme
d’hébergement (comme Blogger, Tumblr ou
Over Blog) qui vous permet de créer votre site
et de l’administrer gratuitement. Il s’agit
d’une entreprise à but lucratif détenue par
Automattic, la société fondée par Matt
Mullenweg, l’un des créateurs du logiciel
WordPress. Pour fonctionner, WordPress.com
utilise le logiciel open source WordPress.

11. WordPress.org
WordPress.org est le logiciel open source que
n’importe qui peut télécharger et utiliser
gratuitement. Pour le faire fonctionner, vous
avez besoin d’un serveur d’hébergement et
d’un nom de domaine.
Avec WordPress.org, on parle de solution
auto-hébergée. Il est géré par la Fondation
Word Press (une organisation à but non
lucratif) créée par… Matt Mullenweg.

12. La principale différence entre les deux versions est la façon
dont votre site est hébergé. WordPress.com est une
plateforme d’hébergement qui vous fournit une solution clé
en main, alors que WordPress.org est une solution auto-
hébergée (vous vous en chargez vous-même). En revanche, le
logiciel utilisé pour faire fonctionner les deux versions est le
même.
WordPress.com &
WordPress.org

13. Différences entre système Open
Source et Système propriétaire

14. Propriétaire VS Libre
Logiciel propriétaire Logiciel libre
Un logiciel libre est un logiciel dont
l'utilisation, l'étude, la modification et
la duplication par autrui en vue de sa
diffusion sont permises,
techniquement et juridiquement, ceci
afin de garantir certaines libertés
induites, dont le contrôle du
programme par l'utilisateur et la
possibilité de partage entre individus
Un logiciel propriétaire, logiciel non
libre ou parfois logiciel privatif voire
logiciel privateur, est un logiciel qui ne
permet pas légalement ou
techniquement, ou par quelque autre
moyen que ce soit, d'exercer
simultanément les quatre libertés
logicielles que sont l'exécution du
logiciel pour tout type d'utilisation,
l'étude de son code source (et donc
l'accès à ce code source), la
distribution de copies, ainsi que la
modification du code source.

15. Les choses à faire avant de créer son
site

16. Les étapes précèdent la création d’un site web
Cahier des charges
Création d’un
mini-cahier des
charges, voire
exemple
Arborescence
Création d’une
arborescence
sur octopus
Wireframe
Création du
wireframe qui
nous permettra
de réaliser la
maquette
Maquettage
Création d’une
maquette pour
ensuite intégrer
les différents
éléments sur le
site
Etape 1 Etape 2 Etape 3 Etape 4
Développement
Intégration et
développement
de votre site
WordPress
Etape 5
Maintenance
Maintenance,
sauvegardes et
mises à jour
régulières
Etape 6

17. Cahier des charges

18. Cahier des charges
Le cahier des charges (CDC) est un document contractuel à respecter lors d'un projet. Le cahier des charges
permet au maître d'ouvrage de faire savoir au maître d'œuvre ce qu'il attend de lui lors de la réalisation du projet,
entraînant des pénalités en cas de non-respect.

19. L'arborescence

20. L'arborescence
Définition
L'arborescence d'un site désigne donc la
structure et l'organisation des pages
(représentées par leur URL) contenues sur un site
Web. Elle offre une vision globale du site Internet
en hiérarchisant les différents contenus proposés
sur le site.
https://octopus.do

21. L’arborescence
Définir ses mots-clefs et son nombre de pages
Dans le cadre d’une refonte de site, elle permet de faire un
inventaire de votre contenu.
Organiser votre contenu, une arborescence fonctionne par
niveau. Il est conseillé de ne pas avoir de pages trop
profondes : pas plus de 3 niveaux.
Définir un schéma ( Papier ou logiciel)Vous devez veiller à ce
que le visiteur trouve le plus rapidement et le plus simplement
possible, ce qu’il cherche sur votre page

22. Pourquoi faire une
arborescence ?
Permets d'avoir une vision schématique de la
navigation d'un site avant de réaliser le
maquettage
L'ergonomie du site, elle guide la navigation
de l'internaute et lui permet d'accéder
rapidement aux contenus
SEO : le crawl des pages par les robots des
moteurs de recherche, plus une page est
profonde dans l'arborescence d'un site
Internet, moins les robots de crawl vont
considérer qu'elle est importante.

23. E-commerce
Site vitrine
Landing page
Différentes template d'arborescence

24. Création du wireframe

25. Wireframe
Rendre le site web le plus ergonomique possible
et faciliter la navigation pour les internautes. Une
fois le schéma réalisé, il est confié à un graphiste
et/ou au webdesigner qui seront chargés de
l'adapter pour sa mise en ligne.

26. Les différents outils pour réaliser son wire frame

27. Hébergement web

28. Qu'est-ce qu'un hébergement web?
● Un hébergeur web est une entreprise qui
met à disposition un espace de stockage
sur un serveur connecté en permanence à
Internet.
● Gérer, sécuriser et sauvegarder.
● Le faire soi-même : Possible mais
complexe. Il vous faudra un espace de
stockage pour vos données, connecté en
permanence avec internet.

29. Différentes types d'hébergement web
Mutualisé
Dédiés
VPS
Cloud
L’hébergement Cloud repose sur une
multitude de serveurs et le client paye
pour ce qu’il utilise vraiment, ce qui
permet une flexibilité accrue.
Le VPS consiste en effet à créer
plusieurs serveurs virtuels sur un
même serveur réel, via des techniques
de virtualisation.
L’hébergement mutualisé consiste à
se partager à plusieurs des seuls et
mêmes serveurs.
L’hébergement dédié consiste à louer
auprès d’un hébergeur web un serveur
complet qu’il est ensuite possible de
configurer selon ses besoins.

30. Comment choisir son hébergeur web

31. Choisir son hébergement web
Les aides
Le degré d’autonomie désiré
La fiabilité
Connaître le passé de
l’entreprise et les avis client
La localisation
Eviter les hébergeur à
l’autre bout du monde
Support technique
La disponibilité et la qualité
du support technique
Le prix
Le prix est toujours le plus
gros argument (entre 2€ et
200€/mois)
Evolutivité
L’évolutivité de
l'hébergement

32. Le nom de domaine

33. Une adresse internet ou nom de domaine est
l’équivalent de votre adresse postale sur internet.
C’est la manière dont vos contacts et clients vont
trouver votre site internet sur le web. Un nom de
domaine est donc indispensable lors de la
création de votre site ou la personnalisation de
votre adresse email.
Qu'est-ce que le nom de domaine d'un site web ?

34. Un registrar est une entité qui gère les noms de
domaines. Les registrars sont accrédités par
l’ICANN ou l’AFNIC qui les autorisent à créer des
noms de domaines en ayant préalablement
vérifié qu'ils ne sont pas pris.
Un nom de domaine standard coûte en général
10€/an
Les registrars

35. Mise en place d'un hébergement

36. o2switch

37. Hostinger

38. Local WP

39. Découverte du back office de
WordPress

40. Le vocabulaire de WordPress

41. Une partie avec six points et icônes
Footer
Footer signifie pied de page
en anglais. C’est la dernière
section d’une page web, se
trouvant généralement sous
le corps du texte.
Header
Entête en français, contenu
situé tout en haut de vos
pages et regroupant
généralement votre logo et
menu
CSS
Le CSS est un langage de
programmation. Il permet
de modifier et de séparer la
mise en page d’un
document HTML.
Back office
Tableau de bord ou Dashboard,
c’est depuis le back-office que
vous administrer votre site
WordPress.
Front office
La partie visible de votre site
web par les utilisateurs
HTML
HTML signifie HyperText
Markup Language. C’est un
langage utilisé pour écrire le
contenu des pages web.

42. Le tableau de bord

43. Tableau de bord
Vous retrouvez ici différents
widgets et notifications vous
informant de toutes les
nouveautés de votre site et vous
informez sur la santé globale

44. Articles
C’est ici que vous allez gérer les
différents articles présents sur
votre site. Vous pouvez aussi
gérer vos différentes catégories

45. La médiathèque
Ici vous pouvez administrer
tous les médias présents sur
votre site (photo, vidéo, icon...)

46. Pages
C’est ici que vous allez pouvoir
administrer toutes les pages de
votre site web

47. Commentaires
C’est ici que vous allez pouvoir
administrer les différents
commentaires sur votre site
web si vous les activez sur vos
articles

48. Les thèmes
Un thème est un ensemble de fichiers
modèles (templates) et de feuilles de style
utilisés pour définir l’apparence et la
présentation du contenu d’un site. On
pourrait vulgairement appeler cela un design
de site.

49. Trois types de
thèmes
Les différents types de
thèmes sur lesquelles vous
allez tomber
Gratuit
Généralement disponible
sur la bibliothèque de
WordPress.org
Freemium
Thème gratuit mais limité
en fonctionnalités
Premium
Thème payant disponible
sur des marketplaces
01
02
03

50. Trois sous -
types de thèmes
Parmi les types de thèmes
vous allez aussi croiser des
sous-types de thèmes
Starter thème
Thèmes neutre et minimaliste
Thème spécialisé
Thème plus complexe avec plus de
fonctionnalités
Thème multipurpose
Thème avec un page builder intégrait

51. Les plateformes pour
acheter des thèmes
Themeforest
Marketplace principale
pour acheter des
thèmes pour tout type
de site
Elegant
Marketplace pour les
thèmes utilisant DIVI
WooCommerce
Principalement utilisé
pour les sites e-
commerce

52. La compatibilité avec
votre page builder
Les notes
Avec un minimum de
4/5
La date de sa dernière
mise à jour avec
maximum 2 mois
La présence d’une
documentation
La présence d’un
support en ligne
Comment évaluer un bon thème ?

53. Les plugins
Une extension (ou plugin en anglais) est utilisée
pour ajouter des fonctionnalités à WordPress.
Il en existe près de 60 000 à ce jour
(majoritairement gratuites), dans tous les
domaines : référencement, sécurité, e-commerce,
sauvegardes, etc.

54. Comment évaluer une bonne extension ?
La compatibilité avec
votre page builder
Les notes des
utilisateurs
La date de sa dernière
mise à jours
La présence d’une
documentation
La présence d’un
support en ligne

55. Le bon plugin et le mauvais plugin
Le bon plugin Le mauvais plugin
1. Très bonne note
2. +5 Millions d'installations actives
3. Mises à jour récente
4. Tester avec la dernière version de
WordPress
1. Pas de note / très faible
2. Peu d'installation active
3. Mises à jour > 6 mois
4. Non testé avec la dernière version de
WordPress (risque de non-compatibilité)

56. Outils
Ici vous disposerez de différents
outils d’importation et
d’exportation de contenue pour
votre site

57. Réglage
Ici vous pouvez régler et
paramétrer votre site web

58. Découverte des pages builder et
Elementor

59. Les pages builder
Les builders ou constructeurs de page servent
à construire des pages (voire même des
articles). Ils vous permettent avec une
interface très simple et intuitive (souvent drag
& drop) de créer des mises en forme complexes
pour vos pages.
Il existe de nombreux constructeurs de page,
sous forme de plugins le plus souvent, certains
sont même partie intégrante des thèmes.

60. Divi
Elementor
Page builder les plus connus

62. Elementor est un constructeur de page pour
WordPress qui se présente sous la forme d’un
plugin. Il permet de concevoir des pages
complexes sur WordPress en glisser-déposer, et
sans coder. Vous pouvez soit partir de zéro, soit
utiliser des modèles de page tout prêts pour aller
plus vite. Tous les changements sont visibles en
temps réel.
Elementor

63. Gutenberg est l’éditeur de blocs natif de
WordPress
Elementor

64. Gutenberg est une bénédiction pour les utilisateurs de
WordPress qui qui veulent un moyen simple d'ajouter des
boutons, des tableaux et d'autres éléments, ou qui ont
l'intention d'appliquer différents styles à des blocs
individuels, etc.
Alors que Elementor vous donne un contrôle total sur les
conceptions, le formatage, l'espacement et autres. En outre,
vous pouvez utiliser un modèle prédéfini pour réduire la
charge de travail. Il est facile de personnaliser le style par
défaut du thème et de créer des designs uniques en quelques
minutes.
Elementor vs
Gutenberg

65. Elementor est un constructeur de page pour
WordPress qui se présente sous la forme d’un
plugin. Il permet de concevoir des pages
complexes sur WordPress en glisser-déposer, et
sans coder. Vous pouvez soit partir de zéro, soit
utiliser des modèles de page tout prêts pour aller
plus vite. Tous les changements sont visibles en
temps réel.
Elementor

66. Utiliser les thèmes les plus
courants : Astra, Kadance ,
OcéanWp , Neve
Mauvais thème
Désactiver vos extensions pour
chercher les conflits
Bug de plugin
N’installez jamais 2 pages
builders sur un site (hos
Gutenberg)
Conflit
Regarder les informations
système et partez à la recherche
de memory limit (si rouge, pas
assez de RAM)
Résoudre le souci -> Plugin -> Wp
config file rédacteur -> installer -
> Min 128/256 -> Save ->
Uninstal
Bug système

67. Exploration de Elementor

68. Elementor pro

69. Elementor pro

70. Hébergement cloud + Elementor pro

71. Aller plus loin avec Elementor free

72. Elementor header et footer
Plugin gratuit pour pouvoir éditer le header et
le footer de votre site web avec l’éditeur
Elementor. Utile quand on ne possède pas la
version pro de Elementor

73. Essential addon for Elementor
Un site responsif est une manière de concevoir
un site web afin que son contenu s'adapte
automatiquement à la taille de l'écran de
l'appareil utilisé (ordinateur, tablette,
smartphone, etc). Nous pouvons également
parler de site adaptif.

74. Happy addon for Elementor
Plugin gratuit permettant d’avoir de nouveau
widget unique . Utile quand on ne possède pas
la version pro de Elementor

75. Création d’un site vitrine avec
Elementor

76. Optimisation sur mobile du site
vitrine

77. Un site responsive est une manière de concevoir
un site web afin que son contenu s'adapte
automatiquement à la taille de l'écran de
l'appareil utilisé (ordinateur, tablette, smartphone,
etc). Nous pouvons également parler de site
adaptif.
Responsive

78. L’importance d’avoir un site responsive
Optimiser le temps
des mises à jour
Réduire les coûts
Un site Web avec un
design responsive
réduit
considérablement les
coûts
L’expérience
Garantir une expérience
utilisateur parfaite quel
que soit la taille de l’écran
Le référencement
Faciliter le classement
dans les moteurs de
recherche
Le temps

79. Gestion & création d’un formulaire de
contact

80. WP form
WPForms est, sans aucun doute, l'un des meilleurs
plugins pour créer des formulaires de contact.
Vous pouvez télécharger la version Lite pour
pouvoir créer tout type de formulaire

81. Gestion & création d’un blog et
d’articles

82. Mise en place du référencement
naturel

83. Meta description
Optimiser le référencement naturel des pages
Optimiser les balise Hn
Un contenu bien structuré
est important pour
l’internaute comme pour le
moteur de recherche.
Optimiser les balise titre
Une description
accrocheuse peut inciter
les internautes à choisir un
résultat plutôt qu’un autre.
Liens externe et interne
Ne soyez pas radins sur les
liens externes. Le web est
construit grâce au lien. En
donnant à vos lecteurs un
lien vers d’autres contenus
de qualité vous rendez
votre contenu de meilleure
qualité.
La balise title est
importante pour le SEO,
car elle donne au moteur
de recherche des
indications fortes sur le
sujet traité par la page
Avoir un site rapide
Un site trop lent fait fuir les
internautes et fait baisser
votre taux de conversion
Créer un site responsive
Les visites sur téléphones
mobiles peuvent
représenter plus de 60 %
des visites. Ne pas penser
son marketing pour le
mobile est un non-sens.
01 02 03
04 05 06

84. Yoast seo
Yoast SEO vous simplifie la gestion de votre
référencement naturel sur WordPress. Il ajoute sur
votre back office WordPress de multiples
interfaces permettant de configurer des balises
utiles au référencement naturel, éviter du contenu
dupliqué, ajouter des riches snippets…

85. Sécuriser et optimiser votre site web

86. Hebergement
Mises à jours régulière
Mettre à jours : les thèmes,
plugins, WordPress
Le compte administrateur
Choisissez un bon
hébergeur web ( les plus
populaire)
Limiter le nombre de
connection possible
Installez une extension qui
bloque les tentatives
répétées d’une même
adresse IP. (WPS Limit
Login par exemple)
Créez toujours un ADMIN
avec un login + mot de
passe ultra sécurisé.
Faire des sauvegardes
Les backups du système
sont à effectuer au moins
toutes les semaines pour
prévenir un piratage ou un
crash disque.
Plugin de sécurité
Installez des plugins de
sécurité
Rappels de Sécurité essentiels pour WordPress

87. 3 plugins de sécurité
Wordfence Askimet Limit Login Attempts
Reloaded
antimalware et
attaques en tous
genre
la meilleure solution
au monde pour
protéger votre blog
des indésirables.
Limitez le nombre de
connection par
adresses IP

88. Hebergement low cost
Ce qui peut ralentir votre site web
Trop d'extension
Ou trop d’extensions
lourdes (Visual Composer,
Revolution Slider, etc.) ;
Thème trop lourd
Un hébergement bas de
gamme (ne supporte pas le
trafic, etc.) ou une offre
trop petite par rapport au
site ;
Trop images
Ou des images trop lourdes
et donc longues à charger
Trop de fonctionnalités, des
tonnes de fichiers à
charger, des tonnes
d’effets très gourmands,
etc.
Trop de polices
Trop de polices d’écriture
personnalisées
Absence de mise en
cache
Pas de mise en cache
01 02 03
04 05 06

89. Smush – Lazy Load Images
Les images ont un impact majeur sur la
performance, l’expérience utilisateur et les
conversions.
Les images sont responsables de plus de 50% du
poids d’une page web, comme je vous l’ai indiqué
dans l’introduction de cet article.

90. 3 habitudes à
prendre avec ses
images
Ne pas envoyer d’images surdimensionné
Essayer d’avoir des images les moins lourdes possible
(environ 100KB)
Choisissez le bon format d’image
JPG = Photos, images dotées de milliers de couleurs ou de
nuances de gris.
PNG = Schémas, images simples, logos ou images dotées de
transparen
GIF = images animées. Elles sont souvent très lourdes. Pour
réduire leur poids avant de les téléverser sur votre site
WordPress,
Compresser les images
Compresser vos images avant de les envoyer sans
perdre en résolution

91. Les cookies ont de multiples usages : ils peuvent
servir à mémoriser votre identifiant client auprès
d'un site marchand, le contenu courant de votre
panier d'achat, la langue d'affichage de la page
web, un identifiant permettant de tracer votre
navigation à des fins statistiques ou publicitaires,
etc.
All in one backup migration

92. Les cookies
Les cookies ont de multiples usages : ils peuvent
servir à mémoriser votre identifiant client auprès
d'un site marchand, le contenu courant de votre
panier d'achat, la langue d'affichage de la page
web, un identifiant permettant de tracer votre
navigation à des fins statistiques ou publicitaires,
etc.

93. Complianz
YComplianz est une extension de consentement
aux cookies RGPD/CCPA, avec une notification
conditionnelle des cookies et une politique de
cookies personnalisée basée sur les résultats de
leur analyse intégrée.

94. Les mentions légales
Les mentions légales sont des informations
portant sur l'éditeur du site internet. Le visiteur
d'un site web doit pouvoir obtenir les
renseignements nécessaires à l'identification de
l'éditeur, l'hébergeur ou le directeur de publication.
👉🏻 www.legalstart.fr/generateur-mentions-
legales