Académique Documents
Professionnel Documents
Culture Documents
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
S’il y a une chose que j’ai comprise au cours de ma vie, c’est qu’il ne faut
jamais se dire que quelque chose est impossible. Je ne sais comment
l’expliquer, mais si je puisse dire quelque chose c’est que ce livre vous
apprendra tellement que vous ne pourrez l’imaginer. Savez-vous pourquoi ?
Parce que le but de l’auteur n’est nécessairement basé sur l’argent. Il l’a écrit
l’a fait par amour et un profond sens du partage. Non il l’a fait parce que cela
lui plaisait. Il a regardé son passé, il s’est rappelé de comment il a souffert
pour avoir les connaissances qu’il a aujourd’hui et a décidé d’aider les autres
à ne pas souffrir au tant. Il écrit ce livre avec joie en y donnant du cœur et
surtout en souriant par ce que pour lui ce n’est pas une corvée, ce n’est pas
un travail. C’est juste du donner et du recevoir.
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 et faites-vous plaisir en apprenant car l’écrire
a été une partie de plaisir pour mon partenaire, collaborateur, ami et frère
IDRISSOU A. Matinou
Fawaz SALIFOU
Page |4
A PROPOS
Salut chers amis,
Si vous lisez ce livre c’est que vous avez soit envie d’apprendre à
concevoir un site web avec WordPress ou soit vous voulez approfondir
certains de vos connaissances sur WordPress. Si tel est le cas laissez-moi
vous dire que vous ne vous êtes pas trompés de livre. C’est bien le livre qu’il
vous faut en matière de conception de site web avec WordPress.
La plupart des livres qui existent sont souvent théoriques… A mes
débuts j’ai cherché des livres sur internet qui parle de la conception de site
web avec WordPress mais je n’ai pas pu trouver celui qui répondait vraiment
à mes besoins. Et mes besoins étaient que je voulais un livre claire explicite
pratique avec des captures d’écran à l’appui pour me permettre de maitriser
la création de site web avec WordPress.
Alors voici ici le tome1 (sur 6) qui vous donne les connaissances dont
vous avez besoin pour concevoir un site web vitrine avec WordPress. Partant
de la base qui est de savoir ce qu’un site web, ce livre vous permettra d’être
en mesure de développer comme un pro.
PARTIE 1 : CONTEXTUALISATION
Avant de me mettre à déverser toutes les notions dont vous avez
besoins pour concevoir un site web, il est tout à fait évident de savoir ce qu’un
site web, je crois ! Oui je sais que la plupart des personnes qui auront à
acheter ce livre savent probablement ce que c’est qu’un site web mais laissez
au moins les nymphomanes aussi en profiter.
Ok on se lance.
Hum ! Voilà encore des mots techniques qui embrouillent. Non non encore
une fois. Laissez-moi vous donnez un exemple avec lequel vous pouvez
comprendre.
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à j’espère avoir été clair
👉 Un Magazine en ligne
👉 Un Annuaire, un WiKi
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 comme le montre la figure suivante :
P a g e | 11
• Sinon vous êtes redirigés vers cette page ou vous cliquez sur base de
données
• Maintenant que vous avez installé WordPress en local, vous pouvez créer
votre site en hors ligne et à tête reposée ; une fois votre site est prêt
réservez un espace d’hébergement et hébergez-le, afin de le publier et le
partager avec 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.
Bien bien en parlant d’hébergement et si nous allons directement installer
WordPress depuis un hébergement…
Alors ne perdons plus le temps :
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,
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
Vérifiez votre e-mail pour un message de Free Host avec un lien d'activation.
Après avoir cliqué sur Activer le compte, vous serez redirigé vers votre
compte sur Profreehost comme indiqué ci-dessous.
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
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".
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".
Maintenant que vous avez tous configuré, il est temps de commencer à savoir
utiliser WordPress, n’est-ce pas ! ? 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
• Après avoir finir 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 page liste les pages créées. Pour ajouter une nouvelle page,
cliquez sur Ajouter
Petit rappel : Cliquez sur l’icône W pour revenir au niveau de votre tableau de bord.
P a g e | 30
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 la beauté, le design de notre site. Enfaite
même, c’est le thème même qui fait le site.
Pour être beaucoup plus explicite je vous donne un exemple.
Je suppose 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)
P a g e | 31
• Chez moi ici j’ai trois thèmes. Parmi les trois il y est mis Activé ; Ce qui
veut signifier que c’est le thème-là qui est actuellement utilisé. Voyez
le format, la texture, le design ; vous remarquerai que ça ressemble à
la texture de notre site.
Dans mon cas j’ai ajouté trois pages. Et comme vous le voyez, j’ai mis des
flèches directions haut et bas. Cela signifie que vous pouvez intervertir
l’ordre.
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 compte nous permet d’afficher tous ceux qui ont accès à la
modification de notre site. Dans ce cas je suis le seul avec un rôle
administrateur.
P a g e | 34
• Voici encore cette page dans la section Réglage qu’il ne faut pas
négliger
Voilà que tout est dit, nous pouvons maintenant passer à la pratique.
Pour le cadre cette 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
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 d'é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
Configuration du thème
Après avoir activé le thème, on est redirigé vers une page de configuration
→
→
Vous remarquez déjà que notre site commence par prendre forme. Content
n’est-ce pas ☺ ?. Bien tout ce qui nous 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. ☺ Je vois que vous êtes
pressé de finir votre (peut-être) premier site mais il faut que je vous notifie
ceci d’abord : La page qui vient après activation d’un thème dépends d’un
thème à un autre. Alors ne soyez pas étonné de tomber sur thème avec des
configuration 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.
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
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 ».
Page d’accueil
Il y a plusieurs manières de modifier le contenu d’un thème dans WordPress.
Comment ça ? Au fait, ce qu’il faut comprendre 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
de là où on doit se rendre pour modifier un contenu est au niveau de la
personnalisation. Tentons le coups ☺
P a g e | 41
La partie 1 est ce qu’on appelle la section des blocs. C’est cette partie selon
mes analyses 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 bloc 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
→
→
Comme vous le voyez tout est simple et intuitif… Vous finissez vous cliquez
sur le bouton Publier qui se trouve en haut.
Je compte sur vous pour finir l’édition de la page d’accueil
A propos
Comme vous avez su le remarquer la page A propos, service et contact sont
des pages que nous avons-nous 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.
P a g e | 43
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.
Une fois revenir à 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
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
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. Cliquez-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 cliquez 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.
P a g e | 47
Formulaire de contact
« 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 :
• 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 :
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.
Je suis parfais conscient que je ne vous ai pas tout montré dans le cas typique
de ce tome1 (Création de site vitrine). Une chose sur laquelle je sur sûr est
que j’essayerai dans les éditons suivante d’ajouter encore plus de notion en
ce qui concerne la création de site vitrine.