Propulsez Votre Site Avec WordPress

Sauf mention contraire, le contenu de cet ouvrage est publi sous la licence :
Creative Commons BY-NC-SA 2.0

La copie de cet ouvrage est autorise sous rserve du respect des conditions de la licence
Texte complet de la licence disponible sur : http : //creativecommons.org/licenses/by-nc-sa/2.0/fr/
OpenClassrooms 2014 - ISBN : 979-10-90085-74-9
Mentions lgales :
Conception couverture : Amalgam Impression
Illustrations chapitres : Amalgam Impression
Avant-propos
vec lavnement dInternet et du Web 2.0 depuis plusieurs annes, de plus en
plus dutilisateurs dcident de se lancer dans laventure de la cration dun site
Internet personnel ou professionnel. Cette activit est accessible tous, mais
attention, il est important de partir avec les bons outils !
WordPress a t cr pour aider des utilisateurs sans connaissance technique particulire mettre en place un blog moindre cot, tout en ayant un aspect et une utilisation
professionnels. Il est facile daccs, polyvalent, extensible grce de nombreux modules.
De plus, WordPress est fiable puisque que le logiciel existe depuis plus de dix ans. En
dpit de la croyance populaire, WordPress nest pas ddi qu la cration de blogs,
mme si cest l son orientation principale. Il est tout fait possible de raliser un
site vitrine pour votre entreprise par exemple. Loutil est parfaitement adapt cette
utilisation.
Cette accessibilit se traduit par la simplicit dajout de nouvelles fonctionnalits pour
les dveloppeurs web. WordPress est construit de faon pouvoir tre personnalis.
Ainsi chaque site peut tre compltement diffrent dun autre et proposer son contenu
sous une forme trs loigne de son voisin.
Si vous cherchez crer votre site en un rien de temps, il y a de grandes chances que
WordPress soit loutil quil vous faut !
Que vous soyez un nouvel arrivant dans lunivers de WordPress, un utilisateur averti
dsirant aller plus loin ou bien tout simplement en soif de connaissance sur cet outil,
ce livre est fait pour vous. La premire partie de ce livre ne demande aucun prrequis
particulier. Des connaissances basiques avec le langage de programmation PHP vous
aideront aborder sereinement les chapitres suivants.
Quallez-vous apprendre en lisant ce livre ?

Ce livre est compos de trois parties abordant chacune un aspect diffrent de Wordpress,
afin de faire voluer vos comptences au fil de votre lecture.
1. Prendre en main WordPress : entrez dans lunivers de WordPress facilement
avec les premiers chapitres qui vous prsenteront les fonctionnalits qui soffrent
vous en tant que webmaster. Nous crirons des articles, apprendrons grer
i
CHAPITRE 0. AVANT-PROPOS
les contributions dautres utilisateurs, puis nous personaliserons votre blog avec
une nouvelle apparence et des modules cres par la communaut pour que ce
site sadapte vos besoins.
2. Dvelopper votre thme : la seconde partie du cours consiste creuser le
fonctionnement interne de WordPress pour que vous soyez capable de crer le
thme que vous souhaitez sur votre site. Nous serons donc appels crire du
code PHP pour adapter WordPress nos besoins et obtenir un site votre
image.
3. Dvelopper un plugin complet : dans un troisime temps, nous verrons pas
pas comment dvelopper un plugin installer sous WordPress. Les plugins fournissent aussi bien des fonctionnalits daffichage spcifiques vos visiteurs, que
de nouvelles options pour ladministrateur du site. la fin de cette partie, vous
serez capable de modifier ou de crer quasiment nimporte quel fonctionnement
dans WordPress.
4. Exploiter votre site : une fois que votre site est prt recevoir ses premiers
visiteurs, il reste une chose importante faire : le mettre en ligne sur Internet.
Dans cette partie, vous apprendrez comment vous y prendre pour que votre site
soit visible sur la toile et pour que vos visiteurs soient toujours plus nombreux.
Comment lire ce livre ?

Suivez lordre des chapitres
Lisez ce cours comme on lit un roman. Il a t conu pour cela.
Contrairement beaucoup de livres techniques o il est courant de lire en diagonale et
de sauter certains chapitres, il est ici trs fortement recommand de suivre lordre du
cours, moins que vous ne soyez dj un peu expriments.
Pratiquez en mme temps

Pratiquez rgulirement. Nattendez pas davoir fini de lire ce livre pour allumer votre
ordinateur et faire vos propres essais.
Utilisez les codes web !

Afin de tirer parti dOpenClassrooms dont ce livre est issu, celui-ci vous propose ce
quon appelle des codes web . Ce sont des codes six chiffres saisir sur une page
dOpenClassrooms pour tre automatiquement redirig vers un site web sans avoir
en recopier ladresse.
Pour utiliser les codes web, rendez-vous sur la page suivante :
http://www.openclassrooms.com/codeweb
ii
REMERCIEMENTS
Un formulaire vous invite rentrer votre code web. Faites un premier essai avec le code
ci-dessous :

Tester le code web
B
Code web : 123456

Ces codes web ont deux intrts :
ils vous redirigent vers les sites web prsents tout au long du cours, vous permettant ainsi dobtenir les logiciels dans leur toute dernire version ;
ils vous permettent dafficher les codes sources inclus dans ce livre, ce qui vous
vitera davoir recopier certains programmes un peu longs.
Ce systme de redirection nous permet de tenir jour le livre que vous avez entre les
mains sans que vous ayez besoin dacheter systmatiquement chaque nouvelle dition.
Si un site web change dadresse, nous modifierons la redirection mais le code web
utiliser restera le mme. Si un site web disparat, nous vous redirigerons vers une page
dOpenClassrooms expliquant ce qui sest pass et vous proposant une alternative.
En clair, cest un moyen de nous assurer de la prennit de cet ouvrage sans que vous
ayez faire quoi que ce soit !
Remerciements
Je tiens adresser mes chaleureux remerciements aux personnes qui ont rendu possible
la cration de ce livre.
Nazli Isikli et Jonathan Baudouin pour mavoir accompagn au fil de la ralisation de cet ouvrage.
Mes amis et proches qui ont particip la relecture en me donnant leurs prcieux
avis.
Lquipe dOpenClassrooms, qui dveloppe et maintient le site.
Vous, lecteurs, qui tes la raison dtre de ces pages.
iii
CHAPITRE 0. AVANT-PROPOS
iv
Table des matires
Avant-propos
Quallez-vous apprendre en lisant ce livre ? . . . . . . . . . . . . . . . . . . . .
Comment lire ce livre ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
ii
Suivez lordre des chapitres . . . . . . . . . . . . . . . . . . . . . . . . .
ii
Pratiquez en mme temps . . . . . . . . . . . . . . . . . . . . . . . . . .
ii
Utilisez les codes web ! . . . . . . . . . . . . . . . . . . . . . . . . . . . .
ii
Remerciements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
iii
Prendre en main WordPress
1 Dcouvrir WordPress
1
3
Prsentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Historique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Fonctionnalits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Mise en place du serveur web . . . . . . . . . . . . . . . . . . . . . . . . . . .
Quest-ce quun serveur ? . . . . . . . . . . . . . . . . . . . . . . . . . . .
Sur Windows : WAMP . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Sur Mac : MAMP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Sur Linux : LAMP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
10
Cration de la base de donnes . . . . . . . . . . . . . . . . . . . . . . .
10
TABLE DES MATIRES

Tlchargement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
11
Paramtrage de linstallation . . . . . . . . . . . . . . . . . . . . . . . .
11
Linterface dadministration . . . . . . . . . . . . . . . . . . . . . . . . . . . .
13
2 Les publications
Les articles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
18
Gestion des articles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
18
Catgories et mots-cls . . . . . . . . . . . . . . . . . . . . . . . . . . . .
19
Les pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
21
Les attributs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
21
Le menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
22
Crer un menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
22
Organiser les menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
23
Les mdias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
24
Insertion dans un article . . . . . . . . . . . . . . . . . . . . . . . . . . .
25
Grer les mdias non utiliss . . . . . . . . . . . . . . . . . . . . . . . . .
27
3 Grer un site participatif
29
Les commentaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
30
Activer ou non les commentaires . . . . . . . . . . . . . . . . . . . . . .
30
Les options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
31
Modrer les commentaires . . . . . . . . . . . . . . . . . . . . . . . . . .
32
Les utilisateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
34
Gestion des utilisateurs . . . . . . . . . . . . . . . . . . . . . . . . . . .
34
Les rles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
34
Cration dutilisateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
35
4 Modifier lapparence
vi
17
37
Changer de thme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
38
Ajouter un thme via ladministration . . . . . . . . . . . . . . . . . . .
39
Utiliser un thme tlcharg . . . . . . . . . . . . . . . . . . . . . . . . .
39
Ajouter des widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
40
Placer un nouveau widget . . . . . . . . . . . . . . . . . . . . . . . . . .
40
Dsactiver un widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
41
TABLE DES MATIRES

5 TP : Crez vos premires pages
Prsentation de lexercice . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
46
Consignes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
46
Correction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
47
Le thme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
49
La page de prsentation personnelle . . . . . . . . . . . . . . . . . . . .
49
Larticle dintroduction . . . . . . . . . . . . . . . . . . . . . . . . . . . .
49
Le menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
51
Les widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
51
6 Ajouter des plugins
II
45
53
Grer les plugins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
54
Installer de nouveaux plugins . . . . . . . . . . . . . . . . . . . . . . . .
54
Mise jour dun plugin . . . . . . . . . . . . . . . . . . . . . . . . . . .
55
Exemples de plugins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
56
qTranslate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
56
Hupso Share Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
58
NextGEN Gallery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
59
Dvelopper votre thme
7 Premiers pas dans le code
61
63
Utiliser la documentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
64
La structure de WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . .
64
Systme de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
64
La base de donnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
65
Le principe des actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
65
Thorie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
65
Les fonctions utilises . . . . . . . . . . . . . . . . . . . . . . . . . . . .
66
WordPress et la programmation oriente objet . . . . . . . . . . . . . . . . .
66
Retour en arrire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
66
Et votre code dans tout a ? . . . . . . . . . . . . . . . . . . . . . . . . .
67
8 Les thmes
Structure dun thme
69
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
70
vii
TABLE DES MATIRES

Le fichier styles.css . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
70
Un premier fichier PHP . . . . . . . . . . . . . . . . . . . . . . . . . . .
70
Un fichier courant : functions.php . . . . . . . . . . . . . . . . . . . . . .
72
Hritage de thme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
72
Dclaration du thme enfant
. . . . . . . . . . . . . . . . . . . . . . . .
72
Surcharge de fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
73
Ajouter une zone de widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . .
74
Enregistrer la zone . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
75
Afficher les widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
75
Une mthode alternative : des widgets sans zone . . . . . . . . . . . . .
75
Ajouter un menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
76
Dclaration du menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
76
Laffichage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
77
9 Le processus de rendu
La boucle de rendu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
80
Les templates tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
80
Rendu dun contenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
80
Les filtres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
82
Appeler un filtre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
83
Brancher un filtre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
83
Ajouter des templates personnaliss . . . . . . . . . . . . . . . . . . . . . . .
84
10 Linternationalisation
87
Les fonctions de traduction . . . . . . . . . . . . . . . . . . . . . . . . . . . .
88
Traduire un texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
88
Le domaine de traduction . . . . . . . . . . . . . . . . . . . . . . . . . .
89
Ajouter des traductions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
89
Utiliser Poedit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
89
Utiliser les traductions dans un thme . . . . . . . . . . . . . . . . . . .
92
11 TP : Personnalisez votre thme
viii
79
95
Prsentation de lexercice . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
96
Consignes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
96
Indications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
97
TABLE DES MATIRES

Correction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
97
Dclarer les emplacements du menu et du widget . . . . . . . . . . . . .
97
Gestion des lments affichs . . . . . . . . . . . . . . . . . . . . . . . .
97
Corrig type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
99
III
Dvelopper un plugin complet
12 Crer des plugins
103
105
Dclarer le plugin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106

Nos premires fonctions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Rajouter un filtre simple . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Utiliser une structure objet . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Une structure multifichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Un plugin complet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Les objectifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
La classe Zero_Newsletter . . . . . . . . . . . . . . . . . . . . . . . . . . 110
13 Crer des widgets
113
Dclarer un widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114

Une nouvelle classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Les paramtres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Le rendu final . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
14 Modifier la base de donnes
119
Excuter des requtes SQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

Crer une nouvelle table . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Tracer lactivation du plugin . . . . . . . . . . . . . . . . . . . . . . . . . 121
La dsactivation et la dsinstallation du plugin . . . . . . . . . . . . . . 121
Linsertion et la slection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
15 Ladministration
125
Ajouter des menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126

Menu principal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Les sous-menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Crer des options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
ix
TABLE DES MATIRES

Le fonctionnement des options . . . . . . . . . . . . . . . . . . . . . . . 130
Le formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Gnration automatique des champs . . . . . . . . . . . . . . . . . . . . 132
Traiter des actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
16 Les shortcodes
139
Utiliser un shortcode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140

Format . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Paramtres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Crer un shortcode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
IV
Exploiter votre site
17 Mettre en production
145
147
Sur un hbergement mutualis . . . . . . . . . . . . . . . . . . . . . . . . . . 148

Sur un serveur ddi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Installation et copie des fichiers . . . . . . . . . . . . . . . . . . . . . . . 148
Dfinition du Virtual Host . . . . . . . . . . . . . . . . . . . . . . . . . . 149
18 Amliorer le rfrencement
151
Des URLs propres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152

Un contenu de qualit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Faciliter lindexation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Le sitemap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Les robots . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
19 Optimiser les performances
155
Utiliser le cache WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156

Optimiser laffichage des pages . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Cacher les ressources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Fusionner les fichiers JS et CSS . . . . . . . . . . . . . . . . . . . . . . . 157
Premire partie
Prendre en main WordPress
Chapitre
Dcouvrir WordPress
Difficult :
Ce premier chapitre introductif sera loccasion de dcouvrir ce quest WordPress et ce quil
nous permet de raliser. Nous en profiterons aussi pour linstaller et faire un rapide survol
des fonctionnalits dans son interface dadministration.
CHAPITRE 1. DCOUVRIR WORDPRESS
Prsentation
Introduction
WordPress est un logiciel libre principalement spcialis dans la cration de blogs, dont
la ralisation est trs facile. Cest cependant loin dtre sa seule possibilit et rien ne
vous empchera de crer un site diffrent.
Ainsi, il est bon savoir que WordPress est un CMS (Content Management System
ou Systme de Gestion de Contenu en franais), cest--dire quil permet lutilisateur
(cest--dire ladministrateur du site) de crer facilement des pages de contenu, comme
par exemple :
la page de prsentation dune entreprise ;

des articles de blog ;
une page de contact ;
un portfolio pour un artiste ;
bien encore des fiches produits sur un site de vente en ligne ;
etc.
Lide dun CMS est de donner la possibilit de facilement crer du contenu sur le site,
sans avoir mettre les mains dans le code ni mme avoir de connaissances techniques
particulires.
Historique
WordPress est sorti pour la premire fois en 2003 comme un projet driv de cafelog,
lui-mme tant un moteur de blog sorti en 2001. De nombreuses versions sont sorties
depuis, chacune apportant son lot de nouveauts par rapports aux versions prcdentes,
comme les plugins, les widgets, les thmes, une interface utilisateur amliore. . . La
version 3 est sortie en 2010 en apportant notamment la gestion des menus, de nouvelles
fonctions pour grer len-tte du site ainsi que le support du multisite (cest ce qui
permet davoir plusieurs sites sur une mme instance de WordPress).
Fonctionnalits
WordPress est crit en PHP, un langage de programmation spcialis dans la cration
de sites Internet. Ce langage permet donc aux dveloppeurs de rajouter des fonctionnalits qui pourront tre rutilises par dautres utilisateurs. Il est donc facile modifier
si vous avez de bonnes bases dans ce langage.
Lune des grandes forces de WordPress est ainsi la multitude de plugins disponibles,
dvelopps par la communaut. Ce sont des modules permettant dajouter des fonctionnalits WordPress, comme par exemple la cration dune galerie photo ou la
gestion dune newsletter. Il y en a aujourdhui plus de 25 000 plugins sur le site officiel,
wordpress.org. Il y a donc fort parier que, si vous cherchez une fonctionnalit supplmentaire pour votre site, un plugin existe dj pour cela ! Si cela ntait pas le cas,
4
MISE EN PLACE DU SERVEUR WEB

vous pouvez bien entendu dvelopper le votre et ventuellement le publier.
La renomme de WordPress dans le monde du blogging est telle quil existe mme un
site ddi, que vous retrouverez sur le code web suivant :

Le site wordpress.com
B
Code web : 252527

ne pas confondre avec le site officiel WordPress qui se termine en .org. Il vous
permet de crer votre blog WordPress sans vous occuper de son hbergement ou de son
installation. Tout est gr automatiquement, vous navez qu crer votre contenu. Vous
navez en revanche pas directement la main sur le code et il sera ncessaire de passer
par linstallation de thmes ou de plugins pour faire des modifications fonctionnelles.
Mise en place du serveur web

Quest-ce quun serveur ?
Pour fonctionner, tout site Internet sappuie sur un serveur qui se charge denvoyer les
pages un visiteur qui en fait la demande. Le serveur est un programme qui excute le
code du site web (crit en PHP dans le cas de WordPress) pour gnrer et envoyer la
page au format HTML, lisible par un navigateur Web (Safari, Google Chrome, Mozilla
Firefox, etc.). Pour utiliser WordPress, vous devrez donc obligatoirement en utiliser
un ! Le serveur le plus utilis pour PHP sappelle Apache, il est totalement gratuit et
peut fonctionner sur nimporte quel environnement (Windows, Linux ou Mac), mais il
en existe dautres, parfois payants.
De plus, le serveur web fonctionne le plus souvent conjointement une base de donnes,
qui permet de stocker les informations spcifiques votre site : le contenu des pages, les
utilisateurs inscrits, la configuration. . . Tout ce qui change dun site lautre est potentiellement stock lintrieur sous la forme de plusieurs tableaux de donnes. MySQL
est un systme de base de donnes trs connu et rpandu, car il est totalement gratuit
et compatible avec une majorit dapplications, cest pourquoi nous allons lutiliser.
Un serveur web et la base de donnes peuvent sinstaller sur nimporte quelle machine,
mme votre ordinateur personnel. Cela permet notamment de faire des tests localement,
sans que votre site soit en ligne ; on parle alors dinstallation locale . Il faut
toujours commencer par une installation locale lorsque vous prenez en main un outil,
afin de limiter la porte des erreurs que vous pourriez faire en dbutant. Si vous faites
des erreurs alors que votre site est en ligne, nimporte quel visiteur pourra le voir,
tandis que vous tes seul y avoir accs tant que le site reste sur votre ordinateur
personnel.
Sur Windows : WAMP

Si vous tes sous Windows, vous pouvez utiliser WAMP. Cest un programme qui
contient un serveur Apache ainsi quune base de donnes MySQL sur votre ordinateur.
5

Vous pouvez tlcharger WAMP sur le code web suivant :

Le site officiel WAMP
B
Code web : 659586

Ce site propose plusieurs versions diffrentes du logiciel. Si vous ne savez pas laquelle
choisir pour votre ordinateur, vous pouvez choisir la premire de la liste qui fera a
priori parfaitement laffaire.
Une fois le paquet tlcharg, lancez linstallation en conservant les options par dfaut,
ce qui devrait crer un dossier c :\wamp sur votre ordinateur. Vous pouvez vrifier que
WAMP fonctionne correctement avec licne qui doit safficher dans la barre des tches
(voir la figure 1.1).
Figure 1.1 Apparition de licne de WAMP dans la barre des tches

Ouvrons maintenant un navigateur et tapons dans la barre dadresse, lurl du site
indiqu sur le code web suivant. Il correspond ladresse du serveur web prsent sur
la figure 1.2).

http
://localhost/
B
Code web : 820589
Figure 1.2 La page daccueil de WAMP

Si vous obtenez bien cette page, votre serveur web est oprationnel et prt faire
tourner WordPress !
6
Sur Mac : MAMP

Pour les systmes sous Mac OS X, il existe le logiciel MAMP, qui installe lui aussi tous
les programmes qui nous seront ncessaires. Vous pouvez le tlcharger directement en
passant par le lien indiqu sur le code web suivant :

Le logiciel MAMP
B
Code web : 983144

Commencez par extraire larchive .zip puis excutez le fichier .pkg pour lancer linstallation (voir la figure 1.3).
Figure 1.3 Linstallation MAMP sur Mac

Une fois MAMP install, vous pouvez le lancer depuis le dossier Applications >
MAMP de votre ordinateur. La fentre qui souvre indique le statut des serveurs
Apache et MySQL. Sil sont arrts, cliquez sur dmarrer les serveurs pour voir le
statut passer au vert (voir la figure 1.4).
Ouvrez ensuite la fentre Prfrences . Dans longlet Ports , cliquez sur le bouton
Ports par dfaut dApache et de MySQL . Puis, dans longlet Apache , vous
pouvez choisir le dossier dans lequel vous placerez les diffrents sites sur votre ordinateur
Je vous conseille de choisir le dossier Sites qui doit dj exister dans votre rpertoire
personnel
Vous pouvez valider les modifications, puis vous rendre sur la page indique sur le code
web suivant :

http
://localhost/MAMP/
B
Code web : 220398
Figure 1.4 Dmarrage des serveurs
Figure 1.5 Les ports dApache et MySQL sont mis jour

La page daccueil MAMP propose sur la figure 1.6, vous permet de afin de vrifier le
bon fonctionnement du serveur.
Figure 1.6 La page daccueil de MAMP
Sur Linux : LAMP

Si vous utilisez un systme Linux comme Ubuntu ou Debian, le plus simple est dinstaller les diffrents paquets contenant Apache, PHP et MySQL. Lancez donc la commande
suivante dans une console :
sudo apt - get install apache2 php5 mysql - server libapache2 - mod php5 php5 - mysql
Lensemble des paquets doit sinstaller sans problme. Lors de linstallation de MySQL,
la console vous demandera dentrer un mot de passe dont vous devrez vous souvenir
pour vous connecter la base de donnes, ne loubliez pas ! Installez ensuite phpMyAdmin avec la ligne de commande suivante.
sudo apt - get install phpmyadmin
Linvite de commande vous demandera dans un premier temps de choisir le serveur

configurer pour phpMyAdmin, choisissez Apache, puis validez la cration dune base
de donnes ltape suivante. Enfin, vous devrez entrer le mot de passe choisi linstallation de MySQL pour que le paquet puisse crer sa propre base de donnes.
Une fois linstallation termine, rendez-vous ladresse indique sur le code web suivant :
9

B http ://localhost/
Code web : 820589

Une page de confirmation, comme la figure 1.7, doit safficher.
Figure 1.7 La page daccueil sur Linux
Installation
Cette partie vous concerne si vous souhaitez installer WordPress sur un environnement
local (aprs avoir install un serveur Apache sur votre ordinateur) ou bien sur un
serveur ddi chez un hbergeur, ce qui vous permettrait de mettre votre site en ligne
en grant votre serveur seul. Si vous choisissez de crer votre blog sur le site officiel
de WordPress, tout ce que vous aurez faire est de vous inscrire, et tout sera install
automatiquement.
Cration de la base de donnes

Avant de continuer, nous allons devoir crer la base de donnes pour que WordPress
puisse stocker les informations spcifiques notre site. Pour cela, nous devons accder
linterface de phpMyAdmin ladresse indique sur le code web suivant :

Linterface de phpMyAdmin
B
Code web : 206573

Si vous utilisez MAMP, rendez-vous ladresse indique sur ce code web :

Linterface de phpMyAdmin
B via MAMP
Code web : 792898

Identifiez-vous avec le login root et un mot de passe vide (si cela ne fonctionne pas, le
mot de passe est probablement root , notamment sur MAMP) afin darriver sur linterface de gestion de la base de donnes. Cliquez en haut de la page sur longlet Base
de donnes , puis choisissez un nom de base de donnes (par exemple WordPress )
sur la page qui saffiche (voir la figure 1.8).
Validez par un clic sur Crer , puis passez ltape suivante.
10
INSTALLATION
Figure 1.8 Crer la base de donnes dans phpMyAdmin
Tlchargement
Les sources de WordPress sont rcuprables sur le site fr.wordpress.org directement
depuis la page daccueil. Vous rcuprez un fichier .zip (ou .tar.gz) contenant un dossier
intitul wordpress que vous devez dcompresser dans le rpertoire racine de votre
serveur web. Par exemple :
C :/wamp/www sous windows avec WAMP
/var/www sur Ubuntu/Debian
/Users/[nom]/Sites avec MAMP
Une fois le dossier en place, nous pouvons aller ladresse indique dans le code web,
afin de passer ltape suivante.

http
://localhost/wordpress
B
Code web : 107442
Paramtrage de linstallation
Si vous allez directement sur lURL de votre site, vous obtenez une page derreur
indiquant que WordPress a besoin dun fichier wp-config.php pour fonctionner (voir la
figure 1.9).
partir de l, vous pouvez soit cliquer sur le bouton vous proposant de crer automatiquement un fichier de configuration en remplissant les informations de votre base de
donnes, soit crer ce fichier la main. Dans le premier cas, il faudra que votre serveur
web ait les droits dcriture la racine de votre site pour pouvoir gnrer le fichier.
11
Figure 1.9 Le fichier wp-config.php est manquant

Suivre linstallation automatique
Si vous suivez les tapes dinstallation proposes par WordPress, il vous suffit de vous
laisser guider et de renseigner les informations de connexion votre base de donnes.
Si vous navez fait aucune modification particulire, le login sera nouveau root et il
ny aura pas de mot de passe (laissez le champ vide). Une fois les donnes correctement
remplies, WordPress va crer pour vous le fichier de configuration ainsi que les tables
ncessaires dans la base de donnes.
Si les informations de connexion sont correctes (comme sur la figure 1.10), vous devriez
pouvoir procder la finalisation de linstallation.
Figure 1.10 La configuration de la base de donnes est correcte
Crer le fichier wp-config.php

Il est aussi possible de crer le fichier de configuration la main en se basant sur le
fichier wp-config-sample.php situ la racine de votre installation. Il suffit pour cela
de copier le fichier en le renommant wp-config.php, puis de modifier les informations
de connexion lintrieur du fichier.
12
LINTERFACE DADMINISTRATION
Quelle que soit la mthode que vous avez choisie pour installer WordPress, toute modification ultrieure des informations de connexion la base de donnes devra se faire
en ditant le fichier wp-config.php.
Une fois cette tape franchie, vous pouvez choisir un titre pour votre site, dfinir votre
nom dutilisateur ainsi quun mot de passe et votre email. Validez. Votre site est prt
recevoir ses premiers contenus (voir la figure 1.11) !
Figure 1.11 Linstallation est termine
Linterface dadministration
Vous pouvez accder linterface dadministration via lURL indique sur le code web
suivant :

Linterface dadministration
B
Code web : 168651

Identifiez-vous avec le nom et le mot de passe fournis pendant la phase dinstallation
Avant de plonger dans lensemble des fonctionnalits offertes par votre CMS, il est bon
de commencer par vous familiariser avec son interface.
Le menu est partag en trois section :
le tableau de bord ;
les contenus ;
les paramtres du site.
Le tableau de bord est une page affichant des informations gnrales sur lensemble
du site. On peut y trouver des statistiques, un fil dactualit sur WordPress, la liste
13
Figure 1.12 Linterface de connexion WordPress

des commentaires rcents. . . Cest sur cette page (voir la figure 1.13) que vous arrivez
lorsque vous vous connectez linterface.
Figure 1.13 Laccueil du panneau dadministration

La seconde section concerne ldition des contenus que sont les pages, les articles, les
mdias ainsi que les commentaires. Ici, vous pourrez ajouter, supprimer ou diter le
contenu de votre site et, faire de la modration sur les commentaires. Cest la partie la
plus utilise pour produire du contenu sur le site.
Enfin, le bas du menu donne accs au paramtrage du site, comme le choix du thme et
des plugins ou la gestion des utilisateurs. Il est aussi possible de grer le fonctionnement
de certaines fonctionnalits du site dans la partie Settings .
14
LINTERFACE DADMINISTRATION
Si vous dcidez par la suite dinstaller des plugins (cest--dire des modules apportant
des fonctionnalits supplmentaires au site), ceux-ci pourront rajouter des informations
sur le tableau de bord, comme par exemple :
des statistiques sur vos visiteurs ;
le nombre dabonns votre newsletter ;
la cration de nouveaux menus ladministration afin de donner accs de
nouvelles pages ;
etc.
Linterface est donc susceptible dvoluer.
En rsum
WordPress est un CMS crit en PHP cr en 2003.

Un site Internet a besoin dun serveur et dune base de donnes pour fonctionner.
Le serveur peut tre install sur votre ordinateur pour vos tests.
Linterface dadministration permet de grer votre site.
15
16
Chapitre
Les publications
Difficult :
Votre site est dornavant install et prt lemploi, mais il est encore terriblement vide !
Voyons comment remdier cela en ajoutant du contenu pour les visiteurs.
17
CHAPITRE 2. LES PUBLICATIONS
Les articles
Sous WordPress, les contenus sont organiss en deux types : les articles et les pages.
La diffrence entre les deux rside dans le type de contenu que vous allez placer
lintrieur.
Un article sera gnralement un contenu dactualit, cest--dire quil prend sa plus
grande valeur au moment de sa publication. Cest typiquement le type de contenu
utilis pour les publications dun blog ou sur un fil dactualit.
Une page aura au contraire un contenu valeur constante dans le temps sans avoir
besoin dtre mise jour. On peut lutiliser pour prsenter une socit, une personne
ou bien pour parler dun sujet de fond.
Au niveau de la prsentation, les articles peuvent tre affichs en liste par ordre chronologique, puisque cest ce qui fait leur sens, soit compltement soit avec un aperu
du contenu, tandis que les pages seront accessibles par un lien (le plus souvent dans le
menu de navigation) vers leur contenu.
Gestion des articles

Pour crer un article, il suffit daller dans Articles et de choisir Ajouter dans le
sous-menu.
Lditeur de texte
Dans la page qui apparat, vous avez un champ pour dfinir le titre de votre article
ainsi quun diteur de texte pour taper son contenu et le mettre en forme grce la
barre doutils ddie (voir la figure 2.1).
Figure 2.1 Lditeur de texte riche

Vous pouvez notamment mettre du texte en gras ou en italique, crer des listes puces,
changer lalignement du texte ou sa couleur.
Pour avoir une description de ce que fait lun des boutons de lditeur, vous pouvez
le survoler pour afficher une petite bulle dinformations. Aussi, la dernire icne (en
forme de point dinterrogation), affiche laide de lditeur dans une nouvelle fentre.
Enfin, deux onglets intituls Visuel et Texte permettent dalterner la vue entre
laperu du rendu final et le code HTML gnr. Si vous ne connaissez pas le HTML,
il est inutile de basculer en mode texte, le mode visuel vous suffira amplement.
18
LES ARTICLES
Publier larticle
droite se trouvent les actions disponibles pour larticle en cours de cration. Il est
notamment possible davoir un aperu de larticle avec le design du blog pour avoir
une ide du rendu final. Vous pouvez aussi, comme dans la figure 2.2, grer ltat de
publication de votre article.
Figure 2.2 Publication dun article

Tant quun article nest pas dans ltat Publi , il napparat pas sur le site. Vous
pouvez donc commencer le rdiger en tant que brouillon, sauvegarder puis y revenir
plus tard pour le terminer. Le bouton Publier permet de valider larticle pour quil
soit affich, ventuellement une date ultrieure.
Catgories et mots-cls
Il est possible dassocier une ou plusieurs catgories un article, ainsi quun ensemble
de mots-cls. Ceci permettra vos visiteurs de se reprer plus facilement parmi la liste
darticles aux thmes varis que vous pourrez crire.
Les catgories
Pour grer les catgories, il suffit de se dplacer dans le menu Articles > Catgories .
La page correspondante permet dajouter une catgorie et dditer celles qui existent
dj. Par dfaut, seule une catgorie est prsente et il nest pas possible de la supprimer,
cest la catgorie par dfaut des articles si aucune autre assignation nest choisie.
Pour crer une catgorie, il faut renseigner :
le nom de la catgorie, qui sera affich sur les pages ;
un identifiant, typiquement utilis dans lurl lors de laffichage des articles dune
catgorie donne ;
un parent (facultatif), cest--dire que chaque catgorie peut avoir une catgorie
parente ;
une description (facultative) qui sera ventuellement affiche si le thme le permet.
19

Une fois la catgorie cre, nous pouvons choisir dy assigner un article. Pour cela, sur
la page ddition de larticle, il suffit de cocher la case correspondant la catgorie
associer, puis de mettre jour larticle. Si lon affiche notre site nouveau, la catgorie
ajoute devient visible dans le pied-de-page du site (ou sur le cot suivant le thme).
En cliquant dessus, vous pouvez constater que lon obtient sur une nouvelle page la
liste des articles associs (voir la figure 2.3).
Figure 2.3 La liste des catgories saffiche sur le blog
Les mots-cls
Contrairement la description thmatique des catgories, les mots-cls ou tags permettent de caractriser un article de faon plus prcise. Par exemple, un article sur
le fonctionnement de WordPress, pourra tre dans la catgorie Mes tutos sur le
blog, mais pourra avoir comme mots-cls cours , informatique , formation ,
fonctionnement , WordPress , etc. La description du contenu de larticle devient
plus riche.
De mme que pour les catgories, il existe une page spcifique dans ladministration
pour grer les mots-cls, dans le sous-menu du mme nom. On prfre cependant crer
les mots-cls directement sur la page de cration dun article, car il est commun den
crer spcifiquement pour un article.
Pour cela, sous le formulaire permettant lajout de catgories, un champ vous invite
indiquer les mots-cls (spars par des virgules). Il est aussi possible de faire un choix
parmi les mots-cls existants les plus utiliss. Crez ou slectionnez vos tags et mettez
jour larticle pour enregistrer les modifications (voir la figure 2.4).
Lors de la visualisation de larticle, vous aurez dornavant une liste de mots-cls qui
vous redirigeront vers la liste des articles associs, comme cest le cas pour les catgories.
En effet, si deux articles ont un mot-cl en commun (par exemple informatique ),
lutilisateur pourra retrouver ces deux articles en tapant le mot-cl. Cela permet de
faciliter la recherche de publications pour vos visiteurs en leur proposant un ventail
des mots qui reviennent frquemment sur votre site.
20
LES PAGES
Figure 2.4 Choix des mots-cls pour chaque article
Les pages
La cration de pages est trs similaire celle des articles et se fait via le menu Pages
> Ajouter . Ldition du contenu se fait par le mme diteur de texte et la publication
suit le mme procd. En revanche, les options de la page sont diffrentes. Nous navons
plus de catgories ou de mots-cls associer, mais trois attributs nouveaux.
Les attributs
Sur le ct droit de la zone ddition des pages, un cadre similaire la figure 2.5 saffiche.
Figure 2.5 Les diffrents attributs de page

On peut associer une page parente une autre, ce qui permet de dfinir une hirarchie
de pages. Le principal changement visuel apparat dans le menu principal qui arborera
alors des sous-menus pour afficher les pages enfants que vous aurez dfinies.
Lattribut Modle (qui nest pas toujours visible suivant les thmes) sert changer
le format de la page, cest--dire la faon dont elle est affiche. Par dfaut, les pages
sont le plus souvent affiches avec une colonne latrale (comme pour la liste des articles)
qui affiche des widgets (liste de catgories, mots-cls, liens divers). Il est donc possible
21

sur certains thmes de choisir de ne pas afficher cette barre latrale sur une page bien
prcise en choisissant un modle de page pleine largeur .
Enfin, lattribut Ordre dfinit lordre dapparition de la page dans le menu par
rapport aux autres. La page avec lordre le plus petit apparaitra gauche, tandis que
la page la plus droite sera celle avec lordre le plus lev.
Le menu
Un menu est llment essentiel de la navigation sur le site, car il donne un lien vers les
principales pages de celui-ci. La gestion des menus seffectue via le sous-menu Rglages
> Menus dans linterface dadministration.
WordPress me dit quil ny a pas de menu existant ! Il y a pourtant bien un
menu en haut de mes pages, non ?
En effet, en labsence de menu, celui-ci est automatiquement gnr par le thme lors
de laffichage dune page. En loccurrence, il affichera un lien vers la page daccueil ainsi
quun lien par page que vous aurez cre. Il vaut donc mieux avoir un menu personnalis
si vous souhaitez avoir la main sur laffichage et les liens qui seront affichs !
Crer un menu
Pour crer un menu, rien de plus simple : il suffit de choisir un nom et de cliquer sur
Crer un menu .
Une fois le menu cr, il ne manque plus qu lui ajouter des liens. Ceux-ci peuvent
tre de plusieurs types :
un lien personnalis pour lequel vous choisissez lurl exacte ;
une page statique ;
un lien vers une catgorie.
Lorsquun lien est ajout au menu, il apparat dans le cadre central qui rsume les
lments de menu ajouts. Il est alors possible, en dpliant le bloc, de supprimer le
menu, de modifier le libell ou de rajouter un attribut title au lien correspondant (voir
la figure 2.6).
De cette faon, une bulle apparat lorsque lon survole le menu avec la souris (voir la
figure 2.7).
Une fois que vous avez ajout vos liens, il faut activer le menu dans le bloc Emplacements du thme o vous pouvez choisir le menu principal. Le menu sera alors utilis
comme navigation principale du site. Si le thme que vous utilisez le permet, il peut
tre possible davoir plus dun emplacement de menu actif la fois, vous pourriez alors
en activer un deuxime affich un autre endroit de vos pages.
22
LE MENU
Figure 2.6 Modification des attributs du menu
Figure 2.7 Lattribut title saffiche sous la souris

Je ne peux plus aller vers la page qui liste mes articles, on na pas pu lajouter
au menu !
Vous lavez vu, il nest pas possible dajouter dans le menu un lien de type page
darticles . Vous tes donc obligs de taper lurl de base du site pour avoir la liste de
vos publications, ce qui nest pas optimal. . . Deux solutions peuvent rgler ce problme.
La premire consiste ajouter un lien personnalis au menu, qui sera la page daccueil
du site et qui aura par exemple pour titre Accueil . Cette solution est nanmoins
peu pratique et il faudra changer le menu si votre site change dadresse.
La deuxime option consiste associer la liste des articles une page. Dans Rglages
> Lecture , vous devez alors choisir dafficher une page statique en tant que page
daccueil (choisissez donc une page de contenu que vous avez cre), puis une page
pour lister les articles. Notez que si elle est utilise pour lister les articles, le contenu
de cette page ne sera jamais affich, il peut donc tre vide. Il suffit ensuite dajouter
ces deux pages votre menu, la premire sera la page daccueil et la seconde fera le
lien vers la liste des articles.
La seconde option ne permet pas de conserver la page des articles comme
page daccueil. Il faut pour cela faire un dveloppement spcifique dans le
code PHP de WordPress, ou utiliser un plugin qui le permettrait.
Organiser les menus

Lordre daffichage des liens se fait par dfaut dans lordre dajout au menu, mais il
est tout fait possible de modifier cela comme bon vous semble. En glissant-dposant
23

les menus choisis, vous pouvez les ordonner comme il vous plat, mais aussi crer des
sous-menus. Pour cela, il faut simplement dplacer llment de menu lgrement vers
la droite, en-dessous de celui qui sera le parent (voir la figure 2.8).
Figure 2.8 Linterface de gestion des menus

Dornavant, un survol sur le menu parent affichera le sous-menu comme sur la figure
2.9 !
Figure 2.9 Affichage du sous-menu au survol

Ceci permet de reproduire une navigation similaire ce que lon avait obtenu en dfinissant des pages parentes dautres pages, mais cest ici applicable tous les types
dlments de menu, comme les liens personnaliss et les catgories.
Les mdias
Si vous tes dornavant capables de crer des contenus sur votre site, il vous manque
un lment important pour rendre celles-ci plus attrayantes : les mdias. Images, sons
24
LES MDIAS
ou vidos, il est tout fait possible de les insrer dans vos pages et vos articles pour
illustrer vos propos.
Insertion dans un article

Toutes les informations qui suivent sont valables sur les pages ainsi que sur
les articles.
Sur la page ddition dun article, vous trouverez un bouton Ajouter un mdia (voir
la figure 2.10).
Figure 2.10 Lajouter dun mdia

Aprs avoir cliqu dessus, une nouvelle fentre denvoi de fichier apparat (voir la figure
2.11).
Figure 2.11 Linterface pour lenvoi des mdias

25

Vous pouvez glisser-dposer, comme dans la figure 2.12, un fichier dans la fentre ou
bien cliquer sur le bouton Slectionner les fichiers pour utiliser lexplorateur de
fichiers. Une fois le fichier slectionn, celui-ci est directement envoy sur le serveur
web et un aperu est visible dans longlet Bibliothque de mdia de la fentre.
Figure 2.12 Envoie de limage sur le serveur

Il est possible denvoyer tout type de fichier, tant que celui-ci une taille infrieure
2Mo. Vous pouvez donc sans hsiter insrer un fichier de musique ou mme un PDF,
WordPress se chargera de proposer un affichage adquat lors de la visualisation de
larticle par un visiteur (voir la figure 2.13).
Figure 2.13 Apparence dun mdia audio sur un article

Lorsque le mdia que vous voulez utiliser dans votre article est envoy, vous navez plus
qu le slectionner et cliquer sur le bouton dinsertion dans larticle en bas droite.
Avant cela, vous pouvez diter les proprits du mdia sur la droite de la fentre :
Titre : le texte afficher au survol du mdia ;
Lgende : une lgende qui apparat sous le mdia ;
Description : un texte de description plus long que la lgende (cela dpend du
26
LES MDIAS
thme, elle napparait pas sur le thme par dfaut par exemple) ;
Lier : permet de choisir le comportement lorsque lon clique sur le mdia.
Il y a aussi quelques attributs spcifiques aux images :
Texte alternatif : le texte afficher si limage na pu tre affiche ;
Alignement : si vous choisissez gauche ou droite , limage sera borde par
le texte de larticle ;
Taille : la taille de la miniature afficher dans larticle.
Enfin, lorsque les mdias voulus ont t insrs, noubliez pas de mettre jour votre
article pour que les modifications soient prises en compte !
Sur la page Mdias > Ajouter , vous pouvez, de mme que sur un article,
ajouter de nouveaux mdias la bibliothque. Notez cependant que pour
apparatre sur le site, il faudra obligatoirement ajouter ce mdia un article
ou une page.
Grer les mdias non utiliss

Lorsque vous supprimez un mdia dun article, celui-ci nest pas totalement supprim
de WordPress, le fichier envoy reste sur le serveur pour pouvoir tre ventuellement
utilis sur dautres articles.
Pour effacer compltement un mdia, vous devrez, comme dans la figure 2.14, passer
par la page Mdias > Bibliothque qui rpertorie lensemble des fichiers envoys sur
le site. Il suffit alors de cliquer sur le lien Supprimer dfinitivement pour leffacer
de la bibliothque.
Figure 2.14 Suppression des mdias envoys

Si vous supprimez un mdia qui est toujours utilis dans un article, vous
aurez alors un lien mort affich sur votre site, ce qui est trs frustrant pour
vos visiteurs. Soyez donc certain que le mdia nest plus du tout utilis avant
de le supprimer !
27
En rsum
28
Les articles sont des publications rgulires dpendant de lactualit.

Les pages sont destines des prsentations.
Le menu peut tre gr automatiquement ou manuellement.
Tout type de mdia peut tre ajout dans une publication.
Chapitre
Grer un site participatif

Difficult :
La vie dun site, et en particulier dun blog, ne se limite pas ncessairement laction dune
seule personne (en loccurrence vous). Elle passe aussi par la participation des visiteurs qui
peuvent apporter leur rflexion vos articles, ainsi qu dautres rdacteurs qui peuvent
sinvestir dans lenrichissement de votre contenu.
29
CHAPITRE 3. GRER UN SITE PARTICIPATIF
Les commentaires
Si votre site a du succs, il y a fort parier que des visiteurs voudront laisser des
commentaires sur certains articles qui les auront inspir, voire sur certaines pages.
Activer ou non les commentaires

Tout dabord, voyons comment faire pour activer (ou dsactiver) les commentaires sur
les pages et les articles du site.
Dans linterface dadministration, allez dans Rglages > Discussion . En haut de
la page, une case vous demande si vous souhaitez Autoriser les visiteurs publier
des commentaires sur les derniers articles . Si cette case est coche, tous les articles
et les pages que vous crerez pourront recevoir des commentaires, et inversement si
vous la dcochez. En revanche, cette option ne permet pas dactiver ou dsactiver
les commentaires sur les contenus qui sont dj crs. Pour cela, il faut aller dans le
menu Articles , puis choisir Modification rapide sous larticle dont vous souhaitez
changer le statut (voir la figure 3.1).
Figure 3.1 Plusieurs actions sont disponibles pour les articles

Vous pouvez alors, comme sur la figure 3.2, modifier lautorisation des commentaires
via la case cocher Autoriser les commentaires .
Figure 3.2 Autorisation des commentaires

Pour faire ce changement sur la totalit de vos articles, vous devrez slectionner Modifier dans la liste des actions groupes, slectionner tous les articles pour lesquels
30
LES COMMENTAIRES
vous souhaitez dsactiver les commentaires, et cliquer sur Appliquer . Un formulaire
similaire au prcdent saffiche alors et permet entre autres dactiver (ou dsactiver)
les commentaires pour tous les articles (voir la figure 3.3).
Figure 3.3 Lactivation des commentaires peut tre groupe
Les actions dcrites ici sont aussi valables pour les pages en passant par le
menu listant les pages du site.
Les options
Revenons la page Rglages > Discussion . De nombreux paramtres sont disponibles ici pour vous aider grer les commentaires, il est par exemple possible de
demander ce que tous les commentaires soient valids par un administrateur ou bien
de dsactiver les commentaires pour les vieux articles. En bas de la page il est possible
de choisir si les commentaires peuvent avoir un avatar cot du nom de lutilisateur
layant post. Si oui, vous devez alors choisir un type davatar :
Homme mystre : un logo dutilisateur anonyme est affich ;
Vide : une image blanche est affiche ;
Gravatar : limage est rcupre sur Gravatar, un service permettant dassocier
une image une adresse email ;
Gnration automatique : lavatar sera une image alatoire dans le style visible
sur laperu.
Si votre choix se porte sur Gravatar, il vous faut alors choisir un niveau maximal pour la
censure de limage, cest--dire quune image rserve aux adultes ne sera par exemple
pas affiche si vous choisissez un niveau parmi G, PG ou R. Si vous ne savez pas lequel
slectionner, laissez G Visible pour tous , qui est celui utilis par dfaut.
31
Modrer les commentaires

Les statuts
Une fois un commentaire cr, il peut se trouver dans plusieurs statuts diffrents.
Approuv : le commentaire est visible sur le site ;
En attente : le commentaire est en attente de validation, seul vous ou un autre
administrateur du site peuvent le voir ;
Indsirable : le commentaire est masqu car il a t dsapprouv par un administrateur.
Enfin, il est possible davoir un commentaire dans la corbeille si vous avez dcid de le
supprimer. Voyons tout de suite comment procder ces changements de statut.
dition et suppression
La liste des commentaires prsents sur le site est affichable par le menu Commentaires du panneau dadministration. En survolant un commentaire et en cliquant sur
Modifier , vous accdez la page ddition dun commentaire.
Lorsque vous tes connect comme administrateur, il est aussi possible daccder directement la fiche ddition dun commentaire avec le lien Modifier
qui apparat sur le front-office lors de la visualisation dun commentaire.
Au centre vous pouvez modifier le contenu du commentaire ainsi que le nom de lutilisateur ayant post celui-ci. Un historique des actions sur ce commentaire (par exemple
un changement de statut) est aussi affich en bas de page.
Il est dconseill dditer le contenu dun commentaire car lutilisateur pourra
penser que vous cherchez modifier sa dclaration en votre faveur. Nutilisez
cette fonctionnalit que pour supprimer une phrase offensante par exemple,
bien que dans la plupart des cas la suppression pure et simple du commentaire
soit prfrable.
Sur la droite, nous retrouvons la liste des statuts prsents plus haut, ainsi que la date
de cration du commentaire et un lien pour le dplacement dans la corbeille.
Si nous choisissons de placer le commentaire comme En attente , vous pouvez voir
quil est immdiatement retir de laffichage public sous larticle auquel il se rattachait.
Dautre part, un petit 1 est apparu dans le menu dadministration pour indiquer
quun commentaire tait en attente de validation par un administrateur (voir la figure
3.4).
Si le commentaire est marqu comme Indsirable ou bien plac dans la corbeille,
il napparat plus dans la liste des commentaires. Il faut alors choisir le filtre Indsirable (ou corbeille) en haut de la page pour y accder (voir la figure 3.5).
32
LES COMMENTAIRES
Figure 3.4 Un commentaire en attente de validation
Figure 3.5 La corbeille regroupe les messages supprims

Vous pouvez alors choisir dannuler ce statut et de restaurer le commentaire pour quil
apparaisse nouveau, ce qui est utile en cas derreur par exemple (voir la figure 3.6).
Figure 3.6 Les commentaires indsirables peuvent tre conservs ou effacs
Rglages
En plus des paramtres sappliquant tous les commentaires que nous avons dj
parcouru, il est possible de filtrer certains textes contenus dans les commentaires pour
les empcher dtre publis sans votre approbation. Dans le champ Modration de
commentaires , vous pouvez choisir un ensemble de mots qui dclencheront la mise
attente dun commentaire ayant ce contenu dans son texte. Il nest pas obligatoire
de mettre des mots complets, cest--dire que Press bloquera les commentaires
contenant WordPress , Pression ou encore Presse .
Faites bien attention ne mettre quun mot bloquant par ligne dans la zone
de texte.
Vous pouvez faire de mme dans le champ Liste noire pour les commentaires , la
diffrence que les commentaires correspondant lun des mots choisis seront immdiatement marqus comme Indsirables , sans avoir tre modrs.
33
Les utilisateurs
Gestion des utilisateurs
Toute la gestion des utilisateurs seffectue par le menu Utilisateurs de ladministration qui vous permet de grer lensemble des utilisateurs existant, den crer de
nouveaux et dditer votre propre profil. Vous pouvez donc lister tous les utilisateurs
de votre site (voir la figure 3.7).
Figure 3.7 Liste des utilisateurs inscrits sur votre site
Les rles
chaque utilisateur est associ un rle dfinissant lensemble des droits qui lui sont
accords, cest--dire la liste des actions quil pourra effectuer dans linterface dadministration du site.
Administrateur : cest le rle qui accorde tous les droits et que vous avez par
dfaut en tant que crateur du site ;
diteur : il permet de publier et diter lensemble des articles du site, mme
celles qui ne lui appartiennent pas ;
Auteur : lauteur peut publier et diter ses propres contenus ;
Contributeur : il peut crer ou diter des articles et des pages lui appartenant,
mais ne peut pas les publier (il lui faut demander un diteur ou un administrateur de le faire pour lui) ;
Abonn : il peut uniquement accder au panneau daccueil de ladministration
et grer son profil.
Pour modifier le rle dun utilisateur, cliquez sur son nom dans la liste des utilisateurs.
Vous pouvez alors faire votre choix grce une liste droulante. Notez que vous ne
pouvez pas changer votre propre rle (voir la figure 3.8) !
34
LES UTILISATEURS
Figure 3.8 Attribution des rles aux utilisateurs

La gestion des droits est un sujet important pour la scurit de votre site. Il
faut toujours faire attention naccorder que les droits strictement ncessaires
un utilisateur. vitez donc de crer un profil administrateur si la personne
qui lutilisera na besoin que dcrire des articles.
Cration dutilisateur
Vous pouvez crer un nouvel utilisateur en allant dans le sous-menu Ajouter . Cette
interface permet de dfinir le nom du nouvel utilisateur, son rle et quelques informations personnelles optionnelles.
Il est aussi possible dautoriser la cration de comptes utilisateur pour nimporte quel
visiteur du site. Pour cela, dans le menu Rglages > Gnral , il suffit de cocher
la case Tout le monde peut senregistrer et de dfinir le rle par dfaut de ces
utilisateurs.
Il est peu probable que vous ayez besoin de cette option, mais il est bon de
savoir quelle existe. En revanche, si vous lutilisez, faites attention ce que
le rle par dfaut des utilisateurs soit le plus faible possible (abonn), sinon
vous vous exposez des modifications du contenu de votre site par nimporte
qui voulant senregistrer !
En rsum
Les commentaires permettent aux visiteurs de sexprimer sur les publications.
Ladministrateur peut modrer les commentaires avant et aprs leur publication.
Plusieurs personnes peuvent contribuer au site, ventuellement avec des droits
diffrents.
35
36
Chapitre
Modifier lapparence
Difficult :
Lidentit de votre site passe avant tout par le thme graphique, cest--dire lensemble des
caractristiques visuelles de votre site, comme les couleurs, la taille des textes, les images
de fond ou la disposition des blocs sur la page. Lorsque vous avez install WordPress, vous
navez pas eu la possibilit de choisir le thme graphique utilis, et pour cause : il est install
par dfaut et cest ensuite vous den trouver un autre et de le changer si vous le voulez.
Voyons tout de suite comment procder.
37
CHAPITRE 4. MODIFIER LAPPARENCE
Changer de thme
Le choix dun thme se fait lui aussi dans linterface dadministration, on y accde par
le menu Apparence > Thmes . Ici vous aurez probablement un ou deux thmes
prinstalls et que vous pouvez activer ou dsactiver loisir (voir la figure 4.1).
Figure 4.1 Liste des thmes installs

Essayons de modifier le thme actuellement utilis (ici, Twenty Thirteen ) par le
thme Twenty Twelve . Cliquez sur le lien Activer , puis rafrachissez votre site :
la nouvelle apparence est dores et dj mise en place, il ny a rien de plus faire (voir
la figure 4.2) !
Figure 4.2 Le thme actif a t modifi

38
CHANGER DE THME
Et si je veux essayer de nouveaux thmes non fournis avec WordPress ?
Il est en effet possible dinstaller des thmes crs par la communaut de diverses
faons : en utilisant linterface dadministration ou en tlchargeant les fichiers vousmme.
Ajouter un thme via ladministration

Pour ajouter un thme directement depuis linterface, choisissez longlet Installer
des thmes en haut de la page de slection des thmes. Ici, vous pouvez rechercher
des thmes par mots-cls, envoyer un fichier .zip contenant un thme pralablement
tlcharg, ou encore parcourir les derniers thmes ajouts par les crateurs (voir la
figure 4.3).
Figure 4.3 Nouveau thme tlcharger

Lorsque vous parcourez une galerie de thmes (cest--dire en faisant une recherche
ou en parcourant les derniers thmes mis jour) vous avez la possibilit davoir un
aperu du rsultat final du thme par le lien Aperu en dessous de chaque miniature. En cliquant sur le bouton Installer maintenant , WordPress va tlcharger
automatiquement le thme demand et celui-ci sera ensuite disponible dans la liste des
thmes.
Utiliser un thme tlcharg

Dans le cas o vous auriez tlcharg un thme sparment, par exemple directement
sur le site officiel de WordPress, longlet Themes ou sur un site proposant des
thmes WordPress, vous pouvez installer ce thme manuellement en plaant les fichiers
dans larborescence du CMS.
39

Essayez, par exemple, dinstaller le thme propos sur le code web suivant :

Le thme Expound
B
Code web : 254578

Dcompressez le fichier .zip rcupr et placez le dossier expound dans le rpertoire
wordpress/wp-content/themes/ de votre installation. Si vous affichez nouveau la liste
des thmes dans linterface dadministration, Expound est maintenant slectionnable
pour une utilisation sur votre site (voir la figure 4.4) !
Figure 4.4 Les thmes peuvent tre installs manuellement
Ajouter des widgets

Les widgets (ou composant dinterface graphique en franais) sont des petits blocs
ajouter sur les pages de votre site. Ils fournissent une information ou une fonctionnalit
spcifique aux visiteurs. Par exemple, il peut sagir de lheure, dun calendrier, du bulletin mto, de mini-jeux. . . Cest un moyen simple de rajouter du contenu dynamique,
toujours sans avoir besoin de modifier le code du site.
Placer un nouveau widget

Dans le menu Apparence > Widgets, on retrouve au centre de la page lensemble
de tous les widgets disponibles sur le site, et sur la droite, les diffrentes zones de
votre thme pouvant contenir lesdits widgets. En effet, les widgets ne peuvent pas
tre placs nimporte o dans une page, ils ont besoin quune (ou plusieurs) zone
du thme graphique utilis soit conue pour en recevoir. Par dfaut, WordPress a
un certain nombre de widgets livrs sans que vous ayez besoin de les installer. Il est
40
AJOUTER DES WIDGETS

nanmoins toujours possible den rajouter au travers de plugins, que nous verrons plus
tard comment rcuprer.
Pour ajouter un widget dans une zone spcifique du site (qui est dtermine par le
thme utilis), il vous suffit de le glisser-dposer de la zone centrale vers la Zone
principale (ce nom peut varier en fonction du thme utilis) sur la droite. Ajoutons
par exemple le widget Nuage de mots-cls par cette mthode (voir la figure 4.5).
Figure 4.5 Assigner le widget une zone spcifique

Une fois quun widget est plac dans une zone de widgets, vous pouvez diter ses proprits, qui dterminent son comportement sur les pages de votre site. Ajoutons donc le
titre Mots-cls et choisissons la taxinomie Mots-cls , qui permet dafficher une
courte liste des mots-cls les plus utiliss pour marquer les articles que vous avez publis. Lautre option, Catgories , propose le mme affichage mais pour les catgories
darticles. Cliquez donc sur Enregistrer , puis rafrachissez la page daccueil du site ;
le nouveau widget doit apparatre dans la zone choisie (avec le thme Twenty Thirteen et la zone Principale , ce sera le pied-de-page), cot de ceux dj prsents
Dsactiver un widget
Pour retirer un widget, rien de plus simple : il suffit de cliquer sur le lien Supprimer .
Cela retirera le widget de la zone dans laquelle il se trouvait et supprimera les rglages
appliqus (voir la figure 4.7).
En revanche, vous pouvez aussi choisir de ne plus afficher un widget, tout en conservant
les options que vous aviez choisies, comme le titre par exemple. Pour cela, vous pouvez
dplacer le widget en question dans la zone Widgets dsactivs situe en bas de la
41
Figure 4.6 Le pied de page affiche le widget fraichement ajout
Figure 4.7 Suppression du widget
42
AJOUTER DES WIDGETS

page de gestion des widgets. Vous pourrez alors replacer le widget sur votre site plus
tard avec les mmes rglages.
En rsum
Lapparence du site est dtermine par le thme choisi.
De nouveaux thmes peuvent tre tlchargs depuis la bibliothque officielle.
Les widgets offrent des fonctionnalits supplmentaires dans les zones priphriques de chaque page.
43
44
Chapitre
TP : Crez vos premires pages

Difficult :
Afin de pratiquer les notions prsentes jusquici, je vous propose un exercice dapplication
consistant crer diffrents contenus au travers de linterface dadministration. Nous allons
donc crer lbauche dun blog avec quelques lments de base. Ce sera ensuite vous de
poursuivre ce travail au gr de votre imagination !
45
CHAPITRE 5. TP : CREZ VOS PREMIRES PAGES
Prsentation de lexercice
Consignes
Ce TP ne devrait pas vous poser beaucoup de problmes. Je vous donne ici les lignes
directrices afin de parcourir nouveau les fonctionnalits principales que nous avons
vues jusque l, pour raliser le contenu de votre site.
Lobjectif sera donc de crer votre premier article. Je vous propose de suivre, dans
lordre les lments suivants :
installer un thme ;
crer un article ;
crer des catgories, dont Le blog ;
crer une page de prsentation personnelle ;
crer un menu comprenant trois lments ;
installer des widgets.
Tout dabord, commencez par installer un thme spcifique. Dans mon cas, jai
choisi Base WP , mais nhsitez pas faire un choix diffrent selon vos gots. Vous
pourrez ensuite crer un premier article de prsentation de votre blog, similaire
la figure 5.1.
Figure 5.1 Votre premier article doit attirer loeil !

46
CORRECTION
Tous les lments de mise en forme sont disponibles dans lditeur de texte riche. Nhsitez pas explorer les possibilits quil offre et rajouter du contenu supplmentaire !
Vous devrez au minimum intgrer une liste puces, un lien vers une autre page du
site, une image et le formatage du texte (par exemple avec des lments en gras ou
italique).
Ensuite, vous devez crer des catgories, dont Le blog .
Une fois les catgorie cres, vous devrez crer une page de prsentation personnelle qui sera rattache la catgorie Le blog . Rattachez aussi votre premier article
cette catgorie.
Le menu doit donc comprendre (comme sur la figure 5.2) :
la page daccueil faisant le listing des articles publis ;
la page de prsentation personnelle ;
un lien vers la catgorie Le blog .
Figure 5.2 Le menu du blog

Enfin, je vous demande dutiliser, comme sur la figure 5.3, les widgets suivants :
le calendrier ;
la barre de recherche ;
les catgories ;
les mots cls.
Vous aurez probablement des widgets dj installs avec votre thme, il faudra donc
les supprimer sils sont inutiles. Noubliez pas que vous pouvez toujours les rajouter
plus tard si vous en prouvez le besoin.
Avant de passer la correction, vrifiez bien que vous avez ajout tous les lments
demands ci-dessus. Nhsitez pas vous rfrer aux chapitres prcdents si vous ne
retrouvez pas une fonctionnalit prcise.
tout de suite pour la correction !
Correction
Si vous avez bien suivi le cours jusquici, vous devriez navoir rencontr que peu de
problmes pour dbuter sur votre blog. Nous allons reprendre ensemble les points principaux qui ont pu vous poser quelques difficults.
47
Figure 5.3 La barre latrale contenant les widgets
48
CORRECTION
Le thme
Le thme est gnralement le point de dpart pour votre site puisquil dtermine lidentit de celui-ci. Les images de prsentation du TP on t prises sur le thme Base
WP , que vous pouviez utiliser en utilisant la fonctionnalit de recherche de thmes
prsente dans la chapitre ddi ce sujet.
La page de prsentation personnelle

Cest le premier contenu par lequel vous pouviez commencer, tant donn quil fallait
ensuite crer un lien vers cette page sur votre premier article. Je nai pas pos de critre
de ralisation particulier ici, vous tiez donc assez libre. Pour ajouter cette page la
catgorie Le blog , vous pouviez passer par le formulaire sur la droite de lditeur
qui permet de crer et assigner la catgorie (voir la figure 5.4).
Figure 5.4 Crez et slectionnez la catgorie assigner la page
Larticle dintroduction
Comme je vous lai dit, cet article contenait plusieurs lments insrer avec lditeur
de texte de WordPress : une liste puces, une image et un lien.
Pour insrer une liste puces, il suffit de cliquer sur cette petite icne (voir la figure
5.5).
Figure 5.5 Bouton pour les listes puces

Ensuite, ajouter les puces une par une, en tapant le texte et en passant la ligne. Un
nouveau clic sur licne permet darrter la liste.
Notez que vous pouviez aussi crer des listes numrotes avec le bouton suivant (voir
la figure 5.6).
Lajout dune image se fait avec le bouton Ajout des mdias au dessus de lditeur
de texte. Il vous suffit ensuite de choisir une image comme nous lavions fait dans le
chapitre sur les mdias, puis de valider (voir la figure 5.7).
49
Figure 5.6 Bouton pour les listes numrotes
Figure 5.7 Bouton pour lajout dimage
Il fallait ensuite crer un lien vers la page de prsentation cre prcdemment. Le

bouton en forme de chane, comme sur la figure 5.8, permet de raliser cette tche.
Figure 5.8 Bouton pour les liens

En cliquant dessus, une fentre souvre. Vous deviez donc taper ladresse dun lien
quelconque (vers lextrieur de votre site) ou bien un lien vers une autre page du blog
en slectionnant celle-ci dans la liste affiche (comme sur la figure 5.9).
Figure 5.9 dition du lien insrer

Enfin, avant de publier larticle, assignez-lui la catgorie cre plus tt grce au formulaire sur la droite de la page.
50
CORRECTION
Le menu
Pour ajouter les liens demands votre menu, il fallait commencer par crer un nouveau
menu en passant par lcran Apparence > Menu . Vous pouviez ensuite rajouter les
pages qui vous intressent en les slectionnant manuellement, puis en cliquant sur
Ajouter au menu . Faites ensuite de mme pour la catgorie Le blog (voir la
figure 5.10).
Figure 5.10 Ajoutez les pages dans le menu

Noubliez pas ensuite de lier le menu votre thme dans longlet Grer les menus .
Choisissez le menu dans la liste droulante avant denregistrer ce changement (voir la
figure 5.11).
Figure 5.11 Slectionnez le menu utiliser avec ce thme
Les widgets
Pour terminer, vous deviez ajouter quelques widgets votre thme. Sur lillustration
prsente au dbut de lexercice, jai utilis quatre widgets :
le calendrier ;
la recherche ;
la liste de catgories ;
51

le nuage de mots-cls.
Pour les intgrer, il vous suffit daller sur lcran de gestion des widgets et de les faire
glisser un par un dans la zone de widgets voulue. Par exemple ici, la barre latrale (voir
la figure 5.12).
Figure 5.12 Les widgets utiliss pour ce TP
52
Chapitre
Ajouter des plugins

Difficult :
Vous lavez vu avec les thmes, WordPress propose une grande souplesse dans la personnalisation de votre site, et ceci avec des processus simplifis au maximum. De mme que nous
avons pu modifier lapparence de notre site sans difficult, nous pourrons aussi lui ajouter
de nouvelles fonctionnalits grce aux plugins. Les plugins sont des modules installer individuellement dont le but est dtendre les fonctionnalits dun logiciel, ici WordPress. Par
exemples, intgrer des boutons Facebook, ajouter les statistiques de visites dans le panneau
dadministration ou encore avec une galerie de photos sur vos publications. . .
53
CHAPITRE 6. AJOUTER DES PLUGINS
Grer les plugins

Installer de nouveaux plugins
Tout comme les thmes, les plugins peuvent tre installs directement par linterface
dadministration ou manuellement en tlchargeant les fichiers ncessaires et en les
plaant dans le dossier appropri.
Installation automatique
Nous accdons au moteur de recherche des plugins par le menu Extensions > Ajouter , qui propose une mthode de recherche similaire celle des thmes. Vous pourrez
chercher des plugins par mots-cls, par date dajout ou bien simplement parcourir les
plus utiliss par la communaut. Cherchons parmi les extensions les plus populaires en
cliquant sur le lien correspondant (voir la figure 6.1).
La grande majorit des plugins est cre destination du monde entier, par
consquent leur description mais aussi la documentation sont gnralement
crites en anglais. Ne soyez donc pas surpris davoir des rsultats de recherche
dans la langue de Shakespeare !
Figure 6.1 La bibliothque de plugins de WordPress

Dans la liste qui saffiche, nous pouvons voir pour chaque plugin son nom, la version
actuelle, une note des utilisateurs et une courte description de ses fonctionnalits. Pour
lancer linstallation, cliquez simplement sur Installer maintenant et WordPress se
chargera de tlcharger les fichiers ncessaires au fonctionnement, l encore tout se
passe selon le mme procd que pour les thmes.
54
GRER LES PLUGINS

Installation manuelle
Les plugins sont aussi tlchargeables manuellement sur le site officiel de WordPress,
dans la section Plugins . Lorsque vous avez rcupr les fichiers du plugin, placez-les
dans le dossier wordpress/wp-content/plugins, cela suffit pour terminer linstallation !
Activer ou supprimer le plugin
Ladministration propose un panneau de gestion des plugins accessible via Extensions
> Extensions installes . Vous pourrez ici grer les diffrents plugins installs sur votre
site.
Une fois quun plugin est install, il est ncessaire de lactiver pour que ses fonctionnalits soient appliques. Cela se fait simplement en cliquant sur le lien Activer sous
la description du plugin. De mme, si vous navez plus besoin dun plugin, vous pouvez
le dsactiver de la mme faon. Enfin, pour dsinstaller un plugin, cest--dire pour
supprimer lensemble de ses fichiers et les informations quil a pu stocker dans votre
base de donnes, il faut cliquer sur le lien Supprimer .
La suppression est irrversible ! Vous devrez rinstaller le plugin si vous voulez
le rutiliser plus tard.
Pour pouvoir supprimer un plugin, il faut dabord que celui-ci soit dsactiv.
Mise jour dun plugin

Afin de bnficier de nouvelles fonctionnalits ou simplement de corrections de bugs, les
plugins ont la possibilit dtre mis jour lorsque lquipe en charge du dveloppement
en sort une nouvelle version. Ceci vous est signal dans le menu principal avec une
petite vignette indiquant le nombre de plugins pouvant bnficier dune mise jour
Figure 6.2 Une mise jour est disponible

55

Avant de mettre jour le plugin, consultez les dtails de la mise jour. Vous y trouverez une liste dcrivant lensemble de ces mises jour et des risques ventuels. Lorsque
vous tes prt pour rcuprer la dernire version, cliquez sur Mettre jour automatiquement , WordPress tlchargera automatiquement les nouveaux fichiers.
Si vous tes plutt adepte du tlchargement manuel de larchive contenant le code
du plugin, vous pouvez effectuer la mise jour dun plugin en rcuprant la nouvelle
version du code et en remplaant lancien dossier du plugin mettre jour, de la mme
faon que pour linstallation.
Exemples de plugins
Vous savez maintenant rechercher et installer des plugins, en voici quelques-uns parmi
les plus populaires qui pourraient vous tre utiles.
qTranslate
Par dfaut, un site utilisant WordPress ne peut tre affich quen une seule langue
inscrite dans la configuration. De plus, vos articles et pages sont rdigs dans la langue
de votre choix, mais il nest pas possible den avoir plusieurs versions dans des langues
diffrentes.
qTranslate permet de contourner cette limitation en proposant une interface de rdaction des publications modifie pour que celles-ci soient rdiges en plusieurs langues.
Il est aussi possible aux utilisateurs de choisir la langue dans laquelle ils souhaitent
parcourir votre site. Une fois le plugin install, un nouveau menu fait son apparition
dans Rglages > Langues et vous permet notamment de choisir les langues que
vous souhaitez utiliser sur votre site (voir la figure 6.3).
Figure 6.3 Gestion des langues

56
EXEMPLES DE PLUGINS
Il est trs probable que lors de lactivation du plugin, votre interface passe en
anglais. Vous devez alors ajouter le franais la liste des langues actives et
en faire la langue par dfaut.
Sur la page ddition des articles, un champ de texte par langue a t rajout pour
le titre de la publication. De plus, un systme donglets permet de choisir la langue
dans laquelle vous ditez le contenu, vous avez donc toutes les versions dune mme
publication sur une seule page. Cest ensuite lutilisateur qui choisira la langue dans
laquelle il souhaite parcourir le contenu (voir la figure 6.4).
Figure 6.4 Linterface modifie pour la rdaction

Enfin, pour que les utilisateurs puissent changer de langue comme bon leur semble, le
plugin fournit aussi un widget pour choisir la langue dans laquelle les pages doivent
safficher. Laffichage peut varier du lien la liste droulante, avec ventuellement
laffichage des drapeaux correspondant aux pays (voir la figure 6.5). Vous verrez, cest
trs pratique !
Figure 6.5 Le widget de qTranslate
57
Hupso Share Buttons

Ce second plugin se concentre sur les rseaux sociaux en proposant dajouter des boutons de partage pour une vaste slection dentre eux. Vos visiteurs peuvent ainsi partager vos publications dun simple clic vers les rseaux sociaux. Les boutons peuvent tre
ajouts en dessous de vos articles, pages et mme comme widget suivant la configuration
que vous choisissez (voir la figure 6.6).
Figure 6.6 Quelques options pour la configuration des boutons

De nombreuses options sont par ailleurs disponibles, vous pouvez ainsi choisir la position des boutons et la faon dont le texte de partage est dtermin, exclure des
catgories darticles du partage ou encore changer le type de bouton. Cest donc un
plugin trs utile qui vous vite les tapes fastidieuses dintgration de ces boutons pour
chaque rseau social, et le rsultat est plutt russi (voir la figure 6.7).
Figure 6.7 Le rendu sous les articles

58
EXEMPLES DE PLUGINS
Lorsque ce plugin est utilis sur une installation locale, les fonctionnalits de
partage peuvent tre incompltes voire ne pas fonctionner. Cest un comportement normal d au fait que les rseaux sociaux essayent de se connecter
au site en partageant un lien dans le but dy rcuprer des informations de
partage. Cette tape ntant pas ralisable sur un site local, le partage ne
peut fonctionner normalement.
NextGEN Gallery
Pour terminer cette slection, regardons de plus prs le plugin NextGEN Gallery, qui
permet la cration de galeries dimages afficher dans vos publications.
Vous commencez par crer un album dans lequel vous ajoutez des images une par une
ou par groupe de faon trs simplifie, vous les classez, puis vous pouvez afficher cellesci divers endroits : dans un article, une page ou un widget. Laffichage peut aussi
prendre la forme dun carrousel afin de faire dfiler les images de faon automatique,
cest vous de choisir.
Ici aussi, de nombreuses options permettent dadapter le plugin tous vos besoins, que
ce soit en changeant la taille, le style, les dures de transitions des images, ou encore
en permettant une slection prcise des images afficher en fonction du contexte de la
page visualise (voir la figure 6.8).
Figure 6.8 Laffichage sous forme de galerie
59
En rsum
WordPress est personnalisable laide de plugins. Ces modules permettent
dajouter de nombreuses fonctionnalits.
Les plugins sont dvelopps par la communaut.
Il existe plus de 25 000 plugins, nhsitez pas parcourir la bibliothque !
60
Deuxime partie
Dvelopper votre thme
61
Chapitre
Premiers pas dans le code

Difficult :
Avant de nous attaquer au dveloppement sous WordPress, je propose une entre en matire
gnrale afin de prendre nos premires marques avec la documentation, ainsi que la structure
de WordPress et de ses concepts. Une fois que nous aurons dgrossi le sujet, vous serez
prts plonger au cur de votre site !
63
CHAPITRE 7. PREMIERS PAS DANS LE CODE
Utiliser la documentation
Si vous avez dj dvelopp des sites web en utilisant un CMS ou un framework, vous
avez probablement dj eu besoin de rechercher des informations dans la documentation ddie. Dans le cas contraire, sachez que cest une mine dinformations pour les
dveloppeurs qui dcrit lensemble des fonctionnalits fournies par lapplication pour
vous permettre de les exploiter.
Sur WordPress, la documentation sappelle Codex. Vous le retrouverez sur le code web
suivant :

La documentation Codex
B
Code web : 894247

Elle regroupe tout ce quil faut savoir sur la cration de thmes, de plugins ou encore de
widgets. Elle dcrit aussi le fonctionnement interne de WordPress, nhsitez donc pas
la parcourir si vous souhaitez approfondir vos connaissances ou simplement dtailler
un point prcis.
La structure de WordPress
Systme de fichiers
La plupart des fichiers situs directement la racine de WordPress sont soit des points
dentre de lapplication (cest--dire appels directement par le client lors dune requte vers le site) tels que index.php, wp-login.php ou wp-signup.php, soit des fichiers
permettant linitialisation de lapplication, comme wp-config.php ou wp-settings.php.
Vous avez ensuite trois dossiers qui regroupent le cur de WordPress :
wp-includes regroupe toute la logique de WordPress, pour toutes les fonctionnalits natives (hors administration).
wp-admin permet de regrouper les pages et fonctionnalits de linterface dadministration.
wp-content contient les plugins et les thmes installs dans votre application
(respectivement dans les sous-dossiers Plugins et Themes ), cest dans ce
dossier que nous dvelopperons de nouvelles fonctionnalits.
Jinsiste lourdement sur le fait que tout le code que vous crivez devra se trouver dans
un plugin ou bien dans un thme, et nulle part ailleurs ! Vous ne devez jamais modifier
les fichiers natifs de WordPress pour des raisons de propret du code : tout ce qui est
spcifique votre site doit tre cloisonn pour tre facilement rutilisable. De plus,
lorsque WordPress est mis jour, tous les fichiers extrieurs aux plugins et aux thmes
sont susceptibles dtre modifis. Vos ventuelles modifications seraient donc perdues !
Rien ne vous empche en revanche douvrir les fichiers de WordPress, par exemple pour
chercher ce que fait exactement une fonction que vous utilisez. Il est ainsi trs commun
davoir regarder le contenu du dossier wp-includes lorsque lon commence rajouter
des fonctionnalits personnalises.
64
LE PRINCIPE DES ACTIONS
La base de donnes
Maintenant que vous avez fait connaissance avec les fichiers de WordPress, nous allons
jeter un coup dil ce qui se cache dans la base de donnes. Nayez pas peur, cest
vraiment trs lger !
WordPress ne contient que 11 tables par dfaut, cest--dire si vous ne faites pas de
modification particulire. Bien entendu, des plugins peuvent crer de nouvelles tables
si les fonctionnalits quils rajoutent le ncessitent.
wp_commentmeta et wp_comments permettent la sauvegarde des commentaires sur les publications du site.
wp_links tait utilise dans les anciennes versions de WordPress et est toujours
prsente pour des raisons de compatibilit.
wp_options contient les valeurs des paramtres de configuration du site, comme
le slogan, qui peuvent tre ditables dans linterface dadministration.
wp_postmeta et wp_posts stockent le contenu des publications du site, que ce
soit des articles ou des pages, mais aussi les menus. Il faut noter quil existe
un systme de version des pages et des articles et que les diffrentes versions
sauvegardes sont reprsentes chacune par une ligne dans la table wp_posts.
wp_term_relationships, wp_term_taxonomy et wp_terms contiennent les informations relatives aux catgories, aux tags, ainsi que leur lien avec les diffrents
articles et pages du site.
wp_usermeta et wp_users maintiennent les donnes utilisateurs, que ce soit
leur nom ou bien les droits accords chacun.
Les noms des tables prsentes tiennent compte du prfixe par dfaut wp_
ajout lors dune installation standard, le dbut des noms peut donc varier si
vous avez choisi un prfixe diffrent. Dans la suite du cours, les tables seront
notes avec le prfixe par dfaut.
Le principe des actions

Thorie
Dans WordPress, tout ou presque a t prvu dans le but de pouvoir tre adaptable par
des dveloppeurs tiers voulant personnaliser lapplication. Pour cela, il faut que celle-ci
fournisse un moyen de rajouter du code spcifique sans pour autant que le dveloppeur
ait besoin de modifier les fichiers natifs de WordPress. De cette faon, le code rajout
peut tre partag sur un autre site en ajoutant simplement de nouveaux fichiers et
sans modifier les existants. Pour offrir cette possibilit, le concept des actions a t
introduit.
Une action est une fonction qui est appele lorsquun vnement particulier se produit,
par exemple la sauvegarde dun article par un contributeur. Lide gnrale est que,
dans notre exemple, la fonction qui gre la sauvegarde de larticle va dclencher un
65

vnement intitul save_post, quun certain nombre de fonctions peuvent observer,
pour sexcuter cet instant.
Le nombre de fonctions observant un vnement nest pas limit, cest l tout lintrt
de ce principe. Si vous avez besoin de faire un traitement spcifique lorsquun article
est sauvegard, il vous suffit de crer la fonction effectuant ce traitement et de la brancher sur lvnement save_post, et WordPress soccupera de faire lappel au moment
opportun.
Les fonctions utilises

Concrtement, lenregistrement dune action se fait laide de la fonction add_action(),
qui prend en paramtre le nom de lvnement dclencheur et le nom de la fonction
appeler.
Un troisime argument peut-tre ajout cet appel, cest la priorit. tant donn que
les actions peuvent tre multiples sur un vnement donn, vous pourriez avoir besoin
de dterminer si votre action sera excute avant ou aprs une autre. Cest lutilit
de la priorit : les actions ayant la priorit de plus faible niveau seront excutes en
premier, la valeur par dfaut tant 10.
Ainsi, si vous voulez excuter un fonction nomme ma_fonction() aprs les autres
actions observant lvnement save_post, vous pouvez faire lappel qui suit.
1
2
<? php
add_action ( ' save_post ' , ' ma_fonction ' , 20 ) ;
Lappel aux actions connectes un vnement donn se fait lorsque la fonction do_action()
est excute, celle-ci prenant en argument le nom de lvnement et les ventuels arguments passer aux actions excutes.
Lappel lvnement save_post, situ dans le fichier wp-includes/post.php, suit bien
entendu ce format :
1
2
<? php
do_action ( ' save_post ' , $post - > ID , $post ) ;
WordPress et la programmation oriente objet

Retour en arrire
Comme il a t dit en introduction, la premire version de WordPress est sortie au
cours de lanne 2003. De son ct, PHP5, qui inclut un support avanc des concepts
objets dans le langage, est sorti en 2004, soit peu de temps aprs.
Par consquent, le dveloppement de WordPress sest lorigine purement organis sur
du code procdural, cest--dire sans notions de programmation oriente objet. Au fil
des versions, de nouveaux composants on t ajouts WordPress, et ceux-ci ont t
construits dans une mesure de plus en plus importante autour des objets.
66
WORDPRESS ET LA PROGRAMMATION ORIENTE OBJET

Cependant, afin de maintenir la plus grande compatibilit possible pour les plugins et
les thmes existants, crs par la communaut, mais aussi pour ne pas avoir a rcrire
compltement le CMS, une grande partie du code est reste sous forme procdurale
au fil des ans. Il est donc trs courant dutiliser des fonctions de lespace global, tout
en ayant parfois affaire des objets pour les fonctionnalits les plus rcentes de WordPress. Ne soyez donc pas tonn davoir manier ces deux aspects au cours de vos
dveloppements, cest tout fait normal daprs la conception du moteur.
Et votre code dans tout a ?

En ce qui concerne le code que vous crirez, il ny a pas de norme particulire suivre :
de nombreux plugins sont encore crits sans avoir une structure objet, dautres au
contraire y sont trs attachs. Dans la suite de ce cours, les exemples seront le plus
souvent orients objet, mais il reste toujours certains cas particuliers (notamment les
thmes) pour lesquels la structure de WordPress nest pas adapte. Nous devrons donc
aussi, suivant les cas, concilier les deux.
Gardez toutefois lesprit que le choix reste le vtre et quaucune obligation nexiste.
Si la programmation objet devient de plus en plus utilise sur les applications PHP, le
fonctionnement du CMS nest pas toujours le choix le plus vident.
En rsum
Le codex renferme toutes les informations techniques sur WordPress.
Il existe 11 tables permettant de stocker lensemble des informations spcifiques
votre site.
Les actions permettent dexcuter des fonctions lors du dclenchement dvnements spcifiques.
WordPress contient du code procdural et orient objet dans son coeur, il vous
appartient de choisir comment vous souhaitez organiser votre propre code.
67
68
Chapitre
Les thmes
Difficult :
Nous avions vu dans la premire partie de ce cours comment installer un nouveau thme
WordPress. Cela nous a permis de modifier lapparence de notre site, mais il est certain
que vous prfreriez avoir la possibilit de crer votre propre thme ou bien de modifier un
thme existant. Il est maintenant temps de nous y plonger !
69
CHAPITRE 8. LES THMES
Structure dun thme

Pour crer un thme, il faut commencer par ajouter un dossier dans le rpertoire
wp-content/themes. Ce dossier porte gnralement le nom du thme (sans espaces, ni
caractres spciaux), par exemple themezero .
Mais que mettre dans ce nouveau dossier ?
Dans WordPress, un thme a une structure assez simple, car il ne ncessite quau
minimum, deux fichiers !
Le fichier styles.css
Tout dabord, un fichier style.css permet de dclarer le thme auprs de WordPress ;
on y renseignera notamment le nom du thme, lauteur et le site Internet, ou encore
un numro de version. Sil est prfrable de remplir le plus dinformations possible,
notamment dans le cas o vous dcidiez de publier votre thme, seul le nom de celui-ci
est obligatoire.
Pour dclarer le thme, il suffit de mettre les informations demandes dans un commentaire au dbut de votre fichier style.css.
1
2
3
4
5
6
/*
Theme Name : Le th me des z ros
Author : Midnight Falcon
Author URI : http :// monsiteweb . com
Description : Notre premier th me WordPress !
*/
Ce fichier style.css pourra aussi contenir des rgles de mise en forme CSS (cest tout
mme le but de ce type de fichier !). La seule obligation est davoir un en-tte de
dclaration du thme. Rien quavec ce fichier, WordPress est capable de dtecter votre
nouveau thme, celui-ci doit ainsi tre visible dans la liste des thmes (voir la figure
8.1).
Un premier fichier PHP

Ensuite, vous aurez besoin dun fichier PHP pour gnrer le code HTML de la page.
Un fichier index.php est le minimum pour dmarrer et peut thoriquement suffire pour
un thme, mme sil sera difficile daller bien loin avec si peu !
a parat trop simple ! Comment peut-on grer tous les cas proprement avec
seulement un seul fichier PHP ? Jai vu des thmes avec plus dune dizaine
de fichiers !
70
STRUCTURE DUN THME
Figure 8.1 Le nouveau thme dans ladministration
Effectivement, moins de grer tous les cas daffichage dans votre fichier index.php et
darriver un code illisible, votre thme sera forcment incomplet. Pour cette raison,
WordPress va lire un fichier diffrent du thme suivant le contexte de la page courante. Par exemple, pour afficher la liste des articles associs une catgorie, le fichier
category.php sera appel. Cependant, si celui-ci nexiste pas, lapplication applique le
comportement par dfaut et cest le fichier index.php qui sera utilis pour le rendu.
Ce fonctionnement de WordPress est le mcanisme de fallback, il vous permet de
ne pas avoir crer autant de fichiers que de types de pages sur le site et de mutualiser
le code pour les pages ayant un affichage semblable. Quand le fichier cens tre utilis
pour une page nexiste pas, on retombe sur un fichier par dfaut.
Aussi, cette hirarchie de fichier comporte en gnral plusieurs niveaux. Par exemple, si
la catgorie que vous souhaitez afficher sappelle zro , WordPress ira tout dabord
chercher un fichier nomm category-zero.php, puis category.php si le premier est inexistant. Puis, il ira chercher index.php.
Il y a en ralit cinq niveaux de hirarchie pour les templates dune catgorie,
jai volontairement simplifi le systme pour que vous compreniez.
Nous pouvons dores et dj crer le fichier index.php et crire une simple ligne dedans.
1
2
<? php
echo ' Bonjour les z ros ';
Activez maintenant le thme et rafrachissez une page pour constater que le fichier
index.php est bien appel : le texte Bonjour les zros saffiche sur la page.
71
Un fichier courant : functions.php

Il reste un dernier fichier qui revient trs souvent dans les thmes, cest le fichier
functions.php qui contient des fonctions aidant laffichage dans un thme donn. Il
ne soccupe pas du rendu proprement parler mais vous permet principalement de
dfinir des traitements particuliers appeler depuis vos templates, dans le but dviter
dalourdir ces derniers avec trop de code PHP.
Son inclusion est faite automatiquement par WordPress sil est prsent dans le dossier
du thme courant. Les fonctions qui y sont dfinies sont alors accessibles depuis tous
les fichiers du thme.
Par exemple, crez une fonction display_hello() dans ce fichier :
1
2
3
4
5
<? php
function display_hello ()
{
echo ' Bonjour les z ros ';
}
Nous pouvons maintenant appeler cette fonction dans nimporte quel template de notre
thme, nous allons donc le faire dans index.php :
1
2
<? php
display_hello () ;
Vous devez donc obtenir le mme rsultat que prcdemment, le code a simplement t
dplac dans une fonction.
Hritage de thme
Avant de nous lancer tte baisse dans la cration dun nouveau thme partir de rien,
commenons simplement : modifier un thme existant.
En revanche, pas question de modifier directement les fichiers du thme original ! En
effet, si jamais celui-ci venait tre mis jour, vous perdriez vos modifications en
tlchargeant les dernires nouveauts.
Pour concilier ces deux points, lhritage de thme est exactement ce dont vous avez
besoin. Il sagit de dfinir un thme dit enfant qui pourra alors ne surcharger que les
lments ncessaires du thme dit parent . Tous les fichiers qui ne sont pas redfinis
dans le thme enfant seront pris dans le thme parent. Vous tes donc libre de modifier
ce que bon vous semble en copiant certains fichiers du thme parent dans le thme
enfant afin de les adapter lapparence que vous souhaitez obtenir.
Dclaration du thme enfant

Comme pour la dclaration dun thme classique, un thme hrit consiste crer un
nouveau dossier (par exemple enfant) plac dans le rpertoire themes. Celui-ci doit
72
HRITAGE DE THME
contenir un fichier style.css indiquant des informations de base. En plus du nom du
nouveau thme, il faut indiquer quel thme sera le parent avec la ligne Template .
1
2
3
4
/*
Theme Name : Mon template h rit
Template : twentythirteen
*/
Ici, nous avons cr un template enfant du thme par dfaut Twenty Thirteen .
Notez bien que la directive Template doit contenir le nom du dossier du thme
parent, et non le nom du thme dclar dans le fichier style.css de ce dernier.
Si vous activez ce nouveau thme, vous vous rendrez compte que le contenu de la page
est bon, mais la mise en forme est compltement dtruite. Malgr lhritage de thme,
le fichier style.css du thme parent nest pas pris en compte. Cest une exception
lhritage des fichiers de thme.
Le fichier functions.php est une autre exception : si vous en crez un dans
le thme enfant, il sera inclus en plus de celui du thme parent, mais ne
lcrasera pas. Vous pouvez donc rajouter de nouvelles fonctions sans risquer
de rendre inutilisables celles qui taient cres par dfaut.
En revanche, rien ne vous empche de faire explicitement appel au fichier CSS du parent
partir de votre propre fichier style.css afin de rcuprer le design original.
1
@import url ( " ../ twentythirteen / style . css " ) ;
Le site a maintenant d reprendre son apparence originale. Partant de cette tape,

nous pouvons commencer rajouter de nouvelles rgles CSS pour modifier le thme
dorigine. Essayons par exemple de changer la couleur du nom du site.
1
2
3
. site - header h1 {
color : green ;
}
Si lon rafrachit lune des pages du site, le titre est bien devenu vert (voir la figure
8.2).
Surcharge de fichiers
Nous pouvons prsent modifier le style dun thme, mais pourquoi ne pas aller plus
loin et modifier le contenu des pages ? Par exemple, en bas de toutes les pages, vous
pouvez voir que la signature de lquipe WordPress apparat. Vous souhaitez la retirer ?
Aucun problme, il suffit de surcharger le template footer.php pour retirer le lien qui y
est gnr. Vous pouvez mme en profiter pour rajouter votre propre mention, comme
un copyright (voir la figure 8.3).
1
2
< footer id = " colophon " role = " contentinfo " >
< div class = " site - info " >
73
Figure 8.2 Nouvelle couleur du titre
3
4
5
Th me du z ro , reproduction interdite .
</ div >
</ footer >
Figure 8.3 Le nouveau pied-de-page

Vous avez donc remplac le pied-de-page original par votre contenu personnel. Ce
systme de surcharge fonctionne avec tous les fichiers de templates, nhsitez donc pas
lutiliser pour modifier des thmes existants.
Ajouter une zone de widgets

La majorit des thmes sous WordPress permettent lajout de widgets dans une ou
plusieurs zones des pages du site. Il est obligatoire quun thme supporte au moins
une zone de widgets pour que ceux-ci puissent tre ajouts via le menu Apparence >
Widgets de ladministration, nous allons donc dtailler la cration dune telle zone.
74
AJOUTER UNE ZONE DE WIDGETS
Enregistrer la zone
Pour pouvoir afficher une zone de widgets, il faut commencer par lenregistrer avec
la fonction register_sidebar(), qui prend un tableau en paramtre. Celui-ci peut avoir
jusqu sept cls :
id : un id unique qui servira afficher la zone ;

name : le nom de la zone qui sera affich dans ladministration ;
description : le texte afficher sur la page de gestion des widgets ;
before_widget : code HTML afficher avant chaque widget ;
after_widget : code HTML afficher avant chaque widget ;
before_title : code HTML afficher avant chaque titre de widget ;
after_title : code HTML afficher aprs chaque titre de widget.
Aucune des cls nest obligatoire mais mieux vaut toutes les dfinir vous-mme, sinon
WordPress choisira des valeurs par dfaut (entre autres, lid sera gnr de faon tre
unique). De plus, la fonction doit tre excute lors de laction widget_init, il faudra
donc passer par un appel la fonction add_action(). Dans le fichier functions.php du
thme, nous ajoutons donc le code suivant :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<? php
add_action ( ' widgets_init ' , ' zero_add_sidebar ') ;
function zero_add_sidebar ()
{
register_sidebar ( array (
' id ' = > ' my_custom_zone ' ,
' name ' = > ' Zone sup rieure ' ,
' description ' = > ' Apparait en haut du site ' ,
' before_widget ' = > ' < aside > ' ,
' after_widget ' = > ' </ aside > ' ,
' before_title ' = > ' <h1 > ' ,
' after_title ' = > ' </ h1 > '
));
}
Vous devriez maintenant voir apparatre, comme sur la figure 8.4, la nouvelle zone sur
la page ddition des widgets dans ladministration.
Afficher les widgets

Une fois la zone de widgets cre, vous pouvez lafficher o bon vous semble dans votre
thme avec un appel dynamic_sidebar(), prenant en paramtre lid de la zone choisie.
1
<div > <? php dynamic_sidebar ( ' my_custom_zone ') ;? > </ div >
Une mthode alternative : des widgets sans zone

Il est aussi possible dafficher un widget dans un thme sans passer par une zone ddie.
Mais si vous procdez ainsi, le widget ne sera pas modifiable dans le menu Apparence
75
Figure 8.4 Apparition de la nouvelle zone dans ladministration

> Widgets , cest donc une mthode moins commune dafficher les widgets.
Pour procder, nous devons appeler la fonction the_widget(), pouvant prendre trois
paramtres :
1
<? php the_widget ( $widget , $instance , $args ) ; ? >
Le paramtre $widget correspond au nom du widget ajouter, cest--dire la classe

PHP dcrivant le widget. La liste des widget natifs de WordPress est disponible cette
page de la documentation que vous retrouverez sur le code web suivant :

Liste des widgets natifs
B
Code web : 213568

Le paramtre $instance doit contenir les paramtres (sous forme dun tableau) du
widget, cest--dire ceux que vous auriez dfinis dans ladministration lors de lajout
du widget une zone, par exemple le titre. De nouveau, les valeurs possibles sont
indiques dans la documentation.
Enfin, $args ( nouveau un tableau) permet de choisir la valeur des variables before_widget, after_widget, before_title, after_title, que nous avons vues plus haut.
Seul le premier argument est obligatoire, il est donc trs simple dajouter un widget
avec cette fonction.
1
<? php the_widget ( ' WP_Widget_Calendar ') ; ? >
Ajouter un menu
Dclaration du menu
De mme que pour les widgets, laffichage dun menu passe par une zone ddie qui
doit tre au pralable dclare par le thme pour tre utilise lors de linitialisation
de WordPress. Lenregistrement se fait au travers de la fonction register_nav_menu(),
prenant deux paramtres : lidentifiant du menu, qui doit tre unique pour un thme
76
AJOUTER UN MENU
donn (un thme peut utiliser plusieurs menus), et le libell du menu, qui sera affich
dans le panneau dadministration pour lidentifier sur lcran de gestion des menus.
Il vous suffit donc dutiliser une action sur lvnement init comme dans lexemple
suivant.
1
2
3
4
5
6
<? php
add_action ( ' init ' , ' zero_add_menu ') ;
function zero_add_menu ()
{
regis ter_nav_menu ( ' main_menu ' , ' Menu principal ') ;
}
Cet emplacement doit maintenant apparatre dans linterface dadministration (la gestion des menus) ds lors que votre thme est actif (voir la figure 8.5).
Figure 8.5 Apparition de la nouvelle zone de menu
Laffichage
Pour afficher le menu, il vous suffit dappeler la fonction wp_nav_menu() qui
ncessite un tableau comme unique paramtre. Celui-ci peut contenir les diffrentes
cls suivantes :
theme_location : cest la zone de menu que vous souhaitez afficher. Ce sera le
plus souvent la seule cl vraiment ncessaire prciser ;
menu : si vous souhaitez insrer un menu prcis, spcifiez son nom ici ;
menu_class : ceci est la classe CSS appliquer au menu, la valeur par dfaut
tant menu ;
container : la balise HTML pour dfinir le conteneur du menu (par exemple
div, qui est la valeur par dfaut) ;
container_class : la classe CSS appliquer au conteneur du menu ;
before, after : du code HTML insrer avant (ou aprs) chaque lien du menu.
Vous devez donc fournir vos paramtres sous la forme dun tableau avec des paires
cl-valeur. Pour rappel, la cl pour indiquer le nom Menu est : theme_location.
Lappel le plus simple du menu tient donc simplement en une ligne :
1
<? php wp_nav_menu ( array ( ' theme_location ' = > ' main_menu ') ) ;
Pour que votre menu saffiche sur le site, noubliez pas de lassigner la zone
voulue dans le panneau dadministration.
77
En rsum
Un thme a besoin au minimum dun fichier style.css et index.php pour fonctionner.
Faire hriter un thme enfant permet de personnaliser un design existant
sans modifier le thme parent
Les widgets et les menus peuvent tre ajouts dans un thme. Pour cela, il faut
dclarer au moins une zone daccueil pouvant les accueillir.
78
Chapitre
Le processus de rendu
Difficult :
Aprs avoir cr un thme pour personnaliser lapparence du site avec notre propre code
HTML et CSS, nous allons dtailler le processus de rendu des pages dans WordPress,
afin de savoir quelles fonctionnalits sont disponibles pour modifier le comportement de
lapplication un point donn.
79
CHAPITRE 9. LE PROCESSUS DE RENDU
La boucle de rendu
Les templates tags
Prsentation
Lensemble des fonctions fournies et conues pour tre appeles directement dans les fichiers de thme, sont appeles des template tags. Ces fonctions de WordPress peuvent
avoir plusieurs utilisations :
afficher une contenu sur une page ;
vrifier une condition ;
rcuprer une information globale comme le titre du site ou son adresse.
Par exemple, la fonction bloginfo() permet de rcuprer toutes sortes de valeurs dans
la base de donnes en fonction du paramtre quon lui fournit : le nom du blog, le
rpertoire du thme utilis, la version de WordPress. . . Aussi, la fonction wp_title()
se charge de calculer la valeur du texte prsent dans la balise <title> de votre page
HTML en fonction de la page vue, ce qui nous vite de faire divers tests pour le
dterminer ( moins que vous ne vouliez afficher une valeur spcifique).
Le but des template tags est donc dafficher les lments ajouts par ladministrateur
du site (par exemple les articles) grce lutilisation de fonctions PHP spcifiques.
Structurer le site
Les template tags permettent aussi dappeler des portions de code affiches sur de
nombreuses pages, comme cest le cas de len-tte et du pied de page, prsents sur
lensemble du site. Pour ces lments, les fonctions get_header() et get_footer() ont t
cres et se chargent de linclusion dans votre page des fichiers header.php et footer.php
respectivement.
Ainsi, en crant ces deux fichiers avec les contenus pour len-tte et le pied de page, le
fichier index.php peut tre crit ainsi :
1
<? php get_header () ? >
2
3
<! - - ici s ' ins re le contenu principal de la page -->
4
5
<? php get_footer () ? >
Rendu dun contenu

Les pages et articles
Le rendu dune page ou dun article passe donc lui aussi par lutilisation dun template
tag particulier. Cependant, il doit suivre un processus prvu par WordPress qui est appel la boucle de rendu, consistant en un appel successif de fonctions qui permettent
80
LA BOUCLE DE RENDU
la rcupration des informations au sein dune boucle.
La boucle de rendu la plus simple fait appel au moins trois fonctions diffrentes de
WordPress afin de parcourir et afficher les articles rcuprs.
1
2
3
4
5
<? php
while ( have_posts () ) :
the_post () ;
the_content () ;
endwhile ; ? >
Pour la simplicit du code, il ny a pas de HTML dans les templates, mais

vous en aurez trs probablement besoin dans un vrai thme pour obtenir le
design de votre choix.
La fonction have_posts() renvoie un boolen pour savoir sil reste des objets
afficher sur la page en cours. Par exemple, lorsque lon cherche lister les derniers
articles dun blog, la fonction renverra true tant que tous les articles rcuprs dans
la base de donnes nauront pas t affichs.
lintrieur de la boucle, la fonction the_post() effectue la rcupration dun article. chaque appel de cette fonction, un curseur interne WordPress slectionne
larticle suivant dans la liste de ceux que lon a rcuprs. Lorsque le curseur arrivera au dernier article, alors la mthode have_posts() renverra false et la boucle se
terminera.
Une fois que le curseur est positionn sur un article, il faut appeler la fonction
the_content() qui se charge de laffichage du contenu de larticle en lui mme. Cette
fonction est donc conue pour fonctionner lintrieur de la boucle de rendu, car
elle est associe au rendu dun article donn. De mme, lutilisation de la fonction
the_title() au sein de la boucle permettra dafficher le titre de larticle en cours.
Pourquoi utiliser une boucle lorsque lon sait que lon aura un seul objet, par
exemple une page ?
En effet, utiliser la boucle de rendu pour une page peut paratre lourd alors que lon sait
lavance quil ny aura quun seul passage. Noubliez cependant pas que WordPress
a un systme de fallback (cest--dire une procdure par dfaut) pour lutilisation des
templates. Il est donc possible (et cest souvent le cas) quun template donn soit utilis
pour le rendu des pages et des listes darticles, qui seront quant eux plusieurs sur une
mme page HTML. Utiliser la boucle permet donc davoir des templates plus gnriques
et qui fonctionneront quel que soit lentit que lon cherche afficher.
Les commentaires
Avec laffichage des publications viennent aussi les commentaires de vos visiteurs, que
vous aurez besoin dintgrer dans votre thme. nouveau, tout se joue avec lutilisation
81

des bons template tags lendroit o vous dsirez afficher les commentaires. Tout
dabord, la fonction comments_template(), appele dans la boucle de rendu, inclut le
fichier comments.php que nous verrons plus bas et qui se charge de la mise en forme
des commentaires. Ensuite, la fonction comment_form() cre le formulaire pour les
utilisateurs voulant ajouter un nouveau commentaire une publication. La boucle de
rendu se complte donc encore un peu avec ces nouvelles fonctions.
1
2
3
4
<? php
while ( have_posts () ) :
the_post () ;
the_content () ;
5
6
7
8
comme nts_template () ;
comment_form () ;
endwhile ; ? >
Le fichier comments.php, si lon met de ct la mise en forme, na besoin que dappeler

wp_list_comments() pour afficher les commentaires associs larticle. Cette fonction
se charge de litration au travers de la liste des commentaires associs la publication
actuellement parcourue par la boucle de rendu.
1
2
3
<ol >
<? php wp_list_comments () ; ? >
</ ol >
Les filtres
Mme si nous avons notre disposition toutes les fonctions ncessaires pour rcuprer
les contenus du site, il y a fort parier pour que vous vouliez, un moment ou un
autre, modifier la valeur de retour dune fonction native de WordPress.
Prenons la fonction the_title(), qui permet dobtenir le titre de larticle ou de la page
en cours. Supposons que vous ne vouliez afficher au maximum que les 50 premiers
caractres du titre si celui-ci est trop long. Regardons le prototype de la fonction (dans
le fichier wp-includes/post-template.php) :
1
<? php function the_title ( $before = ' ' , $after = ' ' , $echo =
true )
Le fonction permet de rajouter du code HTML avant et aprs le titre avec les deux
premiers paramtres, tandis que le troisime indique si elle doit retourner la valeur du
titre ou lafficher elle-mme via un echo.
Ce dernier argument pourrait tre utilis (en choisissant la valeur false) pour faire un
traitement la suite de la rcupration du titre. En revanche, ce traitement particulier
devrait tre excut pour chaque template qui utilise cette fonction : cest lourd et cela
charge les templates de traitements supplmentaires.
Pour viter cela, WordPress propose un systme de filtres sur lesquels vous pouvez
brancher des fonctions effectuant un traitement comme celui que lon dsire obtenir.
82
LES FILTRES
Appeler un filtre
Pour bien comprendre comment WordPress vous permet dajouter un traitement particulier un endroit du code, il faut voir comment les filtres sont appels.
La fonction apply_filters() dclenche lapplication de toutes les fonctions rattaches
une cl de filtre donne. Cette cl de filtre est le premier argument de la fonction, suivi
par les paramtres envoys.
Si nous revenons la fonction the_title(), nous voyons quelle fait elle-mme un
appel la fonction get_the_title() situe dans le mme fichier (wp-includes/posttemplate.php). Cest cette dernire qui excute apply_filters() avant de renvoyer la
valeur du titre le larticle que lon dsire obtenir. Cet appel contient trois arguments :
1
<? php apply_filters ( ' the_title ' , $title , $id ) ;
La cl du filtre est donc the_title, tandis que deux arguments sont passs aux fonctions
de retour : le titre de larticle et son ID dans la base de donnes. partir de ces donnes
qui seront transfres au filtre, vous avez les moyens dappliquer vos traitements.
Brancher un filtre
Pour brancher une fonction de filtre, nous utilisons la fonction add_filter() prenant
deux paramtres : le nom du filtre et une fonction de rappel lorsque le filtre doit tre
excut.
Pour cela, vous devrez utiliser le fichier functions.php (crez-le si vous ne lavez pas
encore) de notre thme et qui est inclus automatiquement par WordPress sil existe.
1
<? php add_filter ( ' the_title ' , ' truncate_long_title ') ;
Bien entendu il faut maintenant dclarer la fonction truncate_long_title() pour que le

filtre fonctionne. Faites cela la suite, toujours dans functions.php.
1
2
3
4
5
6
7
8
<? php
function t ru n cate_long_title ( $title )
{
if ( strlen ( $title ) > 50 ) {
$title = substr ( $title , 0 , 50 ) . ' ... ';
}
return $title ;
}
Maintenant, si vous crez un article avec plus de 50 caractres dans son titre, il sera
coup.
Ce quil faut vraiment retenir ici, cest que nous avons pu tendre une fonctionnalit
de WordPress sans pour autant avoir modifi le code du cur de lapplication : tout
le code supplmentaire se trouve uniquement dans le thme que nous avons cr. Cest
un principe de dveloppement auquel il faut se tenir si lon veut proposer du code
maintenable et pouvant rester fonctionnel mme avec de nouvelles versions du moteur.
83
Ajouter des templates personnaliss

Nous avons un dernier point important claircir pour conclure cet aperu des thmes
de WordPress. Jusque l, vous savez comment dclarer des fichiers de thme dont le nom
est dfini par WordPress (comme content.php ou footer.php) et comment les surcharger
grce aux thmes enfants. Mais comment utiliser des fichiers totalement personnaliss
qui ne sont utilisables que sur votre site et dont le choix du nom sera arbitraire ?
On ne peut pas simplement utiliser la fonction require de PHP ?
Cest une solution envisageable, mais qui manque beaucoup de souplesse, car vous
devrez indiquer le chemin du fichier lors de lappel.
1
2
3
4
<? php
require __DIR__ . '/ mon - template . php ';
// ou mieux :
require STYLESHEETPATH . '/ mon - template . php ';
La constante STYLESHEETPATH correspond au chemin du rpertoire de

votre thme, cest--dire le dossier dans lequel se situe le fichier style.css. Il
nest donc pas ncessaire de connatre le nom du thme pour avoir le chemin
des fichiers.
Malheureusement avec ce fonctionnement, nous perdons tout le mcanisme de fallback
de WordPress. En effet, si le fichier nexiste pas, nous aurons une erreur dexcution
lors de la tentative dinclusion. De plus, dans le premier cas, il nest pas possible pour
un thme enfant de surcharger uniquement le fichier mon-template.php, il faudra aussi
surcharger les appels. Et dans le second cas dinclusion, le fichier devrait obligatoirement tre redfini dans le thme enfant, ce qui va lencontre du systme dhritage
de thme.
Pour rsoudre ce problme, il existe la fonction get_template_part() dfinie dans le
fichier wp-includes/general-template.php comme suit :
1
<? php function get_template_part ( $slug , $name = null )
Cette fonction inclut le fichier de template de la forme $slug-$name.php, ou $slug.php

si $name vaut null ou que le premier nexiste pas, tout en conservant le mcanisme de
fallback.
Ainsi, lappel notre fichier spcifique devient tout simplement :
1
2
84
<? php
get_t emplate_part ( 'mon - template . php ' ) ;
AJOUTER DES TEMPLATES PERSONNALISS

Nhsitez pas vous servir de largument $name pour cette fonction si la
fonctionnalit spcifique que vous dsirez coder doit comporter plusieurs templates. De cette faon, vous pouvez regrouper sous le mme prfixe (largument $slug) plusieurs templates similaires.
En rsum
La boucle de rendu est charge dafficher lensemble des articles correspondant
une page donne du site.
Les fonctions de filtres permettent de modifier le contenu de la valeur de retour
de certaines fonctions, comme le titre de la page ou le contenu dun article.
Vous pouvez inclure des fichiers spcifiques avec la fonction get_template_part().
85
86
Chapitre
10
Linternationalisation
Difficult :
Lorsquun site peut tre visible de tous ou que lon dveloppe des fonctionnalits (thmes ou
plugins) pouvant tre rutilises par nimporte qui dans le monde, il est essentiel de penser
la traduction des textes qui seront affichs sur lcran des utilisateurs. Pour cela, il faut
prparer la traduction des chanes de caractres en utilisant des fonctions de traduction,
puis raliser les traductions de vos textes dans les langues que vous souhaitez proposer.
87
CHAPITRE 10. LINTERNATIONALISATION
Les fonctions de traduction

Traduire un texte
La traduction dun texte passe toujours par une fonction de traduction dont le travail
est de trouver la correspondance entre une chane de caractres dans une langue donne
(gnralement langlais) et la chane traduite dans une autre langue. La chane originale
est appele cl de traduction. Cest elle qui sera crite dans le code PHP et que
lon traduira vers le langage dsir dans des fichiers annexes contenant lensemble des
traductions possibles.
Comment WordPress dtermine-t-il la langue de lutilisateur ?
La langue dans laquelle traduire le texte est dtermine par la locale de lapplication.
Cest un code permettant de dterminer le pays et la rgion parlant la langue choisie.
Par exemple, la locale de la France est fr_FR, celle des tats-Unis est us_EN. La
locale de votre application WordPress est inscrite dans le fichier wp-config.php, lorsque
la constante WPLANG est dfinie.
1
2
<? php
define ( ' WPLANG ' , ' fr_FR ') ;
Pour traduire une cl donne, WordPress utilise une fonction nomme __() (deux
underscores successifs) qui prend comme paramtre la cl de traduction. Sa valeur de
retour est le texte traduit dans la langue souhaite. Il est aussi possible dutiliser la
fonction _e(), qui fonctionne exactement de la mme faon que la prcdente, mais
qui utilise un echo pour afficher directement le rsultat de la traduction, au lieu de
la renvoyer laide dun return. Elle est donc trs adapte une utilisation dans les
fichiers de thmes.
En reprenant le fichier footer.php que nous avions modifi plus tt dans notre thme,
nous pouvons placer le texte (en anglais maintenant) spcifique notre thme dans
une fonction de traduction.
1
<? php _e ( ' Zero theme , copy is forbidden . ') ; ? >
Le texte nest pas traduit quand jaffiche la page, cest normal ?
Cest parfaitement normal : nous navons indiqu nulle part comment traduire le texte.
Dans le cas o la fonction de traduction ne trouve pas de correspondance entre la cl de
traduction et la locale demande, elle renvoie directement la cl. Ainsi, si lon demande
la traduction dune cl qui na pas t intgre dans les fichiers de traductions, aucune
modification ne sera effectue. Il faudra donc absolument rajouter la correspondance
dans la langue choisie !
88
AJOUTER DES TRADUCTIONS
Le domaine de traduction
Les fonctions de traduction __() et _e() prennent en plus de la cl un second paramtre
optionnel correspondant au domaine de traduction. Le domaine de traduction permet
de spcifier plus prcisment lorigine de la traduction que vous utilisez, notamment si
celle-ci est spcifique un thme ou un plugin donn. Dans ce cas, vous pourrez placer
toutes les traductions du domaine dans un fichier unique, sans avoir modifier dautres
fichiers de traductions.
Par exemple, dans le thme TwentyThirteen, le texte Laisser un commentaire visible
sous les articles est dclar ainsi :
1
2
<? php
__ ( ' Leave a comment ' , ' twentythirteen ' )
Pour tre utilis, le domaine doit auparavant tre dclar, par exemple dans le fichier
functions.php de votre thme, laide de la fonction load_theme_textdomain(). Cette
fonction attend de recevoir le domaine dclarer et le chemin vers les fichiers de
traduction pour ce domaine. Par convention, le chemin choisi est un dossier languages
dans le dossier du thme. Le thme TwentytThirteen procde donc lui aussi de cette
manire :
1
2
<? php
lo a d _ t h e m e _ t e xt domai n ( ' twentythirteen ' , g et_ te mpl ate _d ire ct ory
() . '/ languages ' ) ;
Si les fichiers de traduction ne sont pas trouvs dans le dossier dclar, comme
cest le cas pour TwentyThirteen, alors WordPress ira les chercher dans le
dossier wp-content/languages/themes.
Ajouter des traductions

Pour ajouter de nouvelles traductions, nous devons gnrer les fichiers qui contiendront
les associations entre les cls de traduction et les textes traduits dans chaque langue.
Les fichiers dont WordPress a besoin sont des fichiers MO (Machine Object) crits
en langage binaire et donc illisibles pour nous. Heureusement, nous pouvons crire les
fichiers de traduction dans un format lisible puis les convertir en fichiers MO pour
WordPress.
Utiliser Poedit
Nous allons utiliser le logiciel Poedit pour grer les traductions de notre thme car il a
lavantage dtre disponible sous Windows, Mac et Linux. De plus, il est relativement
simple lutilisation. Vous pouvez le tlcharger sur le lien indiqu dans le code web
suivant :
89

Tlcharger Poedit
B
Code web : 702504

.

Une fois tlcharg et install, lancez Poedit. Vous devez, comme sur la figure 10.1,
arriver sur une interface trs minimaliste.
Figure 10.1 Laccueil de Poedit
La premire chose faire est de crer un Catalogue , cest ce qui correspondra

un domaine dans WordPress. Ouvrez le menu Fichier > Nouveau catalogue , puis
ouvrez longlet Chemins des sources dans la fentre qui souvre. Poedit est capable
de lire les fichiers PHP la recherche de fonctions de traduction. Il vous propose donc
dindiquer le chemin de vos fichiers PHP pour les lire la recherche de vos cls de
traduction. Cliquez donc sur le bouton Nouvel lment , puis crivez le chemin
complet vers votre thme dans la zone de texte (voir la figure 10.2).
Allez ensuite dans Mots-cls source et ajoutez le nom des deux fonctions permettant
deffectuer des traductions dans WordPress : _e (underscore puis e ) et __ (deux
underscores). Cela permet Poedit de savoir quelle fonction chercher dans le code pour
rcuprer les cls de traduction (voir la figure 10.3).
Choisissez ensuite Accepter et vous devriez voir la liste des textes traduisibles dans
le thme choisi (voir la figure 10.4).
Il ne vous reste plus qu slectionner la ligne traduire puis crire la traduction de
chaque cl dans la case Traduction en bas. Une fois termin, allez dans Fichier
> Enregistrer sous. . . pour sauvegarder les traductions au format PO ainsi quune
copie au format MO.
90
Figure 10.2 Le chemin vers vos fichiers sources
Figure 10.3 Les noms des fonctions de traductions
91
Figure 10.4 Affichage de la liste des cls de traduction

Si vous souhaitez modifier des traductions aprs avoir dj export les fichiers,
vous pouvez rouvrir le fichier PO puis le sauvegarder avec vos changements,
le fichier MO sera lui aussi mis jour.
Utiliser les traductions dans un thme

Pour que le fichier de traductions soit utilis dans le thme, nous devons placer le
fichier MO dans le dossier wp-content/themes/zero/languages. Le nom du fichier MO
doit tre de la forme locale.mo, par exemple fr_FR.mo.
Il ne manque plus que la dclaration du domaine dans le fichier functions.php, et lappel
de celui-ci dans les fonctions de traduction.
<? php
l o a d _ t h e m e_tex tdomai n ( ' zero ' , ge t _ st y l es h e et _ d ir e c to r y () . '/
languages ' ) ;
<? php _e ( ' Zero theme , copy is forbidden . ' , ' zero ') ; ? >
92
En rsum
La traduction est traite par les fonctions __() et _e().
Les valeurs dune cl de traduction dans une langue donne doivent tre crites
dans des fichiers PO compils au format MO.
Le domaine de traduction permet de regrouper les traductions, notamment pour
les thmes et les plugins.
93
94
Chapitre
11
TP : Personnalisez votre thme

Difficult :
Nous avons dores et dj parcouru de nombreuses fonctionnalits de WordPress pour
lesquelles il vous est possible de faire des dveloppements spcifiques. Lobjectif tant
dadapter lapplication au design que vous dsirez. Ce TP est loccasion de mettre en
pratique ces notions, en crant votre premier thme original !
95
CHAPITRE 11. TP : PERSONNALISEZ VOTRE THME
Prsentation de lexercice
Consignes
Pour cet exercice, vous devez crer un thme original sans base de dpart et sans utiliser
lhritage de thme. De plus, votre thme devra inclure les lments suivants :
au moins un emplacement pour le menu ;

au moins une zone de widget ;
le support des pages, articles et commentaires ;
les diffrents lments doivent tre judicieusement spars en utilisant les template tags ;
les portions de texte faisant partie du design doivent pouvoir tre traduites.
En plus de ces points, vous pouvez, si vous vous sentez laise, utiliser le systme de
fallback de WordPress en crant un affichage spcifique pour une page catgorie (avec
le fichier category.php), ou bien pour les publications de type Page (avec un fichier
page.php).
Si vous tes en mal dinspiration, voici (dans la figure 11.1) la page daccueil du thme
ralis pour cet exercice et qui inclut les lments demands.
Figure 11.1 Exemple de ralisation
96
CORRECTION
Indications
Vous ne savez pas par o commencer ? Voici un exemple de marche suivre, que vous
pouvez appliquer :
dclarer le nouveau thme avec les fichiers index.php et style.css ;
mettre en place les diffrents fichiers PHP dont vous aurez besoin ;
construire le fichier index.php petit petit en testant et vrifiant rgulirement
que les lments se comportent comme prvu.
Enfin, prenez le temps dimplmenter chaque fonctionnalit demande en y allant progressivement. Rien ne presse, limportant tant darriver au bout !
Correction
Dclarer les emplacements du menu et du widget
Commenons par le fichier functions.php, afin de dclarer tout de suite un emplacement
pour le menu et une zone de widget, que nous utiliserons par la suite dans le thme.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<? php
add_action ( ' widgets_init ' , ' tp_add_sidebar ') ;
function tp_add_sidebar ()
{
register_sidebar ( array (
' id ' = > ' zone_widget_droite ' ,
' name ' = > ' Zone lat rale droite ' ,
' description ' = > ' Apparait sur la droite site ' ,
' before_widget ' = > ' < aside > ' ,
' after_widget ' = > ' </ aside > ' ,
' before_title ' = > ' <h1 > ' ,
' after_title ' = > ' </ h1 > '
));
}
15
16
17
18
19
20
add_action ( ' init ' , ' tp_add_menu ') ;

function tp_add_menu ()
{
regis ter_nav_menu ( ' main_menu ' , ' Menu principal ') ;
}
Gestion des lments affichs

Nous continuons ensuite avec index.php, dont le rle est de rassembler la gestion de
tous les lments affichs sur le site. Nous devons appeler len-tte, la barre latrale
pour les widgets et le pied de page. Au milieu, nous ajoutons la boucle de rendu qui se
charge dafficher les publications en fonction de la page sur laquelle nous nous trouvons.
97

1
2
3
4
5
6
7
8
9
10
11
12
<? php get_header () ; ? >

< div class = " container " >
< div class = " content " >
<? php
while ( have_posts () ) {
the_post () ;
get_t emplate_part ( ' content ') ;
}? >
</ div >
<? php get_sidebar () ? >
</ div >
<? php get_footer () ;
Vous pouvez noter lutilisation dun template spcifique pour laffichage du contenu des
publications grce la fonction get_template_part().
Dans le fichier header.php, nous ajoutons le dbut du code HTML pour nos pages,
avec linclusion du fichier CSS, le titre du blog ainsi que son slogan avec la fonction
bloginfo(), et le menu qui a t dclar plus haut.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<! doctype html >

< html >
< head >
< title > <? php echo wp_title () ? > </ title >
< link rel = " stylesheet " href = " wp - content / themes / themetp /
style . css " type = " text / css " / >
</ head >
< body >
< header class = " header " >
< div class = " container " >
<h1 > <? php bloginfo () ? > </ h1 >
<h2 > <? php bloginfo ( ' description ' ) ; ? > </ h2 >
<? php wp_nav_menu ( array ( ' theme_location ' = > ' main_menu ') )
?>
</ div >
</ header >
Le pied de page est ici trs simple. Vous pouvez y ajouter une mention de lauteur et
le nom de votre thme par exemple. Pensez donner la possibilit de traduire le texte
avec la fonction _e() !
1
2
3
4
5
< footer >

<p > <? php _e ( ' Mon premier th me ') ? > </p >
</ footer >
</ body >
</ html >
Pour afficher les widgets, nous passons par le fichier sidebar.php, appel grce la
fonction get_sidebar() depuis index.php.
1
2
98
< div class = " widgets " >

<? php dynamic_sidebar ( ' zone_widget_droite ') ; ? >
CORRECTION
3
</ div >
Il nous reste maintenant afficher le contenu des publications en lui-mme. Faisons

cela dans le fichier content.php et affichons le titre de chaque article, son contenu puis
les commentaires associs, ces derniers tant traits dans comments.php.
1
2
3
4
5
6
7
8
1
2
3
< article class = " post " >

<h1 > <? php the_title () ? > </ h1 >
<div >
<? php the_content () ; ? >
</ div >
<? php comments_template () ? >
<? php comment_form () ; ? >
</ article >
<ol >
<? php wp_list_comments () ; ? >
</ ol >
Vous tes maintenant capables de mettre en place (ou de modifier) un thme WordPress
pour ladapter aux besoin dun site. Noubliez pas que lapparence est la premire chose
que lon voit lorsque lon arrive sur une page web. Il est donc important dy apporter
du soin, notamment avec les rgles de formatage CSS !
Corrig type
Vous trouverez donc ci-dessous le fichier CSS utilis pour raliser lillustration dexemple
prsente avec les consignes de ce TP.
Nhsitez pas aller sur le code web suivant pour laffichage de ce code :

Corrig type
B
Code web : 207051

1
2
3
/*
Theme Name : Th me TP
*/
4
5
6
7
8
9
10
11
12
13
14
* {
margin : 0 ;
padding : 0 ;
text - decoration : none ;
color : black ;
font - family : sans - serif ;
}
body { background : # F5F5F5 ;}
h1 , h2 { color : # 555 ;}
a { color : # DDAA88 }
15
16
. container {
99

margin : 0 auto ;
width : 900px ;
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
}
. header {
background : # E9E9E9 ;
border - bottom : 1px solid # E0E0E0 ;
margin - bottom : 20px ;
padding - top : 10px ;
}
. header h1 {
color : # CC3030 ;
font - size : 40px ;
margin : 10px 0 ;
}
. header h2 {
color : # FF9090 ;
}
. content {
display : inline - block ;
width : 650px ;
}
. menu li {
border - right : 1px solid # DDD ;
padding : 10px ;
list - style : none ;
}
. menu li : last - child { border : none ;}
. menu a { color : # 555 ;}
. current - menu - item a { color : # E44 ;}
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
. widgets {
width : 200px ;
vertical - align : top ;
}
. widgets li { list - style : none ;}
. widgets aside {
background : # FFF ;
border - radius : 3px ;
box - shadow : 0 2px 6px - 2px # 999 ;
margin : 0 0 15px ;
padding : 15px ;
}
. widgets aside h1 {
border - bottom : 1px dashed # CCC ;
color : # 555 ;
margin - bottom : 10px ;
100
CORRECTION
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
. post {
background : # FFF ;
border - radius : 3px ;
box - shadow : 0 2px 6px - 2px # 999 ;
margin : 0 10px 15px ;
padding : 20px ;
}
. post h1 { margin - bottom : 15px ;}
. comment - respond {
border - top : 1px solid # DDD ;
margin : 20px 5px ;
padding - top : 10px ;
}
footer {
text - align : center ;
background : # E9E9E9 ;
border - top : 1px solid # E0E0E0 ;
margin - top : 20px ;
padding : 10px 0 ;
}
101
102
Troisime partie
Dvelopper un plugin complet
103
Chapitre
12
Crer des plugins

Difficult :
Aprs avoir vu thmes, nous aborderons ici le second point majeur de WordPress : les
plugins. Le support de ces modules additionnels a pour objectif de vous offrir un moyen
sans limite de rajouter de nouvelles fonctionnalits WordPress, quelles soient spcifiques
votre site ou bien rutilisables les autres. Grce aux plugins, vous pourrez ajouter tout
ce dont vous avez besoin. Aprs avoir abord les principes de la cration dun plugin sous
WordPress, nous suivrons pas pas les tapes de cration travers une tude de cas.
105
CHAPITRE 12. CRER DES PLUGINS
Dclarer le plugin
De mme que les thmes, les plugins ont une structure de base trs simple. Seul un
minimum dactions doit tre excut pour pouvoir les dclarer, et cest ensuite vous
dy rajouter des fonctions pour complter leur structure.
Les plugins doivent tous tre situs dans le dossier wp-content/plugins, et peuvent tre
constitus dun ou plusieurs fichiers.
Tout dabord, crons un dossier zero dans lequel seront placs les fichiers PHP du
plugin, ainsi quun premier fichier zero.php.
Ce premier fichier ne doit pas obligatoirement tre nomm comme le dossier
parent, mais cest prfrable par convention.
Pour que le plugin soit reconnu par WordPress, il faut ncessairement dclarer au moins
son nom dans le fichier principal. Nous faisons cela via un commentaire au dbut du
fichier.
1
2
3
4
<? php
/*
Plugin Name : Nom du Plugin
*/
Si vous souhaitez donner plus dinformations propos de votre plugin, notamment

si vous souhaitez le distribuer, il existe dautres informations quil est recommand
dindiquer la suite du nom.
Plugin URI : ladresse du site de votre plugin dcrivant son fonctionnement et
donnant des informations complmentaires ;
Description : un paragraphe de description du plugin, affich en parcourant la
liste des plugins ;
Version : la version du plugin ;
Author : votre nom ;
Author URI : ladresse de votre site ;
License : un nom de licence pour le code du plugin.
Nous pouvons donc avoir un en-tte comme celui-ci :
1
2
3
4
5
6
7
8
9
10
<? php
/*
Plugin Name : Zero plugin
Plugin URI : http :// zero - plugin . com
Description : Un plugin d ' introduction pour le d veloppement
sous WordPress
Version : 0 . 1
Author : Midnight Falcon
Author URI : http :// votre - site . com
License : GPL2
*/
106
NOS PREMIRES FONCTIONS

Votre plugin est maintenant reconnu par WordPress ! Pour le vrifier, allez dans linterface dadministration. Vous devez le voir apparatre dans la liste des extensions. Si
cest le cas, activez-le (voir la figure 12.1) !
Figure 12.1 Le plugin est reconnu par WordPress
Nos premires fonctions

crivons maintenant notre premire fonction dans ce plugin. Tout ce qui est dclar
dans le plugin peut tre appel depuis nimporte quel autre endroit du code, que ce
soit depuis un thme ou un autre plugin. Il est donc tout fait possible pour un plugin
dutiliser les fonctions dun autre plugin, si celui-ci a t activ sur votre site.
Malgr cela, il est prfrable dutiliser au maximum le systme modulaire de WordPress
pour appeler vos fonctions, comme nous lavons fait plus tt avec les filtres et la fonction
add_filter(). De cette faon, il nest pas ncessaire dappeler les fonctions du plugin
en dehors de celui-ci, ce qui limite les dpendances et les besoins de crer des appels
depuis lextrieur. En particulier, utiliser les filtres vous permet de rendre votre plugin
compatible avec nimporte quel thme de votre site, puisquil enregistra de lui-mme
les actions quil doit effectuer.
Rajouter un filtre simple

Notre premire tche sera de modifier sur toutes les pages lattribut <title> pour
indiquer que le plugin est activ. Pour ce faire, le filtre wp_title, appel avec la fonction
the_title(), est idal pour nous.
1
2
3
4
5
<? php
add_filter ( ' wp_title ' , ' ze ro _mo di fy_ pag e_ tit le ' , 20 ) ;
function z e r o _m od ify _p age _t itl e ( $title ) {
return $title . ' | Avec le plugin des z ros ! ' ;
}
Pour viter au maximum les conflits dans les noms de fonctions avec un autre
plugin, il est conseill de les prfixer, ici avec zero.
107

Dornavant, tant que le plugin sera activ, toutes les pages verront leur titre mis jour
comme crit dans la fonction. En allant par exemple sur une page intitule propos
de nous , nous trouvons le code HTML suivant :
1
2
3
< head >

<! - - ... -->
< title > propos de nous | Wordpress pour les z ros | Avec
le plugin des z ros ! </ title >
Utiliser une structure objet

Afin dutiliser toute la puissance de PHP dans notre plugin, nous allons structurer
notre plugin laide de classes. Ce nest bien entendu pas obligatoire, un plugin peut
tout fait fonctionner avec des fonctions dans lespace global, mais la programmation
objet permet de mieux organiser une application de grande ampleur, nous allons donc
tout de suite restructurer le code de notre plugin en ce sens.
Nous crons donc dans le fichier zero.php une classe Zero_Plugin avec pour mthode
le filtre que nous avions utilis prcdemment.
1
2
3
4
5
6
7
<? php
class Zero_Plugin
{
public function __construct ()
{
add_filter ( ' wp_title ' , array ( $this , ' modify_page_title '
) , 20 ) ;
}
8
9
10
11
12
13
public function modify_page_title ( $title )

{
}
14
15
new Zero_Plugin () ;
Comme vous le voyez, lutilisation de la fonction add_filter() a t lgrement modifie

pour la spcification de la fonction de rappel. tant donn que nous avons dplac la
fonction modify_page_title() dans un objet, il faut aussi fournir linstance de lobjet
pour pouvoir appeler la fonction ! Ceci se fait en passant comme argument un tableau
avec linstance de lobjet utiliser et le nom de la mthode de classe appeler.
Une structure multifichiers

Toujours dans le but de structurer votre plugin, vous aurez probablement besoin dcrire
du code dans diffrents fichiers, qui contiendront par exemple diffrentes classes si vous
108
UNE STRUCTURE MULTIFICHIERS

choisissez dutiliser des objets.
Dans une application PHP, lutilisation de plusieurs fichiers passe par linclusion de
ceux-ci au travers dune directive include ou include_once. Au sein de WordPress, seul
le fichier principal dun plugin activ (celui qui dclare le nom du plugin) est inclus
automatiquement au chargement de lapplication. Tous les autres fichiers doivent donc
tre inclus par le dveloppeur sil dsire les utiliser. Dans le cas contraire, les ventuelles
classes et mthodes contenues ne seront pas utilisables.
La tche de notre fichier zero.php sera donc plus particulirement de charger les fichiers
ncessaires au chargement du plugin. Pour illustrer cela, nous allons une dernire fois
rorganiser la structure de notre code : une nouvelle classe Zero_Page_Title, dans
un fichier pagetitle.php, contiendra le filtre de titre que nous avons cr et la classe
Zero_Plugin se chargera dinstancier Zero_Page_Title (et toute autre classe que nous
pourrons ajouter ultrieurement). De cette faon, nous avons un point dentre qui
prend en charge les crations dobjets, eux-mmes effectuant des traitements spcifiques, ce qui facilitera lajout de fonctionnalits.
Le code final des deux classes est donc le suivant.
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
<? php
class Zero_Plugin
{
{
include_once plugin_dir_path ( __FILE__ ) . '/ page_title .
php ';
new Zero_Page_Title () ;
}
}
<? php
class Zero_Page_Title
{
{
add_filter ( ' wp_title ' , array ( $this , ' modify_page_title '
) , 20 ) ;
}
8
9
10
11
12
13
public function modify_page_title ( $title )

{
}
109
Un plugin complet
Il est maintenant temps daller plus loin dans la cration de plugin en exploitant au
maximum les possibilits offertes par WordPress. Nous allons pouvoir commencer
rentrer dans les sujets avancs de la cration de plugin autour dun objectif prcis : la
mise en place dun plugin de newsletter, que nous crerons au fil des chapitres suivants.
Les objectifs
Le plugin que nous allons mettre en place est relativement simple. Il consiste proposer
aux visiteurs de sinscrire sur le site en fournissant leur adresse email afin de recevoir
une newsletter concernant lactualit du site.
Plusieurs sujets entrent en uvre, commencer par la cration dun widget, affich sur
toutes les pages, dans le but de rcuprer les adresses email. La base de donnes devra
comporter une table supplmentaire afin de stocker la liste des adresses qui il faut
envoyer la newsletter. Enfin, linterface dadministration permettra ladministrateur
de dfinir le contenu de cet email, son objet, ladresse email de lexpditeur et un bouton
pour dclencher lenvoi.
Le chantier couvrira donc les aspects majeurs de WordPress, il est temps de sy attaquer
sans plus tarder !
La classe Zero_Newsletter
Afin de garder une structure cohrente dans notre module, nos allons crer une nouvelle
classe Zero_Newsletter qui se chargera de tout le code concernant la fonctionnalit
de newsletter. Plaons-la dans un fichier newsletter.php, qui sera pour linstant assez
simple.
1
2
3
4
5
6
7
<? php
class Zero_Newsletter
{
{
}
}
Noubliez pas de modifier le constructeur de la classe Zero_Plugin pour instancier un

nouvel objet Zero_Newsletter.
1
2
3
<? php
include_once plugin_dir_path ( __FILE__ ) . '/ newsletter . php ';
new Zero_Newsletter () ;
110
UN PLUGIN COMPLET
En rsum
Tous les plugins sont placs dans le rpertoire wp-content/plugins.
Le plugin est dclar avec un commentaire dans len-tte du fichier principal.
Un plugin doit tre de prfrence dcoup en fichiers suivant les fonctionnalits
ajoutes.
111
112
Chapitre
13
Crer des widgets

Difficult :
Comme nous avons pu le voir au dbut du cours, les widgets sont des lments de base bien
pratiques de linterface graphique. Ils permettent de dplacer des blocs de fonctionnalits
sur diffrentes zones de vos pages, mais pour tre utilisables, encore faut-il en avoir dfini
le comportement dans le code auparavant !
113
CHAPITRE 13. CRER DES WIDGETS
Dclarer un widget
Commenons tout de suite par le widget afficher sur le site pour linscription des
emails.
Une nouvelle classe

Tous les widgets sont des objets qui doivent hriter de la classe WP_Widget (dclare
dans le fichier wp-includes/widgets.php) et surcharger au moins deux mthodes.
Avant tout, le constructeur de la classe WP_Widget doit tre appel par le constructeur
de la classe fille afin de dfinir :
un identifiant pour le widget ;
un titre afficher dans ladministration ;
ventuellement des paramtres supplmentaires comme la description du widget
(elle aussi affiche dans le panneau widget de ladministration).
<? php function __construct ( $id_base , $name , $widget_options =
array () , $control_options = array () )
La seconde fonction surcharger est la mthode widget(), dfinie ainsi :

<? php function widget ( $args , $instance )
Le premier argument est un tableau contenant des paramtres daffichage que nous dtaillerons lors de limplmentation de la mthode. Ils permettent notamment dobtenir
un rendu du widget qui correspond au thme graphique utilis. Le second argument
contient les paramtres du widget sauvegards dans la base de donnes, cest--dire les
paramtres que ladministrateur a dfinis lors de lajout du widget la zone ddie.
1
2
3
4
<? php
{
parent :: __construct ( ' zero_newsletter ' , ' Newsletter ' , array (
' description ' = > ' Un formulaire d \ ' inscription la
newsletter . ') ) ;
}
6
7
8
9
10
public function widget ( $args , $instance )

{
echo ' widget newsletter ';
}
La classe de notre widget est maintenant cre, il faut donc dire WordPress que nous
voulons lutiliser, cest--dire la dclarer en tant que widget.
Pour cela, on utilise la fonction register_widget(), qui prend en paramtre le nom de
la classe du widget. Dans notre cas, lappel sera le suivant :
1
2
114
<? php
register_widget ( ' Ze ro_ Ne wsl et ter _W idg et ') ;
DCLARER UN WIDGET
Cependant, nous ne pouvons pas lappeler nimporte quel moment, il faut attendre
que WordPress soit prt enregistrer lexistence des widgets. Ceci se fait grce une
action widget_init ; nous devons donc faire un appel add_action() pour la dclaration
du widget.
Ainsi, en utilisant les fonctions anonymes de PHP, lenregistrement du widget devient :
1
2
<? php
add_action ( ' widgets_init ' , function () { register_widget ( '
Z e r o _ N e w s l et ter _W idg et ') ;}) ;
Afin de garder une structure cohrente dans notre module, nos allons crer une nouvelle
classe Zero_Newsletter qui se chargera de tout le code concernant la fonctionnalit
de newsletter. Plaons-la dans un fichier newsletter.php, qui sera pour linstant assez
simple.
1
2
<? php
include_once plugin_dir_path ( __FILE__ ) . '/ newsletterwidget . php
';
3
4
5
6
7
8
9
10
{
{
add_action ( ' widgets_init ' , function () { register_widget ( '
Z e ro _Ne wsl et ter _W idg et ') ;}) ;
}
}
Noubliez pas de modifier le constructeur de la classe Zero_Plugin pour crer un nouvel

objet Zero_Newsletter.
1
2
3
<? php
include_once plugin_dir_path ( __FILE__ ) . '/ newsletter . php ';
new Zero_Newsletter () ;
Le widget est dornavant dclar et se retrouve visible dans la liste propose par WordPress lorsque lon se rend dans le menu Apparence > Widgets (voir la figure 13.1).
Figure 13.1 Le widget Newsletter
115
Les paramtres
Vous avez probablement remarqu que le widget na aucun paramtre disponible dans
linterface dadministration. Pourtant, il faudrait au minimum pouvoir dfinir un titre
afficher en haut du widget pour quil soit identifiable parmi les autres.
Laffichage du paramtrage du widget est compltement dlgu notre classe en surchargeant la mthode form(), qui prend en paramtre un tableau contenant les valeurs
prcdemment enregistres.
Dans le formulaire que nous allons crer, il est important dutiliser, pour la gnration
des attributs id et name de vos champs, deux mthodes dfinies par WP_Widget
qui sont respectivement get_field_id() et get_field_name(). Ces deux mthodes vont
gnrer un identifiant et un nom unique pour chaque champ qui utiliss par WordPress
lors de la sauvegarde des valeurs, il est donc trs important de les utiliser, sans quoi
lenregistrement des paramtres ne pourra pas fonctionner.
Voici donc comment nous allons redfinir la mthode form().
1
2
3
4
5
6
7
8
9
10
11
<? php
public function form ( $instance )
{
$title = isset ( $instance [ ' title ' ]) ? $instance [ ' title '] : '
';
?>
<p >
< label for = " <? php echo $this - > get_field_name ( ' title ' )
; ? > " > <? php _e ( ' Title : ' ) ; ? > </ label >
< input class = " widefat " id = " <? php echo $this - >
get_field_id ( ' title ' ) ; ? > " name = " <? php echo $this
- > get_field_name ( ' title ' ) ; ? > " type = " text " value = "
<? php echo $title ; ? > " / >
</p >
<? php
}
Vous pouvez maintenant dfinir une valeur pour le titre, et vrifier que celle-ci est bien
sauvegarde (voir la figure 13.2).
Le rendu final
Pour terminer notre widget, il faut maintenant modifier la mthode widget() afin dafficher le paramtre titre et le champ denregistrement des emails.
La rcupration dun paramtre se fait au travers de la variable $instance contenant
les paramtres du widget. Le titre est donc rcupr par linstruction $instance[title].
Cela nest cependant pas tout : il existe un filtre intitul widget_title auquel peuvent se
brancher des fonctions appliquant un traitement particulier pour les titres des widgets.
Il nest bien sr pas obligatoire de lutiliser pour obtenir laffichage du paramtre, mais
116
LE RENDU FINAL
Figure 13.2 Lajout du widget dans une zone ddie

gardez lesprit quun utilisateur de votre plugin pourrait vouloir utiliser ce filtre pour
modifier laffichage des widgets sur son thme. Il faut donc lutiliser !
1
2
<? php
echo apply_filters ( ' widget_title ' , $instance [ ' title ' ]) ;
Le formulaire denregistrement dadresse sera trs simple, car nous navons besoin que
dun seul champ.
1
2
3
4
5
6
7
< form action = " " method = " post " >
<p >
< label for = " zero_n ewslet ter_e mail " > Votre email : </ label
>
< input id = " zero_n ewsle tter_e mail " name = "
z er o_news lette r_emai l " type = " email " / >
</p >
< input type = " submit " / >
</ form >
Jai volontairement laiss le champ action du formulaire vide, afin que lutilisateur reste
sur la mme page lors de son inscription. Nous verrons plus bas comment rcuprer les
informations postes.
1
2
3
4
5
6
7
8
9
10
11
12
<? php
public function widget ( $args , $instance )
{
echo $args [ ' before_widget ' ];
echo $args [ ' before_title ' ];
echo apply_filters ( ' widget_title ' , $instance [ ' title ' ]) ;
echo $args [ ' after_title ' ];
?>
< form action = " " method = " post " >
<p >
< label for = " zero_n ewslet ter_e mail " > Votre email : </
label >
< input id = " zero_n ewsle tter_e mail " name = "
zer o_news lette r_emai l " type = " email " / >
117

13
14
15
16
17
18
</p >
< input type = " submit " / >
</ form >
<? php
echo $args [ ' after_widget ' ];
Le widget est maintenant prt et doit safficher correctement avec un champ denregistrement demails (voir la figure 13.3).
Figure 13.3 Le widget est install
En rsum
Chaque nouveau widget doit tre enregistr lors de lvnement widgets_init.
Les widgets doivent hriter de la classe WP_Widget et surcharger la mthode
widget().
Le rendu du widget doit utiliser les paramtres fournis par le thme pour gnrer
un code HTML cohrent avec celui-ci.
118
Chapitre
14
Modifier la base de donnes

Difficult :
Pour aller plus loin, nous allons avoir besoin dune table spcifique pour stocker les adresses
email des abonnes la newsletter. Cette table contiendra deux colonnes : un champ id
pour la cl primaire et un champ email pour stocker ladresse des inscrits.
119
CHAPITRE 14. MODIFIER LA BASE DE DONNES
Excuter des requtes SQL

Pour aller plus loin, nous allons avoir besoin dune table spcifique pour stocker les
adresses email des abonnes la newsletter. Cette table contiendra deux colonnes :
un champ id pour la cl primaire ;
un champ email pour stocker ladresse des inscrits.
Crer une nouvelle table

Pour crer la table contenant les adresses email, nous devons excuter une requte SQL
spcifique. Dans WordPress, laccs la base de donnes se fait laide de la classe
wpdb, qui contient de nombreuses mthodes pour interagir avec elle. Notamment, une
mthode query() est destine excuter les requtes qui lui sont passes en paramtre.
Une instance de la classe wpdb est cre au chargement de lapplication et stocke
dans une variable globale. Sa rcupration se fait donc depuis nimporte quel endroit
du code de faon trs simple :
<? php
global $wpdb ;
1
2
Dans la classe Zero_Newsletter, crons une fonction statique install() qui aura pour
charge deffectuer toutes les actions ncessaires lors de lactivation du plugin. Pour
linstant, seul un appel la mthode wpdb : :query() est ncessaire.
1
2
3
4
<? php
public static function install ()
{
global $wpdb ;
5
6
$wpdb - > query ( " CREATE TABLE IF NOT EXISTS { $wpdb - > prefix }
z ero _news letter _emai l ( id INT PRIMARY KEY , email VARCHAR
( 255 ) NOT NULL ) ; " ) ;
quoi correspond la variable $wpdb->prefix dans la requte ?
Vous vous rappelez probablement que lors de linstallation, WordPress nous avait demand de choisir un prfixe pour les tables de la base de donnes. Lattribut prefix de
la classe wpdb contient la valeur de ce prfixe, qui peut tre diffrent dune installation
de WordPress lautre. Par consquent, nous devons lutiliser pour dterminer le nom
de la table que nous allons crer.
Il nous reste maintenant appeler la mthode install() pour lancer la cration de la
table des adresses.
120
EXCUTER DES REQUTES SQL
Tracer lactivation du plugin

videmment, la cration de la table ne doit tre effectue quune seule fois, lorsque le
plugin sera install. Il nous faut donc un moyen de savoir que le plugin vient dtre install, pour effectuer les modifications dans la base de donne cet instant uniquement.
Heureusement pour nous, WordPress dclenche des vnements particuliers lorsquun
plugin est activ, dsactiv ou bien encore supprim de lapplication. Cest ici le premier
cas qui nous intresse mais les autres fonctionnent de faon similaire.
La fonction register_activation_hook(), dfinie dans wp-includes/plugin.php, permet
dajouter une fonction appeler lors de lactivation dun plugin particulier.
Cette fonction doit tre appele dans le fichier principal du plugin (celui qui dfinit
la valeur Plugin Name dans len-tte) et prciser le chemin du plugin ainsi que la
fonction excuter lactivation.
Pour passer le chemin du plugin, il suffit dutiliser la constante __FILE__, indiquant
le nom du fichier courant.
En interne, la fonction register_activation_hook() va transformer __FILE__ en une
chane de la forme dossier_du_plugin/nom_du_plugin qui permet didentifier le plugin de faon unique, dans notre cas zero/zero.
Lappel peut tre plac directement dans le constructeur de la classe Zero_Plugin, il
est finalement trs similaire ce que lon avait pour lajout dactions ou de filtres :
1
2
<? php
r e g i s t e r _ a c t i v at i o n_ h o ok ( __FILE__ , array ( ' Zero_Newsletter ' , '
install ') ) ;
La mthode install() tant statique, cest le nom de la classe, et non une

instance, que nous passons dans les paramtres.
Si votre plugin est dj activ, dsactivez-le puis ractivez-le nouveau afin de dclencher la cration de la table dans la base de donnes. Pour vrifier sa bonne excution,
nous pouvons aller dans phpmyadmin et voir sur la ct gauche la liste des tables de
la base de donnes (voir la figure 14.1).
La dsactivation et la dsinstallation du plugin

En plus de lactivation, nous pouvons tracer la dsactivation dun plugin, ainsi que sa
suppression pure et simple. Pour cela, il existe la fonction register_deactivation_hook(),
dont lappel est strictement identique register_activation_hook(), mais vous nen aurez pas lutilit ici.
En revanche, nous devons penser la dsinstallation du plugin. En effet, si un utilisateur
dcide de supprimer le plugin de son installation WordPress, il faut aussi que la table
que nous avons cre soit efface de la base de donnes pour que celle-ci retrouve son
121
Figure 14.1 Rsultat de la table des adresses email

tat original.
De mme que pour linstallation, crons une fonction qui va cette fois supprimer la
table des adresses.
1
2
3
4
<? php
public static function uninstall ()
{
global $wpdb ;
5
6
7
$wpdb - > query ( " DROP TABLE IF EXISTS { $wpdb - > prefix }
z ero _news letter _emai l ; " ) ;
Dans le cas de la dsinstallation, la fonction appele doit tre statique (ou bien
appartenir lespace global), ce qui ntait pas obligatoire pour lactivation.
Il ne reste qu appeler la fonction register_uninstall_hook() la fin du constructeur
de Zero_Plugin.
1
2
<? php
r e g i s t e r _ u ni ns t al l_ h oo k ( __FILE__ , array ( ' Zero_Newsletter ' , '
uninstall ') ) ;
Maintenant, si vous supprimez le plugin laide du lien Supprimer dans la page de

gestion des plugins, la table des adresses sera elle aussi efface.
Linsertion et la slection
Il ne reste plus quune tape pour lier le widget et la base de donnes ; nous avons besoin
denregistrer les adresses entres par les visiteurs dans la table spcifiquement cre.
122
LINSERTION ET LA SLECTION
Pour cela, il nous faut avant tout une mthode save_email() se chargeant de lajout
des adresses la base de donnes. Cette mthode sera appele sur toutes les pages du
site et vrifiera la prsence dune variable zero_newsletter_email dans la superglobale
$_POST. Si elle existe, la valeur contenue sera insre dans la table ddie.
Comme pour les requtes prcdentes, nous utilisons lobjet wpdb pour interagir avec la
base de donnes. Avant deffectuer linsertion, nous devons vrifier si ladresse propose
nexiste pas dj dans la table, auquel cas nous arrterions le processus. Nous utilisons
pour cela la mthode wpdb : :get_row(), prenant en paramtre la requte SQL
excuter.
1
2
3
4
<? php
if ( isset ( $_POST [ ' zero _news letter _emai l ' ]) && ! empty ( $_POST [ '
z e r o _ n e w s lette r_emai l ' ]) ) {
global $wpdb ;
$email = $_POST [ ' zer o_news lette r_emai l ' ];
5
6
$row = $wpdb - > get_row ( " SELECT * FROM { $wpdb - > prefix }
z er o_news lette r_emai l WHERE email = ' $email '" ) ;
La mthode get_row() retourne un tableau des colonnes de la premire ligne de rsultats de la requte, ou bien la valeur null si aucun rsultat nest trouv.
WordPress se charge de protger toutes les requtes contre les failles de scurit lorsquelles sont soumises via la mthode query(), elle-mme appele par get_row(). Il
nest donc pas ncessaire de vous charger de nettoyer les variables prsentes dans vos
requtes.
Si la requte ne retourne aucun rsultat, nous pouvons insrer la nouvelle adresse en
passant par la mthode insert(). Le premier paramtre de celle-ci est le nom de la table
dans laquelle on souhaite insrer une ligne, le second est un tableau associatif contenant
les valeurs de la ligne pour chaque champ de la table.
1
2
3
4
<? php
if ( is_null ( $row ) ) {
$wpdb - > insert ( " { $wpdb - > prefix } zero_ newsl etter_ email " , array
( ' email ' = > $email ) ) ;
}
Cest tout ! La mthode save_email() est prte enregistrer toutes les adresses de vos
visiteurs ! Voici un rcapitulatif de son contenu :
1
2
3
4
5
6
<? php
public function save_email ()
{
if ( isset ( $_POST [ ' zero _news letter _emai l ' ]) && ! empty ( $_POST
[ ' z e r o_news lette r_emai l ' ]) ) {
global $wpdb ;
$email = $_POST [ ' zer o_news lette r_emai l ' ];
7
8
$row = $wpdb - > get_row ( " SELECT * FROM { $wpdb - > prefix }
z er o_news lette r_emai l WHERE email = ' $email '" ) ;
123

9
10
11
12
13
if ( is_null ( $row ) ) {
$wpdb - > insert ( " { $wpdb - > prefix } zero_ newsl etter_ email
" , array ( ' email ' = > $email ) ) ;
}
Nous navons pas gr la vrification du format de ladresse email car le but reste ici
de montrer comment traiter la valeur reue et linsrer en base. Dans une application
relle, il faudrait bien entendu vrifier que la valeur envoye correspond bien une
adresse email.
Il faut maintenant utiliser une action pour connecter la mthode save_email() laffichage des pages du site. Pour cela, nous pouvons utiliser lidentifiant wp_loaded qui
correspond linstant o lapplication est charge et o elle sapprte effectuer le
rendu du thme pour la page demande.
<? php
add_action ( ' wp_loaded ' , array ( $this , ' save_email ') ) ;
1
2
En entrant une adresse email puis en validant le formulaire, nous restons sur la mme
page mais la table des adresses doit contenir ladresse choisie (voir la figure 14.2).
Figure 14.2 Enregistrement des adresses dans la table
En rsum
Les requtes SQL sont traites par lobjet wpdb.
LAPI (Interface de programmation) fournit des mthodes pour crer facilement
des requtes de slection, dinsertion et de mise jour des entres dune table.
124
Chapitre
15
Ladministration
Difficult :
Les fonctionnalits de notre plugin sont presque compltes ! Il nous reste cependant un
point important finaliser : le plugin doit pouvoir tre configur dans ladministration,
notamment pour lui dfinir des options mais aussi pour excuter lenvoi de la newsletter
lorsque ladministrateur le dcide.
Il nous faut donc ajouter un menu spcifique pour la gestion du module, dans lequel nous
disposerons des paramtres ditables ainsi que dun bouton denvoi des emails aux adresses
enregistres.
125
CHAPITRE 15. LADMINISTRATION
Ajouter des menus

Menu principal
Commenons par crer un lment de premier niveau qui apparatra dans le menu
principal de ladministration, cest--dire directement dans la colonne de gauche. Cet
ajout se fait lors du chargement des menus de WordPress, un vnement identifi par le
dclenchement de laction admin_menu. Dans le constructeur de la classe Zero_Plugin,
il nous faut donc brancher une fonction add_admin_menu() que lon dfinira plus bas.
<? php
add_action ( ' admin_menu ' , array ( $this , ' add_admin_menu ') ) ;
1
2
La cration dun menu seffectue avec la fonction add_menu_page(), qui peut prendre
jusqu sept paramtres :
le titre de la page sur laquelle nous serons redirigs ;
le libell du menu ;
lintitul des droits que doit possder lutilisateur pour pouvoir accder au menu.
Si les droits sont insuffisants, le menu sera masqu ;
la cl didentifiant du menu qui doit tre unique (mettre le nom du plugin est
une bonne option) ;
la fonction appeler pour le rendu de la page pointe par le menu ;
licne utiliser pour le lien (vous pouvez laisser les valeurs par dfaut) ;
la position dans le menu (vous pouvez laisser les valeurs par dfaut).
1
2
3
4
5
<? php
public function add_admin_menu ()
{
add_menu_page ( ' Notre premier plugin ' , ' Zero plugin ' , '
manage_options ' , ' zero ' , array ( $this , ' menu_html ') ) ;
}
Une fois que cette fonction est dfinie, le menu doit apparatre dans linterface dadministration (voir la figure 15.1).
Figure 15.1 Le lien du plugin dans le menu

126
AJOUTER DES MENUS

Il nous reste dfinir la mthode menu_html() pour laffichage de la page. Ce sera la
page daccueil du plugin, placez donc un contenu trs simple simplement pour vrifier
son bon fonctionnement (voir la figure 15.2).
1
2
3
4
5
6
<? php
public function menu_html ()
{
echo ' <h1 > '. get_admin_page_title () . ' </ h1 > ';
echo ' <p > Bienvenue sur la page d \ ' accueil du plugin </ p > ';
}
La fonction get_admin_page_title() renvoie la valeur du premier argument

donn la fonction add_menu_page().
Figure 15.2 La page principale du plugin
Les sous-menus
Ajoutons immdiatement un sous-menu Newsletter notre lment du menu principal, afin de pouvoir grer plusieurs sections si besoin.
Pour cela, nous devons passer par la fonction add_submenu_page(), qui comprend elle
aussi de nombreux arguments. Le premier dentre eux est lidentifiant du menu parent
dans lequel devra apparatre le sous-menu, cest donc la valeur que nous avions choisie
prcdemment. Notez que si vous voulez ajouter un sous-menu lun des menus natifs
de WordPress, vous devrez ici mettre le nom du fichier PHP utilis pour le rendu du
menu en question, par exemple users.php pour le menu Utilisateurs .
Les dtails sont disponibles sur la page de rfrence de la fonction indique sur le code
web suivant :

Page de rfrence
B
Code web : 317210

Sur cette mme page de la documentation, vous pouvez voir quau lieu de
spcifier le fichier PHP dun menu natif, vous pouvez utiliser des fonctions
ddies qui appellent en interne add_submenu_page() avec les arguments
adquats. Par exemple, pour ajouter un sous-menu dans Utilisateurs , il
existe la fonction add_users_page().
127
Les arguments suivants de la fonction sont respectivement :
le titre de la nouvelle page ;

le libell du menu ;
les droits requis pour y accder ;
lidentifiant du sous-menu ;
la fonction daffichage.
Tout est donc trs similaire lajout dun menu de premier niveau.
Nous allons dlguer la cration du sous-menu la classe Zero_Newsletter, il faut donc
connecter une action lvnement admin_menu et crire la mthode correspondante.
1
2
3
4
5
6
7
8
<? php
{
{
// ...
add_action ( ' admin_menu ' , array ( $this , ' add_admin_menu ')
, 20 ) ;
}
9
10
11
12
13
14

{
add_submenu_page ( ' zero ' , ' Newsletter ' , ' Newsletter ' , '
manage_options ' , ' zero_newsletter ' , array ( $this , '
menu_html ') ) ;
}
Pourquoi avoir mis une priorit 20 dans la mthode add_action() ?
Ici, la priorit augmente (la valeur par dfaut est 10) permet de sassurer que la
fonction sera excute aprs celle qui ajoute le menu parent du plugin. Il faut en effet
que celui-ci ait t cr avant de pouvoir crer les sous-menus correspondants.
Rafrachissez votre interface dadministration, vous devriez avoir, comme sur la figure
15.3, le sous-menu affich au survol du menu parent (si le menu parent tait dj
slectionn, alors le sous-menu sera visible par dfaut).
Deux menus on t crs ! Pourtant il ny a quun seul appel
add_submenu_page() !
En effet, lors de la cration dun sous-menu, WordPress ajoute par dfaut un premier
128
AJOUTER DES MENUS
Figure 15.3 Le sous-menu contient le nouvel lment

lien identique au menu parent. Vous pouvez cependant en changer le libell en crant
un sous-menu donc lidentifiant est gal lidentifiant parent (voir la figure 15.4). Par
exemple, nous pouvons ajouter une ligne juste aprs la gnration du menu parent :
1
2
3
4
5
6
<? php
{
add_menu_page ( ' Zero plugin ' , ' Zero plugin ' , ' manage_options
' , ' zero ' , array ( $this , ' menu_html ') ) ;
add_submenu_page ( ' zero ' , ' Apercu ' , ' Apercu ' , '
manage_options ' , ' zero ' , array ( $this , ' menu_html ') ) ;
}
Figure 15.4 Le menu mis jour

Avant de continuer, crons la fonction daffichage du sous-menu Newsletter qui se
contentera pour linstant dafficher le titre de la page (voir la figure 15.5).
1
2
3
4
5
6
7
8
9
<? php
{
// ...
{
}
}
129
Figure 15.5 La page newsletter
Crer des options

Nos pages sont maintenant cres, il nous faut donc crire le formulaire permettant de
renseigner les diffrentes options de notre choix via la mthode menu_html(). Dans un
premier temps, nous allons travailler avec un seul champ pour comprendre la dmarche
effectuer, puis nous en ajouterons de nouveaux.
Le fonctionnement des options

Pour conserver un maximum de souplesse, WordPress inscrit un grand nombre de
valeurs de configuration dans la base de donnes, dont un certain nombre sont ditables
au travers du menu Rglages de ladministration. Ce fonctionnement permet davoir
des attributs facilement modifiables par ladministrateur pour ne pas avoir modifier
le code PHP lorsquil dsire modifier des paramtres comme le titre du site, le format
des dates, la taille des mdias. . .
Ces diffrents paramtres sont appels des options et sont stocks dans la base de
donnes dans la table wp_options, lidentifiant de loption tant rang dans la colonne
option_name et sa valeur dans option_value. Ainsi, rien ne nous empche de dfinir
nos propres valeurs de configuration, notamment lorsque lon veut pouvoir paramtrer
un plugin. Il suffit pour cela dajouter une ligne la table avec lidentifiant et la valeur
dsirs.
Pour rcuprer la valeur dune option, il faut utiliser la fonction get_option() en lui
indiquant lidentifiant de loption rcuprer. Si loption nexiste pas, la fonction retourne false ou bien la valeur du second paramtre sil a t fourni.
Lajout dune option dans la base de donnes se fait avec la mthode add_option(),
laquelle il faut envoyer lidentifiant ainsi que la valeur de loption. Toutefois, cette
fonction ne permet pas de mettre jour une option dj existante, il faut alors utiliser update_option(), dont les paramtres sont identiques. Notez quen utilisant update_option(), loption sera cre si elle nexiste pas encore. Elle est donc utilise dans
la majorit des cas car elle convient aux deux usages.
Enfin, pour supprimer une option, on utilise la fonction delete_option() qui ne prend
en paramtre que le nom de loption. Elle renvoie la valeur true si loption a t correctement supprime, ou bien false si lopration chou ou que loption nexistait
pas.
130
CRER DES OPTIONS
Le formulaire
Le code HTML
Lorsque lon cre un formulaire destin enregistrer des donnes dans la table des
options, celui-ci doit appeler le fichier wp-admin/options.php lors de la soumission des
donnes. Commencez donc complter la mthode Zero_Newsletter : :menu_html()
comme ceci :
1
2
3
4
5
6
<? php
{
?>
< form method = " post " action = " options . php " >
7
8
9
10
</ form >

<? php
Rajoutons tout de suite le champ de texte permettant lenregistrement de ladresse

email de lexpditeur de la newsletter, ainsi que le bouton de validation du formulaire
grce la fonction submit_button(). Cette dernire permet de gnrer un bouton de
validation avec les classes CSS ncessaires un affichage homogne dans linterface
dadministration. Le libell du bouton peut tre modifi en passant une nouvelle valeur
en paramtre.
1
2
3
< label > Exp diteur de la newsletter </ label >

< input type = " text " name = " ze ro _ne wsl et ter _s end er " value = " <? php
echo get_option ( ' ze ro _ne ws let ter _s end er ') ? > " / >
<? php submit_button () ; ? >
Le formulaire doit maintenant safficher correctement, mais si vous lenvoyez, vous

verrez quaucune valeur nest sauvegarde dans la base de donnes (le champ apparat
vide lorsque vous revenez sur la page). Ceci est du au fait que nous navons pas encore
autoris WordPress enregistrer la valeur de loption zero_newsleter_sender.
Enregistrer les options modifiables
La premire chose rajouter lintrieur du formulaire est un appel la fonction settings_fields(), qui affiche un certain nombre de champs cachs permettant notamment
lapplication de savoir quel groupe doption les champs que vous allez rajouter
appartiennent.
Quest-ce quun groupe doptions ?
Un groupe doptions correspond lensemble des options modifiables sur une page
131

donne. WordPress a besoin de connatre le groupe auquel appartiennent les options
afin de dcider si vous avez le droit de modifier ces valeurs. Pour dterminer si les
options peuvent tre mises jour, il sera ncessaire de dclarer lensemble des options
modifiables dans un groupe doptions donn avec la fonction register_setting(). Nous
appellerons notre groupe doptions zero_newsletter_settings, cest donc largument
utiliser pour lappel settings_fields().
1
2
<? php settings_fields ( ' z er o _ ne w s le t t e r_ s e tt i n gs ') ? >
Il nous faut ensuite enregistrer le champ zero_newsletter_sender dans le groupe doptions. Ceci doit imprativement se faire lorsque le systme dadministration est initialis, cest--dire au dclenchement de lvnement admin_init. Ajoutons donc une
fonction register_settings dans la classe Zero_Newsletter, ainsi que lenregistrement
de laction dans son constructeur.
<? php
add_action ( ' admin_init ' , array ( $this , ' register_settings ') ) ;
1
2
1
2
3
4
5
<? php
public function register_settings ()
{
register_setting ( ' z e ro _ n ew s l et t e r_ s e tt i n gs ' , '
z e ro _ne ws let ter _s end er ') ;
}
Le formulaire est en place, loption que nous souhaitons enregistrer est dclare comme
autorise, nous pouvons donc vrifier que lenregistrement fonctionne. Pour cela, entrez
une adresse et validez le formulaire. La page doit se rafficher et le champ tre prrempli avec la valeur envoye (voir la figure 15.6).
Figure 15.6 Sauvegarde de la valeur du champ
Gnration automatique des champs

Il reste deux options rajouter dans notre formulaire : lobjet du mail et son contenu.
Pour ces deux nouveaux champs, nous allons utiliser un autre moyen de cration du
code HTML, en nous reposant un peu plus sur lAPI de WordPress. Lide consiste
dclarer des champs avec leurs proprits, puis demander laffichage de tous les
132
CRER DES OPTIONS

champs associs un formulaire donn. Chaque champ doit tre ajout une section,
cest dire un groupe doption, elle-mme tant appele depuis le formulaire final.
Lintrt de ce fonctionnement est de pouvoir rajouter de nouveaux champs dans le
formulaire sans pour autant devoir modifier la mthode de rendu de celui-ci, simplement
en enregistrant une nouvelle section ou un nouveau champ. Il est donc tout fait
possible, grce ce mcanisme, de rajouter de nouvelles options dans un formulaire
natif de WordPress ou cr par un autre plugin.
La cration dune section se fait par la fonction add_settings_section(), que lon peut
appeler directement dans la mthode Zero_Newsletter : :register_settings().
1
2
<? php
ad d _ s e t t i ng s _ section ( ' z er o_ ne w sl et t er _s ec t io n ' , ' Param tres d \ '
envoi ' , array ( $this , ' section_html ') , '
z e r o _ n e w s l et t e r_ s e tt i n gs ') ;
Les paramtres de cette fonction sont lidentifiant de la section, son titre, une fonction
appele au dbut du rendu de la section et enfin la page sur laquelle devra safficher la
section.
Nous allons crer immdiatement la mthode section_html() afin dafficher une description de la section au dbut de celle-ci.
1
2
3
4
5
<? php
public function section_html ()
{
echo ' Renseignez les param tres d \ ' envoi de la newsletter . '
;
}
Mme si la section ne contient pour linstant aucun champ, nous pouvons en activer son
affichage. Pour cela, il suffit dappeler la fonction do_settings_sections() avec comme
argument lidentifiant de la page pour laquelle la section a t cre. Si plusieurs sections
on t dclares pour une page donne, elle seront toutes affiches conscutivement (voir
la figure 15.7).
Figure 15.7 Affichage de la section avec sa description

Modifiez donc le formulaire en supprimant le champ Expditeur pour le remplacer
par lappel de cette nouvelle fonction.
1
2
<? php settings_fields ( ' z e ro _ n ew s l et t e r_ s e tt i n gs ') ? >
133

<? php d o _settings_sections ( ' z e ro _ n ew s l et t e r_ s e tt i n gs ') ? >
<? php submit_button () ; ? >
</ form >
3
4
5
Pour dclarer le champ Expditeur ainsi que les deux champs supplmentaires, il
faut passer par la fonction add_settings_field() qui se charge de lajout dun champ
une section donne.
<? php
ad d_ se tti ngs_field ( ' ze ro _ne wsl et ter _s end er ' , ' Exp diteur ' ,
array ( $this , ' sender_html ') , ' z er o _ ne w s le t t er _ s et t i ng s ' , '
z e r o _ n e w sl et t er _s ec t io n ') ;
1
2
Les paramtres de cette fonction sont lidentifiant du champ, le libell afficher, la

fonction de rendu du champ, pour terminer par la page concerne et la section laquelle
il appartient. La mthode de rendu est trs simple et ne doit se charger dafficher que
le champ en lui mme comme nous lavions fait prcdemment (voir la figure 15.8).
1
2
3
4
5
6
<? php
public function sender_html ()
{? >
< input type = " text " name = " ze ro _ne ws let ter _s end er " value = " <?
php echo get_option ( ' ze ro _ne wsl et ter _s end er ') ? > " / >
<? php
}
Figure 15.8 Retour du champ expditeur dans une section

Le formulaire est maintenant revenu ltat prcdent, il ne reste plus qu dclarer les
deux nouveaux champs en passant par add_settings_field() et register_setting() et le
formulaire sera mis jour automatiquement, sans modifier la mthode menu_html().
Voici donc un rcapitulatif des mthodes mises jour avec les deux nouveaux champs
Objet et Contenu .
1
2
3
4
5
<? php
public function register_settings ()
{
z e ro _ne ws let ter _s end er ') ;
z e ro _ne ws let ter _o bje ct ') ;
134
CRER DES OPTIONS

register_setting ( ' z er o _ ne w s le t t er _ s e tt i n gs ' , '
z e r o _ ne w sl et te r _c on te n t ') ;
6
7
8
10
11
12
a d d _ s e t t i ngs_section ( ' z er o_ ne w sl et t er _s ec t io n ' , ' Newsletter

parameters ' , array ( $this , ' section_html ') , '
z e r o _ n ew s l et t e r_ s e tt i n gs ') ;
ad d_ se tti ngs_field ( ' ze ro _ne ws let ter _s end er ' , ' Exp diteur ' ,
array ( $this , ' sender_html ') , ' z er o _ ne w s l et t e r_ s e tt i n gs ' ,
' z e r o_ ne w sl et te r _s ec ti o n ') ;
ad d_ se tti ngs_field ( ' ze ro _ne ws let ter _o bje ct ' , ' Objet ' , array
( $this , ' object_html ') , ' z e ro _ n ew s l et t e r_ s e tt i n gs ' , '
z e r o _ ne w sl et te r _s ec ti o n ') ;
ad d_ se tti ngs_field ( ' z er o_ ne w sl et t er _c on t en t ' , ' Contenu ' ,
array ( $this , ' content_html ') , ' z e ro _ n ew s l et t e r_ s e tt i n gs '
, ' z e r o_ ne w sl et t er _s ec t io n ') ;
13
14
15
16
17
18
public function object_html ()

{? >
< input type = " text " name = " ze ro _ne wsl et ter _o bje ct " value = " <?
php echo get_option ( ' ze ro _ne ws let ter _o bje ct ') ? > " / >
<? php
}
19
20
21
22
23
24
public function content_html ()

{? >
< textarea name = " ze ro _ ne ws le t te r_ c on te nt " > <? php echo
get_option ( ' z er o_ n ew sl et t er _c on t en t ') ? > </ textarea >
<? php
}
Vous pouvez maintenant rafrachir la page pour renseigner les valeurs de ces nouvelles
options (voir la figure 15.9).
Figure 15.9 Le formulaire final

135
Traiter des actions

Lorsque lensemble des options sont configures, il ne manque plus quun bouton afin
denvoyer la newsletter aux adresses inscrites. Ce bouton doit donc dclencher lappel
dune fonction spcifique qui envoie lemail tous les destinataires souhaits.
Nous avons deux solutions pour arriver nos fins. Nous pouvons utiliser un lien vers
un fichier spcifique de notre plugin qui traitera directement lenvoi des emails avant
de nous rediriger vers linterface dadministration de notre plugin. Cest une solution
qui parat assez simple mais qui implique de charger les fonctionnalits de WordPress
manuellement dans le fichier cible, cest pourquoi elle na pas ma prfrence. Au lieu
de cela, nous allons simplement rafrachir la page en cours et brancher une nouvelle
action se chargeant de vrifier si lenvoi a t demand et de lexcuter le cas chant.
Nous allons pour cela insrer un second formulaire dans la page, la fin de la mthode
menu_html().
1
2
3
4
< form method = " post " action = " " >
< input type = " hidden " name = " send_newsletter " value = " 1 " / >
<? php submit_button ( ' Envoyer la newsletter ') ? >
</ form >
Le formulaire contient simplement un champ cach qui sera envoy en POST afin de
demander lenvoi des emails. Au clic sur le bouton, la page actuelle sera rafrachie avec
le paramtre send_newsletter prsent dans la requte.
Nous devons donc intercepter la prsence de ce paramtre au chargement de la page.
Pour cela, il existe dans WordPress un vnement dclench au chargement de toutes les
pages dadministration, de la forme load-[identifiant de la page]. Lidentifiant de la page
est rcuprable lors de la cration du menu qui permet daccder la page : cest le retour de la fonction add_submenu_page() (cela fonctionne aussi avec add_menu_page()).
Nous modifions donc la mthode Zero_Newsletter : :add_admin_menu() :
1
2
3
4
5
6
<? php
{
$hook = add_submenu_page ( ' zero ' , ' Newsletter ' , ' Newsletter '
, ' manage_options ' , ' zero_newsletter ' , array ( $this , '
menu_html ') ) ;
add_action ( ' load - '. $hook , array ( $this , ' process_action ') ) ;
}
Dans cette mthode process_action(), nous vrifions la prsence du paramtre send_newsletter

avant dappeler la mthode denvoi.
1
2
3
4
5
6
<? php
public function process_action ()
{
if ( isset ( $_POST [ ' send_newsletter ' ]) ) {
$this - > send_newsletter () ;
}
136
TRAITER DES ACTIONS

7
Il ne reste plus maintenant qu crire la mthode send_newsletter() pour envoyer les

emails nos visiteurs inscrits. Nous allons donc devoir rcuprer les paramtres de
configuration choisis ainsi que la liste des emails, puis appeler la fonction wp_mail()
qui permet de construire un email.
1
2
3
4
5
6
7
8
9
<? php
public function send_newsletter ()
{
global $wpdb ;
$recipients = $wpdb - > get_results ( " SELECT email FROM { $wpdb
- > prefix } ze ro_ne wslett er_em ail " ) ;
$object = get_option ( ' ze ro _ne ws let ter _o bje ct ' , ' Newsletter '
);
$content = get_option ( ' z er o_ ne w sl et te r _c on t en t ' , ' Mon
contenu ') ;
$sender = get_option ( ' ze ro _ne ws let ter _s end er ' , 'no reply@example . com ') ;
$header = array ( ' From : '. $sender ) ;
10
11
12
13
14
foreach ( $recipients as $_recipient ) {

$result = wp_mail ( $_recipient - > email , $object , $content
, $header ) ;
}
Et voil ! Le site est prt envoyer des newsletters ses inscrits en un seul clic sur le
bouton denvoi !
En rsum
De nouvelles pages peuvent tre ajoutes dans linterface dadministration, accessibles avec des menus spcifiques.
Les options permettent de sauvegarder les valeurs de vos paramtres de configuration.
Vous pouvez crer des options spcifiques votre plugin et les diter dans ladministration.
Lenregistrement des sections et des champs pour les formulaires permet plus de
souplesse que la construction manuelle.
137
138
Chapitre
16
Les shortcodes
Difficult :
Un shortcode est un morceau de code PHP que lon peut placer directement dans un article
ou une page de votre blog. Cette balise code est automatiquement interprte par WordPress et permet dajouter des fonctionnalits (une galerie image, une insertion vido, etc.)
sans programmation de votre part ! Grce aux shortcodes, votre blog devient dynamique
puisque son contenu peut tre chang tout moment, en temps rel et sans comptence
informatique.
139
CHAPITRE 16. LES SHORTCODES
Utiliser un shortcode
Format
Pour utiliser un shortcode, il suffit de mettre son nom dans le contenu dun article,
encadr de crochets.
1
[ nom_du_shortcode ]
Par exemple, WordPress connat un shortcode gallery qui renvoie lensemble des mdias
de type image associs un article, dont laffichage sur le site changera en fonction du
nombre dimages dans la bibliothque sans quil y ait besoin de modifier larticle en
question.
Choisissez donc un article ou une page possdant des images, et introduisez le shortcode
au sein de son contenu (voir la figure 16.1).
Figure 16.1 Lajout du shortcode dans le contenu dun article

Lorsquun visiteur parcourra larticle choisi, il verra, comme sur la figure 16.2, lensemble des images associes celui-ci.
Paramtres
Pour ajouter de la souplesse aux shortcodes, il est tout fait possible de leur attribuer
des paramtres utiliss par la fonction PHP lors du rendu, en rajoutant des paires
cls/valeur la suite du nom du shortcode.
1
[ nom_du_shortcode attribut1 = " valeur1 " attribut2 = " valeur2 " ]
On peut aussi ajouter une grosse portion de texte dans un shortcode en lcrivant sous
une forme diffrente, avec une balise ouvrante et une balise fermante. Ce texte sera
alors considr comme un nouveau paramtre, gnralement utilis comme contenu du
shortcode.
1
[ nom_du_shortcode ] le contenu vient ici [/ nom_du_shortcode ]
De plus, le contenu peut tre du texte brut ou bien du HTML ; il ny a pas de restriction.
Ce sera ensuite le rle du shortcode de traiter le texte fourni en cas de besoin.
140
UTILISER UN SHORTCODE
Figure 16.2 Affichage du shortcode Gallery
141
Crer un shortcode
Que diriez-vous de crer un shortcode simple, dont le rle sera par exemple de lister
les derniers articles publis sur votre blog ? Plac par exemple dans une page statique,
il fournira sous forme de liste les titres des derniers articles avec un lien vers chacun
deux.
Pour traiter le shortcode, il faudra utiliser une nouvelle classe de notre plugin qui
sera ddie au rendu de la liste des derniers articles. Ajoutez donc un nouveau fichier
recent.php dans lequel vous dfinirez une classe Zero_Recent, elle-mme tant instancie dans le constructeur de la classe Zero_Plugin, comme cela a t fait pour les classe
prcdentes.
1
2
3
4
5
6
7
8
<? php
class Zero_Plugin
{
{
// ...
include_once plugin_dir_path ( __FILE__ ) . ' recent . php ';
new Zero_Recent () ;
Il faut ensuite dclarer le shortcode afin que WordPress sache le reconnatre dans le
contenu dune publication. On utilise pour cela la mthode add_shortcode(), qui attend
en paramtres le nom du shortcode ainsi que la fonction appeler lors de son rendu.
Placez donc cet appel dans le constructeur de la classe Zero_Recent.
1
2
3
4
5
6
7
8
<? php
class Zero_Recent
{
{
add_shortcode ( ' zero_recent_articles ' , array ( $this , '
recent_html ') ) ;
}
}
WordPress a dornavant connaissance du nouvel lment, il ne lui manque que la dfinition de la fonction appeler pour lafficher. Cette dernire recevra deux arguments
lors de son appel : le premier est un tableau des paramtres permettant de configurer
le shortcode, le second est la valeur du contenu si le shortcode a t dclar avec les
deux balises ouvrante et fermante.
1
2
3
4
<? php
public function recent_html ( $atts , $content )
{
}
La premire chose faire est dinitialiser des valeurs par dfaut pour les paramtres
du shortcode, si jamais ceux-ci nont pas t fournis. En effet, un shortcode doit au
maximum pouvoir tre utilis sans paramtres, il faut donc prvoir un comportement
142
CRER UN SHORTCODE
fonctionnel dans ce cas. Pour fusionner simplement le tableau de paramtres fournis et
les valeurs par dfaut, WordPress propose la fonction shortcode_atts().
1
2
<? php
$atts = shortcode_atts ( array ( ' numberposts ' = > 5 ) , $atts ) ;
Seules les cls du tableau des valeurs par dfaut seront prsentes en sortie de
cette fonction, tous les autres paramtres fournis au shortcode seront ignors
et supprims !
Une fois les arguments filtrs, vous pouvez rcuprer la liste des derniers articles avec la
fonction get_posts(), pour laquelle les paramtres doivent tre envoys dans un tableau
comme premier argument. La fonction renverra alors une liste darticles, qui sont par
dfaut tris par date dcroissante, ce qui correspond nos besoins.
1
2
<? php
$posts = get_posts ( $atts ) ;
Vous pouvez bien entendu rajouter de nouveaux paramtres compatibles avec

la fonction dans le tableau $atts, il vous suffit pour cela de regarder la dfinition de la fonction pour connatre la liste des cls autorises.
Il ne reste plus qu parcourir la liste des articles et les insrer dans une liste au
format HTML, avec un lien permettant dafficher chacun dentre eux. Si la variable
$content a t dfinie par lutilisateur du shortcode, vous pouvez linsrer par exemple
au dessus de la liste, ce qui permet de rajouter un texte de prsentation.
1
2
3
4
5
6
7
8
<? php
$html = array () ;
$html [] = $content ;
$html [] = ' <ul > ';
foreach ( $posts as $post ) {
$html [] = ' <li > < a href =" '. get_permalink ( $post ) . '" > '. $post - >
post_title . ' </a > </ li > ';
}
$html [] = ' </ ul > ';
9
10
echo implode ( ' ' , $html ) ;
Le shortcode est termin et prt tre utilis ! Rendez-vous pour cela dans lditeur
de contenu dune de vos publications, et placez le code suivant lintrieur :
1
[ z e r o _ r e c e n t _ articles numberposts = 3 ] Voici les derniers articles

publi s sur le blog : [/ zero_recent_articles ]
laffichage de la page, comme sur la figure 16.3, vous obtenez la liste jour des trois
derniers articles publis.
143
Figure 16.3 Affichage des trois derniers articles
En rsum
Un shortcode est un morceau de code PHP que lon insre directement au sein
dune publication. Il permet laffichage de contenu sans savoir mme coder.
Les shortcodes peuvent rcuprer des paramtres fournis par le contributeur
dun article pour modifier leur affichage.
Il existe plusieurs formats pour les shortcodes, avec une seule ou deux balises
pour rajouter du contenu.
144
Quatrime partie
Exploiter votre site
145
Chapitre
17
Mettre en production
Difficult :
Voil, vous avez maintenant une bonne matrise de WordPress. Vous avez trouv ou programm les thmes et plugins dont vous aviez besoin pour que votre site puisse tre mis
en ligne ? Il est temps de nous attaquer aux derniers rglages pour la mise en production
de WordPress !
Suivant la solution que vous aurez choisie pour votre hbergement, la procdure est quelque
peu diffrente, nous allons donc faire un tour dhorizon des solutions qui soffrent vous.
147
CHAPITRE 17. METTRE EN PRODUCTION
Sur un hbergement mutualis

Lhbergement mutualis est la solution la moins onreuse et permet davoir un site en
place rapidement sans avoir passer beaucoup de temps en configuration. Cest celle
qui est conseille si vous nattendez pas (pour linstant !) un fort trafic sur votre site.
De plus, les offres dhbergement saccompagnent souvent dun nom de domaine pour
votre site Internet (cest le cas chez OVH notamment), vous navez donc pas payer
autre chose que le serveur.
Lorsque vous prenez une offre chez un hbergeur, vous recevrez des identifiants permettant de vous connecter la base de donnes ainsi quau serveur laide dun logiciel
FTP pour envoyer vos fichiers sur le site. Vous pouvez pour cela utiliser le logiciel
FileZilla qui est plutt simple dutilisation.
Aprs avoir lanc FileZilla, vous devez indiquer vos identifiants ainsi que ladresse du
serveur FTP dans la barre de connexion en haut. Toutes les informations doivent avoir
t fournies lors de linscription par lhbergeur (voir la figure 17.1).
Figure 17.1 Connexion au serveur avec vos identifiants

Une fois connect, vous devrez, comme sur la figure 17.2, envoyer la totalit des fichiers
de votre site dans le rpertoire racine du serveur, le plus souvent intitul www .
Ds que la copie est termine, vous pouvez vous rendre ladresse de votre site Internet
qui est maintenant en ligne. Il faut alors lancer la procdure dinstallation de WordPress
comme nous lavons fait au dbut de ce cours.
Sur un serveur ddi

Si vous choisissez comme solution dhbergement un serveur ddi, il y a un peu plus
de travail que prcdemment car il faut aussi soccuper de linstallation et de la configuration du serveur. Une fois votre serveur en place, vous aurez besoin de vous connecter sur celui-ci afin de dbuter linstallation des diffrents fichiers. Les identifiants de
connexion au serveur vous ont normalement t fournis par lhbergeur et permettent
de sy connecter avec le protocole SSH. Pour cela, vous pouvez utiliser le logiciel Putty
sur Windows ou bien un terminal sur Linux et Mac.
Installation et copie des fichiers

La configuration du serveur est sensiblement identique linstallation dun serveur
local sur Linux. Les logiciels installer sont les mmes (mis part phpMyAdmin qui
est inutile ici) et suivront la mme procdure.
148
SUR UN SERVEUR DDI
Figure 17.2 Transfert des fichiers de WordPress dans le rpertoire
sudo apt - get install apache2 php5 mysql - server libapache2 - mod php5 php5 - mysql
Vous pouvez maintenant copier les fichiers de WordPress sur votre serveur.
cd / var / www
curl -O http :// fr . wordpress . org / wordpress -3.6.1 - fr \ _FR . tar . gz
tar - xzf wordpress -3.6.1 - fr \ _FR . tar . gz
Le nom du fichier peut varier suivant la version de WordPress. Pensez le

vrifier sur le site officiel afin de rcuprer la dernire version.
Vous obtenez ainsi un dossier intitul wordpress contenant les sources de la dernire
version du CMS prt tre lu par Apache.
Dfinition du Virtual Host

Il nous reste configurer un Virtual Host pour que votre serveur sache que ladresse
url de votre site, par exemple http ://monsite.com correspond au rpertoire de WordPress. Sans cela, vous ne pourrez y accder que par une URL de la forme suivante,
http ://monsite.com/wordpress.
149
CHAPITRE 17. METTRE EN PRODUCTION

Voici un exemple de Virtual Host basique pour WordPress, qui reprend entre autre le
contenu du fichier .htaccess fourni, vous devrez bien sr adapter les valeurs votre installation. Vous devez placer cette configuration dans le rpertoire /etc/apache2/sitesavailable, dans un fichier intitul wordpress.conf. Le nom peut varier, mais lextension
doit tre .conf.
1
2
< VirtualHost *: 80 >

ServerName monsite . com
DocumentRoot / var / www / wordpress

< Directory / var / www / wordpress >
Deny from none
Allow from all
Order allow , deny
AllowOverride None
4
5
6
7
8
9
10
RewriteEngine On
RewriteCond %{ REQUEST_FILENAME } ! - f
RewriteCond %{ REQUEST_FILENAME } ! - d
RewriteRule .* / index . php [ L ]
</ Directory >
</ VirtualHost >
11
12
13
14
15
16
Il faut ensuite activer ce VirtualHost avec la commande a2ensite, et dsactiver la configuration par dfaut avec a2dissite. Enfin, demandez Apache de recharger sa configuration pour prendre en compte les dernires modifications.
a2ensite wordpress
a2dissite default
service apache2 reload
En rsum
Un site peut tre hberg soit sur un serveur mutualis partag par plusieurs
utilisateurs, soit sur un serveur ddi.
Le logiciel FileZilla permet denvoyer vos fichiers sur un serveur mutualis avec
un accs FTP.
Sur un serveur ddi, la configuration du serveur Apache doit se faire manuellement.
150
Chapitre
18
Amliorer le rfrencement
Difficult :
Une fois votre site en ligne, la prochaine tape importante est davoir des visiteurs. Lobjectif de ce chapitre est de comprendre comment optimiser votre site et vos contenus, afin
dapparatre dans les meilleurs rsultats des moteurs de recherche (par exemple, Google).
Pour cela, il faut configurer correctement WordPress et mettre en avant les sujets en rapport
avec votre site.
151
CHAPITRE 18. AMLIORER LE RFRENCEMENT
Des URLs propres

Le contenu des URLs qui pointent vers votre site, et plus prcisment vos publications, est essentiel pour avoir un bon rfrencement. Par dfaut, les URLs des publications sont de la forme suivante http ://monsite.com ?p=3, ce qui ne donne aucune information quant au contenu de la page. Si votre page sappelle Bienvenue
sur mon blog , il est nettement plus intressant davoir lURL de la forme suivante,
http ://monsite.com/bienvenue-sur-mon-blog car les moteurs de recherche rcuprent
des informations en plus, rien quen lisant ladresse de la page. Pour faire cela, il suffit
daller sur le panneau ladministration du site, dans Rglages > Permaliens , puis
de slectionner le rglage Nom de larticle sur la page des options (voir la figure
18.1).
Figure 18.1 Rglage des paramtres en fonction des URLs souhaites

Une fois ce rglage effectu, vous aurez la possibilit, sur chaque publication, de choisir
le lien qui mnera la page correspondante.
Veillez ne pas modifier ce lien une fois que larticle a t publi, car si un
visiteur (ou un moteur de recherche) rcupre le lien original avant quil soit
modifi, alors une erreur 404 apparatra lors de laccs la page.
Si malgr tout vous souhaitez modifier une URL aprs coup, il est conseill de crer
une redirection de lancien lien vers le nouveau afin dindiquer que le contenu a t
dplac pour viter de perdre vos visiteurs. Certains plugins permettent de grer cela
automatiquement, comme celui indiqu dans le code web suivant :

Redirection
B
.
Code web : 387572
Un contenu de qualit
Lun des critres essentiels pour un bon rfrencement est la mise jour rgulire du
contenu de votre site. Les moteurs de recherche sont en effet conus pour dtecter les
152
FACILITER LINDEXATION
modifications apportes vos pages, aux nouvelles publications et plus gnralement, au
changement. Un site labandon descendra rapidement dans les rsultats de recherche,
car on considre alors que les informations quil fournit sont obsoltes.
On ne parle pas ici de publier des articles tous les jours, il y a trs peu de blogs qui font
cela. Limportant est davoir un rythme rgulier qui convient aux sujets auxquels vous
choisissez de vous consacrer, cest ce qui dtermine la frquence de mise jour. Si vous
publiez sur un projet personnel, vous aurez envie de tenir vos visiteurs au courant de
chaque avance. Si cest une entreprise que vous reprsentez, alors le site peut tre mis
jour lors dvnements particuliers ou de nouvelles activits. chaque site convient
son rythme. Ce quil faut retenir, cest quil ne faut pas laisser vos pages labandon
pour conserver un classement intressant sur les moteurs de recherche.
Ceci tant dit, il ne faut pas faire valoir la quantit au dtriment de la qualit. Publier
des articles au contenu riche et pertinent est plus valorisant pour votre site que de
publier rgulirement du contenu avec peu dintrt. Pour mettre en avant vos pages et
vos articles, noubliez pas de placer les mots importants dans le contenu de ceux-ci pour
faciliter la recherche de vos potentiels visiteurs. Pensez aussi associer des catgories
et des mots-cls pertinents vos articles.
Faciliter lindexation
Le sitemap
Le sitemap est un fichier contenant un plan de votre site, cest--dire la liste de toutes
les pages qui existent avec leurs URLs. Cela permet un moteur de recherche de trouver
plus facilement vos pages pour les indexer. Le sitemap doit dans lidal tre mis jour
chaque fois quune nouvelle page est cre, afin dtre parcourue rapidement par les
robots et donc de contribuer votre rfrencement. L encore, il existe des plugins
qui permettent de gnrer automatiquement le sitemap de votre blog, notamment celui
propos dans le code web suivant :

Sitemap generator
B
Code web : 175538
Les robots
On dsigne par le terme de robots les programmes qui parcourent les pages Internet
la recherche de contenu indexer dans les moteurs de recherche. Il est possible, sur
votre site, de demander aux robots de ne pas indexer une partie des pages dans les
moteurs. Cela peut tre utile par exemple pour la page de connexion ladministration
de WordPress, qui na pas de raison de se retrouver dans les rsultats de recherche dun
internaute. Pour cela, on utilise des directives spcifiques destines ces robots afin de
leur indiquer les pages pertinentes pour lindexation.
153
CHAPITRE 18. AMLIORER LE RFRENCEMENT

Malgr ce systme, les robots peuvent trs bien choisir dindexer vos pages,
cela ne reste quune indication. Ils sont cependant gnralement respectueux
de vos demandes.
WordPress offre la possibilit de cacher lensemble de votre site aux robots, il faut
donc bien vrifier que cette fonctionnalit est dsactive lors de la mise en ligne de
votre site. Dans le cas contraire, vous pourriez ne pas apparatre du tout dans les
moteurs de recherche ! Pour vrifier cela, allez dans Rglages > Lecture , loption
Demander aux moteurs de recherche de ne pas indexer ce site doit tre dcoche.
En rsum
Les URLs rcrites permettent de donner du sens vos liens pour les moteurs
de recherche.
Plus les contenus seront mis jour, plus ceux-ci auront de la valeur pour les
moteurs de recherche.
Les mots-cls rajoutent des informations pour mettre en avant les articles.
Faciliter lindexation du site (sitemap, directives adresses aux robots) permet
damliorer le rfrencement.
154
Chapitre
19
Optimiser les performances

Difficult :
Lun des critres les plus importants dans lexprience de navigation dun visiteur sur votre
site est sans aucun doute le temps que celui-ci prend safficher. Il est donc important de
rduire ce temps au minimum. Pour cela, il faut chasser toutes les lenteurs qui peuvent
amoindrir la qualit de la visite, au niveau du code PHP ou bien de laffichage HTML sur
le navigateur. Accorder de lattention ces deux points permet damliorer significativement les performances ressenties lorsque lon parcourt votre site. Nous allons donc tudier
quelques astuces qui lui donneront un coup de jeune.
155
CHAPITRE 19. OPTIMISER LES PERFORMANCES
Utiliser le cache WordPress

Sur les applications web, lune des actions les plus coteuses en termes de temps de
calcul de la page est laccs aux informations de la base de donnes. En effet, une vaste
proportion du contenu dune page donne provient de la configuration et des contributions des administrateurs du site, tout ceci se trouvant dans diffrentes tables de la base
de donnes. Lapplication doit donc, pour chaque page affiche, tablir une connexion
et effectuer des requtes pour obtenir les donnes ncessaires son fonctionnement.
Pour acclrer le temps de rendu de vos pages et donc diminuer la charge de votre
serveur, il est important de faire attention aux ressources utilises, notamment lorsque
vous dveloppez votre propre plugin, qui devra vraisemblablement crire et lire dans la
base de donnes. Si le premier conseil connatre est de ne pas rcuprer des donnes
depuis la base plusieurs fois dans une mme page, cela nest pas toujours possible de
faon simple et les dveloppeurs de WordPress sen sont bien rendu compte.
La classe WP_Object_Cache fournit une interface au travers de laquelle il est possible
de stocker des informations (sous forme de paires cl/valeur) afin de les rcuprer
plus tard au cours du chargement de la page. Cette solution offre lavantage dviter
deffectuer plusieurs reprises des calculs ou des requtes coteuses en enregistrant le
rsultat de lopration pour un usage ultrieur.
Pour utiliser lobjet grant le cache, il faut passer par des fonctions daccs dfinies dans
le fichier wp_includes/cache.php. Ainsi, la fonction wp_cache_add() permet dajouter une entre de cache, en fournissant en paramtres la cl utiliser et la valeur
stoker. Pour rcuprer la valeur en cache, on appellera wp_cache_get() avec la cl en
paramtre, qui renverra la valeur stocke ou bien false si aucune entre nest trouve.
En utilisant ces fonctions, lide est donc de faire un appel wp_cache_get() lorsque
lon a besoin dune valeur qui est potentiellement prsente en cache. Si cette valeur
nest pas trouve dans le cache, on la calcule comme on laurait fait sans le cache, puis
on la stocke pour un accs ultrieur, ventuellement dans une autre partie du code.
1
2
3
4
5
6
7
8
9
10
11
12
<? php
function getMaValeur ()
{
if ( wp_cache_get ( ' ma_valeur ') ) {
return wp_cache_get ( ' ma_valeur ') ;
} else {
// on calcule notre variable normalement , stock e dans
$value
// ...
wp_cache_add ( ' ma_valeur ' , $value ) ;
return $value ;
}
}
En utilisant le cache de cette faon, vous tes certain de ne traiter les donnes lourdes
que lorsque vous en avez besoin, tout en garantissant de ne faire ce traitement quune
seule fois, cest--dire lors du premier accs.
156
OPTIMISER LAFFICHAGE DES PAGES
Optimiser laffichage des pages

Cacher les ressources
chaque chargement dune page, le navigateur doit rcuprer la fois le code HTML,
les fichiers CSS et JavaScript ainsi que les images affiches. Mme si ces diffrentes
ressources (hormis le code HTML) ne changent que trs rarement, le navigateur va
donc par dfaut les rcuprer en effectuant pour cela une requte auprs du serveur.
Pour chaque fichier, une requte diffrente est mise et doit tre traite pour renvoyer la
ressource, ce qui constitue un cot en temps de rendu de la page et en bande passante.
Afin de limiter le nombre de requtes envoyes votre serveur, il faut explicitement
indiquer au navigateur des visiteurs quels sont les fichiers qui ne changeront que rarement lors de leurs visites. Dans ce cas, ces ressources seront caches sur lordinateur
du visiteur et rutilises chaque fois quune page de votre site sera affiche, tant que
le dlai minimum dexpiration ne sera pas coul. Les feuilles de style CSS peuvent par
exemple tre stockes plusieurs semaines si vous ne mettez pas jour le design de faon
trs rgulire. Il ny a pas de raison de forcer vos visiteurs la tlcharger chaque
affichage.
Pour cacher des ressources, il faut effectuer des modifications dans la configuration du
serveur, cest--dire dans le VirtualHost (entre les balises <VirtualHost> du fichier) si
vous en avez dfini un, ou bien directement dans le fichier .htaccess (situ la racine
de WordPress) dans le cas contraire.
1
2
3
4
5
ExpiresActive
ExpiresByType
ExpiresByType
ExpiresByType
ExpiresByType
On
text / css " access plus 7 days "
text / javascript " access plus 7 days "
image / jpeg " access plus 7 days "
image /x - icon " access plus 7 days "
Pour chaque type de fichier que lon souhaite cacher, on ajoute une ligne indiquant
la dure aprs laquelle le fichier doit tre redemand par le navigateur. Ici, jai choisi
une dure de sept jours, cest--dire quun visiteur naura pas besoin de tlcharger ces
ressources lors de toutes ses visites dans la semaine qui suit sa premire connexion.
Fusionner les fichiers JS et CSS

Principe
Si cacher les ressources permet de limiter le nombre de requtes sur votre serveur
partir de la deuxime visite dun internaute, cela na aucun impact pour les nouveaux
arrivants qui devront quoi quil arrive tlcharger toutes vos images ainsi que vos fichiers
CSS et JavaScript. Si vous possdez plusieurs feuilles de style ou fichiers JavaScript sur
votre site, il peut devenir intressant de les fusionner afin de nen faire quun, qui sera
alors tlcharg en une seule fois par vos visiteurs. La page sera ainsi tlcharge plus
rapidement et donc affiche tout aussi vite.
157
CHAPITRE 19. OPTIMISER LES PERFORMANCES

Ici encore, des plugins existent pour vous faciliter la tche et fusionner vos fichiers la
vole lors du chargement de la page. Vous navez pas vous occuper de la gnration
du fichier final. Tout est fait automatiquement pour vous, comme cest le cas avec WP
Minify, propos dans le code web suivant :

WP Minify
B
Code web : 675432

Configurer WP Minify
Une fois le plugin WP Minify install, un nouveau menu est disponible dans ladministration en cliquant sur Rglages > WP Minify . La configuration par dfaut est
normalement correcte : la compression des fichiers JavaScript et CSS est active et le
nombre de requtes adresses votre serveur est immdiatement rduit. Vous pouvez
tout instant dsactiver la fusion des fichiers en modifiant la configuration dans le cas
o des problmes apparatraient. Le plugin prend aussi en charge la compression du
code HTML en supprimant des caractres inutiles comme les espaces, mais limpact
sur les performances est moindre par rapport la fusion des fichiers de ressources (voir
la figure 19.1).
Figure 19.1 Les paramtres du plugin WP Minify
En rsum
Le cache WordPress permet de limiter les requtes sur les base de donnes, en
enregistrant les informations requises plusieurs fois par page.
La configuration du serveur indique au visiteur les contenus quil peut cacher
sur son ordinateur pour limiter les tlchargements.
La compression des fichiers de ressources permet dacclrer le chargement des
pages en limitant les requtes sur le serveur.
158
Index
administration, 13, 30, 38, 55, 64, 76, 107, shortcode, 139, 142
125, 126
article, 18, 19, 30, 46, 56, 80, 83, 139, 143, template tags, 80, 82
thme, 3739, 49, 53, 64, 69, 70, 72, 74, 95
153
traduction, 87, 89, 92
base de donnes, 5, 9, 10, 15, 65, 80, 110,
URL, 11, 152, 154
119, 122, 130, 156
utilisateur, 34, 35
cache, 156, 158
WAMP, 5
catgorie, 19, 58, 65
widget, 40, 64, 74, 75, 97, 113, 114
codex, 64
commentaire, 3033, 65, 81, 82, 96, 99
extension, 54, 107
filtre, 32, 82, 83, 107, 116
hbergement, 148
internationalisation, 87
MAMP, 7, 9, 10
mdia, 24, 26, 27
menu, 4, 22, 23, 51, 76, 77, 126
mise jour, 18, 56, 152
mot-cl, 19, 20, 39, 154
page, 18, 21, 34
PHP, 4, 70, 80, 88, 109, 130, 139
plugin, 4, 5357, 64, 106, 108, 110, 121,
152
publication, 17, 20, 56, 65, 81, 142, 152
rfrencement, 151153
serveur, 5, 148
159

Propulsez Votre Site Avec WordPress

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Propulsez Votre Site Avec WordPress

Uploaded by

Copyright:

Available Formats

Sauf mention contraire, le contenu de cet ouvrage est publi sous la licence :

Creative Commons BY-NC-SA 2.0

Quallez-vous apprendre en lisant ce livre ?

Comment lire ce livre ?

Pratiquez en mme temps

Utilisez les codes web !

Table des matires

Quallez-vous apprendre en lisant ce livre ? . . . . . . . . . . . . . . . . . . . .

Comment lire ce livre ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Suivez lordre des chapitres . . . . . . . . . . . . . . . . . . . . . . . . .

Pratiquez en mme temps . . . . . . . . . . . . . . . . . . . . . . . . . .

Utilisez les codes web ! . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Prendre en main WordPress

Mise en place du serveur web . . . . . . . . . . . . . . . . . . . . . . . . . . .

Quest-ce quun serveur ? . . . . . . . . . . . . . . . . . . . . . . . . . . .

Sur Windows : WAMP . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Sur Mac : MAMP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Sur Linux : LAMP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Cration de la base de donnes . . . . . . . . . . . . . . . . . . . . . . .

TABLE DES MATIRES

Gestion des articles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Organiser les menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Insertion dans un article . . . . . . . . . . . . . . . . . . . . . . . . . . .

Grer les mdias non utiliss . . . . . . . . . . . . . . . . . . . . . . . . .

3 Grer un site participatif

Activer ou non les commentaires . . . . . . . . . . . . . . . . . . . . . .

Modrer les commentaires . . . . . . . . . . . . . . . . . . . . . . . . . .

Gestion des utilisateurs . . . . . . . . . . . . . . . . . . . . . . . . . . .

Ajouter un thme via ladministration . . . . . . . . . . . . . . . . . . .

Utiliser un thme tlcharg . . . . . . . . . . . . . . . . . . . . . . . . .

Ajouter des widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Placer un nouveau widget . . . . . . . . . . . . . . . . . . . . . . . . . .

TABLE DES MATIRES

La page de prsentation personnelle . . . . . . . . . . . . . . . . . . . .

6 Ajouter des plugins

Grer les plugins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Installer de nouveaux plugins . . . . . . . . . . . . . . . . . . . . . . . .

Mise jour dun plugin . . . . . . . . . . . . . . . . . . . . . . . . . . .

Hupso Share Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Dvelopper votre thme

7 Premiers pas dans le code

Le principe des actions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Les fonctions utilises . . . . . . . . . . . . . . . . . . . . . . . . . . . .

WordPress et la programmation oriente objet . . . . . . . . . . . . . . . . .

Et votre code dans tout a ? . . . . . . . . . . . . . . . . . . . . . . . . .

TABLE DES MATIRES

Un premier fichier PHP . . . . . . . . . . . . . . . . . . . . . . . . . . .

Un fichier courant : functions.php . . . . . . . . . . . . . . . . . . . . . .

Dclaration du thme enfant

Ajouter une zone de widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Afficher les widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Une mthode alternative : des widgets sans zone . . . . . . . . . . . . .

Les templates tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Rendu dun contenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Ajouter des templates personnaliss . . . . . . . . . . . . . . . . . . . . . . .

Les fonctions de traduction . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Ajouter des traductions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Utiliser les traductions dans un thme . . . . . . . . . . . . . . . . . . .

11 TP : Personnalisez votre thme

TABLE DES MATIRES

Dclarer les emplacements du menu et du widget . . . . . . . . . . . . .

Gestion des lments affichs . . . . . . . . . . . . . . . . . . . . . . . .

Dvelopper un plugin complet

12 Crer des plugins