Vous êtes sur la page 1sur 19

CMS WordPress

Support de cours et mode demploi


Plus dinfos sur nos formations ?
www.lacouleurduzebre.com

Support de cours et mode demploi pour le CMS WordPress

Retrouvez)notre)le)plan)de)formation)sur)http://www.lacouleurduzebre.com/formation:cms:
wordpress:creer:et:administrer:un:site:web.html

Agence de communication la couleur du Zbre - Mise jour Aot 2015 - Page 1/19

CMS WordPress
Support de cours et mode demploi
Plus dinfos sur nos formations ?
www.lacouleurduzebre.com

Sommaire
I.)Prambule)/)prsentation)du)CMS)WordPress)
II.)Installation)du)CMS)
III.)Connexion))ladministration)et)prsentation)de)linterface)
IV.)Structure)des)contenus)dun)site)avec)Wordpress)
V.)Les)pages)
VI.)Les)articles)
VII.)Les)commentaires)
VIII.)Lditeur)WYSIWYG)
IX.)La)mdiathque)
X.)Les)comptes)utilisateurs))
XI.)Lapparence)
XII.)Extensions)
XIII.)Outils)et)rglages)

Agence de communication la couleur du Zbre - Mise jour Aot 2015 - Page 2/19

CMS WordPress
Support de cours et mode demploi
Plus dinfos sur nos formations ?
www.lacouleurduzebre.com

I. Prambule
Prsentation)
Accessible pour les dbutants grce une interface trs intuitive,
WordPress est galement trs agrable et efficace pour une utilisation professionnelle.
Wordpress est rput pour son ergonomie, sa simplicit dutilisation. Sa logique de gestion de contenu permet
daccder rapidement linformation diter et dajouter des lments larborescence.
WordPress permet de raliser nativement de simples blogs mais galement des sites plus consquents grce de
nombreuses extensions qui garantissent un trs bon rfrencement et une bonne monte en charge. Il permet de faire
des boutiques de vente en ligne ou encore des sites multilingues complexes.

Un CMS gratuit, OpenSource et en constante volution avec son poque.


Sa trs forte notorit et sa grande communaut en font un outil vivant et mis lpreuve depuis de longue date ce qui
lui assure une prennit avec des mises jours automatiques et rgulires selon les normes du web et pour une
scurit renforce.
La dure de vie de votre site se trouve aussi garantie, la communaut sur laquelle lon peut sappuyer est une
assurance.

La richesse en fonctionnalits et extensions (plus de 18 000) ainsi que le grand nombre de thmes
gratuits, personnalisables et dans le design du moment en ont fait le CMS le plus utilis ces dernires annes pour la
ralisation de blogs et sites dentreprises.

NB : Nous considrons ce stade que le participant dispose dj dun hbergement et


dun nom de domaine ou dune application de serveur local de type WAMP, EasyPHP, XAMP.
Cette documentation ne prsente pas les principes de fonctionnement dun CMS, ni laccs
lhbergement du site via un logiciel FTP, sa base de donnes ou encore laccs linterface de
gestion du serveur local et ses dossiers. Ces derniers points font lobjet dune autre formation.

Agence de communication la couleur du Zbre - Mise jour Aot 2015 - Page 3/19

CMS WordPress
Support de cours et mode demploi
Plus dinfos sur nos formations ?
www.lacouleurduzebre.com

II. Installation du CMS Wordpress


1.)Tlchargez)le)CMS)Wordpress)en)version)franaise)sur)https://fr.wordpress.org/)
2.)Dcompressez)le)fichier)en)extension).zip)et)transfrez)les)fichiers)sur)votre)espace)FTP.)
3.)Saisissez)ladresse)de)votre)site)web)dans)un)navigateur)pour)installer)le)CMS.)
En arrivant la racine de votre site web, une page de bienvenue vous demande de vous munir des informations
suivantes pour la connexion votre base de donnes :
1/ Nom de la base de donnes
2/ Nom dutilisateur MySQL
3/ Mot de passe de lutilisateur
4/ Adresse de la base de donnes
5/ Prfixe de table (si vous souhaitez avoir plusieurs WordPress sur une mme base de donnes)
Les 4 premires informations vous sont fournies par lhbergeur. Concernant le prfixe vous pouvez conserver celui
propos par Wordpress ou le changer sil ne sagit pas de la premire installation du CMS sur lhbergement.
NB : Si vous disposez dun serveur local, lidentifiant et le mot de passe vous sont donns dans la documentation du
logiciel. Une nouvelle base de donnes peut-tre cre via lapplication web PhpMyAdmin.

4.)Connexion))la)base)de)donnes)MySQL)

Lcran suivant vous permet de saisir les informations et dinstaller le CMS dans la base de donnes.

Agence de communication la couleur du Zbre - Mise jour Aot 2015 - Page 4/19

CMS WordPress
Support de cours et mode demploi
Plus dinfos sur nos formations ?
www.lacouleurduzebre.com

5.)Informations)de)base)

Ltape suivante consiste saisir votre titre de site, un identifiant et un mot de passe pour vous connecter ladministration du
CMS ainsi quune adresse email.

Votre&CMS&est&maintenant&install,&vous&pouvez&vous&connecter&&ladministration&!

Agence de communication la couleur du Zbre - Mise jour Aot 2015 - Page 5/19

CMS WordPress
Support de cours et mode demploi
Plus dinfos sur nos formations ?
www.lacouleurduzebre.com

III. Connexion linterface dadministration et prsentation de


linterface
1.)Connexion)
Pour vous connecter linterface dadministration galement appele backoffice il vous suffit dajouter /wp-admin
ladresse de votre site web, par exemple : www.mondomaine.fr/wp-admin

Vous pouvez alors saisir votre identifiant et mot de passe.

2.)Linterface)dadministration)

Une fois connect, vous arrivez sur le tableau de bord.

Dans la colonne de gauche se trouve le menu de navigation permettant daccder aux diffrentes fonctionnalits de
gestion du site.
Dans le coin suprieur gauche se trouve le titre de votre site accompagn dun pictogramme de maison, ce bouton
vous permet daccder linterface publique de votre site.
Votre identifiant est affich dans le coin suprieur, en cliquant sur celui-ci vous pouvez vous dconnecter ou modifier
votre compte.
La partie centrale de la page Tableau de bord vous donne un aperu de lactivit du site et vous donne accs
diffrentes fonctionnalits.

Agence de communication la couleur du Zbre - Mise jour Aot 2015 - Page 6/19

CMS WordPress
Support de cours et mode demploi
Plus dinfos sur nos formations ?
www.lacouleurduzebre.com

IV. Structure des contenus dun site avec Wordpress


Le CMS WordPress permet de publier diffrents types de contenus :
Page : Une page permet de prsenter du contenu statique, par exemple prsentation de lentreprise, horaires
douverture. Elle contient du texte et des images, dispose dun titre et dune URL ainsi que de diffrents paramtres de
publication. Les pages saffichent dans le menu principal. Une page peut tre dfinie comme page enfant dune autre
(appele par parent) ce qui permet de raliser diffrents niveaux darborescence et des menus droulants par
exemple.
Article : Un article est utilis pour prsenter des informations classer par date ou par thmatique. Chaque article est
associ une ou plusieurs catgories. Ce type de contenu est utilis pour crer des actualits et blogs. Il contient du
texte et des images, dispose dun titre et dune URL ainsi que de diffrents paramtres de publication. Les articles ne
saffichent pas dans le menu principal.
Catgorie : La catgorie permet de regrouper des articles selon une mme thmatique. Elle est compos dun titre,
dune description et est accessible partir dune URL afin de lister tous les articles quelle contient. Une catgorie peut
avoir une catgorie parent.
Commentaire : Un commentaire peut tre associ une page ou un article. Le commentaire est rdig par
linternaute et est approuv, supprim ou modifi par les administrateurs.

Agence de communication la couleur du Zbre - Mise jour Aot 2015 - Page 7/19

CMS WordPress
Support de cours et mode demploi
Plus dinfos sur nos formations ?
www.lacouleurduzebre.com

V. Les pages
Liste)des)pages)
En cliquant sur le menu Pages un tableau contenant la liste de toutes les pages du site saffiche.
Vous pouvez crer une nouvelle page partir du bouton Ajouter . En survolant une ligne les options suivantes sont
disponibles : Modifier , Modification rapide (accs la modification de quelques champs depuis la liste),
Mettre la corbeille ou Afficher la page dans linterface du site web. Il est possible de raliser une action
groupe en cochant des pages et en slectionnant laction dans le menu droulant Actions groupes .

Liste des pages

Modifier)ou)ajouter)une)page)

Formulaire de modification ou dajout dune page

Les champs du formulaire pour lajout dune page sont identiques aux champs de modification dune page.
La page est constitue dun titre, dun permalien (URL, adresse de la page), dune zone de texte avec diteur
WYSIWYG (voir VIII), dun tat (publi, attente de relecture, brouillon), dune visibilit (public, protg par mot de
passe, priv), dune date de publication, dune page parent, dun ordre dans le menu ainsi quune image la une
(affiche ou non selon le thme graphique).

Agence de communication la couleur du Zbre - Mise jour Aot 2015 - Page 8/19

CMS WordPress
Support de cours et mode demploi
Plus dinfos sur nos formations ?
www.lacouleurduzebre.com

VI. Les articles


Liste)des)articles)
En cliquant sur le menu Articles un tableau affichant la liste de tous les articles du site saffiche.
Vous pouvez crer un nouvel article partir du bouton Ajouter . En survolant une ligne les options suivantes sont
disponibles : Modifier , Modification rapide (accs la modification de quelques champs depuis la liste),
Mettre la corbeille ou Afficher larticle dans linterface du site web. Comme pour toutes les listes dans
Wordpress, vous pouvez effectuer des filtres et recherches.

Liste des articles

Agence de communication la couleur du Zbre - Mise jour Aot 2015 - Page 9/19

CMS WordPress
Support de cours et mode demploi
Plus dinfos sur nos formations ?
www.lacouleurduzebre.com

Modifier)ou)ajouter)un)article)

Formulaire de modification ou dajout dun article

Larticle est constitu des lments suivants :


- un titre,
- un permalien (URL, adresse de la page),
- une zone de texte avec diteur WYSIWYG (voir VIII),
- un tat (publi, attente de relecture, brouillon),
- une visibilit (public, protg par mot de passe, priv),
- une date de publication,
- un format (permet dafficher le contenu de larticle de manire diffrente en fonction du sujet trait, par exemple,
changer la couleur du fond de larticle en fonction du format ou ajouter un pictogramme diffrent pour chacun),
- une slection de catgories et la cration de catgories,
- une liste dtiquettes (mots cls permettant une navigation transversale)
- une image la une (affiche ou non selon le thme graphique).
Les champs du formulaire pour lajout dun article sont identiques aux champs de modification dun article.

Agence de communication la couleur du Zbre - Mise jour Aot 2015 - Page 10/19

CMS WordPress
Support de cours et mode demploi
Plus dinfos sur nos formations ?
www.lacouleurduzebre.com

VII. Les commentaires


Liste)des)commentaires)
En cliquant sur le menu Commentaires un tableau prsentant la liste de tous les commentaires du site saffiche.
En survolant une ligne les options suivantes sont disponibles Dsapprouver , Rpondre , Modification rapide
(accs la modification de quelques champs depuis la liste), Modifier , Indsirable et Corbeille . Les
actions groupes sont disponibles pour les commentaires cochs.
Les options dactivation et de modration des commentaires sont dfinir dans le menu Rglages.

Liste des commentaires

Modifier)un)commentaire)
Chaque champ du commentaire peut-tre modifi par un administrateur : Nom, E-mail, Adresse web, Texte, Etat et
Date de publication.

Modifier un commentaire

Agence de communication la couleur du Zbre - Mise jour Aot 2015 - Page 11/19

CMS WordPress
Support de cours et mode demploi
Plus dinfos sur nos formations ?
www.lacouleurduzebre.com

VIII. Lditeur WYSIWYG


Lditeur visuel de mise en forme du texte est appel WYSIWYG (What You See Is What You Get). Il est semblable
un diteur de suite bureautique, le texte mettre en forme doit tre surlign avant de slectionner une des options.
Loption Texte permet de saisir du code HTML.

Lditeur de mise en forme WYSIWYG

Vous disposez des options suivantes de la gauche droite :


-

Gras,
Italique,
Barr,
Liste puce,
Liste numrote,
Citation,
Barre horizontale,
Alignement gauche,
Centr,
Alignement droite,
Ajouter un lien,
Supprimer un lien,
Ajouter un bouton Lire la suite ,
Afficher la deuxime ligne doptions,
Slection du format de texte : paragraphe ou titre de niveau 1 6,
Soulign,
Justifi,
Choix de la couleur du texte,
Coller du texte,
Effacer le formatage,
Insrer des caractres spciaux,
Diminuer lindentation et rduire lindentation,
Annuler et rtablir,
Aide.

Agence de communication la couleur du Zbre - Mise jour Aot 2015 - Page 12/19

CMS WordPress
Support de cours et mode demploi
Plus dinfos sur nos formations ?
www.lacouleurduzebre.com

IX. La bibliothque
Liste)de)mdias)
La bibliothque est disponible partir du menu principal de ladministration ou partir du bouton Ajouter un mdia
lors de ldition dune page ou dun article. La bibliothque permet de stocker des images et fichiers sur le site web
puis de les insrer dans un article ou une page partir du bouton Insrer en base de la fentre.

Liste des mdias dans la bibiliothque

Aprs avoir slectionn un mdia dans la liste, une colonne de droite saffiche. Elle prsente des informations sur le
fichier (date dupload, poids, dimensions) ainsi que son adresse web (chaque mdia est class dans un dossier du
mois contenu lui-mme dans un dossier de lanne).
Il est galement possible de dfinir un titre, une lgende, un texte alternatif (pour malvoyant et pour les moteurs de
recherche), une description et un alignement et une taille daffichage.
Le champ lier permet de faire un lien vers depuis l'image miniature vers sa propre version en taille relle. Vous
pouvez galement dfinir ici un lien vers une page web ou un autre site.
Le bouton Envoyer des fichiers permet duploader des fichiers depuis son ordinateur, tablette ou mobile.

Agence de communication la couleur du Zbre - Mise jour Aot 2015 - Page 13/19

CMS WordPress
Support de cours et mode demploi
Plus dinfos sur nos formations ?
www.lacouleurduzebre.com

Modifier)une)image)
Depuis la colonne de droite de dtail dun fichier, un lien Modifier limage donne accs une diteur dimages.

Fentre de modification dune image.

Cration)dune)galerie)
Les options de retouche sont le redimensionnement, le recadrage (dans la copie dcran un recadrage est effectu sur
le logo dans limage), la rotation et la symtrie. Une extension vous permettra de raliser un diaporama plein cran
partir dune galerie.

Crer une galerie avec miniature

Agence de communication la couleur du Zbre - Mise jour Aot 2015 - Page 14/19

CMS WordPress
Support de cours et mode demploi
Plus dinfos sur nos formations ?
www.lacouleurduzebre.com

X. Les comptes utilisateurs


Liste)des)comptes)
A partir du menu Utilisateurs du backoffice vous accdez la liste des comptes de utilisateurs.
En cliquant sur lidentifiant dun utilisateur vous accdez ldition de son profil. Vous pouvez galement crer un
nouveau compte via le bouton Ajouter .

Liste des comptes des utilisateurs

Edition)dun)compte)
Le compte dun utilisateur est compos dun identifiant et dun mot de passe (obligatoires pour la connexion), dun
email (obligatoire afin de recevoir des notifications), dun nom, prnom et dun site web. Il est galement indispensable
dattribuer chaque utilisateur un rle afin de lui donner diffrents droits dans la gestion du site.
Le dtail des droits par rle est dfini sur cette page du Codex de WordPress :
https://codex.wordpress.org/R%C3%B4les_et_Permissions
Les diffrents rles sont rsums ainsi :
Administrateur : Personne qui a accs toutes les fonctions d'administration.
Editeur : Personne qui peut rdiger et publier des billets mais aussi grer les billets d'autres personnes.
Auteur : Personne qui peut rdiger et publier ses propres billets.
Contributeur : Personne qui peut rdiger et grer ses propres billets mais qui ne peut pas les publier.
Souscripteur : Personne qui peut lire et envoyer des commentaires mais qui peut galement recevoir les
newsletters. Source : codex.wordpress.org

Edition ou ajout dun compte utilisateur

Agence de communication la couleur du Zbre - Mise jour Aot 2015 - Page 15/19

CMS WordPress
Support de cours et mode demploi
Plus dinfos sur nos formations ?
www.lacouleurduzebre.com

XI. Lapparence
Les)thmes)
Lun des grands avantages de WordPress est la flexibilit et le grand nombre de thmes facilement activables pour
son site web. Le thme correspond linterface graphique de votre site web. Il est compos de fichiers HTML, CSS et
dimages. Vous pouvez donc trs simplement changer et personnaliser le design de votre site.
A partir du menu Apparence vous accdez au menu Thmes qui vous affichera les thmes dj tlchargs
sur votre site. Le premier thme prsent est celui actuellement activ sur votre site web.
Pour tlcharger un nouveau thme il vous suffit de cliquer sur Ajouter et deffectuer une recherche parmi les
milliers de thmes proposs. En slectionnant un thme WordPress va automatiquement tlcharger les fichiers
ncessaires, vous pourrez alors activer ce nouveau thme.

Liste des thmes dj tlchargs, celui de gauche est activ

Personnalisation)dun)thme)
La plupart des thmes sont personnalisables, vous pouvez ainsi modifier certains paramtres de linterface graphique.
Le nombre et le type dlment personnalisables est variable en fonction de chaque thme. La personnalisation dun
thme se fait partir du menu Personnaliser dans Apparence . Le sous niveau Widgets donne galement
accs la modification de zones et lajout de fonctionnalits dans linterface publique.

Personnalisation des couleurs dun thme

Agence de communication la couleur du Zbre - Mise jour Aot 2015 - Page 16/19

CMS WordPress
Support de cours et mode demploi
Plus dinfos sur nos formations ?
www.lacouleurduzebre.com

Menu)personnalis))
Nous avons vu plus haut que le menu principal et ses sous niveaux sont uniquement composs de pages, les sous
niveaux tant crs en attribuant des pages parents certaines pages.
Il existe une autre mthode plus souple pour crer des menus. A partir de Menus dans Apparence , vous
accdez un diteur de menu que vous composez librement partir de pages, catgories, liens personnaliss vers
des pages de votre site ou dautres sites.

Edition dun menu personnalis

Pour composer un menu, slectionnez les lments dans la colonne de gauche puis cliquez sur ajouter pour les voir
apparatre dans la structure droite. Vous pouvez changer lordre de ce menu et crer des sous niveaux en effectuant
un dragn drop. En cochant Emplacements du thme : Menu principal , vous remplacez ainsi le menu existant
compos juqu prsent de pages.

Agence de communication la couleur du Zbre - Mise jour Aot 2015 - Page 17/19

CMS WordPress
Support de cours et mode demploi
Plus dinfos sur nos formations ?
www.lacouleurduzebre.com

XII. Extensions
WordPress permet dinstaller des extensions. Ce sont des fonctionnalits supplmentaires celles prsentes
initialement dans le CMS, par exemple, la gestion de formulaires de contact, la vente de produits en ligne,
loptimisation de la scurit de loutil, etc. Ces extensions en grand nombre sont dveloppes par la communaut
dutilisateurs de WordPress et fond de ce CMS un outil trs riche en fonctionnalits.
Pour afficher les extensions dj tlcharges (actives et dsactives) rendez-vous dans le menu Extensions
Un bouton Ajouter vous permettra de faire une recherche parmi les extensions disponibles sur Internet.

Liste des modules dj installs, activs et dsactivs.

Une fois lextension tlcharge il faudra lactiver puis la configurer partir de la liste des extensions.

Agence de communication la couleur du Zbre - Mise jour Aot 2015 - Page 18/19

CMS WordPress
Support de cours et mode demploi
Plus dinfos sur nos formations ?
www.lacouleurduzebre.com

XIII. Outils et rglages


Outils)
Le menu Outils vous propose de raliser des exports et des imports de la base de donnes. Les exports sont une
bonne solution pour sauvegarder vos pages (les fichiers de la bibliothque sont sauvegarder via un accs FTP).
Limport permet de rcuprer des contenus effacs ou modifis par erreur.

Menu Outils

Rglages)
De nombreuses options de rglage du CMS sont disponibles dans ce menu,.
Vous pourrez entre autre :

Modifier le titre et ladresse du site,


Dfinir la pagination des listes darticles dune catgorie,
Paramtrer la gestion des commentaires et les dsactiver,
Dfinir les formats par dfaut des images,
Activer la rcriture dURL,
Etc.

Menu Rglages

Agence de communication la couleur du Zbre - Mise jour Aot 2015 - Page 19/19