CMS WORDPRESS
CMS WORDPRESS
CMS WORDPRESS
CMS
Dr.BOUKIL
Sommaire de la formation
bjectifs pédagogiques
O
Partie 1 - Introduction à WordPress
1. Objectifs et motivations
2. Découvrir WordPress
2.1- Qu’est-ce qu’un CMS ?
2.2- Que veut dire “open source” ?
2.3- Différence entre WordPress (WordPress.org) et WordPress.com
3. Atouts de WordPress
3.1- La simplicité
3.2- La personnalisation du site
3.3- Les extensions
4. Fonctionnement d’un site web
5. Préparation de l’environnement de travail
5.1- Installer Wamp pour créer un serveur web sur son PC
5.2- Créer une base de données MySQL avec Wamp
5.3- Installer WordPress dans le dossier « www » de Wamp
5.4- Installation de WordPress
Partie 2 - Administration d’un site WordPress
1. Connexion à l’interface d’administration de WordPress
2. Le tableau de bord de WordPress
3. Les articles
3.1- Qu’est ce qu’un article dans WordPress ?
3.2- Qu’est ce qu’une catégorie dans WordPress ?
3.3- Qu’est ce qu’une étiquette dans WordPress ?
3.4- Comment attribuer une catégorie ou une étiquette à un article WordPress ?
4. Les pages
4.1- Comment attribuer une page parente à une page WordPress ?
4.2- Comment attribuer un template personnalisé à une page WordPress ?
5. Les médias
6. Les commentaires
7. L’apparence
7.1- Choisir son thème
7.2- Personnaliser le thème
8. Widgets
8.1- Qu’est ce qu’une sidebar dans WordPress ?
8.2- Qu’est ce qu’un widget dans WordPress ?
9. Menus
10. Les extensions
10.1- La liste des extensions installées sur votre site WordPress
10.2- Comment ajouter une extension dans WordPress ?
11. Les utilisateurs
11.1- Visualiser la liste des utilisateurs
● Utiliser des constructeurs de site en ligne comme e-monsite ou wix.com,
faciles à mettre en œuvre, mais limités dans la personnalisation.
● Toutcoderàlamain;personnalisableàsouhait,maisdemandebeaucoupde
temps et des compétences en langage de programmation.
● Utiliser WordPress quiestunoutilcombinantlibertédepersonnalisationet
assistance pour créer des choses complexes. Ce sera notre option dans ce
cours !
CMS est l’abréviation de Content Management System (système de gestion de
contenu).UnCMSestunlogicielgrâceauquelilestpossibledecréeretdemettreà
jour des sites web. Et tout ça, sans avoir besoin de connaissances techniques en
langage informatique !
Enclair,c’estunoutilquivaoffriruneinterfacepourcréeretgérerlescontenusde
votre site Internet, plutôt que de tout coder à la main.
Il existe une multitude de CMS open source ou payants, mais WordPress est la
solution la plus populaire car il est facile à utiliser et ilregorgederessources,de
guides et de supports.
Le terme open source, ou code source ouvert, s’applique principalement aux
logiciels mais peut aussi être associé aux matériels (plans de conception
Pour résumer, cela veut dire que le code de WordPress est accessible à tous,
gratuitement, et qu’il est possible de contribuer à son évolution.
● WordPressestlenomduCMSopensource.Cen’estpasunesociétéetiln’a
pas de but lucratif ! WordPress, le CMS, se présente sous forme d’un
ensemble de fichiers téléchargeables gratuitement sur WordPress.org, le
site de la fondation WordPress !
● WordPress.com est une solution d’hébergement payante qui reposesurle
CMS WordPress. Il existe d’innombrables solutions autres que
WordPress.compourhébergersonsiteWordPress.Nousverronstoutcelaà
la fin du cours.
3.1- La simplicité
WordPressestbasésurdeuxprincipauxtypesdecontenus:"pages"et"articles",que
vous pouvez utiliser pour créer et organiser le contenu de votre site.
Les "articles" (ou “posts”, en anglais) sont utilisés pour publier du contenu
dynamique, généralement organisé par date, comme un blog. Les "pages" sont
destinées au contenu statique et permanent, tel que l'accueil, ou les pages "À
propos" et "Contact".
WordPressoffredenombreusespossibilitésdepersonnalisationpourcréerunsite
web unique. Vous pouvez choisir parmi des milliers de thèmes (“designs”) pour
modifier l'apparence générale de votre site. Ces thèmes varient en style, en
disposition et en couleurs, ce qui vous permet de donner une identité visuelle
propre à votre site.
Pour aller plus loin, WordPress a mis en place le customizer, un outil intégré à
l’administration qui facilite la personnalisation avancée des éléments du thème
(en-tête, pied de page, modification des polices d’écriture…). Plus récemment,un
éditeur de site a été implémenté afin de pouvoir gérer toutesvospagesenmême
temps.
Une extension WordPress (“plugin”, en anglais), c’est du code tout prêt que l’on
ajouteausitepourluidonnerdenouvellesfonctionnalitésspécifiques,commedes
formulaires de contact, des outils e-commerce, des moyens de paiement, de la
sauvegarde de site, etc. Pour chaque besoin,ilestfaciledetrouverl’extensionqui
convient (gratuite ou payante) et de l’installer en quelques clics via l’interface
d’administration.
N’importe qui peut créer une extension WordPress et même la proposer sur la
bibliothèque officielle WordPress.org. Elleseraalorsdisponiblepourleplusgrand
nombre, sous réserve d’être validée par l’équipe de modération de WordPress.
Pourfonctionner,toutsiteInternets’appuiesurunserveur.Engénéral,onloueun
serveur auprès d’un hébergeur, mais ilesttoutàfaitpossibledecréersonpropre
serveurchezsoi.Leserveurstockelesfichiersquicomposentlesitewebetexécute
le code contenu dans ces fichiers. Dans le cas de WordPress, il s’agit d’un CMS
reposant principalement sur le langage PHP et sur une base de données MySQL.
LeserveurexécutedonclecodePHPdeWordPresspourrécupérerlesinformations
nécessairesenbasededonnéesetgénérerlapageauformatHTML,lisibleparvotre
navigateur web (Google Chrome, Mozilla Firefox, etc.).
Pour créer votre site WordPress, vous aurez donc besoin d’un hébergement
PHP/MySQL.
5.1- Installer Wamp pour créer un serveur web sur son PC
Wamp est un logiciel qui permet d’installer sur votre ordinateur les composants
nécessairespourfairetournerunserveurweb.IlcontientApache,PHPetMySQL.Il
permettra de faire tourner notre site en local.
PourinstallerWamp,riendeplussimple.Ilsuffitdeserendresurlesiteofficielet
de télécharger la dernière version puis de lancer l’installation du logiciel.
Wamp est installé, nous sommes prêts pour passer à l’étape suivante. Pour faire
fonctionner WordPress, il faut créer une nouvelle base de données.
Pour cela, il faut aller dans le menu Wamp puis cliquer sur PhpMyAdmin. Vous
pouvezégalementyaccéderentapant«localhost/phpmyadmin».Cetoutilpermet
de gérer une base de données facilement.
Pourvousconnecter,l’identifiantpardéfautest«root»etiln’yapasbesoindemot
de passe.
Vous n’avez plus qu’à créer une base de données nommée « wordpress ».
Dans le dossier où a été installé Wamp, vous devrieztrouverundossier«www».
C’esticiquevousallezinstallervotresite.Pourcela,vouspouvezcréerundossier«
wordpress » à l’intérieur de celui-ci.
Pour récupérer les fichiers de WordPress, rien de plus simple. Rendez-vous sur
WordPress.orget cliquez sur « Obtenir WordPress ».
Une fois téléchargé et la décompression du fichier zip effectué vous pouvez
déplacer les fichiers dans le dossier précédemment créé.
L’étapefinaleconsisteàlancerl’installationdeWordPresscommeonleferaitpour
une installation classique.
Prenez votre navigateur web préféré et installez WordPress en vous rendant à
l’adresse « http://localhost/wordpress ».
Ici,vousdevezentrerlenomdevotresite,votrenomd’utilisateuradministrateuret
votremotdepasse.Cesidentifiantsvouspermettrontdeseconnecteràl’interface
d’administration. Une fois que c’est fait, appuyez sur le bouton « Installer
WordPress ».
L'installation est complète ! Vous n’avez plus qu’à vous connecter et à administrer
votre blog WordPress !
En vous rendant sur cette url, vous devriez atterrir sur l’écran suivant :
Il ne vous reste plus qu’à mettre votre identifiant et mot de passeadministrateur
(que vous avez défini lors de l’installation) pour vous connecter.
Une fois la connexion réalisée, vous devriez tomber sur le tableau de bord de
WordPress.
Dans WordPress, vous pouvez créer des articles. Si vous cliquez sur la section «
Articles », vous allez atterrir sur un écran listant les articles et vous devriez
retrouver des sous-menus dans le panneau de gauche.
Comme vous pouvez le voir, vous pouvez ajouter des articles via le bouton « ajouter
» et vous pouvez également trier ou rechercher vos articles.
Un article est un ensemble de textes, d’images, de vidéos etc. Les articles sont
publiésparordrechronologique.Typiquement,ilssontsouventutiliséspourcréer
un blog. Vous publiez des articles et ceci s’affichent dans un ordre chronologique
inversé (l’article le plus récent est affiché en haut).
Un article peut être attribué à une ou des catégories et à une ou plusieurs
étiquettes.
Contrairementauxcatégories,lesétiquettesnepeuventpasêtrehiérarchiques.Les
étiquettesserventàrangervosarticlesselondescritèresquevousaurezchoisis.Si
on reprend l’exemple des légumes, on pourrait très bien imaginer un article «
Tomate grappe » avec les étiquettes « rouge » et « ronde ».
En conclusion, si nous faisions un blog surlesfruitsetlégumes,nousutiliserions
les catégories pour classifier nos articles de la manière suivante.
Par exemple :
● Des étiquettes pour la forme du fruit ou légume : « rond », « long » etc.
● Des étiquettes pour la couleur du fruit ou légume : « rouge», « jaune», «vert».
Pourattribuerunecatégorieouuneétiquetteàunarticle,ilsuffitdeserendresur
l’article de votre choix et de regarder dans le menu de droite.
Si vous ne voyez pas le menu de droite, il faut cliquer sur la roue crantée en haut à
droite.
Sivouscliquezsur«Catégories»,lemenudescatégoriess’affichentetvousn’avez
plus qu’à cocher la catégorie de votre choix.
Pourlesétiquettes,c’estlamêmechose,saufquevousaurezunchamppermettant
d’ajouter ou de sélectionner une étiquette.
Lespagessontégalementdesensemblesdetextes,imagesetvidéosmaisellessont
différentes des articles pour plusieurs raisons :
Pour attribuer une page parente à une page, il fautserendresurlapagedevotre
choix et aller dans le menu de droite sur « Document ».
Rendez-vousensuitedans«Attributsdepage»etsélectionnezlapageparentevia
le sélecteur.
Lorsquelethèmedevotresitelepermet,unautreréglageapparaîtdanslemenude
droitedans«Attributsdelapage».Vouspouvezattribuerunmodèlepersonnaliséà
votre page. Un modèle de page (template personnalisé) permet d’afficher la page
avec une mise en page différente.
Lorsque lefichierestuneimagevouspouvezmodifierl’image(celapeut-êtreutile
pour rogner ou redimensionner une image).
Les articles et pages de WordPress peuvent recevoir des commentaires de lapart
des visiteurs de votre site. C’est un bon moyen d’échanger sur les sujets.
7. L’apparence
Le menu apparence est un des menus les plus importants. En effet, c’est dans ce
menu que nous allons pouvoir choisir notre thème, le personnaliser, gérer nos «
sidebars » de widgets, les menus et pouvoir éditer le thème (si l’option est
disponible).
Si vous cliquez dans le sous-menu « Thèmes », vous allez pouvoir visualiser
l’ensemble des thèmes installés sur votre site WordPress.
Sivouscliquezsurl’onglet«Personnaliser»vousallezvousretrouversurunécran
comme ci-dessous :
Le sous-menu widgets permet de gérer les sidebars et d’y ajouter des widgets.
Surcetécran,vousavezlalistedeswidgetsàgaucheetlalistedessidebarsàdroite.
Dansl’exempleci-dessus,onpeutvoirqu’ilyadeuxsidebarsquisontaffichésdans
le footer.
Pourajouterdeswidgetsàunsidebar,ilsuffitdeglisser/déposerunwidgetdansun
sidebar.Unefoislewidgetgreffédanslasidebar,celui-cipeutcontenirdesréglages
permettant de personnaliser son affichage.
DansWordPress,unesidebarestunemplacementdanslequelonpeutvenirgreffer
des widgets. Les sidebars sont affichées à des endroitsprécisd’unthème(dansle
footer, sur un côté etc.).
Un widget est un bloc qui affiche des données dans un sidebar. Par exemple, le
widget « HTML personnalisé » peut afficher du code HTML. Le widget « Articles
récents » lui, affiche les derniers articles de votre blog WordPress.
9. Menus
Dans WordPress, votre thème peut prévoir l’utilisation de menus. Comme les
sidebars,lesmenuss’affichentàdesendroitsbienprécisduthème.Parexemple,il
peut y avoir un menu pour le header et un menu pour le footer.
Pourcréerunmenu,ilfautcliquersurlelien«créezunnouveaumenu»enhautde
l’écran. Vous pouvez également sélectionner un menu existant via le sélecteur lui
aussi en haut de l’écran.
Pourajouterdesliensàunmenu,ilfaututiliserlepanneaudegauche.Ilrenferme
la liste des pages, articles, catégories vers lesquelles vous pouvez faire des liens.
Vous pouvez également créer des liens personnalisés. Une fois votre lien
sélectionné, il faut cliquer sur « Ajouter au menu ».
WordPress est reconnue pour sa grande communauté et le nombre d’extensions
disponibles pour ajouter des fonctionnalités.
Lorsque vous cliquez sur le menu « Extensions », vous trouverez une liste dans
laquelle apparaît toutes les extensions installées sur votre site WordPress.
Pour ajouter une extension, il suffit de cliquer sur le menu « Extensions » puis «
Ajouter » en haut à gauche à côté du titre.
Vous arrivez alors sur une page regroupant les extensions populaires.
Pour ajouter une extension dont vous avez entendu parler, le plus simple est
d’utiliser le moteur de recherche en haut à droite. Il faut taper un mot clé puis
Unefoisquevousaveztrouvévotreextension,ilvousresteàcliquersur«Installer
».L’extensions’installe.Unefoisinstalléunbouton«Activer»apparaît.Vousdevez
cliquer sur ce bouton pour activer l’extension.
● Abonné : ne peut rien faire sur le site à part gérer son profil
● Contributeur:peutécrireetmodifiersesarticlesmaisnepeutpaslesmettre
en ligne
● Auteur : peut publier et gérer ses articles
● Éditeur : peut publier et gérer les articles et pages de tous les utilisateurs
● Administrateur : peut avoir accès à toutes les fonctionnalités du site
Lorsque vouscliquezsur«Utilisateurs»danslemenu,vousavezaccèsàuneliste
quiaffichetousvosutilisateurs.Quandvouspassezlasourissurunutilisateur,vous
pouvez alors le modifier ou l’afficher.
● Optionspersonnelles:voustrouverezdesréglagespourparamétrerl’éditeur
de code, les couleurs de l’administration ainsi que les raccourcis, barre
d’outils et la langue du site.
● Nom : vous trouverez les réglages concernant le nom de l’utilisateur, son
identifiant, pseudonyme et le nom à afficher sur le site
● Informationsdecontact:voustrouverezleréglagesdel’adressee-mailainsi
que le site web
● A propos de vous : vous trouverez un champ permettant de mettre votre
biographie et une image d’illustration de votre profil
● Gestion de compte : c’est ici que vous pourrez modifierlemotdepassede
l’utilisateur.
Pour créer un utilisateur, vous devez cliquer sur « Ajouter » dans le menu «
Utilisateurs ». Rien de bien sorcier ici,ilsuffitderemplirlesdifférentschampset
de cliquer sur « Ajouter un utilisateur » pour créer un nouvel utilisateur.
C’esttrèsutilesivousvoulezexporterlecontenudevotresiteetl’importerdansun
autre. Cela permet également de sauvegarder votre site web.
Pour utiliserlesimportateurs,vousdeveztoutd’abordlesinstallerencliquantsur
le lien « Installer » en dessous du nom de la plateforme.
Pour importer les données, cliquez sur « Choisir un fichier » puissélectionnezle
fichier XML de l’autre site. Cliquez sur « Téléverser et importer le fichier ».
Vous vous retrouvez sur l’écran suivant :
Dans le sous-menu « Santé du site », vous retrouverez un écran affichant des
indicateurs techniques sur l’état de votre site. Il faut le surveiller de temps en
temps pour éviter de potentielles failles de sécurité.
Une autre fonction utile notamment dans le cadre légal de la RGPD ! WordPress
vous permet d’exporter et d’effacer les données d’un utilisateur.
Pour cela, rendez-vous dans « Outils » puis « Exporter les données ».
Pour exporter les données d’un utilisateur, il suffit de taper son adresse de
messageriedanslechampetd’envoyerlademande.Vouspourrezalorstélécharger
une archive zip qui contient les donnéesdel’utilisateur.Poureffacerlesdonnées,
procéder de la même manière dans le sous-menu « Effacer les données ».
● Catégoriespardéfautdesarticles:lacatégoriequiseraaffectéepourchaque
article
● Format par défaut des articles : WordPress propose différent type de post
format, vous pouvez choisir le format par défaut des posts.
● Publier par e-mail : un écran de paramétrage permettant de définir une
adressee-mailsurlaquelletouslesmessagesenvoyésseronttransformésen
post WordPress
● Lapaged’accueilaffiche:unréglagepourdéfinircequedoitafficherlapage
d’accueil, soit une liste des derniers articles, soit une page.
● Les pages du site doivent afficher au plus x articles
● Le flux de syndication affichent les derniers x éléments
● Dans chaque publication du flux, inclure : l’extrait du post ou l’article
complet
● Visibilitépourlesmoteursderecherche:est-cequelesitedoitêtreindexer
par les moteurs de recherche ? Oui ou non
● Taille des images : permet de régler les largeurs et hauteurdesdifférentes
tailles d’images
● Envoidesfichiers:permetd’organiserlesdossiersdemédiasenmensuelet
annuel
● Structure des permaliens : permet de définir la structure des urls du site
● Préfixe des catégories
● Préfixe des étiquettes