SOMMAIRE<\/p>\n
SOMMAIRE ………………………………………………………………………………………………………………………….. 2
\nPREFACE ……………………………………………………………………………………………………………………………… 3
\nA PROPOS ……………………………………………………………………………………………………………………………. 4
\nPARTIE 1 : CONTEXTUALISATION ………………………………………………………………………………………. 4
\n\u2022 Un site web, c\u2019est quoi ?………………………………………………………………………………………………. 4
\n\u2022 H\u00e9bergement et nom de domaine ……………………………………………………………………………….. 5
\n\u2022 A quoi sert un site web ……………………………………………………………………………………………….. 5
\n\u2022 C\u2019est quoi WordPress alors ?……………………………………………………………………………………….. 6
\n\u2022 Que peut faire WordPress alors ? ………………………………………………………………………………… 7
\nPARTE 2 : INSTALLATION DE WORPRESS EN LOCAL ………………………………………………………….. 8
\nDE LA CONFIGURATION DES ENVIRONNEMENTS (WAMP ET XAMPP) A L\u2019INSTALLATION DE
\nWORDPRESS …………………………………………………………………………………………………………………….. 9
\nETAPE 1 : Installer Wamp\/Xampp ………………………………………………………………………………. 9
\nETAPE 2 : Pr\u00e9paration des fichiers WordPress …………………………………………………………… 9
\nETAPE 3 : D\u00e9marrer xamp\/wamp ……………………………………………………………………………….. 9
\nETAPE 4 : D\u00e9marrer …………………………………………………………………………………………………… 10
\nETAPE 5 : installer WordPress …………………………………………………………………………………… 12
\nDE LA CREATION D\u2019UN NOM DE DOMAINE A L\u2019INSTALLATION DE WORDPRESS ………………. 15
\n\u00c9tape 1 : Cr\u00e9er un compte dans ‘profreehost ‘ …………………………………………………………… 16
\n\u00c9tape 2 : Obtenez votre domaine gratuit …………………………………………………………………… 18
\n\u00c9tape 3 : Installez WordPress sur votre domaine ……………………………………………………… 20
\nPARTIE 03 : LE TABLEAU DE BORD DE WORDPRESS ……………………………………………………….. 23
\nPRATIQUE …………………………………………………………………………………………………………………………. 36
\nCr\u00e9ation d\u2019un site Vitrine …………………………………………………………………………………………………. 36
\nFonctionnalit\u00e9s :………………………………………………………………………………………………………………. 36
\nInstallation de th\u00e8me ……………………………………………………………………………………………………….. 36
\nConfiguration du th\u00e8me …………………………………………………………………………………………………… 37
\nEdition des pages du th\u00e8me ……………………………………………………………………………………………… 40
\nElementor ……………………………………………………………………………………………………………………….. 42
\nFormulaire de contact ……………………………………………………………………………………………………… 47
\n\u00c9tape 1 \u2013 Installation de Contact Form 7 …………………………………………………………………… 47
\nEtape 2 : Cr\u00e9er votre 1er formulaire avec Contact Form 7 ………………………………………… 48
\nPage |3<\/p>\n
PREFACE<\/p>\n
Ce livre s\u2019adresse aux d\u00e9butants mais aussi aux personnes qui sont d\u00e9j\u00e0
\ndu domaine et qui voudraient compl\u00e9ter leur savoir faire avec quelques astuces.
\nAujourd\u2019hui apprendre \u00e0 cr\u00e9er un site web est de plus en plus accessible.<\/p>\n
Vous trouverez ici les informations essentielles pour cr\u00e9er un site web WordPress<\/p>\n
Page |4<\/p>\n
A PROPOS
\nSi vous lisez ce livre c\u2019est que vous avez soit envie d\u2019apprendre \u00e0 concevoir un site web avec WordPress ou approfondir certaines de vos connaissances sur WordPress. Ce livre\u00a0 retrace l’essentiel de conception de site web avec WordPress.
\nLa plupart des livres qui existent sont souvent th\u00e9oriques\u2026 pour la conception de site web avec WordPress nous vous proposons une m\u00e9thode pratique. Vous trouverez les \u00e9l\u00e9ments n\u00e9cessaires pour vous permettre de commencer la cr\u00e9ation de site web avec WordPress.<\/p>\n
Ceci est le tome1 (sur 6) qui vous donne les connaissances n\u00e9cessaires \u00a0pour concevoir un site web vitrine avec WordPress.<\/p>\n
PARTIE 1 : CONTEXTUALISATION<\/p>\n
\u2022 Qu’est ce qu’un site web?<\/p>\n
Tout d\u2019abord d\u00e9finissons le mot Web. Le Web est le terme commun\u00e9ment
\nemploy\u00e9 pour parler du World Wide Web, ou WWW, traduit en fran\u00e7ais par la
\ntoile d’araign\u00e9e mondiale. Par abus de langage, le Web d\u00e9signe de fa\u00e7on plus
\nlarge tout ce qui se rapproche \u00e0 cet univers internet.Un site web, est alors un groupe de pages web reli\u00e9es entre elles par des liens accessibles depuis un navigateur Internet. Ces liens permettent de naviguer dans le site et de passer d’une page \u00e0 l’autre.
\nPage |5<\/p>\n
Imaginez un livre.<\/p>\n
Un livre = plusieurs pages + reluire. Chaque page est soutenue par la reluire\u2026
\nDe m\u00eame pour un site web, Plusieurs pages web sont soutenues par des liens qui repr\u00e9sentent la reluire dans le cas de livre.
\nPour qu\u2019un site soit \u00e0 la port\u00e9e de tous, il faut que celui-ci soit h\u00e9berg\u00e9, et ait
\nun nom de domaine.<\/p>\n
\u2022 H\u00e9bergement et nom de domaine<\/p>\n
Pour consulter un livre, il faut se rendre \u00e0 la biblioth\u00e8que. La biblioth\u00e8que repr\u00e9sente ici internet\u2026 Chaque livre(site) est catalogu\u00e9 dans des
\ncouloirs sur des \u00e9tag\u00e8res (h\u00e9bergeur). Et enfin on recherche le livre que nous voulons lire \u00e0 l\u2019aide du nom du livre (nom de domaine).
\nTout commence \u00e0 se clarifier.<\/p>\n
\u2022 A quoi sert un site web<\/p>\n
Un site web est un outil de communication qu’il ne faut pas n\u00e9gliger. En effet, il permet de communiquer aupr\u00e8s d’un large public \u00e0 moindre co\u00fbt et offre une multitude de possibilit\u00e9s pour atteindre vos objectifs. Il permettra, entre autres de :<\/p>\n
\u2022 V\u00e9hiculer votre image,
\n\u2022 Asseoir votre notori\u00e9t\u00e9,
\n\u2022 Gagner en visibilit\u00e9 et cr\u00e9dibilit\u00e9,<\/p>\n
Page |6<\/p>\n
\u2022 Pr\u00e9senter votre entreprise,
\n\u2022 Diffuser vos services et produits,
\n\u2022 Vendre des services et des produits
\n\u2022 Mettre en avant votre savoir-faire,
\n\u2022 Vous diff\u00e9renciez de la concurrence.
\nComme le livre l\u2019intitule \u00ab \u2026AVEC WORDPRESS\u2026 \u00bb, il est tout \u00e0 fait normal
\nde d\u00e9finir ce que c\u2019est que WordPress.<\/p>\n
\u2022 C\u2019est quoi WordPress alors ?<\/p>\n
WordPress est un syst\u00e8me de gestion de contenus (CMS) permettant
\nde concevoir un site web assez facilement.
\nWordPress est extr\u00eamement simple d\u2019utilisation.<\/p>\n
Il peut \u00eatre tr\u00e8s
\nrapidement configur\u00e9 et son ergonomie est particuli\u00e8rement intuitive. La
\ngestion des pages, th\u00e8mes, liens, m\u00e9dias et plugins se fait quant \u00e0 elle de fa\u00e7on
\ntr\u00e8s fluide et simplifi\u00e9e.<\/p>\n
Il n\u2019est pas n\u00e9cessaire d\u2019avoir des notions en langage
\nhtml ou en cr\u00e9ation de sites ni d\u2019avoir un don particulier pour l\u2019informatique
\nou le graphisme.<\/p>\n
L\u2019interface vous invite simplement \u00e0 ajouter textes, images, menus et
\nautres gadgets en seulement quelques clics.<\/p>\n
Elle classe les contenus en
\nrubriques, sous-rubriques et permet de g\u00e9rer facilement les droits des
\ndiff\u00e9rents utilisateurs.<\/p>\n
Lorsque l\u2019on constate l\u2019accroissement fulgurant de l\u2019utilisation des
\nt\u00e9l\u00e9phones portables et des tablettes pour la navigation internet, il est
\n\u00e9vident que les sites qui ne s\u2019y adaptent pas perdront beaucoup en trafic et
\nen efficacit\u00e9.<\/p>\n
Elle utilise le \u201cJquery\u201d qui facilite les interactions mais aussi
\nl\u2019exploitation sur les appareils mobiles.
\nDe plus en plus de th\u00e8mes WordPress, m\u00eame gratuits, int\u00e8grent par ailleurs
\nune technologie totalement responsive, c\u2019est-\u00e0-dire parfaitement adapt\u00e9e \u00e0
\ntous types de r\u00e9cepteurs : ordinateurs, smartphones et tablettes.<\/p>\n
Le responsive design permet en r\u00e9alit\u00e9 un affichage et une ergonomie diff\u00e9rents
\nselon la taille de l\u2019\u00e9cran utilis\u00e9. Il ne rebute donc aucun utilisateur et facilite
\nla navigation sur le site.<\/p>\n
Page |7<\/p>\n
\u2022 A quels fin peut-on utiliser WordPress ?<\/p>\n
Utiliser WordPress pour faire quoi ?
\nA l\u2019origine on l\u2019utilisait principalement pour concevoir des blogs, il faut
\nreconna\u00eetre qu\u2019aujourd\u2019hui ses possibilit\u00e9s lui donnent une tout autre
\ndimension.<\/p>\n
Petite liste en vrac de ce que vous pouvez faire avec :
\n\ud83d\udc49 Un Blog, un Site vitrine, un e-Commerce<\/p>\n
\ud83d\udc49 Un Forum, un site de Petites Annonces<\/p>\n
\ud83d\udc49 Un Magazine en ligne<\/p>\n
\ud83d\udc49 Une Plate-forme d\u2019\u00e9change<\/p>\n
\ud83d\udc49 Un Annuaire, un WiKi<\/p>\n
\ud83d\udc49 Un R\u00e9seau social, un Intranet
\n\ud83d\udc49 Etc.
\nAlors quel que soit votre projet de site web, \u00e9tudiez bien WordPress, il se
\npourrait qu\u2019il vous corresponde\u2026
\nBon voil\u00e0 l\u2019initiation a \u00e9t\u00e9 faite\u2026<\/p>\n
Passons \u00e0 la pratique.
\nIl y a deux mani\u00e8res de faire pour concevoir un site web avec
\nWordPress. Soit on con\u00e7oit le site en local c\u2019est-\u00e0-dire depuis notre machine
\n(PC), soit on con\u00e7oit le site directement en ligne (en ayant d\u00e9j\u00e0 un
\nh\u00e9bergement et un nom de domaine).
\nPour le cadre de cette formation, vous trouverez les deux m\u00e9thodes. La
\ndiff\u00e9rence principale se trouve lors de l\u2019installation de WordPress.
\nPage |8<\/p>\n
PARTIE 2 : INSTALLATION DE WORDPRESS EN LOCAL
\nLa particularit\u00e9 de cette m\u00e9thode est que votre site sera uniquement
\npr\u00e9sent dans votre machine (Votre ordinateur devient un h\u00e9bergeur\/votre
\nserveur) et ne peut pas \u00eatre consult\u00e9 en ligne.<\/p>\n
La magie c\u2019est que vous pouvez
\nr\u00e9pliquer exactement l\u2019environnement web sur votre propre PC et
\nd\u00e9velopper votre site web \u00e0 votre rythme. Cependant, tester une id\u00e9e,
\napprendre \u00e0 d\u00e9velopper un site web, r\u00e9duire les d\u00e9penses dans les phases
\npr\u00e9liminaires d\u2019un projet, sont toutes des raisons valables de vouloir installer
\nWordPress en local.
\nPour installer WordPress en local vous avez besoin de trois choses
\nfondamentales :
\n\ud83d\udc49 Un navigateur (Chrome ; Mozilla Firefox, Opera, internet explorer, \u2026).
\nPour commencer, il va falloir que vous ayez un navigateur. Un navigateur est
\nce logiciel qui permet de consulter des sites et de visiter des sites sur internet.
\nPersonnellement je pr\u00e9f\u00e8re plus chrome (www.google.com\/intl\/fr\/chrome\/).<\/p>\n
\ud83d\udc49 Un logiciel qui jouera le r\u00f4le de server en local (XAMPP, WampServer,
\nEasyPHP, Lamp (pour Linux),\u2026)
\nAfin de jouer le r\u00f4le de serveur en local, vous avez besoin essentiellement d\u2019un 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.<\/p>\n
Parmi ces deux environnements, vous pouvez utiliser XAMPP. C\u2018est optionnel, vous avez le choix. (Lien t\u00e9l\u00e9chargement : https:\/\/www.apachefriends.org\/fr\/download.html ).
\nPour ceux qui pr\u00e9f\u00e8rent WampServer : (
\nhttps:\/\/www.wampserver.com\/download.php )
\n\ud83d\udc49 Un dossier WordPress.
\nEnfin ! pour finir vous aurez besoin de t\u00e9l\u00e9charger sur
\n(https:\/\/fr.wordpress.org\/download\/ un fichier compress\u00e9 WordPress.
\nPage |9<\/p>\n
DE LA CONFIGURATION DES ENVIRONNEMENTS (WAMP ET XAMPP) A
\nL\u2019INSTALLATION DE WORDPRESS<\/p>\n
ETAPE 1 : Installer Wamp\/Xampp
\nPour commencer il faut installer XAMPP ou WAMP sur votre ordinateur.<\/p>\n
Il suffit juste de vous rendre sur les liens ci-dessus \u00e9num\u00e9r\u00e9s, et de t\u00e9l\u00e9charger la version qui convient \u00e0 votre syst\u00e8me d\u2019exploitation.
\nUne fois t\u00e9l\u00e9charg\u00e9, installez votre logiciel, et suivez les instructions jusqu\u2019\u00e0
\nla fin de l\u2019installation.
\nAvertissement : il n\u2019est techniquement pas bien d\u2019installer les deux environnements dans une m\u00eame machine. Donc faites un choix entre XAMPP et WAMPserver.<\/p>\n
ETAPE 2 : Pr\u00e9paration des fichiers WordPress<\/p>\n
\u2022 Rendez-vous sur le lien de t\u00e9l\u00e9chargement fourni ci-dessus () et
\nt\u00e9l\u00e9charger la derni\u00e8re version du CMS ;
\n\u2022 D\u00e9compressez le fichier .zip t\u00e9l\u00e9charg\u00e9 ;
\n\u2022 Ouvrez le dossier WordPress, d\u00e9compress\u00e9 ;
\n\u2022 S\u00e9lectionnez le dossier d\u00e9compress\u00e9 et copiez-le ;
\n\u2022 Ouvrez le dossier \\xampp\\htdocs (pour le cas de XAMPP) ou
\n\\wamp\\www situ\u00e9 \u00e0 la racine de votre disque principal ;
\n\u2022 Collez le dossier et renommer selon le nom de votre projet (Ex :
\nmasterclass) et \u00e7a devient \\xampp\\htdocs\\masterclass ou \\wamp\\www\\maste\u2026;<\/p>\n
ETAPE 3 : D\u00e9marrer xamp\/wamp<\/p>\n
\u2022 Recherchez sur votre PC l’emplacement de l’application XAMPP
\nControl Panel (ou WampServer si WAMP install\u00e9) et ex\u00e9cutez. Vous
\npouvez \u00e9galement la trouver via le menu
\nD\u00e9marrer\/Programmes\/XAMPP Control Panel (ou wampServer) ;
\n\u2022 Pour le cas de de XAMPP l’application s’ouvre et affiche diff\u00e9rents
\nmodules avec des boutons en face de chacun d’entre eux ;<\/p>\n
Cliquez sur le bouton Start situ\u00e9 en face des modules Apache et MySQL. Le
\nnom de chaque module doit \u00eatre surlign\u00e9 en vert apr\u00e8s quelques secondes ;
\nP a g e | 10<\/p>\n
<\/p>\n
\u2022 Pour le cas de WAMP Une fois lanc\u00e9, vous aurez l\u2019ic\u00f4ne de WampServer
\ndans votre barre de t\u00e2che. Cette ic\u00f4ne doit
\navoir la couleur verte pour pouvoir l\u2019utiliser
\nNB : Si la couleur est diff\u00e9rente c\u2019est qu\u2019il y a un probl\u00e8me.
\nETAPE 4 : D\u00e9marrer
\n\u2022 Cr\u00e9ation de la base de donn\u00e9es de votre site web (cas de XAMPP)
\nIl est essentiel de cr\u00e9er la base de donn\u00e9es destin\u00e9e \u00e0 l\u2019utilisation de votre
\nsite.<\/p>\n
Pour cr\u00e9er une base de donn\u00e9es, il faut lancer phpMyadmin en
\ncliquant sur le bouton Admin.<\/p>\n
\u2022 Pour le cas de WAMP
\nCliquez sur l\u2019ic\u00f4ne de WampServer dans la barre de t\u00e2che, puis cliquez
\ndessus avec le bouton gauche de votre souris et cliquez enfin sur la
\ncommande \u00ab phpMyAdmin \u00bb<\/p>\n
<\/p>\n
\u2022 Si une page d\u2019authentification s\u2019affiche alors saisissez le mot \u00ab root \u00bb dans la zone \u00ab Utilisateur \u00bb<\/p>\n
P a g e | 12<\/p>\n
\u2022 Sinon vous \u00eates redirig\u00e9s vers cette page ou vous cliquez sur base de
\ndonn\u00e9es<\/p>\n
\u2022 Choisissez le nom de votre base de donn\u00e9es, puis s\u00e9lectionner \u00ab
\nutf8_bin \u00bb pour l\u2019interclassement, puis cliquez sur Cr\u00e9er et le tour est
\njou\u00e9 ! Exemple de nom de la base de donn\u00e9es : formation, site,
\ndb_masterclass. Le nom est pris au hasard mais jamais d\u2019espace.
\nRemplacer les espaces par les \u2018_\u2019 comme \u2018base_de_donnee\u2019<\/p>\n
<\/p>\n
ETAPE 5 : installer WordPress<\/p>\n
\u2022 Pour installer WordPress en local, saisissez dans la barre d\u2019adresse de
\nvotre navigateur : localhost\/ suivi du nom de votre site, c.\u00e0.d le nom du dossier pr\u00e9c\u00e9demment cr\u00e9\u00e9, dans mon cas \u00e7a sera:
\nlocalhost\/masterclass\/. Vous serez redirig\u00e9 vers cette page.<\/p>\n
P a g e | 13<\/p>\n
\u2022 En cliquant, sur le bouton \u00ab C\u2019est parti ! \u00bb, l\u2019installation de WordPress
\ncommence. Elle ne dure pas plus de cinq minutes.
\n\u2022 Dans l\u2019interface suivante, vous devez sp\u00e9cifier le nom de la base de
\ndonn\u00e9es (celle cr\u00e9\u00e9e pr\u00e9c\u00e9demment) dans le champ \u00ab Base de
\ndonn\u00e9es \u00bb. Et comme identifiant mettez (root), et laissez les champs
\ndu mot de passe vide.
\nP a g e | 14<\/p>\n
\u2022 Puis compl\u00e9tez les informations n\u00e9cessaires concernant votre site ou
\nvotre blog :
\n\u2013 Titre du site
\n\u2013 Identifiant (\u00e9vitez les identifiant de type admin)
\n\u2013 Mot de passe (Il faut choisir un mot de passe s\u00e9curis\u00e9)
\n\u2013 Votre adresse de messagerie
\net ne cochez surtout pas la case (Visibilit\u00e9 pour les moteurs de recherche), sinon votre site ne sera pas index\u00e9 sur les moteurs de recherche. Puis cliquez sur \u00ab Installer WordPress \u00bb
\nNote : En fonction de la version de WordPress vous pouvez retrouver des
\ncases suppl\u00e9mentaires. Ignorez les justes !
\nBravo, vous avez install\u00e9 WordPress avec succ\u00e8s, tout ce qui vous reste
\nest de vous connecter \u00e0 votre espace d\u2019administration en cliquant sur le
\nbouton \u00ab Se connecter \u00bb.<\/p>\n
ou en se connectant sur l\u2019adresse suivante et en tapant votre identifiant et
\nvotre mot de passe : localhost\/nom_de_votre_dossier_wordpress\/wp-admin
\nce qui donne pour moi : localhost\/masterclass\/wp-admin (ci-dessous).<\/p>\n
P a g e | 15<\/p>\n
\u2022 Pour visiter votre site, vous pouvez le faire via l\u2019adresse :
\nlocalhost\/masterclass.
\nBien-s\u00fbr en rempla\u00e7ant \u00ab masterclass \u00bb par le nom de votre dossier.<\/p>\n
\u2022 Maintenant que vous avez install\u00e9 WordPress en local, vous pouvez cr\u00e9er
\nvotre site en hors ligne et \u00e0 t\u00eate repos\u00e9e ; une fois que votre site est pr\u00eat r\u00e9servez un espace d\u2019h\u00e9bergement et h\u00e9bergez-le, afin de le publier et le partager avec tout le monde.
\nUN PLUS : Installer WordPress en local n\u2019est pas compliqu\u00e9 quand on suit
\nla bonne proc\u00e9dure. Vous pouvez bien le faire en seulement cinq minutes
\net en quelques clics.<\/p>\n
L’h\u00e9bergement, Et si nous allons directement installer WordPress depuis un h\u00e9bergement\u2026
\nAlors ne perdons plus le temps :<\/p>\n
DE LA CREATION D\u2019UN NOM DE DOMAINE A L\u2019INSTALLATION DE
\nWORDPRESS<\/p>\n
Dans cette partie, nous allons d’abord configurer notre compte aupr\u00e8s du
\nfournisseur d’h\u00e9bergement, puis installer WordPress sur le domaine. Nous
\nallons donc proc\u00e9der en 3 \u00e9tapes,<\/p>\n
1. Cr\u00e9er un compte dans ‘profreehost’<\/p>\n
P a g e | 16<\/p>\n
2. Obtenez votre domaine gratuit<\/p>\n
3. Installez WordPress sur votre domaine<\/p>\n
\u00c9tape 1 : Cr\u00e9er un compte dans ‘profreehost ‘ Profreehost est le fournisseur d’h\u00e9bergement qui va nous aider \u00e0 cr\u00e9er un site Web gratuit sur WordPress. Donc, pour cr\u00e9er un compte,
\nrendez-vous sur profreehost.com .
\nDans la page d’accueil, cliquez sur \u00ab\u00a0S’inscrire maintenant\u00a0\u00bb.<\/p>\n
<\/p>\n
Vous serez maintenant redirig\u00e9 vers une page o\u00f9 vous pourrez vous inscrire
\npour un nouveau compte.<\/p>\n
Ici, entrez l’adresse e-mail et le mot de passe pour cr\u00e9er un compte. Ensuite,
\ncliquez sur le bouton avec une coche.
\nP a g e | 17<\/p>\n
Vous devriez recevoir la notification suivante apr\u00e8s avoir rempli vos
\ncoordonn\u00e9es. Cela signifie que vous devez activer votre compte. Le lien
\npour activer votre compte profreehost vous sera envoy\u00e9 par e-mail.<\/p>\n
V\u00e9rifiez votre e-mail pour un message de Free Host avec un lien d’activation.<\/p>\n
Cliquez sur le bouton Activer le compte pour activer votre compte.
\nP a g e | 18<\/p>\n
Apr\u00e8s avoir cliqu\u00e9 sur Activer le compte, vous serez redirig\u00e9 vers votre
\ncompte sur Profreehost comme indiqu\u00e9 ci-dessous.<\/p>\n
<\/p>\n
\u00c9tape 2 : Obtenez votre domaine gratuit
\nUn domaine est le nom de votre site Web. Il s’agit du nom qu’un visiteur entre
\ndans le navigateur pour visiter votre site Web.
\nAlors pour obtenir votre nom de domaine, Cliquez sur \u00ab\u00a0Cr\u00e9er un nouveau
\ncompte\u00a0\u00bb<\/p>\n
<\/p>\n
Vous devez maintenant choisir un nom pour votre site Web. Nous avons
\nchoisi \u00ab\u00a0techyleaf\u00a0\u00bb. Ce sera le nom de domaine de votre site Web dont vos
\nvisiteurs auront besoin pour acc\u00e9der \u00e0 votre site Web.<\/p>\n
\u2022 Entrez maintenant le nom de domaine choisi pour v\u00e9rifier s’il est
\ndisponible ou non.
\n\u2022 Vous pouvez voir que le domaine que nous avons choisi est disponible
\n(en vert) et peut \u00eatre utilis\u00e9 pour cr\u00e9er un site Web gratuit sur
\nWordPress.
\nP a g e | 19<\/p>\n
\u2022 Vous pouvez \u00e9galement modifier la derni\u00e8re partie de votre domaine
\nen unaux.com, comme indiqu\u00e9 ci-dessous.<\/p>\n
\u2022 Maintenant, pour obtenir ce domaine, cliquez sur le bouton avec la
\ncoche dessus pour continuer.<\/p>\n
\u2022 Vous devriez maintenant recevoir un message de confirmation comme
\nindiqu\u00e9 ci-dessous.
\nComme il est dit, \u00ab\u00a0Succ\u00e8s!\u00a0\u00bb. Nous avons notre domaine gratuit.<\/p>\n
\u00ab Parfois, \u00e0 la cr\u00e9ation on peut voir un cercle en vert qui tourne en boucle. \u00c7\u00e0
\nveut dire tout simplement que le domaine est en cours d\u2019acquisition. \u00c7\u00e0
\nP a g e | 20<\/p>\n
prends entre 5 et 20min. Sinon soyez entrain d\u2019actualiser la page jusqu\u2019\u00e0 voir
\nl\u2019icone de succ\u00e8s en vert. \u00bb<\/p>\n
\u00c9tape 3 : Installez WordPress sur votre domaine.<\/p>\n
Maintenant que nous avons notre domaine gratuit, il est temps de cr\u00e9er
\nun site Web gratuit.<\/p>\n
Ainsi, une fois que nous aurons install\u00e9 WordPress, notre site Web sera en direct sur Internet.
\nPour installer WordPress, cliquez sur le bouton ‘Manage’ .<\/p>\n
Une fois que vous avez cliqu\u00e9 sur Manage, cela vous am\u00e8nera \u00e0 cette page ci-
\ndessous
\nCliquez maintenant sur \u00ab\u00a0Control Panel\u00a0\u00bb.<\/p>\n
Apr\u00e8s plusieurs contr\u00f4les, vous \u00eates redirig\u00e9 vers le panneau de
\nconfiguration et sous l’onglet logiciel (SOFTWARE) cliquez sur \u00ab
\nSoftaculous app installer \u00bb.
\nP a g e | 21<\/p>\n
Il vous am\u00e8nera \u00e0 la page avec divers logiciels qui peuvent \u00eatre install\u00e9s sur
\nun site Web. Ici, s\u00e9lectionnez WordPress et cliquez sur \u00ab\u00a0Install\u00a0\u00bb.<\/p>\n
\u2022 Vous allez maintenant acc\u00e9der \u00e0 cette page et acc\u00e9der au compte
\nadministrateur.
\n\u2022 Ici, vous devrez entrer un nom d\u2019utilisateur et un mot de passe pour
\nvotre installation WordPress.
\nIl sera utilis\u00e9 pour se connecter ult\u00e9rieurement \u00e0 votre site Web.<\/p>\n
Une fois que vous avez saisi ces informations, cliquez sur Install, WordPress est install\u00e9 avec succ\u00e8s.<\/p>\n
Vous pouvez maintenant cliquer sur le lien qui redirige vers votre site Web
\ncomme indiqu\u00e9 dans l’image ci-dessous et votre site Web devrait \u00eatre en
\nligne sur Internet.
\nAvertissement : Toujours dans le m\u00eame contexte, la mise en ligne de votre
\nsite peut prendre un certain temps (entre 01 minute \u00e0 01 journ\u00e9e \u263a).<\/p>\n
<\/p>\n
Succ\u00e8s! Votre tout nouveau site Web est en ligne.<\/p>\n
Maintenant que vous avez tout configur\u00e9, il est temps de commencer \u00e0 savoir
\nutiliser WordPress ! ?<\/p>\n
Il est temps de savoir manier WordPress
\nsans souci, de personnaliser et de cr\u00e9er le site Web de vos r\u00eaves.
\nPassons donc \u00e0 l\u2019\u00e9tape de \u00ab Cr\u00e9ation de site web \u00bb.<\/p>\n
P a g e | 23<\/p>\n
PARTIE 03 : LE TABLEAU DE BORD DE WORDPRESS<\/p>\n
Pour acc\u00e9der \u00e0 l\u2019interface du tableau de bord WordPress, il faut au pr\u00e9alable s\u2019authentifier
\n\u2022 Si vous \u00eates en local, il faut Ecrire au niveau de votre barre de
\nrecherche localhost\/nom_dossier_wordpress\/wp-admin
\nPour ceux qui \u00e9taient attentif, au niveau de l\u2019installation de wordpress il faut de d\u00e9compresser le fichier et le renommer selon le nom de votre choix. C\u2019est en fait ce nom qu\u2019il faut remplacer ici par
\nnom_dossier_wordpress.
\nEt si par exemple j\u2019avais nomm\u00e9 le dossier masterclass alors pour
\nacc\u00e9der \u00e0 l\u2019interface du tableau de bord de WordPress, je taperai
\nlocalhost\/masterclass\/wp-admin sur mon navigateur.
\nPar contre si WordPress \u00e9tait d\u00e9j\u00e0 installer depuis mon site en ligne
\nalors l\u00e0 je tape simplement le nom de mon domaine suivit de \/wp-
\nadmin\/
\nVous serez redirig\u00e9 vers la page d\u2019authentification ci-dessous<\/p>\n
– Au niveau de 1, renseignez votre identifiant ou votre email.
\n– Au niveau de 2, votre mot de passe et validez.
\n\u2022 Vous \u00eates ensuite redirig\u00e9 vers l\u2019interface de WordPress proprement
\ndites
\nP a g e | 24<\/p>\n
\u2022 Sur l\u2019angle en haut \u00e0 gauche (Zone encadr\u00e9) faites un clic droit et cliquez sur nouvelle onglet.\u00a0 L\u2019avantage de cela est qu\u2019il vous permet juste de voir les
\nmodifications qu\u2019on apporte directement ; juste en passant d\u2019un onglet \u00e0 un autre.<\/p>\n
\u2022 La premi\u00e8re section sert pratiquement\u00a0 \u00e0\u00a0 voir l\u2019\u00e9tat de sant\u00e9 de notre site, les mises \u00e0 jour etc. On passera.<\/p>\n
<\/p>\n
\u2022 Apr\u00e8s avoir ouvert sur un nouvel
\nonglet, vous verrez l\u2019apparence de votre site.
\nC\u2019est un th\u00e8me par d\u00e9faut que
\nWordPress a install\u00e9 qui s’affiche afin de vous donner un aper\u00e7u de votre site web.e<\/p>\n
Le th\u00e8me est en version b\u00eata ;<\/p>\n
c\u2019est-\u00e0-dire qu\u2019il est toujours en
\nconstruction. \u00ab vous comprendrez
\npourquoi \u00bb.<\/p>\n
P a g e | 25<\/p>\n
Afin que tout se passe mieux, nous allons essayer de changer de th\u00e8me.
\n-Revenons au niveau de notre tableau de bord.
\n– Survolons la section apparence et\u00a0 cliquons\u00a0 sur le th\u00e8me.<\/p>\n
<\/p>\n
– Survolons le th\u00e8me Twenty Twenty One (C\u2019est un choix parmi les th\u00e8mes que j\u2019ai fait afin que notre exp\u00e9rience se
\npasse bien). Il vous sera expliqu\u00e9 ce que c\u2019est qu\u2019un th\u00e8me plus tard.<\/p>\n
– On active le th\u00e8me (cliquez sur le bouton activer)<\/p>\n
Comment lui donner un autre design. Content n\u2019est-ce pas \u263a ?<\/p>\n
P a g e | 26<\/p>\n
\u2022 La section article nous permet d\u2019ajouter, modifier, supprimer et structurer (taguer, cat\u00e9goriser, mettre en avant, etc.) des articles.
\nLes articles sont un peu comme des publications que l\u2019on fait sur Facebook avec des fonctionnalit\u00e9s de partage, like et qui informe sur un sujet sp\u00e9cifique.<\/p>\n
\u2022 Dans la partie tous les articles, on verra la liste de nos articles qu\u2019on a publi\u00e9 ou en attente de publication.
\n\u2022 On aper\u00e7oit un article d\u00e9j\u00e0 publi\u00e9 dont on voit le titre (zone en
\nnoir).
\n\u2022 Les zones vertes contiennent
\nun bouton \u2018ajouter\u2019 qui nous
\npermettent comme son nom l\u2019indique
\nd\u2019ajouter des articles<\/p>\n
\u2022 En survolant chaque article, vous pouvez voir une autre zone appara\u00eetre.<\/p>\n
1. Vous pouvez modifier l\u2019article
\n2. Vous permet de modifier rapidement de petit truc comme le titre, le slug et bien
\nd\u2019autre \u00e9l\u00e9ment en rapport avec l\u2019article sp\u00e9cifi\u00e9 (cliquez et amusez-vous)
\n3. Met l\u2019article en corbeille (suppression partielle de l\u2019article).
\n4. Permet d\u2019afficher le rendu de l\u2019article.
\nP a g e | 27<\/p>\n
\u2022 Toujours au niveau de la section articles, nous les cat\u00e9gories.<\/p>\n
Les cat\u00e9gories permettent la cat\u00e9gorisation des articles \u263a.<\/p>\n
Un peu comme class\u00e9 des articles selon une th\u00e9matique donn\u00e9.<\/p>\n
Comme par exemple en voulant r\u00e9diger des articles sur la beaut\u00e9, le r\u00e9dacteur peut cr\u00e9er plusieurs cat\u00e9gories comme p\u00e9dicure, manicure, vestimentaires.
\nVous voyez ! et l\u00e0 un internaute qui visite le site n\u2019a pas forc\u00e9ment besoin de tout voir.<\/p>\n
Il peut en m\u00eame temps se rediriger vers les articles qui l\u2019int\u00e9ressent le plus en fonction de la cat\u00e9gorie en lui \u00e9vitant de
\nperdre son temps.<\/p>\n
\u2022 En cliquant sur ajouter vous tomberez sur cette page<\/p>\n
1- Saisissez le titre de votre page
\n2- Saisissez le contenu de vos articles
\n3- D\u00e9tails suppl\u00e9mentaires pour votre articles (Cat\u00e9gorie pour cat\u00e9goriser l\u2019article, \u00e9tiquette pour taguer l\u2019articles, image mise en avant pour mettre une image d\u2019aper\u00e7u \u00e0 l\u2019article, etc.)
\n4- Acc\u00e8s aux outils d\u2019\u00e9ditions de WordPress. Si vous avez besoin de liste, cliquez sur liste. Si vous avez besoin d\u2019\u00e9crire un titre, cliquez sur titre<\/p>\n
P a g e | 28<\/p>\n
\u2022 Apr\u00e8s avoir finit de r\u00e9diger l\u2019article, vous cliquez sur publier. Vous aurez le choix entre publiez imm\u00e9diatement ou pr\u00e9voir une date ult\u00e9rieure de publication (Voir zone encercl\u00e9e).<\/p>\n
<\/p>\n
\u2022 La section suivante media est notre galerie. C\u2019est l\u2019endroit qui contiendra l\u2019ensemble des images, vid\u00e9os, audios, fichiers \u00e0 utiliser sur votre site. Autrement dit l\u2019ensemble de vos m\u00e9dias transiteront d\u2019abord par la m\u00e9diath\u00e8que avant d\u2019\u00eatre exploiter sur le site.<\/p>\n
Si l\u2019on voudrait ins\u00e9rer une image dans notre site on doit d\u2019abord l\u2019ajouter \u00e0
\nnotre m\u00e9diath\u00e8que.
\nPour l\u2019ajouter, on clique sur Ajouter.<\/p>\n
\u2022 Puis on clique sur t\u00e9l\u00e9verser des fichiers, on choisit l\u2019image qu\u2019on
\nveut ins\u00e9rer et on valide.<\/p>\n
\u2022 La section page liste les pages cr\u00e9\u00e9es. Pour ajouter une nouvelle page,
\ncliquez sur Ajouter<\/p>\n
\u2022 Vous \u00eates redirig\u00e9 vers l\u2019espace d\u2019\u00e9dition de la page.
\nVous donnez un nom \u00e0 votre page. Dans mon cas, ma page sera
\nnomm\u00e9e accueil. Vous pouvez saisir du contenu un peu comme je vous
\nl\u2019avais montr\u00e9 dans la section cr\u00e9ation d\u2019articles.<\/p>\n
Puis vous cliquez Publier.<\/p>\n
Petit rappel : Cliquez sur l\u2019ic\u00f4ne W pour revenir au niveau de votre tableau de bord.
\nP a g e | 30<\/p>\n
\u2022 La section commentaire permet de g\u00e9rer les commentaires faites sur vos articles par les internautes. Lisez par vous-m\u00eame.<\/p>\n
\u2022 La section apparence est importante.<\/p>\n
Et dans cette section, deux \u00e9l\u00e9ments vont nous int\u00e9resser pour le moment :
\nTh\u00e8me et Menu. On en reviendra sur le reste plus tard.<\/p>\n
C\u2019est quoi Un Th\u00e8me ?
\nUn th\u00e8me dans WordPress d\u00e9finit l’esth\u00e9tique, le design de notre site.<\/p>\n
C\u2019est le th\u00e8me m\u00eame qui pr\u00e9d\u00e9finis l’architecture du site.<\/p>\n
Pour \u00eatre beaucoup plus explicite.
\nSupposez que votre h\u00e9bergement est votre terrain (Votre parcelle comme on
\nle dit). Apr\u00e8s avoir achet\u00e9 votre terrain vous allez y construire une maison (le
\nsite web). Mais au lieu de construire la maison de bout en bout, vous allez
\nacheter une maison (un th\u00e8me) que vous venez d\u00e9poser sur votre terrain \u263a.<\/p>\n
(En vrai on ne vend pas de maison \u00e0 d\u00e9placer sur un terrain hein \u263a).<\/p>\n
C\u2019est en cela il existe des th\u00e8mes gratuits et payant (avec plus de fonctionnalit\u00e9s)<\/p>\n
– Essayer d\u2019activer un autre th\u00e8me et allez y actualiser votre site ; vous verrez que le design\u00a0 va changer
\n– Maintenant r\u00e9actualis\u00e9 le th\u00e8me initial \u263a.
\n\u2022 Apr\u00e8s avoir cliquez sur Ajouter, vous serez redirig\u00e9
\n– Et\u00a0 vous pouvez voir de milliers de th\u00e8me (Vous avez une multitude de choix)
\n– Vous pouvez rechercher des th\u00e8mes sp\u00e9cifique (zone encercl\u00e9e en vert.
\n– Ou vous pouvez importer un th\u00e8me d\u00e9j\u00e0 t\u00e9l\u00e9charger (Zone encercl\u00e9e en rouge (On y reviendra).<\/p>\n
\u2022 Revenons s\u2019en \u00e0 la section suivante (Le Menu).
\nJ\u2019esp\u00e8re que vous savez ce qu\u2019on appel un menu.<\/p>\n
Il nous permet tout simplement de naviguer de page en page.<\/p>\n
Et pour faire afficher un menu, c\u2019est tr\u00e8s simple !
\n– Zone1 : Donnez un nom au menu. Ex : Menu Principal
\n– Zone2 : Cliquez sur cr\u00e9er menu
\n– Zone3 : Cliquez sur voir toutes les pages (\u00e7a affichera la
\nliste des pages que vous avez eu \u00e0 cr\u00e9er).
\n– Zone4 : Cochez les cases que vous voulez faire afficher dans votre menu du site.
\n– Zone5 : Cliquez sur ajouter au menu.
\n– Zone6 : Vous pouvez ajouter des liens personnalis\u00e9s ou liens des articles dans votre menu aussi
\n– Et enfin en bas cliquez sur Enregistrer le menu
\n\u2022 Gestion du positionnement du menu<\/p>\n
Comment ? : Vous maintenez enfoncer la page \u00e0 d\u00e9placer \u00e0 l\u2019aide de la clique
\ngauche de votre souris et vous le d\u00e9placer \u00e0 l\u2019endroit convenu et vous
\nrel\u00e2cher. C\u2019est tout.<\/p>\n
P a g e | 33<\/p>\n
Si vous remarquez des d\u00e9calages d\u2019espacements, c\u2019est que vous cr\u00e9ez l\u00e0 des
\nsous-menus.
\nVous pouvez aussi modifier le nom des menus en cliquant simplement sur ce
\ndernier et mettez le nom qui vous convient.<\/p>\n
\u2022 Voici mon menu affich\u00e9<\/p>\n
\u2022 La section suivante concerne les extensions.
\nLes extensions sont tr\u00e8s capitales dans la construction d\u2019un site id\u00e9al.
\nWordPress. Il permet de donner des fonctionnalit\u00e9s suppl\u00e9mentaires
\nau site.
\nEx : Si notre site a besoin de formulaire cherchera \u00e0 ajouter une
\nextension qui g\u00e8re les formulaires. On en parlera plus d\u2019avantage lors de la section cr\u00e9ation de site.<\/p>\n
\u2022 La section compte vous permet d\u2019afficher tous ceux qui ont acc\u00e8s \u00e0 la
\nmodification de notre site. Dans ce cas vous serez le seul avec un r\u00f4le administrateur.
\nP a g e | 34<\/p>\n
<\/p>\n
\u2022 Vous pouvez ajouter d\u2019autre personnes pour la modification de votre
\nsite avec des r\u00f4les sp\u00e9cifiques
\nPour ajouter quelqu\u2019un vous demandez son email et son nom.<\/p>\n
Vous remplissez tous les champs de la page Ajouter compte.<\/p>\n
Arriv\u00e9 tout en bas, vous lui attribuez un r\u00f4le. N\u2019oubliez pas d\u2019enregistrer.<\/p>\n
\u2022 La section R\u00e9glage G\u00e9n\u00e9rale nous permet d\u2019apporter quelque
\nmodification g\u00e9n\u00e9rale \u00e0 notre site. Vous pouvez visiter voir.
\nP a g e | 35<\/p>\n
\u2022 Voici encore cette page dans la section R\u00e9glage qu\u2019il ne faut pas
\nn\u00e9gliger<\/p>\n
Elle nous permet de d\u00e9finir la page d\u2019accueil (Donc la premi\u00e8re page
\nque les visiteurs verront en acc\u00e9dant \u00e0 votre site web) et la page blog
\n(cette page sera configurer de mani\u00e8re \u00e0 cr\u00e9er l\u2019architecture d\u2019une page ).<\/p>\n
Ce qu\u2019il convient de faire est de cocher page statique et de s\u00e9lectionner la page qui sera votre l\u2019accueil et la page sui sera la page des articles.<\/p>\n
Vous enregistrez enfin les modifications en bas.<\/p>\n
Voil\u00e0 que tout est dit, nous pouvons maintenant passer \u00e0 la pratique.<\/p>\n
Pour le cadre pratique, nous allons nous amuser \u00e0 cr\u00e9er un site
\nvitrine, un blog, et vous initier \u00e0 la configuration d\u2019un site e-commerce.<\/p>\n
P a g e | 36<\/p>\n
PRATIQUE<\/p>\n
Cr\u00e9ation d\u2019un site Vitrine<\/p>\n
Rappel : Un site vitrine est un site Web qui pr\u00e9sente en ligne les produits ou
\nles services d’une organisation, d\u2019une entreprise, dans le but d’attirer
\nsimplement l’attention et \u00e9veiller l’int\u00e9r\u00eat des internautes de passage, le
\nplus souvent sans permettre d’acheter directement le produit ou le service
\npropos\u00e9<\/p>\n
Fonctionnalit\u00e9s :
\n– Une page d\u2019Accueil
\n– Une page A propos
\n– Une page Nos services
\n– Une page Blog
\n– Une page Contact
\nComme vous l\u2019avez remarqu\u00e9 j\u2019ai int\u00e9gr\u00e9 en m\u00eame temp Le Blog. Donc pour
\ncette pratique on ne cr\u00e9era plus de site blog \u00e0 part. Tout compte la
\nm\u00e9thodologie reste la m\u00eame si l\u2019on veut cr\u00e9er un site Blog
\nOn attaque !!!!!!<\/p>\n
Installation de th\u00e8me<\/p>\n
Pour y arriver nous allons aller \u00e0 la chasse des th\u00e8mes, choisir, installer et
\nactiver le th\u00e8me qui nous convient.
\nNous allons alors nous rendre dans la section th\u00e8me-\u2192Ajoute\u2192Et on fait le
\nchoix du th\u00e8me. Pour ce cadre moi j\u2019ai choisi Colibri WP. Vous pouvez faire
\nune recherche rapide (1). Ensuite cliquer sur installer.
\nP a g e | 37<\/p>\n
Apr\u00e8s l\u2019installation activez le th\u00e8me(ci-dessous).<\/p>\n
Configuration du th\u00e8me
\nApr\u00e8s avoir activ\u00e9 le th\u00e8me, on est redirig\u00e9 vers une page de configuration<\/p>\n
L\u00e0 ! \u00e7a nous propose de choisir les mod\u00e8les. Vous avez le choix entre plusieurs mod\u00e8les. Ensuite cliquez
\n. L\u2019installation de la d\u00e9mo (La d\u00e9mo est en fait la mise en place du th\u00e8me
\nde notre site). Elle prend entre 02 \u00e0 20 min. Cel\u00e0 d\u00e9pend du th\u00e8me.<\/p>\n
La d\u00e9mo est install\u00e9e. Pour commencer la modification on clique sur 01 et sur 02 pour voir le site.
\nP a g e | 38<\/p>\n
Et si on allait voir comment le site se pr\u00e9sente cette fois.<\/p>\n
Vous remarquez d\u00e9j\u00e0 que notre site commence par prendre forme. Content
\nn\u2019est-ce pas \u263a ?.<\/p>\n
Bien tout ce qui vous reste \u00e0 faire, c\u2019est de modifier le menu, les images les textes et d\u2019ajouter les fonctionnalit\u00e9s manquantes.
\nAvant qu\u2019on ne continue, je vous arr\u00eate un instant. \u263a<\/p>\n
Vous \u00eates sans doute press\u00e9 de finir votre premier site web mais il faut que je vous notifie ceci : La page qui vient apr\u00e8s activation d\u2019un th\u00e8me d\u00e9pends de chaque
\nth\u00e8me. Alors ne soyez pas \u00e9tonn\u00e9 de d\u00e9couvrir des th\u00e8mes avec des
\nconfigurations diff\u00e9rentes. Parfois la configuration peut-\u00eatre plus complexe.
\nDonc pour cela, il faut faire r\u00e9f\u00e9rence \u00e0 la documentation. Si vous voulez
\nvraiment faire carri\u00e8re en d\u00e9veloppement WordPress, il faut d\u00e9velopper un
\nesprit intuitif.<\/p>\n
Bien ! si tout est compris, allons modifier notre site.
\nPour ce cadre je vous montrerai comment les modifications se font, et d\u00e9butera la modification du template avec.<\/p>\n
Cependant avec votre
\ngrande intelligence vous pourriez finir la modification compl\u00e8te.<\/p>\n
Essayons de travailler de mani\u00e8re optimale :
\n– Nous allons d\u2019abord ajouter les pages manquantes
\n– Ajuster le menu
\n– Editer les pages.
\nP a g e | 39<\/p>\n
1- Ajouter les pages manquantes<\/p>\n
Conform\u00e9ment \u00e0 ce qui a \u00e9t\u00e9 pr\u00e9vu on avait besoin de 05 pages. D\u00e9j\u00e0 ici nous
\nvoyons trois pages.<\/p>\n
Nous pouvons d\u00e9j\u00e0 prendre la page Front-page comme Accueil, la page Blog comme Blog.<\/p>\n
Il nous reste la page A propos, Service
\net Contact. Pour les ajouter, on se rendra dans la section page \u2192Ajouter<\/p>\n
Vous mettez le titre et un petit paragraphe en bas puis publiez.
\nVous faites de m\u00eame pour les autres pages (Service et Contact) pour le moment.
\nA la fin j\u2019obtiens \u00e7\u00e0 apr\u00e8s avoir actualiser mon site (figure ci-dessous)<\/p>\n
P a g e | 40<\/p>\n
Il est temps de faire le m\u00e9nage du menu (ordonner le menu comme convenue et supprimer les inutiles).<\/p>\n
Pour cela, on va se rendre dans la
\nsection menu.
\nR\u00e9f\u00e9rez-vous vers la notion de cr\u00e9ation d\u2019un menu pour faire de m\u00eame.
\nA la fin \u00e7\u00e0 donne ceci chez moi(ci-dessous).<\/p>\n
Surtout n\u2019oubliez pas d\u2019enregistrer apr\u00e8s chaque modification.<\/p>\n
Bien ! Nous allons passer \u00e0 la modification des contenus page par page. Pour
\nce cas comme je vous l\u2019avais annonc\u00e9 \u00ab Je vous montrerai comment vous pouvez modifier les premi\u00e8res sections. Le reste c\u2019est \u00e0 vous de vraiment le faire \u00bb.<\/p>\n
Edition des pages du th\u00e8me<\/p>\n
Page d\u2019accueil
\nIl y a plusieurs mani\u00e8res de modifier le contenu d\u2019un th\u00e8me dans WordPress.<\/p>\n
Ce qu\u2019il faut comprendre ici c\u2019est que la conception d\u2019un th\u00e8me WordPress d\u00e9pends d\u2019un d\u00e9veloppeur \u00e0 un autre d\u2019o\u00f9 l\u2019int\u00e9r\u00eat de l\u2019esprit intuitif pour modifier un contenu. Tout compte fait, la premi\u00e8re id\u00e9e pour modifier un contenu est au niveau de la personnalisation. Tentons le coups \u263a
\nP a g e | 41<\/p>\n
Apr\u00e8s avoir cliqu\u00e9 vous serez redirig\u00e9 vers une page<\/p>\n
La partie 1 est ce qu\u2019on appelle la section des blocs. C\u2019est cette partie qui permettent l\u2019\u00e9dition des contenus de toute la page juste en cliquant sur l\u2019ic\u00f4ne de param\u00e8tre. (Bonne nouvelle \u263a).
\nLa partie 2 pr\u00e9sente comme vous le site mais cette fois avec des blocs qui
\napparaissent au survole d\u2019un \u00e9l\u00e9ment comme le 3.<\/p>\n
En parlant du trois, au survole on y voit deux ic\u00f4nes de crayons et trois autres
\nicones englob\u00e9es en un.<\/p>\n
On cliquera sur l\u2019ic\u00f4ne en orange et on clique sur le texte. Nous nous apercevons que nous pouvons modifier directement du texte depuis le bloc 3. Essayez !!!<\/p>\n
Pour changer le design des boutons, on survole le bouton et on clique sur le
\ncrayon en orange.
\nComme vous le voyez, on peut modifier le texte du bouton dans la section 1 l\u00e0 o\u00f9 c\u2019est mis Text.<\/p>\n
De m\u00eame pour l\u2019arri\u00e8re-plan du bouton en cliquant sur STYLE
\nP a g e | 42<\/p>\n
Et l\u2019image de l\u2019arri\u00e8re-plan?
\nPour y arriver, survolez simplement l\u2019image et si une ic\u00f4ne appara\u00eet vous cliquez sur le bouton Publier qui se trouve en haut.<\/p>\n
Vous pouvez finir maintenant l\u2019\u00e9dition de la page d\u2019accueil de votre site web.<\/p>\n
A propos
\nComme vous avez du le remarquer la page A propos, service et contact sont
\ndes pages que vous avez-vous m\u00eame ajouter. Ce qui veut dire qu\u2019on doit
\nnous m\u00eame les construire.
\nComment faire ?
\nNormalement on peut continuer l\u2019\u00e9dition dans la zone r\u00e9server pour. Mais
\nnous allons plut\u00f4t utiliser une extension appeler elementor.<\/p>\n
Elementor<\/p>\n
ELEMENTOR est une extension qui nous permet de cr\u00e9er tr\u00e8s rapidement
\ndes templates de page. Elle nous propose plusieurs outils d\u2019\u00e9dition de page
\nPour ce faire, nous allons t\u00e9l\u00e9charger l\u2019extension dans la section Ajouter
\nextension.<\/p>\n
Puis on recherche, installe et active elementor. (ci- dessous).<\/p>\n
Apr\u00e8s activation, vous serez redirig\u00e9s vers un site externe o\u00f9 l\u2019on vous demandera de cr\u00e9er un compte. Bien vous n\u2019\u00eates pas oblig\u00e9 de cr\u00e9er un compte \u00e0 l\u2019imm\u00e9diat.<\/p>\n
Essayez donc de revenir \u00e0 votre tableau de bord en faisant simplement un
\nretour en arri\u00e8re.<\/p>\n
De retour \u00e0 l\u2019accueil, vous verrez appara\u00eetre elementor. Ce qui veut dire que elementor est bien install\u00e9 et activ\u00e9 (Voir ci-contre).
\nCe qui nous concerne ici maintenant c\u2019est de designer notre page A propos. Et pour ce faire, nous allons nous rendre, dans la section page.
\nOn 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\u2019affiche lorsque survole la page.<\/p>\n
P a g e | 44<\/p>\n
1- On supprime le petit paragraphe
\n2- On met \u00e0 jours la page
\n3- Et on clique sur Modifier avec elementor<\/p>\n
Nous serons redirig\u00e9s vers une page d\u2019\u00e9ditions (voir ci-dessous)<\/p>\n
Restez\u00a0 attentif.
\n\u2022 La zone en 1 repr\u00e9sente la section des outils d\u2019\u00e9ditions. On y trouvera des outils comme les listes, les paragraphes, les titres, les boutons, les images, etc.
\n\u2022 La zone 2 est notre espace de travail sinon c\u2019est notre page tout
\nsimplement.
\n\u2022 L\u2019ajout de contenu se fait par bloc superpos\u00e9. Et pour ajouter des blocs
\non cliquera simplement sur le bouton + (3).
\n\u2022 Elementor nous permet d\u2019avoir des mod\u00e8les de page pr\u00e9 construit.
\nil est n\u00e9cessaire de se connecter \u00e0 leur page web (4)
\n\u2022 Et enfin, on enregistre (5) puis on va r\u00e9actualiser notre page A propos.<\/p>\n
\u2026\u2026\u2026\u2026\u2026\u2026\u2026\u2026\u2026\u2026\u2026\u2026\u2026\u2026\u2026\u2026\u2026
\n\u2026\u2026\u2026\u2026\u2026\u2026\u2026\u2026\u2026\u2026\u2026\u2026\u2026\u2026\u2026\u2026..
\nTout d\u2019abord nous allons d\u00e9composer notre maquette.
\n– Un premier bloc qui contient un titre en rouge
\n– Un deuxi\u00e8me bloc avec deux sections. Une section qui contient une image avec le bord arrondi et une seconde section avec long texte.<\/p>\n
Cela dit, on se lance :
\nEn se r\u00e9f\u00e9rant \u00e0 l\u2019image pr\u00e9c\u00e9dente, on clique sur le bouton + (3). Apr\u00e8s
\navoir cliqu\u00e9 sur le bouton nous voyons l\u2019apparition de plusieurs blocs avec
\ndiff\u00e9rentes sections.<\/p>\n
Pour le titre on a besoin que du bloc avec une seule section. Donc vous
\nsavez d\u00e9j\u00e0 l\u00e0 o\u00f9 il faut cliquer(A). Ensuite on cherche l\u2019outil titre (B).
\nPour Ecrire le texte du titre, On maintient enfoncer simplement l\u2019outil et on
\nle d\u00e9place dans le bloc. Simple comme bonjour \u263a. Je vous montre
\nP a g e | 46<\/p>\n
Si vous ne voyez plus les outils
\nd\u2019\u00e9ditions, cliquez simplement sur la
\nzone encercl\u00e9e en haut \u00e0 gauche.
\nApr\u00e8s avoir atteint la zone du bloc, on
\nl\u00e2che la clique et l\u00e0 on peut mettre
\nnotre titre simple<\/p>\n
Comme vous le voyez sur la figure ci-dessous ; J\u2019ai \u00e9crit mon texte dans la
\nzone en 1, puis j\u2019ai centr\u00e9 \u00e7\u00e0 (2). Enfin pour la couleur j\u2019ai cliqu\u00e9 sur le style
\n(3) pour lui donner la couleur rouge. Tout est intuitif. Alors n\u2019h\u00e9sitez pas \u00e0
\nexp\u00e9rimenter:<\/p>\n
Cliquer-deplacer-supprimer-cliquer-deplacer-ainsi-de-suite.
\nC\u2019est comme \u00e7\u00e0 on apprend ; en faisant des erreurs.<\/p>\n
On passe au second bloc. Nous allons cette fois-ci encore cliquer sur le + et
\nchoisir le bloc avec deux sections. Puis on clique sur l\u2019outil image et on
\nd\u00e9place sur la premi\u00e8re section du bloc et de m\u00eame pour notre texte on
\nclique sur l\u2019outil \u00e9diteur de textes pour notre texte.<\/p>\n
\u00c7a donne \u00e7\u00e0 (ci-dessous). Pour changer l\u2019image cliquez simplement l\u00e0 o\u00f9
\nc\u2019est fl\u00e9ch\u00e9 et allez choisir votre image<\/p>\n
Vous pouvez choisir le type de bordure en 1. Si vous voulez appliquer le
\nm\u00eame rayon de bord sur chaque c\u00f4t\u00e9 laissez intact le boutons (2). Et enfin
\nen survolant l\u2019int\u00e9rieur des cases vous verrez des boutons augmenter et
\ndiminuer. Faites vous-m\u00eame le test.<\/p>\n
Et surtout n\u2019oubliez pas d\u2019enregistrer
\nCe la dit, je crois que vous pouvez \u00eatre en mesure de poursuivre le reste. \u00c7\u00e0
\nsera de m\u00eame pour la page service.
\nPage contact
\nLa page contact fera une exception dans sa conception puisqu\u2019il doit y
\ncontenir un formulaire de contact.<\/p>\n
Formulaire de contact<\/p>\n
La fa\u00e7on la plus simple de cr\u00e9er un formulaire est d\u2019utiliser un plugin (une
\nextension) WordPress \u2013 actuellement, il y en a beaucoup. Dans ce cas, nous
\nutiliserons Contact Form 7.<\/p>\n
\u00c9tape 1 \u2013 Installation de Contact Form 7
\nRecherchez Contact Form 7 et s\u00e9lectionnez Installer. Une fois install\u00e9,
\ns\u00e9lectionnez Activer pour activer le plugin sur votre site.<\/p>\n
Etape 2 : Cr\u00e9er votre 1er formulaire avec Contact Form 7
\nCliquez sur la partie \u00ab Cr\u00e9er un formulaire \u00bb. Vous \u00eates renvoy\u00e9 directement
\nvers le formulaire avec les \u00e9l\u00e9ments de Base.
\nDans un premier temps, d\u00e9finissez le titre de votre formulaire et
\nsauvegardez. Dans l\u2019exemple ci-dessous, j\u2019ai d\u00e9cid\u00e9 d\u2019appeler mon formulaire
\n\u00ab Contact \u00bb.<\/p>\n
Avant de s\u2019attaquer au formulaire, nous allons d\u00e9finir :
\n1. Qui recevra une notification de nouveau message et comment
\npersonnaliser celui-ci ?
\n2. Le type de message envoy\u00e9 \u00e0 l\u2019utilisateur en fonction d\u2019un \u00e9v\u00e9nement
\nsp\u00e9cifique (par exemple \u00ab si l\u2019internaute ne remplit pas un champ
\nobligatoire \u00bb)
\n3. Les r\u00e9glages additionnels qu\u2019il est possible de faire. (Rendez-vous sur
\nhttps:\/\/contactform7.com\/additional-settings\/ pour plus d\u2019info)
\nP a g e | 49<\/p>\n
1. Qui recevra une notification de nouveau message et comment
\npersonnaliser celui-ci ?
\nRendons-nous dans le sous-onglet \u00ab Email \u00bb<\/p>\n
Voyons ensemble la correspondance de chacun de ces champs ci-dessus :<\/p>\n
\u00ab Pour \u00bb : d\u00e9finit l\u2019adresse email qui recevra la demande de contact
\n(normalement il s\u2019agit de la v\u00f4tre ou de celle de votre client)
\n\u00ab De \u00bb : d\u00e9finit l\u2019adresse email de l\u2019internaute qui vous contacte. Ce champ
\nutilise le marqueur [your name] mais vous pourriez utiliser aussi [your-
\nemail] pour avoir l\u2019email de l\u2019internaute qui s\u2019affiche en tant qu\u2019\u00e9metteur.
\nDans ce cas c\u2019est mis \u00e0 la fin wordpress@monsite.com. Pensez \u00e0 changer ce
\ndomaine par le lien de votre site
\n\u00ab Sujet \u00bb : d\u00e9finit l\u2019objet de l\u2019email que vous allez recevoir. Ici, j\u2019ai indiqu\u00e9 \u00ab
\nContact \u00bb
\n\u00ab En-t\u00eate additionnels \u00bb : Ils permettent de mettre un ou plusieurs de vos
\ncollaborateurs en copie de l\u2019email que vous recevrez. Vous pouvez \u00e9galement
\nd\u00e9finir un email automatis\u00e9 pour envoyer une copie de son message \u00e0
\nl\u2019internaute.
\n\u00ab Corps du message \u00bb : cette partie vous donne un aper\u00e7u de l\u2019email qui vous
\nsera envoy\u00e9 en fonction des param\u00e8tres que vous aurez d\u00e9fini plus haut. Vous
\npouvez \u00e9galement modifier le corps de ce message directement dans cette
\nfen\u00eatre pour le personnaliser davantage. A titre d\u2019exemple, vous pourriez
\nsimplement indiquer [your-message] puisque les informations du contact
\nseront d\u00e9j\u00e0 dans les champs pr\u00e9d\u00e9finis.
\nP a g e | 50<\/p>\n
\u00ab Exclure les lignes dont la balise d\u2019email est vide \u00bb : permet d\u2019exclure les
\nlignes qui ne seraient pas remplies par l\u2019exp\u00e9diteur de l\u2019email que vous
\nrecevrez.
\n\u00ab Envoyer cet email au format HTML \u00bb : comme son nom l\u2019indique, ce
\nchamp permet de recevoir le message sous format HTML. A priori, vous n\u2019en
\naurez pas besoin.
\n\u00ab Pi\u00e8ce jointes \u00bb : si vous avez demand\u00e9 \u00e0 votre internaute d\u2019envoyer un
\nfichier, alors celui-ci sera joint \u00e0 l\u2019email que vous recevrez. Il vous faudra
\najouter le marqueur du champ de t\u00e9l\u00e9chargement du fichier pr\u00e9sent sur
\nvotre formulaire.
\n\u00ab Email (2) \u00bb : il permet de configurer un mail automatis\u00e9 \u00e0 destination de
\nvos collaborateurs ou de votre internaute. Vous pourrez le personnaliser en
\nindiquant sous combien de temps sa demande sera trait\u00e9e et lui rappeler
\nl\u2019objet de son message. Par exemple :<\/p>\n
<\/p>\n
2. Le type de message envoy\u00e9 \u00e0 l\u2019utilisateur en fonction d\u2019un \u00e9v\u00e9nement
\nsp\u00e9cifique
\nNous allons maintenant d\u00e9finir les messages qui s\u2019afficheront en fonction
\nd\u2019\u00e9v\u00e9nements sp\u00e9cifiques. Par exemple, un email mal renseign\u00e9, une url
\nincoh\u00e9rente, le non-remplissage de champs obligatoires\u2026
\nP a g e | 51<\/p>\n
Rendez-vous sur l\u2019onglet \u00ab message \u00bb :<\/p>\n
<\/p>\n
Personnaliser Contact Form 7
\nNous allons maintenant revenir \u00e0 la rubrique \u00ab formulaire \u00bb pour commencer
\n\u00e0 cr\u00e9er le n\u00f4tre.<\/p>\n
<\/p>\n
\u2022 Vous pouvez ajouter et supprimer des \u00e9l\u00e9ments, selon vos besoins.
\nPour vous aider \u00e0 d\u00e9marrer, essayez avec ces boutons ci-dessous.<\/p>\n
<\/p>\n
\u2022 L\u2019\u00e9toile * indique qu\u2019un champ est obligatoire.
\n\u2022 Lorsque vous \u00eates pr\u00eat, vous pouvez enregistrer vos modifications en
\ncliquant sur Sauvegarder dans le panneau de droite.
\nP a g e | 52<\/p>\n
\u2022 Une fois que le formulaire est sauvegard\u00e9, un code court (en anglais on
\nparle de shortcode) sera affich\u00e9 en haut. Il est surlign\u00e9 en bleu, et il
\nressemble \u00e0 ceci :<\/p>\n
<\/p>\n
\u2022 Pour publier votre formulaire :
\n– S\u00e9lectionnez le shortcode et copiez-le
\n– Collez le shortcode dans la page, la publication ou le widget
\no\u00f9 vous souhaitez que votre formulaire soit affich\u00e9.
\nDans mon cas voil\u00e0 :
\nP a g e | 53<\/p>\n
Voici un peu ce que j\u2019ai comme formulaire.<\/p>\n
<\/p>\n
Donc comme je l\u2019avais dis la configuration d\u2019un th\u00e8me diff\u00e8rent d\u2019un th\u00e8me \u00e0
\nun autre. De m\u00eame il en a des th\u00e8mes d\u2019une complexit\u00e9 de configuration que
\nd\u2019autres. C\u2019est pas pour vous faire peur mais juste pour vous avertir.<\/p>\n
On ne fini jamais d\u2019apprendre mes chers. Au jours le jours il faut se document,
\nle monde de l\u2019informatique est en perp\u00e9tuelle \u00e9volution.<\/p>\n
Voil\u00e0, nous sommes d\u00e9j\u00e0 \u00e0 la fin de notre cours sur Conception de site vitrine
\navec WordPress.<\/p>\n
Pour ce cas typique, nous avons utiliser un th\u00e8me typique parmi tant d\u2019autre.<\/p>\n
Conscient que tout n’ai pas \u00e9t\u00e9\u00a0 montr\u00e9 dans ce cas typique
\nde ce tome1 (Cr\u00e9ation de site vitrine).<\/p>\n
Vous trouverez dans les \u00e9ditons suivantes plus de notion en ce qui concerne la cr\u00e9ation de site vitrine.<\/p>\n