Vous êtes sur la page 1sur 255

100 % pratique !

2e ÉDITION

NUMÉRIQUES
Toutes les marques citées dans cet ouvrage sonr. des
marques déposées par leurs propriétaires respecr.ifs.

Couvert.ure: Simon Kern, Rachid Maraï

Les édit.ions Dunod remercient Alsacréations et Raphaël Goer.rer


pour leur aimable collaboration.

Avec la participation de Guillaume Bertrand

Le pictogramme qui fi9ure ci-contre d'ernei9nement supérieur, provoquant une


méfite une e,q:ilication. Son objet est bai= brulale des cxhcm de livres et de
d'alerter le lectevr sur la menace que ~ . ou point cp.,e lopossibililé même pour
repré1ente pour l'avenir de l'écrit,
particulièrement dons le domaine DANGER
de l'édition teclviique et universi-
taire, le développement massif du
photocopiloge.
® les oula.trs de crée, des œuvres
nouvelles et de b raire éditer cor-
~entestCJJjoord'h.ii meno«ie.
Nous rappelons donc que toute
reprodudion, partielle ou !otole,
le Code de la propriété intellec- de la présente publication est
tuelle du Ier juillet 1992 interdit LEPlfJllXlRJJΠinterdite sons autorisation de
en effet e,q:iressément la photoco- TUE LE LIVRE l'aulwr, de son éditeur ou du
pie 6 usage collectif sons outori· Centre fronçais d'exploitation du
sotion des oyo1 > droit. Or, cette pratique droit de copie (CFC, 20, rue des
s'est générolis.ée dons les établissements Grnnds·Augustins, 75006 Paris).
u
0
C:
:::J
0
'tj"
,-i
© Dunod, 2010, 2014
0
N 5 rue Laromiguière, 75005 Paris
@ ISBN 978-2- 10-07 1543-5
....,
.c
Ol
·;::
>- Le Code de la propriété intellectuelle n'autorisant, a ux termes de l'article
a. L. 122-5, 2° et 3° al, d'une part, que les « copies ou reproductions strictement
0
u réservées 6 l'usage privé du copiste et non destinées à une utilisation collective »
et, d'autre pari, que les a nalyses el les courtes citations dons un but d'exemple et
d'illuslration, « toute représentotion ou reprod uction intégrale ou partielle faite
sans le consentement de l'auteur ou de ses ayants droit ou ayants cause est
illicite » [art. l. 1224).
Cette représentation ou reprodudian, par quelque procédé que ce soit, constitue-
rait donc 1K1e contrefaçon sanctionnée par les ar ticles L. 335-2 et suivants du
Code de la propriété intellectuelle.
Table des matières

Avant-propos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XTff

Remerciements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Wfî

Les fichiers téléchargeables .......................................... XVIII

Première partie - Découvrir, installer et apprivoiser


WordPress

Chapitre 1 - Découvrir WordPress ................................... 3


1.1 Introduction. ........................................................ 3
Rapide présentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Nouveautés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
WordPress : pour tous types de sites ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
-0
0
1.2 Exemples de sites Web avec WordPress et témoignages ............. . 5
C:

0
:::J
Exemples de sites créés sous WordPress ................................ . 5
s:t
,-i
0
Témoignages . ......................................................... . TI
N
@
...., Chapitre 2 - Installer et apprivoiser WordPress . .................. .
.c
Ol
·;::
>- 2.1 Kit de lancement ................................................... .
c.
0
u Prérequis .............................................................. .
Mise en place et utilisation d'un FTP ................................... .
Mise en place d'un serveur local avec WAMP..................... ....... 22
Choix d'un navigateur Internet.......................................... 23
Choix d'un éditeur de texte............................................. 24
IV Sites Web avec WordPress

2.2 Installation de WordPress............................................ 24


Obtention de la dernière version de WordPress.......................... 24
Mise en place des fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Création de la base de données........................................ 26
Installation en 5 minutes chrono . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Activer la réécriture d'URL en local avec WAMP......................... ~
Travailler avec une URL définitive en local (fichier hosts et Virtual Host) . . . 32
2.3 Prise en main de WordPress......................................... 33
Partie publique (front office) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
Espace d'administration (back office) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

Deuxième partie - WordPress côté webmastering

Chapitre 3 - Gestion fondamentale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41


3.1 Gestion du contenu................................................. 41
Les articles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Les catégories . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42"
Les pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Les types de contenus personnalisés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
3.2 Publication d'un article ou d'une page............................... 44
Présentation de l'interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Mise en forme du contenu.............................................. 49
-0
0
C:
Insertion de médias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
:::J
0
3.3 Gestion des médias................................................. ~
s:t
,-i
0
N Bibliothèque des médias................................................ 57
@
...., Ajouter/Supprimer des médias.......................................... 58
.c
Ol
·;::
>-
3.4 Gestion des comptes utilisateurs..................................... 59
c.
0
u Le compte Administrateur. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Les différents niveaux d'utilisateurs...................................... 59
Créer un nouveau compte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Gestion des comptes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6Î
Gérer son profil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6Î
Table des matières V

3.5 Gestion des menus personnalisés .................................. . 6Î


Présentation de l'interface ............................................. . 61
Gérer les éléments d'un menu personnalisé ............................ . 66
3.6 Gestion des commentaires ......................................... . 66
Gérer les commentaires ............................................... . 66
Paramétrer les commentaires .......................................... . 69

Chapitre 4 - Gestion des fonctionnalités . .......................... . 75


4.1 Gestion de l'apparence ............................................ . 75
Installation d'un thème ................................................ . 75
Activation/Désadivation d'un thème ................................... . 76
Changer l'arrière-plan ................................................. . 77
Changer l'image de l'en-tête du site (header) .......................... . 78
4 .2 Gestion des extensions (plugins) .................................... . 78
De quo,• s agit-,·1 2...................................................... .
I •
78
Installation/Suppression ............................................... . 79
Activation/Désactivation . .............................................. . 8T
Utilisation d'un plugin ................................................. . 81
4 .3 Gestion des widgets ................................................ . 82
De quo,• s ag,t-,·1 2. . .................................................... .
I •
82
Installation/Suppression ............................................... . 83
Activation/Désactivation . .............................................. . 83
-0
0
Utilisation des widgets . ................................................ . 83
C:
:::J
0
s:t
,-i
Chapitre 5 - Paramétrage de WordPress .......................... .
0
N
5.1 Les réglages ....................................................... .
@
...., , Iages generaux
Reg , , .................................................... .
.c
Ol
·;::
>- Options d'écriture ..................................................... .
c.
0
u Options de lecture .................................................... .
Options de discussion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Réglages des médias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Moteur de recherche................................................... 94
Options des permaliens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
VI Sites Web avec WordPress

5.2 Les outils............................................................ 96


Leur fonction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Principaux usages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
5.3 Préparer WordPress : quelques recommandations. ................... 97

Troisième partie -WordPress côté webdesign

Chapitre 6 - Comment fonctionne un thème ? . . . . . . . . . . . . . . . . . . . . . . 10T


6.1 Les thèmes : leur anatomie .......................................... 1oT
,
Prerequ,s. .. qu est-ce qu un site Internet 2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . -,-,.n-
I I •
1v 1

Comment fonctionne un thème ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103


. h,ers
Les f,c · d' un temp /ate : qu,· f mt· quo,· 2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ~
1 v~

Comment ces fichiers travaillent-ils entre eux ? . . . . . . . . . . . . . . . . . . . . . . . . . . Tas


La hiérarchie des fichiers ou comment WordPress reconnaît les fichiers d'un
thème.......................................................... 108
6.2 Les thèmes : boucles et fonctions communes ......................... 109
Les marqueurs de modèle (tem plate tags) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Les fonctions PHP WordPress (function reference) ........................ lTo
Boucle standard WordPress (/oop) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tif
Fonctions communes dans une boucle. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tî2
Fonctions communes hors d'une boucle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ti3
Personnaliser une boucle avec query_posts() . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ti3

-0
Utiliser plusieurs boucles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . TiS
0
C:

0
:::J 6.3 Wordpress : fonctionnement avancé ................................. Tî6
s:t
,-i Tî6
Objets, méthodes et paramètres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
0
N
La boucle et l'objet $post ............................................... Tî7
@
....,
.c Personnaliser une boucle avec un objet de WP_ Query() . . . . . . . . . . . . . . . . . . Tî8
Ol
·;::
>-
c.
Interagir avec fa base de données WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . TI9
0
u
6.4 Wordpress: l'envers du décor ....................................... 120
WordPress et les URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
WordPress et sa base de données. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12T
Trucs et astuces pour réussir son template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12T
Table des matières VII

Chapitre 7 - Comment créer son propre thème ? . . . . . . . . . . . . . . . . . . 123


7.1 Boîte à outils ........................................................ 123
7.2 Méthode à suivre................................................... 124
Précisions. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Création du design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125"
Intégration statique en HTML/CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Création du template WordPress. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
7.3 Un bon départ pour un bon thème .................................. 131
Partir d'un thème existant? ............................................. 131
Quatre fichiers de départ. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Modifier la description et la vignette du thème . . . . . . . . . . . . . . . . . . . . . . . . . . Ï32
Tester et activer notre ébauche de thème . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Insertion de votre code HTML statique. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
7.4 Template WordPress: les bases ...................................... 135
Faire appel à des fichiers PHP distants.................................. 135
Création d'un header compatible WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Création d'un footer compatible WordPress............................. 136
Mettre en place un Menu............................................... 137
Afficher un article ou une page avec une boucle standard . . . . . . . . . . . . . . . 137
Autres affichages avec une boucle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
Une boucle : plusieurs résultats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Afficher un lien « Lire la suite ». . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
-0
0
C:
:::J
Afficher l'extrait d'un article............................................ 139
0
s:t Lister les catégories . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
,-i
0
N Lister les pages. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
@
...., Insérer des commentaires. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
.c
Ol
·;::
>- 7.5 Template WordPress: des fonctionnalités utiles ....................... 141
c.
0
u Afficher la date et l'heure de parution d'un article ....................... 141
Afficher l'auteur d'un article . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . UT
Afficher l'image à la une . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Afficher des news . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Créer un article mis en avant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
VIII Sites Web avec WordPress

Créer un formulaire de recherche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146


Partager un article sur les réseaux sociaux. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Navigation interne : suivant et précédent. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 7
Récupérer le nom ou la description d'une catégorie ...................... 148
Créer une page 404 personnalisée. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Aiouter les classes CSS WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Changer l'arrière-plan du site depuis le back office . . . . . . . . . . . . . . . . . . . . . . 149
7 .6 Des plugins très pratiques ........................................... Ï50
L'effet lightbox......................................................... 150
Pagination numérotée . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ïsT
Insérer un fil d'Ariane (breadcrumbs).................................... 152
Créer et afficher un formulaire de contact. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Gérer une ou plusieurs Google Maps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Rendre un site privé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . l 53
7.7 Création d'une ou de plusieurs zones de Menus ..................... 154
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Le fichier functions.php. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Insertion dans le thème. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Reconnaître la rubrique courante . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . l 55
7.8 Création d'une zone de Widget..................................... 155
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
Le fichier functions.php. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
-0
0
C:
Insertion dans le thème. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
:::J
0
s:t 7.9 Création d'un modèle de page ...................................... 156
,-i
0
N Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
@
...., Création du fichier php . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . l 56
.c
Ol
·;::
>-
Personnaliser la homepage avec un modèle de page . . . . . . . . . . . . . . . . . . . . TI7
c.
0
u Créer un modèle de page avec une boucle personnalisée................ 157
7. l O Création d'articles personnalisés (Custom Post Type)........ . . . . . . . . 158
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Le fichier functions.php. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Aiouter une taxonomie. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Table des matières IX

Modifier l'icône dans le back-office . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160


Affichage dans le thème . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . T6î
Des plugins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . T6î
7 .11 Champs personnalisés (Custom Fields) ............................. 161
Présentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . T6î
Création depuis le back-office.......................................... 162
Affichage dans le thème................................................ 162
Création de Meta boxes avec le plugin ACF. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Récupération et affichage dans le thème . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
7 .12 Pour aller plus loin................................................. 164
Créer ses propres Shortcodes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Aiouter des fonctionnalités natives à votre thème . . . . . . . . . . . . . . . . . . . . . . . . 165
Quelques pistes pour aiouter des options à votre thème. . . . . . . . . . . . . . . . . . 165
Thème enfant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Les marqueurs conditionnels (conditional tags) . . . . . . . . . . . . . . . . . . . . . . . . . . 167
Retour sur ce que vous venez d'apprendre. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168

Chapitre 8 - Un tutoriel pratique : réaliser le template AlsaWP . . 169


8.1 Feuille de route..................................................... 169
8.2 Le fichier PSD....................................................... 170
8.3 Intégration statique : « PSD to HTML » ............................... 170

-0
8.4 « HTML to WordPress ».............................................. Tn
0
C:
:::J
Préparation des fichiers du template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173
0
s:t
,-i
Insertion du code statique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 73
0
N Insertion des fonctions WordPress (template tags) . . . . . . . . . . . . . . . . . . . . . . . 174
@
...., Dispatcher le fichier« index.php » . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
.c
Ol
·;::
>- Gérer les catégories . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 5
c.
0
u Gérer un article . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 5
8.5 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
X Sites Web avec WordPress

Chapitre 9 - Étude de cas : acheter et modifier un Template


HTML/ CSS ou un Template WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
9 .1 Introduction...................................... . . . . . . . . . . . . . . . . . . . 177
9.2 Les plus et les moins.. .............................................. 178
9.3 Les frameworks CSS................................................. 178
9 .4 « Méthodologie : Modifier un Template HTML/CSS » . . . . . . . . . . . . . . . . . Tffiî
Le template «Prologue» de« HTMLSUP.NET ».......................... 180
Création du dossier et des fichiers de thème. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18T
Quel angle d'attaque adopter ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
La sidebar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
Le menu............................................................... 183
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
9 .5 « Méthodologie : Modifier un Template WordPress existant».......... 186
Conseils . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Conclusion............................................................. 187

Quatrième partie -WordPress côté coulisses

Chapitre 10 - WordPress et le multisites . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19T


10.1 Présentation ........................................................ 19T
10.2 Activation de l'option multisite.. .................................... 192
-0
0
10.3 L'interface d'administration du réseau.... .......................... 192
C:
:::J
0 10.4 Marche à suivre pour créer un sous-site............................. 196
s:t
,-i
0
N
10.5 Choix de la façon d'installer les sous-sites . . . . . . . . . . . . . . . . . . . . . . . . . . 196
@
....,
.c Chapitre 11 - Maintenance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
Ol
·;::
>-
0
c. 11 .1 Sauvegarder WordPress. ........................................... 199
u
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
Sauvegarder les fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Sauvegarder la base de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Cas spécifique : les options de thème . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Table des matières XI

11 .2 Mettre à jour WordPress............................................ 203


Avertissement .......................................................... 203
Mise à ;our manuelle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Mise à ;our automatique. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
11 .3 Déménager WordPress............................................. 206
WordPress et son URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
WordPress et son fichier« wp-config.php ».............................. 206
Déplacer un site WordPress entier. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207°
Supprimer son site WordPress. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 0
l l .4 Garder Word Press en bon ne Santé. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 0
Sécuriser et améliorer WordPress. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 0
Webmaster Google tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21T
11 .5 Référencement et statistiques. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21T
Conseils et plugins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21T
Google Analytics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213

Chapitre 12 - WordPress côté nomade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 1 7


12. l Gérer son WordPress n'importe où.................................. 21 7
Applications Wordpress : Apple, Android, Windows Phone et BlackBerry . 21 7
Zoom sur l'application /phone.......................................... 218
Zoom sur le back-office mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
12.2 WordPress et le responsive web..................................... 223
-0
0 Le responsive web design : les grandes lignes........................... 226
C:
:::J
0 Adapter son WordPress pour les mobiles en deux minutes................ 227
s:t
,-i
0
N Bibliographie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ~
@
....,
.c
Ol
Webographie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 1
·;::
>-
c.
0 Glossaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
u
Index ................................................................... 2:î5
Copyright© 2014 Dunod.
Avant-propos

Depuis sa version 3.0, WordPress est devenu une des références en système
de gestion de contenu (CMS : Content Managing System en anglais) .. Il
permet de concevoir et de gérer facilement un site Internet. WordPress vous
permettra notamment de créer des pages web, d'y inclure du texte, des
images et d'autres médias, de créer des rubriques, d'éditer des articles.
WordPress permet également de gérer un site multi-utilisateurs. Enfin, la
gestion de l'apparence du site se fera aisément.

Philosophie de l'ouvrage
« 100 % pratique ! », cet ouvrage se veut clair et concis. Usant d'un langage
facile et accessible, il vous accompagnera lors de votre découverte, prise
en main et perfectionnement de WordPress. Pour en tirer le meilleur,
accompagnez votre lecture d'une manipulation en direct de votre WordPress.

Contenu et public de l'ouvrage


-0
0
C: Cet ouvrage se destine à toutes personnes, débutants ou utilisateurs p lus
:::J
0 avertis, souhaitant découvrir WordPress sous toutes ses facettes, et plus
s:t
,-i particulièrement aux webmasters voulant insta ller, paramétrer et gérer un
0
N site sous WordPress et aux webdesigner / webdéveloppeur confirmés en
@
...., HTML / CSS voulant créer entièrement un thème ou en modifier un existant .
.c
Ol
·;::
Les sujets abordés successivement sont les suivants :
>-
c.
0 • Origine, philosophie et vocabulaire spécifique de WordPress,
u
• Installation et paramétrage de WordPress,
• Gestion d'un site mono- ou multi-utilisateur avec WordPress,
• Création de templates avec les template tags et les boucles WordPress,
• Maintenance et sécurisation d'un site avec WordPress,
• WordPress et le monde mobile (lphone, Android, Windows Phone).
XIV Sites Web avec WordPress

L'ouvrage se compose de quatre parties :


• Les deux premières parties sont consacrées à l'installation et à
la découverte de WordPress. Vous y apprendrez comment utiliser sim-
plement WordPress et gérer un site Internet. Elles sont donc destinées
aux personnes (telles que les webmasters) s'occupant de la mise à
jour et de la vie d'un site Internet. Elles ne nécessitent aucun prérequis
particulier.
• Les deux dernières parties expliquent comment créer et / ou
modifier un thème WordPress. En d'autres termes, comment utiliser
WordPress comme un système de gestion de contenu (CMS) flexible
et comment le modeler selon vos attentes. Elles nécessitent des
connaissances en HTML / CSS.

Qui est l'auteur ?


Simon Kern est un designer de 28 ans qui évolue le jour dans une agence
de communication créative, et la nuit en tant que freelance pour son studio
« Brin de web» (simon-k.com) depuis 2007, quand l'envie s'en fait sentir.
Son travail de freelance lui permet de choisir ses contrats et de vivre de
nouvelles expériences créatives : photos, vidéos, motion, illustration, Web ...
Simon a eu la chance de débuter sa carrière au sein d'Alsacréations, une
agence Alsacienne reconnue pour la qualité de ses projets dans le domaine
du Web ainsi que pour ses publications. Après 5 années inoubliables au sein
du noyau d'Alsacréations, il intègre fin 2013 Eiko Studio (eiko-studio.com),
une agence de communication parisienne tout aussi magique où il exerce
ses ta lents dans les domaines du Web, du print et du motion Design avec
une équipe au top !
Par ailleurs formateur et orateur itinérant depuis 2011 , Simon a publié
-0
0
C:
un DVD de formation chez Elephorm et écrit régulièrement pour la presse
:::J
0 spécialisée dans le domaine du Web et du Graphie design .
s:t
,-i
0
Sa philosoph ie ? Privilégier le travail sur le terra in, les « mains dans le
N
cambouis». Confiance, indépendance et reconnaissance de chacun sont
@
...., pour lui indispensables pour la cohésion d'une équipe créative. Le côté
.c
Ol
·;:: technique allant de pair avec le côté design, il joue sur ces deux tableaux. S'il
>-
c. travaille aujourd'hui davantage sur le design, il ne renie jamais la technique,
0
u surtout quand celle-ci ouvre la voie à de nouvelles interactions possibles ... Il
se donne toujours les moyens nécessaires pour arriver au meilleur résultat:
les bons outils, les bonnes méthodes, les bonnes ressources et les bonnes
pratiques. Il sait d'expérience qu'il n'est jamais bon de tirer sur la corde et
qu'il est important de sortir la tête du guidon pour être plus fort et partager
ce que l'on sait !
Avant-propos XV

Vous pouvez v isiter son Portfolio et le contacter rendez-vous sur www.


simon-k.com. Pour suivre une formation WordPress (ou autres) en intra-
entreprise ou dans la capitale Alsacienne : www.alsacreations .fr.

-0
0
C:
:::J
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0
u
Copyright© 2014 Dunod.
Remerciements

Merci à Marine, Guillaume Nicolas-Meyer, David Pauly, Thomas Kern, Chris-


te lle et Marc Vecch ini, mes parents, ma fami lle, mes amis, mes collègues
d'Alsacréations, mes collègues d'Eiko Studio, Jean-Baptiste (éditions Dunod)
ainsi qu'aux lecteurs de la première édition !

SIMON
KERN & Creative
Designer
11r11,,n t.iion

-0 www.simon-k.com
0
C:
:::J
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0
u
Les fichiers
téléchargeables

Sur www.dunod.com, sur la page dédiée à l'ouvrage, vous pourrez téléchar-


ger quelques fichiers qui vous permettront de vous lancer avec WordPress :
• Le template WordPress (AlsaWP),
• Des sources Photoshop destinées aux designs,
• Les codes sources des exemples du livre,
• Les fichiers HTML/CSS de l'intégration statique.

Vous trouverez également quelques liens utiles vous permettant de


télécharger :
• Le logiciel FTP FileZilla (Mac ou PC),
• Le serveur local WAMP (PC) ou MAMP (MAC),
• Les navigateurs Internet libres : Firefox, Chrome, Opera,
-0
0
C: • Les éditeurs de texte NotePad + + et Sublime Text 2,
:::J
0 • La dernière version de WordPress.
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0
u
...
PREMIERE PARTIE

Découvrir, installer et
• •
appr1vo1ser
WordPress

Cette partie va vous permettre d'insta ller WordPress. Avant de passer aux
choses sérieuses, nous allons préparer le terrain pour réussir son installation.
-0 Dans le cas contraire, nous risquerions de rencontrer des prob lèmes qui
0
C:
:::J nous feraient perdre du temps .. .
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0
u
Copyright© 2014 Dunod.
Découvrir WordPress

1.1 INTRODUCTION

Rapide présentation
WordPress a été créé par la société Automattic. Bien que WordPress soit libre
et gratuit, Automattic s'occupe de son évolution. Automattic développe aussi
de célèbres services comme : Akismet (lutte contre le Spam) ou encore le
service Gravatar (gestion de votre identité sur le Net).
WordPress.com et WordPress.org sont tous deux des sites gérés par
Automattic. On peut très facilement les confondre! Une petite mise au point
,.
s impose:
• WordPress.com permet de s'inscrire en ligne et de créer rapidement et
facilement son blog. L'adresse de celu i-ci prendra a lors cette forme :
votre nom. wordpress.com.
-0
0
C: • WordPress.org est le site de référence. li recense tous les éléments
:::J
0 en relation avec WordPress : la dernière version téléchargeable, les
s:t
,-i plugins, la documentation officielle (codex). C'est donc exclusivement
0
N à ce site que nous ferons référence dans ce livre.
@
....,
.c
Ol
·;::
>-
c.
0
u Nouveautés
La version 3.0 de WordPress a apporté des fonctionnalités fondamentales qui
ont transformé WordPress en un véritable CMS (Content Managing System :
gestionnaire de contenu) . La version 3 . 9 a éga lement apporté sa pierre à
l'édifice avec :
4 Chapitre t. Découvrir WordPress

• Un nouveau thème par défaut (« Twenty Fourteen »),


• Une refonte de l' interface d'administration : p lus épurée et plus
moderne,
• Une gestion des widgets repensée,
• Une optimisation globale des performances,
• La possibilité de créer des playlists audio,
• L'éditeur TinyMCE amélioré.

WordPress : pour tous types de sites !


Son utilisation originelle : le blog
L'utilisation d'origine de WordPress est la gestion de blog.
Un blog est une forme de site web particul ière qui se caractérise par la
publ ication d'articles (ou de billets) d'une même personne, dans un ordre
chronologique, avec possibilité de mettre des commentaires. Cette définition
est incomplète, voire dépassée.
Au jourd'hui, un blog évoque plutôt l'aspect esthétique et général d'un
site Internet tel un magazine. Un blog n'est plus forcément un journal intime:
on y trouve un vrai menu de navigation, plusieurs rubriques, etc.

Son utilisation en CMS


Un CMS permet de gérer le contenu d'un site Internet:
• gestion de plusieurs pages et articles ;
• gestion fine de plusieurs utilisateurs ;
• gestion des médias ;
-0 • gestion aisée de l'arborescence et de la navigation .
0
C:
:::J
0 Un CMS est basé sur cette règ le d'or: la séparation de la forme et
s:t
,-i du contenu. D'un côté, il sert à gérer le contenu (texte, image, naviga-
0
N tion ... ) et de l'autre sa m ise en forme, par l'intermédiaire d'un template
@
...., (HTML/CSS/Javascript). Un schéma de fonctionnement simplifié nous per-
.c
Ol
·;::
mettra de comprendre (figure 1. 1).
>-
c.
0 Un site pour présenter une entreprise est un exemple d'utilisation clas-
u
sique de CMS. Ce site sera composé ainsi :
• plusieurs pages statiques (présentation, contact, équipe) ;
• une ou plusieurs rubriques qui listent des articles (références cl ients,
actualités, blog pro.);
• un ou plusieurs utilisateurs (administrateur, webmaster).
1.2 Exemples de sites Web avec WordPress et témoignages 5

Espace
d'administration

Choix te
oo•·~~ 7' ""-
~
~odiflcotlon
ucontenu

( )
MisG en forme
Template Base de

1 données
1
;
Î
Page html (public)

Figure 1.1 - Schéma de fonctionnement simplifié d'un CMS

Autres types d'utilisations


Qui dit CMS dit également site e-commerce, site magazine, portfolio, site
de communauté, site d'actualité, site perso. Avec WordPress, beaucou p
d'utilisations différentes sont possibles !

-0
0
C:

0
:::J
1.2 EXEMPLES DE SITES WEB AVEC WORDPRESS ET
s:t
,,.
,-i
0 TEMOIGNAGES
N
@
...., Exemples de sites créés sous WordPress
.c
Ol
·;::
>-
c. WordPress s'adapte à des utilisations diverses et variées que nous vous
0
u présentons ci-après (figures 1.2 à 1.13), des exemples valant mieux que des
mots.
6 Chapitre t. Découvrir WordPress

Blogs/ Magazine

Figure 1.2 - http://blog.us.playstation.com

lt,S/0[ Ot'VtLOl'CRS

NSIDE BlackBerry fo•>cw - 8• inA~ El

-0
0
C:
:::J v;,,,., Stay Connected
0
a fa

-
i\'I
s:t
,-i A New Chapter for
0 BlackBerry Events
N
@
....,
.c
Ol
·;::
>-
c.
0 OJ.23.l.fl~""a,e.,
u

Figure 1.3 - http://blogs.BlackBerry.com


1.2 Exemples de sites Web avec WordPress et témoignages 7

rr1 ... ~1F )r· V ~ ~:r\


'-' 11R~ ;.1~·J,•, :l • ~tk>-

" • J • 1

Photos: Pirst Nations,


,', Il'~'

town of Birtle, prepare


\''

--
1/, • • , •• • -C• ,, 1 • •! 1, jft•, t•,• , "'

8.-,onc.• • ncl .J.,..Z


COflW\f C. ~ ,f\~p,ef
atIIWH Cl:ln Orovp

for floocling in western ,1...


Maidtoba Jaf'\ftAfM'IIOJ!U'I
CUWl'\tl... COl'U.n
H. . lfl.S.,S• ._.,

,utc 11uc.l"!tt ,..Mt


fOt Pftl09l0UI
t1dll11ry .-Vtl'lture -
111,,,.nc..
M.1,or ot...it.,"
vmtfl, Clff
m.uc~

ll_......,,,,..,1
"-·~
or
'"'°'

UblUflino'°
tn

m .....
FWU1g.1n ...
--
.....~W'llfLa•

................

Figure 1.4 - http://metronews.ca

-0
0
C:

0
:::J
\~tTE~i
s:t
,-i ·.:::=.. 8 res ateliers follow t,
1 lt•r
0
N Jouons MC CSS3
18h00 • 18h30 :
@ Aa:mibilitf des documenu POf
...., PrtsenllllÎOII~~
.c lSl\30 . 19h00 :
Ol Découpe HTMUCSS pertinente
·;::
>-
c. lnûsr>tion tfune IWWll!tt«
19h00 • 191130 :
0
u Comment smr IE6
Au 'Rafiot' ::."'.::::::

Figure 1.5 - http://www.blup.fr


8 Chapitre t. Découvrir WordPress

Galeries/Portfolios

REHIX« a lil

':,,,..
• •
SPA CE
'
a=,

r.: ~ . ~~<.:.
r.~~+I~

~
R•sponsiv.
HTMLS/CSS3 ~ .
. \\'"'"''"'°""'"'~.. ~ FREE
P•o ; M f Nl" ~ h,~ - :
Pwv f OSA.'11 ~
· 1
U!•'.ll•r.,r

____
,.._
..~.,..... ..,.,...,.,.,_,_
_ -
•r,,~ ,~ ,·u,.,, !l.:r..1..
--
• •
~11,1,, li'~ d1

--
r ,, >(.•',
..... I',,: -

• /~

Agure 1.6 - .http://cssremix.com

~ ·1tt16 (ft'111t!
web dnlg ln•plratlon

...Q;nder
lhlOtOS..ot
.........
~. - ' ~

~~, COWVUt DUIGNS DESIGN TO XHTl1.


fO V-AUOCUWt9$fftS

fil ltN'M kt

-0
0
C:
:::J
0
s:t
,-i
0
N
@
....,
.c
Ol
--
&0-!1.1.1.!. ~ .w!J!.!J'I
·;::
>-

--
c.
0
u
·-

Figure 1.7 - http:/7www.webcreme.com


1.2 Exemples de sites Web avec WordPress et témoignages 9

Sites corporate et professionnels

Figure 1.8 - http://www.radiumlabs.com

-0
0
C:
:::J
0
s:t
,-i
0
N 1/ô>S Tr1~s.Mc•• fit 1lfil:>ltu,re11 dtwttYc~,..,ot
-•1Vo.$"'..JJl!,:ptffl(up$--""11Nl1'1....,.._..... ~, ,...
~111,n:.-~.,..,~-..,oul'$ ..._...,t,"o-,,;e•1to.,.,, ,.,...,,.,,,, 11 t: c!,
@
....,
.c fl',f.lF1tl-1~l-,#(!~ll'W91'1~ftl~ti;t"c;t<T$t4)$f>f
~---lhtlJfS nl,.l,O(s::E S!lttcfS&Cl!fOOU l'c,r
Ol ~,c.'llt!'ec;t'let~•Mt't_.Clltf«lt'llu.cà.FefflOl"t
·;:: .,..,,...,..-~wlo..,111HlfQlff p1o_,.,.,111$11"11Q;

>-
c.
lll~l'()f,$

0
u

Figure 1.9 - http://www.racmg.ups.com


10 Chapitre t. Découvrir WordPress

Sites magazines

..
Categ:orie-;i Freebies Oeals IIECla::1 l::Jmf1'23

-- ·-~·=... ~
~
i:~ ~!t
~--
What's really wrong with
Squarespaca Logo
IA~ Wff\ Squ11tl'!'!>l)IIGf: 1-aunrhc-d Sql.lll~p,11:e
l.:igo., ncw addition IO-tht!r sCMu: d(s!gntd to
Our favorite tweets of the
waak: January 20, 2014 •
January 26, 2014
Cvery~tk·~ t\\fft a lot or W:l!f'~ing w.iff
Newsletter
JI
"
t~ t • T" H<d~ w ,r',O, ~,,, , ... ~ . ,1
pro\/lcft ln:;iM<IUillS .:intfiffl,ll b.1\!l'l('SSCS W!ll'Hh('
muns to crtftt, prt'tss.:o~ 1cgo. Wcthln hOursof
hllghll&hl1t1g gteo1t tontomt lh4 w, find on the web ~'""' ·:l~:t ~.,.,. :J • :i, gr ~, r -;..,,-
mac c-an be of lntttts.t to web des.:gnen. The beS1.-
lhe~~ l.;ll,l'IChil'l@. SO(i;)I m('(ll,t~ ,lfl.,-ne,

41\l /'.,., '>,,kn,.., b..n SVl'.IS(lltl>t


CONYERT YGUR PSD TD
·pt library to add voice comma
HTML5&CSS3
sites, apps or games.
I" -~ .... ...... '\.
Chop<:hop.org .
1 .........-,
-:-
-- , .
Comics of the wNk #219
.
so freebles that you have
totrv

Figure 1.10 - www.webdesignerdepot.com


'

• .

e .g Respon$.1Ve~gn

Actveruse w 1:h us1

Pragmatic UX Techniques For Smarter


Websites
-0 By Marko Dugonjié
0
C: 0
:::J


0 • 2Cornmtr1ts
s:t
,-i
0 Wh.-it is "User Experierice Design" exa('t1y? Should you not sta.r t it
N unless you are fully dedicated, or should you embrace it in the process F, -Il,; yf V

@ as soon as possible? Are all designers also user experlence


...., designers, or is it a sep arate exper tise?
.c
Ol
·;:: [J]] DRAG &DROP RESPONSIVE GRID

>-
c.
0
u
• ; SmashingNewsletter

Figure 1.11 - www.smashingmagazine.com


1.2 Exemples de sites Web avec WordPress et témoignages 11

Sites associatifs

- .:
aleaulaterre eu

• hlh.....
• hl1nU11~
• hoff l~r,tOfl'II.. t\
IÎi Pbc,111t.

• t:Grl"'ftf,U1 u upll•I• europlenn• •ux


0 Au,.., _ . J {WoPftn couleurs d' • A te.u la terr•l kl Dt<ouv,uler~\l,l,~cod..
• Allll!'K<t .. 9-t.\li~t~d,t,
Strasbourg 1

-~·..
1,....d,tllfno,w'tf~S,lnl~-·
Sc,~91
.) f.111,'Jl;.(-n,a l•... bwnC1MW11,1ndt~•tic•l.mtre
U...91.-da«Oilil~-OWIIIIN
COMI.CVÛdit Ill""' dOll Mtt<Nf*t Ili~ .l,l'°"O'I""'
hlM~ n.-o ...olr P!'POM(<IO.•
• °""'
.._..
Ôf b'IM . . . •5t.appanlf '51.#tfUf . , , 9lrlibâ

-
•~u (l'!tMtK<WIMltf~dtlwtUnot
Q .......

*lll'ltff. A.-... trMflw tl • â»owl .S )a.........._ C>+-...u:Cht&ttl'\ll: ~ 111'1 · ~ · ~


".,..,....,.-..,.., • v'lf'IIO,ll,i wswn_.,• Ot touret .itl'l.,.ât0nwrc-à\ll...-1
i fAtQr.., j 1 ..,.,.• .,.,."""' ..
• \lhto....,• • ~ (d.a.t,t l)lflfl... lMaMloftO.._l.-.t~ Cl6tu,. des lnscrlptlons •u
e(OIMIUtWC . . . . . ldp,~IQuffdtlMU...-t~llOGlt Pulement Europhn
• A.~,rci11 ....,v.-1 ~ - ,-o...,_ d••..wn p,llrl-. p,ot;~,• ..-, Lü ...alpuons IU hfi..wc ù.OCl'ttn
• lnf~f'Nl\'Jlll(h.ntlff,tÇOI,;· "°'1riffl Q n t ~ f f ~ d t J , M M t l , tt
Hnl MonnM dtwl V~i,e l*A'tl.
i ~lhON dJoœokwllWf'!fdtpopubtlOf'I ÎGUl+s0ttr. .nw
pa111QPM-..oonf41fMft . . . .d. ..Nlta
•L•1~1,1l<!JtJrft "'4}d~1'C.«.ur.d«-atl'•:t~011Ud.11lolloe.li~
MP11bf•~bcu•U~te0fll

....o.w,.. . . . . ..._. . . . .~,,.t,--d


"(h,ilf)4N.....
"•.WOfllfo Po..-pknd.i,.,_.. .
• ,....1.,""'pt,i,.,c,.,..,Ptlin _,,_,

Figure 1.12 - http://www.aleaulaterre.eu

Sites d'e-commerce

TINKERING
WOOO $ 1GNAGE l lVE FêEO BLOG
e MONKEY
FlttOTOS ABOVT CONTACT

-0
0
C:
:::J
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0
u

Figure 1.13 - http://www.t1nkeringmonkey.com/


12 Chapitre t. Découvrir WordPress

Témoignages
Geoffrey Crofte, Développeur Web

., ,_. .
j~IYJ: 111infiritrslidesl"CW m
que!queslignesdej~IYJ
Des styles l)Efscmilisél IX)Ur vos
chechbaxes mfull m

tl
(ffWfWl'S~)I'
~d'~<'tsl ,.$W4"'p,NNl tmP'I

....,.....~
JOl',<'.st• I I ~

__..
INll,(d~

...........
M"'~~
OHN!TltflU.ot

_..,.
~tl/owfw.itl

~·tl't-RPHICll,lflM'S,OSSN
dt~'~Ot(O'ltl'Olt1ot
~~OtlflilSOM

Artide àS\ICCk W'!OS

. . . . . _,
Coostruireun site depetiles amlfll:es
avec11100

t:l
l.~Pl'Ol""t lltn
HîKSPtfffl«~ wi rt<htnntotC"'5
~t.-i.ctf'l'IIN
d\t"'ltl\7tt~fMUL'II ~~ .....
,ptOMSesoanstts

...... 1$,..,.,~
O,le tn OIMS trttàMJl

-
p,,ttS1vWi«r,,11<t\t, N\Mt1tonehtfcN
~(l'ICn,lde~t.,,fl:I.C.w.rt"
l"tr"~(Ç.ttM:~ttclf>tftmtl")f

Figure 1.14 - www.creativejuiz.fr

Je su is un jeune fou qui s'est perdu dans les méandres du code et du


-0
0
pixel. Entièrement autodidacte, j'ai eu la chance de rencontrer des gens
C:
:::J géniaux chez Alsacréations (et de pouvo ir travai ller au quotid ien avec eux)
0
s:t
et dans le monde du Web.
,-i
0
N Également freelance, j'ai pris le parti du Web ouvert en faisant de HTML,
@ CSS, PHP et JS mes outils quotidiens. Je partage mes aventures et découvertes
....,
.c
Ol
sur Creative Juiz, mon petit blog fruité !
·;::
>-
c.
0
u Pourquoi a-t-il choisi WordPress ?
À l'époque de mes débuts je me suis essayé à Joomla et WordPress, ce der-
nier m'a séduit par sa simplicité et sa flexibilité. Aujourd'hui construire un site
web vitrine, blog, forum, galerie ou e-commerce est un jeu d'enfant grâce à
ce CMS. WordPress offre des possibilités illimitées pour un développeur PHP.
Sa communauté est certainement l'une des plus actives de la toile.
1.2 Exemples de sites Web avec WordPress et témoignages 13

Stéphanie Walter, Webdesigner

Rf.All$ATIONS À PROPOS CONTACT BI OC

f\Qsacréatures

]' ai un très beau métier .. .

qu, cons1~le 3 a;:,porte1de~ sol utioM simplH $C 91 jga ntH à VO$ utilil4WU'5 finaux. Je suis spéc1ol,sêe en èes1gn web et mobilité. Je crée des
s.ftPs Weber OP~ apf)Jications mObOPs natiVT"s i nl ultîve!i. e-1f!(gcnoml qu~ 1 ·1111H~l\tetJr e;;t placé au cœu, cru prcces~us pour lu! fournir 11'
meilleur expénence p~s1ble . Keep it simple- !

Figure 1.1 5 - www.inpixelitrust.fr

Je m'appelle Stéphanie Walter et je suis graphiste et webdesigner spécia-


lisée dans la mobilité, les interfaces et l'expérience utilisateur. lnpixelitrust
est mon portfolio freelance qui comporte une partie blog où je partage mes
découvertes, expériences et connaissances.

-0
0
C:
Pourquoi a-t-elle choisi WordPress ?
:::J
0 J'ai choisi WordPress pour sa flexibilité et sa simplicité. J'avais commencé à
s:t
,-i
0
l'utiliser pour mon premier blog il y a des années et me suis très vite aperçue
N
qu'on peut al ler beaucoup plus loin que ça avec un ce CMS. Il me permet
@
...., d'avoir à la fois une partie portfolio, et une partie blog gérées séparément,
.c
Ol
·;::
d'avoir du multilingue et de pouvoir publier très rapidement mes travaux et
>-
c. articles en quelques clics.
0
u

Coralie LM, Chef de projet


Je suis Coralie LM et je travaille en tant que chef de projet dans une agence
web strasbourgeoise. Ayant eu soif de culture et d'évasion, j'ai voyagé un
an autour du monde. www.voyage-en-papillote.fr
14 Chapitre t. Découvrir WordPress

0 ~""'..;.:...
~.......--
··' ___ ..0
....

- . ..-:. __..._....

- - ...
......-

__..
--
"'-:.. .-. , : -:,~.:=:::::.::.--::.:..:::
: : : - , .. u,..--~•--
- - · • - c.. ....... .n ...............

Figure 1.16 - www.voyage-en-papillote.fr

Pourquoi WordPress pour ton tour du monde?


Je connaissais déjà ce CMS ayant eu à faire à lui dans le cadre de mon
-0 travail. Il est flexible et répondait tout à fait à mes besoins qui étaient ni
0
C:
:::J plus ni moins de publier des articles pour tenir informer mes proches et
0
s:t les graines de voyageurs de mes péripéties. Je voulais également pouvoir
,-i
0
N
le customiser complètement, ce qui est chose aisée avec WordPress ! Cet
@ outil m'a permis de mettre à jour très facilement mon blog tout au long du
....,
.c voyage!
Ol
·;::
>-
c.
0
u Johan Vinet aka Lordyoyo (graphiste et illustrateur indépendant)
Je m'appelle Johan Vinet aka Lordyoyo (www. lordyoyo.com, figure 1.17), je
suis graphiste et illustrateur depuis 1999. Je travaille comme freelance dans
un atelier lyonnais appelé La Bootx (www.labootx.com).
1.2 Exemples de sites Web avec WordPress et témoignages 15

Figure 1.1 7 - www.lordyoyo.com

Pourquoi a-t-il choisi WordPress ?


Mon blog, c'est ma vitrine, mon carnet de brouil lons, mon portfolio, ma
tribune. C'est aussi le lien entre moi, et la majorité de mes clients.

-0
0
C:
:::J
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0
u
Les ill\Si&nifiantes aventwes
~e Johan t Plllne
WWW lOROYOY CON

Figure 1. 18 - Blog sous WordPress


16 Chapitre t. Découvrir WordPress

Alors inexpérimenté, j'ai créé la première version de « lordyoyo.com »


avec un autre moteur de blog. Ma lgré toutes les qualités de ce dernier,
j'ai très rapidement été attiré par la «concurrence». Sa communauté
internationale, la multitude de plugins et de thèmes d isponibles; tous ces
ingrédients m'invitaient à passer sous WordPress (figure 1.18).
À l'aide de Nico, mon compère développeur, nous en avons profité pour
créer notre propre thème, ainsi qu'un plugin maison pour gérer la navigation
par« thumbnails » (vignettes) : c'était l'idéal pour un blog orienté BD comme
le mien. Depuis, je suis comblé! J'aime l'administration de WP, son interface
par widgets idéale pour gérer ma sidebar, la facilité d'édition du code
des pages ou de la CSS, sa gestion des images et ; enfin, sa prolifique
communauté contribuant à son incroyable évolutivité.

David Torondel (graphiste/illustrateur)

~m~~-..• ._,.,,.,-_~-•••~c1ct'\oi:irk-ia-~•-
--1n-.p,o"pi!f!lll.t1ua.m111a•-'--aru1•~-c1t1~CJ11•........,.•_...._.
- ~ , - ~ ~ n l '• a'•IOOll&•bilcWtlfl

mustration isométrique BTP


~ ,_ ,..c.n,j.1"__. .. 1$~..-

Dfdt11JOUlelfll!IVltdielmlleljllUJtn•-. ....flllr.c._...•c1GK1enltffflc.MWwi.-l
\'l!ld-9utntlo9.-Jt..._.,...4tdl!IIYOlld-..llllr.dfji~ld./,a8nal•---·........ ,,.... .tlna •
....,_••Mllldl,ur._,..,_• ..,..,~,,.r...,,-11...irt•,C•~

-0
0
C:
:::J
0
s:t
,-i
0
N
@
...., Figure 1.19 - www.torondel.net
.c
Ol
·;::
>-
c.
0
u Graphiste/I llustrateur depuis presque 20 ans (9 ans en salarié, 11 ans
en indépendant), j'interviens principalement dans la création de chartes gra-
phiques de sites Internet, d'animations et de jeux en Flash, et d'illustrations.
Mon site : http://www.torondel. net (figures 1.19 et 1.20).
Mon blog : http://blog.torondel.net.
1.2 Exemples de sites Web avec WordPress et témoignages 17

Pourquoi a-t-il choisi WordPress ?


En plus de mon blog personnel, je gère une dizaine de sites sous WordPress
pour mes clients.
Avec un outil comme Firebug, pour ana lyser la structure des pages et
les CSS de chaque élément, il est re lativement faci le (et formateur) de
personnaliser un thème.

Figure 1.20 - www.torondel.net

Pour un graphiste comme moi, qui n'a que très peu de connaissances
en intégration et en développement, cet outil permet de mettre en place un
site comp let, dynamique, personnalisable, administrab le, avec un moteur
-0
de recherche et optim isé pour le référencement. Il me permet également
0
C: de m'appuyer sur une communauté francophone très active .. . Et tout ça
:::J
0 gratuitement!
s:t
,-i
0 Je me tourne de plus en plus vers les thèmes « premium », qui restent en
N
@ général très abordables, et proposent souvent des fonctionna lités intéres-
...., santes, avec parfois les fichiers sources du thème, ce qui est très appréciable
.c
Ol
·;:: quand on souhaite le personnaliser.
>-
c.
0
u Un seu l bémol néanmoins : le succès de WordPress fa it qu'on assiste à
une uniformisation des templates. Les thèmes vraiment originaux sont rares;
et, si on cède à la facilité, je crains que tout cela nous conduise à une baisse
de créativité.
Pour qu'il reste un bon outil, nous devons utiliser WordPress à bon escient,
sans se brider, tout en faisant de lui un tremplin vers plus de créativité.
18 Chapitre t. Découvrir WordPress

Olivier Pautot (illustrateur/animateur indépendant)


Olivier réalise des illustrations ainsi que des animations 30 et 20 avec une
attirance toute particulière pour l'univers cartoon (superbement mignon !).

Figure 1.21 - www.pautot.net

-0
0
C:
:::J
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0
u

Figure 1.22 - www.pautot.net

li utilise WordPress pour présenter ses travaux d'illustrateur/animateur


indépendant. Disposant d'un blog sobre et efficace (wwww.pautot.net,
1.2 Exemples de sites Web avec WordPress et témoignages 19

figures l .21 et l .22), il aime la simp licité et la soup lesse d'util isation que
procure WordPress . Mettre à jour ses derniers travaux n'est pour lui qu'une
histoire de quelques clics .
Techn iquement, il uti lise notamment quelques p lugins comme Lightbox
pour l'agrandissement esthétique des images en JavaScript, Simpleviewer
pour sa galerie 2D/3D et Ali in one SEO pour le référencement.

Christophe Fodé (chef de Projet)


Pour mes cl ients, je consei lle la so lution WordPress. Modulaire et avec une
administration simple et efficace, il est aisé de répondre rapidement au
besoin du client, tout en lui laissant de l'autonomie pour la gestion du
contenu. De plus, le développement de widgets personna lisés permet une
liberté totale !

Maxime Urban (ingénieur in


Le site vitrine de la société où je travaille a été conçu avec WordPress. Grâce
à cet outil, les dirigeants peuvent facilement mettre en ligne leur contenu ou
encore effectuer des modifications sans avoir à contacter le webmaster du
site.

Geoffrey Vallin (chef de projet)


WordPress reste pour moi le CMS à la prise en main la plus aisée. Sa
simplicité permet à tout à chacun de créer son site Internet mais il sait, dans
les mains de personnes plus expérimentées, devenir un outil puissant pour la
création de sites ou d'outils plus spécifiques. Autant vous dire que la version
3 .0 a propulsé la plupart de mes projets web.

-0
0
C:
Nicolas Juen (développeur front-end et back-end)
:::J
0
s:t
Mon utilisation de WordPress n'est pas du tout celui d'un moteur de blog mois
,-i
0 d'un CMS. Dans l'agence dans laquelle je travaille, les sites que nous faisons
N
@
sont totalement faits sur mesure. Chaque fonctionnalité supplémentaire fait
...., l'objet d'un développement d'un plugin particulier.
.c
Ol
·;::
>-
c.
0
u
Copyright© 2014 Dunod.
Installer et apprivoiser
WordPress

2.1 KIT DE LANCEMENT

Prérequis
Pour pouvoir fonctionner, WordPress requ iert un serveur pouvant supporter
PHP 5.2.4 et MySQL 5 (ou leurs versions ultérieures).
Le serveur conseillé (et le plus robuste) pour WordPress est Apache
{gratu it). Néanmoins, si vous possédez déjà un autre type de serveur,
inutile de vous ruer sur Apache : WordPress devrait pouvoir fonctionner
-0
0
C: normalement. N'oubliez pas de vérifier ces éléments lors d'une souscription
:::J
0 à une offre d'hébergement !
s:t
,-i
0
N
@
...., Mise en place et utilisation d'un FTP
.c
Ol
·;::
>- Le protocole FTP (File Transfer Protocol) permet de transférer des fichiers de
c.
0 votre disque dur sur votre serveur.
u
Le logiciel FileZilla est le cl ient FTP gratuit que nous allons utiliser. Vous
pouvez le télécharger sur son site officiel : http://filezilla-project.org.
Après l'avoir instal lé et démarré, renseignez les champs de la barre
de connexion (figure 2.1) : Hôte (fourni par votre hébergeur, il prend
habituellement la forme ftp.nomdedomaine.com) puis Identifiant et Mot
22 Chapitre 2. Installer et apprivoiser WordPress

de passe {également fourn is par votre hébergeur) et enfin Port {à laisser


vide, le port par défaut est 21 ).

1 Hôte: ftp.monsite.com Identifiant : ubid.ile Mot de passe : ....... ul Port: - - , Comemn rai;de JE)

Figure 2.1 - Barre de connexion

Une fois cette étape terminée, cliquez sur« Connexion rapide». Vous êtes
désormais connecté à votre serveur distant!
Notons que FileZilla propose une interface qui, par un jeu de doubles
fenêtres, permet une visualisation simultanée de votre disque dur (Site local,
à gauche) et du serveur distant (Site distant, à droite) (figure 2.2).
Pour transférer un fichier, un simple glisser/déposer d'une fenêtre à l'autre
suffit. La progression du té léchargement (nombre de fichiers, de dossiers,
taille totale) s'affiche en bas de la fenêtre de droite.

Site local : 1\ . Site distant : I / .


13··• Bureau lth~ I
i·· llJ Documents
Éli Ordinateur
œ~ A:
~-t. Cc
œ,,J} Cl:

Nom de fichie, I Taille de fi ... Type de fichier Dernière modificat... Nom de fichier I Taille d, _:,
.'jA: Lecteur de dis... ..
&c, Disque local jj flash
'90: Lecteur CD js
logs
medias
-
php
style
_j voeux
-0 ~cv.pdf 253 ~
0 ~ index.html 2.
C:

0
:::J
~ "' -1
' ~ "' J '
6dossiers 3 fichiers et 7 dossiers. Taille totale: 256 387 octets
s:t
,-i
0
N
@
...., Figure 2.2 - Fenêtre principale de FileZilla
.c
Ol
·;::
>-
c.
0
u
Mise en place d'un serveur local avec WAMP
Avoir un serveur en ligne c'est bien, mais avoir un serveur local (c'est-à-dire
sur son propre ordinateur) c'est p lus pratique pour concevoir un site. Cela
permet d'éviter d'avoir à transférer des fichiers par FTP pour la moindre
modification.
2. t Kit de lancement 23

Nous a llons donc installer notre propre serveur web grâce au logiciel
WAMP (MAMP pour Macintosh) que vous trouverez sur son site officie l, ·e n
vous rendant à l'adresse suivante : www.wampserver.com .
Après l'avoir installé (bien définir le navigateur par défaut lorsque ce
sera demandé), lancez l'application WAMP. La petite icône dans la barre des
tâches doit être de couleur verte (dans le cas contraire, relancez l'application)
(figure 2.3).

Il
Personnaliser...

Figure 2.3 - Icône dans la barre des tâches

Lorsque vous cliquez sur cette icône, un menu déroulant donnant


accès à différentes fonctionnalités apparaît (figure 2.4). Parmi celles-ci,
Localhost permet l'ouverture de votre navigateur Internet avec l'adresse
de votre serveur local, phpMyAdmin vous donne la possibi lité de gé rrer
la base de données MySQL et www directory vous permet d'accéder
rapidement au fichier« www » : là où seront rangés tous vos projets de site
Internet!
-0
0 Votre serveur local est désormais fonctionnel. Il est prêt à accueil lir
C:
:::J
0 WordPress.
s:t
,-i
0
N
@
....,
.c
Ol
Choix d'un navigateur Internet
·;::
>-
c.
0 Il ne vous reste p lus qu'à choisir un navigateur Internet. Firefox, Google
u
Chrome, Opera ou Internet Explorer ... tous présentent des performances
relativement sim ila ires, même s'ils se distinguent par des interfaces et des
fonctionnalités différentes. Vous pouvez les télécharger aisément directement
sur le Web.
24 Chapitre 2. Installer et apprivoiser WordPress

• + +' • . +

~ localhost
~ ~ phpMyAdmin
le:)
www directory
lê Apache
C) PHP
C MySQL

Start Ali Servie~


Stop Ali Services
Restart Ali Services

Personnaliser...

Figure 2.4 - Menu déroulant de WAMP

Choix d'un éditeur de texte


Pour un travail simple et efficace : rien ne vaut un éditeur de texte digne de
ce nom. Bien entendu, certains sont gratuits (comme Smultron, NotePad + +
ou encore Sublime Text) et d'autres payants (comme Alphatk ou TextPad).
Nous vous conseillons d'utiliser NotePad+ + ou Sublime Text. Rapides et
peu encombrants, ils offrent tous deux une interface agréable permettant
par exemple d'éditer plusieurs fichiers dans la même fenêtre . La coloration
syntaxique (HTML, CSS, JS, PHP, etc.) s'avère par ailleurs très utile. Vous les
trouverez en vous rendant aux adresses suivantes: http://notepad-plus-plus.
org/ ou http://www.sublimetext.com/
-a
0
C
Remarque - N 'utilisez pas des logiciels de traitement de texte comme Wa rd
:J
0 ou Open Office, qui ne sont pas du tout adaptés à ce genre de tâche.
'tj"
,-i
0
N
@

t
·;::
2.2 INSTALLATION DE WORDPRESS
>-
a.
8 Obtention de la dernière version de WordPress
Pour installer la dernière version de WordPress, rendez-vous sur http://fr.
wordpress.org/ pour la version frança ise ou sur http://wordpress.org/
download/ pour la version angla ise, puis cl iquez sur le lien de téléchar-
gement (figure 2.5).
2.2 Installation de WordPress 25

WORDPRESS.<mc; FrancP
Acc11P1I A propo., R1Pr1Vf'lllJP fonlrHI ln<,f,1ll.--lt1on TPIPc h..-ir.1::P111Pr1t VPr<,1011<,

Téléchargement 1êlecharger
WordPress 3.8.1
La dernière version francisée de wordPress sera toujours accessible depuis cette page. Il vous suffit
z.1p - 6S M0
de cliquer s ur le bouton se trouvant ici à droite pour la télécharger.
Télécharger au for,..t .tar.gz - 6.0
S 'd vous venait 1 'envie ou le besoin de télécharger 1 'une des versions précédentes de WordPress en Mo
français, elles restent disponibles et accessibles ici· même.

La version francisée est in tégralement réalisée par 1 'équipe de 1 'association WordPress• Autres options de
Frnncophone. Outre un blog proposant les dernières nouvelles importantes du monde de WordPress1 téléchargement
son site donne accès à un forum d'entraide en français, où vous pourrez poser des questions et
apprendre a résoudre vos problèmes grâce aux membres do la communauté WordPrcss. • Autres formats de fichiers
Versions précédentes
Notez que WordPress-Francophone n 'assure pas le support du service commercial WordPress.com ... • Versions 8é:ta et Candidates

Figure 2.5 - Bouton de téléchargement

Mise en place des fichiers


Une fois l'archive té léchargée et décompactée, un dossier « WordPress »
contenant de nombreux fichiers apparaît. li va a lors s'agir de les ranger à
l'endroit approprié ...
• Sur un serveur local (WAMP)
li suffit de cop ier les fich iers du dossier« WordPress » et de les co ller
dans le dossier racine« mon-site» (nom d'exemple) se trouvant dans
le dossier« www » de WAMP (figure 2.6) .

www
"
-0
mon-site
0
C:
:::J " r, wp-admin
0
s:t
,-i t> wp-cont ent
0
N !> wp-include.s
@
....,
.c
Ol
·;:: Figure 2.6 - Arborescence du serveur local <WAMP)
>-
c.
0
u
• Sur un serveur distant (FTP)
Il suffit de transférer les fichiers du dossier« WordPress » à la racine de
votre site. On utilise pour cela le logiciel FileZilla.
Après avoir renseigné les champs de la barre de connexion (voir
figure 2.1 ), un simple glisser/déposer des fichiers suffit.
26 Chapitre 2. Installer et apprivoiser WordPress

Création de la base de données


Avant de commencer l' insta llation de WordPress, il faut au préa lable créer
une base de données sur notre serveur local (ou simplement l'activer chez
l'hébergeur si vous travaillez en ligne).
Rendez-vous dans phpMyAdmin qui se trouve dans le menu déroulant de
WAMP. Votre navigateur affiche une page vous demandant un mot de passe
(figure 2.7). Tapez« root » dans le champ utilisateur et laissez vide le champ
mot de passe.

~ Connexion Q 1----------..
Utilisateur :
1root
Mot de passe:

r Exécute r ~

Figure 2. 7 - Accès sécurisé à phpMyAdmin

Vous avez maintenant accès à l'espace d'administration de phpMyAdmin.


Cl iquez sur l'onglet« Bases de données» à droite du logo (figure 2.8) puis
remplissez le champ« Créer une base de données» avec le nom de votre
choix (figure 2 . 9).

-0
0
C:
~ + ~ localhost/phpmyadmin/ ind~.php?token:8f0727c5d8333b53,
:::J
0 0 Désactiver· ,1. Cookies· / CSS· Q Formulaires· [Q Images· 0 Ir
s:t
,-i
0
php yAd in
N
@
1am :.~ Q:J ~
...., [ (Tables récentes) ... B]
.c Paramètres gén
Ol
·;::
>- information_schema • Modifier le mot de ~

D
c. mysql
0
u performance_schema § lnterclassement pou
test

Figure 2.8 - Onglet pour créer une base de données


2.2 Installation de WordPress 27

Bases de données

(d Créer une base de données


! mon-site J 1nterclassement
~~~~~~~~~~~
BJ ( crée0

Figure 2.9 - Formulaire pour créer une base de données

Installation en 5 minutes chrono


Rendez-vous à l'adresse de votre site en tapant son URL dans la barre
d'adresse du navigateur.
Exemple de notre serveur local : http://localhost/brindeweb/

Il ne semble pas y avoir de fichier wp -config .php. j'en ai besoin pour lancer le processus.

Besoin d'aide? En voici.

Vous pouvez créer un fichier wp-conf i g .php par le biais de cette interface. mais cela ne marche pour
toutes les configurations de serveur. La manière la plus sore reste de créer le fichier à la main.

Créer un fichier de configuration

Figure 2.1 0 - Création automatique du fichier manquant

1. Première étape : il manque le fichier « wp-config.php ». Pas de


-a panique, WordPress le génère pour vous (figure 2.10) ! Il suffit pour
0
C
:J cela de clique r su r le bouton « Créer le fich ier de configuration».
0
'tj"
,-i
2. Deuxième étape : WordPress nous informe que l'utilisateur devra
0
N être en mesure de fourni r des informations concernant la base de
@ données pour pouvoir procéder à l'installation (figure 2 . 11 ). Une fois
.....
.!:
Ol
que vous êtes bien certain de les posséder toutes, cliquez su r le bouton
·;::
>- «Allons-y! ».
a.
0
u 3. Troisième étape : remplissage des cha m ps concernant la base de
données (figure 2 . 12). Si vous travaillez en ligne, ces informations
sont fournies par votre hébergeur. Rendez-vous dans votre espace
client pour les obtenir. Les champs à remplir sont :
Le nom de la base de données. Il s'agit du nom donné lors
de la création de la base de données. Ici, « mon-site ».
28 Chapitre 2. Installer et apprivoiser WordPress

Bienvenue dans WordPress. Avant de nous lancer. nous avons besoin de certaines informations sur votre
base de données. Il va vous falloir réunir les informations suivantes pour continuer.

1. Nom de la base de données


2. Nom d'utilisateur MySQL
3. Mot de passe de l"utlllsateur
4, Adresse de la base de données
5. Préfixe de table (si vous souhaitez avoir plusieurs WordPress sur une même base de données)

Si. pour quelque raison que ce soit. la création automatique du fichier ne fonctionne pas. pas de
panique. Tout ce qu'elle fait. c'est de compléter le fichier de configuration avec les informations de
connexion à la base de données. Vous pouvez tout aussi bien ouvr ir le fichier wp- config- sample. php
dans un éditeur de texte, y saisir les informations en question. et enregistrer le fichier sous le nom
wp- config , php.

Vous devriez normalement avoir reçu ces informations de la part de votre hébergeur. Si vous ne les avez
pas. il vous faudra contacter votre hébergeur afin de continuer. Si vous êtes prêt..

C"est parti !

Figure 2.11 - Connaissez-vous ces éléments ?

Votre identifiant de base de données. Avec un serveur local,


c'est « root ».
Mot de passe. Sur un serveur local WAMP, le champ doit rester
vide.
Hôte de la base de données. C'est« localhost » ou une adresse
donnée par votre hébergeur.
Préfixe de table. Il s'agit ici de choisir un préfixe pour la table
-0
0
qui va être générée, ce qui est très pratique pour installer plusieurs
C:
:::J WordPress dans la même base de données.
0
s:t
,-i
0 4. Quatrième étape : validation des informations. WordPress nous
N
@
confirme qu'il communique bien avec la base de données. Il est
...., temps de lancer l'installation en cliquant sur« Lancer l'installation» !
.c
Ol
·;:: (Figure 2.13).
>-
c.
0
u 5. Cinquième étape: WordPress demande des informations sur l'ad-
ministrateur du site (figure 2.14). Pour des raisons de sécurité, il est
conseillé de changer le nom par défaut qui est « admin » par votre
pseudo ou un autre nom de votre choix. Pour le mot de passe, utilisez
des minuscules, des majuscules et des chiffres (plus c'est long et
compliqué, plus votre compte sera sécu risé).
2.2 Installation de WordPress 29

Vous devez saisi r ci-dessous les détails de connexion à votre base de données. Si vous ne les connaissez
pas. contactez votre hébergeur.

Nom de la base de mon-site Le nom de la base de données dans


données laquelle vous souhaitez Installer
WordPress.

Identifiant root Votre identifiant MySQL

Mot de passe ... et son mot de passe MySQL.

Adresse de la base localhost Si localhost ne fonctionne pas. votre


de données hébergeur doit pouvoir vous donner la
bonne Information.

Préfixe des tables w p_ Si vous souhaitez faire tourner plusieurs


installations de WordPress sur une même
base de données. modifiez ce réglage.

Envoyer

Figure 2.1 2 - Formulaire à remplir

Cest parfait! Vous avez passé la première partie de l'installat ion. WordPress peut désormais communiquer
avec votre base de données. Si vous êtes prêt(et il est maintenant temps de ...

-a
Lancer nnstallation l
0
C
:J
0
'tj"
,-i
0
N
@ Figure 2. 1 3 - WordPress communique avec la base de données
.....
.!:
Ol
·;::
>-
a.
0 6. Sixième étape : C'est terminé ! WordPress confi rme que l'installa-
u
tion s'est bien déroulée. Il est désormais prêt à l'emploi (figure 2. 15).

) À savoir - Par défaut, WordPress va installer du contenu fictif dans votre site.

J,
~ '
30 Chapitre 2 . Installer et apprivoiser WordPress

Bienvenue

Bienvenue dans le célèbre processus d'installation en 5 ninutes de wordPress I Vous pouvez parcourir le
fichier ReadMe à loisir. Autrement remplissez simplement les chamP5 cl-dessous, et 1/0US serez prêt à
installer la plate-forme de publication personnelle la plus puissante et la plus extensible au monde.

Informations nécessaires

Veuillez renseigner les informations suivantes. Ne vous inquiétez pas, vous pourrez les modifier plus tard.

Titre du site Mon Titre

Identifiant Simon
Les identiNnCJi doivent contenir uniquement des caractères alphanumériques. espaces, tiret bu.
tiret. po.m:s ec .. symbole O.

Mot de passe, deux


fois
Un mot de passe vous sen
automatiquement généré
si vous laissez ce champ Forte
vide.
Connil : ~ mot de p,uM devr1rt f•ire .u fflOlns 7 c•r•t'tt.f'fl dt lona, Pour .. rlt'ldre plus M.
utOlsez un mët.,ip d• r'Mjusa.J:IH. de ml.nusa.6H,. de chiffr.s et de symbolH CIOffltM ! "? S ~ " &. ).

Votre adresse de brindeweb@gmail.com


messagerie
Vérifier bien cette adresse de mHM.gerle WAnt de continuer.

Vie privée ~ Demander aux moteurs de recherche d'indexer ce site.

Installer WordPress

-a Figure 2. 14 - Informations à propos de vous et de votre site


0
C
:J
0
'tj"
,-i
0
Pour plus d'informations sur l'installation de WordPress vous pouvez vous
N
rendre à cette adresse :
@
..... http://codex.wordpress.org/lnstalling_WordPress .
.!:
Ol
·;::
>-
a.
0
u
Activer la réécriture d'URL en local avec WAMP
WordPress permet la réécriture d'URL. Les « permaliens » sont les URL
affichées qui serviront de référence à un article (cf. chapitre 5, section
« Options des permaliens »). Pour que cela fonctionne, le serveu r web doit
être paramétré d'une certaine façon.
2.2 Installation de WordPress 31

Quel succès !

WordPress est installé. Vous attendiez-vous à d'autres ét apes? Désolé de vous décevoir;-)

Ident ifiant Simon

M ot de passe Le mot de passe que vous avez choisi.

1....Se connecter . . JJ

Figure 2.15 - WordPress est installé !

C:, Version
C:, Se rvice
• Apache modules •
1::1 Alias directories
(B httpd.conf
0 Apache error log
Sta rt Ali Services
0 Apache access log
Stop Ali Services
Restart Al i Se rvices

-0
0
C:
:::J
0 Personnaliser...
s:t
,-i
0
N
@
....,
.c Figure 2.16 - Apache Modules
Ol
·;::
>-
c.
0
u
Concernant WAMP vo ici la m a rche à suivre:
1. Cliquez sur l'icône « WampServer » dans la barre des tâches, puis
sélectionnez « Apache > Apaches modules » (figu re 2.16).
2. Cliquez alors sur « rewrite_module ».
32 Chapitre 2. Installer et apprivoiser WordPress

3. Votre WordPress peut maintenant activer les permaliens sans pro-


blème!

Travailler avec une URL définitive en local (fichier hosts et


Virtual Host>

Remarque - Cette étape n'est pas obligatoire et doit être faite avant l'installa~
tion de WordPress.

En travaillant en local avec WAMP, vous aurez dans votre navigateur une
URL du type http://loca lhost/monpro jet/bidule.html
Cette URL n'est pas très élégante mais est entièrement fonctionnelle. Par
contre, il vous faudra la modifier dans la base de données de WordPress
avant de le migrer vers son hébergement définitif (voir section 10.3 « Démé-
nager WordPress »).
Si vous voulez travailler directement en local avec l'URL définitive sous la
forme www.mon projet.com/b idule.html et éviter ainsi l'étape de mise à jour,
c'est possible ! Pour ce faire, nous allons procéder en deux temps:
1. modifier le fichier« hosts » de Windows (ou de Mac ou de Linux) ;
2. ajouter un « V irtual Host » à notre serveur Apache (WAMP).

Modification du fichier« hosts »


Dans un premier temps, al lons chercher notre fichier« hosts » sur not re ordi-
nateur: son emplacement est: C: \ Windows\ system32\ drivers\ etc\ hosts.
-a
0
C Une fois ouvert grâce à un éditeur de texte comme NotePad+ +, nous
:J
0 allons pouvoir ajouter (et surtout pas remplacer) une ligne de code dans ce
'tj"
,-i fichier (tout à la fin, à la suite du document donc) :
0
N
@ 1 127 .0.0.1 www . br i ndeweb . com
.....
.!:
Ol
·;::
>-
a. 127 . 0 . 0 .1 correspond à notre IP locale.
0
u
Le fichier « hosts » est un genre de carnet d'adresse. C'est lui qui est
interrogé en premier avant une connexion à Internet. Dès que votre site sera
en ligne, pensez à supprimer la ligne que nous venons d'insérer.
Pour que les modifications soient prises en compte, pensez également à
vider le cache de votre navigateur et à redémarrer ce dernier.
2 .3 Prise en main de WordPress 33

Ajout d'un Virtual Host


Des « Virtuals Hosts » permettent de gérer plusieurs racines de sites web
(indépendants les uns des autres) avec un seul et unique serveur Apache.
L'ajout d'un« Virtual Host» requiert là aussi quelques manipulations :
• Modification du fichier« httpd.conf »
Son emplacement:
C: \ wamp\ bin \ apache\ Apache2.2. l l \ conf\ httpd.conf
Vérifiez que la ligne d'/nc/ude de « httpd-vhosts.conf » est bien décom-
mentée (suppression du caractère IF à la ligne 467) :

if Vi rt ua l hosts
Inclu de conf/extra/httpd-vhosts .conf <-- lign e 467

Remarque - En activant les « Virtuals Hosts », l'adresse 11 http://localhost/"


devient inaccessible.
• Modification du fichier« httpd-vhosts.conf »
Son emplacement:
C :\ wamp\ bin \ apache\ Apache2.2. l l \ conf\ extra \ httpd-vhosts.conf

Une fois que nous avons ouvert ce fichier dans NotePad + +, nous
pouvons ajouter ces lignes de code tout à la fin, à la suite du document
donc:

<Vi rtualHost *:80>


DocumentRoot "c: /wamp/www/brindeweb"
Se rver Name www . brin dewe b. com
<!V i rtua l Host>

Doc umen t Root correspond au chemin d'accès à la racine de votre projet et


ServerName correspond au nom qui sera utilisé pour accéder au site.
"'O
0
C
:i
Pour que les modifications soient prises en compte, pensez à redémarrer
0
<j"
le serveur (relancer WAMP) et votre navigateur.
r-l
0
N L:' adresse http://www.brindewe6 .com pointe désormais vers le dossier
© « brindeweb » crée précédemment. C'est comme si le site était déjà en ligne.

..c
Ol
ï::::
WordPress pourra donc se bâtir sur la même URL que l'URL finale du
>-
a. nom de domaine.
0
u

2.3 PRISE EN MAIN DE WORDPRESS


L'installation terminée, on peut enfin prendre en mains WordPress . Un petit
tour du propriétaire s'impose.
34 Chapitre 2. Installer et apprivoiser WordPress

WordPress est découpé en deux parties :


• une partie publique dite « front office » ;
• une partie privée réservée à l'administration dite « back office ».

Partie publique (front office)


Le front office est tout simplement la partie publique du site tel qui sera
visible sur le Web (figure 2.17). Pour y accéder, il suffit de taper le nom de
domaine de votre site.

BONJOUR TOUT LE MONDE!

~dAnsWordPress.Ced est volre: premlef arUde. Mcd-


ftez-te ou supp,1mez-~ puls lêtoœz·vous !

"'O
0
C
:i
0
<j" Figure 2 . 1 7 - Front office de WordPress
r-l
0
N

©

..c
Ol
ï:::: Espace d'administration (back office)
>-
a.
0
u
Le back office est la partie privée réservée à l'administration du site. Seuls
les utilisateurs enregistrés peuvent l'atteindre.
Pour y accéder : www.votre-nom-de-domaine.com/wp-admin/.
Une foi s la page atteinte, un formulaire de login/ mot de passe est à
remplir (figu re 2 . 18).
2 .3 Prise en main de WordPress 35

Identifiant

Simon
Mot de passe

1·····1
D Se souvenir de moi
iiiH:i:ii,iii

Mot de passe oublié ?

~ Retour sur Mon Titre

Figure 2. 18 - A ccès au back o ffice de W ordPress

Tableau de bord

e.envenue csans WordPress 1


V. I C I ~ ....,peu,.. olldo ld-.,,~

(UifN$WrtMIIQ
• f(J"
+

'V,,'

1,/1,,:
.... ,.,...,_.lfklt
. - . . . . 1,ptCIOS•

..,..uir
l ....
-·~
•<i*ff-...-,w--.,,
. ,_,.,.l...~ I H ~
,.,u.____"°"' .......

.--
-"1 ___ ,_...,_

•• J

"'O
0
C
:i
n --·-----·-.
__............
. . . . . . . . (A(> . . . . . - , . , _ . _ ....

"""_.._
_ _ _.... . _ .. ~ i i , . - . .

0
<j"
r-l
0
N

©

..c
Ol Figure 2.19 - Tableau de bord de WordPress
ï::::
>-
a.
0
u
Une fois le processus d'identification terminé, le Dashboard (Tableau
de bord) de WordPress s'ouvre (figure 2 . 19). Il permet de visualiser d'un
simple coup d' œil le contenu de votre site (nombre de pages, d' articles,
de comm entaires .. . ) et de prendre conna issan ce d es « new s» relatives au
log iciel lui-mêm e (a lertes de sécurité, d ernière version disponibl e ... ).
36 Chapitre 2. Installer et apprivoiser WordPress

La barre latérale (figure 2 .20) est l'autre composante essentielle du back


office. Elle permet d'accéder à tous les menus de WordPress : Apparence,
Outils, Réglages, etc.

Mon Ti t re

@ Tableau de bord

Accueil

Art icles

Med1as

Pages

- Commentaires

Apparence

Extensions

Utilisateurs

Out ils

Réglages

Figure 2.20 - Barre latérale du tableau de bord

Chaque écran (accueil, articles, pages, commentaires ... ) est paramétrable


en cliquant sur l'onglet « Options de l'écran » en haut à droite de l'écran. Il
est ainsi possible de cocher/ décocher les éléments de chacun des écrans
(figure 2 .21 ).

"'O Afficher à l'écran


0
C
~ D'un coup d'œil ~ Activité ~ Brouillon rapide ~ Nouvelles de WordPress ~ Bienvenue
:i
0
Opbons de técran ""
<j"
r-l Tableau de bord
0
N

©

..c Figure 2.21 - Les options d'écran permettent de personnaliser l'affichage
Ol
ï::::
>-
a.
0
u R emarque - Il existe 8 thèmes de couleurs pour l'interface d'administration.
Rendez~vous dans Utilisateurs> Votre profil (figure 2.22 ).
2.3 Prise en main de WordPress 37

Alde.
Profil
Options personnelles

Éditeur visuel D Désactiver téd1teur visuel pour écrire

Couleurs de l'interface @ Pardéfaut 0 Lumineux 0 Bleu 0 Café


d'administration

0 Ectoplasme 0 Minuit 0 Océan 0 Lever du soleil

Raccourcis clavier D Activer tes raccourcis clavfer pour la modération de commentaires. Plus d'informaboos <en>

Figure 2.22 - Couleurs de l'interface d'administration

"'O
0
C
:J
0
s:t
,-t
0
N
@

..c
CJl
·c
>
a.
0
u
Copyright© 2014 Dunod.
...
DEUXIEME PARTIE

WordPress
côté webmastering

"'O
0
C
:J
0
s:t
,-t
0
N
@

..c
CJl
·c
>
a.
0
u
Copyright© 2014 Dunod.
Gestion fondamentale

3.1 GESTION DU CONTENU

Tableau de bord

Bienvenue dans wordPress 1 o,-


l.tokJ q ~ lorn1, pDI-' VOUI Mdr, j dffl\Mf8'

ti.,pa,UN".-nc:,n
~ fo wr.<• P,,9'111' «Wit

+ Ap- -l'ltNlf ... P'CIIJIO'• • A(f'Woof .... ~""'1115(~'"1

, . "6d\Nbnarlf,:,rn P(IUI' ll:iell ,..,,_,,r

O\lnmupdd
r
'
''
''
'
"'O

0
0
C
:i

,M......,,,,.,,..Nl._...,... ____ I_
_.,_
Wfiil'FSIM ''
L--------------•••••••••••~
''

<j"
r-l
0
N
n . . , . , , ~ 1 9 " l o f l ~ . . . , .....-
--~~-~.....,...,~'C1·
(l!'t.~,,..,,-,.ei:.,lf,
....

©

..c
Ol
ï::::
>-
a.
0
u Tableau de bord de WordPress

Les articles
Un article (dit « bill et » ou « post ») est la partie vivante de votre site. Sans
article, un blog est vide. On considère les articles comme la partie dyna-
mique, changeante, du site (comme une rubrique« actualités» par exemple).
42 Chapitre 3. Gestion fondamentale

Par défaut un article est daté, pourvu de commentaires et appartient à un


auteur.

Remarque importante - Un article est obligatoirement catégorisé. Dans une


ou plusieurs catégorie (s).

Pour y accéder, il suffit de cliquer sur le bouton «Article » qui se


trouve dans la barre latérale gauche. Un menu déroulant explicite fait son
apparition et une liste avec tous vos articles apparaît ! Fort heureusement,
des filtres sont là pour vous aider. On peut trier les articles par catégories,
date de création, article publié, brouillon, etc.
Dans les options d'écran : plusieurs choix s'offrent à nous. On peut choisir
quels éléments doivent être affichés dans la liste ou non . À savoir : l'auteur,
les tags, les catégories, le nombre de commentaires et la date. Le nombre
des rubriques affichées est également modifiable à cet endroit.
Il est possible de cocher plusieurs articles pour leur appliquer une même
action. Lors du survol d'un titre d'article, un menu secondaire apparaît : vous
pouvez alors éditer, supprimer ou vo ir l' article. Pour accéder à un article: il
suffit simplement de cliquer sur son titre.

Les catégories
Une catégorie regroupe un ou plusieurs articles (pas de page) . Elles
permettent de trier les articles suivant des thèmes spéciaux.

Remarque importante - Il y a au minimum un e rubrique : impossible de


supprimer la dernière rubrique (qui sera automatiquement la rubrique par
défaut). Supprimer une catégorie n e supprime pas les art icles qu'elle con tien t.
Les articles affectés uniquement à la catégorie supprimée seront affectés à celle
"'O
0
C
par défaut.
:i
0
<j"
r-l
Pour y accéder, il suffit de cliquer sur le lien « Catégories » qui se
0
N trouve dans le sous-m enu déroulant de la rubrique « Articl e» . On y trouve
© deux parties. Une partie où l'on peut créer une nouvelle catégorie et une

..c autre contenant un tableau qui regroupe toutes les catégories (parentes et
Ol
ï:::: descendantes) du site.
>-
a.
0
u Les options d 'écrans permettent d e choisir l'affichage d es description s,
du nombre d'articles, des identifiants dans la liste ainsi que le nombre des
rubriques affichées.
Pour créer une catégorie, il suffit de remplir les champs se trouvant sur
la gauche. Tout d'abord lui donner un nom, définir {ou non) une éventuelle
catégorie mère. La descripti on est facultative : une g rande partie des thèmes
3. 1 Gestion du contenu 43

ne l'affiche pas. L'identifiant est généré automatiquement si vous laissez le


champ vide. Bien entendu, n'oubliez pas de cliquer sur le bouton« Ajouter
une catégorie» !

Les pages
Dans la forme, une page ressemble beaucoup à un article : titre, auteur,
commentaire ... Mais seulement dans la forme ! WordPress considère en
effet les pages comme un contenu à part, hors du flux des articles, et qui
n'évoluera pas énormément dans le temps : c'est un contenu permanent (il
peut s'agir par exemple d'une page de contact ou de présentation d'une
entreprise).

R emarque importante - Les pages sont indépendantes des articles et des


catégories. Elles ne peuvent donc pas être catégorisées. Par contre, elles peuvent
créer une arborescence : page mère, enfant...

Pour y accéder, il suffit d'un simple clic sur le bouton« Pages» de la barre
latérale. Les mêmes filtres apparaissent pour trier toutes vos pages.
Les options d'écran sont pratiquement les mêmes que celle des articles,
avec toutefois moins de choix. On peut donc choisir l'auteur, le nombre de
commentaires et la date. Le nombre d'éléments affichés dans la liste est
également modifiable.
Pour créer une page, il suffit de cliquer sur le bouton «Ajouter».

R emarque importante - Pour résumer:


Article= Informations volatiles dans le temps (Actualités ... )
Page = Informations persistantes dans le temps ( « À propos » , « contact », etc.)
"'O
0

0
C
:i Page statique vs page dynamique
<j"
r-l Comme vous le savez peut-être, WordPress est composé d'articles et de
0
N pages dites statiques. Or dans un environnement technique, «statique»
© signifie que le code HTML est en «dur» : il n'y a pas de gestion dynamique

..c
Ol du contenu (comme avec PHP et une base de données par exemple).
ï::::
>-
a.
0 Une page WordPress est bien entendu dynamique puisqu'on peut changer
u
son contenu. Alors pourquoi désigne-t-on ces pages comme «statiques» ? Il
faut chercher dans le passé. En effet, à l'origine, WordPress était uniquement
destiné à la création d'un blog ; et afficher des articles était donc son
principal usage. Les pages statiques étaient donc destinées à l'affichage
d'informations durables dans le temps, comme par exemple la présentation
de l'auteur.
44 Chapitre 3. Gestion fondamentale

Dans WordPress, «statique» signifie plutôt que le contenu de cette page


ne va pas changer tous les jours (contrairement aux articles).

Les types de contenus personnalisés


Ces contenus appelés« Custom post types» en anglais permettent de publier
du contenu spécifique (livres, films, etc.). Pour faire simple ce sont des
« articles personnalisés» qui ne font pas partie du flux d'articles standard de
WordPress.
Cette fonctionnalité n'est pas activée par défaut dans un thème. Ne soyez
donc pas surpris si vous ne voyez pas ce type d'élément dans la barre
latérale d'administration .
Pour y accéder, il suffit de cliquer sur l'intitulé du type de contenu qui se
trouve en dessous du signet« Commentaires» (figure 3.1 ).

Ill Pages

'9 Diapositives

r Services

~. Témoignages

SI Portfolio

• Commentaires

Figure 3. 1 - Exemples de contenus personnalisés : livres et films

"'O
0

0
C
:J 3.2 PUBLICATION D'UN ARTICLE OU D'UNE PAGE
s:t
,-t
0
N
Présentation de l'interface
@

..c Pour publier un article ou une page, l'interface de publication est sensi-
CJl
·c blement la même. L'article ayant des caractéristiques que la page n'a pas,
>
a.
0
l'inverse étant également vrai.
u
Commençons donc par les éléments communs : le champ titre, le contenu
principal, les champs personnalisés (nous en parlons dans la partie Template
avancé) et le panneau de publication.
Voici la marche à suivre :
1. Donn er un titre,
3.2 Publication d'un anicle ou d'une page 45

2. Remplir le contenu principal,


3. Publier l'article.
Pour publier l'article, plusieurs choix s'offrent à nous : soit le publier tout
de suite, à une date et à une heure données, soit le sauvegarder à l'état de
brouillon pour y revenir plus tard . C'est également grâce au panneau de
publication que nous pourrons voir un aperçu de notre travail.

Les parties communes aux pages et aux articles


Gérer sa publication
On peut déterminer si un article (ou une page) sera public (visible par tous),
privé (visible par les membres uniquement) ou protégé par un mot de passe.
Il est possible de prévoir ou de modifier la date de publication d'un article
ou d'une page (Figure 3.2).

Publier

Prévisualiser les modifications

T État : Publié Modifier

<i> Visibilit é : Public Modifier

~ Publié le : 28 janvier 2014 à 1O h 45


min
28 101 -jan E) 2014 à 10 h 45 min

OK Annuler

"'O
0
C
:i Déplacer dans la Corbeille
0
<j"
r-l
Mettre à jour
0
N

©

..c
Ol
ï:::: Figure 3.2 - Modification de la visibilité et de la date de publication
>-
a.
0
u
L'imag e à la une
Il est possible d'ajouter une « Image à la une» (figure 3.3) pour associer une
miniature (ou plutôt une image dédiée) à un article . Cette fonction peut être
disponible pour les articles et les pages, mais égalem ent pour les Custom
Post Type (articles personnalisés).
46 Chapitre 3. Gestion fondamentale

Image à la Une

Utiliser comme image à la Une

Figure 3.3 - Les différents formats d'article possibles

Identifiant
Par défaut, c'est le titre qui est sous forme normalisée (sans espace, sans
caractères spéciaux... ). C'est lui qui sera utilisé lorsque vous aurez activé les
permaliens. Ainsi vous aurez une URL propre.

Identifiant

1 bonjour-tout-le-m, 1

Figure 3.4 - L'identifiant est présent dans l'URL si les permaliens sont activés

Commentaires et Auteur
Comme leurs noms l'indiquent, il est possible de gérer les commentaires et
de modifier l'auteur d'une page ou d'un article.

"'O Les champs personnalisés


0
C

0
:i Les champs personnalisés peuvent être utilisés afin d'ajouter des données
<j"
r-l
supplémentaires à vos articles et à vos pages (figure 3.5). Attention, ils ont
0
N un lien direct avec le template. On en parle au chapitre 7.
©

..c
Ol
ï::::
>-
La partie propre aux articles
a.
0
u Les catégories
On peut directement choisir à quelle(s) catégorie(s) l'article va appartenir
(figure 3.6) . On peut ajouter des tags (mots-clés) à nos articles. Il ne faut
pas les négliger car ils peuvent être très utiles pour le moteur de recherche
ou votre thème (pour afficher des articles similaires par exemple).
3.2 Publication d'un anicle ou d'une page 47

Champs p er sonnalisés

Ajo uter un nouveau champ personnalisé :

Nom Valeur

Ajouter un champ personnalisé

Les champs personnalisés peuvent être utilisés afin d'ajouter des données supplémentaires à vos articles. Vous
pouvez les utiliser dans votre thème {enl.

Figure 3.5 - Champs personnalisés

Catégories

Toutes Les plus utilisées

~ Non classé

+ Ajouter une nouvelle catégorie

Figure 3.6 - Le panneau Catégories des articles

Les formats d' articles


"'O
0
C
:i
Les formats d'articles (figure 3 . 7) de WordPress permettent de formater un
0
<j"
contenu selon qu'il s'agisse d'une image, d'une brève, d'un lien ou même
r-l
0 d'une vidéo à la manière du service Tumblr.
N

©

..c
R emarque - S uivant le template activé, il est possible que les formats
Ol
ï:::: d 'articles n e so ient pas pris en compte.
>-
a.
0
u

L'extrait
Les « extraits » sont des résumés facultatifs de vos articles, écrits à la main
(figure 3.8) . Il se peut que votre thème activé s'en serve (à affich er grâce aux
o ptions d'écran) .
48 Chapitre 3 . Gestion fondamentale

Format

@ ; Par défaut

0 En passant

0 Image

0 Vidéo

0 Son

0 Citation

0 Lien

0 Galerie

Figure 3.7 - Les différents formats d'article possibles

Extrait

Les extraits sont des résumés facultatifs de vos articles, écrits à la main. li se peut que votre thème s'en serve. En
savoir plus (enJ.

Figure 3.8 - L'écran Extrait

"'O Les mots-clés


0
C

0
:i Les mots clés ou « Tag » {figure 3. 9) sont des étiquettes permettant de retrou-
<j"
r-l
ver facilement un article notamment en utilisant le moteur de recherche .
0
N

© Les révisions

..c
Ol
ï:::: WordPress garde une version de chaque sauvegarde de votre article
>-
a. {figure 3.10). Il est ainsi possible de revenir aisément à une version anté-
0
u rieure.

La partie propre aux pages


Le panneau Attributs {figure 3.11) est important car il permet d'appliquer un
thème, plus précisément un modèle de page, différent à chaque page.
3.2 Publication d'un anicle ou d 'une page 49

Mots-clés

Ajouter

Séparez les mots-clés par des virgules

Choisir parmi les mots-clés les plus


util isés

Figure 3.9 - Les mots-clés

Révisions

Simon. il y a 1 minute {28 janvier 2014 à 14 h 40 ml

Simon, il y a 1 minute {28 janvier 2014 à 14 h 39 ml

Simon. il y a 7 minutes 128 janvier 2014 à 14 h 33 ml [Sauvegarde automatique]

Figure 3.10 - Les révisions

On peut par exemple créer une page d'accueil qui a un modèle de page
(nous en parlons dans la troisième partie de cet ouvrage) spécifique par
rapport aux autres pages du site.
C'est à cet endroit que l'on peut gérer l'ordre des pages (par défaut,
l'ordre est alphabétique).

"'O
0
C

0
:i
Mise en forme du contenu
<j"
r-l
0
N Une barre d'outils ressemblant à celle des logiciels de traitement de texte
© est présente pour nous aider à embellir nos articles ou nos pages. Mais

..c attention, cette ressemblance n'est qu' esthétique (pour ne pas déstabiliser
Ol
ï:::: les standards) ...
>-
a.
0
u Un CMS permet de mettre du contenu en ligne. Tout le côté esthétique
est géré par les feuilles de style CSS. Rappelez-vous : séparation de la forme
et du contenu !
Exemple : Si vous choisissez le format « Titre 1 » dans la barre d'outils,
votre texte va bien entendu voir sa taill e augm enter, ce qui prouve unique -
ment que le formatage a bien été pris en compte (fig ure 3 .12). En revan che,
50 Chapitre 3 . Gestion fondamentale

Attributs de la page

Modèle

Modèle par défaut G


Ordre

Besoin d'aide? Utiliser l'onglet Aide


présent dans le coin supérieur droit de
votre écran.

Figure 3. 11 - Le panneau Attributs propre aux pages

dans la partie publique, le résultat est totalement différent, car les feuilles de
style font leur travail (figure 3.13).
En choisissant le format « Titre 1 », WordPress a généré le code HTML
adéquat (< hl > ). Ainsi, cette balise va être stylée comme les CSS l'indiquent
et non comme l'éditeur l'indique. Cette notion fondamentale bien comprise,
nous pouvons passer à la suite.
Cliquer sur le signet« Texte» vous permettra de comprendre et de voir le
code HTML généré par WordPress. Si vous avez des aptitudes à comprendre
ce langage, un petit coup d' œil s'impose : la confiance n'exclut pas le
contrôle.
Dans la barre d'outils, tous les standards de mise en forme sont présents :
"'O
alignement, tabulation, couleur, listes, citations, correcteur d'orthographe,
0
C historique des actions, soulignement ...
:i
0
<j" Pour notre part, nous allons nous intéresser plus particulièrement aux
r-l
0 outils propres au Web : créer un lien hypertexte, insérer un lien « Lire la suite »
N

© et gérer un copier/coller depuis Word (ou autres logiciels de traitement de



..c texte) .
Ol
ï::::
>- • Pour créer un lien hypertexte, il suffit de sélectionner l'élément et de
a.
0
u cliquer sur l'icône en forme de maillon de chaîne (figure 3.14).
Une fenêtre modale présentant différentes options apparaît alors
(figure 3.15). Après avoir indiqué l'adresse du lien (externe ou en
choisissant directement une page interne), vous pouvez choisir la
manière de l'ouvrir: dans la même fenêtre ou dans une nouvelle
fenêtre. Il suffit ensuite de cliquer sur Insérer pour rendre le lien actif.
3.2 Publication d'un anicle ou d'une page 51

Modifier l'article Ajouter

1 Article mis à jour.!Afficher l'article!

Bonjour tout le monde !


Permalien : http://localhosUmon-siteJ?p•1 Modifier les p~liens Afficher rartlde

~ Ajouter un média Visuel Texte

BI - E l= "§:~:§ -x ~
ntre1 l.!§A • ftkVJ()Q ~~ G

Titre 1

Chemin · h1

Figure 3.1 2 - Résultat dans la partie back-office

"'O
0
C
:i
0
Accur1l À prOJ>OS M,, f>!\J~
<j"
r-l
0 Ma page
N

©

..c
Ol
ï::::
Titre 1
>-
a.
0
u

Figure 3.1 3 - Résultat dans la partie front office : présence de soulignement, police
différente et taille différente
52 Chapitre 3 . Gestion fondamentale

~ Ajouter un média Visuel Texte

B I ME == i= '' = -
Paragraphe • ~ 1. • ÊI kîj () Insérer/ modifier un lien (Alt+ Shift + A)

MN@

Figure 3.14 - Créer un lien hypertexte

Saisissez l'adresse de destination


Adresse web [ im!!I
~~~~~~~~~~~~~~~~~

Titre

D OlMir le lien dans une nouvelle fenêtre/un nouvel onglet

Ou alors, faites un lien vers l'un des contenus de votre site

Ajouter un lien

Figure 3. 15 - Insérer un lien hypertexte

"'O
0 • Pour créer un lien « Lire la suite», placez le curseur à l'endroit où vous
C

0
:i souhaitez insérer ce lien (figure 3 .16) . WordPress insérera alors une
<j"
r-l
balise« More». Cette option peut s'avérer très utile : si l'un de vos
0
N articles est très long et qu'il est affiché sur la page d'accueil, il est alors
© possible de le segmenter pour que seule l'une de ses parties s'affiche.

..c • Pour gérer un copier/ coller depuis Word, rien de plus simple : un
Ol
ï::::
>- bouton spécial vous permet de contourner l'aventure périlleuse du
a.
0
u copier/ coller depuis des logiciels de traitement de texte (les styles pré
formatés qui leur sont propres risquent en effet de créer de nombreux
problèmes d'affichage) . Dans la fenêtre modale qui apparaît, il suffit
simplement de copier votre texte Word puis de cliquer sur Coller du
texte Word (figure 3 .17). Votre texte est désormais nettoyé de ses styl es
et exploitable.
3.2 Publication d'un anicle ou d'une page 53

~ Ajouter un média Visuel Texte


@Vi
BI-:= i= "= :_
Paragraphe ... U , ... ÊI ffi () Q Insérer la balise « M ore ,. (Alt + Shift + T)

~ ~cursus ~ et ~ ~ ~ non. ,..


min
Suspendisse ~ ~ ~eu ~ . ~~ru!ê.ro
Œ!ru!n.~~~_m.~~.~ ~ ~ Dép la
~.~~m@.~~. .Çm§ non Jm!fil~
~~~filœ!!lf.~~~
~ vitae ~ . ~ ~ ~ ~ ~ w l m
molestie, convallis ~.9Q!Q. Aliguam ~ negu~ fil!~
~~.
@
More...
0
Praesent lacerat dui a tellus ullamcor er lobortis. Fusce vest ibulum 0

Figure 3. 16 - Insertion du lien « Lire la suite »

q, Ajouter un média
B I ME: ·-
·-•-
...
,_
·- .a-. . 6- -
2-

'' - >~ E3
§ .
Paragraphe !J - ri () n ~~ ~
1 Coll er du t exte Word 1

Figure 3.17 - Coller depuis Word


"'O
0
C
:i
0
<j"
Insertion de médias
r-l
0
N
Après la mise en forme du contenu il est temps désormais de l'enrichir
©
.µ d'images, de vidéos et de documents ... Pour ce faire, déplacez-vous au -
..c
Ol
ï:::: dessus de la barre d'outils. Vous y trouverez un bouton « Ajouter un Média »
>-
a. (figure 3 . 18) .
0
u
Une fenêtre m odale avec 2 option s apparaît alors :
• Envoyer des fichiers : permet d'uploader un média qui se trouve
sur votre disque dur. Il suffit pour cela d'aller le chercher en cliquant
sur le bouton « Sélectio nner des fichiers» o u de faire un Glisser /
déposer de votre disque dur vers cette fe nêtre. Selo n votre hébergeur,
54 Chapitre 3. Gestion fondamentale

C!J Ajout er un média


B I
Paragraphe
- ·- ·- "
T
~
,_
J-

- A
-
T
6
- -
œ () n
-- X
~J
EEl
§ .


Voici un exemple de page. Elle est différente d'un article de blog, en

Figure 3.18 - Barre d'insertion des médias

la taille est limitée : il faudra passer par le FTP pour des fichiers plus
lourds.
• Bibliothèque de médias : permet de récupérer un média déjà
présent dans la bibliothèque des médias.

)(
Insérer un média Insérer un média
Créer une galerie Envoyer des fichiers Bibliothèque de médias
Mettre une image à la
Une

Insérer à partir d'une


adresse web

Déposez vos fichiers n'importe où pour les mettre en ligne

Sélectionner des fichiers

Taille maximale d'un f,chJer mis en ligne: 2MB.

"'O

0
0
C
:i

<j"
r-l
Figure 3. 19 - Fenêtre modale des médias
-
0
N

©

..c
Ol
ï::::
>-
a. Remarque: le monde du Web a ses propres règles, notamment concernant
0
u la gestion des accents et des caractères spéciaux. Les fichiers que vous allez
télécharger (uploader) dans WordPress doivent respecter cette règle. Dans le
cas contraire, il y a un risque de dysfon ctionnement (fichiers inaccessibles). Il
faut donc bien veiller à ce q ue les fichiers q ue vous allez télécharger soient
correctement nommés (pas d 'espace, pas de majuscule, pas de caractères
spéciaux ... ).
3 .2 Publication d'un anicle ou d'une page 55

Imoges
Si vous avez choisi de télécharger une image dans WordPress une dernière
étape est nécessaire avant de pouvoir l'insérer dans l'article.
Il s'agit de définir les paramètres de l'image : son titre, son texte alternatif,
sa description, son lien hypertexte, son alignement et sa taille (figure. 3 .20) .
Vous avez également la possibilité de l' éditer, de la retoucher, de la
recadrer ou de la redimensionner (figure 3.21 ). C'est tout de même bien
pratique, même si rien ne vaut la préparation (en local et avec les logiciels
appropriés) de vos images, avant la mise en ligne.

)(
Insérer un média
Envoyer des fichiers Bibliothèque de médias

Tous les élémenG Recherche

1.jpg
28 ja nvier 2014
11QQX9Q1
Modifier rimage
Supprimer déflniavement

Titre 1

Légende

Texte altemaof

Descripoon

"'O
0 RÉGLAGES DE L'AFFICHAGE DU FICHIER
C ATIACHÉ
:i
0
<j"
AHgnement Aucun E]
r-l
li6 à ~IR-,ch-i
e-r
m-éd- ia - -~EJ=I
0
N
http://localhost/mon·site/
©

..c Taille Moye nn e - 300 x 245 EJ .,.
Ol
ï::::
>-
a.
1 sélection(s)
Insérer dans la page
0 Effacer
u

Figure 3.20 - Paramètres de l'image

Une fois cette étape termin ée, vous po uvez cliquer sur le bouton Insérer
d a ns l'a rticle. L'im age est d ésormais visua lisabl e di rectement à l'intérieur.
56 Chapitre 3 . Gestion fondamentale

Redimensionnement de l'image

Recadrage de l'image (aide)

Proportion de taille :

Sélection:

Réglages de la miniature (aide)

Miniature actuelle

Appliquer les modifications à :


@ Toutes les tailles
Annuler 0 Miniature
0 Toutes les tailles sauf la
miniature

Figure 3.21 - Possibilité de reto uches

Bien entendu elle reste modifiable. Au survol de la souris sur l'image, deux
icônes apparaissent : une permettant de supprimer l'image de l'article
(et non de la bibliothèque) et une autre renvoyant à la fenêtre modale
précédente (figure 3.22).

"'O
0
C
:i
0
<j"
r-l
0
N

©

..c , /SIMON
Ol
ï:::: KERN
>-
a.
0
u
I
Figure 3.22 - Les accès rapides Suppression ou M odification de l'image
3.3 Gestion des médias 57

Vidéos
Pour l'insertion de vidéos, vous pouvez très bien passer par la solution
précédente. Mais dans ce cas, un simple lien sera inséré vers cette vidéo
(comme si l'on uploadait un document PDF). Par ailleurs, sachez qu'un
hébergement standard n'est pas du tout adapté aux vidéos, contrairement
à un serveur streaming comme Youtube, Dailymotion ou encore vimeo ... :
le visiteur devra attendre le téléchargement complet de la vidéo avant de
pouvoir la regarder et votre bande passante en prendra un sacré coup.
Il est plus intéressant d'insérer une vidéo de Youtube, Dailymotion ou
Vimeo directement sur votre site. Il vous faudra pour cela mettre les mains
dans le code HTML (rien de compliqué, rassurez-vous) .
Mais dans un premier temps, rendez-vous sur le site où se trouve la
vidéo convoitée (par exemple vimeo.com). Il y a généralement un bouton
« Embed » ou « Partager» près de la vidéo . Il suffit de cliquer dessus pour
pouvoir accéder au code HTML et le copier (figure 3.23).
Vous pourrez ensuite le coller dans l'article grâce à l'éditeur HTML de
WordPress (figure 3 .24) .
Un simple clic sur le bouton « Publier l'article (ou la page)» et la vidéo se
trouve maintenant sur votre site !

..
3.3 GESTION DES MEDIAS

Bibliothèque des médias


C'est le réservoir de votre site. Il contient tous les médias uploadés sur le site.

"'O
0
C
Remarque importan te - Durant la rédaction d'un article, ch aque élément
:i
0 up loadé est d irectement intégré d ans la b ibliothèque des médias.
<j"
r-l
0
N
Pour y accéder, il suffit de cliquer sur l'onglet « Médias» qui se trouve
©
.µ dans la barre latérale. Une liste recensant tous nos médias apparaît alors .
..c
Ol
ï:::: Fort heureusement des filtres sont là pour vous aider. Vous pouvez trier les
>-
a. médias par date ou par type. Un moteur de recherche interne est même
0
u présent.
Tous ces médias sont stockés dans le répertoire « wp-content/uploads »
de WordPress. Il est possible de changer ce ch emin dans les réglag es.
58 Chapitre 3 . Gestion fondamentale

Link Social

http/lvimeo com/56867 419

Add E-mail

~ Enter e-moîl

Embed - Hîde options

<ifra.e src-· t Jplayer. vi•eo. con/video/56867419• width- .. see·

Slze: 500 • 273 pixels Spe<:lal slulf:


Auloplay ltus video
Col or:
••' • or OOadef Loop 111,s >ideo
" Show lext hnk undernealtl 111,s v,deo
lntro: " Portrait l-' T1tle -'I Bïllne Show >ideo descnpbon below video

This embeddedv,deo wlll mdude a text hnlt

Figure 3.23 - Code HTML de la vidéo

"'O
0 Aiouter/Supprimer des médias
C
:i
0
<j" Il est possible d'ajouter un fichier directement dans la bibliothèque, sans
r-l
0 passer par la rédaction d'un articl e ou d'une page.
N

© Dans le sous-menu de la partie Médias, cliquez sur« Ajouter ». Il ne reste



..c
Ol alors plus qu'à choisir son média et le tour est joué! Il sera inséré dans la
ï::::
>-
a.
bibliothèque et désormais intégrable dans vos articles ou dans vos pages.
0
u
3.4 Gestion des comptes utilisateurs 59

~ Ajouter un média Visuel Texte

b i link b-quote Gel ins img ul ol li code more fenner les balises plein écran

<iframe src="//player.vimeo.cOfll/video/56867419" height="273" width="500"


allowfullscreen="" frameborder="0"></iframe>

<a href="http://vimeo . c0fll/568674l9">Bi<lfllethanisation en 30 ISO - Réseaugds


Strasbourg</a> frOfl <a href="http://vimeo.com/simonkern">Simon Kern</a> on <a
href="https://vimeo.cOfll">Vimeo</a>.

Voici un exemple de page . Elle est différente d'un article de blog, en cela qu ' elle
restera à la même place, et s'affichera dans le menu de navigation de vot r e site (en
fonction de votre thème ) . La plupart des gen s cor1111encent par écrir e une page « À Propos
» qui les présente aux visiteurs potentiels du site. Vous pourriez y écr i r e quelque
chose de ce tenant :

Figure 3.24 - Code HTML de la vidéo collé dans l'éditeur HTML de WordPress

3.4 GESTION DES COMPTES UTILISATEURS

Le compte Administrateur
Le compte Administrateur, c'est le compte qui a tous les droits. Une
expression simple à retenir: si vous êtes administrateur vous êtes Dieu . Il peut
donc tout faire ! Faites donc bien attention lorsque vous donnez ce statut à
une tierce personne.
Rappelez-vous : dès l'installation, WordPress crée automatiquement un
compte. C'est celui de l'administrateur (sûrement vous-même).

"'O
0
C

0
:J Les différents niveaux d'utilisateurs
s:t
,-t
0 Fort heureusement, WordPress possède une gestion des droits avec plusieurs
N
@ niveaux pour chaque utilisateur. On y trouve ainsi plusieurs rôles :

..c
CJl • Administrateur
·c
>
a. • Éditeur
0
u • Auteur
• Contributeur
• Abonné

Chaqu e rô le possèd e ses propres droits (tabl eau 3.1 ). C elui ayant le
moins d e droit est l' abonné : il ne peut guère laisser autre chose que des
60 Chapitre 3 . Gestion fondamentale

commentaires (si toutefois vous avez activé cette option dans les réglages de
WordPress).

Tableau 3.1 - Droits des utilisateurs sous WordPress


Ad min. Éditeur Auteur Contributeur Abonné
Écrire un article Oui Oui Oui Oui Non
Publier un article Oui Oui Oui Non Non
Gestion des articles Oui Oui Oui Non Non
(les siens)
Création d'une Oui Oui Non Non Non
page
Gestion des pages Oui Oui Non Non Non
Gestion des Oui Oui Non Non Non
catégories
Gestion des Oui Oui Oui Non Non
commentaires (les siens)
Gestion des Oui Non Non Non Non
templates
Gestion des plugins Oui Non Non Non Non
Gestion des O ui Non Non Non Non
utilisateurs
Gestion des options Oui Non Non Non Non
Édition du profil O ui O ui O ui O ui Oui

Pour de plus amples informations concernant les droits des utilisateurs


WordPress, vous pouvez consulter ce site :
http://co dex.word press.o rg/ User_ Levels.

"'O
0
C
Créer un nouveau compte
:i
0
<j" Dans le sous-menu de la partie Utilisateurs, cliquez sur Ajouter. Il ne vous
r-l
0
N
reste plus alors qu'à remplir les champs et surtout à indiquer le rôle de ce
© nouvel utilisateur.

..c
Ol
ï::::
>-
a. Conseil : ne créez pas un compte ayant comme identifiant « admin ».
0
u Dans les versions antérieures de WordPress, « admin » était l'identifiant
généré par défaut. Cela posait des soucis de sécurité ...
3 .5 Gestion des menus personnalisés 61

Gestion des comptes


Un utilisateur à supprimer ou au contraire à promouvoir? Aucun souci,
WordPress sait faire cela. Dans le sous-menu de la partie Utilisateurs il suffit
simplement de cliquer sur Auteurs et utilisateurs. Vous y trouverez une liste
recensant tous les utilisateurs. Il est d'ailleurs possible d'afficher uniquement
les administrateurs.
Pour supprimer un utilisateur, cochez la case correspondante et choisissez
dans la liste «Supprimer», puis cliquez sur« Appliquer». Cet utilisateur est
désormais supprimé définitivement.
Pour modifier les données d'un utilisateur, un clic sur son nom permet
d'accéder à son profil où tout est modifiable : son rôle, son adresse e-mail,
son mot de passe, etc.

Gérer son profil


Une information sur vous-même à modifier? C'est très simple: rendez-
vous dans le sous-menu Votre profil. Vous pouvez alors changer toutes les
données vous concernant: mot de passe, biographie, etc.

"'
3.5 GESTION DES MENUS PERSONNALISES
Présentation de l'interface
Pour accéder à la gestion des menus il suffit de cliquer sur la sous-partie
«Menus» du signet« Apparence» (figure 3.25).

R emarque - Avant de pourvo ir créer et de gérer un menu, il est logique


"'O d'avoir déjà créé au préalable des articles, des pages ou des catégories.
0
C
:i
0
<j"
r-l
0
Création d'un menu personnalisé
N
Avant de pouvoir placer des éléments (liens, pages, catégories) dans un
©

..c menu il faut d'abord le créer! Rien de plus simple: donnez-lui un nom,
Ol
ï:::: par exemple « mon menu » et cliquez sur le bouton « Créer un menu »
>-
a.
0
(figure 3.26) .
u
Une fois cette étape passée, une boîte nous invite à créer la structure du
menu ainsi que de le régler (figure 3.27).

N ote - Pour ajouter un menu supplémentaire il suffit de cliquer sur le lien


« Créez un nouveau Menu » Pour supprimer le menu, cliquez sur le lien
« Supprimer le menu ».
62 Chapitre 3. Gestion fondamentale

Options de téaan .,. Alde "'


Modifier les menus

Modifiez votre menu cl-dessous, ou qéez un OOlNeaU menu.

Pages Nomdumtnu ... I____________, Uffii2::lki


Donnez à votre un menu un nom Ci-dessus. puiS diquez sur« Créer le menu».
Les plus récentes Affiche, tout
RectierLhe
Mii::IJ:iil
[ Page d'exemple

Liens

Catégories

Figure 3.25 - Interface d'administration des menus

Nom du menu Mon Men~ Créer le menu


~------------------~
Donnez à votre un menu un nom ci-dessus, puis cliquez sur « Créer le menu ».

Créer le menu

Figure 3.26 - Panneau de création d'un menu

"'O
0
C
:i
Pages Nom du menu Mon Menu
Fi:ié·h'iii::é:i11
0 Liens
Structure du menu
<j"
r-l Ajouter des éléments de menu depuis la colonne de gauche.
0
N Adresse web http: f /

© Cible du lien Eltmtnt du mtnu Réglages du menu



..c Ajoutez D Ajout er aut omatiquement les nouvelles pages principales de haut niveau à ce
Ol ~outer au menu
ï:::: automatiquement menu
>-
a.
des pages

0 Catégories Emplacements du 1;11 Menu haut principal


u thème D Menu secondaire dans la barre latérale de gauche

Supprimer le menu
Fiiih·H@ii:é,ill

Figure 3.27 - Le menu a été assigné dans l'emplacement « Haut Principal» de ce thème
3 .5 Gestion des menus personnalisés 63

Vue d'ensemble
Une fois le menu créé et placé, nous allons pouvoir le remplir! À gauche
de l'écran se trouvent 3 rubriques: « Pages», «Liens» et «Catégories»
(figure 3 .28).

Pages •

Les plus récentes Afficher tout


Recherche

D Ma page d'accueil
D Ma Page d'exemple

Tout sélectionner Ajouter au menu

Liens

Catégories

Figure 3.28 - Le menu a été assigné dans l'emplacement « Haut Principal » de ce thème

Ajout d'un lien Le panneau « Liens » permet d'ajouter un lien de votre


choix (figure 3.29). Après avoir renseigné l'URL et son nom, un simple clic
sur « Ajouter au menu » fera l'affaire.
Ne pas oublier de cliquer sur le bouton « Enregistrer le menu » dans
le panneau du menu courant pour qu'il prenne en compte ces nouveaux
"'O
éléments (figure 3 .30).
0
C
:i
0
<j"
Ajout d'une ou plusieurs pages
r-l
0
N Ce panneau permet d'ajouter une ou plusieurs pages au menu courant. Des
© signets permettent de « trier » les pages les plus récentes ou l'ensemble

..c
Ol
des pages. Ils permettent également la recherche d'une page précise
ï:::: (figure 3 .31 ).
>-
a.
0
u Une liste de pages avec des cases à cocher apparaîtra alors sous les
signets. Pour les ajouter au menu courant, il suffit de cliquer sur le bouton
« Ajouter au menu ».
Ne pas oublier là encore de cliquer sur le bouton « Enregistrer le menu »
dans le pann eau du men u courant pour qu'il prenne en compte ces nouveaux
éléments.
64 Chapitre 3. Gestion fondamentale

Liens

Adresse web http://simon - k.com

Cible du lien Nom dans le menu

Ajouter au menu

Figure 3.29 - Panneau d'ajout d'un lien

Pages Nom du menu Mon Menu Fi,Mh/llH::é:1'1


Liens
Structure du menu
AJouter des éléments de menu depuis la colonne de gauche.

Adresse web http: / /

Cible du lien Élèmtnl du menu Réglages du menu


Ajoutez D Ajouter automatiquement les nouvelles pages principales de haut niveau à ce
~outer au menu
automatiquement menu
des pages
Catégories Emplacements du ~ Menu haut principal
thème D Menu secondaire dans la barre latérale de gauche

Supprimer le menu
1··1/éh@ii,:H,111

Figure 3.30 - Bouton « Enregistrer le menu »

Pages

"'O Les plus récentes Afficher tout


0
C Recherche
:i
0
<j" ~ Ma page d'accueil
r-l
0
N D Ma Page d'exemple
©

..c Tout sélectionner Ajouter au menu
Ol
ï::::
>-
a.
0
u Liens

Catégories

Figure 3.31 - Pannea u d'a jout des pages


3 .5 Gestion des menus personnalisés 65

Ajout d'une ou plusieurs catégories


Ce panneau permet d'ajouter une ou plusieurs catégories au menu courant
(figure 3.32). Le fonctionnement est le même que pour le panneau des
pages.

Catégories

Les plus utilisées !Afficher tout


·........................................·
Recherche

D Ma catégorie
D Ma seconde catégorie

Tout sélectionner Ajouter au menu

Figure 3.32 - Panneau d'ajout d'une ou plusieurs catégories

Définir l'emplacement des menus


Après création d'un menu, un signet« Gérer les emplacements» apparaît
(figure 3.33). En cliquant dessus, vous arrivez à une interface qui liste tous
les emplacements du thème. Il est possible que certains thèmes n'aient
aucun emplacement... À vous de choisir l'emplacement de chaque menu en
cliquant sur« Enregistrer les communications».

"'O
0
C
:i
0 Modifier les menus Gérer les emplacements
<j"
r-l Votre thème peut utiliser 2 menus. Sélectionnez le menu que vous voudriez utiliser pour chaque emplacement
0
N
Emplacement du thème Menu assigné
©

Menu haut principal
..c ._[M
_o_
n_M_e_nu_ _ _ -=EJ=[ Utiliser le nouveau menu
Ol
ï:::: Menu secondaire dans la barre EJ
>-
a. latérale de gauche
- Ch oisir un menu - Utiliser le nouveau menu

0
u
Enregistrer les modifications

Figure 3.33 - Le menu a été assigné dans l'emplacement« Haut Principal» de ce thème
66 Chapitre 3 . Gestion fondamentale

Gérer les éléments d'un menu personnalisé


Lorsqu'un menu personnalisé contient plusieurs éléments, nous pouvons les
gérer et les organiser.

Éditer un élément d'un menu


Pour éditer un élément (liens, pages, catégories), il suffit de cliquer sur
la flèche grisée de droite. Un volet déroulant fera alors apparaître les
paramètres (figure 3 .34).
Après modification, n'oubliez pas de cliquer sur le bouton « Enregistrer le
menu ».

Définir l'ordre des éléments d'un menu


Pour éditer l'ordre des éléments, un simple « drag-and-drop »
(glisser/déposer) suffit (figure 3 .35) .
Après modification n'oubliez pas de cliquer sur le bouton « Enregistrer le
menu ». Désormais, l'ordre est modifié dans la partie publique du site.

Définir des pages parents/enfants


Il est possible de créer une arborescence entre les éléments d'un menu
personnalisé, là encore grâce à un simple glisser/déposer (figure 3.36).
Après modification n'oubliez pas de cliquer sur le bouton « Enregistrer le
menu ».

3.6 GESTION DES COMMENTAIRES


"'O
0
C
Gérer les commentaires
:i
0
<j" Un commentaire est un court texte laissé à la suite d'un article ou d'une
r-l
0
N
page. Il permet de récolter les réactions des internautes à propos d'une
© publication.
...,
..c
Ol
ï:::: R emarque - Lorsque de nouveaux commentaires ont été postés, vous en êtes
>-
0
a. directement informé par une petite infobulle. Cette d ernière apparaît d ans la
u barre latérale, dans le signet « Commenta ires » ( figure 3 .3 7).

Pour y accéder, il suffit de cliquer sur l'onglet « Commentaires» se


trouvant dans la barre latérale.
Une liste recensant tous les commentaires s' affiche alors. Elle y recense
le nom de l'auteur, son adresse IP, le commentaire qu'il a laissé et le sujet
3 .6 Gestion des commentaires 67

Structure du menu
Glissez chaque élément pour les placer dans l'ordre que vous préférez.

Ma page d'accueil Page

Tftre de la navigation Attribut de titre


Ma page d'accueil
Déplacer Descendre d'un cran

Ongmal: Ma page d'accueil

Supprimer I Annuler

Lien externe Lien •

Adresse web
http ://simon-k.com

Tftre de la nav,gation Attribut de titre


Lien externe
Déplacer Un cran vers le haut Descendre d'un cron Sous Ma Pace
d'exemple Tout en haut

Supprimer I Annuler

Ma catégorie Catégorie

Tftre de la navigation Attribut de titre


Ma catégorie
Déplacer Un cran vers le haut Sous Lien externe Tout en haut
"'O
0
C
:i
0 Ongmal: Ma cat~or1e
<j"
r-l
0 Supprimer I Annuler
N

©

..c
Ol
ï::::
>-
a. Figure 3.34 - Édition des élém ents (page, catégorie, lien)
0
u

d'origine. En survolant les lignes de cette liste avec la souris, un menu


proposant différentes actions (désapprouver, répondre, modifier, reporter
comme spam et supprimer) apparaît.
68 Chapitre 3. Gestion fondamentale

Nom du menu Mon Menu

Structure du menu
Glissez chaque élément pour les placer dans l'ordre que vous préférez. Cliquez sur la flèche à droite de l'élém

Ma page d'accueil Page •

r·1 Lien externe

Ma catégorie Catégorie •

Figure 3.35 - Définir l'ordre des éléments

Nom du menu Mon Menu Enregistrer le menu

Structure du menu
Glissez chaque élément pour les placer dans l'ordre que vous préférez. Cliquez sur la flèche à d roite de
l'élément pour afficher d'autres options de configuration.

Ma page d'accueil Page •

Lien externe sous-élément Lien ""

Ma catégorie sous-élément Catégorie •

"'O
Figure 3.36 - Élaboration de l'arborescence du menu personnalisé
0
C
:i
0
<j"
r-l
Un webmaster est responsable du contenu d'un site Internet. Il est
0
N donc primordial de pouvoir gérer les commentaires que peuvent laisser
© les internautes. Si les commentaires sont ouverts, c'est à cet endroit qu'il est

..c
Ol
possible de les modérer.
ï::::
>-
a. Dans les filtres vous remarquerez l'existence d'un type de commentaire
0
u particulier : les « pings ». Les pings sont des rétroliens .
Selon Wikipédia, « Un rétrolien (en anglais trackback) est un système
de liens inter-blogs semi-automatisé. Il permet aux auteurs de relier des
billets de blogs différents et parlant du même sujet, ou se faisant référence.
Concrètement, l'auteur d'un blog A peut établir un rétrolien vers un billet
d'un blog B en faisant, dans un de ses propres billets sur son blog A, un
3.6 Gestion des commentaires 69

Comn1entai res 1

Figure 3.3 7 - Signet « Commentaires » : il indique le nombre de commentaires non lus

lien vers l'URL du billet du blog B. Si le blog B gère les rétroliens, il est
automatiquement indiqué dans le billet sur le blog B que le blog A y fait
référence ».

À savoir - Si un « tweet » mentionne votre site, vous en saurez automatique~


ment averti.

Paramétrer les commentaires


Vous pouvez gérer les commentaires de deux manières différentes : soit au
moment de la création d'un article ou d'une page, soit dans les paramètres
g énéraux d e WordPress.

Lors de la création d'un article ou d'une page


Dans la partie inférieure de l'interface de publication, un bloc « Discussion »
permet d'autoriser la publication des commentaires et des pings. Cochez ou
décochez la case qui vous intéresse (figure 3.38) .

Discussion

~ Autoriser les commentaires.


"'O
0 ~ Autoriser les rét roliens et oings sur cette page.
C
:i
0
<j"
r-l
0
N
Figure 3.38 - Le bloc« Discussion »
©

..c
Ol
ï::::
>-
0
a. Dans les paramètres généraux de WordPress
u
Cette partie va beaucoup plus loin en termes de paramétrage. WordPress
possède en effet une rubrique qui y est entièrement dédiée. Rendez-vous pour
cela dans la sous-partie « Discussion » du signet « Réglages » (figure 3 .39).
Ce panneau de configuration est composé de plusieurs sections donnant
a ccès à d e nombreuses foncti o nnalités :
70 Chapitre 3 . Gestion fondamentale

Figure 3.39 - Accès à la rubrique « Discussio n »

• Réglages par défaut des articles. Vous pouvez régler ici le


comportement par défaut des commentaires lors de la publication
des articles ou des pages (figure 3.40).

Options de discussion

Réglages par défaut ~ Tenter de notifier les sites liés depuis le contenu des articles
des articles
~ Autoriser les liens de notifications depuis les autres sites (notifications par pings et rétroliens)

~ Autoriser les visiteurs à publier des commentaires sur les derniers articles

(Ces réglages peuvent être modifiés pour chaque article.)

Figure 3.40 - Réglages par défaut des articles

• Autres réglages des commentaires. Vous avez la possibilité de


définir ici la façon de publier un commentaire et de gérer son affichage
"'O
0
C
(figure 3.41 ).
:i
0
<j"
r-l Autres réglages des 0 L'auteur d'un commentaire doit renseigner son nom et son adresse de messagerie
0 commentaires
N D un utilisateur doit être enregistré et connecté pour publier des commentaires

© D Fermer automatiquement les commentaires pour les articles vieux de plus de 14 jours

..c
Ol
0 Activer les commentaires imbriqués jusqu'à 5 EJ niveaux
ï::::
>-
a.
D DMser les commentaires en pages. avec 50 commentaires de premier niveau par page et la
0
u dernière EJ page affichée par défaut
Les commentaires doivent être affichés avec le plus ancien EJ en premier

Figure 3.41 - A utres réglages des commentaires


3 .6 Gestion des commentaires 71

• M'envoyer un e-mail lorsque. Choisissez dans cette section


comment WordPress avertit un modérateur de la publication d'un
commentaire (figure 3.42).

M'e nvoyer un message ~ Un nouveau commentaire est publié


lorsque
~ Un commentaire est en attente de modération

Figure 3.42 - Section « M 'envoyer un e-mail lorsque »

• Avant la publication d'un commentaire. Cette section est impor-


tante : vous pouvez choisir d'y modérer un commentaire a posteriori
ou, au contraire, avant sa publication (figure 3.43) .

Avant la publication d'un D Le commentaire doit être approuvé manuellement


commentaire
~ L'auteur d'un commentaire doit avoir déjà au moins un commentaire approuvé

Figure 3.43 - Section « Avant la publication d'un commentaire »

• Modération de commentaires. Vous pouvez ici paramétrer les


critères selon lesquels un commentaire est directement mis en attente
de modération. Ces critères sont le nombre de liens maximal ainsi
qu'une fi le de modération (figure 3.44). Vous devrez d'ailleurs remplir
cette dernière avec une adresse IP, un mot, une partie d'un mot ...

Modération de Garder un commentaire dans la file d'attente s'il contient plus de 2 lien(s) (une des caractéristiques
commentaires
typiques d'un commentaire indésirable (spam) est son nombre important de liens)

Lorsqu'un commentaire contient run de ces mots dans son contenu. son nom. son adresse web, son adresse
"'O de messagerie, ou son IP. celui-ci est retenu dans la file de modération. Un seul mot ou une seule IP par ligne.
0 Cette fonction reconnait 11ntérieur des mots, donc « press• suffira pour reconnaitre« WordPress •.
C
:i
0
<j"
r-l
0
N

©

..c
Ol
ï::::
>-
a.
0
u

Figure 3.44 - Section « Modération de commentaires »

• Liste noire des commentaires. Paramétrez ici les critères selon


lesquels un commentaire est défin itivement marqué comme indésirab le
72 Chapitre 3. Gestion fondamentale

Liste noire pou r les Lorsqu'un commentaire contient t un de ces mots dans son contenu, nom, adresse web, adresse de
commentaires messagerie, ou IP. le marquer comme indésirable. Un seul mot ou IP par ligne. Il reconnait l'intérieur des mots,
donc « press • suffira pour reconnaître « WordPress •.

Figure 3.45 - Section « Liste noire des commentaires »

(figure 3.45). Comme précédemment, une liste noire est à remplir avec
des URL, des noms, des adresses e-mails . ..
• Les avatars. Un «avatar», (mais vous le savez sans doute déjà},
c'est une petite image (vignette) qui s'affiche lorsque vous postez un
commentaire. Un avatar permet de vous faire une identité propre sur le
net. Pour les heureux possesseurs d'un compte Gravatar (www. gravatar.
corn), la fonctionnalité est directement intégrée dans les options de
discussion (figure 3.46). Cela peut sembler évident, car Automattic, la
société propriétaire de WordPress, a racheté Gravatar . ..

Affichage des avatars ~ Afficher les avatars

Classement maximal ® G - Visibles par tous

0 PG - Possiblement offensants, réservés normalement aux personnes de 13 ans et plus

0 R - Réservés aux personnes de plus de 17 ans

0 X - Réservés aux adultes

Avatar par défaut Les utilisateurs n'ayant pas d'avatar peuvent se voir attribuer un logo générique. ou un avatar généré à partir
de leur adresse de messagerie.
"'O
0 ® Homme mystère
C
:i
0 0 Vide
<j"
r-l
0 0 ~ Logo Gravatar
N

© 0 ldenticon (généré)

..c
Ol 0 •.;! Wavatar (généré)
ï::::
>-
a. 0 • MonsterlD (généré)
0
u
0 t3 Rétro (généré)

Enregistrer les modifications

Figure 3.46 - Avatar par défaut


3 .6 Gestion des commentaires 73

Mais c'est quoi au juste Gravatar? Gravatar permet de faire le rap-


prochement entre votre adresse e-mail (que vous renseignez lorsque vous
souhaitez poster un commentaire) et votre compte Gravatar (que vous avez
créé sur gravatar.com) . Il suffit de modifier votre photo ou votre description
sur gravatar.com pour que toute votre identité sur le net soit modifiée, ce qui
s'avère très pratique.
Concrètement, voilà ce qui différence une personne possédant un compte
Gravatar d'une personne n'en possédant pas: la personne n'ayant pas de
compte Gravatar se verra attribuer automatiquement une vignette par défaut
(figure 3.47) .

11 Simon says:
.4pnl 27 2010 at 10 45 pm (Edit)

Moij'ai un compte GRAVATAR l


~

Bidule says:
April 27 201 o at 10·45 pm (Edit)

Moi non... pas de compte GRAVATARG

Figure 3.47 - Avec et sans compte Gravatar

"'O
0
C
:i
0
<j"
r-l
0
N

©

..c
Ol
ï::::
>-
a.
0
u
Copyright© 2014 Dunod.
Gestion
des fonctionnalités

4.1 GESTION DE L'APPARENCE

Installation d'un thème


Un thème (ou template) permet de changer l'aspect graphique et fonctionnel
d'un site Internet.
Vous trouverez un template sur www.dunod.com . Vous avez également
"'O
0
C
la possibilité d'en obtenir un sur Internet (gratuit ou payant). Il est toutefois
:J
0 possible de créer son propre template (la troisième partie de ce livre y est
s:t
,-t
consacrée). Quelle que soit la manière dont vous vous l'êtes procuré, il y a
0
N deux démarches pour l'activer:
@

..c
• La première (Manuelle & conseillée) :
CJl
·c
>
a. Si vous l'obtenez dans un format d'archive (.zip, .rar, etc.), il faut tout
0
u d'abord le décompacter ou décompresser.
Le dossier résultant de ce décompactage doit être placé (par FTP ou
localement) dans le dossier« wp-content/ themes » de WordPress.
Le th ème est d ésormais installé, il ne reste plu s qu'à l'activer.
• La seconde (Automatiqu e) :
76 Chapitre 4. Gestion des fonctionnalités

Rendez-vous dans la sous-rubrique thème (Figure 4.1) et cliquez sur


«Envoyer» en haut de l'écran . Téléchargez votre template au format .zip et
WordPress s'occupe de tout. Il n'y a plus qu'à l'activer.

Remarque - Si vous voulez supprimer un thème : supprimez~le de ce dossier.


Néanmoins, une désactivation de ce th ème dans l'espace d'administration sera
préalablement n écessaire.

Activation/Désactivation d'un thème


Dans l'espace d'administration de WordPress, vous trouverez un signet
«Apparence» et sa sous-section «Thèmes» (figure 4.1 ). En cliquant sur
celle-ci, vous apercevrez le thème actif et les autres thèmes disponibles.

Figure 4.1 - Le signet Apparence


"O
0
C Placer le thème dans le dossier« wp-content\ themes » aura alors pour
:i
0 conséquence l'ajout du template dans la liste.
<j"
r-l
0 Dans l'interface de gestion des thèmes, il est possible d'avoir un aperçu,
N
de supprimer le thème et bien entendu de l'activer (figure 4.2). En fonction
©
...,
..c
de l'action choisie, une info-bulle apparaît pour vous signaler que l'action
Ol
ï:::: s'est bien déroulée (ou non) .
>-
a.
0 Si vous retournez maintenant sur le front office, vous pourrez constater
u
que l'aspect du site a complètement changé, grâce à un simple clic!

Remarque - Un thème ch ange l'apparence extérieure de votre site mais il


peut également ajouter de nouvelles fon c tionn alités comme la gestio n d'un
diaporama, d'une galerie photo, des types d'articles supplémentaires, etc. Dès sa
désactivation, ces fonctionna lités seront également désactivées.
4. 1 Gestion de l'apparence 77

Thèmes O Ajouter Chercher parm es themes nstal és•.

1 Nouveau thème actiVé. ~


- - -
Act,vê : T \e'ît 1 TNe -1e Personnahser Twenty Fourteen

Figure 4.2 - L'interface de gestion des thèmes

Changer l'arrière-plan
Si le thème activé le permet, vous pouvez aisément changer l'arrière-plan:
rendez-vous dans son interface de gestion dans la sous rubrique « Arrière
Plan » (figure 4.3) . Il est alors possible de changer la couleur ou d'ajouter
une image d'arrière-plan au site.
Une fenêtre d'aperçu permet de visualiser l'arrière-plan actuel (vide ou
"'O
0 non). Pour ajouter une couleur de fond, cliquez sur le bouton « Couleur
C

0
:i d'arrière-plan ». Une palette des couleurs fait alors son apparition et il ne
<j"
r-l
vous reste plus qu'à choisir parmi celles proposées. Cliquez ensuite sur
0 « Enregistrer les modifications ».
N

© Pour ajouter une image d'arrière-plan à cette couleur ou la remplacer,



..c
Ol
ï::::
cliquez sur le bouton « Parcourir» pour chercher une image sur votre
>-
a. ordinateur.
0
u
Il est ensuite important de définir la position de l'image (à gauche, centrée
ou à droite) par rapport à la fenêtre du navigateur; de déterminer si elle doit
se répéter horizontalement, verticalement, les deux ou pas du tout; et enfin
de choisir si, lors d'un scroll, l'arrière-plan reste fixe ou si l'image bouge
avec.
78 Chapitre 4. Gestion des fonctionnalités

Arrière-plan personnalisé -·
1

;
'•
"' ..-il,
-- '"" ~ ~ "'
•. '~ •. -:.
--: " . ~

-
1

--~ ... -'--


·- ....... ~ . . ........ ,,:',, . '~~
,,,.... ,::S. . ---'--
' - - - - -:;, ·

lktwerrtrnap- ~""'-'~tl~tttllrt
ctd~t,,~.,.,.,,.,,J:i.1• ;1~..oJSwr•H1J)Oi<JtlltOf1ff..t'•vos
~.,-..i'),IOOJ$

·~ O••

Figure 4.3 - L'interface de gestion de l'arrière-plan

Changer l'image de l'en-tête du site (header)


Le header est l'entête du site. Si le thème activé le permet, il est possible de
"'O
0 changer l'image du header. Rendez-vous dans la sous-section « En-tête» du
C
:i signet « Apparence ».
0
<j"
r-l Lisez bien les recommandations, puis téléchargez votre propre image.
0
N Cliquez sur le bouton « Enregistrer les modifications» pour mettre votre
© image en ligne .

..c
Ol
ï::::
>-
a.
0
u 4.2 GESTION DES EXTENSIONS <PLUGINS>

De quoi s'agit-il ?
Les extensions, que nous appellerons « plugins », permettent de modifier ou
d'a jo uter des fonctionnalités à W o rdPress.
4.2 Gestion des extensions (p/ugins) 79

Alde "'
Personnalisation de l'en-tête
Image d'en-tête

Aperçu

Sélectionnez Vous polNeZ choisir une Image d'en-tête personnalisée en la mettant en ligne depuis votre ordinateur ou en la choisis
une Image vous pourrez la recadrer.
Les images devraient faire au moins 1260 pixels de large. La largeur suggérée est de 1260 pixels. La hauteur suggérée
ChCKS1s.se:: une image sur votre CM"d1nateur:

Percourir_ Aucun fichier sélectlonné. oye


Ou cho1slsse-z une ,mege dans voue btbUotMque de: médias :
Choisissez une image

Images mises en ligne Vous powez choisir un en-tête parmi ceux que vous avez déjà mis en ligne. ou en afficher un
aléatoirement
®

Retirer l'image Ceci retirera nmage d'en-tête. Il ne vous sera pas possible de rétablir vos personnalisations.
Retirer nmage d'en-tite

Figure 4 .4 - L'interface de gestion de l'image du header

Facilement trouvable sur Internet, la plupart sont disponibles gratuitement


et dans le « WordPress Store » : http ://wo rd press.org/extend/plugins/.
Il est possible de chercher et installer directement des plugins à partir de
"'O
l' interface d'administration de WordPress.
0
C
:i
0 Remarque - L'un des plugins les plus utilisés dans WordPress est le p lugin
<j"
r-l «A kismet » . Il permet de limiter le spam sur les commen taires.
0
N

©

..c
Ol
ï::::
>-
a. Installation/Suppression
0
u
Avant d ' installer un plugin, n'oubliez pas de vérifier qu'il est compatible avec
votre version de WordPress.
Pour installer et supprimer des plugins, deux méthodes sont possibles : la
m éthode automatiqu e et la m éthod e manuelle.
80 Chapitre 4. Gestion des fonctionnalités

La méthode manuelle
Comme pour l'installation d'un thème, il faut tout d'abord décompresser
l'archive. Le dossier (ou le fichier) résultant de la décompression doit être
placé (par FTP ou localement) à cet endroit : « wp-content/plugins ». Une
fois l'opération réalisée, il ne reste plus qu'à activer le plugin.
Vous l'aurez compris, pour supprimer un plugin, il faut le supprimer de
ce fichier. Une désactivation est conseillée au préalable.

La méthode automatique
Pour vous faciliter la tâche, WordPress pense à tout ! Rendez-vous dans la
rubrique« Extensions» puis cliquez sur« Ajouter» (figure 4.5).

Installer des extensions


Recherche I Envoyer I Mises en avant I Populaires I Ajoutées réce

Les extensions étendent les fonctionnalités de WordPress, et en ajoute


automatiquement en provenance du répertoire des extensions WordP
~-
Recherche

Chercher parmi les extensions


11

Mots-clés populaires

Vous pouvez également naviguer en fonction des mots-clés les plus populo,

ad m j n A!AX buddypress category Q2!!!!!lJ:!!! CO mm en t~

"'O
0 Figure 4 .5 - Ajouter un nouveau plugin
C
:i
0
<j" Un champ de recherche vous y attend . Tapez un ou plusieurs mots-clés
r-l
0 (de préférence en anglais) puis cliquez sur le bouton « Chercher parmi les
N

© extensions ».

..c Si des résultats sont disponibles, vous obtiendrez alors une liste de
Ol
ï:::: plusieurs plugins. Tous sont pourvus d'une note, d'une description et
>-
a.
0
u d'informations sur leur version (figure 4 .6) .
Pour installer celui qui vous intéresse, cliquez sur« Installer maintenant».
Une alerte vous demande alors de confirmer cette action.
Après confirmation, WordPress télécharge et place automatiquement le
plugin dans le fichier « wp -content/plugins ». Il ne reste plus qu'à l'activer et
le tour est joué !
4 .2 Gestion des extensions (p/ugins) 81

Installer des extensions


Recherche I Résultats de recherche I Envoyer I Mises en avant 1

Mot-clé G I~G_a_lle_ry_ _ _ _ _~ Chercher parmi les ex1

Nom Version Note Description

Gallery
Détails I Installer
4.1.3 ****tI This plugin ma
into your webs.
maintenant gallery, show tl
can upload HQ
efficient functic
appealing look
There is also...

Gallery Bank
Détails I Installer
2.0.25 ****~ Wishingyouall
Gallery Bank is
n-illnrinr 1•1ith -.

Figure 4.6 - Résultat de la recherche

Attention - Cette méthode ne fonctionne pas chez certains hébergeurs.

Adivation/Désadivation
Dans l'espace d'administration de WordPress, vous trouverez un signet
« Extensions» et sa sous-section « Extensions Installées». En cliquant sur
cel le-ci, vous pourrez voir tous les plugins installés et leur statut (activé ou
non) (figure 4.7).
Après avoir placé le plugin dans le fichier « wp-content/plugins », il
"'O
0 apparaîtra dans la liste avec sa description (souvent en anglais). Il suffit
C
:i alors de l'activer en cliquant sur le lien« Activer».
0
<j"
r-l Pour le désactiver : cliquez sur le bouton « Désactiver».
0
N
Lorsqu'une nouvelle version du plugin est disponible, vous en serez
©

..c directement informé par une info-bulle qui apparaîtra dans le signet
Ol
ï:::: « Extensions» (figure 4.8).
>-
a.
0
u

Utilisation d'un plugin


Certains plugins sont paramétrables. Ils ajoutent alors, au moment de leur
activation, de nouvelles sous -sections dans le signet « Réglages» de la barre
latérale gauche.
82 Chapitre 4. Gestion des fonctionnalités

Options de récran "' Atde T

Extensions Ajouter

Tout es (2) 1 Oésaa lvées (21 Chercher parmi les extensions installées

Actions groupées G Appliquer

D Extension Description

D Aklsmet Utllisé par des millions de sites, Aklsmet est très probablement la meilleure manière de protéger
Activer Modifier Su pprimer votre site des commentaires et trackbacks indésirables {spam). Il vous prot ège même pendant
votre sommeil. Pour mettre sa protection en place: 1) Cliquez sur le lien• Activer •. à gauche de la
description, 2) Abtenez une clé d'API Akismet. et 3) Allez sur votre page de configuration d'Akismet et
enregistrez-y votre clé d"API,

Version 2.5.9 1 Par Automattic I Aller sur le site de textens,on

D Hello Dolly Ce n'est pas qu'une extenston. Elle symbolise l'espoir et l'enthousiasme de toute une génération.
Acttver Modifier supprimer résumé en deux mots, qu'a notamment chanté Louis Armstrong : Hello, Dolly. Une fols aa.lvé, elle
affichera une ligne aléatoirement des paroles de la chanson Hello, Do lty, en haut à droite de toutes
les pages de l'administration.
Version 1.6 1 Par Matt Mullenweg I Aller sur le site de rextenslon

0 Extension Description

Actions groupées G Appliquer

Figure 4 .7 - Interface de gestion des plugins

Extensions 1

Figure 4.8 - lnfo-bulle représentant les mises à jour disponibles

Les plugins les plus aboutis ajoutent même de nouveaux signets à la suite
de la barre latérale.
Quoi qu'il en soit, dans l'interface de gestion des plugins (signet« Exten-
sions») un lien « Réglages» apparaît au niveau du plugin concerné dans la
liste (figure 4. 9).

"O
0
C
:i
4.3 GESTION DES WIDGETS
0
<j"
r-l
0
N
De quoi s'agit-il ?
©
.µ Un widget est un plugin. Pour obtenir un nouveau widget, il faut donc installer
..c
Ol
ï:::: un plugin. Un widget peut être placé très facilement dans votre thème, s1 ce
>-
a. dernier dispose des emplacements nécessaires.
0
u
Par exemple, un widget permet d'insérer n'importe quel texte ou code
HTML à l'endroit où vous le placez.

R emarque - Un widget n'est utilisable que dans un thème qui accepte les
widgets. Pas d'inquiétude, la plupart des thèmse acceptent les widgets. Dans la
troisième partie, n ous apprendrons à rendre un thème « Widget~ready ».
4.3 Gestion des widgets 83

D Akismet
Désactiver Modifier Réglages

ou

Figure 4.9 - Le lien Réglages apparaît en fonction du plugin installé, soit directement dans
la liste des plugins, soit une rubrique s'est ajoutée dans la sidebar.

Installation/Suppression
Un widget étant un plugin, la manipulation est donc la même que pour
celui-ci : après décompression de l'archive, il suffit de la placer dans le
dossier « wp-content/plugins ». De même, un widget se supprime comme
un plugin.

-0
0
C:
:::J
Activation/Désadivation
0
s:t
,-i
0
Pour activer ou désactiver un widget, il suffit de se rendre dans l'interface de
N
gestion des Plugins en cliquant sur le signet « Extensions » puis d'activer le
@
...., plugin. Pour le désactiver, cliquez sur« Désactiver» .
.c
Ol
·;::
>-
c.
0
u Utilisation des widgets
L'utilisation des widgets est cette fois-ci différente de celle des plugins.
Rendez-vous dans la sous-rubrique « Widgets » du signet« Apparence».
Dans l'interface de gestion des widgets, vous pouvez repérer deux grandes
sections (figure 4.10) :
84 Chapitre 4. Gestion des fonctionnalités

• la partie de gauche recense tous les widgets disponibles;


• la partie de droite recense toutes les zones de votre thème actif qui
acceptent les widgets. En fonction de votre thème, le nombre de zone
va donc évoluer.

Options de r êcran • A,de •


Widgets

Widgets disponibles Barre latérale principale


Pour' activer un widgêt. glissez.le dans la batre lat~r'ale
ou c;hquez dessus. Pour désactivK un w1dget et
suppnmer ses rêglages. enlevez-le de la barre latêrale. Contenu de la barre latérale

Archives
Zone de widgets en pied de page
Une on:hive mcnsvcne des ortklcs de votre srtc.

Articles rêcents

Ca lend rier

Un u,lcndricr des ortides de votre site,

Catégories

Une hstc ou un m,cnu dêroulant des aitêgoric-.s.

Figure 4.10 - Interface de gestion des widgets

Pour faire apparaître un widget sur la partie publique, il suffit d'un simple
glisser/déposer. Choisissez votre widget dans la partie de gauche et déplacez-
le à l'endroit souhaité dans la partie de droite.
Lorsque le widget est placé dans la barre de droite, il est désormais
possible de l'utiliser et de le paramétrer.

Remarque - Un même widget peut être utilisé à plusieurs endroits dans le site
(si le thème le permet) avec des paramètres différents.
-a
0
C
Exemple : on peut placer le widget « texte >> dans la « sidebar » et dans le
:J
0 « footer » avec un texte différent pour chaque partie.
'tj"
,-i
0
N Pour faire disparaître un widget de la partie publique, deux possibilités
@ s'offrent à vous :
.....
.!:
Ol
·;:: • le supprimer définitivement en cliquant sur« Supprimer» dans la zone
>-
a. où il est actif ;
0
u • le rendre inactif tout en gardant ses paramètres. li suffit pour cela
de le glisser vers la partie inférieure appelée « Widgets désactivés»
(figure 4. 11 ). Vous pourrez le réactiver à tout moment en le faisant
glisser à nouveau dans la zone de votre choix.
4.3 Gestion des widgets 85

Widgets désactivés
Glissez ici les widgets que vous voulez retirer de la colonne latérale. tout en conservant
leurs réglages actuels.

Articles récents

Figure 4. 11 - Zone des widgets désactivés

-0
0
C:
:::J
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0
u
Copyright© 2014 Dunod.
Paramétrage
de WordPress

-
5.1 LES REGLAGES

Réglages généraux
Vous pouvez paramétrer ici les options générales de votre site (figure 5.1) :
son titre, sa description, son adresse web, l'adresse e-mail du webmaster
(importante en cas de notification), le fuseau horaire, le format de la date et
-a de l'heure et définir à quel jour la semaine commence.
0
C
:J
0 Si votre site a pour vocation d'être un site communautaire, activez l'option
'tj"
,-i « Tout le monde peut s'enregistrer» puis définissez le statut de chaque nouvel
0
N utilisateur.
@
.....
.!:
Ol Attention - Modifier les lignes des adresses URL, tout en haut de l'interface
·;::
>-
a.
de gestion (figure 5.2) aurait pour conséquence de rendre votre site totalement
0
u inaccessible : la base de données ayant enregistré cette nouvelle URL, Ward,
Press a donc rebâti tous ses liens. Il est déconseillé de toucher à ces lignes.
88 Chapitre S. Paramétrag e de WordPress

Réglages générau~

- Un111,......_.«ordl'rr11

1no11"""'8....,*rrtK1ta,. -~•ut,Jlr

l'ltt•flhul"'O,tl!IIOO'l•Ut'f
S•'IOlllfOIIII tfadfr 1t,,.,#IX.t11t*a~11rw 1"ar,,;c•!tPr!ffllrt'1iJK'4Ml.....,*"dl'ft'1.set.1ffllltntut"1

t,~t<om
anr.._ ru, ,,,tt~,..~froflu11dlill* ,,.Uf"'VI,~ ,.,....*nnicr,pl1Cl'l,_-'"111™*"

® 29,-.2014
0 20'4111129
0 01/WJ0'4
0 .1'M11/JOl4
0 ~. jÇ'( ?t,-. . .,

o,u,
0 ~ ; G,111 16r.2S.-

Figure 5.1 - Interface de gestion des réglages généraux

Réglages généraux

Ti t re du site Mon
-0
0
C:
:::J Slogan lJn SS
0
s:t En quelques mots, décrivez fa raison d'être de ce site.
,-i
0
N
@
...., Adre sse web de WordPress
.c http://www.mon- site.com
Ol (URL)
·;::
>-
c.
0
u Adre sse web du site (URL) http://www.mon-site.com

Figure 5.2 - L'URL de votre site


5 . t les réglages 89

Comment choisir sa langue ?


Par défaut, WordPress est en anglais. Il est néanmoins possible de télécha rger
une version française de WordPress.
Mais nous allons voir qu'il est relativement simple (avec quelques
connaissances techniques) d'installer et de choisir une langue, grâce à la
procédure suivante :
• Rendez-vous tout d'abord à l'adresse:
http://www.wordpress-fr.net/telechargements.
• Dans la rubrique « Fichiers de la traduction française», cliquez sur
« Fichier compilé .mo pour WordPress » pou r télécharger le ficher de
langue« fr_FR.mo ».
• Une fois ce fichier téléchargé, placez-le dans le dossier
« wp-content/languages ».
• Lorsque vous retournez dans les réglages généraux du back office, en
bas de page, une liste déroulante permettant de choisir la langue a
fait son apparition (figure 5.3). Choisissez« French», puis sauvegarder
en cliquant sur « Enregistrer les modifications ». Votre site WordPress
est désormais en français !

Site language: r-i=.rêiïdïQ


•....................~

Enregistrer les modifications ~.a:s:.-


Figure 5.3 - Liste déroulante pour le choix des langues

~
-a
0
C
:J
Conseil : N'hésitez pas à créer un dossier « languages ».
0 '
J

-tj" ~~
,-i
0
N Si vous rencontrez des difficultés lors de l'installation de la langue, ouvrez
@ le fichier « wp-config.php » qui se trouve à la racine de votre site, puis
.....
.!:
Ol
remplacez ce code :
·;::
>-
a.
0 1 def in e (' WPLANG' , ") ;
u

par celui-ci :

1 def in e (' WPLANG' , ' fr_FR' ) ;

La langue par défaut est désormais le français.


90 Chapitre S. Paramétrage de WordPress

Options d'écriture
Ces options concernent la mise en forme, le paramétrage et la publication
des articles à distance (figure 5.4). WordPress peut par exemple convertir
des caractères en émoticônes (il suffit pour cela de lui indiquer de le faire ...).

Options d'écriture

Mise en forme ~ Convertir les émoticônes, comme : - ) et : -P • en images lors de raffichage

0 WO<dPress doit automatiquement corriger les balises XHTML non valides

Catégorie par défaut des


Ma catégorie
artkles

Format par défaut des


articles
Pardéfaut a
Publier un article
Ceci est un bookmarklet une petite application qui se lance dans votre navigateur, et vous permet de récupérer des portions du Web pour k!s
bloguer.

Utilisez-le pour récupérer du texte, des rmages et d.es vidéos depuis n'importe quelle page Web. P\Jls modifiez l'artide et ajOutez vos propres
textes d irectement dans le bookmark!et, avant d'enregistrer le tout ou de le publier dans un article sur votre srte.

Ghssez te hen suivant dans votre barre de favons. O\J faites un ct,c-drort et aJovtez·le avos favoris pour obtenir un raccoure1 de publication.

[ S' Publier un artide


Envoi d'article par e-mai l
Pour publ~r dan-s wordPres-s par e-mail. vous devez définir un compte e-mail secret aVE:c une adresse POP3. Tout e-mail reçu à cette adresse sera
publié. li vaut donc mieux garder cette adresse à rabri des regards. Voici trois chaînes aléatoires que vous pourriez utiliser: Ob2:'qJHX •
:Ks:.xJ":C:.:t , wipTRirs .

Serveur de m essagerie mail . example . com Port 110

Identifiant login@example.com

Mot de passe password

catégorie par défaut des


MaC<>tégorle
art.id es e nvoyês par e~mail

-0 Services de mise à j our


0
C:
Quand vous publiez un nouvel article, WordPress peut notifier un service de mise à jour. Une explication se trouve sur la page Update Services du
:::J
0 Codex anglophone. Séparez les adresses web par des retours à la ligne.

s:t http :/ /rpc . pingoeatic .cOff/


,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0 Merci de foire de WordPress K>trt outil de création. verstan 3.8.1
u

Agure 5.4 - Les options d'écriture

Vous avez ici la possibilité de choisir la catégorie par défaut des articles
(cette catégorie choisie ne pourra pas être supprimée). Lors de la suppression
5. t l es réglages 91

d'une catégorie, tous ses articles, seront automatiquement intégrés à la


catégorie par défaut.
Avec WordPress, il est possible de publier un article à distance, sans
passer par l'interface d'administration :
• soit par e-mail (vous devez alors définir un compte e-mail secret avec
une adresse POP3 : tout e-mail reçu à cette adresse sera publié) ;
• soit par l'intermédiaire d'un protocole de publication Atom ou l'une
des interfaces de publication XML-RPC.

Options de lecture
Ces options permettent de définir les réglages de la page d'accueil, de la
page qui affiche les articles, de la pagination (nombre d'articles à afficher
sur une page), de l'affichage (extrait ou texte complet) des articles et de leur
encodage, ainsi que du paramétrage des flux RSS (figure 5.5).

Options de lecture

La page d'accueil affiche ® Les derniers articles


O une 1x1ge statique (choisir cl-Oessous>

Page d'accu eil: - Sé~lonner - Y

Page des articles : - Sélectionner - v

Les pages du site doivent


10 articles
afficher au plus

Les nux de syndication


10 éléments
affichent les derniers
-0
0
C:
:::J Pour ch aque article d'lm flux, ® Le texte complet
0 fournir
O L'extrait
s:t
,-i
0
N Visibilité pour les moteurs de D Demand er aux moteurs de recherch e de n e pas indexer ce site
recherche
@ Certains moteurs de recherche pewent dédder de findexer malgré tout
....,
.c
Ol E'lreg1strer les modrficatrons
·;::
>-
c.
0
u Merd de /cure de WordPress votte outil de aéooon. Version 3.8. 1

Figure 5.5 - Les options de lecture


92 Chapitre S. Paramétrag e de WordPress

Exemple : créer une page « Blog " qui va afficher tous les articles
WordPress permet de choisir dans quelle(s) page(s) les articles vont s'afficher.
Par défaut, c'est sur la homepage de votre site, mais vous pouvez également
créer une page« Blog» dans l'espace d'administration. Il suffit ensuite de
choisir cette page pour publier tous les articles de vot re site.

Exemple : choisir une page d'accueil différente du reste du site


Par défaut, la page d'accueil de Word Press affiche les derniers articles
publiés, mais il est tout à fait possible de lui affecter une page que vous
aurez créée auparavant.

Pour ce faire, il suffit de créer une page «Accueil» dans l'espace


d'administration et de lui affecter un modèle de page (nous en parlons
dans la troisième partie, mais sachez dès à présent que sa disposition sera
différente des pages internes). Définissez ensuite cette page comme page
d'accueil et le tour est joué (figure 5.6) !

La page d'accueil affiche O Les derniers articles

@ une page statique (choisir ci-dessous)

Page d'accueil : - Sélectionner - E]


- Sélectionner -
Page des article,lliMil.iiliiailliilii
Ma Page d'exemple

-0 Figure 5.6 - Options de la page d 'accueil


0
C:
:::J
0
s:t
,-i Le thème que vous utilisez joue un rôle primordial. Si vous êtes webde-
0
N signer, une pratique recommandée consiste à créer un modèle de page
@ spécifique à la page d'accueil lors de la création d'un template. Grâce aux
....,
.c « temp late tags » de Word Press, le modèle affichera ce q ue vous voul ez .
Ol
·;::
>-
c.
0
u

Options de discussion
Nous avons déjà détai llé ces réglages dans la section « Paramétrer les
commentaires» du chapitre 3. Pour mémoire, ils permettent de gérer« en
profondeur» les commentaires des internautes.
5. t l es réglages 93

Réglages des médias


Ces réglages permettent de préciser la taille (en pixels) des images du site.
Vous pouvez y régler la taille des miniatures, leur taille moyenne et maximum
(figure 5.7) . À chaque fois que vous allez« uploader » une image, WordPress
créera trois instances de celle-ci dans le fichier« wp-content/uploads ».

Réglages des médias


Taille des images
Les tailles prK1sees ci-dessoos déterm1nent les dimensions maXJmales (en pixels} a utiliser lors de l'1nserbon d'une image dans la bibhothêque de
mêchas.

Taille des miniatures Largeur 150 Hauteur 150


lil Recadrer les images pour parvenir aux dimensions exactes (normalement. les miniatures sont
proporuonn~)

Taille moyenne Largeur maximale 300 Hauteur maximale 300

Grande taille Largeur maximale 1024 Hauteur maximale 1024

Envoi de fichiers

~ o rganiser mes fichiers envoyés dans des dossiers mensuels et annuels

Mera de foire de VlordPress voue outil de créatJon. Version 3.8.1

Figure 5.7 - Réglage des médias

-a Remarque - Ces réglages ne sont pas rétroactifs. Pensez à eux avant d'intégrer
0
C tout le contenu de votre site.
:J
0
'tj"
,-i
0 Ces paramètres prédéfinis seront automatiquement accessibles lors de
N
l' insertion d'une image dans un article ou une page.
@
.....
.!:
Ol
Vous pouvez également limiter la taille des affichages distants (vidéos de
·;::
>- Youtu be ou de Dailymotion, par exemple). Si la largeur est laissée vide, les
a.
0 affichages utiliseront par défaut la largeur maximale de votre thème.
u
Enfin, il est possible de définir l'emplacement où tous les médias
seront téléchargés (téléchargés). Par défaut, ils seront dans le fichier :
« wp -content/u p loa ds » et triés par année/ date.
94 Chapitre S. Paramétrage de WordPress

Moteur de recherche
En bas de l'écran des options de lecture, vous pouvez paramétrer ici la
visibilité de votre site dans les moteurs de recherche (figure 5.8). C'est la
première étape pour un bon référencement.

Visibilité pour les moteurs de D Demander aux moteurs de recherche de ne pas indexer ce site
recherche
Certains moteurs de recherche peuvent décider de /'indexer malgré tout

Figure 5.8 - Panneau de gestion des options de vie privée

Options des permaliens


Les permaliens sont les URL affichées qui serviront de référence à un
article. WordPress offre la possibilité de créer une structure d'adresses
personnalisées pour les permaliens et les archives. Cette fonctionnalité
permet d'améliorer l'esthétique, l'utilisation et la pérennité des liens.
Exemple : soit un article ayant pour titre « Bonjour » catégorisé dans
«news». Par défaut, WordPress va afficher cet article avec cette URL :
http://www.mon-site.com/?p=8
où la variable « p » correspond à l'identifiant de l'article ou de la page.
Or cette URL n'est pas très explicite, ce qui peut nuire au référencement.
Néanmoins, une solution existe : il va s'agir de demander à WordPress
de changer l'affichage de cette URL pour la rendre plus explicite.
WordPress propose plusieurs structures courantes, mais vous pouvez créer
une structure personnalisée en ajoutant les deux marqueurs suivants dans la
-a
0
rubrique prévue à cet effet (figure 5.9) :
C
:J
0 1 /%category%/%postname%/
'tj"
,-i
0
N WordPress va donc d'abord afficher la catégorie de l'article puis son titre.
@ L:'URL se présentera alors désormais sous cette forme :
.....
.!:
Ol http://www.mon-site.com/news/bonjour/
·;::
>-
a. Parfois, lorsqu'on opère un changement sur la structure des permaliens
0
u (ou lors d'une mise à jour), des problèmes d'affichage font leur apparition
(erreur 404 sur les liens). Pour les résoudre, il est conseillé d'appliquer à
nouveau la structure par défaut, puis de revenir à la structure personnalisée.
Cette petite manipulation vous évitera de vous arracher les cheveux.
Pour plus d'informations sur les marqueurs, rendez-vous à l'adresse
suivante : http://codex.wordpress.org/Using_Permalinks
5. t les réglages 95

Options des permaliens


1 Structure des perm•liens enregiStrée.
Par délau~ wordPrffl utilfSe ~ adresses web (URl.) ayant un point d1nterro:ation et une suite de chiffres. cependan~ wordPress vo.,s c
peut .1méliore( t•sthétique.. tutflisition et i. pére;.;é de vos liens. De nombreux marqueurs wnt; di5ponibles (en). et nous VOU$ donnons:

Réglages les plus courants

O Valeur par défaut http://loc,U,ost/oon-s!te/?p•1l3

0 Date et titre http://locelhost:/.on-sitt/2914/61/29/uewiple-e,.t1clti/

0 Mois et titre http: //localhost/.on-site/2914/M/exMpb-ar"'ticle/

0 Numérique htt.p ://localhost/1tOn·site/archives/123

0 Nom de tartkle http: / /localhost/11o.n .. site/exeaplce• a.rticle /

® Structure personnalisée http://localho,t/oon-site /Xotogor~/Xpostna:neX/

Fa.mita.tif

Figure 5.9 - Permalien personnalisé

Comment mettre en place les permaliens ?


Pour un serveur local voir le chapitre 2 « Activer la réécriture d'URL en local
avec WAMP ».
En général, dans le cas d'un hébergement en ligne, vous n'avez rien à
paramétrer. Mais au besoin, voici la marche à suivre.
Votre serveur devra être correctement configuré. Dans le cas contraire,
une page « Not found » ou « erreur 404 » apparaîtra.
1. Premièrement, le serveur doit permettre à WordPress «d'écrire» (de
-0
0
C:
créer) un fichier« .hta ccess » à la racine de WordPress. Vérifiez donc
0
:::J
les droits d'écriture grâce à votre logiciel FTP.
s:t
,-i
0 À titre informatif, voici ce que WordPress va écrire dans le fichier
N
@
« . htaccess » :
....,
.c
Ol
·;:: # BEGIN Wo rdPress
>-
c. <I fModule mod_rewrite .c>
0
u RewriteEngine On
RewriteBase I
RewriteRule Aindex\. ph p$ - [ LJ
RewriteCond %( REOUEST_FILENAME I !-f
RewriteC ond %{ REOUEST_F ILENAMEI !-d
RewriteRule . /index.php [L]
<IIfModule>
# END ~JordPress
96 Chapitre S. Paramétrage de WordPress

2. Deuxièmement, il faut activer le mode« URL rewriting» du serveur:


- Il faut modifier le fichier 11 httpd.conf11 : pour cela, ouvrez-le avec un
éditeur de texte (Notepad + + par exemple), puis cherchez la ligne
contenant« rewrite» :

1 #LoadModule rew rite_module modules/mod_rew rite . so


- Il suffit de décommenter cette ligne en enlevant le caractère«#».
Ce qui donne alors :

1 LoadModule rewrite_module modules/mod_rewrite.so

5.2 LES OUTILS

Leur fonction
Les outils sont une aide pour les webmasters d'un site WordPress
(figure 5.10). Attention, les outils ajoutent des fonctionnalités uniquement
sur votre ordinateur et non à votre site WordPress. Cela signifie que, si
vous installez un outil sur un ordinateur A, il ne sera pas installé sur un
ordinateur B. À ne surtout pas confondre avec les plugins ou les widgets.

-0
0
C:
:::J
0
s:t
,-i
0
N
@
...., Figure 5.10 - Le signet Outils
.c
Ol
·;::
>-
c.
0
u
Principaux usages
Exporter le contenu de votre site
En cliquant sur« Exporter», vous pouvez exporter uniquement vos articles,
pages, commentaires, champs personnalisés, catégories et mots-clés.
5.3 Préparer WordPress : quelques recommandations 91

Une fois que le fichier XML téléchargé a été enregistré, vous pouvez utiliser
la fonction« Importer» d'un autre blog WordPress pour pouvoir importer ce
fichier dans cet autre site.

Importer le contenu de votre site


En cliquant sur« Importer», WordPress peut récupérer certains contenus que
vous avez postés au préalable sur d'autres plates-formes.
Mais l'importation la plus utile est bien entendu l'importation d'un autre
site WordPress (pratique lors d'un déménagement de votre site). Il suffit alors
de télécharger le fichier XML généré (comme lors de l'export précédent) et
WordPress s'occupe du reste. Vous êtes désormais en possession de tout le
contenu de votre ancien site.
Mais attention, ce fichier XML ne contient ni vos plugins, ni vos médias,
ni même votre menu ... Toutefois, s'agissant des images, WordPress essayera
de les récupérer si elles sont encore en ligne sur votre ancien site.

Mettre à jour WordPress


WordPress peut s'occuper lui-même de la mise à jour de votre site WordPress,
ce qui est très pratique. En fonction de votre hébergeur, cette solution
fonctionnera très bien ou pas du tout ...
Attention, mettre à jour WordPress requiert quelques précautions d'usage.
Avant de procéder à une mise à jour automatique, veillez toujours à effectuer
une sauvegarde de votre site (tous les fichiers) et une sauvegarde de votre
base de données. Personne n'est à l'abri d'une mise à jour qui échoue.
Avant de vous lancer dans cette étape, rendez-vous dans la section
« Mettre à jour WordPress » du chapitre 11.
-0
0

-
C:
:::J
0
s:t
,-i
5.3 PREPARER WORDPRESS: QUELQUES
0
N RECOMMANDATIONS
@
....,
.c
Ol
·;::
Vous maîtrisez maintenant l'installation de WordPress ainsi que son adminis-
>-
c. tration. Mais avant de vous lancer à corps perdu dans le développement de
0
u votre site, quelques recommandations s'imposent :
• Activer le plugin Akismet
Akismet permet d'éviter le spam qui risque de contaminer très rapide-
ment vos commentaires. C'est un plugin déjà installé par défaut, et il ne
reste plus qu'à l'activer. Lors de l'activation, un message apparaît vous
demandant une clef API. Suivez alors le lien proposé pour l'obtenir. De
98 Chapitre S. Paramétrage de WordPress

retour dans l'espace d'administration des plugins, insérez-la à l'endroit


adéquat.
• Paramétrer vos permaliens
N'oubliez pas de paramétrer vos permaliens. Ils vous seront utiles pour
la clarté de votre site (ils sont mémorisables) et pour son référencement
(les moteurs de recherches aiment cela !).
• Remplir votre profil
Il est quand même plus agréable et plus « pro» d'avoir son profil
rempli. Si vous ne donnez pas l'exemple, les éventuels autres utilisa-
teurs risquent également d'oublier de le faire. Tous ces renseignements
peuvent être affichés à la fin d'un article (cela dépend du thème). Pour
ce faire, rendez-vous dans la section « utilisateur».
Bien entendu, si votre site ne comporte pas de commentaires (site
vitrine d'une entreprise par exemple) ces informations ne sont pas très
importantes.
• Nettoyer WordPress
Lors de son installation, WordPress insère du contenu fictif : articles,
commentaires, liens ... Effacez-le. Créez vos propres catégories avant
de commencer la rédaction du contenu (ou avant même de créer votre
propre thème).
• S'assurer que l'upload de médias fonctionne et est bien
paramétré.
Vous pouvez uploader une image dans la bibliothèque de médias pour
vous assurer que tout fonctionne bien. Si ce n'est pas le cas, WordPress
vous avertira. La plupart du temps, c'est un problème de droit de fichier.
Il est possible de le résoudre grâce à votre logiciel FTP.
• Créer un deuxième compte administrateur
N'oubliez pas de créer un deuxième compte administrateur (avec
des identifiants extrêmement difficiles à trouver). En effet, si votre
-0
0 premier compte administrateur est piraté, vous pourrez peut-être grâce
C:
:::J à lui accéder à l'espace d'administration, pour sauver votre site de
0
s:t l'attaque.
,-i
0
N
@
Vous pouvez compléter vos connaissances en vous rendant à l'adresse
...., suivante : http://codex.wordpress.org/WordPress_Lessons .
.c
Ol
·;::
>-
c.
0
u
...
TROISIEME PARTIE

WordPress
côté webdesign

-0
0
C:
:::J
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0
u
Copyright© 2014 Dunod.
Comment fonctionne
un thème?

...
6.1 LES THEMES: LEUR ANATOMIE

Prérequis : qu'est-ce qu'un site Internet ?


Cette partie est destinée aux personnes comme les webdesigners qui
souhaitent transformer un thème WordPress graphiquement et fonctionnelle-
ment. Il est donc important de connaître les trois principaux langages que
WordPress utilise, à savoir : HTML, CSS et PHP.

-0 Un site Internet : qu'est-ce que c'est ?


0
C:
:::J Une page dans votre navigateur résulte de plusieurs choses. En général, voici
0
s:t les différents acteurs dans le cas d'un site statique (sans CMS ou gestionnaire
,-i
0
N
de contenu) :
@
...., • Du contenu (texte, images, vidéos, etc.)
.c
Ol
·;::
• Le code HTML : permet de classer sémantiquement le contenu grâce à
>-
c. l'aide de balises (navigation, titre, paragraphe, image, etc.)
0
u • Le code CSS : permet de styler ces balises et donner ainsi une appa-
rence plus ou moins attrayante. C'est également le CSS qui permet
d'adapter graphiquement un site aux appareils mobiles (smartphone,
tablette, etc.)
• Le javascript : permet de sublimer votre site grâce aux animations et
aux événements (diaporama, menu déroulant, ajax, etc.).
102 Chapitre 6. Comment fonctionne un thème ?

On sépare toujours le contenu (HTML) de sa forme (CSS) : utiliser une


balise HTML pour rendre plus gras ou italique un élément est une pratique
dépassée.
Pour éviter le bricolage, il faut être capable de comprendre et de coder
du code HTML et CSS, grâce à un éditeur de texte (comme Notepad+ +,
Sublime Text 2 ou la partie code de Dreamweaver).
Si ce n'est pas le cas: pas de panique. Vous allez pouvoir apprendre
ces langages grâce à de nombreux tutoriels disponibles sur Internet. À la
fin de ce livre, en Annexes, vous trouverez une bibliographie ainsi que des
ressources pour WordPress et le web.

Un template WordPress, qu'est-ce que c'est ?


Sans surprise, c'est exactement la même chose qu'un site classique comme
décrit précédemment. li faut donc également maîtriser HTML / CSS et un
minimum le PHP pour pouvoir créer un thème WordPress.
Pourquoi du PHP?
Dans un premier temps, c'est ce qui permet de rendre un site dit
«statique» dynamique. li n'est plus nécessaire de modifier le code source
HTML / CSS pour mettre à jour le contenu du site. Le PHP fait la passerelle
entre la page HTML et la base de données qui contient tous les contenus
(textes, image, lien vidéo, etc.). Une interface simple permet à n'importe quel
utilisateur de remp lir cette base de données. Voilà le but d'un CMS comme
WordPress ! Les thèmes sont là uniquement pour mettre en forme le contenu
de cette base de données.
Dans un second temps, plus général, le langage PHP permet de simplifier
la façon d'organiser ses fichiers et de créer des algorithmes. Par exemple,
inclure le contenu d'un fichier bidule.php dans dix autres fichiers.php. De
cette façon, il suffira de modifier qu'une seule fois bidule.php.
-0
0
C:
:::J
En résumé:
0
s:t
,-i
• Le PHP permet de rendre le contenu dynamique d'un site en cherchant
0
N
les informations dans une base de données mais il permet également
@ d'utiliser des fonctions qui facilitent le travail.
....,
.c • La base de données Mysql est l'endroit où sont stockées les infor-
Ol
·;::
>- mations (contenus, utilisateurs, liens des images, etc.) d'un site dyna-
c.
0
u mique.

PHPdebase
Contrairement aux langages HTML et CSS, une connaissance avancée
en PHP n'est pas demandée avec WordPress. En revanche, une base
d'algorithmique vous facilitera la chose.
6. t l es thèmes : leur anatomie 103

En résumé:

• Un fichier PHP peut contenir de l'HTML. Il est donc possible qu'un


fichier php ne contienne que de l'HTML !
• Le langage PHP est exécuté uniquement du côté du serveur. Du côté
du client (le visiteur), nous obtenons uniquement le résultat. Il est donc
impossible de voir les codes PHP en regardant le code source d'une
page Web.
• Pour déclarer un code PHP, il faut ouvrir une balise php ( <?php) et
fermer par une autre balise php (?>)
• Connaître les structures conditionnelles« if» et« else »
• Connaître le fonctionnement des boucles« while »
• Savoir créer des variables du type : « $variable = ... » ; Savoir utiliser
des fonctions PHP avec passage d'arguments ou de paramètres.

Si ces éléments ne vous effraient pas, vous comprendrez facilement les


thèmes dans WordPress.

Comment fonctionne un thème ?


Un thème (ou template) permet de changer l'aspect graphique et fonctionnel
d'un site Internet. Le contenu est donc totalement à part: il est dans la base
de données de WordPress.

Un thème va permettre de changer l'apparence (contenu et fonctionnali-


tés) de ce site grâce à plusieurs fichiers PHP.

Ces fichiers PHP, qui peuvent s'imbriquer les uns dans les autres, sont
composés de langage HTML et de fonctions PHP. Le tout est mis en forme
-0
0 grâce à une (ou plusieurs) feuilles de style CSS pou r le côté graphique et
C:
:::J animé avec du JavaScript (voir du Flash).
0
s:t
,-i Il est alors possible de créer des sites très graphiques avec WordPress
0
N comme CMS ! Il nous laisse une liberté totale sur la façon de coder not re
@
...., site. Il nous suffira de mettre du code PHP WordPress au bon endroit pour
.c
Ol
·;::
rendre le contenu statique, vivant. On respecte intrinsèquement la loi de la
>-
c. séparation entre le contenu et la forme décrite plus haut.
0
u
Tous ces fichiers sont placés dans un même et unique répertoire
(figure 6.1 ).
104 Chapitre 6. Comment fonctionne un thème ?

js ~ page.php
languages
1 media.s
'fi s.creenshot.png
~ se.arch.php
style -:i1 searchform.php
~ 404.php ~ sidebar.php
Autres »
~ accueil.php ~singlt.php
Dossitrs " ~ archilft.php '1)styluss
• AlsaWP A ~ author.php
~ js ~cattgory.php
~ commtnts.php
languages
~ foottr.php
m edias
~ fu nctions.php
style ŒJ ] header.php
l.ll.:! index.php
LJ license.txt

Figure 6.1 - Exemple de fichiers d'un Template WordPress

Les fichiers d'un template : qui fait quoi ?


Chaque template est différent. Chacun possède son propre graphisme,
ses propres fonctionnalités, ses propres fichiers, etc. Autrement dit, chacun
possède sa propre identité et chaque auteur de thème choisit sa façon
de faire. Mais tous ces thèmes fonctionnent avec le même principe : la
hiérarchie de fichier. Nous le verrons dans la partie suivante.
Faisons d'abord connaissances avec les fichiers PHP les plus couram-
ment utilisé dans un thème. Ces fichiers PHP sont automatiquement
reconnus par WordPress grâce à leur nom: ces derniers sont donc
réservés.
Il y a quatre types de fichiers dans un thème : les indispensables, les
standards, le fichier functions.php et les vôtres. En vo ici la liste :

-0
• Les indispensables : ce sont ceux qui font partie du noyau. Sans
0 eux, on ne peut pas créer de thèmes :
C:
:::J
0
s:t
index.php : C'est, par défaut, le fichier qui sera appelé en dernier
,-i
0 par WordPress (vous comprendrez avec la hiérarchie de fichier).
N
@ - style.css: C'est le fichier qui va contenir la description de votre
....,
.c thème. Même si vous ne l'utilisez pas pour votre code CSS (ce qui
Ol
·;:: est une bonne chose), il doit être présent.
>-
c.
0 - screenshot.png: C'est l'image d'aperçu de votre thème dans la
u
partie d'administration.
• Les standards: Ils ne sont pas obligatoires, mais on s'en passe
rarement:
single.php: Ce fichier est appelé par WordPress lorsque l'utilisa-
teur veut afficher un article.
6. t les thèmes : leur anatomie 105

- page.php : Ce fichier est appelé lorsqu'une page est affichée.


- category.php : Ce fichier liste une série d'articles, par exemple,
la catégorie« News»).
- comments.php. : Comprend la partie commentaires de votre site.
- search.php. Le template d'affichage des résultats de recherche.
Cette page s'affiche automatiquement après avoir fait une
recherche dans un formulaire de recherche.
- 404.php. La page d'erreur. Elle est appelée automatiquement si
WordPress ne trouve rien.
• Le fichier functions.php : il permet d'ajouter des fonctionnalités
supplémentaires à votre template. Dès l'activation du template, il
se met en route. Par exemple, l'ajout d'une zone de menu, d'une
zone de widget, de meta boxes, d'une interface d'administration
dédiée au template, l'installation et l'activation automatique d'un
plugin ... C'est un fichier important si vous voulez aller plus loin dans
la personnalisation de vos templates.
• Les vôtres : ce sont vos propres fichiers PHP et dossiers que vous
avez créés. En règle générale, ce sont les fichiers de votre intégration
HTML / CSS/ JS Statique avec les fichiers PHP que vous avez créés
vous-même. Quelques exemples :
- header.php: Il contient l'en-tête (doctype, titre, balises méta.) de
votre site. Ce fichier est inclus au début de chaque fichier.
- footer.php : Fichier qui est inclus à la fin de chaque fichier.
- Le dossier des images: Un thème est, dans la majorité des cos,
composé d'images : arrière-plan, logo, puce, bouton ... Il est donc
d'usage de les mettre dans un même fichier.
- Le dossier CSS : contient votre ou vos feuilles de styles.
-0
- Le dossier JS : Qui contient votre ou vos scripts Javascript.
0
C:
:::J
- Un dossier Font : Qui contient vos polices exotiques (éventuelle-
0 ment).
s:t
,-i
0
N Voyons maintenant comment ils peuvent communiquer entre eux !
@
....,
.c
Ol
·;::
>-
Comment ces fichiers travaillent-ils entre eux ?
c.
0
u Les fichiers d'un template «communiquent» entre eux. Les liens classiques
entre les fichiers HTML, JavaScript et CSS sont déjà un premier lien de
communication. Mais PHP nous offre bien d'autres possibilités très sympa-
thiques !
Une des plus puissantes et des plus simples, c'est l'inclusion (fusion) de
plusieurs fichiers. Ce qu'on appelle un « lnclude ».
106 Chapitre 6. Comment fonctionne un thème ?

1 )1 php Pd<)c d t•rreur qudnd unt: url n .-iboul1e p.-.~

comments.php Gabarrtdes commentaires

foo~er ~hç l-ic h1~ 1 a indure .J la fin dt' ch aque hch1er ltern1t:"uro::'." du bodv e-tc )

lunctions.php Fichier qui permet d'ajooter des fonctionnalnés à un thème (menu, widget etc...)

header ptip l 1ch1e r .:i 1ncl,.1re d.Jns ch aque debut de fichie r 1coctype title l1enc:. css )

image.php Gabarit chargé lorsque l'on choisit «Page du fK:hier attaché-» poor agrandir une image

1rr1i )( rhr - f'"~t If' f1c:h1t•r '111 f'",f appf'lr t'n 11 rn1, r tri rt·gl, qt r1 ri I' ( f":.t ,l paqf' d lrfLJfil rlf' ,cnt thfrrH

page.php Gabarit d'une page WordPress

screensho t pnq lmaqe 1IJs tr.1t1ve de .otre theme d ..1ns la zone d adm1r1str.1t1on

search.php Gabarit des résultats du mote<Jr de recherche de Wo<dPress

single.php Gabarit d'un artide WordPress

,1y lt:. cs Fu ll1t r nt (tss tirt' pour 1-1 d t ~c11p! 1on dt volr t:. tht.lllt' N1.I obliJ i '1c1 fl d y 1 1st 11 r .inlrt i odt:.> es~

Figure 6.2 - Liste des principaux fichiers / gabarits d'un thème

Une fusion de plusieurs fichiers PHP permet le résultat d'un seul et même
fichier. Cette fusion est possible grâce à l'utilisation d'une fonction.
Prenons un exemple précis : celui d'un index.php

1~ Î
heoder.php looter.php

lndex.php

I
1 1
-0 sldebor.php
0

:t
C:
:::J
0
s:t
,-i
0
N
@
Î
....,
.c Page html
Ol
·;::
>-
c.
0
u Figure 6.3 - Inclusion de plusieurs fichiers

l'index.php va faire appel à trois fichiers: « header.php » pour l'en-tête,


« sidebar.php » pour la barre latérale et« footer.php » pour le pied de page
(figure 6.3). Le mix de ces pages aura comme résultat final « index.php » qui
affiche une page HTML dans le navigateur.
6. t l es thèmes : leur anatomie 107

Ces appels sont possibles grâce à des fonctions WordPress qui sont
réservées à l'inclusion du contenu des différents fichiers :

1 <?php get_temp l ate_part( ·nom-du- f ichier') ; ?> Il nom-du-fichier . php

Voici en détail les codes sources de chacun des fichiers PHP :

Code source de « header.php »

<!DOCTYP E html>
<head> <tit l e>Titre</title> <meta http-equiv="Content-Type"
content="text/htm l ; charset=UTF -8" !>
<link rel="stylesheet" type="text/css" href="style.css" media="screen"
/)
<lhead><body>

Code source de« footer.php »

<div id="footer ">


<! -- contenu du pied de page -->
<!div>< ! -- footer -- >
<!body>
1 <lhtm l>
Code source de« index.php »

<?php get_temp l ate_part( 1 header'); ?>


<div id="content ">
<! -- contenu principal -- >
<!div>< ! -- content -->
1 <?php get_template_part( 1 footer 1 ) ; ?>

-0 Le fichier« index.php » va donc jouer le rôle de «mixeur» en appelant


0
C:
:::J
les trois autres fichiers PHP à des endroits précis de son code source.
0
s:t
,-i
Ce qui aura pour résultat l'obtention d'une page HTML complète dont
0
N
voici le code source intégral vu du navigateur:
@
...., <!DOCTYP E html>
.c
Ol
·;:: <head> <tit l e>Titre</title> <meta http-equiv="Content-Type"
>-
c. content="text/htm l ; charset=UTF -8" !>
0
u <link rel="stylesheet" type="text/css" href="style.css" media="screen"
/)
<lhead><body>
<div id="content ">
<! -- contenu pr i nc i pal -- >
<!div>< ! -- content -->
<div id=" footer ">
<!-- contenu du pied de page -->
108 Chapitre 6. Comment fonctionne un thème ?

<!div><!-- footer -- >


<!body>
1 <lhtm l >

La hiérarchie des fichiers ou comment WordPress reconnaÎt


les fichiers d'un thème
Nous avons vu précédemment les fichiers de thèmes les plus usuels que
WordPress utilise. Mais comment fait-il pour préférer tel fichier à un autre?
WordPress fonctionne avec un système de hiérarchie pour savoir quel
fichier doit être affiché en priorité. On peut comparer cela à une pyramide
ou un arbre généalogique avec le fichier index.php en bout de chaîne.
WordPress part de tout en bas pour terminer tout en haut: c'est donc le
fichier index.php qui est appelé en dernier si aucun fichier n'est chargé avant.
Il faut bien retenir cette notion !

,.,c,..
,..,..

-a
0 N•i;:~ i--llllllCl::m-Wi L i 155iiiM:M
C
:J
0
'tj"
,-i
..
$1~ 1, Pote

0
N ....
S-.,wl•

@
.....
.!:
Ol
·;::
>-
a.
0
u

Figure 6.4 - « Hiérarchie de template » :


-https://codex.wordpress.org/im ages/1 /1 8/Template_Hierarchy.png
6.2 l es thèmes : boucles et fonctions communes 109

Comment WordPress sait quel fich ier appeler? Il n'y a aucune magie, il
va simplement se baser sur l'URL :
• si l'URL est du type : www.exem p le.com/titre -article, WordPress va
chercher le fichier« single.php ». Si aucun fichier single.php se trouve
dans le thème, ce sera le fichier« index.php » ;
• si l'URL est du type : www.exem p le.com/titre-page, WordPress va
chercher le fichier page.php. Le cas échéant, ce sera toujours not re
« index.php » que WordPress affichera.

Mais rien ne vaut un schéma pou r comprendre simplement le chemin


que WordPress emprunte ! Ce lui-ci est à lire de gauche (What Page) à droite
(index.php).
Pour avoi r un visuel plus détaillé, je vous invite à aller sur ce site
wphierarchy.com
C'est un système simple et terriblement efficace! Il est possible de charger
un gabarit PHP (sans rien faire !) pour chaque catégorie, modèle de page,
custom post type, custom taxonomy... Nous verrons cela plus en détail plus
loin.

..
6.2 LES THEMES : BOUCLES ET FONCTIONS
COMMUNES
Les marqueurs de modèle (template tags)
Les marqueurs de modèle, que l'on va appeler template tags, sont des
fonctions PHP spéciales Wo rdPress. Ces fonctions adressent des résultats
lorsqu'elles sont exécutées par WordPress. Elles vont chercher le contenu
-0 dans la base de données du site.
0
C:
:::J Concrètement, elles permettent d'afficher du contenu ou de le choisir, de
0
s:t
créer des zones« widgetisables » ou encore d'afficher un menu.
,-i
0
N Exemple d'un template tag :
@
...., 1 <?ph p blogin fo ( l; ?>
.c
Ol
·;::
>-
c. Cette fonction WordPress va afficher par défaut le titre de votre site.
0
u Comme toutes fonctions PH P, un template tag peut prendre un ou
plusieurs paramètres. Ceux-ci permettent de choisir, de manière détaillée,
l'action d'une fonction.
Cette fonction WordPress va par exemple afficher l'URL de votre site Web :

1 <?ph p bl oginfo( ' url ' ) ; ?>


110 Chapitre 6. Comment fonctionne un thème ?

PHP *

Template WordPress Base de données

• HTML, CSS, PHP... Articles, pages,


contenu ...

*• templat e tags -

Figure 6.5 - Template tags : fonctions PHP WordPress pour piocher des infos
dans la base de données

Une petite recherche dans le codex (http://codex.wordpress.org) de


WordPress permettra de savoir quel paramètre est utilisable pour chaque
fonction. Abusez-en ! Nous allons en utiliser d'autres dans la suite du livre.
Par exemple, pour les paramètres de b l ogi nfo () , voir :
http://codex.wordpress.org/Template_Tags/bloginfo.

Les fondions PHP WordPress (function reference)


Vous allez parfois trouver des fonctions au nom similaire.
Voici un exemple pour comprendre cette subtile différence entre un
« template tag » et une « Function reference » :
-a 1. get_ bl ogi nfo() - Function Reference
0
C
:J
0 2. bl og i nfo () - Template Tags
'tj"
,-i
0
N
bl ogi nfo() : Va afficher un lien (suivant son paramètre) dans le code
@ HTML. Nous allons voir directement son résultat.
.....
.!:
Ol
·;::
ge t _ bl ogi nfo() : Cette fonction fait le même travail, mais n'affiche rien
>-
a. dans une page PHP ou HTML. Il faudra user d' une variable et d'un
0
u ec ho( ) pour faire cela.
Ces fonctions WordPress (function reference), n'affichent rien mais
retournent des valeurs que l'on peut stocker dans une variable PHP.
Contrairement aux template tags qui eux retournent un résu ltat visible.Vous
n'en aurez pas forcément besoin, mais c'est très pratique quand le besoin
s'en fait sentir!
6.2 l es thèmes : boucles et fonctions communes 111

Boucle standard WordPress Uoop)


La boucle, c'est le cœur de WordPress. Mais avant de passer à WordPress,
rappelons ce qu'est une boucle en langage informatique.
• Voici une boucle« for » dans son plus simple appareil :

for ( $compteur= l ; $compteur<= 5; $compteur+= ll l


echo $compteur;
1 }

Explication : le code situé entre les accolades { .. } va être répété n fois (ici
cinq fois).
• Voici un autre type de boucle, la boucle « while » :

$compteur= l;
whi le ( $compteur<= 5 l {
$compteur+= l ;
1 }

Explication : on ajoute« + 1 » à la variable« $compteur» tant que celle-ci


n'a pas atteint le nombre 5.
Passons maintenant à la boucle dans WordPress.
Une boucle WordPress (appelée /oop) parcourt la base de données du
site WordPress. En fonction de la manière dont cette boucle a été codée,
elle affichera le contenu désiré : page, article, catégorie, titre, lien « Lire la
suite», etc.
À l'intérieur d'une boucle, il est possible :
• d'insérer son propre code HTML histoire de contrôler l'affichage du
-0 contenu;
0
C:
:::J • d'insérer des marqueurs de modèle (template tags) ;
0
s:t • d'insérer des fonctions PHP (function reference).
,-i
0
N
Voyons maintenant le code WordPress. Voilà à quoi ressemble une boucle
@
...., WordPress standard :
.c
Ol
·;::
>-
c. <! - - Boucle - ->
0
u <?php if ( have_posts() ) : ?>
<?php whi le ( have_posts ( l ) : the_post( l; ?>
<!-- contenu de la boucle -->
<h2> <?php the_t i t le ( l ; ?> </h2>
<?php the_content(); ?>
<!-- Fin contenu de la boucle -->
<?php endwhi le;?>
<?php el se : ?>
112 Chapitre 6. Comment fonctionne un thème ?

<!- -Si l a bouc l e n' aff i che rien-- >


<p>Aucun r ésu l tat <l p>
<?ph p en dif ; ?>
1 <!-- Fi n bouc l e -- >

Explication étape par étape :


• L:'algorithme commence avec une condition («if») : s'il y a du contenu
(a rticle, page, etc.), la boucle démarre. Dans le cas contraire, elle ne
démarre pas.
• Lo rsque la cond ition est remplie, on a joute une boucle « while » : tant
que la fonction have_posts () retourne la valeur « true » (en d'autres
termes, tant qu'il y a du contenu à afficher), le contenu de la boucle se
répète. Dans le cas contraire, « Aucun résultat» s'affiche.
• Le co ntenu de cette boucle est composé de code HTML et de fonctions
(template tags). Le titre est sorti grâce à the_titl e() et est affiché entre
des balises <h2>. La fonction t he_content() affiche alors le contenu
p rincipal.

Une bou cle WordPress pou rra it se résumer a insi : tant qu'il y a du contenu,
la boucle l'affiche suivant nos goûts. Une boucle, c'est un mix de code HTML
et de fonctions PHP WordPress.
Peu importe le thème et les nombreuses variantes d'une boucle. Une
boucle est un moyen d ' interroger la base de données de WordPress, puis
d'afficher le résultat de cette requête.
Pour comprendre la notion de boucle : si la boucle doit afficher trois
a rticles, le contenu de cette boucle sera affiché trois fois. La boucle n'affiche
donc que ce qu'elle t rouve dans la base de données.

Remarque - Il est possible d' insérer plusieurs boucles dans un même fichier.
Nous en parlons plus lo in.
-0
0
C
:J
Vous connaissez maintenant les principaux rouages de WordPress pour
0 afficher le contenu de votre site.
'tj"
,-i
0
N
@
..... Fonctions communes dans une boucle
.!:
Ol
·;::
>-
Certaines fonctions ne sont utilisables qu'à l'intérieur d'une boucle. Ces
a.
0 fonctions vont donc agir autant de fois que la boucle se répète.
u
Voici une sélection des fonctions les plus utilisées :
• the_t it l e () . Récupère et affiche le titre de chaque article (ou de la
page) courant.
• th e_co nt ent (). Récupère et affiche le contenu principal de chaque
article courant.
6.2 les thèmes : boucles et fonctions communes 113

• the_permal i nk( ) . Récupère et affiche l'URL de chaque a rt icle courant.


• the_ti me ( ) . Récupère et affiche la date de création pour chaque article
courant.
• post_c l ass (): Permet à WordPress d'imprimer ses propres classes et
identifiant CSS. t he_ID( ) . Récupère et affiche l'identifiant de chaque
article.

D'autres éléments apparaissent à l'intérieur d'une boucle. Notamment


l'objet $pos t qui contient des données extrêmement utiles. Nous y consacrons
une partie un peu plus loin dans ce livre.

Fondions communes hors d'une boucle


S'il existe des fonctions pour l'intérieur des boucles, il y en existe aussi pour
l'extérieur des boucles. Ces fonctions n'ont pas forcément un rapport direct
avec le contenu affiché. Voici les plus communes :
• get_templ ate_part ( ): Permet d'insérer le contenu de n'importe quel
autre fichier PHP du thème.
• wp_na v_me nu( ): Permet d'afficher un menu de navigation (créé précé-
demment dans le back office).
• b1ogi nfo() : Permet d'afficher des informations relatives à votre site
comme son ou ses URL (entre autres).

Personnaliser une boucle avec query_postsO


La fonction query_posts() permet de paramétrer une boucle très facilement.
La figure 6.6 illustre un exemple de structure :
-0
0
C:
:::J Le code suivant illustre quant à lui un exemple de personnalisation avec
0
s:t
query_posts() :
,-i
0
N
<?php
@
...., Il On personna l ise la boucle avec query_posts( )
.c query_posts( ' showposts=5 1 l; Il Pa ramèt re: on n'affiche que 5 articles
Ol
·;::
>- Il La boucle qui affichera 5 artic les
c. if (have_posts()l : 1~hile (have_posts()) : the_post() ; ?>
0
u <! -- contenu de la bouc le -- >
<?php endwhi l e; el se : ?>
<?php end i f; ?>
<?php
Il Remis e à zé ro de la requête
wp_reset_query(l;
?>
114 Chapitre 6. Comment fonctionne un thème ?

contrôle Ç : <i ver ~_pos ~sO

'

wp_rese~ -c:iver~O

Figure 6.6 - « Emprise » de query _pos t s( ) sur une boucle

L'instruction wp_reset_query() est utilisée à la fin de query_posts( ) et avant


une autre query_posts( ) . Cela permet en effet d'éviter des dysfonctionne-
ments lorsqu'il y a plusieurs boucles sous« l'emprise» d'une query_posts()
dans un même fichier.
Ses paramètres sont nombreux. La fonction que ry_posts() peut en avoir
plusieurs grâce à un tableau. En effet, un tableau permet de contenir
plusieu rs types de variables. C'est une façon différente de passe r des
paramètres à une fonction : plus pratique et plus lisible que de passer des
paramètres à la chaine.

À savoir - Par défaut, une boucle standard affiche les articles dans un ordre
chronologiquement inverse (l'article le plus récent en premier).
Voici deux exemples :
-a
0
C
que ry_posts(array(
:J
0
' cat => 5,
'tj" 'posts_per_page'=> 4
,-i
0
));
N <!-- insé rez la boucle ici -->
@
.....
.!:
Ol Description : la boucle va afficher quatre articles de la catégorie ayant comme
·;::
>- identifiant 5.
a.
0
u que ry_posts(array(
1 cat 1 => 22 ,
1
mont hnum' => $c urrent_month ,
'order1 => 1ASC1 ,
));
<! -- ins érez la boucle ici -- >
6.2 l es thèmes : boucles et fonctions communes 115

Description : la boucle va afficher les articles de la catégorie ayant comme


identifian t 22 du mois actuel et afficher les articles chronologiquement (du
plus ancien au plus récent).

Bien entendu, il est possible de gérer plusieurs boucles personnalisées


dans un même fichier, ce qui fait d'ailleurs tout l'intérêt de l'instruction
wp_reset_qu ery () , comme nous l'avons vu précédemment.
Pour plus d'informations sur query_posts( ), vous pouvez une fois encore
consulter le codex de Wo rdPress, en vous rendant à l'adresse suivante :
http://codex.wordpress.org/Template_Tags/query_posts.

Note - Les plus méticuleux d'entre vous peuven t utiliser plusieurs syntaxes
pour cumuler des arguments à une fonction. Voici deux syntaxes différen rtes
pour le même résultat :
Syntaxe 1 : tout dans une même ligne
$accroc he ->query( 1 posts_per_page=l&category_name=blog 1 ) ;
Syntaxe 2 : utilisation d'un tableau
$accroc he ->query(array(
1
posts_per_page 1 =>l, // nombre d articles
'category_name =>' blog'. //choix de la catégor ie
));

Utiliser plusieurs boucles


Reprenons l'exemple d'un index.php (figure 6.7).
Il est tout à fait envisageable d ' avoir plusieurs boucles dans un même
fichier PH P. Pour reprendre l'exemple p récédent, imaginons que index.php
-a affiche le contenu p rincipal et le contenu de la sidebar, sans faire appel à
0
C un fichier PHP externe.
:J
0
'tj" Nous aurions donc une boucle qui afficherait le contenu principal et une
,-i
0 autre qui afficherait les articles les plus populaires. Chaque boucle étant
N
@ placée à l'endroit où el le affiche leur résu ltat.
.....
.!:
Ol Avec des boucles contrôlées par la fonction query_posts( ) , il ne faut
·;::
>-
a.
surtout pas oublier de borner chaque boucle avec wp_reset_query() . Qu'elles
0
u soient placées dans un fichier externe ou non.
Voici un exemple de deux boucles dans un même fichier :

<! -- premiè re bouc l e -- >


<?ph p que ry_posts( ..... ) ;
if ( have_posts(l l : while (have_posts()) the_post(): ?>
1 <!-- conten u de l a boucl e -->
116 Chapitre 6. Comment fonctionne un thème ?

header.php

foo~er.php

Figure 6.7 - lndex.php faisant appel à trois autres fichiers PHP externes

<?php endwhi le ; else : ?>


<?php endif;
wp_reset_query(l;
?>
<! -- deuxième bouc le -- >
<? ph p query_posts( . .... ) ;
if (have_posts()l : whi le (have_posts()l the_post(); ?>
<! -- contenu de l a boucl e -->
<?ph p en dwh i le ; else: ?>
<?php endif ;
wp_reset_que ry () ;
?>
-0
0
C:

0
:::J ,
s:t
,-i
6.3 WORDPRESS : FONCTIONNEMENT AVANCE
0
N
@
...., Obiets, méthodes et paramètres
.c
Ol
·;::
>- Avant d'aborder l'utilisation des objets PHP, voici un bref rappel de leur
c.
0 fonctionnement dans WordPress.
u
Pour créer un objet, nous avons besoin d'un constructeur. À cet objet, il
est possible d'attribuer une méthode. Cette méthode accepte des paramètres
(figure 6.8).
Lorsque nous sommes en possession d'un objet, il est possible de créer
une boucle à partir de cet objet. Concrètement, cela ressemble à ceci :
6 .3 Wordpress : fonctionnement avancé 117

boucle

Figure 6.8 - Schéma explicatif d'un objet

<?php
$objet= new nom -fonction() ; // on construit l'ob jet
$objet->methode( 1parametre 1 ); / / on attribue une méthode à l 'objet
1~hile($objet->have_posts()) : $ objet ->the_post();
<! -- contenu de la bouc l e -- >
<?php endwhi l e ; ?>
?>

Nous allons examiner les objets à travers deux exemples: l'objet $post et
-a
0 l'objet de WP _Ouery() .
C
:J
0 Vous n'avez pas d'inquiétude à avoir si cela vous paraît flou ou compliqué.
'tj"
,-i
0
Rappelez-vous que tous les codes sources fonctionnent tels quels. Un simple
N
copier/coller permet de les faire fonctionner.
@
.....
.!:
Ol
·;::
>-
a.
0
La boucle et I'obiet $post
u
L'objet $post est disponible dès que la fonction the_post() est exécutée
(toujours au moment du lancement de la boucle). $post est donc uniquement
disponible à l'intérieur d'une boucle.
L'objet $post permet de récupérer des informations très utiles concernant
l'article courant. Voici quelques-uns de ses paramètres:
118 Chapitre 6. Comment fonctionne un thème ?

• $post-> ID. Retourne l'identifiant de l'article courant. Utile si vous deviez


afficher uniquement cet article dans une boucle.
• $post ->post_content. Retourne le contenu principal de l'article (ou de
la page).
• $post->post_titl e. Retourne le titre de l'art icle courant.
• $post ->comment_count. Retourne le nombre de commentaires d'un
article.
• $post->post_modifi ed. Retourne la date de modification d'un article.
• $post ->post_type. Retourne le type: page ou article?
• $post ->post_category. Retourne l'identifiant de la catégorie qui contient
l'art icle courant.

Attention, $pos t n'affiche rien. Si vous voulez afficher l'une de ses valeurs,
il vous faudra utiliser la fonction php éc ho () , comme dans l'exemple
suivant :

<! - - Bouc le - ->

<?p hp whi l e ( have_posts () ) : t he_post( l; ?>


<?p hp ech o($post ->ID) ?> Il af fic hera 11 10 de l'artic l e
<? ph p endwhi l e; else : ?>

<! -- Fi n bouc le-->

Personnaliser une boucle avec un obiet de WP_QueryO


Comme query_posts( ), vJ P_Query() va permettre de contrôler une boucle
(figure 6.9).
Les puristes diront que query_posts () est uniquement réservée à la boucle
principale. Il faudrait donc utiliser WP_Ouery() lorsque l'on crée une autre
-0
0 boucle totalement différente de la principale. En réalité, cela fonctionne
C
:J
0
également très bien avec que ry_posts( ) ...
'tj"
,-i Concrètement, cela ressemble à ceci :
0
N
@ <?p hp
..... $o bj et= new WP_Que ry(); Il $obj et est un obj et de WP_Query()
.!:
Ol
·;:: $objet ->que ry( ' posts_pe r_page=2' ) ; Il query est une méthode de
>-
a. ~JP_Que ry()
0 Il l a bouc le dépend de Sobj et
u
wh i le ( Sobj et ->have_pos ts ()) : Sobj et ->the_pos t () ; ?>
<! -- cont enu de la bouc l e -->
<?p hp endwhi le ; ?>

Remarque - Pour connaître les méthodes que peut utiliser un objet de


WP_Ouery( ), il suffit de regarder les paramètres de query_pos t s ( ). Les méthodes
6 .3 Wordpress : fonctionnement avancé 119

' WP _G.ver~O
contrôle

Figure 6 .9 - }/P_Query( l contrôle sa propre boucle

d'un objet de WP _Query() utilisent les mêmes paramètres que ceux de


query_posts ( ) .

Pour plus de détails et pou r obteni r la liste des méthodes de WP _Query () ,


vorr:
http://codex.wordpress.org/Function _ Reference/WP_ Query.
Pour les paramètres d'un objet de WP _Query () , voir:
http://codex.wordpress.org/Template_Tags/query_posts.

Interagir avec la base de données WordPress


Si vous êtes à l'aise avec les requêtes SQL, il vous sera facile de créer de
toutes pièces vos propres boucles.
-a
0
C
WordPress propose une classe qui se nomme $wpdb . Celle-ci permet
:J
0 d'interroger la base de données avec des requêtes SQL et de récupérer les
'tj"
,-i
résultats.
0
N
Voici un exemple commun d'utilisation :
@
.....
.!:
Ol
·;::
Sfivesdrafts = Swpdb->get_resu l ts("S ELECT ID, post_title FROM Swpdb ->posts
>-
a.
WHERE post_s ta t us = 1 draft 1 AND post_aut ho r = 5"1 ;
0
u
foreac h (Sf i vesdrafts as $b idule) (
echo $b i dule ->post_tit le;
1
Explications : dans un p remier temps, les résultats de la requête sont
stockés dans une variable. Puis, on crée une boucle « fo reach » basée sur
cette variable, pour afficher le contenu.
120 Chapitre 6. Comment fonctionne un thème ?

Une boucle « foreach » est un moyen simple de passer en revue un


tableau : à chaque itération, la valeur de l'élément courant est assignée à
une variable.
Pour plus d'informations, voir :
http://codex.wordpress.org/Fu nction_ Reference/wpdh_ Class .

..
6.4 WORDPRESS : L'ENVERS DU DECOR

WordPress et les URL


D'ordinaire, lors du développement d'un site web, des liens relatifs pour les
images, les CSS ou encore les fichiers JavaScript sont utilisés. li faut entendre
ici « relatif» comme « relatif au fichier HTML ».
Or WordPress fonctionne uniquement avec des URL absolues et ignore
les liens relatifs. Il n'est donc pas possible de les utiliser dans un thème. Ainsi,
il ne sera pas possible d'écrire un lien sous cette forme:

1 /images/exemp l e-image . jpg


Seule celle-ci sera tolérée par WordPress :

ht tp : //www .mon -site .com/ wp-content/themes/nom_du_theme/images/exemple -


1 image .jpg

Ce n'est pas très pratique, mais heureusement, WordPress dispose d'un


fameux template tag appelé blog i nfo{) qui retourne une URL, en fonction
du paramètre fourni.
Ainsi, la ligne suivante affiche l'URL de votre site. Ici : http://www.mon-
site.com:
-0
0
C: 1 <?ph p blogi nfo( 'u rl ' l; ?>
:::J
0
s:t
,-i
Tandis que celle-ci affiche le chemin complet du fichier contenant le
0
N
thème. Ici:
@ http://www.mon-site.com/wp-content/themes/nom_du_theme/:
....,
.c
Ol
·;:: 1 <?php bl oginfo (' template_ur l') ; ?>
>-
c.
0
u Il sera donc nécessaire d'ajouter à vos liens relatifs cette dernière
fonction ; ce qui donnera :

1 <?php bl oginfo (' template_ur l') ; ?>limages/exemple-image.jpg


Pour plus d'informations sur bl og i nfo( ), voir:
http://codex.wordpress.org/Template_Tags/bloginfo.
6.4 Wordpress : l'envers du décor 121

WordPress et sa base de données


Nous avons souvent évoqué la base de données de WordPress; elle contient
tout le contenu du site : texte, lien des images, lien vidéo ... mais également
les utilisateurs, leurs préférences, les commentaires, etc.
Mettons une image sur tout cela. Direction phpMyAdmin pour voir ce
que cache cette base de données (Figure 6.10). Pour rappel , une base de
données contient plusieurs tables de données.

phpMyAdmln
~1ll-'{l (i°' 4t ~ Structure Q SQl "' Rechercher ] Requête g Exporter "' plus

1 (Tabl•sréc•ntes)... BI Table .. Act.Ion Ug

D wp_commentmela Ê] Afficher ],ti Structu1e --t Rechercher jt Insérer ti Vider O Suppnmer


0 wp_comments El Mçher j { S;ructure -t Rechetcher !< ln$erer W Vider O Suppnmer
D wp_Unks I!:) Afficher }fi Structure -t Rechercher !°' lnséfer fi Vider O Supprimer
D wp_opt.ioos [] Affiche, }1' Structu,e t Reehé'1che1 !'C lnsére, i;l Vider O Suppume,
D wp_postmeto ff:J Afficher }6 Structure '-* R~hercher j,i lnsêrer Ïf Vider O Sttpprimer
D wp_posts O Afficher y( Structu1e --t Rochercher jt lns4fer WVider O Supprinaer
D wp_terms lâl Afficher }fi Structure I Recherche, Ji Insérer WVider O Stippnmer
Cl wp_term_relation$hip, EJ Mcher Jlt Structure -t Rechercher ?t lnsêter jl:Vi<Ser , , &lppnmer
D wp_term_taxonomy 1B Afficher }tj Structure .._. Rechercher ji lnsé,er tÏtVidor O Supprimer
O wp usennetil (::.:;I Afficher a,t Structu1e -t Rechercher !'i- lnsê,er if Vider O Suppomer
D wp_usc" I!] Afflcher }fi Structure ..t Rechercher i i lnsé<er ii'Vidcr O Supprimer
11 lables Somme

L 0Toutc.ocher I Pourladlection : @1
e Version ,mpnmable A O,chonnaue de donnêes
( ' e. U U • ll 1

Figure 6.10 - \./P _Query () Tables de données après installation de WordPress

Une installation vierge de WordPress contient exactement 11 tables de


données : pour les pages, articles, utilisateurs, commentaires, etc. Dès lors
que vous allez ajouter des plugins, il y a de grandes chances que ces
-0
0
derniers en créent de supplémentaires, avec les risques de ralentissement et
C:
:::J de sécurité qui vont avec. Faites attention !
0
s:t
,-i
0
N Trucs et astuces pour réussir son template
@
....,
.c
Ol
Mettre son propre contenu
·;::
>-
c. Comme nous l'avons vu au chapitre 2, WordPress inclut automatiquement
0
u du contenu fictif lors de son installation. Il est préférable de le supprimer
afin de créer le sien propre : catégorie, article, page ... et de remplir tous les
champs.
De cette façon, vous ne perdrez plus de temps à vous demander: « Mais
quel est ce contenu ? Est-ce un article ? Est-ce une page ? ». Travailler dans
un environnement que l'on maîtrise permet de gagner en confiance.
122 Chapitre 6. Comment fonctionne un thème ?

Optimiser son poids


Ce qui est le plus « lourd» dans un template, ce sont les images utilisées
pour son design : images d'arrière-plan, ombrage, boutons, etc.
La rapidité d'affichage étant un critère déterminant pour les visiteurs (et
pour Google), votre thème doit être à la hauteur. Dès lors, faites faire un
régime à vos images !
Si vous utilisez Photoshop, rendez-vous dans le menu « Fichier > Enre-
gistrer pour le Web et les périphériques». Une fenêtre apparaît alors. En
haut à droite, vous pouvez choisir le format de l'image (png, jpeg ... ). Il est
également possible de choisir la qualité. Mais attention, plus elle sera haute,
plus votre image sera lourde ! Veillez donc à optimiser la qualité des images
en fonction de vos besoins.

Ne jamais avoir une confiance absolue dans les utilisateurs


Imaginez toujou rs le pi re. Ne jamais penser que l'utilisateur final « va savoir
faire». Comme pour les templates publics, votre design doit être flexible.
Imaginez qu'un utilisateur mette 250 liens dans votre barre latérale : il faut
que le design du site (l'intégration HTML/CSS) tienne le coup.

Avoir un cahier des charges précis


Si vous travaillez pour un client (ou autre), il est important qu'il définisse
aussi clairement que possible les fonctionnalités qu'il attend de son site :
nombre de rubriques à créer (cela vous aidera à gérer l'espace dans le
menu horizontal), développement de plugins complexes, etc.
Certains clients pensent qu'un CMS est un outil magique qui permettrait
de tout faire. Ils n'ont pas vraiment tort ... Néanmoins, le développement
-0
de fonctionnalités précises peut demander beaucoup de temps et donc
0
C: beaucoup d'argent (et là généralement, les clients aiment moins ... ).
:::J
0
s:t
,-i
0 Livrer un mode d'emploi
N
@ Pour rassurer et accompagner l'utilisateur final, n'oubliez pas d'ajouter à
....,
.c votre thème un mode d'emploi personnalisé. C'est courtois, rassurant et utile,
Ol
·;::
>- surtout si votre thème est doté de fonctionna lités qui ne sont pas standard.
c.
0
u De plus, ce mode d'emploi vous servira de« pense-bête», si d'aventure
votre client devait vous recontacter plus tard, pour un dysfonctionnement ou
pour une demande de mise à jour.
Comment créer
son propre thème ?

... ..
7 .1 BOITE A OUTILS

Pour créer un thème WordPress, vous aurez besoin des mêmes outils que
pour la création d'un site Internet. Le minimum requis se résumant à un
navigateur Internet et à un éditeur de texte.
Pour gagner en confort, en rapidité et en qualité, voici la boîte à outils
-a du « parfait petit webdesigner ».
0
C
:J
0
'tj" Remarque importante : tous les codes sont disponibles sur la page dédiée au
,-i
0 livre sur www.dunod.com pour faciliter le copier/ coller.
N
@
..... 1. Le navigateur Internet Firefox + d es modules
.!:
Ol
·;:: Mozilla Firefox possède de nombreux modules complémentaires,
>-
a.
0 comme« Firebug »et« Web Developer », qui permettent de simplifier
u
la vie des webdesigners.
• Firebug permet d'inspecter scrupuleusement le code source d'une
page HTML, directement dans le navigateur, en survolant les différents
éléments. Grâce à lui, les styles CSS qui sont associés à un élément
sont visibles du premier coup d'œil. Mais surtout, le code sou rce peut
être édité« en direct» ! Vous pourrez le télécharger en suivant ce lien :
124 Chapitre 7. Comment créer son propre thème ?

https://addons. mozilla .org/fr/fi refox/ addon/1 843/.


• Web Developer ajoute quant à lui une barre d'outils à Firefox. Grâce
à ce module, vous pourrez par exemple, redimensionner la fenêtre du
navigateur à votre guise, désactiver les CSS ou le Javascript et valider
les CSS ou l'HTML d'un simple clic. Vous pourrez le télécha rger en
suivant ce lien : https://addons.mozilla.org/fr/firefox/addon/60/.
2. Un éditeur de texte : NotePad + + ou sublime text 2
En plus de disposer des fonctions de base d'un bon éditeur de
texte (coloration syntaxique du langage, choix de l'encodage ... ), ils
permettent tous deux le partage de l'écran en deux parties (par
exemple). Il est en effet très pratique d'avoir, sur le même écran,
d'un côté un document HTML et de l'autre un document CSS.
Vous trouverez NotePad + + à l'adresse suivante : http://notepad-plus.
sourceforge.net/fr/site.htm. et sublime text 2 à celle-ci : http://www.
sublimetext.com/2
3. Tester sur plusieurs navigateurs
Pour s'assurer de la compatibilité de votre site sur plusieurs naviga-
teurs, n'oubliez pas de tous les tester. Si votre site s'affiche correcte-
ment sur Firefox, Internet Explorer, Chrome, Opera et Safari, c'est
déjà très bien !
4. Un logiciel d'infographie
Un webdesigner doit pouvoir découper la maquette d'un infographiste
rapidement et précisément. Si vous avez les moyens de les acquérir,
Photoshop ou Fireworks sont les références dans ce domaine. Mais
des logiciels gratuits comme GIMP existent également.
5. Les indispensables
Vous devrez également posséder un logiciel FTP (comme FileZilla) et
un serveur local (comme WAMP).
-0
0
C:

0
:::J
,,. ..
s:t
,-i 7.2 METHODE A SUIVRE
0
N
@
....,
.c
Précisions
Ol
·;::
>-
c. Cette rubrique propose une feuille de route pour mener à bien la création
0
u d'un site Internet sous WordPress, de A à Z. Même si vous n'allez vous
occuper que d'une partie précise, il est important d'avoir une vue d'ensemble
d'un projet: cela revient à savoir d'où l'on vient pour savoir où l'on va ...
Dans la section « Tutoriel : réaliser le Template AlsaWP », qui se situe à
la fin de cette troisième partie, au chapitre 8, vous trouverez une mise en
œuvre détaillée de cette méthode.
7.2 Méthode à suivre 125

Création du design
Nous pourrions écrire un livre entier dédié à ce thème aussi vaste que
passionnant. Nous n'en avons pas le temps, mais rien ne nous empêche,
pendant quelques instants, de nous mettre à la place d'un infographiste.
La charte graphique d'un site Internet doit répondre à un cahier des
charges spécifique. Celui-ci va bien entendu changer en fonction des
besoins du client : e-commerce, site institutionnel, site vitrine, magazine,
blog ... Néanmoins, ces sites ont ceci de commun qu'ils suivent quelques
«tendances» actuelles, que nous présentons ci-après.

One page layout


Une des tendances actuelles consiste à créer des sites « carte de visite» où
l'ensemble du site est contenu sur une seule et unique page. L'approche est
plutôt minimaliste, mais avec une « pincée» de JavaScript, on peut en faire
défiler le contenu (figure 7.1 ).

Figure 7 .1 - Exemples de sites « One page layout »

-a
0
C
:J Le minimalisme
0
'tj"
,-i Une autre tendance est le recours au minimalisme, mais celui-ci devient
0
N désormais «chaud» et va contenir des couleurs fraîches et beaucoup
@ d'espace (figure 7.2). On l'appel plus communément le «fiat design» .
.....
.!:
Ol
·;::
>-
a.
0 Des headers qui en mettent plein la vue
u
Laisser vos en-têtes respirer, s'exprimer! N'hésitez pas pour cela à prendre
toute la largeur et la hauteur de la page.
La première impression étant la plus importante, optimisez vos en-têtes :
faites de la place pour au moins une illustration (photo, composition ou
dessin) digne de ce nom, un gros logo et le menu principal.
126 Chapitre 7. Comment créer son propre thème ?

___
We are Sofa
_.,..._._

Figure 7.2 - Exemples de sites minimalistes

En fonction du site, ce header surdimensionné ne sera présent que dans


la page d'accueil (figure 7 .3). Les pages internes auront quant à elles une
version moins « haute», pour favoriser la lecture.

Figure 7 .3 - Exemples de headers

les textures pour l'ambiance


Les sites texturés donnent une ambiance plus marquée. On pourra les utiliser
aussi bien pour des détails que pour l'ensemble du site (figure 7.4).
-a
0
C
:J
Un élément incontournable si vous voulez ajouter une plus-value à votre
0 site!
'tj"
,-i
0

.
N
@
.....
.!:
Ol
·;::
>-
a.
0
u
cafbon·offsets

Figure 7.4 - Exemples de textures


7.2 Méthode à suivre 127

Des footers imposants


Tout comme les headers, les footers vont devenir plus riches : réseaux
sociaux, Flickr, informations personnelles, formulaires de contact, newsletters
(figure 7 .5). On peut même se demander s'ils ne vont pas finir un jour par
remplacer le contenu principal. ..

Figure 7 .5 - Exemples de footers

La typographie
N'hésitez plus à utiliser la typographie comme élément principal du design
de votre site. Respectez l'alignement, testez de nouvelles polices, amusez-
vous avec : c'est le moment de les «tordre» dans tous les sens !
Grâce à la propriété CSS FontFace est un jeu d'enfant! (figure 7.6).

-a
0
C
:J
0
'tj"
,-i
0
N
@
.....
.!:
Ol Figure 7 .6 - Les choix typographiques
·;::
>-
a.
0
u

Des images énormes


Les grandes images ont leur intérêt: elles vont être utilisées pour inviter le
visiteur à effectuer une action, comme suivre un compte Twitter. Elles vont
également permettre de mettre en avant une rubrique (figure 7. 7).
128 Chapitre 7. Comment créer son propre thème ?

Figure 7.7 - De grandes images

La disposition « magazine »
Les magazines sont de plus en plus présents sur le Web et les blogs ont
tendance à leur ressembler de plus en plus, s'affranchissant ainsi d'un
design et d'une disposition simplistes qui, fort heureusement, ont tendance
à disparaître (figure 7 .8).

r:r:1 CREATIVE
L.!lAJ REVIEW

,,._

Figure 7.8 - La disposition« magazine»

Le dessin « fait main »


-a
0
C Afin d'apporter une touche d'authenticité à votre design, utilisez le « fait
:J
0 main» (figure 7.9).
'tj"
,-i
0
N
@
.....
.!:
Ol
·;::
>-
a.
0
u

Figure 7.9 - Un exemple de dessin« fait main»


7.2 Méthode à suivre 129

Mixez les perspectives


N'hésitez plus à mélanger les perspectives pour apporter de la profondeur
(figure 7.10).

,.......
-...,,,.._
i.. . . . . .

kout 3.0
· r 1v .d 1 ..."' cures. easv as e~

Figure 7 .10 - Mix des perspectives

Utilisez un système de grille


Dernier conseil d'infographiste : essayez de réaliser votre design avec un
système de «grille». Il vous permettra d'obtenir une maquette équilibrée
(figure 7.11 ). Vous trouverez un exemple de grille en suivant ce lien :
http://960.gs.

Intégration statique en HTML/CSS


La maquette du site étant prête, il est temps de l'intégrer en HTML/CSS.
Pour les non connaisseurs: il s'agit ici de transformer une image en une
page HTML fonctionnelle.
Réaliser tout d'abord sur papier un croquis des différentes zones à placer
-a
0
C
(divers titres, header, footer, etc.) permet d'avoir une vue globale du projet.
:J
0 Vous gagnerez ainsi un temps considérable.
'tj"
,-i
0
Bien entendu, nous insérons du contenu en «dur» dans le code HTML.
N
@ Cette intégration, dite statique, est une étape cruciale. C'est la charpente
.....
.!: de votre template ! Elle doit donc être réalisée avec le plus grand soin. Après
Ol
·;::
>- le placement des zones du site, il ne faut pas oublier de styler les différentes
a.
0 balises (images, puces, liste, h 1, h2, etc.).
u
À ce stade, n'hésitez pas à vous rendre sur le validateur en ligne du W3C
(http://va lidator.w3.org).
Pour finir, un « contrôle qualité» s'impose : insérer beaucoup de contenu
vous permettra notamment de contrôler le comportement de votre intégra-
tion.
130 Chapitre 7. Comment créer son propre thème ?

Figure 7 .11 - Exemple de site réalisé avec un système de grille

Le résultat final est une intégration statique de la page d'accueil et d'une


page de contenu (figure 7.12).

-0
0
C:
:::J
0
s:t accueil.html pa g e-i ntem e. htm 1 images style
,-i
0
N
@
....,
.c Figure 7.12 - Exemple final d'une intégration statique (style contenant une ou plusieurs CSS)
Ol
·;::
>-
c.
0
u

Création du template WordPress


Nous disposons maintenant d'un fichier HTML accompagné de sa feuille de
style CSS grâce à l'intégration statique. Il suffit maintenant de lui injecter du
code WordPress (à l'aide de boucles et autres template tags) aux endroits
7 .3 Un bon départ pour un bon thème 131

qui vont être dynamiques. Il s'agit en fait de ce que WordPress va gérer, à


savoir : la navigation, le titre de la page, le contenu principal, etc.
Pour résumer, nous allons transformer le contenu « dur» de not re
intégration statique en contenu dynamique.
Il restera éventuellement à styler certains éléments que WordPress génère
lui-même, comme le contenu ou les listes. Le module Firebug de Firefox
sera d'ailleurs d'une grande utilité pour déterminer quelle classe ou quel
identifiant devra être stylé dans nos feuilles CSS.
À ce stade, une question se pose : « Faut-il partir d'un thème existant
pour pouvoir créer le nôtre» ?
Il est en effet possible de copier/coller le dossier d'un thème existant
car la structure du thème peut être reprise. Les fichiers PHP standard sont
déjà présents (pour mémoire, il s'agit de style.css, index.php, single.php,
page.php, category.php functions.php). Il est donc très facile de modifier
l'image de présentation de votre thème (screenshots.php) et sa description
(style.css) pour que le template soit rapidement fonctionnel.
Néanmoins, il n'est pas conseillé de reprendre le code source de ces
fichiers PHP. Bien entendu, on peut s'en inspirer; mais, en fonction du thème,
il y a un risque de perdre beaucoup de temps à prendre connaissance du
code source. Il vaut donc mieux tout effacer et insérer son propre code HTML
statique pour insérer ses propres fonctions WordPress (boucles, template
tags, etc.).

- ~
7.3 UN BON DEPART POUR UN BON THEME
Partir d'un thème existant?
-0
0
C:
N'imaginez pas faire votre thème sur mesure et créer votre propre thème de
0
:::J
A à Z. Pour gagner du temps, on peut copier/ coller certains bouts de code,
s:t
,-i
notamment pour le fichier functions.php et le fichier style.css.
0
N
@
...., Quatre fichiers de départ
.c
Ol
·;::
>-
c. Les thèmes se trouvent dans le dossier« wp-content/thèmes » de WordPress.
0
u
À l'intérieur de celui-ci, il faut au minimum créer ces fichie rs :
• index.php
• functions.php
• style.CSS
• screenshot.png
132 Chapitre 7. Comment créer son propre thème ?

Pour finir, il faut éditer« index.php » en insérant tout simplement le code


HTML suivant :

1 <p>Mo n t heme fon ct ionn e<lp>

Remarque importante - Encodez toujours vos documen ts au format UTF-8,


sans BO M (ch aîne de caractères placée dans le fichier permettan t la reconnais-
sance du fichier UTF-8 en tant que tel) , car le BOM est incompatible avec
PHP. O r WordPress est basé sur le langage PHP. Aussi, dans le cas où le format
UTF-8 avec BOM est choisi, des décalages peuvent apparaître dans le template.

Modifier la description et la vignette du thème


Il est important de modifier la description de votre thème ainsi que l'image
« screenshot.png ». Ces informations seront visibles dans l'interface d'admi-
nistration pour choisir l'apparence de votre site.

Pour modifier la description : style.css


Après avoir ouvert le fichier, vous apercevrez tout au début du document
un segment se situant entre deux balises de commentaires / *... */. C'est
uniquement cette partie qui nous intéresse. Quant au reste, vous pouvez le
supprimer, car nous allons utiliser notre (ou nos) propre(s) feuille(s) de style
CSS.

/*
Theme Na me: Als aWP
Th eme URI : http://www .al sac re ati ons.com
Desc ri pt ion : Template crée pou r le l ivre "W
ordPress 3.0 : 100% prati que "
Aut ho r: Als ac réati ons - Si mon KERN
-a Version : 1
0
C */
:J
0
'tj"
,-i
Détails des différents champs :
0
N
• Theme Nome : nom de votre thème.
@
..... • Theme URI : lien vers l'auteur du thème .
.!:
Ol
·;:: • Description : description de votre template.
>-
a.
0 • Author : auteur du template.
u
• Version : version de votre Template.

Sauvegardez et c'est terminé!

J,
~ I Remarque - WordPress interdit la même description pour deux thèmes. Si le
cas se présentait, il y aurait des problèmes lors des choix du thème dans l'espace
7.3 Un bon départ pour un bon thème 133

d'admin istration. A ussi, si vous partez d'un thème existant (ce qui est le cas ici ),
n'oubliez pas de modifier cette partie.

Pour modifier la vignette : screenshot.png


La vignette affiche un aperçu du design du template. Il faudra créer le fichier
« screenshot.png » pour l'adapter à votre thème avec un logiciel de retouche
d'images.

La dimension de cette image est au minimum de 880 x 660 pixels au


format PNG. Un screenshot de votre site fera parfaitement l'affaire .

Free, Fresh & Fun


.. .

~ .. ,'_ ...
·, ~
r \

- ...
Figure 7.13 - Exemple d'une vignette (screenshot.png) donnant un aperçu du template
AlsaWP dans le back office

-0
0
C:
:::J
Tester et activer notre ébauche de thème
0
s:t
,-i Il faut maintenant vérifier que le thème est correctement reconnu par Word-
0
N Press. Pour cela, rendez-vous tout d'abord dans la partie d'administration
@
...., de WordPress pour l'activer. Si votre vignette et la description du thème sont
.c
Ol visibles, tout est en ordre (figure 7.14). Activez alors le thème et un message
·;::
>-
c. de confirmation apparaîtra.
0
u La partie publique affiche simplement le contenu de notre fichier
« index.php », à savoir:« Mon thème fonctionne» (figure 7.15).

À partir de maintenant, chaque modification de ce thème sera visible


directement sur WordPress. Notre template est donc prêt à recevoir not re
code HTML enrichi de fonctions WordPress.
134 Chapitre 7. Comment créer son propre thème ?

AlsaWP Ve,s,on . 1

Helloyou 1 Par Simon K

Template crêe pour le livre « WordPress 3.0:


100% pratique »

Mots-dés ; grEEn. fresh. fun

11!!1] ~ 1;001 t.oot le r,•onéle •

~ --- --~-·-·- ...

FiiH,l:iiM Wkfgets Menus Amère-plan

Figure 7.14 - Le template est bien présent dans la liste de choix

Éâotion _êffichage !::!istorique Marque-pages Qutils

• C ~ LJ http://www.mon-site.com/

PSDTUTS VECTORTUTS Advanced Photoshop ... T

0 Désactiver & Cookies- ..-i CSS· ID Form.· ' Images- 0


~ Gmail • Boî... @ Conditiona... CJ htt..•m/ x .g WP
Mon thème fonctionne

15
C:
Figure 7 .1 5 - La partie publique affiche bien le fichier « index.php »
:::J
0
,;j"
,-i

~ Insertion de votre code HTML statique


@
....,
.c Commencez toujours par insérer votre propre code source (celui de l'inté-
Ol
·;::
>-
gration statique) à l'intérieur d'un fichier PHP.
c.
0
u N'oubliez pas de placer votre (ou vos) feuille(s) CSS et vos images dans
le dossier du thème.
Sur la partie publique, vous remarquerez que des images peuvent être
manquantes. Ceci est dû à leurs liens relatifs. Il faut donc mettre à jour tous
ces liens, y compris ceux de vos CSS, grâce au template tag php bl oginfo()
vu précédemment.
7.4 Template WordPress: les bases 135

Dès à présent, votre template doit s'afficher correctement. Il reste main-


tenant à rendre le contenu (navigation, contenu principa l, etc. ) dynamique,
g râce aux boucles WordPress et aux marqueurs de modèles (template tags).

7 .4 TEMPLATE WORDPRESS : LES BASES

Faire appel à des fichiers PHP distants


Il est temps maintenant de diviser ce fichier« index.php » (ou n'importe quel
autre fichier). En d'autres termes, nous allons en extraire certaines parties,
pour les incorporer dans d'autres fichiers PHP.
En fonction de vos choix, il est possible d'intégrer n'importe quel
fichier PHP à l'intérieur d'un autre fichier PHP, g râce au template tag
« template_part() » :

<? ph p get_t emp l at e_pa r t (1 foote r1 ) ; ?> <!- - i nt èg re l e cont enu de foot er . php
-- >
<?p hp get_temp l ate_pa r t (1 header') ; ?> <! -- intèg re l e contenu de heade r . php
1 -->

header.php
1

-a
0
C
:J
0
'tj"
,-i
0
N
@
.....
.!:
Ol
foo~er.php
·;::
>-
a.
0
u

Figure 7.16 - lndex.php faisant appel à trois fichiers PHP externes

Pour plus d'informations sur templ ate part() , voir :


http ://codex.word p ress.org/Functio n_ Reference/get_tem p late_part.
136 Chapitre 7. Comment créer son propre thème ?

Avant la version 3 de WordPress, il était habituel d'utiliser trois template


tags dédiés à cette fonction. Il est encore possible de les utiliser :

<?php get_hea der(); ?> <!-- intègre le contenu de header .php -->
<?php get_footer(); ?> <! -- intègre le contenu de foote r.php -- >
<?php get_sidebar(l; ?> <! -- i ntègre le contenu de sidebar . php -- >
1 <?ph p comments_template(); ?> <!-- intègr e le contenu de comments.php -->

Création d'un header compatible WordPress


Un header d'une page HTML est composé d'un « doctype » et d'une balise
« head » qui contient elle-même d'autres balises.

Pour pouvoi r créer un header, quatre étapes sont nécessaires :


1. Mettre à jour les liens (CSS, Favicon, JavaScript) grâce au template
tag bl oginfo( ) .
2. Insérer la fonction wp_t i t le () dans la balise Title. Cette fonction
affichera le titre de la page visitée.
3. Insérer la fonction qui gère les pings. Elle permet de savoir qui parle
de votre site.
4. Et surtout : insérer la fonction wp_head () avant la balise fermante de
head. Sans cette fonction, votre site sera incompatible avec la plupart
des plugins et des fonctionnalités de WordPress, comme les RSS ou la
gestion du background.

Exemple d'un header compatible WordPress:

<!DOCTYP E html>
<head> <title><?php wp_title(l; ?><ltitle> <meta
ht tp -equiv="Content -Type " cont en t="tex t/htm l ; charset=UTF-8" I>
-0 <link re l="shortcut icon" href= "<?php bl og info( temp l ate_directory' l ;
0
C:
:::J
?>/ fav icon . i co" I>
0 <l ink rel="s ty l esheet " type=" text/css " hre f="<?php
s:t
,-i
blog info( ' t emp late_url ' ) ; ?>/style .css" media="screen " I>
0
N
<l ink rel="pingback " href="<?ph p bloginfo(' pingback_ur l' l ; ?> " !>
@
<?php 1~p_head( ) ; ?>
...., <l head>
.c <body>
Ol
·;::
>-
c.
0
u

Création d'un footer compatible WordPress


N 'oubliez pas d'insérer systématiquement la fonction wp_footer() avant la
balise fermante de body. En effet, il est plus élégant d'insérer du contenu
JavaScript à la fin d'un document HTML. Il se peut qu'un plugin utilise
7.4 Template WordPress: les bases 137

cette méthode. Certains plugins ont besoin de la présence de cette fonction


à cet endroit. Si cette condition n'est pas respectée, certains plugins ne
fonctionneront pas.

<?php wp_footer() ?>


<!body>
1 <lhtm l>

Mettre en place un Menu


La création d'un menu fait partie des bases pour créer un thème . Une partie
y est consacrée plus loin.

Afficher un article ou une page avec une boucle standard

<! -- Bouc le artic le- ->


<?php if ( have_posts() ) : ?>
<?php whi 1e ( have_posts () ) : t he_post() ; ?>
<h3><a href="<?php the_permal ink() ; ?>" t it le="<?ph p
the_title(); ?>"><?php t he_tit le () ; ?><la><lh3> <! -- Titre -- >
<?php the_content(); ?> <! -- contenu -->
<?php endwhi le; el se : ?>
<p>Aucun res ul tat<l p>
<?ph p en di f; ?>
<! -- Fi n boucle art icle -- >
• Explications: c'est la boucle standard de WordPress. Elle affiche le titre
et son lien dans une balise <h3> , puis le contenu de l'article.
• Cette boucle doit être intégrée dans le fichier « single.php » pour
afficher un article ou dans « page.php » pour afficher une page ou
-0 encore dans "index.php" pour afficher l'un ou l'autre. (cf. : la hiérarchie
0
C:
:::J
de fichiers de Wo rdPress).
0
s:t
,-i
0
N Autres affichages avec une boucle
@
....,
.c Pour pouvoir afficher plusieurs articles d'une catégorie, le contenu d'une
Ol
·;::
>- page ou le résultat du moteur de recherche, il suffit d'utiliser la boucle utilisée
c.
0
u pour afficher un article complet. Seul le fichier dans lequel la boucle doit
être intégrée change :
• Pour afficher plusieurs articles d'une catégorie, elle doit être intégrée
dans le fichier« category.php ».
• Pour afficher le contenu d'une page, elle doit être intégrée dans le
fichier« page.php » .
138 Chapitre 7. Comment créer son propre thème ?

• Pour afficher le résultat du moteur de recherche, elle doit être intégrée


dans le fichier« search.php ».
• Cf : la hiérarchie de fichiers de WordPress.

Une boucle : plusieurs résultats


La boucle standa rd de WordPress est simple : elle s'adapte au fichier php
appelé par WordPress (grâce à la hiérarchie de fichiers de WordPress). En
effet, une même boucle peut afficher des résultats différents. Tout dépend de
la manière dont cette boucle est« appelée» par WordPress :
• Si la boucle est appelée pour afficher un article (single.php) ou une
page (page.php), elle bouclera une seule fois.
• Si la boucle doit afficher plusieurs a rticles d'une catégorie (cate-
gory.php), elle bouclera autant de fois qu'il y a d'articles.
• Si la boucle doit afficher plusieurs articles d'une requête de recherche
(search.php), elle bouclera autant de fois qu'il y a de résultats.

Il n'est donc pas très étonnant que certains thèmes contiennent un fichier
PHP appelé communément« loop.php » qui ne contient qu'une seule boucle.
Ce fichier est intégré dans les autres fichiers du thème.

Afficher un lien « Lire la suite »


Comme nous l'avons vu précédemment, le template tag the_content { )
affiche le contenu entier d'un article dans une boucle.

<! -- .... Inté rieur Boucl e .... -- >


<?ph p the_content (' Li re l a sui te' ) ; ?>
-0
0
1 <! -- .... Sui t e - i nté rieur Bou cle .... -- >
C:
:::J
0 Si on passe un paramètre (du texte, ou du code HTML, par exemple pour
s:t
,-i afficher une image), seul le contenu se trouvant avant la balise« read-more »
0
N sera affiché.
@
...., Par défaut, après avoir cliqué sur le lien « Lire la suite», WordPress nous
.c
Ol
·;:: redirige vers l'article en question puis scroll directement jusqu'au niveau
>-
0
c. où le texte continue. Ce n'est pas forcément agréable. Voici le code PHP à
u insérer dans le fichier « functions.php » pour éviter ce comportement.

fu nc ti on remove_more_l ink_sc rol l ( $l ink l !


$1 ink = preg_rep lace( 'l #more -[0 -9]+ 1' . " $1 i nk l;
retu rn $link;

1 ~dd_f i l te r( 1
the_content_more_ l i nk' . 1 remov e_more_ l i nk_s cro l l 1 ) ;
7.4 Template WordPress: les bases 139

Pour plus d'informations, voir:


http://codex.wordpress.org/Custo m izing _the_Read_More.

Afficher l'extrait d'un article


Les extraits sont des résumés facultatifs de vos articles, écrits à la main. Dans
la partie d'édition un article, il faut cocher «Extrait» dans les « Opt ions
d'écrans» pour faire apparaître la box. Si aucun extrait n'est précisé, cette
fonction affiche uniquement le texte d'un article (sans les images) avec un
nombre de caractère prédéfini.
Voici la fonction à insérer à l'intérieur d'une boucle :

1 the_excerpt(l ;

Pour p lus d'informations, vo ir:


http://codex.wordpress.org/Templ ate_Ta gs/the_excerpt

Lister les catégories

<?php wp_list_categories(array(
1
orderby1 => 1 name1 , Il Manière d'ordonner la l iste
1
order 1 => 1ASC1 • Il Ordre cro i ssant ou déc roissant ?
1show_count 1 => 0, Il Affiche ou non l e nombre d'a rtic le
contenus
1
tit le_li 1 =>_<'Catégories1 ) , Il Titre de l a l iste
1 1
exc lude => " 18 , 12 ". Il ID de l a ou des catégories à exclure
1 1
depth => O Il Niveau de pro f ondeur de l 'arborescence
) ) ; ?>
-a
0
C
:J
0
• Explications : affiche une liste des catégories de votre site.
'tj"
,-i
wp_ li st_ca tegor i es () accepte plusieurs paramètres qui permettent de
0
N
contrôler son affichage.
@ • Cette fonction se p lace à l'extérieur des boucles.
.....
.!:
Ol
·;::
>- ) Note - Si vous voulez connaître l'identifiant d'une catégorie (d'un article ou
a.
~
0
u d'une page), il faut appliquer la valeur par défaut des permaliens. Il suffît de
J, •
regarder l'URL lorsque vous visitez une catégorie ou un article : vous pourrez y
voir une variable du type « cat= 1 » ou « p= 2 >> .

Pour plus d'informations sur les paramètres, voi r :


http ://codex.wo rdpress. o rg/Template _Ta gs/wp _list_categories.
140 Chapitre 7. Comment créer son propre thème ?

Lister les pages

<?ph p wp_l ist_page s(a rray(


1
t it le_l i 1 =>~('Pa ge s' ), Il Titre de l a l iste
'exc l ud~ => "18 , 12 ", Il ID de l a ou des pages à exclu re
1
incl ude 1 => "9 ,17", Inc l ure seu lement ces pages (par leu r !0)
1
dept h1 => o, Il Ni veau de profondeu r de l'a rborescence
'sort_co1umn' => ' menu_order , post_ti tl e' , Il Comment trier l'aff ic hage
de s l i ste s
) ) ; ?>

• Explications: affiche une liste des pages de votre site. wp_l i st_pages ()
accepte plusieurs paramètres qui permettent de contrôler son affi-
chage.
• Cette fonction se place à l'extérieur des boucles.
• Une autre fonction, plus récente, permet de faire la même action :
wp_page_menu() .

Insérer des commentaires


Pour pouvoir insérer des commentaires, nous allons faire appel à un fichier
nommé « comments.php ». Cet appel est placé à la fin de la boucle qui
affiche le contenu de l'article dans le fichier« single.php » ou « page.php ».
Attention, pour une raison encore inconnue, un problème d'affichage des
commentaires peut survenir si le fichier« comments.php » est inclus avec la
fonction get_templ ate_part( ) . Il est donc recommandé d'utiliser la fonction
comments_templ ate ( ) créée spécialement à cet effet.

-0
<?ph p
0
C:
Il Débu t de l a bo ucle
0
:::J wh i le ( have_posts( l ) : the_post ( ) ;
s:t
Il Si les comme nta i res sont auto ri sés
,-i
0
i f ( comment s_open( l 11 get_comment s_number () ) 1
N comme nt s_templa t e( l ;
@ }
....,
.c endwhile;
Ol
·;:: ?>
>-
c.
0
u
7.5 Template WordPress: des fonctionnalités utiles 141

7 .5 TEMPLATE WORDPRESS : DES


,,,.
FONCTIONNALITES UTILES

Afficher la date et l'heure de parution d'un article

<?php the_time() ; ?>< ! -- affiche l 'heure au format défini dans le back


office-->
<?php the_d ate() ; ?> <!-- affiche la date 11 heure au format défini dans le
back office -- >
<p> Publié le: <?php the_time( 1j F, Y1 ); ?> <lp> <!-- affiche : Publié le 8
Mai, 2010 -- >
<p> Pub l ié le : <?php the_date( 1j F, Y1 ); ?> <lp> <!-- affiche : Publié le 8
Mai , 2010 - - >

• Explications : la fonction the_date{) affiche la date de publication de


l'article courant. La fonction the_ time() , elle, affiche, sans surprise,
l'heure de parution.
• Toutes deux, lorsqu'elles sont utilisées avec les mêmes paramètres,
affichent des éléments identiques. En fonction de ces paramètres, on
peut « forcer» la manière dont ces éléments vont être affichés.

Vous trouverez plus de paramètres sur la date et l'heure en suivant ce


lien: http://codex.wordpress.org/Formatting_Date_and_Time.
Il est préférable d'utiliser la fonction t he_ time() pour forcer l'affichage de
la date. Contrairement à th e_date( ) , il n'y aura pas de soucis d'affichage si
plusieurs articles sont postés le même jour.
N'oubliez pas de régler le format de la date et de l'heure dans les
réglages de WordPress (figure 7.17).

<?php echo get_the_date(); ?> <! -- "fonct ion de référence " disponible
-0
0
1 depuis la Version 3 de WordPress -- >
C:
:::J
0
s:t
,-i
Afficher l'auteur d'un article
0
N
@ <p> Ecrit par <?php the_author_posts_link(l; ?> <lp> Il affiche le nom de
....,
.c l'auteur avec un 1i en
Ol
·;:: <p> Ecrit par <?php the_author(); ?> <lp> Il af fiche le nom de l' auteur
>-
c. sans 1ien
0
u 1
• Explications : récupère et affiche le nom de l'auteur d'un article.
Ce code est à insérer à l'intérieur d'une boucle. La fonction
t he_author _posts_l i nk() permet donc d'afficher le nom de l'auteur
pointant vers la page de description de cet auteur. Nous reviendrons
ultérieurement sur ce point.
142 Chapitre 7. Comment créer son propre thème ?

Fuseau horaire UTC+O GJ L'hevre UTCactvelle est 211111-115-16 18:57:119

Choisissez: une ville dans le même fuseau horaire que le vôtre.

Format de date @ 16 mai 2010


Ô 2010/05/16
Ô 05/16/2010
Ô 16/0S/2010
ô Personnalise : j F Y 16 ma, 2010

Documentation sur le format des dates (en anglais). Cliquez sur" Enregistrez les
modifications » pour mettre à jour l'exemple affiché.

Format d'heure @ 18 h S7 mon


ô 6:S7
Ô 18:57
Ô Personnalisé : G \h i \ 18 h S7 mon

La semaine débute le Lundi GJ


Enregistrer les n1od1f1cations

Figure 7. 1 7 - Réglage du format de la date et de l'heure

Afficher l'image à la une


WordPress possède une fonction qui permet d'afficher l'image à la une d'une
page ou d'un article. Par défaut, en insérant une image dans WordPress, ce
dernier crée 4 occurrences: l'originale, la grande, la médium et la miniature.
Ces paramètres de taille sont gérables depuis le back-office de WordPress.
La fonction th e_pos t _thumbna il ( )affiche donc cette image à la une mais
nous pouvons choisir quelle occurrence elle doit afficher.
Voici un exemple pour afficher une image à la une miniature:

<!·· Af f ich age de l ima ge a la une 1a mettre dans une boucle ) -- >
-a
0
C
1 <?php the_post_thumbnail('thumbnai l') ?>
:J
0 Pour plus d'informations sur les paramètres : http://codex.wordpress.org/
'tj-
,--1
0 Function_Reference/the_post_thumbnail
N
@
.....
-§i
ï:::
Afficher des news
>-
~ Pour afficher des news, voici les étapes à suivre :
u
• créer une catégorie « news» (avec des articles) dans le back-office ;
• créer une boucle personnalisée dans le fichier« sidebar.php » (ou dans
un autre fichier) avec query_posts() ou WP_q uery() ;
• paramétrer cette boucle de telle sorte qu'elle prenne en compte X
articles de la catégorie ayant comme nom « news».
7.5 Template WordPress : des fonctionnalités utiles 143

<?php query_posts( 1 category_name=News&posts_per_page=Y );?>


<?php i f ( have_posts () l : ?>
<?php wh i le (have_posts( l ) : th e_post( l ; ?>
<! -- ... -- >
<?php
global $more;
$more= O;
?>
<p><?php t he_excerpt(l ?><lp>
<! -- . . . -->
<?php endwhi l e; ?>
<?php else : endif ;?>
<?php wp_reset_query();?>

Créer un article mis en avant


Un article mis en avant permet de créer une accroche. Le fichier va ainsi être
structuré en deux parties (figure 7.18) :
• la boucle principale : elle affiche des articles de manière standard,
avec une vignette;
• la boucle secondaire: elle affiche uniquement le dernier article publ ié.

Deux boucles seront donc présentes à l'intérieur d'un même fichier.

-a
0
C
:J
0
'tj"
Bovde ~
,-i
0
N
@
.....
.!:
Ol
·;::
>-
a.
0
u

Figure 7.18 - Structure d'une page comportant une accroche


144 Chapitre 7. Comment créer son propre thème ?

Concrètement, cela donnera :

<div id="content">
<div id="accroche ">
<!-- bouc le secondaire -->
<!div> <!-- accroche -- >
<div id="a rti cles">
<!-- bouc le principale -- >
<!div> <!--articles -->
<!div>

La boucle secondaire
Avant d'aller plus loin, commençons par schématiser la structure HTML de
notre accroche (figure 7.19).

Figure 7 .19 - Structure HTML de l'accroche

<div id="accroc he">


<?php
$accroche= new WP_Ouery();
-a
0 $accroche ->query(array(
C 1
:J posts_per_page 1=>1 . // on récupère que 1
0 artic le
'tj"
,-i ));
0
N while(Saccroche->have_posts()) : $acc roche->the_pos t (l ;
@ $wp_query ->in_the_loop = true :
..... Saccroche_ID = $post ->ID ;
.!:
Ol
·;:: ?>
>-
a. <?php if (get_post_meta( $post ->ID , 'grande -vignette' , truell ?>
0
u <div class="grande-vignette">
<img src="<?php echo get_post_meta($post ->ID.
'grande-vignette'. true); ?> " alt="accroche" !>
<!div>
<?php } ?>
<div class="extrait ">
<h2><a hre f="<?php the_permalink(l ; ?> " t itle= "<?php
t he_t it le () ; ?> "><?ph p the_t i t le ( l ; ?><! a><lh2>
7.5 Template WordPress: des fonctionnalités utiles 145

<?php the_content( 1 Lire la sui te 1 ) ; ?>


<!div>
<?php en dwh i le ; ?>
1 <!div> <! -- accroche -- >

• Explications : le même fichier contenant deux boucles différentes, il est


possible, pour la boucle secondaire, d'utiliser au choix l~p_Query() ou
query_posts( ) . Ici, nous utiliserons i~p_Query( ) .
• L'objet WP_Query() , alias $accroche, va permettre de personnaliser la
boucle secondaire (celle qui va afficher l'accroche). On choisit alo rs le
nombre d'article que nous voulons afficher (un seul) . On peut s'arrêter
là, mais on peut également préciser la catégorie qui nous intéresse.
• La boucle démarre alors : tant que $accroche «contient» des articles
(ici il n'y en a qu'un seul), la boucle affiche le code HTML de l'accroche.
• L'identifiant de cet article est alors stocké dans la variable $ac croche_ ID,
ce qui a toute son importance pour la suite.
• À l'intérieur de cette boucle, la fonction get_post_meta ( ) est utilisée
pour récupérer l'image de l'article grâce à un champ personnalisé
préalablement créé. Enfin, les template tags basiques sont utilisés pour
afficher le titre de l'article, son lien et son extrait.
• L'accroche est alors achevée.

La boucle principale
C'est une boucle standard qui affiche plusieurs articles. Il n'est donc
pas nécessaire d'utiliser query_posts ( ) ou WP _Query( ) . Un petit détail reste
néanmoins à régler: si la boucle de l'accroche et la boucle principale puisent
les articles dans la même catégorie, nous risquons de nous retrouver avec
un doublon.

-0
L'accroche affiche le premier article. La liste d'articles (générée par la
0
C: boucle principale) va commencer avec ce même premier article. Il faut donc
:::J
0 demander à la boucle principale de ne pas l'afficher.
s:t
,-i
0 Une simple condition i f et une variable $accroche_ID feront alors I' af-
N
@ faire:
....,
.c
Ol <div i d="a r tic l es ">
·;::
>-
c. <! -- bouc le princi pa le -- >
0
u <?php if ( have_posts() ) : ?>
<? php whi l e ( have_posts () ) : t he_po st() ; ?>
<?php i f ( $post-> ID != $accroche_lD ) { ?>
<! -- si les i dentif i ants sont di ffér ents . on
aff i che le code int ern e à l a boucle -- >
<?php 1 ?>
<? php endwhi l e; el se : ?>
<p>Aucun résulta t : (< lp>
146 Chapitre 7. Comment créer son propre thème ?

<?ph p en di f; ?>
<!-- Fin bouc l e artic le -- >
1 <!div > <!-- art icl es -- >
• Explications: si l'article courant ne possède pas le même identifiant
que l'article() de l'accroche, alors le code qui génère la liste est affiché.
• Cette condition se place donc à l'intérieur de la boucle principale.

Créer un formulaire de recherche


Voici un exemple de code sou rce d'un formulaire de recherche, avec un
champ de type « input» et un bouton « submit ». Il suffira de le styler en CSS
pour que son esthétique co rresponde à vos besoins :

<form class=" bidu l e" name=" search form" met hod="ge t " action="<? php echo
home_ur l ( ) ; ?> ">
<f ieldset>
<legend> Reche rche< /l egend>
<1 abel>
<in put type=" text " na me=" s" value=" #" id="r echerc he"
!>
</ 1abe l>
<input type=· submi t " id="vo t re -id " value="Che rcher · !>
<lf ie ld se t >
<lfo rm>

Ce code est communément intégré dans un fichier appelé « search-


form.php », puis intégré dans les autres fich iers.
Lorsqu'une requête de recherche sera exécutée à partir de ce formulaire,
WordPress va automatiquement reconnaître l'URL (qui prendra alors la
forme suivante: http ://www.examp le.com/?s=mot-recherche) et va donc
faire appel au fichier« search.php ».
-0
0
C
:J
Si search.php n'est pas trouvé, il affichera index.php.
0
'tj"
,-i
Vous pouvez revoi r la sectio n « Hiérarchie d es fichiers» du chapitre 6pour
0
N
plus de précisions.
@
..... Attention - La méthode de passage de paramètres se fait avec « get ». L'action
.!:
Ol
·;:: se fait avec l'aide de la fonction home_ur l ( ) . Le name= " s " est obligatoire.
>-
a.
0
u

Partager un article sur les réseaux sociaux


Partager un article sur les réseaux sociaux permet d' augmenter son potentiel
de lecteurs. Faciliter sa p ropagation avec des liens peut donc s'avérer
bénéfique.
7.5 Template WordPress: des fonctionnalités utiles 147

Insérer un lien « partager sur Facebook "


Pour partager un lien sur Facebook, il suffit d'insérer ce morceau de code
dans la boucle qui se situe dans le fichier « single.php ». Lib re à vous de
mettre une image ou de laisser ce lien sous forme textuelle :

<a href= "ht tp : //www . facebook .com/sharer.php?u=<?php the_permalink(I ;


?>& t=< ?php th e_titl e() ; ?> " title="Partager sur facebook "
1 target="blank">Partager sur Faceboo k<l a>

Insérer un lien « partager sur Twitter "


Pour partager un lien sur Twitter, insérez ce morceau de code dans la boucle
située elle aussi dans le fichier « single.php » :

<a hr ef= "http://twitter. com/home?status=A voir: <?php the_permalink () ; ?>"


1 title="Pa r tager sur Twitter !" ta rge t ="_bla nk">Partager sur Twitter !<la>
Quelques plugins disponibles sur le site de WordPress vous permettront
également d'ajouter de nombreux autres liens vers les réseaux sociaux :
• Add this:
http://wordpress.org/plugins/addthlS/.
• Shore this : http://wordpress.org/share-this/.
• Shareaholic:
http://wordpress.org/plugins/shareaholic/

Navigation interne : suivant et précédent

<?php next_posts_li nk() ?> <! -- af fi che un l ie n pou r le s articles


-0
0 suivants -->
C:
:::J <?php previous_posts_l ink() ?> <! -- aff iche un l ien pour le s
0
s:t
,-i
1 artic l es précédents -->
0
N
@
• Explications: affiche un lien qui permet d'accéder aux articles suivants
...., ou précédents. Ces fonctions sont placées avant ou après une boucle .
.c
Ol
·;:: • Ces liens sont automatiquement masqués lorsqu'il n'y a plus d'articles
>-
c.
0 à afficher.
u
• Il est possible de formater leur affichage :

<?ph p next_posts_link( 1Art ic l es suivants') ?> <!-- affiche un lien "


Articles su ivants • -- >
<?php next_posts_link( 1 <img src="chemin-image .j pg"/>1 1 ?> <! -- aff i che une
1 image comme li en -->
148 Chapitre 7. Comment créer son propre thème ?

Rappel - Pour choisir le nombre d'articles qui s'affichen t sur une page, il faut
se rendre dans les options de lecture du back;office.

Pour plus d'informations, voir :


http://codex.wordpress.org/Template Tags/next post link et
http://codex. word press.org/Template _Tags/previous_post_lin k.

Récupérer le nom ou la description d'une catégorie

Il Récupère et aff i che la desc r ipti on de la catégorie courante


<?php
$category = get_the_category() ;
echo Scategory[O J->category_description;
?>
Il Récupère et aff i che le nom de l a catégorie courante
<?php
$category = get_the_category() ;
echo Scategory[O J ->cat_name;
?>

Pour plus d'informations, voi r :


http://codex.wordpress.org/Function _ Reference/get_the _ category.

Créer une page 404 personnalisée


Pour créer une page 404 personnalisée, il est nécessaire de créer un fichier
que l'on nommera : « 404.php ». C'est ce fichier que WordPress ira chercher
dans le thème s'il ne trouve aucun résultat. Souvenez-vous que, par défaut,
il affichera le fichier« index.php ».
Ici, il n'est pas nécessaire d'utiliser une boucle. En effet, il n'y a aucun
-a
0
C
a rticle ou contenu à chercher. Aussi, un simple code HTML avec des template
:J
0 tags fera très bien l'affaire.
'tj"
,-i
0
N
<?ph p get_hea der();?>
@
.....
.!:
<div i d="content">
Ol
·;::
>- <!-- On af fiche l e conten u de ce t te page 404 -->
a.
0 <p> Erreur 404 <lp>
u
<ldiv><! -- cont ent -- >
<?php get_footer(); ?>

• Explications : les fichiers« header.php »et« footer.php » sont appelés


grâce aux template tags get_header() et get_footer( ).
7.5 Template WordPress: des fonctionnalités utiles 149

• Notons que la fonction get_temp l ate_part () aurait également pu être


utilisée.
• Il suffit ensuite d'afficher le contenu de son choix. Certaines pages 404
sont très graphiques, d'autres le sont moins mais ont plus de fo nctio n-
nalités (moteur de recherche intégré, archives, plan du site, etc.).

Pour de plus amples informations, voir:


http://codex.wordpress.org/Creating_an_Error_ 404_Page.

Aiouter les classes CSS WordPress


Chaque article, chaque page, chaque élément géré par WordPress, possède
des identifiants et des classes CSS uniques et généralistes. C'est très utile
lorsque l'on veut cibler un ou plusieurs éléments.
C'est la fonction post_class( }qui va générer l'ensemble des classes CSS
de l'article ou de la page affichée. On peut y également ajouter nos propres
classe en paramètre de cette fonction.
<div id= "post-<?php the_lD{); ?>" <?php post_class('ma-classe'); ?»
va afficher par exemple :

<div id="post -4564" class="post post -4564 category -48 category -dancing
1 logged -in ma-classe ">
Pour de plus amples informations, voir aussi la fonction :
https://codex.wordpress.org/Function_Reference/post_class
https://codex.wordpress.org/Function_ Reference/body_ class

-0
0
C:

0
:::J
Changer l'arrière-plan du site depuis le back office
s:t
,-i
0
N
Cette fonction s'insère dans le fichier functions.php de votre thème pour
@ activer cette fonctionnalité dans le backoffice. Il faut noter que l'image
....,
.c choisie dans le back office sera intégrée en CSS directement sur la balise
Ol
·;::
>-
HTML <body>. Pensez-y lors de votre intégration HTML/CSS !
c.
0
u 1 add_custom_bac kg round( ) ;

Pour que cela fonctionne dans notre thème, il faut ajouter la fonction
body_class() dans notre balise HTMI «body ».

1 <body <?php body_cl ass() ?>>


150 Chapitre 7. Comment créer son propre thème ?

Figure 7.20 - Résultat de la fonction : ajout d'une option dans le signet Apparence

Cette fonction body_ class() ajoute des classes CSS spécifiques à Word-
Press, ce qui permet de changer le fond de notre thème depuis l'espace
d'administration de WordPress.
Bien entendu, si vous ne voulez pas que le fond de votre thème soit
personnalisable, via l'espace d'administration, il suffit de supprimer cette
fonction du fichier« functions.php » .

..
7 .6 DES PLUGINS TRES PRATIQUES

L'effet lightbox
L'effet lightbox permet notamment d'agrandir une image à l'intérieur d'une
boîte modale en utilisant une transition esthétique (figure 7 .21 ). Le langage
utilisé est JavaScript.

-0
Pour réaliser cet effet, il suffit d'utiliser le p lugin « jQuery Colorbox ». Voici
0
C: la marche à suivre :
:::J
0
s:t 1. Téléchargez le plugin à cette adresse:
,-i
0 http://word press.erg/pl ugi ns/jq uery-colorbox/
N
@ 2. Installez le plugin et activez-le.
....,
.c
Ol
·;::
3. Insérez une image dans un article ou une page.
>-
c.
0 4. Vérifiez que le lien de l'image réduite pointe bien vers l'image elle-
u
même (figure 7.22).
5. C'est terminé. Votre Effet Lightbox est en place et désormais parfaite-
ment fonctionnel.

Ainsi, dès que vous cliquerez sur une image, un voile assombrira le site
et affichera le lien (une image plus grande) dans une fenêtre modale.
7.6 Des plugins très pratiques 151

Figure 7.21 - Exemple d'un effet lightbox

Cible du lien wp-content/uploads/2010/04/fresco .bmp


Aucun J (~iA
-d-re_ss_e·-.w-eb-.d-u-fic-h-ie~rl)
Adresse web de l'article
Saisissez une adresse web ou cl" uez sur l'un des rér · la es ci-dessus

Figure 7.22 - Exemple d'un effet lightbox

Vous remarquerez qu'une nouvelle rubrique intitulée jQuery Colorbox a


fait son apparition dans les signets« Réglages». Vous pouvez à cet endroit
choisir la couleur du voile (par défaut c'est le noir). Pour permettre au plugin
d'insérer automatiquement le lien HTML permettant son utilisation, gardez
la case cochée.

-a Pagination numérotée
0
C
:J
0 Comme nous l'avons vu précédemment, WordPress propose des fonction-
'tj"
,-i nalités qui permettent de naviguer à l'intérieur des pages. Néanmoins, ces
0
N fonctionnalités se résument à de simples liens « Suivant» ou « Précédent »,
@
..... ce qui se révèle peu pratique lorsque l'on est amené à naviguer dans des
.!:
Ol dizaines de pages ...
·;::
>-
a.
0
Nous allons utiliser ici le plugin « WP-PageNavi » qui permettra d' optimi-
u ser cette navigation interne grâce à la pagination.
Voici comment procéder :
1. Télécha rgez le plugin à cette adresse :
http://wordpress.org/extend/plugins/wp-pagenavi/.
2. Installez le plugin et activez-le.
152 Chapitre 7. Comment créer son propre thème ?

3. Insérez le code suivant dans un fichier de votre thème (par exemple


« category.php ») :

1 <?php 1~p_pagenavi () ; ?>

4. N'oubliez pas de supp rimer les anciennes lignes de code :

<? ph p next_posts_li nk(l ?> <! -- affiche un l ien pour les articles
su i vants -->
<?php prev ious_posts_l ink(l ?> <! -- aff iche un lien pour l es
1 artic l es précédents -->

5. C'est terminé! Votre plugin est désorma is fonctionnel.

Rendez-vous dans les réglages de ce plugin (Réglages > PageNavi) pour


formater correctement l'affichage en français . Il est également possible
d'utiliser une feuille de style dédiée à l'affichage de cette pagination.

Rappel - Pour choisir le nombre d'articles qui s'affichent sur une page, il faut
se rendre dans les options de lecture du back~office.

Insérer un fil d'Ariane (breadcrumbs)


Par défaut, WordPress ne propose pas de fonction pour gérer un fil d'Ariane.
Pourtant, lorsqu'un site est volumineux et contient plusieurs niveaux de
profondeurs, cet élément peut devenir très vite indispensable.
Voici à quoi peu ressembler un fil d'Ariane : « Vous êtes ici : Accueil >
catégorie > article».
Comme souvent, il existe de nombreux plugins proposant cette fonc-
-a tionnalité, mais tous ne sont pas de qualité égale. Néanmoins, deux se
0
C
:J
d istinguent plus particulièrement, il s'agit de Breadcrumb NavXT et de Yoast
0 Breadcrumbs.
'tj"
,-i
0
N
@ Breadcrumb NavXT
.....
.!:
Ol
• Première étape, téléchargez Breadcrumb NavXT à l'adresse suivante :
·;::
>- http://wordp ress.org/extend/ p lugins/b readcrumb -navxt/.
a.
0
u • Après installation et activation, insérez le morceau de code suivant
dans le fichier« header.php » :

<div class="f i l -ariane ">


<?php
if( function_exists( ' bcn_display' l li
1 bcn_d isp lay() ;
7.6 Des plugins très pratiques 153

?>
1 <!div>
Yoast Breadcrumbs
• Première étape, téléchargez Yoast Breadcrumbs à l'adresse suivante:
http://wordpress.org/extend/plugins/breadcrumbs/.
• Comme précédemment, après installation et activation, insérez le
morceau de code suivant dans le fichier« header.php » :

<?ph p if ( fun ct ion_exi sts( ' yoas t_breadcrumb' l ) l


yoast_br eadcrumb (' <p id="b readcrumbs">' . ' <lp>' l ;
1 } ?>

Créer et afficher un formulaire de contact


Vous trouverez de nombreux plugins qui permettent de créer des formulaires
dans WordPress. Leur fonctionnement est similai re : une interface permet
de créer un formulaire avec ses différents champs, puis un « shortcode » est
généré. Ce dernier est directement insérable dans une page ou un article
ou dans notre thème grâce à la fonction do_shortcode() de WordPress.
Voici une liste de plugin non exhaustive : C Forms, Form Manager,
Contact form 7, Gravity Form ...

Gérer une ou plusieurs Google Maps


Difficile de se passer d'une carte Google Maps sur la majorité des sites. Les
plugins existant fonctionnent de la même manière que précédemment: une
-0 interface de création puis un shortcode nous sont fournis. Il est alors très
0
C:
:::J
simple de modifier le type de carte (plan, photo, reflief), le niveau de zoom,
0 les infos-bulles, les pins, etc.
s:t
,-i
0
N
Voici une liste non exhaustive de plugins: Page Google Map, WP Google
@ Maps ...
....,
.c
Ol
·;::
>-
0
c. Rendre un site privé
u
Pour plusieurs raisons, il est bon de savoir comment rendre un site privé
(maintenance, en construction, extranet ... ) avec le plugin Private Only (entre
autres) en un coup de sou ris, votre site est sécurisé : vous devez vous
authentifier pour y accéder.
Lien du plugin : https://wordpress.org/plugins/private-only/
154 Chapitre 7. Comment créer son propre thème ?

,,.
1.1 CREATION D'UNE OU DE PLUSIEURS ZONES DE
MENUS
Introduction
Il est possible d'afficher (et de gérer par l'intermédiaire du back-office)
plusieurs menus très facilement. Le nombre de menus disponibles dans un
thème est spécifié dans le fichier « functions.php ».
Il y a donc deux étapes :
• Création de la (ou des) zone dans le fichier functions.php;
• Mise en place de la zone à l'endroit souhaité dans notre th ème.

Le fichier functions.php
Nous allons créer une zone de menu que nous allons appelée « Zone
principale ».

register_nav_men us( array(


'Zone Pri ncipa le' => _( 'Navigation Principa l e').
1 ) );

• Explications : Une zone« Navigation Principale » apparaît maintenant


dans le back-office de WordPress.
• Si aucun menu personnalisé n'est affecté à un emplacement, la
fonction wp_nav_me nu() se transforme en wp_page_men u() qui liste uni-
quement les pages.
• Avantages : rapide, efficace et flexible. L'utilisateur peut changer
comme il l'entend l'intitulé de ses menus dans l'espace d'adminis-
-0 tration . Il peut choisir l'emplacement de chacun !
0
C:
:::J
0 Pour plus d'informations, voir :
s:t
,-i http://codex.wordpress.org/Function_Reference/wp_nav_menu.
0
N
@
....,
.c
Ol
·;::
Insertion dans le thème
>-
c.
0 Il ne reste plus qu'à mettre dans le thème cette fameuse zone. Dans notre
u
cas ce sera dans le header.php à l'endroit de la navigation.

1 <?php 1~p_nav_menu( array( 1 theme_location 1 => 1 Zone Principale' . ) l ; ?>

Par défaut, cette fonction affiche une div qui contient une liste ul et li. Mais
il est tout à fait possible de formater la façon dont on veut que WordPress
7.8 Création d'une zone de Widget 1 SS

code notre menu. La liste des paramètres est disponible ici : http ://codex.
word p ress.org/Functio n _ Reference/wp _nov_ menu

Reconnaitre la rubrique courante


Pouvoir reconnaître la rubrique dans laquelle un internaute navigue est
un «plus» dans l'ergonomie d'un site. L'exemple le plus commun est le
changement d'apparence de la rubrique du menu dans laquelle on se
trouve.
WordPress l'a bien compris en ajoutant automatiquement des classes
CSS dédiées à l'élément courant:

.current ·menu -item {


Il permet de sty ler l' él ément courant du menu de nav igat ion
}
. curren t- ca t {
Il permet de sty ler l' él émen t courant dune li ste de catégories
}
. current_page_item {
Il permet de styl er l' él émen t courant dune li ste de page
}

N'hésitez pas à utiliser l'outil Firebug de Firefox afin de pouvoir rapide-


ment déterminer quelle classe CSS doit être utilisée.

-
7 .8 CREATION D'UNE ZONE DE WIDGET

Introduction
-0
0
C:
:::J Il est possible d'afficher (et de gérer par l'intermédiaire du back-office)
0
s:t
plusieurs zones de Widget. Voici comment en créer une:
,-i
0
N Il y a donc deux étapes :
@
...., • C réation de la (ou des) zone(s) dans le fichier functions.php
.c
Ol
·;:: • Mise en place de la zone à l'endroit souhaité dans notre thème.
>-
c.
0
u

Le fichier functions.php
Nous allons créer une zone de Widget que nous allons appeler « Zone
principale».
156 Chapitre 7. Comment créer son propre thème ?

register_sidebar( array(
'name' =>_( 'Zone Sidebar'l,
' i d' => ' zonel' ,
'description' => _ ('Zone de Widget dans si debar') ,
1 ) );

• Explications : une zone de widget « Zone Sidebar » apparaît mainte-


nant dans le back-office de WordPress.
• Remarques : nous pouvons choisir les balises html qui entourent le titre
du widget ainsi que le widget tout entier. Très pratique pour l'adapter à
une intégration HTML/CSS spécifique. Pour plus d'informations, voir :
http://codex.wordpress.org/Function_Reference/register_sidebar

Insertion dans le thème


Il ne reste plus qu'à mettre dans le thème cette fameuse zone. Dans notre
cas ce sera dans le header.php à l'endroit de la navigation.

1 <?php wp_nav_menu( array('theme_location' => 'Zone Pr in cipale' , )) ; ?>

Par défaut, cette fonction affiche une div qui contient une liste ul et li. Mais
.i!_est tout à fait possible de formater la fa_çon dont on veut que WordPress
code notre menu. La liste des paramètres est disponible ici : http://codex.
wordpress.org/Fu nction _ Reference/wp_nov_ menu
Pour plus de détails sur les widgets, voir:
http://codex. word press.org/Widgetizi ng_Themes.

-
7.9 CREATION D'UN MODELE DE PAGE
~

-0
0
Introduction
C:
:::J
0 Un modèle de page permet de personnaliser l'affichage d'une (ou plusieurs)
s:t
,-i
0
page(s) précises. C'est un template spécifique qui va s'appliquer à cette ou
N
ces page(s).
@
....,
.c
Ol
·;::
>-
c.
Création du fichier php
0
u
Pour créer un modèle de page, c'est très simple: créez d'abord un nouveau
fichier PHP dans votre thème (sans prendre un nom réservé par WordPress)
puis, donnez-lui un nom. Enfin, insérez tout au début de ce fichier le code
suivant (sans espace libre) :

1 <?php /* Template Name: nom du modèle de page*/?>


7.9 Création d'un modèle de page 157

Le modèle de page sera ensuite disponible dans la liste des modèles,


dans l'interface de publication d'une page.

Personnaliser la homepage avec un modèle de page


Prenons un cas concret : vous souhaiteriez pouvoir disposer d'une page
d'accueil totalement différente du reste du site. Pour ce faire, il faut créer
un modèle de page « Accueil » que vous allez appliquer à une page de
WordPress, en suivant les étapes décrites ci-après :
• Dans l'espace d'administration, créez une page« Accueil ».
• Dans les réglages de WordPress, choisissez cette page statique comme
page d'accueil.
• C réez ensu ite un fichier PHP, pa r exemple« accueil.php ».
• Insérez tout au début de ce fichier (sans espace libre) la ligne suivante :

1 <?ph p /* Temp l at e Name : Accueil */ ?>


• Après sauvegarde du fichier, rendez-vous dans l'espace d' administra-
tion pour modifier la page« Accueil ».
• Enfin, choisissez le modèle de page« Accueil ».

Vous pouvez dès à présent éditer ce fichier« accueil.php » comme bon


vous semble. Bien entendu, n'oubliez pas d'insérer une boucle standard
permettant d'afficher le contenu de la page.

Créer un modèle de page avec une boucle personnalisée


Comme son nom l'indique, un modèle de page s'applique à une page.
-0 Or nous savons maintenant que WordPress affiche plusieurs résultats
0
C:
:::J différents avec la même boucle, en fonction du type de fichier (page, article,
0
s:t
catégorie ... ).
,-i
0
N Pour mémoire, une même boucle de base n'affichera pas le même
@ résultat selon qu'elle est appelée par le fichier « category.php » ou par le
....,
.c
Ol
fichier« page.php » : le fichier« category.php » va en effet afficher plusieurs
·;::
>- articles, alors que le fichier « page.php » n'affichera que le contenu de la
c.
0 page (cf. hiérarchie de fichiers de Wo rdPress).
u
Dès lors, comment procéder pour afficher plusieurs articles d'une caté-
gorie dans une page, étant donné qu'une boucle standard n'affiche que le
contenu de la page ?
La solution est en fait très simple : il suffit de personnaliser cette boucle
en utilisant WP _Ouery() ou query_posts ( ) , en indiquant les bons paramètres:
158 Chapitre 7. Comment créer son propre thème ?

<?php query_posts( 1category_name=nom-categorie) ;?>


<! - - Bouc l e - ->
<?php if ( have_posts( l ) : ?>
<?php whi l e ( have_posts( l ) : the_post( l; ?>
<! -- contenu de la boucle -- >
<?php endwhi l e ; el se: ?>
<! -- Si la boucle n'affiche r i en -- >
<?php endi f; ?>
<! -- Fin boucle -- >

Ainsi, grâce à query_posts( ), il est possible d'afficher ce que l'on souhaite


dans toutes les pages, en forçant WordPress à ne pas afficher la boucle
comme une« boucle de page».
Si vous souhaitez utiliser un lien« Lire la suite» dans une« page», il suffit
pour cela d'ajouter ce morceau de code :

<?php
globa l $more;
$more= O;
?>
1 <?php the_content(' Lire la suite'); ?>

En effet, puisque WordPress affiche une page (souvenez-vous de la


hiérarchie des fichiers), il va afficher tout le contenu de cette page : il faut
donc lui forcer la main.

7 .10 -
CREATION D'ARTICLES PERSONNALISES -
<CUSTOM POST TYPE>

lntrodudion
-0
0
C:
:::J WordPress dispose par défaut d'un flux d'articles et d'un flux de page. Les
0
s:t articles personnalisés (custom post type) sont un flux supplémentai re et
,-i
0
N
totalement indépendant des autres flux.
@
...., Il y a donc deux étapes :
.c
Ol
·;:: • Création du flux dans functions.php,
>-
c.
0 • Affichage de ce flux dans notre thème .
u

Le fichier fundions.php
Nous allons créer un Flux « Livres » dans notre fichier functions.php :
7. t O Création d'articles personnalisés (Custom Post Type) 159

Flux Spécial
Custom Post type

Figure 7.23 - Flux de WordPress

Il creation des custom post type l ivres


reg i ster _post_type(' livres'. array(
' labe l' =>'Livres' .
' publ i c' => true.
' sho1cui 1 => true.
'ca pabi l ity_type 1 => 1 post 1 •
' hi erarchical' => false,
'rewrite'=> array( 'sl ug' => ' l ivres') ,
' query_va r 1 => true ,
' supports' => a rray(' t i t le' .
'edi to r 1 •
'ex cerp t' .
-a 't rackbac ks' .
0
C
:J
'custom- fie l ds 1 •
0 ' comments' .
'tj"
,-i 'revisions ' .
0
N
'th umbn ai l 1 •
1
@ author ' .
1 page-attributes 1 ,)) ) ;
.....
.!:
Ol
·;::
>-
a. Explications : On crée un label, des identifiants, puis on construit son
0
u interface d'administration : la même que pour un article ou une page.
https://codex. wordpress.org/Fu nction_ Reference/reg ister_post_type
160 Chapitre 7. Comment créer son propre thème ?

Voici ce qui apparaît dans le back-office de WordPress :

Personnalise

Figure 7.24 - Custom Post Type« Livres»

Aiouter une taxonomie


Une taxonomie permet de classer une information. C'est tout simplement
une catégorie ou des tags. Nous allons ajouter une catégo rie à nos customs
post type.

reg i ster_taxonomy ( ' catego ri e_projet' , ' livres' , ar ray( ' hi erarch i cal ' =>
1 t rue. ' l abel ' => ' Ca t égori e' . ' query_var' => true. ' rewri t e => true l l;

On ajoute l'identifiant de notre flux (« livres»), on assigne « t rue » à


hierarchical et on met un label qui sera le texte affiché dans le back-office
-a
0
C
(ici «Catégorie »). Voici le résultat.
:J
0
'tj"
,-i
0
N Modifier l'icône dans le back-office
@
..... Les custom post types de WordPress peuvent faci lement être personnalisés en
.!:
Ol
·;:: ajoutant une icône correspondant au contenu. Rendez-vous dans le fichier
>-
a.
0 functions.php, plus précisément dans notre fonction de création de custom
u
post type de « Livres ».
Puis nous ajoutons cette ligne :

'menu_i con' => ge t _bl ogin fo ( 1 templ ate_direc t ory1 l . 1 / i mage s/mo n- image.png 1 •

l Il URL de l'i mage


7. t t Champs personnalisés (Custom Fields) 161

Catégorie

Ajouter une nouvelle cat égorie Actions groupées EJ Appliquer

Nom D Nom Description

Aucun élément trouvé.


Ce nom est utilisé un peu portout sur votre
site. D Nom Description

Identifiant
Actions groupées EJ Appliquer

L'identifiant est la version normalisée du nom.


Il ne contient généralement que des lettres
minuscules non accentuées. des chiffres et des
traits d'union.

Figure 7.25 - Taxonomie (catégories) de« Livres»

Affichage dans le thème


Une boucle standard n'affiche que les flux normaux (pages + articles). Or,
nous venons de créer un flux supplémentaire. Nous disposons de deux
solutions pour afficher ces articles.
Création d'un modèle de page qui va contenir une boucle personnalisée
(query_post()) affichant ce flux précis.
query_posts(' post_type= livres');
Ou alors directement dans le menu, grâce à notre taxonomie, il est possible
d'afficher directement une rubrique qui pointe vers celle-ci.

-0
0
Des plugins
C:
:::J
0 Des plugins existent pour créer à la volée des custom post types, ce qui nous
s:t
,-i
0
évite de tout faire à la main. Voici les plus connus : Custom Post Type UI et
N
Types.
@
....,
.c
Ol
·;::
>-
,,.
0
c. 7.11 CHAMPS PERSONNALISES <CUSTOM FIELDS>
u

Présentation
Les champs personnalisés permettent d'ajouter, à travers l'interface d'admi-
nistration, une ou plusieurs données que vous allez pouvoir utiliser dans les
thèmes.
162 Chapitre 7. Comment créer son propre thème ?

Ces informations« bonus », insérées par l'auteur lui-même, vont accom-


pagner un article ou une page. Elles pourront servir dans l'élaboration d'un
thème WordPress.
Prenons un cas concret : lier une vignette à un article.
Pour afficher une vignette, il faut bien entendu l'avoir uploadé dans
WordPress. Lorsque cette étape est achevée, veillez à bien noter son URL qui
doit être de type :
http://www.mon-site.com/wp-content/uploads/vignette.jpg.

Création depuis le back-office


Dans la partie administration, rendez-vous dans l'interface de publication
d'un article (ou d'une page).
En scrollant vers le bas, a rrêtez-vous au signet« Champs personna lisés».
Puis, renseignez les deux champs (figure 7 .26).

Champs personnaUsM

Ajouter un nouveau champ personnalisé:

Nom Valeur

Vlg(lelle http://www.mon.site.com/wp.contenVuploadsl\lignette.jpg.

,-;outer un cha.-np personnalisé

a
Les champs personnahsês peovem etre ut1hsês ahn cra,outer des donnêes supplêmentaires vos articles. vous pouvez les utbser dans votre theme (enL

Figure 7 .26 - Champs personnalisés

Le champ « Nom » va servi r d'identifiant dans vos temp lates. Appelez-le


-a par exemple «vignette», puis insérez l'URL de la vignette dans le champ
0
C «Valeur».
:J
0
'tj" Il suffit ensuite de cliquer sur les boutons « Ajouter un champ personna-
,-i
0
N
lisé » et« Mettre à jour».
@
.....
.!:
Ol
·;:: Affichage dans le thème
>-
a.
0
u Le champ personna lisé étant en place, il faut maintenant récupérer son nom
a insi que sa va leur. Celle-ci sera utilisée pour afficher la vignette. WordPress
dispose d'une fonction spécialement conçue à cet effet: get_post_meta () .

<?ph p echo get_post_meta($post->ID, 1 nom- du-champ1 , true) ; ?> Il aff i che la


valeur du champ personna l i sé
1
7. t t Champs personnalisés (Custom Fields) 163

Cette fonction comprend trois paramètres :


• l'ID de l'article (ou de la page) pour spécifier l'endroit où se trouvent
ces champs personnalisés;
• le nom du champ personnalisé, de manière à indiquer à WordPress
quel(s) champ(s) il doit chercher;
• un booléen : «vrai» si on ne souhaite qu'un seul résultat et «faux»
pour obtenir un tableau de résultats.

Dans l'exemple de la vignette, l'URL va être affichée dans une balise


image.

<i mg cl ass=" vignette " s rc=" <?php ec ho get_post_meta($post ->ID . 1vignette1 ,


1 tr ue) ; ?>" alt="vi gne t te "/>

R emarque - Cette fonction est utilisée à l' intérieur d'une boucle. Libre à
1A
J, '
1 vous de créer une variable qui stockerait l'information pour l'afficher ailleurs.

Création de Meta boxes avec le plugin ACF


Une « meta boxe» est une boîte qui se trouve dans l'interface d'édition
d'un article ou d'une page (l'extrait, l'image à la une, etc.). Il est possible
de créer facilement nos p ropres Meta boxes en se basant sur les champs
personnalisés, grâce au plugin Advanced Custom Fields.
http://wordpress.o rg/plugi ns/a dva nced -custom-fiel d s/
Voici la ma rche à suivre:
• Installation et activation du plugin
Dans la rubrique ACF, cliquer su r « ajouter».
• Une grande page apparaît avec des champs à remplir. Laissez vous
-a
0
guider pour la suite.
C
:J • Il est possible d'assigner un groupe de champs à un modèle de page
0
'tj" p récis ou à un custom post type. C'est très pratique!
,-i
0
N • Rendez-vous dans une page pour tester que les meta boxes sont bien
@ p résentes.
.....
.!:
Ol • C'est terminé !
·;::
>-
a.
0
u
Récupération et affichage dans le thème
En lisant la documentation du plugin (claire et bien faite), voici la fonction à
mettre dans notre thème à l'extérieur ou l'intérieur d'une boucle.

1 <?ph p t he_f i el d(' document_pd f ) ; ?>


164 Chapitre 7. Comment créer son propre thème ?

Options de fê<ran •
Modifier le groupe de champs Ai••'"'
Document PDF Publier

Position du champ Titre du champ Nom du champ rype de champ T ltat: Publié Mod fier

Document POF document__pdf fichier Oépla<er dans la corbel'1e


(1

Mettre a Jour

Assigner ce groupe de champs

RèglGs Montrer ce champ qtiand


~:u.-.cfflle<k-
rcgtes pour
dè"~mmer :.ur
Modële de page v est égal~ v Accuell J
[ ... et

quellesp,ogC>$
d'klitiOl'I ce groupe do! ou
chomp"' ~,., ur,11~;.
Ajouter une règte

Options

Numêro d'ordre
1t"\.'"fntUW-\r1('

Figure 7.27 - Création d'une Meta Boxe PDF

Document PDF

Document PDF
Téléchargez votre document

Aucun fichier sélectionné. Ajouter un fichier

Figure 7 .28 - Résultat de la Meta Boxe PDF

7.12 POUR ALLER PLUS LOIN


-0
0
C:
:::J Créer ses propres Shortcodes
0
s:t
,-i
0
Un shortcode est un morceau de code entre crochets que vous pouvez
N
littéralement insérer dans vos articles, vos pages ou alors directement dans
@
...., vos fichiers de thèmes .
.c
Ol
·;::
>- Grâce aux Shortcodes, il est possible de créer des boutons, des boîtes
c.
0 flottantes et la gestion de plusieurs colonnes dans le contenu (tel un
u
framework), tout ça, sans avoir besoin d'écrire une seule ligne de code: un
luxe pour vos utilisateurs !
Voici une liste non exhaustive : Shortcodes Ultimate, Jshortcode, Ali-ln-
One Shortcodes ...
7. t 2 Pour aller plus loin 165

Aiouter des fonctionnalités natives à votre thème


Comme nous l'avons vu précédemment, un thème WordPress peut contenir
un fichier nommé « functions.php ». Ce fichier contient, comme son nom
l'indique, des fonctions qui vont permettre d'ajouter des fonctionnalités à
votre thème.
C'est par exemple ce fichier qui contient la fonction permettant de gérer
l'image de fond depuis le back-office.
Mais rien ne vous empêche d'ajouter et de créer vos propres fonctions !
« functions.php » permet d'ajouter des fonctions natives à votre thème.
Celles-ci vont faire la même chose que des plugins, mais sans les plugins.
C'est une excellente façon d'ajouter des fonctionnalités à un seul et même
thème, ce que ne permettent pas les plugins qui, eux, sont activés pour
l'ensemble du site (pas de différence entre les thèmes) et qui nécessitent une
action de la part de l'utilisateur (installation et activation).

Comment transférer/intégrer la fonction d'un plugin nativement dans un thème ?


Sans surprise, il suffit de transférer (copier/coller) le code source du plugin à
l'intérieur même du fichier« functions.php ». Pour certains plugins, quelques
aménagements seront sans doute nécessaires pour que tout fonctionne
correctement.
De cette façon, dès lors que le thème est activé, les fonctions inhérentes
à un plugin seront automatiquement mises en place. D'où les éventuelles
apparitions de menus persistants supplémentaires dans la sidebar latérale
d'administration, lors de l'activation d'un thème !
Mais attention, dans ce cas, il n'y aura pas de mises à jour automatiques.
Il faudra donc veiller à ce que la dernière version de ce plugin soit bien dis-
-0
0 ponible. Si c'est le cas, une mise à jour manuelle du fichier« functions.php »
C:
:::J s'imposera.
0
s:t
,-i
0
N
@ Quelques pistes pour aiouter des options à votre thème
....,
.c
Ol
·;:: Nous n'allons pas entrer dans les détails de ces différentes méthodes, car
>-
c. celles-ci requièrent des notions un peu plus poussées que d'ordinaire en
0
u programmation et en algorithmique. Néanmoins, un petit tour d'horizon des
différentes méthodes permettra de vous lancer lorsque vous serez prêts.

Modifier le fichier cc functions.php " en y ajoutant des fonctions et ses variables de


thèmes
Vous pouvez modifier le fichier par copier/coller de plugins existants, ou en
créer vous-même de toutes pièces.
166 Chapitre 7. Comment créer son propre thème ?

Nous vous conseillons pour cela de consulter quelques ressources


intéressantes :
• http://wpshout.com/create-an-advanced-options-page-in-
wordpress/.
• http://www. l stwebdesigner.com/wordpress/how-to-create-an-
options-page-for-your-wordpress-theme/.
• http ://codex. word press.org/Creating_Options_Pages# Wordpress_ 2.
7- and- Newer.

Créer sa propre librairie


Il s'agit là d'une variante de la première méthode. Le fichier« functions.php »
est beaucoup plus lisible, car il fait appel à des fichiers PHP externes.
Concrètement, voici ce que cela peut donner dans le fichier « func-
tions.php » :

Il On définit la variable 11 TH EMELIB11 qui va contenir l e chem in de la


librairie
define('THEMELIB', TEMPLATEPATH . 1 /library' l;
Il Puis on fait appel à un fichier PHP externe
1 require_once(TH EME LIB . ' lfichier-de-la-librairie . php' );

Le thème « Thematic » utilise cette méthode. Nous vous conseillons de


«disséquer» son fichier« functions.php » et son dossier« library » pour bien
comprendre son fonctionnement.
Pour plus d'informations, voir :
http://wordpress.org/extend/themes/thematic.

Utilisation du plugin Option Tree


-0
0 Utilisé su r de nombreux templates p remium, ce plugin permet de créer
C:
:::J
0 rapidement son interface d'administration.
s:t
,-i
0 Pour plus d'informations, voir :
N
@
https://wordpress.org/plugins/option-tree/
....,
.c
Ol
·;::
~ Thème enfant
0
u
Il s'agit d'une fonctionnalité qui peu s'avérer intéressante, en fonction de vos
besoins. En effet, WordPress permet de créer un thème enfant (child theme).
L'idée est de partir d'un thème existant (qui jouera le rôle de parent) pour
créer un autre thème basé sur celui-ci (qui, lui, jouera le rôle d'enfant). Ces
deux dossiers entretiennent donc une très forte relation : le thème enfant
7. t 2 Pour aller plus loin 167

étant basé sur le thème parent, le moind re changement graphique de celui-ci


se répercutera sur le premier.
La création d'un thème enfant est très simple. Il suffit pour cela de créer
tout d'abord un nouveau dossier portant le nom de votre thème enfant dans
« wp-content/themes », puis de créer à l'intérieur de ce thème enfant un
fichier « style.css » (comme vous le feriez pour créer un thème « normal »).
C'est ce dernier fichier qui va appeler le thème parent.
Voici le code à insérer au début du fichier« style.css » :

/*
Theme Name : Le t heme enfant
Theme UR I : htt p: //mon -s i te .com
Desc ri pt ion : Theme en fant dun autre t heme
Au t ho r: Brin de we b
Autho r UR I : htt p: //www .brindeweb .com
Templ ate : Nom-doss ier- du-t heme- parent
Vers ion : 1.0
*/
@import ur l ( " .. / Nom-doss ier-d u-t heme -parent/style .css "J;

La ligne la plus importante est « Template: Nom-dossier-du-theme-


parent ». C'est en effet celle qui spécifie le nom du dossier du thème parent.
Une ligne plus commune - mais optionnelle - est la ligne de récupération
de la feuille de style du thème parent. À partir de maintenant, tout ce que
vous allez ajouter à la suite de ce fichier, « écrasera » les instructions CSS du
thème parent.
Il est à noter que certains posent la question de l'intérêt de cette
fonctionnalité. En effet, si l'on souhaite créer un nouveau thème différent, il
suffit de dupliquer le thème qui nous intéresse, puis de le modifier (comme
nous l'avons déjà vu dans ce livre). Non? Et bien c'est une remarque qui
-0 fait débat ... C'est uniquement une histoire de goût. Certains trouvent cette
0
C:
:::J
fonctionnalité inutile, d'autres la trouvent géniale.
0
s:t
,-i
0
N
@
Les marqueurs conditionnels (conditional tags)
....,
.c
Ol
·;::
Le codex WordPress définit ainsi les marqueurs conditionnels :
>-
c.
0 • « Les marqueurs conditionnels peuvent être utilisés dans vos thèmes
u pour décider du contenu à afficher sur une page spécifique ou com-
ment ce contenu doit être affiché en fonction de conditions que remplit
cette page. Par exemple, si vous voulez insérer un texte particulier
au-dessus d'une série d'articles, mais seulement sur la page principale
de votre blog, avec le marqueur conditionnel i s_home () , cela devient
facile.
168 Chapitre 7. Comment créer son propre thème ?

• Ces marqueurs sont en relation étroite avec la hiérarchie des modèles


de WordPress. »

Pour plus d'informations, voir :


http://codex.wordpress.org/fr:Marqueurs_conditionnels.
Les marqueurs conditionnels permettent d'avoir un contrôle enco re plus
poussé sur votre template. Par exemple, grâce à ces marqueurs, il est possible
de définir que telle partie du template est visible uniquement à un endroit
précis où navigue l'utilisateur (comme la page d'accueil). Ces marqueurs
sont donc étroitement liés au modèle de hiérarchie de WordPress.
Prenons des exemples :

<?php if (is_home(ll ( ?>


<p>Ce message ne s'aff ichera que sur la page d1accueil<lp>
1 <?php } ?>

<?php if (is_category()) ( ?>


<p>Ce message ne s'aff ichera que dans une catégorie<lp>
1 <?php } ?>

<?php if (is_404()l { ?>


<p>Ce message ne s'aff ichera que si c'est une page 404</p>
1 <?php 1 ?>

De nombreuses possibilités s'offrent à vous: soyez créatif! N'hésitez pas


à fai re le tour des marqueurs disponibles.

Retour sur ce que vous venez d'apprendre


Cette partie est maintenant terminée. Elle regroupe les principaux usages de
-0
0
C:
WordPress dans le monde du Web. Comme vous le savez, il est impossible
0
:::J de tout regrouper dans un seul livre, car les possibilités qu'offre un tel
s:t
,-i
programme sont p ratiquement infinies et seraient donc difficiles à résumer.
0
N
Retenez cependant que la plupart des codes que nous avons utilisés
@
...., sont basés sur les boucles et leur personnalisation. Pour personnaliser une
.c
Ol
·;::
boucle, on utilise WP _Ouery() ou query_posts( ) . Ces deux fonctions possèdent
>-
c. les mêmes paramètres.
0
u
Vos seules limites sont vos aptitudes en programmation PHP, SQL, HTML,
CSS, JS et algorithmique! Si c'est le cas, un plugin existe sûrement!
Un tutoriel pratique ••
réaliser le template
AlsaWP

8.1 FEUILLE DE ROUTE

Voici une mise en situation concrète : la création du template AlsaWP.


Les fichiers sources (PSD, Intégration statique et template) sont disponibles
sur la page dédiée à l'ouvrage sur www.dunod.com. N'hésitez surtout pas à
-0
0
C: les regarder pour analyser le code source. Pour mémoire, toutes les étapes
:::J
0 ont déjà été abordées dans les parties précédentes de cet ouvrage.
s:t
,-i
0 Cette méthode, utilisée par la majorité des professionnels, est utilisable
N
@
pour n'importe quel autre projet de ce type. Voici les trois étapes à suivre :
....,
.c
Ol
1. Création de la maquette : le fichier PSD
·;::
>- Dans un premier temps, il s'agit de créer le design du site grâce à des
c.
0
u logiciels de graphismes tels que Photoshop. Respectez les standards
du webdesign (dimension, légèreté, facilité d'intégration, etc.), puis
laissez parler votre imagination !
En fonction de l'importance du projet, on crée au minimum une page
d'accueil et une page interne de contenu.
170 Chapitre B. Un tutoriel pratique: réaliser le template AlsaWP

2. Intégration statique HTML/CSS : « PSD to HTML »


Notre maquette terminée, nous allons la transformer en page HTML.
Nous découpons la maquette, de façon à pouvoir disposer des
différentes images (fond, header, footer, vignettes), puis nous les
utilisons pour l'intégration HTML/CSS de la page d'accueil et de la
page interne.
3. Finalisation du template: « HTML to WordPress »
Dernière étape: il s'agit maintenant de transformer nos pages HTML
statiques en template WordPress, pour les rendre dynamiques. Cette
étape se résume à insérer des fonctions PHP WordPress (boucle et
template tags) et à la découpe en plusieurs fichiers PHP propres aux
templates WordPress.

8.2 LE FICHIER PSD

La maquette graphique du template AlsaWP est composée d'un header et


d'un footer imposants (figure 8.1 ). Le header comporte une accroche, un
logo et un bandeau supérieur. Le footer est composé de trois parties. La
partie du milieu est séparée en deux et contient une barre latérale et une
partie centrale destinée au contenu principal.

-
8.3 INTEGRATION STATIQUE:« PSD TO HTML »

Avant de se lancer à corps perdu dans le code HTML et le code CSS, il


faut absolument réaliser un schéma d'intégration. Il va nous permettre
d'avoir une vue d'ensemble du projet et de définir à l'avance les différents
-0
0 identifiants, classes et propriétés CSS (figure 8.2).
C:
:::J
0
s:t
• La balise <body> contiendra le fond du site.
,-i
0
N
• Le div « wrapper » va englober toute la partie du site. Ce qui va
@ permettre de le centrer.
....,
.c • Le div « header » contiendra le bandeau supérieur et l'accroche .
Ol
·;::
>-
c. • Le div« main» va contenir plusieurs classes« .billet» composées d'une
0
u image, d'un titre h3 et d'une description.
• La barre latérale est composée de plusieurs div ayant comme classe
« module». À terme elle accueillera des widgets.
• Le footer contient également son propre « wrapper » pour centrer les
trois div. Nous faisons ici le choix de coder le formulaire de contact en
dur. Un CMS ne nous oblige pas à contrôler toutes les parties de notre
template ! Bien entendu, libre à vous d'utiliser un plugin pour gérer ce
formulaire.
8.3 Intégration statique : « PSD to HTML » 171

_Y!J
1 • .. .
Helloyou !

- . - ..
.;,
, . t

A la une

---...,___________
Titre de l"arocl~
____ ....
_____ .. _..._. .. ___ _
_,.. __ .. ,,,_,_ _ OMt_, .. _...,

-·---
··-·---- ---.--
....·-·-......·-·- ..-·
.. --.-- Module:\

T 1re de fartJcl~

.......,..,_..........,,.... -...-.
··-·----..·-·-·~---
1 1 -.... -

.........,..
~ - - ·- ~ · -. . ---
.. - - . .... - - · · · - - · - - ... Module7

___ ____.....,._
T, ,tre de I',_ ...
il•\Jcle .....

-... ...................
·--·-·"·--·-·--
··-·- ~

----··-··-·-
-·-..----·-·-""... ._..,_.,... ...."""""·
_

------ .... _-
_____.....--·--
-----· Il
--
...,... ,._
--·----

-0
0 Figure 8.1 - Maquette graphique
C:
:::J
0
s:t
,-i
0
N • Ce template utilise une Google font pour gérer une police exotique.
@ Nous aurions pu également utiliser la propriété CSS« Font-face». Voilà
....,
.c
Ol
pour les grandes lignes. Si vous avez du mal à visualiser ces étapes
·;::
>- en code HTML et CSS, nous vous conseillons d'analyser les fichiers
c.
0 sources disponibles sur le site www.dunod.com. Notre feuille de style
u
CSS se trouve dans un répertoire nommé« style».

Nous disposons maintenant d'une page HTML statique. li est temps de la


rendre dynamique !
172 Chapitre B. Un tutoriel pratique: réaliser le template AlsaWP

....

-0
0
C:
:::J
0
s:t
,-i
Figure 8.2 - Schéma d'intégration
0
N
@

t
·;::
8.4 « HTML TO WORDPRESS »
>-
c.
8 Pour transformer notre intégration statique en template WordPress, il faut
remplacer le contenu statique par des template tags WordPress. Nous allons
simplement commencer de haut en bas.
8.4 « HTML to WordPress » 173

Préparation des fichiers du template


• Comme nous l'avons décrit dans la section« Un bon départ pou r un
bon thème» du chapitre 7, nous allons créer un dossier au nom de
notre thème : ici AlsaWP.
• Copier un fichier « style.css » de n'importe quel thème (« Twenty Ten »
par exemple) qui se trouve dans le fichier« wp-content/themes ».
• Nous changeons la description de ce template dans ce fichier
« style.css », en supprimant tout le reste de son contenu.
• Nous ajoutons une image « screenshot.png » puis nous créons un
fichier« functions.php » vide qui sera rempli au fur et à mesure de nos
besoins.

Insertion du code statique


• Tous les fichiers de l'intégration statique sont copiés, tel quel, à la
racine de notre template.

js medias style

style.css index.php functions.php

-0
0
C:
:::J
0
s:t

.. __
,-i
0
N
@
...., scre,enshot.png
.c
Ol
·;::
>-
c.
0
u Figure 8.3 - Fichiers statiques de départ du template AlsaWP

• Nous créons un fichier« index.php » en insérant à l'intérieur de celui-ci


du code html statique (celui de« 'index.html » par exemple).
• Dans l'interface d'administration de WordPress, nous pouvons mainte-
nant activer le thème et insérer nos propres contenus (quatre articles,
174 Chapitre B. Un tutoriel pratique: réaliser le template AlsaWP

trois pages, deux menus personnalisés ... ). Bien entendu, tout est encore
statique ! Mais plus pour très longtemps ...

Insertion des fonctions WordPress <template tags)


Le contenu statique va être remplacé par des fonctions PHP pour le rendre
dynamique. Nous allons débuter par l'en-tête du site et finir par le bas de
page.

Le header
• Rendre les liens « durs» (images, feuilles CSS, fichier JavaScript)
dynamiques grâce à la fonction b l ogi nfo() .
• Insertion desfonctions wp_t i t l e() et bl oginfo() dans la balise <title> .
• Ajout de la fonction wp_head () dans la ba lise <head>.
• Pour la partie « intro » nous laissons le slogan en dur. Libre à nous de
la remplacer par une zone de widget ou par le slogan du site avec
« bloginfo() ».

Le menu de navigation
• Création du menu dans la partie back-office.
• Dans le div« #navigation», nous insérons le code PH P pour afficher
les rubriques du menu personnalisé. Voir la section« Création d'une
ou plusieurs zones de Menus» du chapitre 7.

La partie principale
-0
0
C:
• Dans le div« #main», nous insérons une boucle WordPress standard.
0
:::J Cette boucle va afficher plusieurs extraits d'articles en générant des
s:t
,-i
div avec la classe« .billet».
0
N • A jouter le bout de code PHP au début de cette boucle permet d'afficher
@ les vignettes .
....,
.c
Ol
·;::
• Après cette boucle, il est d'usage d'insérer deux liens de navigation.
>-
c.
0
u
La sidebar
• Le formulaire de recherche est appelé avec
get_temp l ate_pa rt ( 'sea rch fo rm') .
• Création d'une zone de widget Voir la sectio n « Rend re "widg etisabl e"
une zo ne» du chapit re 7.
8.4 « HTML to WordPress » 175

Le footer
1. Nous laissons le formulaire de contact tel quel. Comme vous avez
pu le constater, il n'est pas fonctionnel. Il faudrait lui ajouter un script
PHP pour qu'il puisse envoyer un e-mail.
• Nous créons deux zones widgetisables.
• La fonction wp_footer() est insérée.

C'est terminé! Votre template est maintenant fonctionnel.


Mais nous allons l'améliorer. En effet, nous n'utilisons que le fichier
« index.php ». Or souvenez-vous, WordPress possède d'autres fichiers dans
sa hiérarchie. Il est temps de découper ce fichier« index.php » en d'autres
fichiers.

Dispatcher le fichier « index.php »


Pour ce faire, nous allons utiliser la fonction get_temp l ate_part () dans le
fichier « index.php ». Grâce à elles, nous pouvons le relier avec ces trois
fichiers PHP : « footer.php », « sidebar.php »et« header.php ».

Gérer les catégories

Rappel - Une catégorie affiche plusieurs articles qui lui appartiennent.

WordPress va appeler le fichier « category.php » qui se trouve dans le


template. Nous allons donc le créer!
-a
0 Dans notre cas, la présentation d'une catégorie est exactement la même
C
:J
0
que la page d'accueil. Nous allons donc simplement copier le fichier
'tj"
,-i
« index.php » et le renommer en « category.php ». Il n'y aura que le titre
0
N h2 à changer.
@
.....
.!:
Ol
·;::
>-
a. Gérer un article
0
u
Pour afficher un article ou une page, WordPress va appeler le fichier
« single.php » qui se trouve dans le template.
Il s'agit là aussi d'une copie du fichier« index.php ». En revanche, nous
allons cette fois-ci modifier légèrement la boucle : suppression des vignettes
et de la classe « .billet».
176 Chapitre B. Un tutoriel pratique: réaliser le template AlsaWP

8.5 CONCLUSION
Le template est maintenant terminé. Mais il n'est pas finalisé.
N'oublions pas que ce thème n'a pas vocation à être utilisé par le monde
entier contrairement au thème payant ou gratuit qui se trouvent sur le Web.
C'est plutôt un exemple de ce que pourrait être un thème développé pour
un client et uniquement ce client : il y aura certainement des manques au
besoin de chacun. Mais il n'attend que vous pour s'adapter à vous!
La suite est plutôt destinée à la finalisation des styles CSS et à l'arbores-
cence de chacun (pagination, plugin, custom post type, etc.).
Le plus important dans un site web est la conception avec la construction
d'une base solide (du storyboard jusqu'à l'intégration html-wordpress). Dès
que celle-ci est fiable et mise en place, le reste se résume à l'imbrication de
code PHP mélangé à de l'HTML/CSS/JS.
Libre à vous maintenant de le personnaliser et de l'améliorer : vous
pouvez par exemple ajouter des modèles de pages ou styler en CSS la
totalité des éléments. En effet, au moment de l'intégration statique nous
avons stylé quelques-uns d'entre eux (h 1, h2, Hh3,p, ul, li ... ), mais il en reste
encore d'autres.

-0
0
C:
:::J
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0
u
-Etude de cas ••
acheter et modifier un
Template HTML/CSS ou
un Template WordPress

9.1 INTRODUCTION
-0
0
C:

0
:::J
Internet regorge de thèmes Wo rdPress p rêts à l'emploi. On peut en trouver
s:t
,-i
énormément de très bonne qualité pour environ 50 $ (voir le site themefo-
0
N rest.net par exemple). Alors faut-il céder à la tentation ?
@
...., On peut résumer un projet avec un curseur: plus le curseur va vers le
.c
Ol
·;:: côté qualitatif plus cela va demander de temps (et d'argent). Dans le sens
>-
c. inverse: plus c'est rapide, plus la qualité sera moindre.
0
u
Mettons-nous en conditions avec un client qui souhaite un site Internet.
Ce dernier doit : être de bonne qualité, respecter les standards, êt re
responsive (visible sur mobile et tablette), avoir un design sexy, avoir une
deadline est très proche et (bien entendu) un budget plutôt limité. Bref, cela
ressemble au mouton à cinq pattes.
178 Chapitre 9. Étude de cas: acheter et modifier un Template HTMUCSS...

Vous allez faire deux propositions de devis : l'une su r-mesu re et l'autre


« prêt à porter». Explications :
• Le sur-mesure consiste à partir d'une feuille blanche pour arriver au site
final. Nous allons donc passer par les étapes du cahier des charges,
du storyboard, du design, de l'intégration HTML-CSS-JS, au choix du
CMS puis à la formation. Cela prend du temps et de l'argent: le
budget doit donc suivre.
• Le « prêt à porter» consiste à choisir avec le client (en toute transpa-
rence) un template existant en lui expliquant clairement les choses qui
sont modifiables ou non (les couleurs, les images, le logo, le texte,
l'ajout ou suppression de telles fonctionnalités). Il ne faut pas oublier
qu'adapter un thème existant prend plus de temps que l'on imagine.
Ra re sont les projets qui collent pa rfaitement à un template existant.
Il faut donc faire connaissance avec son code, sa philosophie, son
fonctionnement, etc. Si de grosses modifications sont attendues (tant
au niveau design que fonctionnel), cela demande aussi une quantité
de travail importante.

9.2 LES PLUS ET LES MOINS


Avec cette solution « prêt à porter» nous réduisons la plupart des étapes du
p rojet: le design, l'intégration HTML/CSS, la création du template WordPress,
etc. Le devis et le temps de livraison sont alors contenus et la qualité est bien
au rendez-vous. Ce qui est une belle performance en soi !
Mais il y a également un côté néfaste : le côté créatif n'est plus vraiment
au rendez-vous et c'est assez frustrant: vous pourrez avoir l'impression de
faire du travail à la chaîne en dupliquant un patron ; cela ne colle pas au
côté flatteur du travail artisanal : façonnage, originalité et minutie. Certes, il
-0
0
C:
y a un grand choix de templates, mais on se rend vite compte que la plupart
:::J
0 se ressemblent beaucoup. Pourquoi ? Car ils se basent sur des frameworks
s:t
,-i communs (voir les explications plus loin à ce sujet).
0
N
Pour conclure, acheter et modifier un thème doit rester une solution
@
...., exceptionnelle. En termes de rentabilité, c'est assez séduisant, mais si on en
.c
Ol
·;:: abuse, on risque de perdre toute valeur ajoutée ainsi qu'en savoir-faire.
>-
c.
0
u
9.3 LES FRAMEWORKS CSS
Pour avoir autant de renouvellement de thèmes qualitatif (plusieurs par
jour !), la plupart se basent sur un Framework CSS comme Bootstrap,
960 Grid System ou Foundation 3.
9.3 les frameworks CSS 179

En résumé, un framework CSS met à disposition des classes CSS qui


se basent sur une grille. En mettant tel nom de classe (donné par la
documentation du framework), l'élément HTML va prendre sa place sur
la grille (largeur, positionnement, comportement responsive ... ).
Un exemple concret avec le FrameWork Bootstrap qui se base sur une
grille de 12 colonnes:

Bootstrap exemples

3 colonnes égales
Get three equaJ.widlh coluroos stilrting .it desktops ilnd sc.iling to large desktops. On mobile devites. tablets and befow. the columns will
au1oma1~any slack.

COl-m(1-4 COl-m<l-4 COl- nl(J-4

3 colonnes non égales


Get ltltee co1umns star1ing at desktops and scaling to large desktops or val'iôus Wieltns Remember. gf'kl corumns shoulO aCld up to twelve fOf' a
single noozontaJ DIOCk More tnan trial, ana co1umns stan stacklng no maner tne view!X)C1

C:Ol-ma-3 COI-ITIO~ COl-ffi0-3

Figure 9.1 - Colonnes Bootstrap sur grand écran

Suivant le nom de la classe CSS, les colonnes vont prendre le nombre de


colonnes adéquat. Un framework CSS gère bien entendu le côté responsive.
Voici le même exemple avec une largeur de fenêtre plus petite :

Bootstrap exemples

3 colonnes égales
.col-rn<J-4

.COl-rn<J-4

-0
0 col--md-4
C:
:::J
0 3 colonnes non égales
s:t
,-i
0 .COl-rn<J-3
N
@ col~
....,
.c
Ol .COl-rn<J-3
·;::
>-
c.
0
u
Figure 9.2 - Colonnes Bootrstrap sur mobile

On remarque que les colonnes sont replacées par des lignes.


Pour conclure, les frameworks CSS (associé au framework javascript
comme jQuery) font gagner un temps précieux et c'est un véritable plaisir
180 Chapitre 9. Étude de cas: acheter et modifier un Template HTMUCSS...

d'avancer rapidement. Par contre, on est restreint à un cadre et il est difficile


d'en sortir: d'où un certain manque de créativité!
Il y a également un danger invisible dans le temps : à force d'utiliser
uniquement des frameworks, on risque de trop s'habituer à ce langage en
oubliant le codage à la main. Bref, on pense savoir coder un site web mais
en se retrouvant devant une feuille blanche sans framework, ce n'est souvent
plus le cas. Le jour où un framework n'est plus maintenu par son auteur, on
risque de perdre beaucoup.
À titre personnel, j'en utilise que très peu (sauf jQuery, car je ne suis pas
développeur). Je touche à plusieurs domaines différents mais néanmoins liés
(graphisme, illustration, web ... ). Je préfère alors coder à la main ma partie
web pour ne pas être esclave d'une technologie et apprendre constamment:
c'est plus contraignant mais c'est une valeur sûre et pérenne de ne pas
oublier!

..
9.4 «METHODOLOGIE: MODIFIER UN TEMPLATE
HTML/CSS »
Vous venez de trouver un template HTML/CSS/JS qui vous plaît énormément
et vous voulez en créer un thème WordPress ? Nous allons en voir comment !
Chaque projet est différent, il n'y a pas de marche à suivre ultime.
Néanmoins, le processus est souvent le même dans les grandes lignes avec
des variantes propres à chacun.

Le template « Prologue » de « HTMLSUP.NET »


-0 « HTMLSUP.NET » est un petit site qui regroupe une vingtaine de template
0
C:
:::J
HTML/CSS de belle qualité. Ils sont gratuits sous licence« Creative Commons
0
Attribution 3.0 License » : on peut donc les utiliser et les modifier pour des
s:t
,-i
0 projets personnels et professionnels à condition de faire mention de l'auteur.
N
@
Ce qui est bien le minimum !
....,
.c Notre template «Prologue» est téléchargeable sur le site de l'éditeur ou
Ol
·;::
>- sur le site de l'auteur : html5up.net/prologue. Chose rare pour un template
c.
0 gratuit, aucune trace d'un framework CSS ou de liens de pub cachés. C'est
u
appréciable !
Remarque : avant de lire la suite, il est conseillé de visualiser le template
pour mieux comprendre les problématiques.
Après téléchargement et décompression de l'archive, on prend connais-
sance de trois dossiers (images, js,css) et du fichier« index.html ». C'est un
9.4 "Méthodologie: Modifier un Template HTMUCSS" 181

...
Figure 9.3 - Le thème HTML « Prologue »

site « One Page » signifiant que tout le site se trouve sur une seule et même
page défilant grâce au menu. C'est une structure un peu spéciale car il n'y
a aucune arborescence. Tout se trouve sur la page d'accueil !

CSS images js index.html

Figure 9.4 - Les fichiers sources du template HTMUCSS Prologue

Le code est propre et sans surprise : que du bonheur ! Nous allons


maintenant passer à sa « WordPressification ».

-0
0
C:
:::J Création du dossier et des fichiers de thème
0
s:t
,-i
• Dans le dossier« wp-content/thèmes » de WordPress, créez un dossier
0
N portant le nom du nouveau thème.
@ • À l'intérieur de celui-ci, importez directement les trois dossiers et le
....,
.c fichier index.html du template « Prologue» .
Ol
·;::
>-
c. • Utilisez un fichier « style.css » d'un autre template en modifiant les
0
u informations commentées dans le haut du fichier et en supprimant tout
le reste.
• Créez l'image« screenshot.png » au format adéquat pour faciliter votre
choix dans l'interface d'administration.
• Renommez « index.html » en « index.php ». Activez le thème dans le
back-office. Tous les liens relatifs à l'intégration statique sont rompus
182 Chapitre 9. Étude de cas: acheter et modifier un Template HTMUCSS...

(lien des feuilles de styles, script, image etc.). Il est possible de les
rendre dynamiques grâce à la fonction « bloginfo() » de WordPress.
• Dans l'en-tête, nous rajoutons la fonction wp_head() et dans le bas de
page, la fonction wp_footer() afin de permettre aux plugins d'insérer
leur propre code.

Le thème s'affiche maintenant parfaitement, mais il est toujours aussi


statique. Nous allons le rendre dynamique !

Quel angle d'attaque adopter ?


Comme précisé plus haut, nous avons à faire à un template « One Page»
où tout se trouve sur une même page. Toute forme d'arborescence n'existe
alors pas : la navigation se faisant uniquement par des liens avec des ancres
internes.
La logique de la « hiérarchie de fichiers » de WordPress peut alors se
limiter uniquement à l'index.php. Plusieurs solutions s'offrent à nous pour
pouvoir afficher/ gérer les quatre rubriques du thème (lntro, Portfolio, About
me et contact).
Solution 1 : la plus simple
Tout le site est égal à une seule et unique page dans WordPress.
Dans l'interface d'édition de celle-ci, on insère le contenu du template
(image, titre, texte .. . ) puis grâce à la partie html de l'éditeur, on ajoute
les identifiants (#top, #portfolio, #about, #contact) dans chaque partie.
Le fichier« index.php » contiendrait uniquement une boucle standard pour
afficher cette unique page.
La mise en place est rapide et facile, mais il faut savoir ce que l'on
fait: un utilisateur lambda risque de modifier des informations au mauvais
-0
0
C:
endroit et de rendre le site non fonctionnel.
:::J
0 Solution 2 : l'index, ses boucles et les pages
s:t
,-i
0
N
Le fichier« index.php » serait composé de quatre boucles personnalisées.
@ Les quatre rubriques du thème (lntro, Portfolio, About me et contact) auraient
....,
.c chacune sa propre page statique dans WordPress. Nous placerons alors
Ol
·;::
>- quatre query_posts() (boucles personnalisées) dans les balises html «section»
c.
0 adéquate. Chacune des boucles affichera une page précise en indiquant
u
comme paramètre l'identifiant de la page.
Solution 3 : Pourquoi un thème WordPress ?
C'est une question qu'on pourrait se poser. Sans un énorme travail de
développement, il est impossible à un utilisateur lambda de pouvoir ajouter
à la volée de nouvelles rubriques du fait de la disposition originale du « one
9 .4 " M éthodologie: M odifier un Template HTMUCSS" 183

index.php

Figure 9.5 - Une boucle personnalisée pour chaque


page dans index.php

Page ». Mais livrer un site dont le contenu est modifiable, aussi petit soit-il,
c'est toujours mieux !
WordPress est un gestionnaire de contenu : il ne s'occupe pas de générer
du code HTML de mise en page, du code CSS ou encore du code JS comme
un éditeur WYSIWYG (What you see is what you get).

La sidebar
« Jane Doe » étant le titre du site, nous pourrons le rendre dynamique grâce
-0
0
C:
à la fonction bloginfo(), de même pour le slogan du site « H yperspace
0
:::J Engineer ». Nous aurions également pu créer deux zones de widgets pour
s:t
,-i
utiliser de simple widget texte.
0
N
Les icones des réseaux sociaux resteront en dur dans le template. Ces
@ informations ne changeront pas dans le temps, inutile de réinventer la rou e,
....,
.c au risque d'ajouter un temps de chargement à la page (si on utilise un plugin
Ol
·;::
>- ou des fonctions php ... )
c.
0 Pour la création d'un menu, se reporter à ce qui suit.
u

Le menu
Nous créons une zone de menu en l'ajoutant d'abord dans le fichier
functions.php de notre thème puis ouvrons index.php pour p lacer cette zone.
184 Chapitre 9. Étude de cas: acheter et modifier un Template HTMUCSS...

Figure 9.6 - La sidebar

Mais attention, dans le back-office, il ne faut surtout pas faire de simple


lien vers les quatre pages statiques que nous avons créées avec la solution 2.
Nous perdrions l'effet « One Page» car en cliquant sur une page, nous
-0
0 afficherons une page seule, or nous voulons faire défiler une même page
C:

0
:::J vers une section précise (remplie par cette page).
s:t
,-i
0
Il faut alors faire des liens personnalisés qui pointent directement vers les
N
ancres de chaque partie.
@
....,
.c Autre point critique: il faut adapter le code de la fonction wp_nav_menu() .
Ol
·;:: Le code HTML du menu du template diffère de celui qui est créé par la
>-
c.
0 fonction WordPress.
u
9.4 "Méthodologie: Modifier un Template HTMUCSS" 185

Nom du menu Mon menu

Structure du menu
Glissez chaque élément pour les placer dans l'ordre que vous préférez.

Portfolio Lien •

Adresse web

#portfolio

Titre de la navigation Attribut de titre


Portfolio
D Ouvrir le lien dans une nouvelle fenêtre/un nouvel onglet

Déplacer

Supprimer I Annuler

Figure 9.7 - Des liens pointant vers des ancres en guise de navigation

Voici le code du template Prologue :

<u l>
<l i)
<a cl ass=" ske l -pane l s -igno reHre f active " href="#top">
<span cl ass="fa fa-h ome">Intro</span>
<la>
<Il i>
<!u l>

Voici le code par défaut de la fonction wp_nav_menu().


-0
0
C:
:::J
0 ~~~\d=" ... " class=" . .. ">
s:t
,-i
<a href="#">Portfolio<la>
l >
1 <!<lul>
i
0
N
@
....,
.c
Ol
·;:: Grâce au codex, il est possible de modifier le code de sortie de la fonction
>-
0
c. wp_nav_menu() en modifiant le fichier functions.php. Nous pouvons alors
u rajouter une balise span à l'intérieur du lien. Voici à quoi nous arrivons :

~~~\d=" .. " class=" .. ">


<a href="#"><span> Portfolio</span><la>
l >
1 <!<lul>
i
186 Chapitre 9. Étude de cas: acheter et modifier un Template HTMUCSS...

Il faudra modifier légèrement la feuille de style CSS pour modifier la


façon de pointer les éléments. WordPress ne nous permet pas d'ajouter
une class personnalisée à l'élément« span ». Par contre, depuis l'interface
d'administration des menus, nous pouvons ajouter notre propre classe CSS
au parent du lien (ici <li>).

T;tre de fa navigation Attribut de titre


Portfolio
D Ouvrir fe fien dans une nouvelfe fenêtre/un nouvel onglet

Cfasses CSS (facuftatives)

maclasse
Déplacer

Figure 9.8 - Ajouter une classe CSS personnalisée à une rubrique

Conclusion
Voilà pour les grandes lignes : le thème« Prologue» HTML/CSS est mainte-
nant devenu un thème WordPress !

-
9.5 «METHODOLOGIE: MODIFIER UN TEMPLATE
WORDPRESS EXISTANT»
Vous venez de trouver un template WordPress complet qui vous plaît? Vous
voulez avoir une feuille de route pour procéder à des modifications ? Voici
-0 quelques conseils.
0
C:

0
:::J Chaque projet est différent et il n'y a pas de marche à suivre ultime.
s:t
,-i
Néanmoins, le processus est souvent le même dans les grandes lignes avec
0
N des variantes propres à chacun.
@
....,
.c
Ol
·;::
>-
Conseils
c.
0
u • Choisissez bien votre template en n'hésitant pas à regarder le code
source sur le site de démonstration du template.
• Vérifiez la présence d'un framework CSS ou non suivant votre goût.
• Lisez la notice d'utilisation.
• Il est conseillé d'installer le thème avec le contenu de démo pour
faciliter sa prise en main.
9.5 "Méthodologie: Modifier un Template WordPress existant» 187

• La plupart des templates sont en anglais, il faudra peut-être les traduire


(autant la partie publique que celle du back-office).
• Avant de vous lancer à corps perdu dans la modification du thème,
prenez le temps de comprendre le fonctionnement de celui-ci. Chaque
template est l'œuvre d'un auteur différent: ils ne sont pas tous pareils.
• Utilisez un thème enfant pour modifier un thème existant. Le jour où
vous installez une mise à jour de votre thème, vos modifications seront
écrasées et donc perdues.
• Usez de firebug (ou un équivalent) pour trouver rapidement les règles
CSS ou les balises HTML à modifier.
• Ne modifiez jamais les feuilles de style d'un framework CSS. Ajoutez
simplement vos règles CSS à la suite de la dernière feuille CSS appelée
dans le header du site. Elle sera prioritaire sur les autres.
• Utilisez la fonction « recherche dans un dossier» de notepad + + pour
trouver (par exemple) une fonction PHP ou JS précise.

Conclusion
Modifier un template existant nécessite autant de connaissance que pour la
création d'un template entier, voire plus si on veut le revoir en profondeur.
li faut s'adapter aux technologies utilisées (framework ... ) et rapidement
comprendre le principe global pour pouvoir agir au bon endroit.
Gardez toujours à l'esprit (comme pour la création d'un thème) que
chaque modification doit aller dans le sens de l'utilisateur profane. Par
exemple : Le design de ce titre h3 dans les actualités ne vous convient pas?
Agissez sur les balises H3 en ciblant ses parents et non en lui assignant une
classe directement. Si ce n'est pas le cas, l'utilisateur devra lui-même ajouter
cette classe à la main dans l'éditeur html de WordPress. Chose impensable.
-0
0 Mieux vaut prévoir une règle CSS stipulant que tous les titres H3 se trouvant
C:
:::J dans les div actualités vont s'afficher de telle manière.
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0
u
Copyright© 2014 Dunod.
...
QUATRIEME PARTIE

WordPress
côté coulisses

-0
0
C:
:::J
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0
u
Copyright© 2014 Dunod.
10
WordPress
et le multisites

-
10.1 PRESENTATION

Le multisite est une fonctionnalité relativement méconnue de WordPress. Elle


peut pourtant s'avérer intéressante.
Il existait une version spéciale et dédiée de WordPress permettant de
gérer le multisite : WordPress MU (ou multiutilisateurs). Le principe est de
concentrer plusieurs sites web possédant chacun leur administration mais
-0
0 sur une seule installation. Ces sites font alors parti d'un même réseau et
C:
:::J
0 partagent la même installation, mais attention, ce sont des sites séparés et
s:t
,-i indépendant les uns des autres.
0
N
@ Qui dit son propre site dit son propre contenu, son propre thème, ses
...., propres plugins, etc. En d'autres termes, un autre site WordPress complet! Il
.c
Ol
·;:: suffit d'une seule mise à jour sur l'installation mère pour mettre à jour tous
>-
c.
0
ses sites enfants et une seule sauvegarde suffit pour tous les sites.
u
WordPress incorpore cette fonctionnalité nativement, mais il faut l'activer.

Le multisite est conseillé pour : des réseaux de blog, un intranet, créer


son propre réseau social et pourquoi pas pour des sites multilingues.
192 Chapitre 1O. WordPress et le multisites

10.2 ACTIVATION DE L'OPTION MULTISITE

Avant toute manipulation, il est vivement conseillé de sauvegarder votre site


en entier (voir chapitre 11 ).
1. Activation dans wp-config.php
Il suffit d'ajouter la ligne de code suivante dans le fichier wp -
config.php qui se trouve à la racine de votre installation Word-
Press :define ('WP_ALLOW_MULTISITE', true) ;
Cela aura pour effet l'ajout d'une section Réseau dans l'onglet Outils
(figure 10.1 ).

Figure 10.1 - Section Réseau

2. Création du sous-réseau
Après avoir cliqué sur la sous-partie « Création du Réseau» et
renseigné les différents champs relatifs à votre réseau, une page
s'ouvre nous invitant à su ivre 2 étapes (figure 10.2).

-a Copiez col ler les deux codes fournis aux deux endroits indiqués.
0
C
:J 3. Reconnexion et Fin !
0
'tj" Il est nécessaire de se reconnecter à l'espace d'administration. U n
,-i
0 nouveau signet, nommé « Mes Sites» a fait son apparition dans le
N
@ coin supérieur gauche (figure 10.3), ainsi qu'une nouvelle rubrique
..... dans la barre latérale. Vous êtes maintenant un Super Administrateur!
.!:
Ol
·;::
>-
a.
0 Remarque Importante - On peut vite se perdre. Il y a maintenant deux types
u
de tableaux de bords : celui du site père et celui du réseau.

,.
10.3 L'INTERFACE D'ADMINISTRATION DU RESEAU

Le compte Super Admin permet de gérer le site principal, mais surtout


l'ensemble de son réseau des (sous-) sites (figure 10.4).
10.3 l'intelface d'administration du réseau 193

Créer un réseau de sites WordPress


Activer le réseau de sites
Suivez les étapes cf-après pour activer les fonctiorvtalités permettant la création d'un réseau de sites.

1 Attention : nous vous recommandons de faire une copie de salNegarde de vos fichiers wp-config . php et . htaccess actuels.

1. AJoutez lesllgn.essurvantesâvotrefichler wp-confic; .php .dans C:\wa11p\www\llon·si u/ . au·dessusdelaltgne r c>est t out , nt>
touchez pas à ce qui suit I Bon blogging 1 •/ :

dofine('HULTISITE". true);
define( ' SUBOOMA.I N_INSTALL ', false);
de-f ine( 'OOMAIN_CURRENT_sne · , ' localhost · );
define(' PATH_CURRENT_SITE •• '/mon-site/.);
define ('SITE_ I O_CURRHJT_ SITE' , 1);
dofine(' BLOG_ ID_CURREfff_ SITE • , 1);

2. Ajoutez les lignes suivantes â votre fKhier .ht.tccess , dans C: /wMp/-/rJtOn- sit@/ . en remplacement des autres règles liées â
WordPress:

RewriteEngine On
Rewriteease /mon ~slte/
Re-writeRule "'index\ . php$ - (l)

fiadd a trailing slash to /wp- adrdn


RewriteRule "((_0-9a- z.A- Z- J+/)?wp - ad.11in$ $1wp-admin/ [R=301.,L)

RewriteCond ~REQUEST_ FILENAIIE} - f (OR)


RewriteCond ~REQUEST_FILENAME} · d
Rewl"iteRule " - ( L)
RewriteRule "((_0- 9a- z.A- Z- )+l)?(wp - {conte nt l adminl include s) . ..-) $2 ( L)
RewriteRule '(LG-90-2• - Z· J•/)1( .•\.php)S $2 [l)
RewriteRule , index. php ( L1

une fOts les étapes effecruées. votre r~au sera actlVê et configuré. vous devez maintenant vous reconnecte<.~

Mero' de faire de wordPress 1/0tre outil de «ê<roon. verslOO 3.a1

Figure 10.2 - Les deux étapes à suivre

• La rubrique Tableau de bord


Cette rubrique permet de chercher rapidement un utilisateur ou un
site (figure 10.5), mais surtout de créer un nouveau site et un nouvel
utilisateur.
-a • La rubrique Sites
0
C
:J Cette rubrique permet de lister tous les sites des utilisateurs.
0
'tj"
,-i
0
N Note - En plus d'être automatiquement ajouté à la liste des sites, le sous~site
@ sera également ajouté à la liste des utilisateurs.
.....
.!:
Ol
·;::
>-
a. En survolant avec la souris le nom d'un site, un sous-menu apparaît.
0
u Il permet notamment de modifier le site, mais également de se connecter
automatiquement à son back-office (figure 1O. 7).
• La rubrique Utilisateurs
Cette rubrique liste tous les utilisateurs qui possèdent leur propre site
ainsi que les utilisateurs du site principal. Le super Administrateur peut
aussi éditer les informations de chaque utilisateur.
194 Chapitre 1O. WordPress et le multisites

Admin du réseau
\

Tableau de bord Tableau de bord


Aujourd'hui

Bienvenue dans V
Créer un nouveau site I Cré, Voici quelques liens po1
Vous avez 2 sites et 2 utilisate
Lancez-vous !

Chercher un utilisateur Personnalisez votre

ou alors. changez complèten

D'un coup d'œil

;1- 1 arucles
• 3 commentaires

WordPress 3.8.1 avec le thèm<

Figure 10.3 - Les deux Tableaux de bord. On peut vite s'y perdre !

-0
0
C:
:::J
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0
u

Figure 10.4 - Le compte Super Admin


10.3 l 'intelface d'administration du réseau 195

Tableau de bord
Aujou rd'hui

Créer un nouveau s,te J Créer un nouvel utilisateur

Vous avez 2 sites et 2 utilisateurs.

Chercher un utilisateur

Chercher un site

Figure 10.5 - Rubrique tableau de bord Super Admin

Sites Ajouter

Chercher un site

Actions groupées EJ Appliquer ~ El 2 élémenrs

0 Chemin Dernière mise à jour Inscription Utilisateurs

/mon-site/ Jamais 2014/01/30 Simon

0 /mon-site/site-enfant/ 2014101/30 2014/01/30 site~nfant

D Chemin Dernière mise à jour Inscription Utilisateurs

Actions groupées EJ Appliquer 2é.lé.menrs

-0
0
C:
:::J
Figure 10.6 - Listing des sites
0
s:t
,-i
0
N
• La rubrique Thèmes
@
...., C'est à cet endroit qu'il est possible d'activer (ou non) les différents
.c
Ol
·;:: thèmes disponibles pour ce réseau de sous-sites. C'est à l'utilisateur
>-
c. final que reviendra le choix de ses thèmes activés dans son espace
0
u d'administration propre.
Les thèmes utilisés sont les mêmes que ceux du site principal. Aucune
modification de leur code source n'est nécessaire.
• La rubrique Extensions
Cette rubrique permet de gérer les différentes extensions que les sous-
sites pourront utiliser.
196 Chapitre 1O. WordPress et le multisites

Sites Ajouter

Actions groupées EJ Appliquer

0 Chemin Dernière mise à jour

/mon-site/ Jamais

D /mon-site/site-enfanu 2014/01/30
Modifier Tableau de bord Désactiver
Archiver Indésirable Supprimer Visiter

0 Chemin Dernière mise à jour

Figure 10.7 - Édition d'un site : accès rapide à diverses parties

• La rubrique Réglages
Elle permet de régler les paramètres du réseau.
• La rubrique Mises à iour
De cet écran, il est facilement possible de mettre à jour tout ce qui
concerne le réseau (extensions, thèmes, etc.)

~
10.4 MARCHE A SUIVRE POUR CREER UN SOUS-SITE
-
Dans l'interface d'administration du réseau :

• On crée un sous-site que l'on peut par exemple appeler « Mon Site
-0 Enfant» en se rendant dans la sous-section Ajouter de l'onglet Sites.
0
C:
:::J • L'administrateur du nouveau site va recevoir ses codes d'accès et il
0
s:t pourra s'y connecter.
,-i
0
N
@
....,
.c
Ol
·;:: 10.5 CHOIX DE LA FACON
, D'INSTALLER LES
>-
0
u
C.
SOUS-SITES

li est possible de choisir la façon dont on atteint les sous-sites par rapport
au site père. Soit en sous-domaine «mon-sous-site.mon-site.corn» ou en
sous-dossier« mon-site.corn/mon-sous-site».
10.5 Choix de la façon d'installer les sous-sites 197

Ajouter un nouveau site

Adresse du site localhosumon-site/


site-enfant
Seuls les lettres minuscules (de a à z) et chiffres sont autorisés.

Titre du site Mon Site enfant

Adresse de contact de
radmlnistrateur

un nouvel utilisateu r sera créé si l'adresse de contact n'existe pas dans la base de données.
L'identifiant et le mot de passe seront envoyés sur l'adresse de contact Indiquée.

ifuéhèii

Figure 1 0.8 - Création du site « Mon Site Enfant »

Pour changer d'installation, ouvrez le fichier wp-config.php et repérez


cette ligne :
define( 'SUBDOMAIN_INSTALL:', true );
false : correspond à la façon de nommer par sous-dossier « mon-
site.com/mon-sous-site ».
true : correspond à la façon de nommer par sous-domaine « mon-sous-
site.mon-site.com ».

Remarque - Certains serveurs supportent mal les sous~domaines. Comme


-a pour les permaliens, vérifiez b ien que le mode « mod_rewrite module » est
0
C
:J
activé ( il est rare que ce ne soit pas le cas).
0
'tj"
,-i
0
N
@
.....
.!:
Ol
·;::
>-
a.
0
u
Copyright© 2014 Dunod.
11
Maintenance

11.1 SAUVEGARDER WORDPRESS


Introduction
Comme vous l'avez remarqué lors de son installation, WordPress fonctionne
avec une base de données. En plus de sauvegarder tous les fichiers de
WordPress, il est également nécessaire de sauvegarder cette base de données
(figure 11.1 ).

WordPress

-0
0
C:
:::J
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0
u Fichiers WordPress Base de
données

Figure 11.1 - Fichiers et base de données : éléments pour sauvegarder WordPress


200 Chapitre t t. Maintenance

Sauvegarder les fichiers


Pourquoi?
Les fichiers contiennent notamment toutes les images que vous avez télé-
chargées, tous vos médias, tous les plugins que vous avez installés, tous vos
thèmes, votre fichier de configuration, etc. Il est donc très important de tout
sauvegarder.

Comment faire ?
Il suffit simplement de sauvegarder (transfé rer sur votre o rdinateur) tous les
fichiers (ou le dossier) qui concernent WordPress. Ces fich iers sont les mêmes
que ceux qui ont été « uploadés » par FTP.

Sauvegarder la base de données


Pourquoi?
La base de données SQL contient votre site (articles, pages, liens vers les
images), les utilisateurs, leur mot de passe, la liste des plugins activés,
les réglages, les options, les commentaires, etc. Une sauvega rde est donc
nécessaire.

Comment faire ?
Rendez-vous dans l'interface de phpMyAdmin qui permet de gérer la base
de données de votre hébergement. Il n'y a pas d'inquiétude à avoir, aucune
connaissance en SQL n'est requise.
Si vous possédez plusieurs bases de données, choisissez celle dans
laquelle Wo rdPress est installé, dans le menu de gauche. Lorsque vous
-a vous trouverez à l'intérieur de celle-ci, vous pou rrez apercevoir son contenu
0
C
:J (figure 11 .2).
0
'tj"
Note - Un WordPress fraîchement installé, dispose de 11 tables de don nées.
'\t
,-i
0
N
Cependan t, plus vous installez de plugins, plus vous aurez de chance de retrouver
@
..... J, l'{{ . un nombre plus élevés de tables de données .
.!:
Ol
·;::
>- Cliquez ensuite sur l'onglet « Exporter» (figure 11 .3). Puis, en bas de
a.
0
u page, cho isissez votre format et cliquez sur« Exécuter».
Une fenêtre apparaît alors vous demandant d'enregistrer cette archive
(figure 11.4). Conservez-la précieusement: c'est toute votre base de don-
nées!
C'est terminé. Votre base de données et vos fichiers sont maintenant
sauvegardés.
11.1 Sauvegarder WordPress 2·01

c;'il localhost » 8 wordpress ;;;


phpMyAdmin
t:tA1 G. ~ ~ct )'Il Structure Q SOL -.. Rechercher Requête <,l, Exponer • plus

j (Tables récentes)... EJ] Table • Action Lig

O wp_commentmeta 1::J Afficher k Structure -t Rechercher !'• Insérer if Vider O Supprimer


l:!rl!J wordpress
0 wp_comments t.:J Afficher }' Structure -t Rechercher ?è lnserer li=f Vider O Supprimer
O wp_llnks iiJ Afficher }t Structure -t Rechercher }è Insérer if Vider O Supprimer
O wp_options ,.J:J Afficher y Structure ~ Rechercher ?è Insérer 1Jiii Vider O Supprimer
O wp_postmeltl 1w Afficher ;J,i Structure -' Rechercher }• Insérer ~ Vider O Supprimer
O wp_posts Q Afficher }:_ Structure -t Rechercher ?è Insérer lj; Vider O Supprimer
O wp_tenms 1::1 Afficher j,:i Structure _. Rechercher !'' Insérer ~ Vider O Supprimer
O wp_tenm_relationships Ë] Afficher '}:: Structure t Rechercher ?è Insérer i\i Vider O Supprimer
O wp_tenm_taxonomy ËI Afficher Y.! Structure -t Rechercher !'• Insérer if Vider O Supprimer
O wp_usenmeta [:] Afficher }:: Structure t Rechercher ?è Insérer l!lî Vider O Supprimer
O wp_users 1iJ Afficher y Structure ,-t Rechercher ?è Insérer IJiii Vider O Supprimer
11 tabl es Somme

L 0 Tout cocher 1Pour la sélecbon :

~ Version imp,imable f!i Dictionnaire de données

r 'Il • H (1 • 1 1 l

Figure 11.2 - Contenu de la base de données de WordPress après son installation

phpMyAdmin ['.'Il localhost • e wordpress A

}[ Structure Q SQL ~ Rechercher G' Requête i,;:J. Exponer • plus


t:t Il ~ @ ID et
[{rables récentes) .. =sJ
Exportation des tables depuis la base de données
l±tiJ wordpress
«wordpress»

Méthod e d'exportation :

® Rapide - n'afficher qu'un minimum d'options


0 Personnalisée • afficher toutes les options possibles

-0 Format :
0
C:
:::J 1 SOL
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0 Figure 11 .3 - L'onglet Exporter
u
202 Chapitre t t. Maintenance

phpMyAdmin
~ILi@é-'1C:

~ Structure I:J SQL il 4 Rechercher I L. Requête ~ Exporter 1 ,,. plus

-
1 (Tables récentes) ... Bi
Exportation d:- ~ '· ' - i...
3
- ..... _ ..... _ _
· - •-
f:!:n.,,, wordpress Ouverture de wordp,ess.sql
«wordpress» Vous avez choisi d'owrir:
D ,-c1press.sq1
Méthode d'exportation : qui est un fichier de type : sql File
à partir d•: http://localhost
@ Rapide • n"affich,
Que doit faire Firefox avec ce fichier ?
0 Personnalisée •
O Quvrir avec [ earcouri,...
Format: 0 FlashGot pyl oad

0 !oujours effectuer cette action pour ce type de fichier.

( Exécuter )

OK 1 [°Annuler

l!===============================:!.lû
Figure 11 .4 - Exportation de la base de données

Cas spécifique : les options de thème


Qu'est-ce que c'est ?
Dans une grande majorité des templates achetés sur Internet, la plupart pos-
sèdent une rubrique« Themes Options» dans le back-office de WordPress.
Comme son nom l'indique, c'est l'endroit permettant de gérer et configu-
rer les options du thème en question (la couleur principale, la police utilisée,
les options d'affichage, etc.).
Il existe différents plugins qui permettent de mettre en place cette
fonctionnalité (Option Tree étant un des plus connus).

-0
0
C:
:::J
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0
u

Figure 11.5 - Exemple de la rubrique « Theme Options »


11.2 Mettre à jour WordPress 2·0 3

Comment les sauvegarder et les restaurer ?


En sauvegardant la totalité de la base de données ainsi que les fichiers, il
y a de grandes chances que ces options de thème ne soient pas incluses. Il
faut donc exporter ces données ! Par chance tout est prévu dans la majorité
de ces plugins : il y a une rubrique« import/ Export» qui permet d'exporter
ces fameux paramètres.

Thème Advanced Options

J:l Common
Import/Export
~ Logo and Favtcon
Settings elk>v, to monage site importing.,e,i:portirg

CD Sideba~

t:i:il Footer
Import site
Browse Import site
Allows to import the site from the
~ Contact Form
exporte<! füe

(? Custom JS/CSS

C Import/Export
Import DEMO site Import OEMO site
Allows to import the site DEMO provided
A Fonts
by develope~

Export Site Content Download Export A le

Allows to export site content and settings

IMM:iW
-0
0 Figure 11.6 - Interface de gestion de l'export et de l'import des options du thème
C:
:::J
0
s:t
,-i
0 Il en résultera un fichier xml que vous pourrez importer (ou sauvegarder)
N
dans la nouvelle adresse du site.
@
....,
.c
Ol
·;::
>-
c.
...
0
u 11.2 METTRE A JOUR WORDPRESS

Avertissement
Avant chaque mise à jour, pensez à faire une sauvegarde de votre base de
données et des fichiers WordPress.
204 Chapitre t t. Maintenance

Personne n'est à l'abri d'une mise à jour qui se passe mal. Si le cas devait
se présenter, les sauvegardes que vous aurez effectuées vous permettront de
revenir à la version précédente.
Vérifiez que votre hébergement possède bien toutes les caractéristiques
requises pour pouvoir accueillir la nouvelle version de WordPress (PHP,
MySQL).
Enfin, désactivez tous vos plugins.

Mise à iour manuelle


Le but d'une mise à jour est de remplacer les anciens fichiers de WordPress
par les nouveaux. Mais attention, certains fichiers ne doivent surtout pas être
remplacés. Leur remplacement impliquerait en effet un risq ue important de
perte de données essentielles (images, templates, plugins). Voici la feuille de
route:
1. Obtention de la dernière version de WordPress
http://fr.wordpress.org/ (version française)
http://word press.erg/down load/ (version a ng lai se)
2. Décompression de l'archive
Un simple clic droit est nécessaire pour extraire l'archive (.zip)
contenant les fichiers de WordPress.
3. Remplacement des anciens fichiers
Voici l'étape la plus importante: il s'agit ici de remplacer les anciens
fichiers par les nouveaux. Vous devez tout remplacer, SAUF les
éléments suivants :
- le dossier « wp-content/plugins » ;
- le dossier « wp-content/themes » ;
-0
0
C:
- le fichier « wp-config.php » (normalement ce fichier ne figure
0
:::J pas dans la dernière version téléchargée, car il est créé après
s:t
,-i
l'installation de WordPress).
0
N
Visitez la partie d'administration de votre site. Si une mise à jour de la
@
...., base de données est nécessaire, WordPress le fera automatiquement
.c
Ol
·;:: pour vous. Il vous en informera et vous devrez alors cliquer sur un
>-
c. bouton (figures 11. 7 et 11.8).
0
u
4. Lancement de la mise à iour
5. Vérification et fin
En bas de page de l'administration, vérifiez que vous utilisez bien la
dernière version (figure 11.9).

Si c'est bien le cas, il est désormais temps de réactiver vos plugins !


11.2 M ettre à jour WordPress 205

~ WORDPRESS
Mise à jour de la base de données requise.
wordPress a été m,s à j our I Avant de vous laisser continuer, nous devons mettre à 1our la base de données.

Le processus de mise à jour p eut p rendre un certain temps, merci d onc pour votre patience.

1 Mettre à Jour la base de données de wordPress

Figure 11.7 - Notification de mise à jour de la base de données

~ WORDP'RESS
Mise à jour terminée
La base de données WordPress a été mise â jour avec succès !

Continuer

Figure 11.8 - Notification de fin de mise à jour de la base de données

Mise à iour automatique


Attention, chez certains hébergeurs cette solution ne fonctionne pas, mais
ils sont plutôt rares. Voici la marche à suivre. li suffit simplement de cliquer
sur la section « Mises à jour» du signet « Tableau de bord » de la barre
d'administration latérale, puis de cliquer sur le bouton « Mettre à jour
-a automatiquement» (figure 1 1. 10).
0
C
:J
0 Word Press téléchargera, décompressera et installera alors la dernière
'tj"
,-i
version très rapidement.
0
N
C'est terminé! Après avoir cliqué sur le lien « Aller sur le tableau de
@
..... bord», pensez à vérifier que vous utilisez bien la dernière version .
.!:
Ol
·;::
>-
a. R emarqu e - depuis la version 3.7 les mises à jour mineures se feront auto,
0
u matiquement. Par exemple, les versions 3. 7 .1, 3. 7 .2 et ainsi de suite seront
installées sans que l'utilisateur ait à s'occuper lui,même de la procédure. Ces
versions d'entretien servent souvent à diffuser des correctifs quand des failles
sont repérées dans le code. Notez que cette mise à jour automatisée est bien
spécifique aux versions mineures. Ainsi, lorsque sortira une version majeure
(comme 3.9 ou 4.0), l'utilisateur devra toujours s'en charger lui,même.
206 Chapitre t t. Maintenance

Il. Merci de f aire de WardPr ess votre outil de création. Version 3.8.1

Figure 11.9 - Nous disposons bien de la dernière version !

Mises à jour de WordPress


Dernière vérification le 17 mars 2014 â oh 28 min. Vérifier à nouveau

Vous avez la dernière version de WordPress.

Si vous souhaitez réinstaller la version 3.8.1- en_US, vou,s pouvez le faire ici. ou télécharger rarchWe pour la eèinstaller vous-même:

a
Mettre jour automatiquement Télécharger la version 3..8.1- en_us

Extensio ns
vos extensions sont toutes â jour.

Thèmes

Vos thèmes sont tous à jour.

Traductions
Vos traductions sont toutes à jour.

Merci de foire de Word~ss votre outil de criotion. Version 3.8.1

Figure 11.10 - Tableau de bord - Mise à jour de WordPress

.. ..
11.3 DEMENAGER WORDPRESS
WordPress et son URL
WordPress se construit entièrement (base de données, liens, images) à partir
-0
0
C:
de l'URL qui lui a été indiquée dans les options générales de l'espace
:::J
0 d'administration (figure 11 .11 ). Elle est donc très importante.
s:t
,-i
0
Cette URL est stockée dans la base de données. Il faudra donc la modifier
N
en cas de changement de nom de domaine.
@
....,
.c
Ol
·;::
>-
c. WordPress et son fichier« wp-config.php »
0
u
Le fichier« wp-config.php » est créé par WordPress uniquement lors de son
installation. Il contient des informations mySQL relatives à la connexion de
la base de données.
Ces informations sont :
• le nom de la base de données;
11.3 Déménager WordPress 2 ·0 7

Réglages généraux

Titre du site j Mon Site

Slogan un Sile utilisant wordPress


En quelques mots. dêa,vez la raison cterre de ce stte.

Adresse web de wordPress


http ://1NW .-on-site .com
(URL)

Adresse web du site (URL) h ttp: //IAWW . .-on-site .com

Si vous souhottei que fodresse de la page d'accueil de votre site soit diffêrenre du rêD(rta,re oil
vous avtz inscallt wordPress. saisissez cerre adresse ici.

Figure 11.11 - Options générales de WordPress

• le préfixe de la table;
• l'utilisateur de la base de données;
• le mot de passe de la base de données ;
• l'adresse de la base de données.

Souvenez-vous : il s'agit en fait des informations que WordPress avait


demandées lors de son installation. Elles étaient nécessaires pour la création
du fichier« wp-config.php ».
En cas de changement d'hébergeur (et donc de base de données), ces
informations devront être modifiées.

Déplacer un site WordPress entier


-0 Votre site WordPress doit être déménagé vers un nouvel hébergeur et il
0
C:
:::J
s'octroie un nouveau nom de domaine.
0
s:t Vo ici la marche à suivre pour réussir son déménagement:
,-i
0
N 1. Rapatriement de tous les fichiers WordPress en local
@
...., Comme pour la sauvegarde des fichiers, il est nécessaire de transférer
.c
Ol tous les dossiers de WordPress sur votre disque dur, grâce à un logiciel
·;::
>-
c. FTP.
0
u 2. Modification du fichier « wp-config.php »
Parmi les fichiers que vous venez de télécharger, le fichier « wp-
config.php » doit être édité. En effet, une nouvelle base de données
vous attend sur le nouvel hébergement.
Munissez-vous des renseignements nécessaires concernant la nouvelle
base de données (à voir chez votre hébergeur), puis éditez le fichier:
208 Chapitre t t. Maintenance

!** Le nom de la base de données*/


de f in e( 1 DB_NAME1 , 1 bibi -db1 ) ;
/ ** Le nom d utilisateur de l a base de données */
defineC'DB_USER1 , 1 uti l isateur 1 ) ;
/** Mo t de passe de la base de données */
defi ne(' DB_PASS~IORD1 , 1 mü t-de-passe1 l ;
/** Loca l isa tion de l a base de données */
define( 1 DB_HOST1 • ' adresse -de -l a-base') ;
/** Préfixe des tables de l a base de données de l' anc ien site*/
$table_prefix = 'wp_tab les_ancien_s ite' ;

3. Exporter la base de données


Voir pour cela la partie « Sauvegarder sa base de données» de ce
chapitre. Veillez à bien conserver cette archive d'export.
L:' ancienne URL du site doit maintenant être mise à jour afin que
WordPress puisse se reconstruire à partir de la nouvelle URL.
Pour cela, il faut directement agir dans le code source grâce à
NotePad++. Après avoir décompacté l'archive de l'export, vous
obtiendrez un fichier« sql » que vous ouvrirez alors dans NotePad + + .
Pour pouvoir remplacer l'ancienne URL par la nouvelle, vous pou-
vez utiliser la fonction « Rechercher/Remplacer « (figure 11 .12). Le
raccourci clavier CTRL + F permet l'ouverture d'une fenêtre contenant
plusieurs onglets. Choisissez l'onglet« Remplacer».

Remplacer ii
Rechercher I R!ffll)laœr I Rechercher dans les fid'iers d'un dossier.l
Recherche: www.vîeux-site.com
y
1 SUivant
1
Remll.4acer par : www.nouveau-site.fr y] 1 R~acer 1
D Dans sBl!Clion 1 Remplacer tout 1

1R~cer dans tous h!s J


documents ouverts
r] Mot entier !,!rOQUement
1ëJ Respecter la çasse 1 Anrder
-a 1
0 ~!!ouder
C
:J Mode de recherdle Direction fl] Transparence
0 @ Mode normal O t:iaut @ à la perte ru focus
'tj"
,-i ô Mode ~tenCkJ (v,, 'f' \t, '4), \x ...} @Il.as ô persistante
0 0 ç_xpression régulière ~
N
@
.....
.!:
Ol
·;::
>-
a. Figure 11. 1 2 - La fonction Rechercher/Remplacer dans NotePad++
0
u
Remplissez le champ « Recherche» avec l'URL de l'ancien site et le
champ« Remplacer par» avec la nouvelle URL.
Pour finir, cliquez sur le bouton « Remplacer tout». Une deuxième
fenêtre apparaît alors montrant le nombre d'occurrences remplacées.
C'est terminé! l'ancienne URL a disparu du fichier.
11.3 Déménager WordPress 2·0 9

4. Changement de l'URL dans l'export de la base de données


5. Uploader les fichiers WordPress vers le nouveau site
C'est le moment d'uploader les fichiers locaux (avec le nouveau fichier
« wp-config.php) » vers son nouvel hébergement, grâce à un logiciel
FTP.
6. Importer la base de données
La dernière étape consiste à importer la base de données. Pour
cela, rendez-vous dans l'espace d'administration de votre base de
données chez votre hébergeur. Dans cet espace d'administration
MySQL (phpMyAdmin par exemple), choisissez la base de données
adéquate (s'il y en a plusieurs), et cliquez sur l'onglet «Importer»
(figure 11.13).

php yAdmin i;:'J localhost , • wordpress :;;;:

~.i (i-e(D C } [ Structure Q SQL -4 Rechercher .Jl Requête ~ Exporter ~ lmponer • plus

[j_rables récentes) ... ~

I!)-s) wordp,ess Importation dans la base de données «wordpress»

Fichier à imponer :

Le fichier peut être comp1mê (gzip, z1p) ou non


Le nom du fichier comprimé dort se terminer par .(format].(compression). Exemple: .sql.zip

Parcourir : 1 Parcourir_ 1 Aucunfichiersélectionné. (Taille maximum: 2 048Kio)

Jeu de caractères du fichier : [ utf-8 =sJ


lmponation panielle :

~ Permettre rmterrupt1on de !importation si la hmrte de temps configurée dans PHP est sur le point d'être
atteinte. (Ceci pourra,/ aider à imporler des fichiers volumineux, au détronenl du respect des lransac/Jcns.)

Nombre de lignes à ignorer à partir de la première ligne · o_ _ _ ___,


._I

Format :

1 SOL BI
-0 oi:,tions spéeifiques au format :
0

0
C:
:::J Mode de compatibilité SOL : § E =a
@ Ne pas ut1hser AUTO_INGnŒNT pour la valeur zêro
s:t
,-i
0
N ( Exécute< )

@
....,
.c
Ol
·;::
>-
c.
Figure 11. 1 3 - L'onglet Importer
0
u
Cliquez sur« Pa rcourir» et allez chercher le fichier SQL créé aupara-
vant. Puis, cliquez sur le bouton « Exécuter» situé en bas à droite. Un
message confirmera alors la bonne exécution de l'importation .
Vous remarquerez que toutes vos tables sont présentes dans la
colonne de gauche.
210 Chapitre t t. Maintenance

Remarque - Par défaut, l'export SQL de la base de données recrée une base de
données. N'hésitez pas à supprimer cette ligne dans l'export SQL si vous n'avez
pas les droits (un message d'erreur vous préviendra).

7. C'est terminé !
En vous rendant su r le nouveau site, vous verrez que votre site
WordPress est désormais en p lace : la procédure de déménagement
s'est donc parfaitement déroulée ! (N'oubliez pas l'étape concernant
les options de thème décrite plus haut si vous utilisez un template
pré-fait).

Supprimer son site WordPress


1. Suppression des fichiers WordPress
Supprimez la total ité des fichiers WordPress.
2. Nettoyer la base de données
Bien que les fichiers n'existent plus, la base de données, elle, contient
encore les tab les de WordPress. Pour la nettoyer, il faut se rendre dans
l'espace d'administration de la base de données (phpMyAdmin) et
supprimer les tables de WordPress.

..
11.4 GARDER WORDPRESS EN BONNE SANTE

Sécuriser et améliorer WordPress


WordPress (comme beaucoup d'autres CMS) peut être la cible d'attaques
malveillantes ayant pour résultats des conséquences plus ou moins graves.
-a
0
C
Voici quelques plugins qui pourront vous prémunir de ces attaques. Bien
:J
0 entendu, ils ne vous dispensent pas de toujours bien veiller au respect des
'tj"
,-i règles de base (mises à jour WordPress, utilisation de mots de passe d ifficiles
0
N à trouver, protection des accès FTP, etc.) :
@
.....
.!:
• Admin Log
Ol
·;:: Permet de surveiller toutes les connections au back-office de Word-
>-
a. Press. Très utile pour vérifier les éventuelles tentatives de piratage :
0
u http://wordpress.org/extend/plugins/ad min-log/.
Du même type, il existe aussi le plugin « Login LockDown ».
• Secure WordPress
Supprime tous les éléments qui peuvent être utiles à un hacker (version,
requêtes malicieuses, message d'erreur ... ) :
http://wordpress.org/extend/plugins/secure-wordpress/.
11.5 Référencement et statistiques 211

• TAC (Theme Authenticity Checker)


Il peut arriver que seuls les thèmes soient infectés (notamment par le
biais d'injections de code malicieuses). Ce plugin permet de vérifier
que les thèmes sont « vierges » de codes néfastes :
http://wordpress.org/plugins/tac/
• WP Rocket
Plugin français. Lorsque vous construisez votre site avec WordPress et
que celui-ci commence à être fourni ou très visité, ou que vous achetez
un thème pro sans trop le connaître, vous pouvez rapidement tomber
sur certaines longueurs lors du chargement de pages (trop de requêtes,
Serveur un peu faible, trop d'images ... )
http://wp-rocket.me/
• UpdraftPlus
Le plugin ultime pour sauver votre site en un clic : images uploadées,
thèmes et base de données. Attention, les fichiers d'installation de
WordPress ne sont pas compris. En cas d'attaque, la meilleure méthode
consiste à restaurer le site. https://wordpress.org/plugins/updraftplus/
• Protéger le fichier « wp-config.php »
Ce fichier, créé au moment de l'installation, contient des informations
essentielles : le nom de votre base de données, vos identifiants,
etc. Même cryptés, ces éléments restent sensibles. Grâce au fichier
« .htaccess » se trouvant à la racine de votre WordPress, il est possible
d'y interdire l'accès en insérant ce code :

1 <FilesMatch Awp -con f ig.phpS>deny from all</FilesMatch>

Webmaster Google tools


-0 Ce service de Google (figure 11 .14) est dédié aux personnes propriétaires
0
C:
:::J
d'un ou plusieurs sites. Il se révèle très pratique pour optimiser le réfé-
0 rencement du site, analyser des statistiques ou encore pour forcer Google
s:t
,-i
0
à réexaminer votre site en cas d'attaque ou de virus sur votre site. Pour
N
pouvoir utiliser ce service, vous devez disposer d'un compte Google (création
@
...., gratuite) .
.c
Ol
·;::
>-
0
u
c.
.. ..
11.5 REFERENCEMENT ET STATISTIQUES

Conseils et plugins
WordPress possède des qualités indéniables pour le référencement naturel
vu qu'il respecte et n'interfère pas avec la qualité de votre intégration
HTML/CSS, mais rien ne vous empêche de l'améliorer en suivant ces
quelques règles :
212 Chapitre t t. Maintenance

Go gle ••• s11non ktn'N

Outils pour les webmasters

Acc::ueil
Bienvenue dans les
Tous les messages
outils pour les ,_, ~n ,-,r ~ 1 < 0
webmasters
Autres ressources
Bénéficiez de données, d'ouUls et de
diagnostics pour un site sans erreurs et
facilement explorable par Google. Voici
quelques conseils:
• Vértflez l'état de santé de votre Site pour tratter les
~ntuek pro~mes détKtk par Googte.
• Identifiez Ses te-ndances en termes de trafic ISSU de
la recherche sur vocre stte et dkouwez comment
les Internautes trouvent celui<!.
• 0pom1sez votr e Site pou r q..tll son m1eux analyse et
représente dans les resultats de recherche Goog!e.

Pour commencer. a,outez votre site.

vMwtxarnplt. com
Eh· l..f..li/FMM

Figure 11. 14 - Outils Google pour les webmasters

• Activer vos permaliens


Les permaliens sont importants, ils permettent une meilleure lisibilité
des URL.
• Du contenu de qualité
Utilisez des titres précis, décrivez vos images (attribut« ait»), utilisez la
sémantique (titre h 1, h2, h3, paragraphe, liste ... ).
• Des échanges de liens
Échangez des liens avec d'autres sites est primordial. N'oubliez cepen-
dant pas d'échanger des liens de qualité vers des sites de confiance.
• Mettre à iour votre sitemap
Google aime les sitemaps, qui sont de véritables cartes d'identité
-a du contenu de votre site. Il est donc important de le mettre à jour
0
C régulièrement. Heureusement des plugins existent pour cela (par
:J
0 exemple Google XML Sitemaps :
'tj"
,-i
0
http://wordpress.org/plugins/google-sitemap-generator/)
N
@
• Choisir ou non WWW dans son nom de domaine
.....
.!:
À vous de choisir si vous souhaitez garder le « www. » dans l'URL de
Ol
·;:: votre site. Puis tenez-vous à ce choix précis. Dans le cas contraire,
>-
a. Google risquerait de prendre ces deux adresses (avec www et sans)
0
u pour du contenu dupliqué, ce qui peut être très nuisible au bon
référencement.
Ce réglage s'effectue dans les options générales de WordPress et dans
le fichier« .htaccess ».
Si vous souhaitez afficher les« www », voici le code adéquat:
11.5 Référencement et statistiques 213

Rewrite Engine On
Rewr iteC ond %{HTTP_HOST} !Awww\ .simon-k\ .com [NCJ
1 Rewrite Ru le ( . *) http : //www .s imon -k.com/$1 [OSA,R=301,L]

• Des thèmes de qualité


Utilisez toujours des templates de qualité. Entendez surtout par là des
thèmes respectant les standards HTML /CSS/ JS en limitant le nombre
de requêtes serveur PHP au minimum.
• Un plugin pour le référencement
Le plugin « Ali in one SEO Pack » vous permettra de gérer en p ro-
fondeur tous les paramètres pou r optimiser votre référencement
(http://wordpress.org/extend/plugins/all-in-one-seo-pack/).

Google Analytics
Google Analytics est un outil poussé qui permet de visualiser en détail les
statistiques de fréquentation d'un ou plusieurs sites Internet (figure 11.15).
Cet outil gratuit est proposé par Google. Pour pouvoir l'utiliser, il faut
posséder un compte Google. Si ce n'est pas le cas, vous pouvez le créer
gratuitement et rapidement sur google.com.

--- -
,--
e-

a •

..----
·-----
-- --
·-·--
--....... -'*' .........
--- . . ••tu.,... .......

--__ -·-
-0
0 - &I..Jt 'li,\. .... ......
C:

0
:::J

s:t
,-i
--
_,

---
0 .. ... ... ,IM,l1, ......
N
- -
@
....,
.c

·--
·::-:~
Ol
·;::
>- ----
c.
·-~-
-=----=
0
u
-- --
Figure 11 .15 - Interface de Google Analytics
214 Chapitre t t. M aintenance

Création d'un compte Google Analytics


Lorsque vous êtes connectés dans Google Analytics, il est tout d'abord
nécessaire de créer un compte. Un compte représente en fa it un site Internet
qui va être « surveillé ».
Lorsque ce compte est créé, Google Analytics vous demande d'insérer
un bout de code JavaScript dans le code source de votre site.
Vo ilà à quoi ressemble ce code :

<script type= "text/javascript ">


var _gaq = _gaq 1 1 [J;
_gaq. push( [1_setAccount1 , 1UA · 4242221 · 51 J l;
_gaq . push( [1_trackPagevi e1J J);
(funct ion(l {
var ga = document .createElement( 1 script 1 ) ; ga.type = 1 text/javasc r ipt ;
ga.async = true ;
ga .src = ('https :' == document.location .protoco l ? ' ht tps ://ss l'
1
http : //www1 ) + ' .goog le·ana lytics.com/ga .js' ;
vars= document.getE lementsByTagName('script'l[O];
s . parentNode . i nsertBefore(ga , s);
))();
<!script>

Insertion dans le template


Copiez le bout de code généré par Google Analytics, puis insérez-le dans le
fichier « footer.php » de votre thème, avant la balise </body>. C'est aussi
simple que cela.

'O
0
C
:J
0 Nom1' Rapports État
'tj'
,-i
0
N
@
.....
.!:
Ol Afficher le rapport ~
·;::
>-
a.
0
u

Afficher le rapport ~

Figure 11. 16 - Espace d'administration


11.5 Référencement et statistiques 215

Sachez qu'il existe des plugins pouvant s'occuper eux-mêmes de l'inser-


tion du code dans le template. Parmi ceux-ci, on trouve :
• Google-analyticator : http://wordpress.org/extend/plugins/google-
analyticator/.
• Ultimate-google-analytics : http://wordpress.org/extend/plugins/
ultimate-google-analytics/.

Utilisation de Google Analytics


De retour dans l'espace d'administration de Google Analytics (figure 11.1 6),
vérifiez bien que l'État est validé, ce qui prouve que le code inséré précé-
demment a bien été repéré. La liaison est désormais établie.
Enfin, cliquez sur le lien « Afficher le rapport» pour voir apparaître les
statistiques de fréquentation du site. Il est possible à cet endroit de connaître
la provenance géographique des visiteurs ou les sources du trafic, de savoir
quelles pages ont été visitées, etc. (figure 11.17).

Tilbleau de t>ord

..._... [J- •
l mifKIIII

.__..,.""__
-
....
-..
.;.- _ , ,
. . . -....u,
, ,_
--»- t 030000 v,.1- ~ 84,17 '9 T-,4•Mbo-
..._ ,...... __).Jv,.. 1 24000 P,l9\'t YUh .,JcJ...,-. 00;4.S;OO T..,.,..cif*l'l ....•MNt-.-.,
.!'-..-•'-'
il- ·°"'"'*' - 1SP:aiee•P"'viW - 91,94 %,,.,_...., VttdNC- '1,1

u ooooo-

-a

-
0

...
_
C
:J •li_,._
-' ....
0
·--"..
.A(:. ....
t1•H•• V°'
'tj"
«IHl'fn"-'
,-i
0
N .........~ ,
@
..... •:ID,l(;MGI• c,,:,;,.oll••- 1C..-,,,.,1o111..- l lli,il,l•IIIC61Nolill,ollf. C..W1o1..n- a,.._ :;.,,•io,4,ü,;S•oill ...._,.
.!:
Ol
·;::
>-
a.
0 Figure 11.17 - Vue des fréquentations d'un site Internet dans Google Analytics
u
Copyright© 2014 Dunod.
12
WordPress
côté nomade

12.1 GÉRER SON WORDPRESS N1MPORTE OÙ

Vous êtes un ou une aventurière ? Vous ne pouvez pas rester en place ? Ou


vous n'avez tout simplement pas le courage d'allumer votre ordinateur pour
gérer votre WordPress ? Pas d'inquiétude, votre site WordPress va vous suivre
partout!

-0
0
C:
:::J Applications Wordpress : Apple, Android, Windows Phone et
0
s:t
,-i
BlackBerry
0
N
@ Pour mettre à jour votre site à partir de votre mobile, il est bien entendu
....,
.c possible de passer par le navigateur Internet de votre smartphone pour vous
Ol
·;::
>- connecter à votre back-office. Nous allons en parler dans la partie suivante.
c.
0
u Automattic, la société créatrice de WordPress, développe des applications
spécifiques pour pouvoir gérer votre site à partir de vos smartphones.
Les applications permettent un accès rapide et simplifié à votre espace
d'administration.
Des modes d'emploi (vidéos et textes) pour chaque application vous
attendent pour débuter facilement. Rien de bien compliqué néanmoins :
218 Chapitre t 2. WordPress côté nomade

après l'installation, il faut insérer vos identifiants et vous avez désormais


accès à votre back-office optimisé pour smartphone.

WoRDPRESS
tor iOS

Agure 1 2.1 - WordPress pour iOS (!phone, lpad)

~ WoRDPRESS for Android Download Development Blog Help

6 R•ad great blog postS and lollow your lavome sites


I!'-- with the Reader.

Q Create beaulllul Posts and Pages wlJh your latest


Photos and Videos.

~ Engage wiJh the community through Commems and


Nouf,callons.

,.t Stay up-to-date with detalled Stats.


-0
0
C:
:::J MIMMIH.f.W
0
s:t
,-i
0
N
@
....,
.c Figure 12.2 - WordPress pour Android
Ol
·;::
>-
c.
0
u

Zoom sur l'application lphone


Voici un rapide mode d'emploi pour installer et utiliser l'application officielle
de WordPress sur lphone. Le fonctionnement est similaire avec les autres
plateformes.
12. 1 Gérer son WordPress n'importe où 219

Étape 1 : installation
Rendez-vous dans I' App Store puis télécha rgez et installez gratuitement
l'application WordPress.

••••• Free "? 21:03 V 77%~

O. wordpress 59 résultats 0

m Opé<eteu1 9
WordPress
Automattic
**** -1:t (7)

18 02

Blogs I Follow
!+GRATUIT 1

.....

#
~ WordPrtss.com Ne,ws
· ~ (/ Il~ IVI'

How To Be a WordPress.com
Detective
Las, year. we looked ac the art and science
of getting good WordPress support. 10

~
--
Sélection Classements A proximité Recherche M,ses à jour

-0 Figure 1 2.3 - WordPress pour Android


0
C:
:::J
0
s:t
Étape 2 : lancement et paramétrage
,-i
0
N Lancez l'application, vous arriverez sur une page avec un formulaire à
@ deux champs. Ces champs sont réservés si vous avez un site sur la plateforme
...., 11
.c
Ol
WordPress.com 11 (figure 12.4). Nous possédons notre propre hébergement
·;::
>- donc nous allons cliquer sur« Ajouter un site auto-hébergé». Trois champs à
c.
0
u remplir apparaissent (figure 12.5). Après connexion, notre site est accessible
(figure 12.6).
220 Chapitre t 2. WordPress côté nomade

Figure 12.4 - Champs qui apparaissent par défaut

~ simon

ai ...................... ~

-0
0
C:
:::J
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0
u

Figure 1 2.5 - Champs nécessaires pour se


connecter à notre site « Auto hébergé »
12. 1 Gérer son WordPress n'importe où 221

••••• Free 9 21 06 o 77 % • ,

Mod1f1er Moi Réglages

~J Blog :: Simon Kern :: Art... ,

Ajouter un Site

Figure 12.6 - L'accès à notre site WordPress

Étape 3: découverte de l'application


Cliquez sur votre site: vous arrivez au menu où il est possible de publier
des articles, des pages et visionner les commentaires (figure 12.7). Mais
attention, si votre thème utilise des articles personnalisés (custom post type)
ou autres éléments qui ne sont pas là par défaut, il vous sera impossible de
les visionner sur l'application ! De même pour les options, elles ne sont pas
aussi complètes que la version en ligne (figure 12.8).

-0
Étape 4 : Publication d'un article ou d'une page
0
C:
:::J Vous arriverez sur une interface simplifiée avec le renseignement d'un
0
s:t titre et du contenu. Chose intéressante, il est possible de publier une photo
,-i
0 directement après l'avoir prise (bouton en bas à gauche), option qui n'est
N
@ pas disponible sur la version en ligne.
....,
.c
Ol
·;::
>-
c.
0
u Zoom sur le back-office mobile
Nous venons de voir les applications téléchargeables dans les différents
stores.

Voyons maintenant ce que donne l'interface de WordPress si on navigue


directement dans le navigateur web de notre smartphone.
222 Chapitre t 2. WordPress côté nomade

••••• Free 9 21·01 o 77 % • •

( Blog:: Simon Kern :: Art Oirecto...

.,,. Articles >

" Pages >

>

...'
Commentaires

Statistiques >

@ Voir le site >

a Voir l'administration >

0 Modifier le blog >

Leçt~,r

Figure 12. 7 - L'accès à notre site WordPress


-
••••• Free 9 21:46 o 7.: % • •

( Recour Options

Catégories >
Mots-clés 1 1

PUBLIER

-0 État. Publié >


0
C:
:::J Visibilité Public >
0
,;j-
,-i
Publier Immédiatement >
0
N
@ FORMAT D'ARTICLE
...,
.c Format d'article Par défaut >
Ol
ï:::
>-
C.
0 IMAGE À LA UNE
u
Régler l'image mise en avant

Figure 1 2.8 - Les options disponibles


12.2 WordPress et le responsive web 223

••••• Free 9 21:46 o 74 % •=


·
Annu ler Nouvel article

Saisissez un titre

Touchez 1c1 pour commencer à ecrne

Options

Figure 12.9 - Interface de publication

Étape 1 : connexion
Rendez-vous dans la partie d'administration (exemple: monsite.com/wp-
admin) - Figure 12. l O.

Étape 2: Visualisation de l'interface responsive


Que découvrons-nous ? Depuis la version 3.8, Wordpress s'offre une
interface totalement responsive et optimisée pour smartphone ! D'ailleurs,
il y a une grande différence avec les versions mobiles : nous avons accès
-0
0 à tout puisque c'est l'interface que l'on visite depuis toujours. C'est un vrai
C:
:::J bonheur: vous n'avez plus d'excuse!
0
s:t
,-i
0
N
@
....,
.c
12.2 WORDPRESS ET LE RESPONSIVE WEB
Ol
·;::
>-
c.
0 Avec l'essor des smartphones, beaucoup de personnes découvrent les joies
u
de la navigation sur Internet, sans être derrière un grand écran.
De nos jours, les smartphones permettent un affichage évolué : leurs
navigateurs Internet sont de plus en plus performants et plus rapides que
certains ordinateurs de bureau ou portables.
224 Chapitre t 2. WordPress côté nomade

••••o Free ~ 21:47 W 74 % . : )

simon-k.com C

~ WORDPRESS

Mol de passe_ _ _ _ _ _ __

OS. souv..,., de mo,


1++·1 ·iil 1

Mol dOj).lSSO oubl• 1

- Rotour sur B1oQ. S.mon l<em ;;_An OlreclO( &


CcealfW! Desqner

< > rn
Figure 1 2. 10 - Interface de connexion

Tableau de bord

D'un coup d'œil

Activité
-0
0
C:
:::J
0 Brouillon rapid e
s:t
,-i
0 Titre
N
@ Qu'avez-vous en tête 7
....,
.c
Ol
·;::
>-
c.
0 Enregistrer brouillon
u
Brouillons

Figure 12.11 - Tableau de bord de WordPress version mobile


12.2 WordPress et le responsive web 225

•••.o Free 9 22:00 1J 73 % 90

simon-k.com C

Optio ns persor

Couleu rs de l'lnte1

Raccourcis clavier

Activer les rac


modération de cor
d'informations (en

l'1 Afficher la bai


-0 visitez le site
0
C:
:::J
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0 Figure 1 2 .12 - Toutes les fonctionnalités sont présentes
u
226 Chapitre t 2. WordPress côté nomade

Mais attention, adapter son site pour qu'il s'affiche bien sur toutes les
plateformes n'est pas une mince affaire: des ouvrages entiers sont consacrés
au responsive web design !
Dans cette partie, nous n'aborderons donc que les grandes lignes.

Le responsive web design : les grandes lignes


Grâce aux feuilles de style CSS, nous allons pouvoir choisir les éléments
à afficher suivant le type de média utilisé. Rappelez-vous la règle d'or :
séparation du contenu et de la forme.
Lorsque l'on sait qu'un site va être responsive, l'intégration HTML / CSS
doit être réfléchie pour que chaque élément HTML puisse évoluer aisément
entre un affichage desktop (grand écran) et un affichage de smartphone
(petit écran): c'est les CSS du template qui vont s'occuper de l'affichage
suivant les largeurs de la fenêtre.
Le principe est simple : il s'agit d'insérer une ligne de code (dans la
balise <head> ou dans la feuille de style CSS) permettant de spécifier les
règles CSS à appliquer lorsque la page est affichée sur un smartphone.

Exemple en utilisant les « media-queries » (CSS3) :

@media only screen and (max-device-1~idth:480px) {


/* Règ les CSS qui s'appliquent pour des écrans in férieurs a 480px de
large*/
1 }

Exemple en utilisant la balise <link> :


-0
0
C:

0
:::J

s:t
,-i
1 <link rel= "stylesheet " type= "text/css " hre f="sty le/sty le-mobile.css "
media="handheld " !>
0
N
@ Voilà pour le principe de base ! Par exemple, si le site s'affiche sur
....,
.c smartphone, nous supprimerons l'image de fond, ainsi que la sidebar, nous
Ol
·;::
>-
modifierons la tail le du logo, la disposition du menu, la tai lle maximale des
c.
0 images, etc.
u
li faudrait également ajouter d'autres points de ruptures pour les tablettes
au format horizontal, puis au format vertical.
Mais il y a plusieurs façons de procéder et le responsive web design est
une discipline à part qui est maintenant incontournable : il faut s'y intéresser.
À vous de sublimer vos feui lles CSS de votre thème WordPress !
12.2 WordPress et le responsive web 227

Adapter son WordPress pour les mobiles en deux minutes


Sans être spécialiste du Web mobile, il est possible de rendre rapidement et
simplement son WordPress «ami» avec les mobiles, grâce à des plugins.
La plupart de ces plugins reposent sur un même principe : ils détectent le
visiteur mobile puis ils lui affectent un thème spécifique. Libre à vous ensuite
de le modifier (ou d'en crée r} pour personnaliser l'affichage de votre site
pour les mobiles.
Voici une liste de plugins qui transformeront votre WordPress en « mobile
friendly » :
• MobilePress : http://mobilepress.co.za
• WordPress Mobile Pack:
http://wordpress.org/extend/plugins/wordpress-mobile-pack/
• WPtouch 3 : http://wordpress.org/plugins/wptouch/
• Mobiloud : http://wordpress.org/plugins/mobiloud-mobile-app-
plugin/

-0
0
C:
:::J
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0
u
Copyright© 2014 Dunod.
Bibliographie

Jean-Pierre VINCENT, Jonathan VERRECCHIA, HTMLS, De la page web à


l'application web, Dunod, 2012.
Bill SANDERS, HTMLS pour le webdesign, Dunod, 2012.
Jean-Marie COCHETEAU, Laurent KHOURI, Tout sur HTMLS et CSS3, Dunod,
2012.
Vincent OLIVEIRA (de), Cédric ESNAULT, (553, le design web moderne,
Dunod, 2012.
Rodolphe RIMELE avec la contribution de Raphaël GOETIER, HTMLS : Une
référence pour le développeur web, Eyrolles, 2013.
Raphaël GOETIER, CSS avancées: Vers HTMLS et (553, Eyrolles, 2011.
Raphaël GOETIER, Sébastien BLONDEEL, CSS2 Pratique du design web,
Eyrolles, 2005.
-0 Jason TSELENTIS, Design graphique pour écrans, Ordinateurs, tablettes,
0
C:
:::J
smartphones, Dunod, 2013.
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0
u
Copyright© 2014 Dunod.
Webographie

Des ressources de qualité


Voici une liste de plusieurs sites (majoritairement anglophones) à mettre dans
vos favoris. Ils vous permettront de rester au fait des dernières nouveautés
de WordPress !

Les sites WordPress officiels


• http://wordpress.org : le site officiel de WordPress.
• http://codex.word press.org/Main_Page: le codex rassemble toute la
documentation technique disponible (notamment pour l'élaboration
de votre template).
• http://wordpress.org/extend/plugins: c'est un peu un « WordPress
-0
0 Store» où vous trouverez énormément de plugins (du coup également
C:

0
:::J des widgets).
s:t
,-i • http://www.wordpress-fr.net : La communauté francophone autour du
0
N CMS WordPress et son écosystème.
@
....,
.c Les sites magazines généralistes
Ol
·;::
>-
0
c. Ces sites procurent des articles de qualité sur de nombreux sujets : webde-
u sign, infographie, HTML, CSS, PHP, jQuery, WordPress, etc. N'hésitez pas à
vous y rendre très souvent !
• http://www.smashingmagazine.com
• http://sixrevisions.com
• http://www.noupe.com
• http://buildinternet.com
• http://www.instantshift.com
232 Sites Web avec WordPress

• http://designrfix.com
• http ://www.creativejuiz.fr/blog/
• http://wpchannel.com
• http://www.webdesignerdepot.com
• http://net.tutsplus.com
• http://www.alsacreations.com
• http://webdesignledger.com
• http://www.wpbeginner.com
• http ://www. wptavern .corn
• http://wpengineer.com
• www.catswhocode.com
• http://themeforest.net/
• http://www.rockettheme.com/

-0
0
C:
:::J
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0
u
Glossaire

Le vocabulaire du Web
Le Web dispose de son vocabulaire propre. Si vous n'y êtes pas
encore habitué, ce petit mémo pourra vous aider.
Back office - Espace d'administration d'un site Internet, sa partie privée.
Background - Fond/1' arrière-plan d'un site Internet.
Billet ou « Post» - Un billet (ou « post » en anglais) est un synonyme
du mot « article». Mais attention, les ressources anglaises de
WordPress utilisent le mot Post pour désigner du contenu (et pas
forcément un « article» comme un article de blog).
Codex - Documentation officielle de WordPress.
http://codex.wordpress.org
Download - Téléchargement d'un document du Web vers votre disque dur.
Footer - Bas de page d'un site Internet.
-0
0
C: Front office - Partie publique d'un site Internet visible par l'ensemble des
:::J
0 internautes.
s:t
,-i
0
N
Hack - Ensemble d'instruction (code HTML + PHP + Template tag Word-
@ Press) pour aboutir à un résultat.
....,
.c Header - Terme anglais désignant l'entête d'un site Internet .
Ol
·;::
>-
c. Homepage - Page d'accueil d'un site Internet; c'est la première page qui
0
u s'affiche lorsqu'un internaute arrive sur un site Internet.
lnfographiste - Personne qui créer le design d'un site Internet, d'une
affiche, d'un logo ...
Loop - Boucle.
Plugin - Extension.
234 Sites Web avec WordPress

Racine - La racine d'un site Internet, c'est le dossier qui contient l'ensemble
de votre site. C'est le dossier qui est le plus éloigné dans une
arborescence.
Screenshot - Copie d'écran.
Sidebar - Barre latérale d'un site internet.
Slug - Identifiant. C'est la version normalisée(« URL-friendly » du nom d'une
catégorie. Il ne contient généralement que des lettres minuscules
non accentuées, des chiffres et des traits d'unions.
Template - Thème d'un site Internet (son apparence).
Template tag - Marqueur de modèles.
Upload - Téléchargement d'un document du disque dur de votre ordinateur
vers le Web.
Webdesigner - Terme (un peu trop) généraliste ... Certains affirment
qu'un webdesigner est la personne qui transforme une maquette
graphique en langage Web : HTML/CSS. En effet, «design» en
anglais signifie« concevoir». Peu de rapport avec le côté graphique
du «designer». D'autres personnes pensent qu'un webdesigner
créer le design d'un site Internet, qu'il serait un infographiste
spécialisé dans le Web. Bien entendu, personne n'empêche de
cumuler ces compétences ...
Webmaster - Personne qui gère et qui faire vivre un site Web.

-0
0
C:
:::J
0
s:t
,-i
0
N
@
....,
.c
Ol
·;::
>-
c.
0
u
Index

A compte
administrateur 59, 98
accroche 143
créer un nouveau 60
Admin Log 210
Super Admin 192
Alphatk 24
utilisateur 59
arrière-plan 77, 149
article 4T conditional tags 167
auteur d'un article TIT contenus personnalisés 44
avatar TI custom post types 44

B D
back office 34 date et heure TIT
bibliothèque des médias 57
bl og i nfo() 136
E
-0 blogs 128
0
C: boucle 137 effet lightbox 150
:::J
0
personnalisée 157 en-têtes 125
s:t
,-i
0 principale 145 extensions 78
N
@
secondaire 144
...., WordPress TiT
.c
Ol
F
·;::
>-
C. Face book 14 7
0
u C fichier hosts 32
catégorie 42, 46 fil d'Ariane T52
champs personnalisés "î6T FileZilla 2T
child theme 166 Firebug 123
CMS 49 Firefox 123
commentaires 66 footer 127, 175
236 Sites Web avec WordPress

footer.php 105, 107 menu personnalisé 6Î


formulaire de recherche 146 modèle de page 156
front office 34 multi-sites T9T
FTP (File Transfer Protoco/) 2Î MySQL 21, 23
function reference Tio
functions.php 131, 154
N
navigation interne 147
G
news 142
ge t_footer() 1"4'8" NotePad + + 24, 208
get_header() 148
Google Analytics 213
Gravatar 73 0
objet $post Tï7
H objets PH PTî6
One page layout 125
header 78, 126, 136, T74
options
header.php 105, 107
d'écriture 90
homepage 15 7
de discussion 92
HTML/CSS 129
de lecture 9Î
de vie privée 94
1 des permaliens 94
outils 96
image 55
index.php 104, 107, 131
intégration statique 170 p
interface 44
page 43
d'accueil 15 7
L dynamique 43
"O
0 statique 43
C:
:::J
langue 89
0 lien page 404 148
,;j"
,-i
hypertexte 50 panneau Attributs 48
0
N
Lire la suite 52, 138 permaliens 94, 98
@
...., loop 11T PHP21, 102, Tï2
.c
Ol
·;:: plugin 78
>-
C. Akismet 97
0
u M plugin Akismet 79
magazine 128 profil 98
MAMP 23
marqueurs conditionnels 167
médias 98
Q
menu de navigation 174 query_posts () l"ï'3"
Index 237

R Twitter 147
référencement "21T typographie 127
réglages des médias <Jl"
réseaux sociaux 146 V
vidéo ""57
s Vimeo "'57
Virtuel Hosti l
screenshot.png 13T, 133
section Réseau 192
Sec ure Word Press 2ÎO w
serveur WAM.P 23, 25
Apache 2T Web Developer 124
distant 25 Webmaster Google tools 2îT
local 22, 25 widget 82
sidebar 174 WordPress 87
smartphones ~ base de données ~
Smultron 24 création de la base de don nées
style.css 1"04: TIT 26
espace d'administration (back
office) "34
T maintenance ï1JV
TAC (Theme Authenticity Checker) 2îT mise à jour~
template 75 paramétrage W
AlsaWP 169 partie publique (front office) ""34
WordPress 1 30 tableau de bord 35
tem plate tags 109 wp-config.php 206
TextPad 24 wp-config.php 206
texture 126 WP-DBManager 211
the_author_posts_link() 141 , 142 wp_list_categories() ~
the_content() 'î':JB" wp_list_pages() 140
th e_da te ( ) 14T WP _Que ry() Ti8, "'i45
the_excerpt() ~
thème 75, l""OT, !TI y
enfant 166
the_time() 141 Youtube 57