Créer un site internet wordpress
SOMMAIRE
SOMMAIRE ………………………………………………………………………………………………………………………….. 2
PREFACE ……………………………………………………………………………………………………………………………… 3
A PROPOS ……………………………………………………………………………………………………………………………. 4
PARTIE 1 : CONTEXTUALISATION ………………………………………………………………………………………. 4
• Un site web, c’est quoi ?………………………………………………………………………………………………. 4
• Hébergement et nom de domaine ……………………………………………………………………………….. 5
• A quoi sert un site web ……………………………………………………………………………………………….. 5
• C’est quoi WordPress alors ?……………………………………………………………………………………….. 6
• Que peut faire WordPress alors ? ………………………………………………………………………………… 7
PARTE 2 : INSTALLATION DE WORPRESS EN LOCAL ………………………………………………………….. 8
DE LA CONFIGURATION DES ENVIRONNEMENTS (WAMP ET XAMPP) A L’INSTALLATION DE
WORDPRESS …………………………………………………………………………………………………………………….. 9
ETAPE 1 : Installer Wamp/Xampp ………………………………………………………………………………. 9
ETAPE 2 : Préparation des fichiers WordPress …………………………………………………………… 9
ETAPE 3 : Démarrer xamp/wamp ……………………………………………………………………………….. 9
ETAPE 4 : Démarrer …………………………………………………………………………………………………… 10
ETAPE 5 : installer WordPress …………………………………………………………………………………… 12
DE LA CREATION D’UN NOM DE DOMAINE A L’INSTALLATION DE WORDPRESS ………………. 15
Étape 1 : Créer un compte dans ‘profreehost ‘ …………………………………………………………… 16
Étape 2 : Obtenez votre domaine gratuit …………………………………………………………………… 18
Étape 3 : Installez WordPress sur votre domaine ……………………………………………………… 20
PARTIE 03 : LE TABLEAU DE BORD DE WORDPRESS ……………………………………………………….. 23
PRATIQUE …………………………………………………………………………………………………………………………. 36
Création d’un site Vitrine …………………………………………………………………………………………………. 36
Fonctionnalités :………………………………………………………………………………………………………………. 36
Installation de thème ……………………………………………………………………………………………………….. 36
Configuration du thème …………………………………………………………………………………………………… 37
Edition des pages du thème ……………………………………………………………………………………………… 40
Elementor ……………………………………………………………………………………………………………………….. 42
Formulaire de contact ……………………………………………………………………………………………………… 47
Étape 1 – Installation de Contact Form 7 …………………………………………………………………… 47
Etape 2 : Créer votre 1er formulaire avec Contact Form 7 ………………………………………… 48
Page |3
PREFACE
Ce livre s’adresse aux débutants mais aussi aux personnes qui sont déjà
du domaine et qui voudrai jeter un coup d’œil de temps en temps histoire de
piocher quelque deux ou trois bricoles.
Aujourd’hui apprendre à créer un site web ne devrait plus être un
problème pour quelqu’un qui a un peu du temps à y consacré. Et vous avez
du temps par ce que vous êtes étudiant ou vous exercer une activité qui vous
en laisse du temps, alors ce livre est fait pour vous.
Apprenez grâce à ce livre à créer un site web WordPress
Page |4
A PROPOS
Si vous lisez ce livre c’est que vous avez soit envie d’apprendre à concevoir un site web avec WordPress ou approfondir certaines de vos connaissances sur WordPress. Si tel est le cas, c’est bien le livre qui retrace l’essentiel de conception de site web avec WordPress.
La plupart des livres qui existent sont souvent théoriques… pour la conception de site web avec WordPress nous vous proposons une méthode pratique. Vous trouverez les elements necessaires pour vous permettre de maitriser
la création de site web avec WordPress.
Ceci est le tome1 (sur 6) qui vous donne les connaissances nécessaires pour concevoir un site web vitrine avec WordPress.
PARTIE 1 : CONTEXTUALISATION
• Qu’est ce qu’un site web?
Tout d’abord définissons le mot Web. Le Web est le terme communément
employé pour parler du World Wide Web, ou WWW, traduit en français par la
toile d’araignée mondiale. Par abus de langage, le Web désigne de façon plus
large tout ce qui se rapproche à cet univers internet.
Un site web, est alors un groupe de pages web reliées entre elles par des liens accessibles depuis un navigateur Internet. Ces liens permettent de naviguer dans le site et de passer d’une page à l’autre.
Page |5
Imaginez un livre.
Un livre = plusieurs pages + reluire. Chaque page est soutenue par la reluire…
De même pour un site web, Plusieurs pages web sont soutenues par des liens qui représentent la reluire dans le cas de livre.
Pour qu’un site soit à la portée de tous, il faut que celui-ci soit hébergé, et ait
un nom de domaine.
• Hébergement et nom de domaine
Pour consulter un livre, il faut se rendre à la bibliothèque. La bibliothèque représente ici internet… Chaque livre(site) est catalogué dans des
couloirs sur des étagères (hébergeur). Et enfin on recherche le livre que nous voulons lire à l’aide du nom du livre (nom de domaine).
Bon voilà tout est clair
• A quoi sert un site web
Un site web est un outil de communication qu’il ne faut pas négliger. En effet, il permet de communiquer auprès d’un large public à moindre coût et offre une multitude de possibilités pour atteindre vos objectifs. Il permettra,
entre autres de :
• Véhiculer votre image,
• Asseoir votre notoriété,
• Gagner en visibilité et crédibilité,
Page |6
• Présenter votre entreprise,
• Diffuser vos services et produits,
• Vendre des services et des produits
• Mettre en avant votre savoir-faire,
• Vous différenciez de la concurrence.
Comme le livre l’intitule « …AVEC WORDPRESS… », il est tout à fait normal
de définir ce que c’est que WordPress.
• C’est quoi WordPress alors ?
WordPress est un système de gestion de contenus (CMS) permettant
de concevoir un site web assez facilement.
WordPress est extrêmement simple d’utilisation.
Il peut être très
rapidement configuré et son ergonomie est particulièrement intuitive. La
gestion des pages, thèmes, liens, médias et plugins se fait quant à elle de façon
très fluide et simplifiée.
Il n’est pas nécessaire d’avoir des notions en langage
html ou en création de sites ni d’avoir un don particulier pour l’informatique
ou le graphisme.
L’interface vous invite simplement à ajouter textes, images, menus et
autres gadgets en seulement quelques clics.
Elle classe les contenus en
rubriques, sous-rubriques et permet de gérer facilement les droits des
différents utilisateurs.
Lorsque l’on constate l’accroissement fulgurant de l’utilisation des
téléphones portables et des tablettes pour la navigation internet, il est
évident que les sites qui ne s’y adaptent pas perdront beaucoup en trafic et
en efficacité.
Elle utilise le “Jquery” qui facilite les interactions mais aussi
l’exploitation sur les appareils mobiles.
De plus en plus de thèmes WordPress, même gratuits, intègrent par ailleurs
une technologie totalement responsive, c’est-à-dire parfaitement adaptée à
tous types de récepteurs : ordinateurs, smartphones et tablettes.
Le responsive design permet en réalité un affichage et une ergonomie différents
selon la taille de l’écran utilisé. Il ne rebute donc aucun utilisateur et facilite
la navigation sur le site.
Page |7
• A quels fin peut-on utiliser WordPress ?
Utiliser WordPress pour faire quoi ?
A l’origine on l’utilisait principalement pour concevoir des blogs, il faut
reconnaître qu’aujourd’hui ses possibilités lui donnent une tout autre
dimension.
Petite liste en vrac de ce que vous pouvez faire avec :
👉 Un Blog, un Site vitrine, un e-Commerce
👉 Un Forum, un site de Petites Annonces
👉 Un Magazine en ligne
👉 Une Plate-forme d’échange
👉 Un Annuaire, un WiKi
👉 Un Réseau social, un Intranet
👉 Etc.
Alors quel que soit votre projet de site web, étudiez bien WordPress, il se
pourrait qu’il vous corresponde…
Bon voilà l’initiation a été faite…
Passons à la pratique.
Il y a deux manières de faire pour concevoir un site web avec
WordPress. Soit on conçoit le site en local c’est-à-dire depuis notre machine
(PC), soit on conçoit le site directement en ligne (en ayant déjà un
hébergement et un nom de domaine).
Pour le cadre de cette formation, vous trouverez les deux méthodes. La
différence principale se trouve lors de l’installation de WordPress.
Page |8
PARTIE 2 : INSTALLATION DE WORDPRESS EN LOCAL
La particularité de cette méthode est que votre site sera uniquement
présent dans votre machine (Votre ordinateur devient un hébergeur/votre
serveur) et ne peut pas être consulté en ligne.
La magie c’est que vous pouvez
répliquer exactement l’environnement web sur votre propre PC et
développer votre site web à votre rythme. Cependant, tester une idée,
apprendre à développer un site web, réduire les dépenses dans les phases
préliminaires d’un projet, sont toutes des raisons valables de vouloir installer
WordPress en local.
Pour installer WordPress en local vous avez besoin de trois choses
fondamentales :
👉 Un navigateur (Chrome ; Mozilla Firefox, Opera, internet explorer, …).
Pour commencer, il va falloir que vous ayez un navigateur. Un navigateur est
ce logiciel qui permet de consulter des sites et de visiter des sites sur internet.
Personnellement je préfère plus chrome (www.google.com/intl/fr/chrome/).
👉 Un logiciel qui jouera le rôle de server en local (XAMPP, WampServer,
EasyPHP, Lamp (pour Linux),…)
Afin de jouer le rôle de serveur en local, vous avez besoin essentiellement d’un logiciel. Parmi ces logiciels qui ne sont pas en quelque sorte des logiciels mais des environnements de simulation, deux sont plus ou moins populaires : XAMPP et WAMPSERVER.
Parmi ces deux environnements, vous pouvez utiliser XAMPP. C‘est optionnel, vous avez le choix. (Lien téléchargement : https://www.apachefriends.org/fr/download.html ).
Pour ceux qui préfèrent WampServer : (
https://www.wampserver.com/download.php )
👉 Un dossier WordPress.
Enfin ! pour finir vous aurez besoin de télécharger sur
(https://fr.wordpress.org/download/ un fichier compressé WordPress.
Page |9
DE LA CONFIGURATION DES ENVIRONNEMENTS (WAMP ET XAMPP) A
L’INSTALLATION DE WORDPRESS
ETAPE 1 : Installer Wamp/Xampp
Pour commencer il faut installer XAMPP ou WAMP sur votre ordinateur.
Il suffit juste de vous rendre sur les liens ci-dessus énumérés, et de télécharger la version qui convient à votre système d’exploitation.
Une fois téléchargé, installez votre logiciel, et suivez les instructions jusqu’à
la fin de l’installation.
Avertissement : il n’est techniquement pas bien d’installer les deux environnements dans une même machine. Donc faites un choix entre XAMPP et WAMPserver.
ETAPE 2 : Préparation des fichiers WordPress
• Rendez-vous sur le lien de téléchargement fourni ci-dessus () et
télécharger la dernière version du CMS ;
• Décompressez le fichier .zip téléchargé ;
• Ouvrez le dossier WordPress, décompressé ;
• Sélectionnez le dossier décompressé et copiez-le ;
• Ouvrez le dossier \xampp\htdocs (pour le cas de XAMPP) ou
\wamp\www situé à la racine de votre disque principal ;
• Collez le dossier et renommer selon le nom de votre projet (Ex :
masterclass) et ça devient \xampp\htdocs\masterclass ou \wamp\www\maste…;
ETAPE 3 : Démarrer xamp/wamp
• Recherchez sur votre PC l’emplacement de l’application XAMPP
Control Panel (ou WampServer si WAMP installé) et exécutez. Vous
pouvez également la trouver via le menu
Démarrer/Programmes/XAMPP Control Panel (ou wampServer) ;
• Pour le cas de de XAMPP l’application s’ouvre et affiche différents
modules avec des boutons en face de chacun d’entre eux ;
Cliquez sur le bouton Start situé en face des modules Apache et MySQL. Le
nom de chaque module doit être surligné en vert après quelques secondes ;
P a g e | 10
• Pour le cas de WAMP Une fois lancé, vous aurez l’icône de WampServer
dans votre barre de tâche. Cette icône doit
avoir la couleur verte pour pouvoir l’utiliser
NB : Si la couleur est différente c’est qu’il y a un problème.
ETAPE 4 : Démarrer
• Création de la base de données de votre site web (cas de XAMPP)
Il est essentiel de créer la base de données destinée à l’utilisation de votre
site.
Pour créer une base de données, il faut lancer phpMyadmin en
cliquant sur le bouton Admin.
• Pour le cas de WAMP
Cliquez sur l’icône de WampServer dans la barre de tâche, puis cliquez
dessus avec le bouton gauche de votre souris et cliquez enfin sur la
commande « phpMyAdmin »
• Si une page d’authentification s’affiche alors saisissez le mot « root » dans la zone « Utilisateur »
P a g e | 12
• Sinon vous êtes redirigés vers cette page ou vous cliquez sur base de
données
• Choisissez le nom de votre base de données, puis sélectionner «
utf8_bin » pour l’interclassement, puis cliquez sur Créer et le tour est
joué ! Exemple de nom de la base de données : formation, site,
db_masterclass. Le nom est pris au hasard mais jamais d’espace.
Remplacer les espaces par les ‘_’ comme ‘base_de_donnee’
ETAPE 5 : installer WordPress
• Pour installer WordPress en local, saisissez dans la barre d’adresse de
votre navigateur : localhost/ suivi du nom de votre site, c.à.d le nom du dossier précédemment créé, dans mon cas ça sera:
localhost/masterclass/. Vous serez redirigé vers cette page.
P a g e | 13
• En cliquant, sur le bouton « C’est parti ! », l’installation de WordPress
commence. Elle ne dure pas plus de cinq minutes.
• Dans l’interface suivante, vous devez spécifier le nom de la base de
données (celle créée précédemment) dans le champ « Base de
données ». Et comme identifiant mettez (root), et laissez les champs
du mot de passe vide.
P a g e | 14
• Puis complétez les informations nécessaires concernant votre site ou
votre blog :
– Titre du site
– Identifiant (évitez les identifiant de type admin)
– Mot de passe (Il faut choisir un mot de passe sécurisé)
– Votre adresse de messagerie
et ne cochez surtout pas la case (Visibilité pour les moteurs de recherche), sinon votre site ne sera pas indexé sur les moteurs de recherche. Puis cliquez sur « Installer WordPress »
Note : En fonction de la version de WordPress vous pouvez retrouver des
cases supplémentaires. Ignorez les justes !
Bravo, vous avez installé WordPress avec succès, tout ce qui vous reste
est de vous connecter à votre espace d’administration en cliquant sur le
bouton « Se connecter ».
ou en se connectant sur l’adresse suivante et en tapant votre identifiant et
votre mot de passe : localhost/nom_de_votre_dossier_wordpress/wp-admin
ce qui donne pour moi : localhost/masterclass/wp-admin (ci-dessous).
P a g e | 15
• Pour visiter votre site, vous pouvez le faire via l’adresse :
localhost/masterclass.
Bien-sûr en remplaçant « masterclass » par le nom de votre dossier.
• Maintenant que vous avez installé WordPress en local, vous pouvez créer
votre site en hors ligne et à tête reposée ; une fois que votre site est prêt réservez un espace d’hébergement et hébergez-le, afin de le publier et le partager avec tout le monde.
UN PLUS : Installer WordPress en local n’est pas compliqué quand on suit
la bonne procédure. Vous pouvez bien le faire en seulement cinq minutes
et en quelques clics.
L’hébergement, Et si nous allons directement installer WordPress depuis un hébergement…
Alors ne perdons plus le temps :
DE LA CREATION D’UN NOM DE DOMAINE A L’INSTALLATION DE
WORDPRESS
Dans cette partie, nous allons d’abord configurer notre compte auprès du
fournisseur d’hébergement, puis installer WordPress sur le domaine. Nous
allons donc procéder en 3 étapes,
1. Créer un compte dans ‘profreehost’
P a g e | 16
2. Obtenez votre domaine gratuit
3. Installez WordPress sur votre domaine
Étape 1 : Créer un compte dans ‘profreehost ‘ Profreehost est le fournisseur d’hébergement qui va nous aider à créer un site Web gratuit sur WordPress. Donc, pour créer un compte,
rendez-vous sur profreehost.com .
Dans la page d’accueil, cliquez sur « S’inscrire maintenant ».
Vous serez maintenant redirigé vers une page où vous pourrez vous inscrire
pour un nouveau compte.
Ici, entrez l’adresse e-mail et le mot de passe pour créer un compte. Ensuite,
cliquez sur le bouton avec une coche.
P a g e | 17
Vous devriez recevoir la notification suivante après avoir rempli vos
coordonnées. Cela signifie que vous devez activer votre compte. Le lien
pour activer votre compte profreehost vous sera envoyé par e-mail.
Vérifiez votre e-mail pour un message de Free Host avec un lien d’activation.
Cliquez sur le bouton Activer le compte pour activer votre compte.
P a g e | 18
Après avoir cliqué sur Activer le compte, vous serez redirigé vers votre
compte sur Profreehost comme indiqué ci-dessous.
Étape 2 : Obtenez votre domaine gratuit
Un domaine est le nom de votre site Web. Il s’agit du nom qu’un visiteur entre
dans le navigateur pour visiter votre site Web.
Alors pour obtenir votre nom de domaine, Cliquez sur « Créer un nouveau
compte »
Vous devez maintenant choisir un nom pour votre site Web. Nous avons
choisi « techyleaf ». Ce sera le nom de domaine de votre site Web dont vos
visiteurs auront besoin pour accéder à votre site Web.
• Entrez maintenant le nom de domaine choisi pour vérifier s’il est
disponible ou non.
• Vous pouvez voir que le domaine que nous avons choisi est disponible
(en vert) et peut être utilisé pour créer un site Web gratuit sur
WordPress.
P a g e | 19
• Vous pouvez également modifier la dernière partie de votre domaine
en unaux.com, comme indiqué ci-dessous.
• Maintenant, pour obtenir ce domaine, cliquez sur le bouton avec la
coche dessus pour continuer.
• Vous devriez maintenant recevoir un message de confirmation comme
indiqué ci-dessous.
Comme il est dit, « Succès! ». Nous avons notre domaine gratuit.
« Parfois, à la création on peut voir un cercle en vert qui tourne en boucle. Çà
veut dire tout simplement que le domaine est en cours d’acquisition. Çà
P a g e | 20
prends entre 5 et 20min. Sinon soyez entrain d’actualiser la page jusqu’à voir
l’icone de succès en vert. »
Étape 3 : Installez WordPress sur votre domaine.
Maintenant que nous avons notre domaine gratuit, il est temps de créer
un site Web gratuit.
Ainsi, une fois que nous aurons installé WordPress, notre site Web sera en direct sur Internet.
Pour installer WordPress, cliquez sur le bouton ‘Manage’ .
Une fois que vous avez cliqué sur Manage, cela vous amènera à cette page ci-
dessous
Cliquez maintenant sur « Control Panel ».
Après plusieurs contrôles, vous êtes redirigé vers le panneau de
configuration et sous l’onglet logiciel (SOFTWARE) cliquez sur «
Softaculous app installer ».
P a g e | 21
Il vous amènera à la page avec divers logiciels qui peuvent être installés sur
un site Web. Ici, sélectionnez WordPress et cliquez sur « Install ».
• Vous allez maintenant accéder à cette page et accéder au compte
administrateur.
• Ici, vous devrez entrer un nom d’utilisateur et un mot de passe pour
votre installation WordPress.
Il sera utilisé pour se connecter ultérieurement à votre site Web.
Une fois que vous avez saisi ces informations, cliquez sur Install, WordPress est installé avec succès.
Vous pouvez maintenant cliquer sur le lien qui redirige vers votre site Web
comme indiqué dans l’image ci-dessous et votre site Web devrait être en
ligne sur Internet.
Avertissement : Toujours dans le même contexte, la mise en ligne de votre
site peut prendre un certain temps (entre 01 minute à 01 journée ☺).
Succès! Votre tout nouveau site Web est en ligne.
Maintenant que vous avez tout configuré, il est temps de commencer à savoir
utiliser WordPress ! ?
Il est temps de savoir manier WordPress
sans souci, de personnaliser et de créer le site Web de vos rêves.
Passons donc à l’étape de « Création de site web ».
P a g e | 23
PARTIE 03 : LE TABLEAU DE BORD DE WORDPRESS
Pour accéder à l’interface du tableau de bord WordPress, il faut au préalable s’authentifier
• Si vous êtes en local, il faut Ecrire au niveau de votre barre de
recherche localhost/nom_dossier_wordpress/wp-admin
Pour ceux qui étaient attentif, au niveau de l’installation de wordpress il faut de décompresser le fichier et le renommer selon le nom de votre choix. C’est en fait ce nom qu’il faut remplacer ici par
nom_dossier_wordpress.
Et si par exemple j’avais nommé le dossier masterclass alors pour
accéder à l’interface du tableau de bord de WordPress, je taperai
localhost/masterclass/wp-admin sur mon navigateur.
Par contre si WordPress était déjà installer depuis mon site en ligne
alors là je tape simplement le nom de mon domaine suivit de /wp-
admin/
Vous serez redirigé vers la page d’authentification ci-dessous
– Au niveau de 1, renseignez votre identifiant ou votre email.
– Au niveau de 2, votre mot de passe et validez.
• Vous êtes ensuite redirigé vers l’interface de WordPress proprement
dites
P a g e | 24
• Sur l’angle en haut à gauche (Zone encadré) faites un clic droit et cliquez sur nouvelle onglet. L’avantage de cela est qu’il vous permet juste de voir les
modifications qu’on apporte directement ; juste en passant d’un onglet à un autre.
• La première section sert pratiquement à voir l’état de santé de notre site, les mises à jour etc. On passera.
• Après avoir ouvert sur un nouvel
onglet, vous verrez l’apparence de votre site.
C’est un thème par défaut que
WordPress a installé qui s’affiche afin de vous donner un aperçu de votre site web.e
Le thème est en version bêta ;
c’est-à-dire qu’il est toujours en
construction. « vous comprendrez
pourquoi ».
P a g e | 25
Afin que tout se passe mieux, nous allons essayer de changer de thème.
-Revenons au niveau de notre tableau de bord.
– Survolons la section apparence et cliquons sur le thème.
– Survolons le thème Twenty Twenty One (C’est un choix parmi les thèmes que j’ai fait afin que notre expérience se
passe bien). Il vous sera expliqué ce que c’est qu’un thème plus tard.
– On active le thème (cliquez sur le bouton activer)
Comment lui donner un autre design. Content n’est-ce pas ☺ ?
P a g e | 26
• La section article nous permet d’ajouter, modifier, supprimer et structurer (taguer, catégoriser, mettre en avant, etc.) des articles.
Les articles sont un peu comme des publications que l’on fait sur Facebook avec des fonctionnalités de partage, like et qui informe sur un sujet spécifique.
• Dans la partie tous les articles, on verra la liste de nos articles qu’on a publié ou en attente de publication.
• On aperçoit un article déjà publié dont on voit le titre (zone en
noir).
• Les zones vertes contiennent
un bouton ‘ajouter’ qui nous
permettent comme son nom l’indique
d’ajouter des articles
• En survolant chaque article, vous pouvez voir une autre zone apparaître.
1. Vous pouvez modifier l’article
2. Vous permet de modifier rapidement de petit truc comme le titre, le slug et bien
d’autre élément en rapport avec l’article spécifié (cliquez et amusez-vous)
3. Met l’article en corbeille (suppression partielle de l’article).
4. Permet d’afficher le rendu de l’article.
P a g e | 27
• Toujours au niveau de la section articles, nous les catégories.
Les catégories permettent la catégorisation des articles ☺.
Un peu comme classé des articles selon une thématique donné.
Comme par exemple en voulant rédiger des articles sur la beauté, le rédacteur peut créer plusieurs catégories comme pédicure, manicure, vestimentaires.
Vous voyez ! et là un internaute qui visite le site n’a pas forcément besoin de tout voir.
Il peut en même temps se rediriger vers les articles qui l’intéressent le plus en fonction de la catégorie en lui évitant de
perdre son temps.
• En cliquant sur ajouter vous tomberez sur cette page
1- Saisissez le titre de votre page
2- Saisissez le contenu de vos articles
3- Détails supplémentaires pour votre articles (Catégorie pour catégoriser l’article, étiquette pour taguer l’articles, image mise en avant pour mettre une image d’aperçu à l’article, etc.)
4- Accès aux outils d’éditions de WordPress. Si vous avez besoin de liste, cliquez sur liste. Si vous avez besoin d’écrire un titre, cliquez sur titre
P a g e | 28
• Après avoir finit de rédiger l’article, vous cliquez sur publier. Vous aurez le choix entre publiez immédiatement ou prévoir une date ultérieure de publication (Voir zone encerclée).
• La section suivante media est notre galerie. C’est l’endroit qui contiendra l’ensemble des images, vidéos, audios, fichiers à utiliser sur votre site. Autrement dit l’ensemble de vos médias transiteront d’abord par la médiathèque avant d’être exploiter sur le site.
Si l’on voudrait insérer une image dans notre site on doit d’abord l’ajouter à
notre médiathèque.
Pour l’ajouter, on clique sur Ajouter.
• Puis on clique sur téléverser des fichiers, on choisit l’image qu’on
veut insérer et on valide.
• La section page liste les pages créées. Pour ajouter une nouvelle page,
cliquez sur Ajouter
• Vous êtes redirigé vers l’espace d’édition de la page.
Vous donnez un nom à votre page. Dans mon cas, ma page sera
nommée accueil. Vous pouvez saisir du contenu un peu comme je vous
l’avais montré dans la section création d’articles.
Puis vous cliquez Publier.
Petit rappel : Cliquez sur l’icône W pour revenir au niveau de votre tableau de bord.
P a g e | 30
• La section commentaire permet de gérer les commentaires faites sur vos articles par les internautes. Lisez par vous-même.
• La section apparence est importante.
Et dans cette section, deux éléments vont nous intéresser pour le moment :
Thème et Menu. On en reviendra sur le reste plus tard.
C’est quoi Un Thème ?
Un thème dans WordPress définit l’esthétique, le design de notre site.
C’est le thème même qui prédéfinis l’architecture du site.
Pour être beaucoup plus explicite.
Supposez que votre hébergement est votre terrain (Votre parcelle comme on
le dit). Après avoir acheté votre terrain vous allez y construire une maison (le
site web). Mais au lieu de construire la maison de bout en bout, vous allez
acheter une maison (un thème) que vous venez déposer sur votre terrain ☺.
(En vrai on ne vend pas de maison à déplacer sur un terrain hein ☺).
C’est en cela il existe des thèmes gratuits et payant (avec plus de fonctionnalités)
– Essayer d’activer un autre thème et allez y actualiser votre site ; vous verrez que le design va changer
– Maintenant réactualisé le thème initial ☺.
• Après avoir cliquez sur Ajouter, vous serez redirigé
– Et vous pouvez voir de milliers de thème (Vous avez une multitude de choix)
– Vous pouvez rechercher des thèmes spécifique (zone encerclée en vert.
– Ou vous pouvez importer un thème déjà télécharger (Zone encerclée en rouge (On y reviendra).
• Revenons s’en à la section suivante (Le Menu).
J’espère que vous savez ce qu’on appel un menu.
Il nous permet tout simplement de naviguer de page en page.
Et pour faire afficher un menu, c’est très simple !
– Zone1 : Donnez un nom au menu. Ex : Menu Principal
– Zone2 : Cliquez sur créer menu
– Zone3 : Cliquez sur voir toutes les pages (ça affichera la
liste des pages que vous avez eu à créer).
– Zone4 : Cochez les cases que vous voulez faire afficher dans votre menu du site.
– Zone5 : Cliquez sur ajouter au menu.
– Zone6 : Vous pouvez ajouter des liens personnalisés ou liens des articles dans votre menu aussi
– Et enfin en bas cliquez sur Enregistrer le menu
• Gestion du positionnement du menu
Comment ? : Vous maintenez enfoncer la page à déplacer à l’aide de la clique
gauche de votre souris et vous le déplacer à l’endroit convenu et vous
relâcher. C’est tout.
P a g e | 33
Si vous remarquez des décalages d’espacements, c’est que vous créez là des
sous-menus.
Vous pouvez aussi modifier le nom des menus en cliquant simplement sur ce
dernier et mettez le nom qui vous convient.
• Voici mon menu affiché
• La section suivante concerne les extensions.
Les extensions sont très capitales dans la construction d’un site idéal.
WordPress. Il permet de donner des fonctionnalités supplémentaires
au site.
Ex : Si notre site a besoin de formulaire cherchera à ajouter une
extension qui gère les formulaires. On en parlera plus d’avantage lors de la section création de site.
• La section compte vous permet d’afficher tous ceux qui ont accès à la
modification de notre site. Dans ce cas vous serez le seul avec un rôle administrateur.
P a g e | 34
• Vous pouvez ajouter d’autre personnes pour la modification de votre
site avec des rôles spécifiques
Pour ajouter quelqu’un vous demandez son email et son nom.
Vous remplissez tous les champs de la page Ajouter compte.
Arrivé tout en bas, vous lui attribuez un rôle. N’oubliez pas d’enregistrer.
• La section Réglage Générale nous permet d’apporter quelque
modification générale à notre site. Vous pouvez visiter voir.
P a g e | 35
• Voici encore cette page dans la section Réglage qu’il ne faut pas
négliger
Elle nous permet de définir la page d’accueil (Donc la première page
que les visiteurs verront en accédant à votre site web) et la page blog
(cette page sera configurer de manière à créer l’architecture d’une page ).
Ce qu’il convient de faire est de cocher page statique et de sélectionner la page qui sera votre l’accueil et la page sui sera la page des articles.
Vous enregistrez enfin les modifications en bas.
Voilà que tout est dit, nous pouvons maintenant passer à la pratique.
Pour le cadre pratique, nous allons nous amuser à créer un site
vitrine, un blog, et vous initier à la configuration d’un site e-commerce.
P a g e | 36
PRATIQUE
Création d’un site Vitrine
Rappel : Un site vitrine est un site Web qui présente en ligne les produits ou
les services d’une organisation, d’une entreprise, dans le but d’attirer
simplement l’attention et éveiller l’intérêt des internautes de passage, le
plus souvent sans permettre d’acheter directement le produit ou le service
proposé
Fonctionnalités :
– Une page d’Accueil
– Une page A propos
– Une page Nos services
– Une page Blog
– Une page Contact
Comme vous l’avez remarqué j’ai intégré en même temp Le Blog. Donc pour
cette pratique on ne créera plus de site blog à part. Tout compte la
méthodologie reste la même si l’on veut créer un site Blog
On attaque !!!!!!
Installation de thème
Pour y arriver nous allons aller à la chasse des thèmes, choisir, installer et
activer le thème qui nous convient.
Nous allons alors nous rendre dans la section thème-→Ajoute→Et on fait le
choix du thème. Pour ce cadre moi j’ai choisi Colibri WP. Vous pouvez faire
une recherche rapide (1). Ensuite cliquer sur installer.
P a g e | 37
Après l’installation activez le thème(ci-dessous).
Configuration du thème
Après avoir activé le thème, on est redirigé vers une page de configuration
Là ! ça nous propose de choisir les modèles. Vous avez le choix entre plusieurs modèles. Ensuite cliquez
. L’installation de la démo (La démo est en fait la mise en place du thème
de notre site). Elle prend entre 02 à 20 min. Celà dépend du thème.
La démo est installée. Pour commencer la modification on clique sur 01 et sur 02 pour voir le site.
P a g e | 38
Et si on allait voir comment le site se présente cette fois.
Vous remarquez déjà que notre site commence par prendre forme. Content
n’est-ce pas ☺ ?.
Bien tout ce qui vous reste à faire, c’est de modifier le menu, les images les textes et d’ajouter les fonctionnalités manquantes.
Avant qu’on ne continue, je vous arrête un instant. ☺
Vous êtes sans doute pressé de finir votre premier site web mais il faut que je vous notifie ceci : La page qui vient après activation d’un thème dépends de chaque
thème. Alors ne soyez pas étonné de découvrir des thèmes avec des
configurations différentes. Parfois la configuration peut-être plus complexe.
Donc pour cela, il faut faire référence à la documentation. Si vous voulez
vraiment faire carrière en développement WordPress, il faut développer un
esprit intuitif.
Bien ! si tout est compris, allons modifier notre site.
Pour ce cadre je vous montrerai comment les modifications se font, et débutera la modification du template avec.
Cependant avec votre
grande intelligence vous pourriez finir la modification complète.
Essayons de travailler de manière optimale :
– Nous allons d’abord ajouter les pages manquantes
– Ajuster le menu
– Editer les pages.
P a g e | 39
1- Ajouter les pages manquantes
Conformément à ce qui a été prévu on avait besoin de 05 pages. Déjà ici nous
voyons trois pages.
Nous pouvons déjà prendre la page Front-page comme Accueil, la page Blog comme Blog.
Il nous reste la page A propos, Service
et Contact. Pour les ajouter, on se rendra dans la section page →Ajouter
Vous mettez le titre et un petit paragraphe en bas puis publiez.
Vous faites de même pour les autres pages (Service et Contact) pour le moment.
A la fin j’obtiens çà après avoir actualiser mon site (figure ci-dessous)
P a g e | 40
Il est temps de faire le ménage du menu (ordonner le menu comme convenue et supprimer les inutiles).
Pour cela, on va se rendre dans la
section menu.
Référez-vous vers la notion de création d’un menu pour faire de même.
A la fin çà donne ceci chez moi(ci-dessous).
Surtout n’oubliez pas d’enregistrer après chaque modification.
Bien ! Nous allons passer à la modification des contenus page par page. Pour
ce cas comme je vous l’avais annoncé « Je vous montrerai comment vous pouvez modifier les premières sections. Le reste c’est à vous de vraiment le faire ».
Edition des pages du thème
Page d’accueil
Il y a plusieurs manières de modifier le contenu d’un thème dans WordPress.
Ce qu’il faut comprendre ici c’est que la conception d’un thème WordPress dépends d’un développeur à un autre d’où l’intérêt de l’esprit intuitif pour modifier un contenu. Tout compte fait, la première idée pour modifier un contenu est au niveau de la personnalisation. Tentons le coups ☺
P a g e | 41
Après avoir cliqué vous serez redirigé vers une page
La partie 1 est ce qu’on appelle la section des blocs. C’est cette partie qui permettent l’édition des contenus de toute la page juste en cliquant sur l’icône de paramètre. (Bonne nouvelle ☺).
La partie 2 présente comme vous le site mais cette fois avec des blocs qui
apparaissent au survole d’un élément comme le 3.
En parlant du trois, au survole on y voit deux icônes de crayons et trois autres
icones englobées en un.
On cliquera sur l’icône en orange et on clique sur le texte. Nous nous apercevons que nous pouvons modifier directement du texte depuis le bloc 3. Essayez !!!
Pour changer le design des boutons, on survole le bouton et on clique sur le
crayon en orange.
Comme vous le voyez, on peut modifier le texte du bouton dans la section 1 là où c’est mis Text.
De même pour l’arrière-plan du bouton en cliquant sur STYLE
P a g e | 42
Et l’image de l’arrière-plan?
Pour y arriver, survolez simplement l’image et si une icône apparaît vous cliquez sur le bouton Publier qui se trouve en haut.
Vous pouvez finir maintenant l’édition de la page d’accueil de votre site web.
A propos
Comme vous avez du le remarquer la page A propos, service et contact sont
des pages que vous avez-vous même ajouter. Ce qui veut dire qu’on doit
nous même les construire.
Comment faire ?
Normalement on peut continuer l’édition dans la zone réserver pour. Mais
nous allons plutôt utiliser une extension appeler elementor.
Elementor
ELEMENTOR est une extension qui nous permet de créer très rapidement
des templates de page. Elle nous propose plusieurs outils d’édition de page
Pour ce faire, nous allons télécharger l’extension dans la section Ajouter
extension.
Puis on recherche, installe et active elementor. (ci- dessous).
Après activation, vous serez redirigés vers un site externe où l’on vous demandera de créer un compte. Bien vous n’êtes pas obligé de créer un compte à l’immédiat.
Essayez donc de revenir à votre tableau de bord en faisant simplement un
retour en arrière.
De retour à l’accueil, vous verrez apparaître elementor. Ce qui veut dire que elementor est bien installé et activé (Voir ci-contre).
Ce qui nous concerne ici maintenant c’est de designer notre page A propos. Et pour ce faire, nous allons nous rendre, dans la section page.
On verra la liste de nos pages. On commence par la page A propos en cliquant sur le nom de la page ou en cliquant sur modifier la page qui s’affiche lorsque survole la page.
P a g e | 44
1- On supprime le petit paragraphe
2- On met à jours la page
3- Et on clique sur Modifier avec elementor
Nous serons redirigés vers une page d’éditions (voir ci-dessous)
Restez attentif.
• La zone en 1 représente la section des outils d’éditions. On y trouvera des outils comme les listes, les paragraphes, les titres, les boutons, les images, etc.
• La zone 2 est notre espace de travail sinon c’est notre page tout
simplement.
• L’ajout de contenu se fait par bloc superposé. Et pour ajouter des blocs
on cliquera simplement sur le bouton + (3).
• Elementor nous permet d’avoir des modèles de page pré construit.
il est nécessaire de se connecter à leur page web (4)
• Et enfin, on enregistre (5) puis on va réactualiser notre page A propos.
……………………………………………
…………………………………………..
Tout d’abord nous allons décomposer notre maquette.
– Un premier bloc qui contient un titre en rouge
– Un deuxième bloc avec deux sections. Une section qui contient une image avec le bord arrondi et une seconde section avec long texte.
Cela dit, on se lance :
En se référant à l’image précédente, on clique sur le bouton + (3). Après
avoir cliqué sur le bouton nous voyons l’apparition de plusieurs blocs avec
différentes sections.
Pour le titre on a besoin que du bloc avec une seule section. Donc vous
savez déjà là où il faut cliquer(A). Ensuite on cherche l’outil titre (B).
Pour Ecrire le texte du titre, On maintient enfoncer simplement l’outil et on
le déplace dans le bloc. Simple comme bonjour ☺. Je vous montre
P a g e | 46
Si vous ne voyez plus les outils
d’éditions, cliquez simplement sur la
zone encerclée en haut à gauche.
Après avoir atteint la zone du bloc, on
lâche la clique et là on peut mettre
notre titre simple
Comme vous le voyez sur la figure ci-dessous ; J’ai écrit mon texte dans la
zone en 1, puis j’ai centré çà (2). Enfin pour la couleur j’ai cliqué sur le style
(3) pour lui donner la couleur rouge. Tout est intuitif. Alors n’hésitez pas à
expérimenter:
Cliquer-deplacer-supprimer-cliquer-deplacer-ainsi-de-suite.
C’est comme çà on apprend ; en faisant des erreurs.
On passe au second bloc. Nous allons cette fois-ci encore cliquer sur le + et
choisir le bloc avec deux sections. Puis on clique sur l’outil image et on
déplace sur la première section du bloc et de même pour notre texte on
clique sur l’outil éditeur de textes pour notre texte.
Ça donne çà (ci-dessous). Pour changer l’image cliquez simplement là où
c’est fléché et allez choisir votre image
Vous pouvez choisir le type de bordure en 1. Si vous voulez appliquer le
même rayon de bord sur chaque côté laissez intact le boutons (2). Et enfin
en survolant l’intérieur des cases vous verrez des boutons augmenter et
diminuer. Faites vous-même le test.
Et surtout n’oubliez pas d’enregistrer
Ce la dit, je crois que vous pouvez être en mesure de poursuivre le reste. Çà
sera de même pour la page service.
Page contact
La page contact fera une exception dans sa conception puisqu’il doit y
contenir un formulaire de contact.
Formulaire de contact
La façon la plus simple de créer un formulaire est d’utiliser un plugin (une
extension) WordPress – actuellement, il y en a beaucoup. Dans ce cas, nous
utiliserons Contact Form 7.
Étape 1 – Installation de Contact Form 7
Recherchez Contact Form 7 et sélectionnez Installer. Une fois installé,
sélectionnez Activer pour activer le plugin sur votre site.
Etape 2 : Créer votre 1er formulaire avec Contact Form 7
Cliquez sur la partie « Créer un formulaire ». Vous êtes renvoyé directement
vers le formulaire avec les éléments de Base.
Dans un premier temps, définissez le titre de votre formulaire et
sauvegardez. Dans l’exemple ci-dessous, j’ai décidé d’appeler mon formulaire
« Contact ».
Avant de s’attaquer au formulaire, nous allons définir :
1. Qui recevra une notification de nouveau message et comment
personnaliser celui-ci ?
2. Le type de message envoyé à l’utilisateur en fonction d’un événement
spécifique (par exemple « si l’internaute ne remplit pas un champ
obligatoire »)
3. Les réglages additionnels qu’il est possible de faire. (Rendez-vous sur
https://contactform7.com/additional-settings/ pour plus d’info)
P a g e | 49
1. Qui recevra une notification de nouveau message et comment
personnaliser celui-ci ?
Rendons-nous dans le sous-onglet « Email »
Voyons ensemble la correspondance de chacun de ces champs ci-dessus :
« Pour » : définit l’adresse email qui recevra la demande de contact
(normalement il s’agit de la vôtre ou de celle de votre client)
« De » : définit l’adresse email de l’internaute qui vous contacte. Ce champ
utilise le marqueur [your name] mais vous pourriez utiliser aussi [your-
email] pour avoir l’email de l’internaute qui s’affiche en tant qu’émetteur.
Dans ce cas c’est mis à la fin wordpress@monsite.com. Pensez à changer ce
domaine par le lien de votre site
« Sujet » : définit l’objet de l’email que vous allez recevoir. Ici, j’ai indiqué «
Contact »
« En-tête additionnels » : Ils permettent de mettre un ou plusieurs de vos
collaborateurs en copie de l’email que vous recevrez. Vous pouvez également
définir un email automatisé pour envoyer une copie de son message à
l’internaute.
« Corps du message » : cette partie vous donne un aperçu de l’email qui vous
sera envoyé en fonction des paramètres que vous aurez défini plus haut. Vous
pouvez également modifier le corps de ce message directement dans cette
fenêtre pour le personnaliser davantage. A titre d’exemple, vous pourriez
simplement indiquer [your-message] puisque les informations du contact
seront déjà dans les champs prédéfinis.
P a g e | 50
« Exclure les lignes dont la balise d’email est vide » : permet d’exclure les
lignes qui ne seraient pas remplies par l’expéditeur de l’email que vous
recevrez.
« Envoyer cet email au format HTML » : comme son nom l’indique, ce
champ permet de recevoir le message sous format HTML. A priori, vous n’en
aurez pas besoin.
« Pièce jointes » : si vous avez demandé à votre internaute d’envoyer un
fichier, alors celui-ci sera joint à l’email que vous recevrez. Il vous faudra
ajouter le marqueur du champ de téléchargement du fichier présent sur
votre formulaire.
« Email (2) » : il permet de configurer un mail automatisé à destination de
vos collaborateurs ou de votre internaute. Vous pourrez le personnaliser en
indiquant sous combien de temps sa demande sera traitée et lui rappeler
l’objet de son message. Par exemple :
2. Le type de message envoyé à l’utilisateur en fonction d’un événement
spécifique
Nous allons maintenant définir les messages qui s’afficheront en fonction
d’événements spécifiques. Par exemple, un email mal renseigné, une url
incohérente, le non-remplissage de champs obligatoires…
P a g e | 51
Rendez-vous sur l’onglet « message » :
Personnaliser Contact Form 7
Nous allons maintenant revenir à la rubrique « formulaire » pour commencer
à créer le nôtre.
• Vous pouvez ajouter et supprimer des éléments, selon vos besoins.
Pour vous aider à démarrer, essayez avec ces boutons ci-dessous.
• L’étoile * indique qu’un champ est obligatoire.
• Lorsque vous êtes prêt, vous pouvez enregistrer vos modifications en
cliquant sur Sauvegarder dans le panneau de droite.
P a g e | 52
• Une fois que le formulaire est sauvegardé, un code court (en anglais on
parle de shortcode) sera affiché en haut. Il est surligné en bleu, et il
ressemble à ceci :
• Pour publier votre formulaire :
– Sélectionnez le shortcode et copiez-le
– Collez le shortcode dans la page, la publication ou le widget
où vous souhaitez que votre formulaire soit affiché.
Dans mon cas voilà :
P a g e | 53
Voici un peu ce que j’ai comme formulaire.
Donc comme je l’avais dis la configuration d’un thème diffèrent d’un thème à
un autre. De même il en a des thèmes d’une complexité de configuration que
d’autres. C’est pas pour vous faire peur mais juste pour vous avertir.
On ne fini jamais d’apprendre mes chers. Au jours le jours il faut se document,
le monde de l’informatique est en perpétuelle évolution.
Voilà, nous sommes déjà à la fin de notre cours sur Conception de site vitrine
avec WordPress.
Pour ce cas typique, nous avons utiliser un thème typique parmi tant d’autre.
Conscient que tout n’ai pas été montré dans ce cas typique
de ce tome1 (Création de site vitrine).
Vous trouverez dans les éditons suivantes plus de notion en ce qui concerne la création de site vitrine.