Vous êtes sur la page 1sur 256

Table des matires

Avant-propos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XIII

Remerciements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XVII

Les fichiers tlchargeables. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XVIII

Premire partie Dcouvrir, installer et apprivoiser


WordPress

Chapitre 1 Dcouvrir WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3


1.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Rapide prsentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Nouveauts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
WordPress : pour tous types de sites ! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.2 Exemples de sites Web avec WordPress et tmoignages . . . . . . . . . . . . . . 5
Exemples de sites crs sous WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Tmoignages. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

Chapitre 2 Installer et apprivoiser WordPress . . . . . . . . . . . . . . . . . . . . 19


2.1 Kit de lancement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Prrequis. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Mise en place et utilisation dun FTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Mise en place dun serveur local avec WAMP. . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Choix dun navigateur Internet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Choix dun diteur de texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
IV Sites Web avec WordPress

2.2 Installation de WordPress. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22


Obtention de la dernire version de WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Mise en place des fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Cration de la base de donnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Installation en 5 minutes chrono . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Activer la rcriture dURL en local avec WAMP . . . . . . . . . . . . . . . . . . . . . . . . . 29
Travailler avec une URL dfinitive en local (fichier hosts et Virtual Host) . . . 30
2.3 Prise en main de WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Partie publique (front office) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Espace dadministration (back office) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

Deuxime partie WordPress ct webmastering

Chapitre 3 Gestion fondamentale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39


3.1 Gestion du contenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Les articles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Les catgories . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Les pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Les types de contenus personnaliss . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
3.2 Publication dun article ou dune page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Prsentation de linterface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Mise en forme du contenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Insertion de mdias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
3.3 Gestion des mdias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Bibliothque des mdias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Ajouter/Supprimer des mdias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
3.4 Gestion des comptes utilisateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Le compte Administrateur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Les diffrents niveaux dutilisateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Crer un nouveau compte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Gestion des comptes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Grer son profil . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Table des matires V

3.5 Gestion des menus personnaliss . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59


Prsentation de linterface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Grer les lments dun menu personnalis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
3.6 Gestion des commentaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Grer les commentaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
Paramtrer les commentaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

Chapitre 4 Gestion des fonctionnalits . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73


4.1 Gestion de lapparence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Installation dun thme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
Activation/Dsactivation dun thme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Changer larrire-plan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Changer limage de len-tte du site (header) . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
4.2 Gestion des extensions (plugins) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
De quoi sagit-il ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Installation/Suppression . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Activation/Dsactivation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Utilisation dun plugin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
4.3 Gestion des widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
De quoi sagit-il ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Installation/Suppression . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Activation/Dsactivation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Utilisation des widgets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

Chapitre 5 Paramtrage de WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . 85


5.1 Les rglages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Rglages gnraux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
Options dcriture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Options de lecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Options de discussion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Rglages des mdias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Moteur de recherche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Options des permaliens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
VI Sites Web avec WordPress

5.2 Les outils. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94


Leur fonction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Principaux usages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
5.3 Prparer WordPress : quelques recommandations. . . . . . . . . . . . . . . . . . . . 95

Troisime partie WordPress ct webdesign

Chapitre 6 Comment fonctionne un thme ? . . . . . . . . . . . . . . . . . . . . . . 99


6.1 Les thmes : leur anatomie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Prrequis : quest-ce quun site Internet ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Comment fonctionne un thme ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
Les fichiers dun template : qui fait quoi ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Comment ces fichiers travaillent-ils entre eux ? . . . . . . . . . . . . . . . . . . . . . . . . . . 103
La hirarchie des fichiers ou comment WordPress reconnat les fichiers dun
thme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
6.2 Les thmes : boucles et fonctions communes . . . . . . . . . . . . . . . . . . . . . . . . . 107
Les marqueurs de modle (template tags) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
Les fonctions PHP WordPress (function reference). . . . . . . . . . . . . . . . . . . . . . . . 108
Boucle standard WordPress (loop) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Fonctions communes dans une boucle. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Fonctions communes hors dune boucle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Personnaliser une boucle avec query_posts() . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Utiliser plusieurs boucles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
6.3 Wordpress : fonctionnement avanc . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Objets, mthodes et paramtres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
La boucle et lobjet $post . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Personnaliser une boucle avec un objet de WP_Query() . . . . . . . . . . . . . . . . . . 117
Interagir avec la base de donnes WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
6.4 Wordpress : lenvers du dcor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
WordPress et les URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
WordPress et sa base de donnes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Trucs et astuces pour russir son template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Table des matires VII

Chapitre 7 Comment crer son propre thme ? . . . . . . . . . . . . . . . . . . 123


7.1 Bote outils . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
7.2 Mthode suivre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Prcisions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Cration du design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Intgration statique en HTML/CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Cration du template WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
7.3 Un bon dpart pour un bon thme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Partir dun thme existant ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Quatre fichiers de dpart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Modifier la description et la vignette du thme . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Tester et activer notre bauche de thme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Insertion de votre code HTML statique. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
7.4 Template WordPress : les bases . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Faire appel des fichiers PHP distants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Cration dun header compatible WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Cration dun 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Une boucle : plusieurs rsultats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Afficher un lien Lire la suite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
Afficher lextrait dun article . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Lister les catgories . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139
Lister les pages. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
Insrer des commentaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
7.5 Template WordPress : des fonctionnalits utiles. . . . . . . . . . . . . . . . . . . . . . . 141
Afficher la date et lheure de parution dun article . . . . . . . . . . . . . . . . . . . . . . . 141
Afficher lauteur dun article . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Afficher limage la une . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Afficher des news . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
Crer un article mis en avant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
VIII Sites Web avec WordPress

Crer un formulaire de recherche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147


Partager un article sur les rseaux sociaux. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148
Navigation interne : suivant et prcdent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
Rcuprer le nom ou la description dune catgorie. . . . . . . . . . . . . . . . . . . . . . 149
Crer une page 404 personnalise. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Ajouter les classes CSS WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Changer larrire-plan du site depuis le back office . . . . . . . . . . . . . . . . . . . . . . 151
7.6 Des plugins trs pratiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Leffet lightbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Pagination numrote . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Insrer un fil dAriane (breadcrumbs). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Crer et afficher un formulaire de contact . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Grer une ou plusieurs Google Maps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
Rendre un site priv . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
7.7 Cration dune ou de plusieurs zones de Menus . . . . . . . . . . . . . . . . . . . . . 155
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
Le fichier functions.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
Insertion dans le thme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Reconnatre la rubrique courante . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
7.8 Cration dune zone de Widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Le fichier functions.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Insertion dans le thme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
7.9 Cration dun modle de page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Cration du fichier php . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Personnaliser la homepage avec un modle de page . . . . . . . . . . . . . . . . . . . . 158
Crer un modle de page avec une boucle personnalise . . . . . . . . . . . . . . . . 159
7.10 Cration darticles personnaliss (Custom Post Type) . . . . . . . . . . . . . . . . 160
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Le fichier functions.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Ajouter une taxonomie. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Table des matires IX

Modifier licne dans le back-office . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162


Affichage dans le thme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Des plugins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
7.11 Champs personnaliss (Custom Fields) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Prsentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Cration depuis le back-office . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Affichage dans le thme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
Cration de Meta boxes avec le plugin ACF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Rcupration et affichage dans le thme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
7.12 Pour aller plus loin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Crer ses propres Shortcodes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Ajouter des fonctionnalits natives votre thme . . . . . . . . . . . . . . . . . . . . . . . . 167
Quelques pistes pour ajouter des options votre thme. . . . . . . . . . . . . . . . . . 167
Thme enfant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
Les marqueurs conditionnels (conditional tags) . . . . . . . . . . . . . . . . . . . . . . . . . . 169
Retour sur ce que vous venez dapprendre. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170

Chapitre 8 Un tutoriel pratique : raliser le template AlsaWP . . 171


8.1 Feuille de route . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
8.2 Le fichier PSD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
8.3 Intgration statique : PSD to HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
8.4 HTML to WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
Prparation des fichiers du template . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Insertion du code statique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Insertion des fonctions WordPress (template tags) . . . . . . . . . . . . . . . . . . . . . . . 176
Dispatcher le fichier index.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Grer les catgories . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Grer un article . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
8.5 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
X Sites Web avec WordPress

Chapitre 9 tude de cas : acheter et modifier un Template


HTML/CSS ou un Template WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
9.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179
9.2 Les plus et les moins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
9.3 Les frameworks CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
9.4 Mthodologie : Modifier un Template HTML/CSS . . . . . . . . . . . . . . . . . 182
Le template Prologue de HTML5UP.NET . . . . . . . . . . . . . . . . . . . . . . . . . . 182
Cration du dossier et des fichiers de thme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
Quel angle dattaque adopter ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
La sidebar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
Le menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
9.5 Mthodologie : Modifier un Template WordPress existant . . . . . . . . . . 188
Conseils . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189

Quatrime partie WordPress ct coulisses

Chapitre 10 WordPress et le multisites . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193


10.1 Prsentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
10.2 Activation de loption multisite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
10.3 Linterface dadministration du rseau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
10.4 Marche suivre pour crer un sous-site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
10.5 Choix de la faon dinstaller les sous-sites . . . . . . . . . . . . . . . . . . . . . . . . . . 198

Chapitre 11 Maintenance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201


11.1 Sauvegarder WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Sauvegarder les fichiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Sauvegarder la base de donnes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Cas spcifique : les options de thme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Table des matires XI

11.2 Mettre jour WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206


Avertissement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Mise jour manuelle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Mise jour automatique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
11.3 Dmnager WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
WordPress et son URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
WordPress et son fichier wp-config.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
Dplacer un site WordPress entier. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Supprimer son site WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
11.4 Garder WordPress en bonne sant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Scuriser et amliorer WordPress. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Webmaster Google tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
11.5 Rfrencement et statistiques. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
Conseils et plugins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
Google Analytics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215

Chapitre 12 WordPress ct nomade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219


12.1 Grer son WordPress nimporte o. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Applications Wordpress : Apple & Android,. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
Zoom sur lapplication Iphone . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Zoom sur le back-office mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
12.2 WordPress et le responsive web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Le responsive web design : les grandes lignes . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
Adapter son WordPress pour les mobiles en deux minutes . . . . . . . . . . . . . . . . 229

Bibliographie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231

Webographie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232

Glossaire. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236
Avant-propos

WordPress est une rfrence en systme de gestion de contenu (CMS :


Content Managing System en anglais). Il permet de concevoir et de grer
facilement un site Internet. WordPress vous permettra notamment de crer
des pages web, dy inclure du texte, des images et dautres mdias, de crer
des rubriques, dditer des articles. WordPress permet galement de grer
un site multi-utilisateurs. Enfin, la gestion de lapparence du site se fera
aisment.

Philosophie de louvrage
100 % pratique ! , cet ouvrage se veut clair et concis. Usant dun langage
facile et accessible, il vous accompagnera lors de votre dcouverte, prise
en main et perfectionnement de WordPress. Pour en tirer le meilleur,
accompagnez votre lecture dune manipulation en direct de votre WordPress.

Contenu et public de louvrage


Cet ouvrage se destine toutes personnes, dbutants ou utilisateurs plus
avertis, souhaitant dcouvrir WordPress sous toutes ses facettes, et plus
particulirement aux webmasters voulant installer, paramtrer et grer un
site sous WordPress et aux webdesigner / webdveloppeur confirms en
HTML / CSS voulant crer entirement un thme ou en modifier un existant.
Les sujets abords successivement sont les suivants :
Origine, philosophie et vocabulaire spcifique de WordPress,
Installation et paramtrage de WordPress,
Gestion dun site mono- ou multi-utilisateur avec WordPress,
Cration de templates avec les template tags et les boucles WordPress,
Maintenance et scurisation dun site avec WordPress,
WordPress et le monde mobile (Iphone, Android).
XIV Sites Web avec WordPress

Louvrage se compose de quatre parties :


Les deux premires parties sont consacres linstallation et
la dcouverte de WordPress. Vous y apprendrez comment utiliser sim-
plement WordPress et grer un site Internet. Elles sont donc destines
aux personnes (telles que les webmasters) soccupant de la mise
jour et de la vie dun site Internet. Elles ne ncessitent aucun prrequis
particulier.
Les deux dernires parties expliquent comment crer et / ou
modifier un thme WordPress. En dautres termes, comment utiliser
WordPress comme un systme de gestion de contenu (CMS) flexible
et comment le modeler selon vos attentes. Elles ncessitent des
connaissances en HTML / CSS.

Qui est lauteur ?


Simon Kern est Art director, designer et videographer
Portfolio : www.simon-k.com
Son Studio : www.skmg-studio.com
Twitter : @simon_kern

En 2007 ( 21 ans), Simon Kern cre son premier studio de cration


pendant ses tudes. En parallle, il passe 5 ans dans le noyau magique
dAlsacrations, puis travaille dans une agence de pub parisienne. Il a ralis
plusieurs publications (livres chez Dunod, DVD chez Elephorm, articles dans
la presse spcialise etc.) et a obtenu plusieurs rcompenses en crations
digitales. Il est formateur et confrencier depuis 2012.
Simon aime les choses artisanales et hors du commun, il ne jure que par
le vcu sur le terrain et ne se restreint pas un domaine prcis. Partir seul
New York pour son portfolio, passer de la prise de vue dun court mtrage
au design dune maquette pour finir par son coding... Voil sa philosophie
de passionn ! Vido, motion, web, coding, print : il met les mains dans le
cambouis pour matriser le plus dtapes possible dun projet digital 360.
Avant-propos XV

En 2016, il fait voluer son studio de cration Brin de Web vers une
SAS nomme SKMG Studio. Pour promouvoir le savoir-faire digital, il
cre le Bar formations Nantes, avec Marine Gauquelin. Un organisme
de formation spcialis dans la cration digitale : design, web, photo,
vido, motion 2D/3D. Adieu nons blafards et moquette grise... Au Bar
formations rgne une ambiance propice la crativit et aux changes :
les formations se droulent en petit groupe, dans un endroit chaleureux, o
lon partage ses expriences, on dbride les questions/rponses... pour une
prise en main rapide et efficace.

Le Bar formations partage rgulirement du contenu en rapport avec


la veille digitale (WordPress inclus) sur Facebook ou Twitter. Nhsitez pas
le suivre !
Site : www.bar-formations.com
Twitter : @bar_formations
Facebook : Le Bar Formations
Remerciements

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


Christelle et Marc Vecchini, mes parents, ma famille, ma belle-famille, mes
amis, mes ex-collgues, Jean-Baptiste (ditions Dunod) ainsi quaux lecteurs
des deux premires ditions !

www.simon-k.com
Les fichiers
tlchargeables

Sur www.dunod.com, sur la page ddie louvrage, vous pourrez tlchar-


ger quelques fichiers qui vous permettront de vous lancer avec WordPress :
Le template WordPress (AlsaWP),
Des sources Photoshop destines aux designs,
Les codes sources des exemples du livre,
Les fichiers HTML/CSS de lintgration statique.

Vous trouverez galement quelques liens utiles vous permettant de


tlcharger :
Le logiciel FTP FileZilla (Mac ou PC),
Le serveur local WAMP (PC) ou MAMP (MAC),
Les navigateurs Internet libres : Firefox, Chrome, Opera,
Les diteurs de texte NotePad ++ et Sublime Text 2,
La dernire version de WordPress.
PREMIRE PARTIE

Dcouvrir, installer et
apprivoiser
WordPress
Cette partie va vous permettre dinstaller WordPress. Avant de passer aux
choses srieuses, nous allons prparer le terrain pour russir son installation.
Dans le cas contraire, nous risquerions de rencontrer des problmes qui
nous feraient perdre du temps...
1
Dcouvrir WordPress

1.1 INTRODUCTION

Rapide prsentation
WordPress a t cr par la socit Automattic. Bien que WordPress soit libre
et gratuit, Automattic soccupe de son volution. Automattic dveloppe aussi
de clbres 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 grs par
Automattic. On peut trs facilement les confondre ! Une petite mise au point
simpose :
WordPress.com permet de sinscrire en ligne et de crer rapidement et
facilement son blog. Ladresse de celui-ci prendra alors cette forme :
votrenom.wordpress.com. Cet ouvrage ne sy intressera donc pas.
WordPress.org est le site de rfrence. Il recense tous les lments
en relation avec WordPress : la dernire version tlchargeable, les
plugins, la documentation officielle (codex). Cest donc exclusivement
ce site que nous ferons rfrence dans ce livre.

Nouveauts
La version 3.0 de WordPress a apport des fonctionnalits fondamentales qui
ont transform WordPress en un vritable CMS (Content Managing System :
gestionnaire de contenu). Depuis, plusieurs mises jour ont galement
apport leur pierre ldifice avec :
4 Chapitre 1. Dcouvrir WordPress

Une refonte de linterface dadministration : plus pure et plus


moderne,
Une gestion des widgets repense,
Une optimisation globale des performances et de scurit,
Une meilleure prvisualisation des changements (menu, titre, couleur,
articles...),
Lditeur TinyMCE amlior,
Comme vous le constatez, ce sont majoritairement des amliorations
dordre ergonomique et esthtique visant amliorer le confort
dutilisation. Les fondamentaux (faon de coder / crer un thme)
voluent peu : tant mieux !

WordPress : pour tous types de sites !


Son utilisation originelle : le blog
Lutilisation dorigine de WordPress est la gestion de blog.
Un blog est une forme de site web particulire qui se caractrise par la
publication darticles (ou de billets) dune mme personne, dans un ordre
chronologique, avec possibilit de mettre des commentaires. Cette dfinition
est incomplte, voire dpasse.
Aujourdhui, un blog voque plutt laspect esthtique et gnral dun
site Internet tel un magazine. Un blog nest plus forcment un journal intime :
on y trouve un vrai menu de navigation, plusieurs rubriques, etc.

Son utilisation en CMS


Un CMS permet de grer le contenu dun site Internet :
gestion de plusieurs pages et articles ;
gestion fine de plusieurs utilisateurs ;
gestion des mdias ;
gestion aise de larborescence et de la navigation.

Un CMS est bas sur cette rgle dor : la sparation de la forme et


du contenu. Dun ct, il sert grer le contenu (texte, image, naviga-
tion...) et de lautre sa mise en forme, par lintermdiaire dun template
(HTML/CSS/Javascript). Un schma de fonctionnement simplifi nous per-
mettra de comprendre (figure 1.1).
Un site pour prsenter une entreprise est un exemple dutilisation clas-
sique de CMS. Ce site sera compos ainsi :
plusieurs pages statiques (prsentation, contact, quipe) ;
1.2 Exemples de sites Web avec WordPress et tmoignages 5

Figure 1.1 Schma de fonctionnement simplifi dun CMS

une ou plusieurs rubriques qui listent des articles (rfrences clients,


actualits, blog pro.) ;
un ou plusieurs utilisateurs (administrateur, webmaster).

Autres types dutilisations


Qui dit CMS dit galement site e-commerce, site magazine, portfolio, site
de communaut, site dactualit, site perso. Avec WordPress, beaucoup
dutilisations diffrentes sont possibles !

1.2 EXEMPLES DE SITES WEB AVEC WORDPRESS ET


TMOIGNAGES
Exemples de sites crs sous WordPress
WordPress sadapte des utilisations diverses et varies que nous vous
prsentons ci-aprs (figures 1.2 1.13), des exemples valant mieux que des
mots.
6 Chapitre 1. Dcouvrir WordPress

Blogs / Magazine

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

Figure 1.3 http://blogs.BlackBerry.com


1.2 Exemples de sites Web avec WordPress et tmoignages 7

Figure 1.4 http://www.starwars.com/news

Figure 1.5 http://www.blup.fr


8 Chapitre 1. Dcouvrir WordPress

Galeries/Portfolios

Figure 1.6 http://welovewp.com

Figure 1.7 http://www.webcreme.com


1.2 Exemples de sites Web avec WordPress et tmoignages 9

Sites corporate et professionnels

Figure 1.8 http://www.radiumlabs.com

Figure 1.9 http://www.toyota.com.br


10 Chapitre 1. Dcouvrir WordPress

Sites magazines

Figure 1.10 www.webdesignerdepot.com

Figure 1.11 www.smashingmagazine.com


1.2 Exemples de sites Web avec WordPress et tmoignages 11

Sites officiels de clbrits

Figure 1.12 http://www.katyperry.com

Sites de-commerce

Figure 1.13 http://www.tinkeringmonkey.com


12 Chapitre 1. Dcouvrir WordPress

Tmoignages
Geoffrey Crofte, dveloppeur Web

Figure 1.14 www.creativejuiz.fr

Je suis un jeune fou qui sest perdu dans les mandres du code et du pixel.
Entirement autodidacte, jai eu la chance de rencontrer des gens gniaux
chez Alsacrations et dans le monde du Web.
galement freelance, jai pris le parti du Web ouvert en faisant de HTML,
CSS, PHP et JS mes outils quotidiens. Je partage mes aventures et dcouvertes
sur Creative Juiz, mon petit blog fruit !

Pourquoi a-t-il choisi WordPress ?


lpoque de mes dbuts je me suis essay Joomla et WordPress, ce der-
nier ma sduit par sa simplicit et sa flexibilit. Aujourdhui construire un site
web vitrine, blog, forum, galerie ou e-commerce est un jeu denfant grce
ce CMS. WordPress offre des possibilits illimites pour un dveloppeur PHP.
Sa communaut est certainement lune des plus actives de la toile.

Stphanie Walter, webdesigner


Je mappelle Stphanie Walter et je suis graphiste et webdesigner spcialise
dans la mobilit, les interfaces et lexprience utilisateur. Inpixelitrust est
mon portfolio freelance qui comporte une partie blog o je partage mes
dcouvertes, expriences et connaissances.
1.2 Exemples de sites Web avec WordPress et tmoignages 13

Figure 1.15 www.inpixelitrust.fr

Pourquoi a-t-elle choisi WordPress ?


Jai choisi WordPress pour sa flexibilit et sa simplicit. Javais commenc
lutiliser pour mon premier blog il y a des annes et me suis trs vite aperue
quon peut aller beaucoup plus loin que a avec un ce CMS. Il me permet
davoir la fois une partie portfolio, et une partie blog gres sparment,
davoir du multilingue et de pouvoir publier trs rapidement mes travaux et
articles en quelques clics.

David Torondel, graphiste/illustrateur


Graphiste/Illustrateur depuis presque 20 ans (9 ans en salari, 11 ans en
indpendant), jinterviens principalement dans la cration de chartes gra-
phiques de sites Internet, danimations et de jeux en Flash, et dillustrations.
Mon site : http://www.torondel.net

Pourquoi a-t-il choisi WordPress ?


En plus de mon blog personnel, je gre une dizaine de sites sous WordPress
pour mes clients.
Avec un outil comme Firebug, pour analyser la structure des pages et
les CSS de chaque lment, il est relativement facile (et formateur) de
personnaliser un thme.
14 Chapitre 1. Dcouvrir WordPress

Figure 1.16 www.torondel.net

Pour un graphiste comme moi, qui na que trs peu de connaissances


en intgration et en dveloppement, cet outil permet de mettre en place un
site complet, dynamique, personnalisable, administrable, avec un moteur
de recherche et optimis pour le rfrencement. Il me permet galement
de mappuyer sur une communaut francophone trs active... Et tout a
gratuitement !
Je me tourne de plus en plus vers les thmes premium , qui restent en
gnral trs abordables, et proposent souvent des fonctionnalits intres-
santes, avec parfois les fichiers sources du thme, ce qui est trs apprciable
quand on souhaite le personnaliser.
Un seul bmol nanmoins : le succs de WordPress fait quon assiste
une uniformisation des templates. Les thmes vraiment originaux sont rares ;
et, si on cde la facilit, je crains que tout cela nous conduise une baisse
de crativit.
Pour quil reste un bon outil, nous devons utiliser WordPress bon escient,
sans se brider, tout en faisant de lui un tremplin vers plus de crativit.

Olivier Pautot, illustrateur/animateur indpendant


Olivier ralise des illustrations ainsi que des animations 3D et 2D avec une
attirance toute particulire pour lunivers cartoon (superbement mignon !).
Il utilise WordPress pour prsenter ses travaux dillustrateur/animateur
indpendant. Disposant dun blog sobre et efficace (wwww.pautot.net,
1.2 Exemples de sites Web avec WordPress et tmoignages 15

Figure 1.17 www.pautot.net

Figure 1.18 www.pautot.net

figures 1.21 et 1.22), il aime la simplicit et la souplesse dutilisation que


procure WordPress. Mettre jour ses derniers travaux nest pour lui quune
histoire de quelques clics.
16 Chapitre 1. Dcouvrir WordPress

Techniquement, il utilise notamment quelques plugins comme Lightbox


pour lagrandissement esthtique des images en JavaScript, Simpleviewer
pour sa galerie 2D/3D et All in one SEO pour le rfrencement.

Christophe Fod, chef de projet


Pour mes clients, je conseille la solution WordPress. Modulaire et avec une
administration simple et efficace, il est ais de rpondre rapidement au
besoin du client, tout en lui laissant de lautonomie pour la gestion du
contenu. De plus, le dveloppement de widgets personnaliss permet une
libert totale !

Maxime Urban, ingnieur IT


Le site vitrine de la socit o je travaille a t conu avec WordPress. Grce
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 aise. Sa
simplicit permet tout chacun de crer son site Internet mais il sait, dans
les mains de personnes plus exprimentes, devenir un outil puissant pour la
cration de sites ou doutils plus spcifiques. Autant vous dire que la version
3.0 a propuls la plupart de mes projets web.

Nicolas Juen, dveloppeur front-end et back-end


Jai commenc WordPress en 2009 lorsque la version 3.0 allait sortir,
elle apportait les types de contenus personnaliss lpoque et ctait un
changement obligatoire pour quil volue.
Nous ntions plus limits quaux pages, articles et catgories, nous
pouvions enfin sparer les contenus de faon visuelle et structurelle.
Depuis je suis pass de dveloppeur directeur technique dans lagence
Beapi qui est maintenant lune des meilleures agences franaises grce
ses nombreux projets. Nous ne faisons des sites quavec WordPress et nous
voyons le nombre de projets augmenter de faon forte. Auparavant, nous
devions chercher les clients et les convaincre dutiliser WordPress alors que
maintenant le besoin est WordPress.
Depuis son arrive sur le march, il a beaucoup chang : de moteur
de blog, il est arriv simposer en tant CMS. Des petits sites vitrines aux
normes usines sites, WordPress se plie vos besoins.
1.2 Exemples de sites Web avec WordPress et tmoignages 17

De grandes entreprises comme la BNP, VINCI, ENGIE ou des conseils


gnraux font confiance WordPress pour mettre en avant leur contenu.
Lmergence de nombreuses communauts autour du monde dmontre
la popularit du CMS. Le nombre de WordCamp a explos et il y a
maintenant un WordCamp US et un WordCamp Europe, lequel est pass de
quelques centaines de participants presque 2 000.
La force de WordPress provient surtout de son norme communaut
mondiale. Presque tous les sujets ont t abords et il y a des centaines de
forums et de Slack pour discuter et sentraider.
De nombreuses entreprises se sont construites autour de WordPress, se
spcialisant dans la ralisation de plugins premium, tout un march sest
construit autour deux. De mme, les plateformes ddies proposent des
thmes qui font tout, mais aussi des thmes de niche. Par exemple, on voit
merger des thmes pour les radios, les glises, les petites annonces etc.
Dans tous les cas, lavenir de WordPress est radieux, loutil a maintenant
13 ans et occupe une place norme sur le march. Avec sa communaut
active, il va continuer voluer et sera encore prsent pendant longtemps.
2
Installer et apprivoiser
WordPress

2.1 KIT DE LANCEMENT


Prrequis
Pour pouvoir fonctionner, WordPress requiert un serveur pouvant supporter
PHP 5.6 et MySQL 5.6 (ou leurs versions ultrieures).
Le serveur conseill (et le plus robuste) pour WordPress est Apache
(gratuit). Vrifiez galement que le module Apache mod_rewrite pour la
rcriture dURLs est disponible (cest gnralement le cas). Ces informations
sont vrifier auprs de votre hbergeur. Elles sont souvent en accord avec
les besoins de WordPress.

Mise en place et utilisation dun FTP


Le protocole FTP (File Transfer Protocol) permet de transfrer des fichiers de
votre disque dur sur votre serveur.
Le logiciel FileZilla est le client FTP gratuit que nous allons utiliser. Vous
pouvez le tlcharger sur son site officiel : http://filezilla-project.org.
Aprs lavoir install et dmarr, renseignez les champs de la barre
de connexion (figure 2.1) : Hte (fourni par votre hbergeur, il prend
habituellement la forme ftp.nomdedomaine.com) puis Identifiant et Mot
20 Chapitre 2. Installer et apprivoiser WordPress

de passe (galement fournis par votre hbergeur) et enfin Port ( laisser


vide, le port par dfaut est 21).

Figure 2.1 Barre de connexion

Une fois cette tape termine, cliquez sur Connexion rapide . Vous tes
dsormais connect votre serveur distant !
Notons que FileZilla propose une interface qui, par un jeu de doubles
fentres, permet une visualisation simultane de votre disque dur (Site local,
gauche) et du serveur distant (Site distant, droite) (figure 2.2).
Pour transfrer un fichier, un simple glisser/dposer dune fentre lautre
suffit. La progression du tlchargement (nombre de fichiers, de dossiers,
taille totale) saffiche en bas de la fentre de droite.

Figure 2.2 Fentre principale de FileZilla

Mise en place dun serveur local avec WAMP


Avoir un serveur en ligne cest bien, mais avoir un serveur local (cest--dire
sur son propre ordinateur) cest plus pratique pour concevoir un site. Cela
permet dviter davoir transfrer des fichiers par FTP pour la moindre
modification.
2.1 Kit de lancement 21

Nous allons donc installer notre propre serveur web grce au logiciel
WAMP (MAMP pour Macintosh) que vous trouverez sur son site officiel, en
vous rendant ladresse suivante : www.wampserver.com.
Aprs lavoir install (bien dfinir le navigateur par dfaut lorsque ce
sera demand), lancez lapplication WAMP. La petite icne dans la barre des
tches doit tre de couleur verte (dans le cas contraire, relancez lapplication)
(figure 2.3).

Figure 2.3 Icne dans la barre des tches

Lorsque vous cliquez sur cette icne, un menu droulant donnant


accs diffrentes fonctionnalits apparat (figure 2.4). Parmi celles-ci,
Localhost permet louverture de votre navigateur Internet avec ladresse
de votre serveur local, phpMyAdmin vous donne la possibilit de grer
la base de donnes MySQL et www directory vous permet daccder
rapidement au fichier www : l o seront rangs tous vos projets de site
Internet !
Votre serveur local est dsormais fonctionnel. Il est prt accueillir
WordPress.

Remarque Wamp ncessite linstallation (au pralable) des paquetages


Microsoft Visual Studio VC9, VC10 et VC11 ( vrifier dans les recommanda-
tions suivant les versions de Wamp). Sinon, Wampserver ne pourra pas fonc-
tionner, linstallation sera dfectueuse et vous devrez supprimer Wampserver
avant dinstaller les lments manquants.

Choix dun navigateur Internet


Il ne vous reste plus qu choisir un navigateur Internet. Firefox, Google
Chrome, Opera ou Internet Explorer... tous prsentent des performances
relativement similaires, mme sils se distinguent par des interfaces et des
22 Chapitre 2. Installer et apprivoiser WordPress

Figure 2.4 Menu droulant de WAMP

fonctionnalits diffrentes. Vous pouvez les tlcharger aisment directement


sur le Web.

Choix dun 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 (NotePad++ ou encore Sublime
Text) et dautres payants (comme Dreamweaver CC ou TextPad).
Nous vous conseillons dutiliser NotePad++ ou Sublime Text. Rapides et
peu encombrants, ils offrent tous deux une interface agrable permettant
par exemple dditer plusieurs fichiers dans la mme fentre. La coloration
syntaxique (HTML, CSS, JS, PHP, etc.) savre par ailleurs trs utile. Vous les
trouverez en vous rendant aux adresses suivantes : http://notepad-plus-plus.
org/ ou http://www.sublimetext.com/

Remarque Nutilisez pas des logiciels de traitement de texte comme Word


ou Open Office, qui ne sont pas du tout adapts ce genre de tche.

2.2 INSTALLATION DE WORDPRESS


Obtention de la dernire version de WordPress
Pour installer la dernire version de WordPress, rendez-vous
sur http://fr.wordpress.org/ pour la version franaise ou sur
2.2 Installation de WordPress 23

http://wordpress.org/download/ pour la version anglaise, puis cliquez sur


le lien de tlchargement (figure 2.5).

Figure 2.5 Bouton de tlchargement

Mise en place des fichiers


Une fois larchive tlcharge et dcompacte, un dossier WordPress
contenant de nombreux fichiers apparat. Il va alors sagir de les ranger
lendroit appropri...
Sur un serveur local (WAMP)
Il suffit de copier les fichiers du dossier WordPress et de les coller
dans le dossier racine mon-site (nom dexemple) se trouvant dans
le dossier www de WAMP (figure 2.6).

Figure 2.6 Arborescence du serveur local (WAMP)

Sur un serveur distant (FTP)


Il suffit de transfrer les fichiers du dossier WordPress la racine de
votre site. On utilise pour cela le logiciel FileZilla.
24 Chapitre 2. Installer et apprivoiser WordPress

Aprs avoir renseign les champs de la barre de connexion (voir


figure 2.1), un simple glisser/dposer des fichiers suffit.

Cration de la base de donnes


Avant de commencer linstallation de WordPress, il faut au pralable crer
une base de donnes sur notre serveur local (ou simplement lactiver chez
lhbergeur si vous travaillez en ligne).
Rendez-vous dans phpMyAdmin qui se trouve dans le menu droulant 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.

Figure 2.7 Accs scuris phpMyAdmin

Vous avez maintenant accs lespace dadministration de phpMyAdmin.


Cliquez sur longlet Bases de donnes droite du logo (figure 2.8) puis
remplissez le champ Crer une base de donnes avec le nom de votre
choix (figure 2.9).
2.2 Installation de WordPress 25

Figure 2.8 Onglet pour crer une base de donnes

Figure 2.9 Formulaire pour crer une base de donnes

Installation en 5 minutes chrono


1. Premire tape : Rendez-vous ladresse de votre site en tapant
son URL dans la barre dadresse du navigateur. Exemple de notre
serveur local : http://localhost/mon-site/. Il est galement possible de
passer par le menu localhost de Wamp et de choisir son projet.
2. Deuxime tape : WordPress nous informe que lutilisateur devra
tre en mesure de fournir des informations concernant la base de
donnes pour pouvoir procder linstallation (figure 2.11). Une fois
que vous tes bien certain de les possder toutes, cliquez sur le bouton
Allons-y ! .
3. Troisime tape : remplissage des champs concernant la base de
donnes (figure 2.12). Si vous travaillez en ligne, ces informations
sont fournies par votre hbergeur. Rendez-vous dans votre espace
client pour les obtenir. Les champs remplir sont :
Le nom de la base de donnes. Il sagit du nom donn lors
de la cration de la base de donnes. Ici, mon-site .
Votre identifiant de base de donnes. Avec un serveur local,
cest root .
26 Chapitre 2. Installer et apprivoiser WordPress

Figure 2.10 Se rendre sur notre site web en local

Figure 2.11 Connaissez-vous ces lments ?

Mot de passe. Sur un serveur local WAMP, le champ doit rester


vide.
Hte de la base de donnes. Cest localhost ou une adresse
donne par votre hbergeur.
2.2 Installation de WordPress 27

Prfixe de table. Il sagit ici de choisir un prfixe pour la table


qui va tre gnre, ce qui est trs pratique pour installer plusieurs
WordPress dans la mme base de donnes.

Figure 2.12 Formulaire remplir

4. Quatrime tape : validation des informations. WordPress nous


confirme quil communique bien avec la base de donnes. Il est
temps de lancer linstallation en cliquant sur Lancer linstallation !
(Figure 2.13).
5. Cinquime tape : WordPress demande des informations sur lad-
ministrateur du site (figure 2.14). Pour des raisons de scurit, il est
dconseill de mettre admin (trop peu scuris). Pour le mot de
passe, utilisez des minuscules, des majuscules et des chiffres (plus
cest long et compliqu, plus votre compte sera scuris).
6. Sixime tape : Cest termin ! WordPress confirme que linstalla-
tion sest bien droule. Il est dsormais prt lemploi (figure 2.15).

savoir Par dfaut, WordPress va installer du contenu fictif dans votre site.
28 Chapitre 2. Installer et apprivoiser WordPress

Figure 2.13 WordPress communique avec la base de donnes

Figure 2.14 Informations propos de vous et de votre site


2.2 Installation de WordPress 29

Figure 2.15 WordPress est install !

Pour plus dinformations sur linstallation de WordPress vous pouvez vous


rendre cette adresse :
https://codex.wordpress.org/Installing_WordPress.

Activer la rcriture dURL en local avec WAMP


WordPress permet la rcriture dURL. Les permaliens sont les URL
affiches qui serviront de rfrence un article (cf. chapitre 5, section
Options des permaliens ). Pour que cela fonctionne, le serveur web doit
tre paramtr dune certaine faon.
Concernant WAMP voici la marche suivre :
1. Cliquez sur licne WampServer dans la barre des tches, puis
slectionnez Apache > Apaches modules (figure 2.16).
2. Cliquez alors sur rewrite_module .
3. Votre WordPress peut maintenant activer les permaliens sans pro-
blme !
30 Chapitre 2. Installer et apprivoiser WordPress

Figure 2.16 Apache Modules

Travailler avec une URL dfinitive en local (fichier hosts et


Virtual Host)

Remarque Cette tape nest pas obligatoire et doit tre faite avant
linstallation de WordPress.

En travaillant en local avec WAMP, vous aurez dans votre navigateur une
URL du type http://localhost/monprojet/bidule.html si vous travaillez dans
un dossier nomm monprojet dans le repertoire www .
Cette URL nest pas trs lgante mais est entirement fonctionnelle. Par
contre, il vous faudra la modifier dans la base de donnes de WordPress
avant de le migrer vers son hbergement dfinitif (voir section 10.3 Dm-
nager WordPress ).
Si vous voulez travailler directement en local avec lURL dfinitive sous la
forme www.monprojet.com/bidule.html et viter ainsi ltape de mise jour,
cest possible ! Pour ce faire, nous allons procder en deux temps :
1. modifier le fichier hosts de Windows (ou de Mac ou de Linux) ;
2. ajouter un Virtual Host notre serveur Apache (WAMP).

Modification du fichier hosts


Dans un premier temps, allons chercher notre fichier hosts sur notre
ordinateur : son emplacement est : C:\Windows\system32\drivers\etc\hosts.
2.2 Installation de WordPress 31

Une fois ouvert grce un diteur de texte comme NotePad++, nous


allons pouvoir ajouter (et surtout pas remplacer) une ligne de code dans ce
fichier (tout la fin, la suite du document donc) :

127.0.0.1 www.monsite.com

127.0.0.1 correspond notre IP locale.


Le fichier hosts est un genre de carnet dadresse. Cest lui qui est
interrog en premier avant une connexion Internet. Ds que votre site sera
en ligne, pensez supprimer la ligne que nous venons dinsrer.
Pour que les modifications soient prises en compte, pensez galement
vider le cache de votre navigateur et redmarrer ce dernier.

Ajout dun Virtual Host


Des Virtuals Hosts permettent de grer plusieurs racines de sites web
(indpendants les uns des autres) avec un seul et unique serveur Apache.
Lajout dun Virtual Host requiert l aussi quelques manipulations :
Modification du fichier httpd.conf
Son emplacement :
C:\wamp\bin\apache\Apache2.2.11\conf\httpd.conf
Vrifiez que la ligne dInclude de httpd-vhosts.conf est bien dcom-
mente (suppression du caractre # la ligne 467) :

# Virtual hosts
Include conf/extra/httpd-vhosts.conf <-- ligne 467

Remarque En activant les Virtuals Hosts , ladresse "http://localhost/"


devient inaccessible.
Modification du fichier httpd-vhosts.conf
Son emplacement :
C:\wamp\bin\apache\Apache2.2.11\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 :

<VirtualHost *:80>
DocumentRoot "c:/wamp/www/monsite"
ServerName www.monsite.com
</VirtualHost>

DocumentRoot correspond au chemin daccs la racine de votre projet et


ServerName correspond au nom qui sera utilis pour accder au site.
32 Chapitre 2. Installer et apprivoiser WordPress

Pour que les modifications soient prises en compte, pensez redmarrer


le serveur (relancer WAMP) et votre navigateur.
Ladresse http://www.monsite.com pointe dsormais vers le dossier mon-
site cre prcdemment. Cest comme si le site tait dj en ligne.
WordPress pourra donc se btir sur la mme URL que lURL finale du
nom de domaine.

2.3 PRISE EN MAIN DE WORDPRESS


Linstallation termine, on peut enfin prendre en mains WordPress. Un petit
tour du propritaire simpose.
WordPress est dcoup en deux parties :
une partie publique dite front office ;
une partie prive rserve ladministration 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). Son apparence (design) dpendra du thme
activ. Pour y accder, il suffit de taper le nom de domaine de votre site.

Figure 2.17 Front office de WordPress (ici avec le thme WordPress par dfaut :
Twenty Sixteen)
2.3 Prise en main de WordPress 33

Espace dadministration (back office)


Le back office est la partie prive rserve ladministration du site. Seuls
les utilisateurs enregistrs peuvent latteindre.
Pour y accder : www.votre-nom-de-domaine.com/wp-admin/.
Une fois la page atteinte, un formulaire de login/mot de passe est
remplir (figure 2.18).

Figure 2.18 Accs au back office de WordPress

Figure 2.19 Tableau de bord de WordPress

Une fois le processus didentification termin, le Dashboard (Tableau


de bord) de WordPress souvre (figure 2.19). Il permet de visualiser dun
simple coup dil le contenu de votre site (nombre de pages, darticles,
34 Chapitre 2. Installer et apprivoiser WordPress

de commentaires...) et de prendre connaissance des news relatives au


logiciel lui-mme (alertes de scurit, dernire version disponible...).
La barre latrale (figure 2.20) est lautre composante essentielle du back
office. Elle permet daccder tous les menus de WordPress : Apparence,
Outils, Rglages, etc.

Figure 2.20 Barre latrale du tableau de bord

Chaque cran (accueil, articles, pages, commentaires...) est paramtrable


en cliquant sur longlet Options de lcran en haut droite de lcran. Il
est ainsi possible de cocher / dcocher les lments de chacun des crans
(figure 2.21).

Figure 2.21 Les options dcran permettent de personnaliser laffichage

Remarque Il existe 8 thmes de couleurs pour linterface dadministration.


Rendez-vous dans Utilisateurs > Votre profil (figure 2.22).
2.3 Prise en main de WordPress 35

Figure 2.22 Couleurs de linterface dadministration


DEUXIME PARTIE

WordPress
ct webmastering
3
Gestion fondamentale

3.1 GESTION DU CONTENU

Tableau de bord de WordPress

Les articles
Un article (dit billet ou post ) est la partie vivante de votre site. Sans
article, un blog est vide. On considre les articles comme la partie dyna-
mique, changeante, du site (comme une rubrique actualits par exemple).
Par dfaut un article est dat, pourvu de commentaires et appartient un
auteur.
40 Chapitre 3. Gestion fondamentale

Remarque importante Un article est obligatoirement catgoris. Dans une


ou plusieurs catgorie(s).

Pour y accder, il suffit de cliquer sur le bouton Article qui se


trouve dans la barre latrale gauche. Un menu droulant explicite fait son
apparition et une liste avec tous vos articles apparat ! Fort heureusement,
des filtres sont l pour vous aider. On peut trier les articles par catgories,
date de cration, article publi, brouillon, etc.
Dans les options dcran : plusieurs choix soffrent nous. On peut choisir
quels lments doivent tre affichs dans la liste ou non. savoir : lauteur,
les tags, les catgories, le nombre de commentaires et la date. Le nombre
des rubriques affiches est galement modifiable cet endroit.
Il est possible de cocher plusieurs articles pour leur appliquer une mme
action. Lors du survol dun titre darticle, un menu secondaire apparat : vous
pouvez alors diter, supprimer ou voir larticle. Pour accder un article : il
suffit simplement de cliquer sur son titre.

Les catgories
Une catgorie regroupe un ou plusieurs articles (pas de page). Elles
permettent de trier les articles suivant des thmes spciaux.

Remarque importante Il y a au minimum une rubrique : impossible de


supprimer la dernire rubrique (qui sera automatiquement la rubrique par
dfaut). Supprimer une catgorie ne supprime pas les articles quelle contient.
Les articles affects uniquement la catgorie supprime seront affects celle
par dfaut.

Pour y accder, il suffit de cliquer sur le lien Catgories qui se


trouve dans le sous-menu droulant de la rubrique Article . On y trouve
deux parties. Une partie o lon peut crer une nouvelle catgorie et une
autre contenant un tableau qui regroupe toutes les catgories (parentes et
descendantes) du site.
Les options dcrans permettent de choisir laffichage des descriptions,
du nombre darticles, des identifiants dans la liste ainsi que le nombre des
rubriques affiches.
Pour crer une catgorie, il suffit de remplir les champs se trouvant sur
la gauche. Tout dabord lui donner un nom, dfinir (ou non) une ventuelle
catgorie mre. La description est facultative : une grande partie des thmes
ne laffiche pas. Lidentifiant est gnr automatiquement si vous laissez le
champ vide. Bien entendu, noubliez pas de cliquer sur le bouton Ajouter
une catgorie !
3.1 Gestion du contenu 41

Les pages
Dans la forme, une page ressemble beaucoup un article : titre, auteur,
commentaire... Mais seulement dans la forme ! WordPress considre en
effet les pages comme un contenu part, hors du flux des articles, et qui
nvoluera pas normment dans le temps : cest un contenu permanent (il
peut sagir par exemple dune page de contact ou de prsentation dune
entreprise).

Remarque importante Les pages sont indpendantes des articles et des


catgories. Elles ne peuvent donc pas tre catgorises. Par contre, elles peuvent
crer une arborescence : page mre, enfant...

Pour y accder, il suffit dun simple clic sur le bouton Pages de la barre
latrale. Les mmes filtres apparaissent pour trier toutes vos pages.
Les options dcran sont pratiquement les mmes que celle des articles,
avec toutefois moins de choix. On peut donc choisir lauteur, le nombre de
commentaires et la date. Le nombre dlments affichs dans la liste est
galement modifiable.
Pour crer une page, il suffit de cliquer sur le bouton Ajouter .

Remarque importante Pour rsumer :


Article = Informations volatiles dans le temps (Actualits...)
Page = Informations persistantes dans le temps ( propos , contact , etc.)

Page statique vs page dynamique


Comme vous le savez peut-tre, WordPress est compos darticles et de
pages dites statiques. Or dans un environnement technique, statique
signifie que le code HTML est en dur : il ny a pas de gestion dynamique
du contenu (comme avec PHP et une base de donnes par exemple).
Une page WordPress est bien entendu dynamique puisquon peut changer
son contenu. Alors pourquoi dsigne-t-on ces pages comme statiques ? Il
faut chercher dans le pass. En effet, lorigine, WordPress tait uniquement
destin la cration dun blog ; et afficher des articles tait donc son
principal usage. Les pages statiques taient donc destines laffichage
dinformations durables dans le temps, comme par exemple la prsentation
de lauteur.
Dans WordPress, statique signifie plutt que le contenu de cette page
ne va pas changer tous les jours (contrairement aux articles).
42 Chapitre 3. Gestion fondamentale

Les types de contenus personnaliss


Ces contenus appels Custom post types en anglais permettent de publier
du contenu spcifique (livres, films, etc.). Pour faire simple ce sont des
articles personnaliss qui ne font pas partie du flux darticles standard de
WordPress.
Cette fonctionnalit nest pas active par dfaut dans un thme. Ne soyez
donc pas surpris si vous ne voyez pas ce type dlment dans la barre
latrale dadministration.
Lorsque le thme activ propose des Custom post types , ils appa-
raissent dans la barre latrale. Pour y accder, il suffit de cliquer sur lintitul
du type de contenu qui se trouve en dessous du signet Commentaires
(figure 3.1).

Figure 3.1 Exemple de contenu personnalis : projets

3.2 PUBLICATION DUN ARTICLE OU DUNE PAGE


Prsentation de linterface
Pour publier un article ou une page, linterface de publication est sensi-
blement la mme. Larticle ayant des caractristiques que la page na pas,
linverse tant galement vrai.
Commenons donc par les lments communs : le champ titre, le contenu
principal, les champs personnaliss (nous en parlons dans la partie Template
avanc) et le panneau de publication.
Voici la marche suivre :
1. Donner un titre,
3.2 Publication dun article ou dune page 43

2. Remplir le contenu principal,


3. Publier larticle.

Pour publier larticle, plusieurs choix soffrent nous : soit le publier tout
de suite, une date et une heure donnes, soit le sauvegarder ltat de
brouillon pour y revenir plus tard. Cest galement grce au panneau de
publication que nous pourrons voir un aperu de notre travail.

Les parties communes aux pages et aux articles


Grer sa publication
On peut dterminer si un article (ou une page) sera public (visible par tous),
priv (visible par les membres uniquement) ou protg par un mot de passe.
Il est possible de prvoir ou de modifier la date de publication dun article
ou dune page (Figure 3.2).

Figure 3.2 Modification de la visibilit et de la date de publication


44 Chapitre 3. Gestion fondamentale

Limage la une
Il est possible dajouter une Image la une (figure 3.3) pour associer une
miniature (ou plutt une image ddie) un article. Cette fonction peut tre
disponible pour les articles et les pages, mais galement pour les Custom
Post Type (articles personnaliss).

Figure 3.3 Les diffrents formats darticle possibles

Identifiant
Par dfaut, cest le titre qui est sous forme normalise (sans espace, sans
caractres spciaux...). Cest lui qui sera utilis lorsque vous aurez activ les
permaliens. Ainsi vous aurez une URL propre.

Rappel Longlet Options de lcran se trouvant en haut droite permet


dafficher les blocs cachs.

Figure 3.4 Lidentifiant est prsent dans lURL si les permaliens sont activs

Commentaires et Auteur
Comme leurs noms lindiquent, il est possible de grer les commentaires et
de modifier lauteur dune page ou dun article.

Les champs personnaliss


Les champs personnaliss peuvent tre utiliss afin dajouter des donnes
supplmentaires vos articles et vos pages (figure 3.5). Attention, ils ont
un lien direct avec le template. On en parle au chapitre 7.
3.2 Publication dun article ou dune page 45

Figure 3.5 Champs personnaliss

La partie propre aux articles


Les catgories
On peut directement choisir quelle(s) catgorie(s) larticle va appartenir
(figure 3.6). On peut ajouter des tags (mots-cls) nos articles. Il ne faut
pas les ngliger car ils peuvent tre trs utiles pour le moteur de recherche
ou votre thme (pour afficher des articles similaires par exemple).

Figure 3.6 Le panneau Catgories des articles

Les formats darticles


Les formats darticles (figure 3.7) de WordPress permettent de formater un
contenu selon quil sagisse dune image, dune brve, dun lien ou mme
dune vido la manire du service Tumblr.
46 Chapitre 3. Gestion fondamentale

Remarque Suivant le template activ, il est possible que les formats darticles
ne soient pas pris en compte.

Figure 3.7 Les diffrents formats darticle possibles

Lextrait
Les extraits sont des rsums facultatifs de vos articles, crits la main
(figure 3.8). Il se peut que votre thme activ sen serve ( afficher grce aux
options dcran).

Figure 3.8 Lcran Extrait


3.2 Publication dun article ou dune page 47

Les tiquettes
Les mots cls ou Tag (figure 3.9) sont des tiquettes permettant de retrou-
ver facilement un article notamment en utilisant le moteur de recherche.

Figure 3.9 Les tiquettes

Les rvisions
WordPress garde une version de chaque sauvegarde de votre article
(figure 3.10). Il est ainsi possible de revenir aisment une version ant-
rieure.

Figure 3.10 Les rvisions

La partie propre aux pages


Le panneau Attributs (figure 3.11) est important car il permet dappliquer un
thme, plus prcisment un modle de page, diffrent chaque page.
On peut par exemple crer une page daccueil qui a un modle de page
(nous en parlons dans la troisime partie de cet ouvrage) spcifique par
rapport aux autres pages du site. Dans le thme install par dfaut, il ny a
pas de modle de page. La liste droulante est donc absente.
Cest cet endroit que lon peut grer lordre des pages (par dfaut,
lordre est alphabtique).
48 Chapitre 3. Gestion fondamentale

Figure 3.11 Le panneau Attributs propre aux pages

Mise en forme du contenu


Une barre doutils ressemblant celle des logiciels de traitement de texte
est prsente pour nous aider embellir nos articles ou nos pages. Mais
attention, cette ressemblance nest questhtique (pour ne pas dstabiliser
les standards)...
Un CMS permet de mettre du contenu en ligne. Tout le ct esthtique
est gr par les feuilles de style CSS. Rappelez-vous : sparation de la forme
et du contenu !
Exemple : Si vous choisissez le format Titre1 dans la barre doutils,
votre texte va bien entendu voir sa taille augmenter, ce qui prouve unique-
ment que le formatage a bien t pris en compte (figure 3.12). En revanche,
dans la partie publique, le rsultat est totalement diffrent, car les feuilles de
style font leur travail (figure 3.13).
En choisissant le format Titre1 , WordPress a gnr le code HTML
adquat (<h1>). Ainsi, cette balise va tre style comme les CSS lindiquent
et non comme lditeur lindique. 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 gnr par WordPress. Si vous avez des aptitudes comprendre
ce langage, un petit coup dil simpose : la confiance nexclut pas le
contrle.
Dans la barre doutils, tous les standards de mise en forme sont prsents :
alignement, tabulation, couleur, listes, citations, correcteur dorthographe,
historique des actions, soulignement...
3.2 Publication dun article ou dune page 49

Figure 3.12 Rsultat dans la partie back-office

Figure 3.13 Rsultat dans la partie front office : prsence de soulignement, police
diffrente et taille diffrente

Pour notre part, nous allons nous intresser plus particulirement aux
outils propres au Web : crer un lien hypertexte, insrer un lien Lire la suite
et grer un copier/coller depuis Word (ou autres logiciels de traitement de
texte).
50 Chapitre 3. Gestion fondamentale

Pour crer un lien hypertexte, il suffit de slectionner llment et de


cliquer sur licne en forme de maillon de chane (figure 3.14).
Une fentre modale prsentant diffrentes options apparat alors
(figure 3.15). Aprs avoir indiqu ladresse du lien (externe ou en
choisissant directement une page interne), vous pouvez choisir la
manire de louvrir : dans la mme fentre ou dans une nouvelle
fentre. Il suffit ensuite de cliquer sur Insrer pour rendre le lien actif.

Figure 3.14 Crer un lien hypertexte

Figure 3.15 Insrer un lien hypertexte

Pour crer un lien Lire la suite , placez le curseur lendroit o vous


souhaitez insrer ce lien (figure 3.16). WordPress insrera alors une
balise More . Cette option peut savrer trs utile : si lun de vos
articles est trs long et quil est affich sur la page daccueil, il est alors
possible de le segmenter pour que seule lune de ses parties saffiche.
Pour grer un copier/coller depuis Word (ou autres), rien de plus
simple : un bouton spcial vous permet de contourner laventure
prilleuse du copier/coller depuis des logiciels de traitement de texte
(les styles prformats qui leur sont propres risquent en effet de crer
3.2 Publication dun article ou dune page 51

de nombreux problmes daffichage). Dans la fentre modale qui


apparat, il suffit simplement de copier votre texte puis de cliquer sur
Coller en texte (figure 3.17). Votre texte est dsormais nettoy de ses
styles et exploitable.

Figure 3.16 Insertion du lien Lire la suite

Figure 3.17 Coller depuis un logiciel de traitement texte


52 Chapitre 3. Gestion fondamentale

Insertion de mdias
Aprs la mise en forme du contenu il est temps dsormais de lenrichir
dimages, de vidos et de documents... Pour ce faire, dplacez-vous au-
dessus de la barre doutils. Vous y trouverez un bouton Ajouter un Mdia
(figure 3.18).

Figure 3.18 Barre dinsertion des mdias

Une fentre modale avec 2 options apparat alors :


Envoyer des fichiers : permet duploader un mdia qui se trouve
sur votre disque dur. Il suffit pour cela daller le chercher en cliquant
sur le bouton Slectionner des fichiers ou de faire un Glisser /
dposer de votre disque dur vers cette fentre. Selon votre hbergeur,
la taille est limite : il faudra passer par le FTP pour des fichiers plus
lourds.
Bibliothque de mdias : permet de rcuprer un mdia dj
prsent dans la bibliothque des mdias.

Remarque Le monde du Web a ses propres rgles, notamment concernant


la gestion des accents et des caractres spciaux. Les fichiers que vous allez
tlcharger (uploader) dans WordPress doivent respecter cette rgle. Dans le
cas contraire, il y a un risque de dysfonctionnement (fichiers inaccessibles). Il
faut donc bien veiller ce que les fichiers que vous allez tlcharger soient
correctement nomms (pas despace, pas de majuscule, pas de caractres
spciaux...).
3.2 Publication dun article ou dune page 53

Figure 3.19 Fentre modale des mdias

Images
Si vous avez choisi de tlcharger une image dans WordPress une dernire
tape est ncessaire avant de pouvoir linsrer dans larticle.
Il sagit de dfinir les paramtres de limage : son titre, son texte alternatif,
sa description, son lien hypertexte, son alignement et sa taille (figure. 3.20).
Vous avez galement la possibilit de lditer, de la retoucher, de la
recadrer ou de la redimensionner (figure 3.21) en cliquant sur modifier
limage . Cest tout de mme bien pratique, mme si rien ne vaut la
prparation (en local et avec les logiciels appropris) de vos images, avant
la mise en ligne.
Une fois cette tape termine, vous pouvez cliquer sur le bouton Insrer
dans larticle. Limage est dsormais visualisable directement lintrieur.
Bien entendu, elle reste modifiable. Au survol de la souris sur limage,
plusieurs icnes apparaissent : celles qui permettent de grer lalignement,
une permettant de supprimer limage de larticle (et non de la bibliothque)
et une autre permettant la modification (figure 3.22).
54 Chapitre 3. Gestion fondamentale

Figure 3.20 Paramtres de limage

Figure 3.21 Possibilit de retouches


3.3 Gestion des mdias 55

Figure 3.22 Les accs rapides Suppression ou Modification de limage

Vidos
Pour linsertion de vidos, vous pouvez trs bien passer par la solution
prcdente. Mais dans ce cas, un simple lien sera insr vers cette vido
(comme si lon uploadait un document PDF). Par ailleurs, sachez quun
hbergement standard nest pas du tout adapt aux vidos, contrairement
un serveur streaming comme Youtube, Dailymotion ou encore vimeo... :
le visiteur devra attendre le tlchargement complet de la vido avant de
pouvoir la regarder et votre bande passante en prendra un sacr coup.
Il est plus intressant dinsrer une vido 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
vido convoite (par exemple vimeo.com). Il y a gnralement un bouton
Embed ou Partager prs de la vido. Il suffit de cliquer dessus pour
pouvoir accder au code HTML et le copier (figure 3.23).
Vous pourrez ensuite le coller dans larticle grce lditeur HTML de
WordPress (figure 3.24).
Un simple clic sur le bouton Publier larticle (ou la page) et la vido se
trouve maintenant intgr sur votre site !

3.3 GESTION DES MDIAS


Bibliothque des mdias
Cest le rservoir de votre site. Il contient tous les mdias uploads sur le site.
56 Chapitre 3. Gestion fondamentale

Figure 3.23 Code HTML de la vido

Figure 3.24 Code HTML de la vido coll dans lditeur HTML de WordPress

Remarque importante Durant la rdaction dun article, chaque lment


upload est directement intgr dans la bibliothque des mdias.

Pour y accder, il suffit de cliquer sur longlet Mdias qui se trouve


dans la barre latrale. Une liste recensant tous nos mdias apparat alors.
Fort heureusement des filtres sont l pour vous aider. Vous pouvez trier les
mdias par date ou par type. Un moteur de recherche interne est mme
prsent.
Tous ces mdias sont stocks dans le rpertoire wp-content/uploads
de WordPress. Il est possible de changer ce chemin dans les rglages.
3.4 Gestion des comptes utilisateurs 57

Ajouter/Supprimer des mdias


Il est possible dajouter un fichier directement dans la bibliothque, sans
passer par la rdaction dun article ou dune page.
Dans le sous-menu de la partie Mdias, cliquez sur Ajouter . Il ne reste
alors plus qu choisir son mdia et le tour est jou ! Il sera insr dans la
bibliothque et dsormais intgrable dans vos articles ou dans vos pages.

3.4 GESTION DES COMPTES UTILISATEURS

Le compte Administrateur
Le compte Administrateur, cest 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 : ds linstallation, WordPress cre automatiquement un
compte. Cest celui de ladministrateur (srement vous-mme).

Les diffrents niveaux dutilisateurs


Fort heureusement, WordPress possde une gestion des droits avec plusieurs
niveaux pour chaque utilisateur. On y trouve ainsi plusieurs rles :
Administrateur
diteur
Auteur
Contributeur
Abonn

Chaque rle possde ses propres droits (tableau 3.1). Celui ayant le
moins de droit est labonn : il ne peut gure laisser autre chose que des
commentaires (si toutefois vous avez activ cette option dans les rglages de
WordPress).
Pour de plus amples informations concernant les droits des utilisateurs
WordPress, vous pouvez consulter ce site :
http://codex.wordpress.org/User_Levels.
58 Chapitre 3. Gestion fondamentale

Tableau 3.1 Droits des utilisateurs sous WordPress


Admin. 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)
Cration dune page Oui Oui Non Non Non
Gestion des pages Oui Oui Non Non Non
Gestion des Oui Oui Non Non Non
catgories
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 Oui Non Non Non Non
utilisateurs
Gestion des options Oui Non Non Non Non
dition du profil Oui Oui Oui Oui Oui

Crer un nouveau compte


Dans le sous-menu de la partie Utilisateurs, cliquez sur Ajouter. Il ne vous
reste plus alors qu remplir les champs et surtout indiquer le rle de ce
nouvel utilisateur.

Conseil : ne crez pas un compte ayant comme identifiant admin .


Dans les versions antrieures de WordPress, admin tait lidentifiant
gnr par dfaut. Cela posait des soucis de scurit...

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 dailleurs possible dafficher uniquement
les administrateurs.
Pour supprimer un utilisateur, cochez la case correspondante et choisissez
dans la liste Supprimer , puis cliquez sur Appliquer . Cet utilisateur est
dsormais supprim dfinitivement.
Pour modifier les donnes dun utilisateur, un clic sur son nom permet
daccder son profil o tout est modifiable : son rle, son adresse e-mail,
son mot de passe, etc.
3.5 Gestion des menus personnaliss 59

Grer son profil


Une information sur vous-mme modifier ? Cest trs simple : rendez-
vous dans le sous-menu Votre profil. Vous pouvez alors changer toutes les
donnes vous concernant : mot de passe, biographie, etc.

3.5 GESTION DES MENUS PERSONNALISS


Prsentation de linterface
Pour accder la gestion des menus il suffit de cliquer sur la sous-partie
Menus du signet Apparence (figure 3.25).

Remarque Avant de pourvoir crer et de grer un menu, il est logique davoir


dj cr au pralable des articles, des pages ou des catgories.

Figure 3.25 Interface dadministration des menus

Cration dun menu personnalis


Avant de pouvoir placer des lments (liens, pages, catgories) dans un
menu il faut dabord le crer ! Rien de plus simple : donnez-lui un nom,
par exemple mon menu et cliquez sur le bouton Crer un menu
(figure 3.26).
60 Chapitre 3. Gestion fondamentale

Figure 3.26 Panneau de cration dun menu

Une fois cette tape passe, une bote nous invite crer la structure du
menu ainsi que de le rgler (figure 3.27).

Figure 3.27 Le menu a t assign dans lemplacement Haut Principal de ce thme

Note Pour ajouter un menu supplmentaire il suffit de cliquer sur le lien


Crez un nouveau Menu Pour supprimer le menu, cliquez sur le lien
Supprimer le menu .

Vue densemble
Une fois le menu cr et plac, nous allons pouvoir le remplir ! gauche de
lcran se trouvent 4 rubriques : Pages , Articles , Liens personnaliss
et Catgories (figure 3.28).
3.5 Gestion des menus personnaliss 61

Figure 3.28 Le menu a t assign dans lemplacement Haut Principal de ce thme

Le panneau Liens personnaliss permet dajouter un lien de votre choix


(figure 3.29). Aprs avoir renseign lURL et son nom, un simple clic sur
Ajouter au menu fera laffaire.
Ne pas oublier de cliquer sur le bouton Enregistrer le menu dans
le panneau du menu courant pour quil prenne en compte ces nouveaux
lments (figure 3.30).

Ajout dune ou plusieurs pages


Ce panneau permet dajouter une ou plusieurs pages au menu courant. Des
signets permettent de trier les pages les plus rcentes ou lensemble
des pages. Ils permettent galement la recherche dune page prcise
(figure 3.31).
Une liste de pages avec des cases cocher apparatra 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 panneau du menu courant pour quil prenne en compte ces nouveaux
lments.
62 Chapitre 3. Gestion fondamentale

Figure 3.29 Panneau dajout dun lien

Figure 3.30 Bouton Enregistrer le menu

Ajout dune ou plusieurs catgories


Ce panneau permet dajouter une ou plusieurs catgories au menu courant
(figure 3.32). Le fonctionnement est le mme que pour le panneau des
pages.
3.5 Gestion des menus personnaliss 63

Figure 3.31 Panneau dajout des pages

Figure 3.32 Panneau dajout dune ou plusieurs catgories


64 Chapitre 3. Gestion fondamentale

Dfinir lemplacement des menus


Aprs cration dun menu, un signet Grer les emplacements apparat
(figure 3.33). En cliquant dessus, vous arrivez une interface qui liste tous les
emplacements du thme. Il est possible que certains thmes naient aucun
emplacement... Chaque thme possde ses propres emplacements. vous
de choisir lemplacement de chaque menu en cliquant sur Enregistrer les
modifications .

Figure 3.33 Le menu a t assign dans lemplacement Haut Principal de ce thme

Grer les lments dun menu personnalis


Lorsquun menu personnalis contient plusieurs lments, nous pouvons les
grer et les organiser.

diter un lment dun menu


Pour diter un lment (liens, pages, catgories), il suffit de cliquer sur
la flche grise de droite. Un volet droulant fera alors apparatre les
paramtres (figure 3.34).
Aprs modification, noubliez pas de cliquer sur le bouton Enregistrer le
menu .
3.5 Gestion des menus personnaliss 65

Figure 3.34 dition des lments (page, catgorie, article, lien)

Dfinir lordre des lments dun menu


Pour diter lordre des lments, un simple drag-and-drop
(glisser/dposer) suffit (figure 3.35).
Aprs modification noubliez pas de cliquer sur le bouton Enregistrer le
menu . Dsormais, lordre est modifi dans la partie publique du site.
66 Chapitre 3. Gestion fondamentale

Figure 3.35 Dfinir lordre des lments

Dfinir des pages parents/enfants


Il est possible de crer une arborescence entre les lments dun menu
personnalis, l encore grce un simple glisser/dposer (figure 3.36).
Aprs modification noubliez pas de cliquer sur le bouton Enregistrer le
menu .

Figure 3.36 laboration de larborescence du menu personnalis


3.6 Gestion des commentaires 67

3.6 GESTION DES COMMENTAIRES


Grer les commentaires
Un commentaire est un court texte laiss la suite dun article ou dune
page. Il permet de rcolter les ractions des internautes propos dune
publication.

Remarque Lorsque de nouveaux commentaires ont t posts, vous en tes


directement inform par une petite info bulle. Cette dernire apparat dans la
barre latrale, dans le signet Commentaires (figure 3.37).

Figure 3.37 Signet Commentaires : il indique le nombre de commentaires non lus

Pour y accder, il suffit de cliquer sur longlet Commentaires se


trouvant dans la barre latrale.
Une liste recensant tous les commentaires saffiche alors. Elle y recense
le nom de lauteur, son adresse IP, le commentaire quil a laiss et le sujet
dorigine. En survolant les lignes de cette liste avec la souris, un menu
proposant diffrentes actions (dsapprouver, rpondre, modifier, reporter
comme spam et supprimer) apparat.
Un webmaster est responsable du contenu dun site Internet. Il est
donc primordial de pouvoir grer les commentaires que peuvent laisser
les internautes. Si les commentaires sont ouverts, cest cet endroit quil est
possible de les modrer.
Dans les filtres vous remarquerez lexistence dun type de commentaire
particulier : les pings . Les pings sont des rtroliens.
Selon Wikipdia, Un rtrolien (en anglais trackback) est un systme
de liens inter-blogs semi-automatis. Il permet aux auteurs de relier des
billets de blogs diffrents et parlant du mme sujet, ou se faisant rfrence.
Concrtement, lauteur dun blog A peut tablir un rtrolien vers un billet
dun blog B en faisant, dans un de ses propres billets sur son blog A, un
lien vers lURL du billet du blog B. Si le blog B gre les rtroliens, il est
automatiquement indiqu dans le billet sur le blog B que le blog A y fait
rfrence .

savoir Si un tweet mentionne votre site, vous en serez automatique-


ment averti.
68 Chapitre 3. Gestion fondamentale

Paramtrer les commentaires


Vous pouvez grer les commentaires de deux manires diffrentes : soit au
moment de la cration dun article ou dune page, soit dans les paramtres
gnraux de WordPress.

Lors de la cration dun article ou dune page


Dans la partie infrieure de linterface de publication, un bloc Discussion
permet dautoriser la publication des commentaires et des pings. Cochez ou
dcochez la case qui vous intresse (figure 3.38).

Figure 3.38 Le bloc Discussion

Dans les paramtres gnraux de WordPress


Cette partie va beaucoup plus loin en termes de paramtrage. WordPress
possde en effet une rubrique qui y est entirement ddie. Rendez-vous pour
cela dans la sous-partie Discussion du signet Rglages (figure 3.39).

Figure 3.39 Accs la rubrique Discussion

Ce panneau de configuration est compos de plusieurs sections donnant


accs de nombreuses fonctionnalits :
3.6 Gestion des commentaires 69

Rglages par dfaut des articles. Vous pouvez rgler ici le


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

Figure 3.40 Rglages par dfaut des articles

Autres rglages des commentaires. Vous avez la possibilit de


dfinir ici la faon de publier un commentaire et de grer son affichage
(figure 3.41).

Figure 3.41 Autres rglages des commentaires

Menvoyer un e-mail lorsque. Choisissez dans cette section


comment WordPress avertit un modrateur de la publication dun
commentaire (figure 3.42).

Figure 3.42 Section Menvoyer un e-mail lorsque

Avant la publication dun commentaire. Cette section est impor-


tante : vous pouvez choisir dy modrer un commentaire a posteriori
ou, au contraire, avant sa publication (figure 3.43).
70 Chapitre 3. Gestion fondamentale

Figure 3.43 Section Avant la publication dun commentaire

Modration de commentaires. Vous pouvez ici paramtrer les


critres selon lesquels un commentaire est directement mis en attente
de modration. Ces critres sont le nombre de liens maximal ainsi
quune file de modration (figure 3.44). Vous devrez dailleurs remplir
cette dernire avec une adresse IP, un mot, une partie dun mot...

Figure 3.44 Section Modration de commentaires

Liste noire des commentaires. Paramtrez ici les critres selon


lesquels un commentaire est dfinitivement marqu comme indsirable
(figure 3.45). Comme prcdemment, une liste noire est remplir avec
des URL, des noms, des adresses e-mails...

Figure 3.45 Section Liste noire des commentaires


3.6 Gestion des commentaires 71

Les avatars. Un avatar , (mais vous le savez sans doute dj),


cest une petite image (vignette) qui saffiche lorsque vous postez un
commentaire. Un avatar permet de vous faire une identit propre sur le
net. Pour les heureux possesseurs dun compte Gravatar (www.gravatar.
com), la fonctionnalit est directement intgre dans les options de
discussion (figure 3.46). Cela peut sembler vident, car Automattic, la
socit propritaire de WordPress, a rachet Gravatar...

Figure 3.46 Avatar par dfaut

Mais cest 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 modifie, ce qui
savre trs pratique.
Concrtement, voil ce qui diffrence une personne possdant un compte
Gravatar dune personne nen possdant pas : la personne nayant pas de
compte Gravatar se verra attribuer automatiquement une vignette par dfaut
(figure 3.47).
72 Chapitre 3. Gestion fondamentale

Figure 3.47 Avec et sans compte Gravatar


4
Gestion
des fonctionnalits

4.1 GESTION DE LAPPARENCE

Installation dun thme


Un thme (ou template) permet de changer laspect graphique et fonctionnel
dun site Internet.
Vous trouverez un template sur www.dunod.com. Vous avez galement
la possibilit den obtenir un sur Internet (gratuit ou payant). Il est toutefois
possible de crer son propre template (la troisime partie de ce livre y est
consacre). Quelle que soit la manire dont vous vous ltes procur, il y a
deux dmarches pour lactiver :
La premire (Manuelle & conseille) :

Si vous lobtenez dans un format darchive (.zip, .rar, etc.), il faut tout
dabord le dcompacter ou dcompresser.
Le dossier rsultant de ce dcompactage doit tre plac (par FTP ou
localement) dans le dossier wp-content/themes de WordPress.
Le thme est dsormais install, il ne reste plus qu lactiver.
La seconde (Automatique) :
74 Chapitre 4. Gestion des fonctionnalits

Rendez-vous dans la sous-rubrique thme (Figure 4.1) et cliquez sur


Envoyer en haut de lcran. Tlchargez votre template au format .zip et
WordPress soccupe de tout. Il ny a plus qu lactiver.
Remarque Si vous voulez supprimer un thme : supprimez-le de ce dossier.
Nanmoins, une dsactivation de ce thme dans lespace dadministration sera
pralablement ncessaire.

Activation/Dsactivation dun thme


Dans lespace dadministration de WordPress, vous trouverez un signet
Apparence et sa sous-section Thmes (figure 4.1). En cliquant sur
celle-ci, vous apercevrez le thme actif et les autres thmes disponibles.

Figure 4.1 Le signet Apparence

Placer le thme dans le dossier wp-content\themes aura alors pour


consquence lajout du template dans la liste.
Dans linterface de gestion des thmes, il est possible davoir un aperu,
de supprimer le thme et bien entendu de lactiver (figure 4.2). En fonction
de laction choisie, une info-bulle apparat pour vous signaler que laction
sest bien droule (ou non).
Si vous retournez maintenant sur le front office, vous pourrez constater
que laspect du site a compltement chang, grce un simple clic !
Remarque Un thme change lapparence extrieure de votre site mais il
peut galement ajouter de nouvelles fonctionnalits comme la gestion dun
diaporama, dune galerie photo, des types darticles supplmentaires, etc. Ds sa
dsactivation, ces fonctionnalits seront galement dsactives.
4.1 Gestion de lapparence 75

Figure 4.2 Linterface de gestion des thmes

Changer larrire-plan
Si le thme activ le permet, vous pouvez aisment changer larrire-plan :
rendez-vous dans son interface de gestion dans la sous rubrique Arrire
Plan (figure 4.3). Il est alors possible de personnaliser en direct larrire-
plan de votre thme.

Figure 4.3 Linterface de gestion de larrire-plan


76 Chapitre 4. Gestion des fonctionnalits

Une fentre daperu permet de visualiser larrire-plan actuel (vide ou


non).
Pour ajouter une image darrire-plan, cliquez sur le bouton Slection-
ner une image pour chercher, comme son nom lindique, une image sur
votre ordinateur.
Il est ensuite important de dfinir la position de limage ( gauche, centre
ou droite) par rapport la fentre du navigateur ; de dterminer si elle doit
se rpter horizontalement, verticalement, les deux ou pas du tout ; et enfin
de choisir si, lors dun scroll, larrire-plan reste fixe ou si limage bouge
avec.
Il est mme possible de visualiser lapparence du site sur tablette ou
mobile en cliquant sur les boutons se situant en bas gauche.

Changer limage de len-tte du site (header)


Le header est lentte du site. Si le thme activ le permet, il est possible de
changer limage du header. Rendez-vous dans la sous-section En-tte du
signet Apparence .
Lisez bien les recommandations (bien quil soit possible de recadrer les
images directement dans WordPress), puis tlchargez votre propre image.
Cliquez sur le bouton Enregistrer & publier pour mettre votre image en
ligne.

Figure 4.4 Linterface de gestion de limage du header


4.2 Gestion des extensions (plugins) 77

4.2 GESTION DES EXTENSIONS (PLUGINS)


De quoi sagit-il ?
Les extensions, que nous appellerons plugins , permettent de modifier ou
dajouter des fonctionnalits WordPress.
Facilement trouvable sur Internet, la plupart sont disponibles gratuitement
et dans le WordPress Store : http://wordpress.org/extend/plugins/.
Il est possible de chercher et installer directement des plugins partir de
linterface dadministration de WordPress.

Remarque Lun des plugins les plus utiliss dans WordPress est le plugin
Akismet . Il permet de limiter le spam sur les commentaires.

Installation/Suppression
Avant dinstaller un plugin, noubliez pas de vrifier quil est compatible avec
votre version de WordPress.
Pour installer et supprimer des plugins, deux mthodes sont possibles : la
mthode automatique et la mthode manuelle.

La mthode manuelle
Comme pour linstallation dun thme, il faut tout dabord dcompresser
larchive. Le dossier (ou le fichier) rsultant de la dcompression doit tre
plac (par FTP ou localement) cet endroit : wp-content/plugins . Une
fois lopration ralise, il ne reste plus qu activer le plugin.
Vous laurez compris, pour supprimer un plugin, il faut le supprimer de
ce fichier. Une dsactivation est conseille au pralable.

La mthode automatique
Pour vous faciliter la tche, WordPress pense tout ! Rendez-vous dans la
rubrique Extensions puis cliquez sur Ajouter (figure 4.5).
Un champ de recherche vous y attend. Tapez un ou plusieurs mots-cls
(de prfrence en anglais) puis cliquez sur le bouton Chercher parmi les
extensions .
Si des rsultats sont disponibles, vous obtiendrez alors une liste de
plusieurs plugins. Tous sont pourvus dune note, dune description et
dinformations sur leur version (figure 4.6).
78 Chapitre 4. Gestion des fonctionnalits

Figure 4.5 Ajouter un nouveau plugin

Pour installer celui qui vous intresse, cliquez sur Installer maintenant .
Une alerte vous demande alors de confirmer cette action.
Aprs confirmation, WordPress tlcharge et place automatiquement le
plugin dans le fichier wp-content/plugins . Il ne reste plus qu lactiver et
le tour est jou !

Attention Cette mthode ne fonctionne pas chez certains hbergeurs.

Activation/Dsactivation
Dans lespace dadministration de WordPress, vous trouverez un signet
Extensions et sa sous-section Extensions Installes . En cliquant sur
celle-ci, vous pourrez voir tous les plugins installs et leur statut (activ ou
non) (figure 4.7).
Aprs avoir plac le plugin dans le fichier wp-content/plugins , il
apparatra dans la liste avec sa description (souvent en anglais). Il suffit
alors de lactiver en cliquant sur le lien Activer .
Pour le dsactiver : cliquez sur le bouton Dsactiver .
4.2 Gestion des extensions (plugins) 79

Figure 4.6 Rsultat de la recherche

Figure 4.7 Interface de gestion des plugins


80 Chapitre 4. Gestion des fonctionnalits

Lorsquune nouvelle version du plugin est disponible, vous en serez


directement inform par une info-bulle qui apparatra dans le signet
Extensions (figure 4.8).

Figure 4.8 Info-bulle reprsentant les mises jour disponibles

Utilisation dun plugin


Certains plugins sont paramtrables. Ils ajoutent alors, au moment de leur
activation, de nouvelles sous-sections dans le signet Rglages de la barre
latrale gauche.
Les plugins les plus aboutis ajoutent mme de nouveaux signets la suite
de la barre latrale.
Quoi quil en soit, dans linterface de gestion des plugins (signet Exten-
sions ) un lien Rglages apparat au niveau du plugin concern dans la
liste (figure 4.9).

Figure 4.9 Le lien Rglages apparat en fonction du plugin install, soit directement dans
la liste des plugins, soit une rubrique sest ajoute dans la sidebar
4.3 Gestion des widgets 81

4.3 GESTION DES WIDGETS


De quoi sagit-il ?
Un widget est un plugin. Pour obtenir un nouveau widget, il faut donc installer
un plugin. Un widget peut tre plac trs facilement dans votre thme, si ce
dernier dispose des emplacements ncessaires.
Par exemple, un widget permet dinsrer nimporte quel texte ou code
HTML lendroit o vous le placez.

Remarque Un widget nest utilisable que dans un thme qui accepte les
widgets. Pas dinquitude, la plupart des thmes acceptent les widgets. Dans la
troisime partie, nous apprendrons rendre un thme Widget-ready .

Installation/Suppression
Un widget tant un plugin, la manipulation est donc la mme que pour
celui-ci : aprs dcompression de larchive, il suffit de la placer dans le
dossier wp-content/plugins . De mme, un widget se supprime comme
un plugin.

Activation/Dsactivation
Pour activer ou dsactiver un widget, il suffit de se rendre dans linterface de
gestion des Plugins en cliquant sur le signet Extensions puis dactiver le
plugin. Pour le dsactiver, cliquez sur Dsactiver .

Utilisation des widgets


Lutilisation des widgets est cette fois-ci diffrente de celle des plugins.
Rendez-vous dans la sous-rubrique Widgets du signet Apparence .
Dans linterface de gestion des widgets, vous pouvez reprer deux grandes
sections (figure 4.10) :
la partie de gauche recense tous les widgets disponibles ;
la partie de droite recense toutes les zones de votre thme actif qui
acceptent les widgets. En fonction de votre thme, le nombre de zone
va donc voluer.

Pour faire apparatre un widget sur la partie publique, il suffit dun simple
glisser/dposer. Choisissez votre widget dans la partie de gauche et dplacez-
le lendroit souhait dans la partie de droite.
82 Chapitre 4. Gestion des fonctionnalits

Figure 4.10 Interface de gestion des widgets

Lorsque le widget est plac dans la barre de droite, il est dsormais


possible de lutiliser et de le paramtrer.

Remarque Un mme widget peut tre utilis plusieurs endroits dans le site
(si le thme le permet) avec des paramtres diffrents.
Exemple : on peut placer le widget texte dans la sidebar et dans le
footer avec un texte diffrent pour chaque partie.

Pour faire disparatre un widget de la partie publique, deux possibilits


soffrent vous :
le supprimer dfinitivement en cliquant sur Supprimer dans la zone
o il est actif ;
le rendre inactif tout en gardant ses paramtres. Il suffit pour cela
de le glisser vers la partie infrieure appele Widgets dsactivs
(figure 4.11). Vous pourrez le ractiver tout moment en le faisant
glisser nouveau dans la zone de votre choix.
4.3 Gestion des widgets 83

Figure 4.11 Zone des widgets dsactivs


5
Paramtrage
de WordPress

5.1 LES RGLAGES


Rglages gnraux
Vous pouvez paramtrer ici les options gnrales de votre site (figure 5.1) :
son titre, sa description, son adresse web, ladresse e-mail du webmaster
(importante en cas de notification), le fuseau horaire, le format de la date et
de lheure et dfinir quel jour la semaine commence.
Si votre site a pour vocation dtre un site communautaire, activez loption
Tout le monde peut senregistrer puis dfinissez le statut de chaque nouvel
utilisateur.

Attention Modifier les lignes des adresses URL, tout en haut de linterface
de gestion (figure 5.2) aurait pour consquence de rendre votre site totalement
inaccessible : la base de donnes ayant enregistr cette nouvelle URL, Word-
Press a donc rebti tous ses liens. Il est dconseill de toucher ces lignes.

Comment choisir sa langue ?


Par dfaut, WordPress est en anglais. Il est nanmoins possible de tlcharger
une version franaise de WordPress (https://fr.wordpress.org/).
86 Chapitre 5. Paramtrage de WordPress

Figure 5.1 Interface de gestion des rglages gnraux

Mais nous allons voir quil est relativement simple dinstaller et de choisir
une langue, grce la procdure suivante :
Tout en bas des rglages gnraux, il y a une liste droulante avec
plusieurs langues.
Choisir la langue dsire.
WordPress tlcharge et installe automatiquement le fichier traducteur.
Cest termin !
5.1 Les rglages 87

Figure 5.2 LURL de votre site

Figure 5.3 Liste droulante pour le choix des langues


88 Chapitre 5. Paramtrage de WordPress

Options dcriture
Ces options concernent la mise en forme, le paramtrage et la publication
des articles distance (figure 5.4). WordPress peut par exemple convertir
des caractres en moticnes (il suffit pour cela de lui indiquer de le faire...).

Figure 5.4 Les options dcriture

Vous avez ici la possibilit de choisir la catgorie par dfaut des articles
(cette catgorie choisie ne pourra pas tre supprime). Lors de la suppression
dune catgorie, tous ses articles, seront automatiquement intgrs la
catgorie par dfaut.
Avec WordPress, il est possible de publier un article distance, sans
passer par linterface dadministration :
soit par e-mail (vous devez alors dfinir un compte e-mail secret avec
une adresse POP3 : tout e-mail reu cette adresse sera publi) ;
soit par lintermdiaire dun protocole de publication Atom ou lune
des interfaces de publication XML-RPC.
5.1 Les rglages 89

Options de lecture
Ces options permettent de dfinir les rglages de la page daccueil, de la
page qui affiche les articles, de la pagination (nombre darticles afficher
sur une page), de laffichage (extrait ou texte complet) des articles et de leur
encodage, ainsi que du paramtrage des flux RSS (figure 5.5).

Figure 5.5 Les options de lecture

Exemple : crer une page Blog qui va afficher tous les articles
WordPress permet de choisir dans quelle(s) page(s) les articles vont safficher.
Par dfaut, cest sur la homepage de votre site, mais vous pouvez galement
crer une page Blog dans lespace dadministration. Il suffit ensuite de
choisir cette page pour publier tous les articles de votre site.

Exemple : choisir une page daccueil diffrente du reste du site


Par dfaut, la page daccueil de WordPress affiche les derniers articles
publis, mais il est tout fait possible de lui affecter une page que vous
aurez cre auparavant.
Pour ce faire, il suffit de crer une page Accueil dans lespace
dadministration et de lui affecter un modle de page (nous en parlons
dans la troisime partie, mais sachez ds prsent que sa disposition sera
diffrente des pages internes). Dfinissez ensuite cette page comme page
daccueil et le tour est jou (figure 5.6) !
90 Chapitre 5. Paramtrage de WordPress

Figure 5.6 Options de la page daccueil

Le thme que vous utilisez joue un rle primordial. Si vous tes webde-
signer, une pratique recommande consiste crer un modle de page
spcifique la page daccueil lors de la cration dun template. Grce aux
template tags de WordPress, le modle affichera ce que vous voulez.

Options de discussion
Nous avons dj dtaill ces rglages dans la section Paramtrer les
commentaires du chapitre 3. Pour mmoire, ils permettent de grer en
profondeur les commentaires des internautes.

Rglages des mdias


Ces rglages permettent de prciser la taille (en pixels) des images du site.
Vous pouvez y rgler la taille des miniatures, leur taille moyenne et maximum
(figure 5.7). chaque fois que vous allez uploader une image, WordPress
crera trois instances de celle-ci dans le fichier wp-content/uploads .

Remarque Ces rglages ne sont pas rtroactifs. Pensez eux avant dintgrer
tout le contenu de votre site.

Ces paramtres prdfinis seront automatiquement accessibles lors de


linsertion dune image dans un article ou une page.
Vous pouvez galement limiter la taille des affichages distants (vidos de
Youtube ou de Dailymotion, par exemple). Si la largeur est laisse vide, les
affichages utiliseront par dfaut la largeur maximale de votre thme.
Enfin, il est possible de dfinir lemplacement o tous les mdias
seront tlchargs (tlchargs). Par dfaut, ils seront dans le fichier :
wp-content/uploads et tris par anne / date.
5.1 Les rglages 91

Figure 5.7 Rglage des mdias

Moteur de recherche
En bas de lcran des options de lecture, vous pouvez paramtrer ici la
visibilit de votre site dans les moteurs de recherche (figure 5.8). Cest la
premire tape pour un bon rfrencement.

Figure 5.8 Panneau de gestion des options de vie prive

Options des permaliens


Les permaliens sont les URL affiches qui serviront de rfrence un
article. WordPress offre la possibilit de crer une structure dadresses
personnalises pour les permaliens et les archives. Cette fonctionnalit
permet damliorer lesthtique, lutilisation et la prennit des liens.
Exemple : soit un article ayant pour titre Bonjour catgoris dans
news . Par dfaut, WordPress va afficher cet article avec cette URL :
http://www.mon-site.com/?p=8
o la variable p correspond lidentifiant de larticle ou de la page.
92 Chapitre 5. Paramtrage de WordPress

Or cette URL nest pas trs explicite, ce qui peut nuire au rfrencement.
Nanmoins, une solution existe : il va sagir de demander WordPress
de changer laffichage de cette URL pour la rendre plus explicite.
WordPress propose plusieurs structures courantes, mais vous pouvez crer
une structure personnalise en ajoutant les deux marqueurs suivants dans la
rubrique prvue cet effet (figure 5.9) :

/%category%/%postname%/

Figure 5.9 Permalien personnalis

WordPress va donc dabord afficher la catgorie de larticle puis son titre.


LURL se prsentera alors dsormais sous cette forme :
http://www.mon-site.com/news/bonjour/
Parfois, lorsquon opre un changement sur la structure des permaliens
(ou lors dune mise jour), des problmes daffichage font leur apparition
(erreur 404 sur les liens). Pour les rsoudre, il est conseill dappliquer
nouveau la structure par dfaut, puis de revenir la structure personnalise.
Cette petite manipulation vous vitera de vous arracher les cheveux.
5.1 Les rglages 93

Pour plus dinformations sur les marqueurs, rendez-vous ladresse


suivante : http://codex.wordpress.org/Using_Permalinks

Comment mettre en place les permaliens ?


Pour un serveur local voir le chapitre 2 Activer la rcriture dURL en local
avec WAMP .
En gnral, dans le cas dun hbergement en ligne, vous navez rien
paramtrer. Mais au besoin, voici la marche suivre.
Votre serveur devra tre correctement configur. Dans le cas contraire,
une page Not found ou erreur 404 apparatra.
1. Premirement, le serveur doit permettre WordPress dcrire (de
crer) un fichier .htaccess la racine de WordPress. Vrifiez donc
les droits dcriture grce votre logiciel FTP.

titre informatif, voici ce que WordPress va crire dans le fichier


.htaccess :

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

2. Deuximement, il faut activer le mode URL rewriting du serveur :


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

#LoadModule rewrite_module modules/mod_rewrite.so

Il suffit de dcommenter cette ligne en enlevant le caractre # .


Ce qui donne alors :

LoadModule rewrite_module modules/mod_rewrite.so


94 Chapitre 5. Paramtrage de WordPress

5.2 LES OUTILS


Leur fonction
Les outils sont une aide pour les webmasters dun site WordPress
(figure 5.10). Par dfaut seulement 2 sont installs : Press This et
Convertisseur de catgories et tiquettes.

Figure 5.10 Le signet Outils

Principaux usages
Exporter le contenu de votre site
En cliquant sur Exporter , vous pouvez exporter uniquement vos articles,
pages, commentaires, champs personnaliss, catgories et mots-cls.
Une fois que le fichier XML tlcharg a t enregistr, vous pouvez utiliser
la fonction Importer dun autre blog WordPress pour pouvoir importer ce
fichier dans cet autre site.

Importer le contenu de votre site


En cliquant sur Importer , WordPress peut rcuprer certains contenus que
vous avez posts au pralable sur dautres plates-formes.
Mais limportation la plus utile est bien entendu limportation dun autre
site WordPress (pratique lors dun dmnagement de votre site). Il suffit alors
de tlcharger le fichier XML gnr (comme lors de lexport prcdent) et
WordPress soccupe du reste. Vous tes dsormais en possession de tout le
contenu de votre ancien site.
Mais attention, ce fichier XML ne contient ni vos plugins, ni vos mdias,
ni mme votre menu... Toutefois, sagissant des images, WordPress essayera
de les rcuprer si elles sont encore en ligne sur votre ancien site.
5.3 Prparer WordPress : quelques recommandations 95

Mettre jour WordPress


WordPress peut soccuper lui-mme de la mise jour de votre site WordPress,
ce qui est trs pratique. En fonction de votre hbergeur, cette solution
fonctionnera trs bien ou pas du tout...
Attention, mettre jour WordPress requiert quelques prcautions dusage.
Avant de procder une mise jour automatique, veillez toujours effectuer
une sauvegarde de votre site (tous les fichiers) et une sauvegarde de votre
base de donnes. Personne nest labri dune mise jour qui choue.
Avant de vous lancer dans cette tape, rendez-vous dans la section
Mettre jour WordPress du chapitre 11.

5.3 PRPARER WORDPRESS : QUELQUES


RECOMMANDATIONS
Vous matrisez maintenant linstallation de WordPress ainsi que son adminis-
tration. Mais avant de vous lancer corps perdu dans le dveloppement de
votre site, quelques recommandations simposent :
Activer le plugin Akismet
Akismet permet dviter le spam qui risque de contaminer trs rapide-
ment vos commentaires. Cest un plugin dj install par dfaut, et il ne
reste plus qu lactiver. Lors de lactivation, un message apparat vous
demandant une clef API. Suivez alors le lien propos pour lobtenir. De
retour dans lespace dadministration des plugins, insrez-la lendroit
adquat.
Paramtrer vos permaliens
Noubliez pas de paramtrer vos permaliens. Ils vous seront utiles pour
la clart de votre site (ils sont mmorisables) et pour son rfrencement
(les moteurs de recherches aiment cela !).
Remplir votre profil
Il est quand mme plus agrable et plus pro davoir son profil
rempli. Si vous ne donnez pas lexemple, les ventuels autres utilisa-
teurs risquent galement doublier de le faire. Tous ces renseignements
peuvent tre affichs la fin dun article (cela dpend du thme). Pour
ce faire, rendez-vous dans la section utilisateur .
Bien entendu, si votre site ne comporte pas de commentaires (site
vitrine dune entreprise par exemple) ces informations ne sont pas trs
importantes.
Nettoyer WordPress
Lors de son installation, WordPress insre du contenu fictif : articles,
commentaires, liens... Effacez-le. Crez vos propres catgories avant
96 Chapitre 5. Paramtrage de WordPress

de commencer la rdaction du contenu (ou avant mme de crer votre


propre thme).
Sassurer que lupload de mdias fonctionne et est bien
paramtr.
Vous pouvez uploader une image dans la bibliothque de mdias pour
vous assurer que tout fonctionne bien. Si ce nest pas le cas, WordPress
vous avertira. La plupart du temps, cest un problme de droit de fichier.
Il est possible de le rsoudre grce votre logiciel FTP.
Crer un deuxime compte administrateur
Noubliez pas de crer un deuxime compte administrateur (avec
des identifiants extrmement difficiles trouver). En effet, si votre
premier compte administrateur est pirat, vous pourrez peut-tre grce
lui accder lespace dadministration, pour sauver votre site de
lattaque.

Vous pouvez complter vos connaissances en vous rendant ladresse


suivante : http://codex.wordpress.org/WordPress_Lessons.
TROISIME PARTIE

WordPress
ct webdesign
6
Comment fonctionne
un thme ?

6.1 LES THMES : LEUR ANATOMIE


Prrequis : quest-ce quun site Internet ?
Cette partie est destine aux personnes comme les webdesigners qui
souhaitent transformer un thme WordPress graphiquement et fonctionnelle-
ment. Il est donc important de connatre les trois principaux langages que
WordPress utilise, savoir : HTML, CSS et PHP.

Un site Internet : quest-ce que cest ?


Une page dans votre navigateur rsulte de plusieurs choses. En gnral, voici
les diffrents acteurs dans le cas dun site statique (sans CMS ou gestionnaire
de contenu) :
Du contenu (texte, images, vidos, etc.)
Le code HTML : permet de classer smantiquement le contenu grce
laide de balises (navigation, titre, paragraphe, image, etc.)
Le code CSS : permet de styler ces balises et donner ainsi une appa-
rence plus ou moins attrayante. Cest galement le CSS qui permet
dadapter graphiquement un site aux appareils mobiles (smartphone,
tablette, etc.)
Le javascript : permet de sublimer votre site grce aux animations et
aux vnements (diaporama, menu droulant, ajax, etc.).
100 Chapitre 6. Comment fonctionne un thme ?

On spare toujours le contenu (HTML) de sa forme (CSS) : utiliser une


balise HTML pour rendre plus gras ou italique un lment est une pratique
dpasse.
Pour viter le bricolage, il faut tre capable de comprendre et de coder
du code HTML et CSS, grce un diteur de texte (comme Notepad++,
Sublime Text 2 ou la partie code de Dreamweaver).
Si ce nest pas le cas : pas de panique. Vous allez pouvoir apprendre
ces langages grce 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, quest-ce que cest ?


Sans surprise, cest exactement la mme chose quun site classique comme
dcrit prcdemment. Il faut donc galement matriser HTML / CSS et un
minimum le PHP pour pouvoir crer un thme WordPress.
Pourquoi du PHP ?
Dans un premier temps, cest ce qui permet de rendre un site dit
statique dynamique. Il nest plus ncessaire 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 donnes qui contient tous les contenus
(textes, image, lien vido, etc.). Une interface simple permet nimporte
quel utilisateur de remplir cette base de donnes. Voil le but dun CMS
comme WordPress ! Les thmes sont l uniquement pour mettre en forme le
contenu de cette base de donnes.
Dans un second temps, plus gnral, le langage PHP permet de simplifier
la faon dorganiser ses fichiers et de crer des algorithmes. Par exemple,
inclure le contenu dun fichier bidule.php dans dix autres fichiers.php. De
cette faon, il suffira de modifier quune seule fois bidule.php.
En rsum :
Le PHP permet de rendre le contenu dynamique dun site en cherchant
les informations dans une base de donnes mais il permet galement
dutiliser des fonctions qui facilitent le travail.
La base de donnes Mysql est lendroit o sont stockes les infor-
mations (contenus, utilisateurs, liens des images, etc.) dun site dyna-
mique.

PHP de base
Contrairement aux langages HTML et CSS, une connaissance avance
en PHP nest pas demande avec WordPress. En revanche, une base
dalgorithmique vous facilitera la chose.
6.1 Les thmes : leur anatomie 101

En rsum :
Un fichier PHP peut contenir de lHTML. Il est donc possible quun
fichier php ne contienne que de lHTML !
Le langage PHP est excut uniquement du ct du serveur. Du ct
du client (le visiteur), nous obtenons uniquement le rsultat. Il est donc
impossible de voir les codes PHP en regardant le code source dune
page Web.
Pour dclarer un code PHP, il faut ouvrir une balise php (<?php) et
fermer par une autre balise php (?>)
Connatre les structures conditionnelles if et else
Connatre le fonctionnement des boucles while
Savoir crer des variables du type : $variable = ... ; Savoir utiliser
des fonctions PHP avec passage darguments ou de paramtres.

Si ces lments ne vous effraient pas, vous comprendrez facilement les


thmes dans WordPress.

Comment fonctionne un thme ?


Un thme (ou template) permet de changer laspect graphique et fonctionnel
dun site Internet. Le contenu est donc totalement part : il est dans la base
de donnes de WordPress.
Un thme va permettre de changer lapparence (contenu et fonctionnali-
ts) de ce site grce plusieurs fichiers PHP.
Ces fichiers PHP, qui peuvent simbriquer les uns dans les autres, sont
composs de langage HTML et de fonctions PHP. Le tout est mis en forme
grce une (ou plusieurs) feuilles de style CSS pour le ct graphique et
anim avec du JavaScript (voir du Flash).
Il est alors possible de crer des sites trs graphiques avec WordPress
comme CMS ! Il nous laisse une libert totale sur la faon de coder notre
site. Il nous suffira de mettre du code PHP WordPress au bon endroit pour
rendre le contenu statique, vivant. On respecte intrinsquement la loi de la
sparation entre le contenu et la forme dcrite plus haut.
Tous ces fichiers sont placs dans un mme et unique rpertoire
(figure 6.1).
102 Chapitre 6. Comment fonctionne un thme ?

Figure 6.1 Exemple de fichiers dun Template WordPress

Les fichiers dun template : qui fait quoi ?


Chaque template est diffrent. Chacun possde son propre graphisme,
ses propres fonctionnalits, ses propres fichiers, etc. Autrement dit, chacun
possde sa propre identit et chaque auteur de thme choisit sa faon
de faire. Mais tous ces thmes fonctionnent avec le mme principe : la
hirarchie de fichier. Nous le verrons dans la partie suivante.
Faisons dabord connaissances avec les fichiers PHP les plus couram-
ment utilis dans un thme. Ces fichiers PHP sont automatiquement
reconnus par WordPress grce leur nom : ces derniers sont donc
rservs.
Il y a quatre types de fichiers dans un thme : les indispensables, les
standards, le fichier functions.php et les vtres. En voici la liste :
Les indispensables : ce sont ceux qui font partie du noyau. Sans
eux, on ne peut pas crer de thmes :
index.php : Cest, par dfaut, le fichier qui sera appel en dernier
par WordPress (vous comprendrez avec la hirarchie de fichier).
style.css : Cest le fichier qui va contenir la description de votre
thme. Mme si vous ne lutilisez pas pour votre code CSS (ce qui
est une bonne chose), il doit tre prsent.
screenshot.png : Cest limage daperu de votre thme dans la
partie dadministration.
Les standards : Ils ne sont pas obligatoires, mais on sen passe
rarement :
single.php : Ce fichier est appel par WordPress lorsque
lutilisateur veut afficher un article.
6.1 Les thmes : leur anatomie 103

page.php : Ce fichier est appel lorsquune page est affiche.


category.php : Ce fichier liste une srie darticles, par exemple,
la catgorie News ).
comments.php. : Comprend la partie commentaires de votre site.
search.php. : Le template daffichage des rsultats de recherche.
Cette page saffiche automatiquement aprs avoir fait une
recherche dans un formulaire de recherche.
404.php. : La page derreur. Elle est appele automatiquement si
WordPress ne trouve rien.
Le fichier functions.php : il permet dajouter des fonctionnalits
supplmentaires votre template. Ds lactivation du template, il
se met en route. Par exemple, lajout dune zone de menu, dune
zone de widget, de meta boxes, dune interface dadministration
ddie au template, linstallation et lactivation automatique dun
plugin... Cest un fichier important si vous voulez aller plus loin dans
la personnalisation de vos templates.
Les vtres : ce sont vos propres fichiers PHP et dossiers que vous
avez crs. En rgle gnrale, ce sont les fichiers de votre intgration
HTML / CSS / JS Statique avec les fichiers PHP que vous avez crs
vous-mme. Quelques exemples :
header.php : Il contient len-tte (doctype, titre, balises mta.) de
votre site. Ce fichier est inclus au dbut de chaque fichier.
footer.php : Fichier qui est inclus la fin de chaque fichier.
Le dossier des images : Un thme est, dans la majorit des cas,
compos dimages : arrire-plan, logo, puce, bouton... Il est donc
dusage de les mettre dans un mme fichier.
Le dossier CSS : Contient votre ou vos feuilles de styles.
Le dossier JS : Qui contient votre ou vos scripts Javascript.
Un dossier Font : Qui contient vos polices exotiques (ventuelle-
ment).
Voyons maintenant comment ils peuvent communiquer entre eux !

Comment ces fichiers travaillent-ils entre eux ?


Les fichiers dun template communiquent entre eux. Les liens classiques
entre les fichiers HTML, JavaScript et CSS sont dj un premier lien de
communication. Mais PHP nous offre bien dautres possibilits trs sympa-
thiques !
Une des plus puissantes et des plus simples, cest linclusion (fusion) de
plusieurs fichiers. Ce quon appelle un Include .
104 Chapitre 6. Comment fonctionne un thme ?

Figure 6.2 Liste des principaux fichiers / gabarits dun thme

Une fusion de plusieurs fichiers PHP permet le rsultat dun seul et mme
fichier. Cette fusion est possible grce lutilisation dune fonction.
Prenons un exemple prcis : celui dun index.php

Figure 6.3 Inclusion de plusieurs fichiers

Lindex.php va faire appel trois fichiers : header.php pour len-tte,


sidebar.php pour la barre latrale et footer.php pour le pied de page
(figure 6.3). Le mix de ces pages aura comme rsultat final index.php qui
affiche une page HTML dans le navigateur.
6.1 Les thmes : leur anatomie 105

Ces appels sont possibles grce des fonctions WordPress qui sont
rserves linclusion du contenu des diffrents fichiers :

<?php get_template_part( nom-du-fichier); ?> // nom-du-fichier.php

Voici en dtail les codes sources de chacun des fichiers PHP :

Code source de header.php

<!DOCTYPE html>
<head> <title>Titre</title> <meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen"
/>
</head><body>

Code source de footer.php

<div id="footer">
<!-- contenu du pied de page -->
</div><!-- footer -->
</body>

</html>

Code source de index.php

<?php get_template_part(header); ?>

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

Le fichier index.php va donc jouer le rle de mixeur en appelant


les trois autres fichiers PHP des endroits prcis de son code source.
Ce qui aura pour rsultat lobtention dune page HTML complte dont
voici le code source intgral vu du navigateur :

<!DOCTYPE html>
<head> <title>Titre</title> <meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen"
/>
</head><body>

<div id="content">
<!-- contenu principal -->
106 Chapitre 6. Comment fonctionne un thme ?

</div><!-- content -->

<div id="footer">
<!-- contenu du pied de page -->
</div><!-- footer -->
</body>

</html>

La hirarchie des fichiers ou comment WordPress reconnat


les fichiers dun thme
Nous avons vu prcdemment les fichiers de thmes les plus usuels que
WordPress utilise. Mais comment fait-il pour prfrer tel fichier un autre ?
WordPress fonctionne avec un systme de hirarchie pour savoir quel
fichier doit tre affich en priorit. On peut comparer cela une pyramide
ou un arbre gnalogique avec le fichier index.php en bout de chane.
WordPress part de tout en bas pour terminer tout en haut : cest donc le
fichier index.php qui est appel en dernier si aucun fichier nest charg avant.
Il faut bien retenir cette notion !
Comment WordPress sait quel fichier appeler ? Il ny a aucune magie, il
va simplement se baser sur lURL :
si lURL est du type : www.exemple.com/titre-article, WordPress va
chercher le fichier single.php . Si aucun fichier single.php se trouve
dans le thme, ce sera le fichier index.php ;
si lURL est du type : www.exemple.com/titre-page, WordPress va
chercher le fichier page.php. Le cas chant, ce sera toujours notre
index.php que WordPress affichera.

Mais rien ne vaut un schma pour comprendre simplement le chemin


que WordPress emprunte ! Celui-ci est lire de gauche (What Page) droite
(index.php).
Pour avoir un visuel plus dtaill, je vous invite aller sur ce site :
wphierarchy.com
Cest un systme simple et terriblement efficace ! Il est possible de charger
un gabarit PHP (sans rien faire !) pour chaque catgorie, modle de page,
custom post type, custom taxonomy... Nous verrons cela plus en dtail plus
loin.
6.2 Les thmes : boucles et fonctions communes 107

Figure 6.4 Hirarchie de templates :


https://codex.wordpress.org/images/1/18/Template_Hierarchy.png

6.2 LES THMES : BOUCLES ET FONCTIONS


COMMUNES
Les marqueurs de modle (template tags)
Les marqueurs de modle, que lon va appeler template tags, sont des
fonctions PHP spciales WordPress. Ces fonctions adressent des rsultats
lorsquelles sont excutes par WordPress. Elles vont chercher le contenu
dans la base de donnes du site.
Concrtement, elles permettent dafficher du contenu ou de le choisir, de
crer des zones widgetisables ou encore dafficher un menu.
Exemple dun template tag :

<?php bloginfo(); ?>


108 Chapitre 6. Comment fonctionne un thme ?

Figure 6.5 Template tags : fonctions PHP WordPress pour piocher des infos
dans la base de donnes

Cette fonction WordPress va afficher par dfaut le titre de votre site.


Comme toutes fonctions PHP, un template tag peut prendre un ou
plusieurs paramtres. Ceux-ci permettent de choisir, de manire dtaille,
laction dune fonction.
Cette fonction WordPress va par exemple afficher lURL de votre site Web :

<?php bloginfo(url); ?>

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


WordPress permettra de savoir quel paramtre est utilisable pour chaque
fonction. Abusez-en ! Nous allons en utiliser dautres dans la suite du livre.
Par exemple, pour les paramtres de bloginfo(), voir :
http://codex.wordpress.org/Template_Tags/bloginfo.

Les fonctions PHP WordPress (function reference)


Vous allez parfois trouver des fonctions au nom similaire.
Voici un exemple pour comprendre cette subtile diffrence entre un
template tag et une Function reference :
1. get_bloginfo() Function Reference
2. bloginfo() Template Tags

bloginfo() : Va afficher un lien (suivant son paramtre) dans le code


HTML. Nous allons voir directement son rsultat.
6.2 Les thmes : boucles et fonctions communes 109

get_bloginfo(): Cette fonction fait le mme travail, mais naffiche rien


dans une page PHP ou HTML. Il faudra user dune variable et dun
echo()pour faire cela.
Ces fonctions WordPress (function reference), naffichent rien mais
retournent des valeurs que lon peut stocker dans une variable PHP.
Contrairement aux template tags qui eux retournent un rsultat visible.Vous
nen aurez pas forcment besoin, mais cest trs pratique quand le besoin
sen fait sentir !

Boucle standard WordPress (loop)


La boucle, cest le cur de WordPress. Mais avant de passer WordPress,
rappelons ce quest une boucle en langage informatique.
Voici une boucle for dans son plus simple appareil :

for ( $compteur = 1; $compteur <= 5; $compteur += 1) {


echo $compteur;
}

Explication : le code situ entre les accolades {..} va tre rpt n fois (ici
cinq fois).
Voici un autre type de boucle, la boucle while :

$compteur = 1;
while ( $compteur <= 5 ) {
$compteur += 1;
}

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


na pas atteint le nombre 5.
Passons maintenant la boucle dans WordPress.
Une boucle WordPress (appele loop) parcourt la base de donnes du
site WordPress. En fonction de la manire dont cette boucle a t code,
elle affichera le contenu dsir : page, article, catgorie, titre, lien Lire la
suite , etc.
lintrieur dune boucle, il est possible :
dinsrer son propre code HTML histoire de contrler laffichage du
contenu ;
dinsrer des marqueurs de modle (template tags) ;
dinsrer des fonctions PHP (function reference).
110 Chapitre 6. Comment fonctionne un thme ?

Voyons maintenant le code WordPress. Voil quoi ressemble une boucle


WordPress standard :

<!-- Boucle -->


<?php if ( have_posts() ) :?>

<?php while ( have_posts() ) : the_post(); ?>


<!-- contenu de la boucle -->
<h2> <?php the_title(); ?> </h2>
<?php the_content(); ?>

<!--Fin contenu de la boucle -->


<?php endwhile;?>

<?php else: ?>


<!--Si la boucle naffiche rien -->

<p>Aucun rsultat</p>
<?php endif; ?>
<!-- Fin boucle -->

Explication tape par tape :


Lalgorithme commence avec une condition ( if ) : sil y a du contenu
(article, page, etc.), la boucle dmarre. Dans le cas contraire, elle ne
dmarre pas.
Lorsque la condition est remplie, on ajoute une boucle while : tant
que la fonction have_posts() retourne la valeur true (en dautres
termes, tant quil y a du contenu afficher), le contenu de la boucle se
rpte. Dans le cas contraire, Aucun rsultat saffiche.
Le contenu de cette boucle est compos de code HTML et de fonctions
(template tags). Le titre est sorti grce the_title() et est affich entre
des balises <h2>. La fonction the_content() affiche alors le contenu
principal.

Une boucle WordPress pourrait se rsumer ainsi : tant quil y a du contenu,


la boucle laffiche suivant nos gots. Une boucle, cest un mix de code HTML
et de fonctions PHP WordPress.
Peu importe le thme et les nombreuses variantes dune boucle. Une
boucle est un moyen dinterroger la base de donnes de WordPress, puis
dafficher le rsultat de cette requte.
Pour comprendre la notion de boucle : si la boucle doit afficher trois
articles, le contenu de cette boucle sera affich trois fois. La boucle naffiche
donc que ce quelle trouve dans la base de donnes.

Remarque Il est possible dinsrer plusieurs boucles dans un mme fichier.


Nous en parlons plus loin.
6.2 Les thmes : boucles et fonctions communes 111

Vous connaissez maintenant les principaux rouages de WordPress pour


afficher le contenu de votre site.

Fonctions communes dans une boucle


Certaines fonctions ne sont utilisables qu lintrieur dune boucle. Ces
fonctions vont donc agir autant de fois que la boucle se rpte.
Voici une slection des fonctions les plus utilises :
the_title(). Rcupre et affiche le titre de chaque article (ou de la
page) courant.
the_content(). Rcupre et affiche le contenu principal de chaque
article courant.
the_permalink(). Rcupre et affiche lURL de chaque article courant.
the_time(). Rcupre et affiche la date de cration pour chaque article
courant.
post_class(): Permet WordPress dimprimer ses propres classes et
identifiant CSS. the_ID(). Rcupre et affiche lidentifiant de chaque
article.

Dautres lments apparaissent lintrieur dune boucle. Notamment


lobjet $post qui contient des donnes extrmement utiles. Nous y consacrons
une partie un peu plus loin dans ce livre.

Fonctions communes hors dune boucle


Sil existe des fonctions pour lintrieur des boucles, il y en existe aussi pour
lextrieur des boucles. Ces fonctions nont pas forcment un rapport direct
avec le contenu affich. Voici les plus communes :
get_template_part(): Permet dinsrer le contenu de nimporte quel
autre fichier PHP du thme.
wp_nav_menu(): Permet dafficher un menu de navigation (cr prc-
demment dans le back office).
bloginfo(): Permet dafficher des informations relatives votre site
comme son ou ses URL (entre autres).

Personnaliser une boucle avec query_posts()


La fonction query_posts() permet de paramtrer une boucle trs facilement.
La figure 6.6 illustre un exemple de structure :
112 Chapitre 6. Comment fonctionne un thme ?

Figure 6.6 Emprise de query_posts() sur une boucle

Le code suivant illustre quant lui un exemple de personnalisation avec


query_posts() :

<?php

// On personnalise la boucle avec query_posts()


query_posts( showposts=5); // Paramtre : on naffiche que 5 articles

// La boucle qui affichera 5 articles

if (have_posts()) : while (have_posts()) : the_post(); ?>


<!-- contenu de la boucle -->
<?php endwhile; else: ?>
<?php endif; ?>

<?php

// Remise zro de la requte


wp_reset_query();

?>

Linstruction wp_reset_query() est utilise la fin de query_posts() et avant


une autre query_posts(). Cela permet en effet dviter des dysfonctionne-
ments lorsquil y a plusieurs boucles sous lemprise dune query_posts()
dans un mme fichier.
Ses paramtres sont nombreux. La fonction query_posts() peut en avoir
plusieurs grce un tableau. En effet, un tableau permet de contenir
plusieurs types de variables. Cest une faon diffrente de passer des
6.2 Les thmes : boucles et fonctions communes 113

paramtres une fonction : plus pratique et plus lisible que de passer des
paramtres la chaine.

savoir Par dfaut, une boucle standard affiche les articles dans un ordre
chronologiquement inverse (larticle le plus rcent en premier).
Voici deux exemples :
query_posts(array(
cat=> 5,
posts_per_page=> 4
));
<!-- insrez la boucle ici -->

Description : la boucle va afficher quatre articles de la catgorie ayant comme


identifiant 5.
query_posts(array(
cat => 22,
monthnum => $current_month,
order => ASC,
));
<!-- insrez la boucle ici -->

Description : la boucle va afficher les articles de la catgorie ayant comme


identifiant 22 du mois actuel et afficher les articles chronologiquement (du
plus ancien au plus rcent).

Bien entendu, il est possible de grer plusieurs boucles personnalises


dans un mme fichier, ce qui fait dailleurs tout lintrt de linstruction
wp_reset_query(), comme nous lavons vu prcdemment.
Pour plus dinformations sur query_posts(), vous pouvez une fois encore
consulter le codex de WordPress, en vous rendant ladresse suivante :
http://codex.wordpress.org/Template_Tags/query_posts.

Note Les plus mticuleux dentre vous peuvent utiliser plusieurs syntaxes
pour cumuler des arguments une fonction. Voici deux syntaxes diffrentes
pour le mme rsultat :
Syntaxe 1 : tout dans une mme ligne

$accroche->query(posts_per_page=1&category_name=blog );

Syntaxe 2 : utilisation dun tableau


$accroche->query(array(
posts_per_page=>1, // nombre darticles
category_name=>blog, //choix de la catgorie
));
114 Chapitre 6. Comment fonctionne un thme ?

Utiliser plusieurs boucles


Reprenons lexemple dun index.php (figure 6.7).

Figure 6.7 Index.php faisant appel trois autres fichiers PHP externes

Il est tout fait envisageable davoir plusieurs boucles dans un mme


fichier PHP. Pour reprendre lexemple prcdent, imaginons que index.php
affiche le contenu principal et le contenu de la sidebar, sans faire appel
un fichier PHP externe.
Nous aurions donc une boucle qui afficherait le contenu principal et une
autre qui afficherait les articles les plus populaires. Chaque boucle tant
place lendroit o elle affiche leur rsultat.
Avec des boucles contrles par la fonction query_posts(), il ne faut
surtout pas oublier de borner chaque boucle avec wp_reset_query(). Quelles
soient places dans un fichier externe ou non.
Voici un exemple de deux boucles dans un mme fichier :

<!-- premire boucle -->


<?php query_posts(.....);
if (have_posts()) : while (have_posts()) : the_post(); ?>
<!-- contenu de la boucle -->
<?php endwhile; else: ?>
<?php endif;

wp_reset_query();
?>
6.3 Wordpress : fonctionnement avanc 115

<!-- deuxime boucle -->

<?php query_posts(.....);
if (have_posts()) : while (have_posts()) : the_post(); ?>
<!-- contenu de la boucle -->
<?php endwhile; else: ?>
<?php endif;

wp_reset_query();
?>

6.3 WORDPRESS : FONCTIONNEMENT AVANC


Objets, mthodes et paramtres
Avant daborder lutilisation des objets PHP, voici un bref rappel de leur
fonctionnement dans WordPress.

Figure 6.8 Schma explicatif dun objet

Pour crer un objet, nous avons besoin dun constructeur. cet objet, il
est possible dattribuer une mthode. Cette mthode accepte des paramtres
(figure 6.8).
116 Chapitre 6. Comment fonctionne un thme ?

Lorsque nous sommes en possession dun objet, il est possible de crer


une boucle partir de cet objet. Concrtement, cela ressemble ceci :
<?php
$objet = new nom-fonction(); // on construit lobjet
$objet->methode(parametre); // on attribue une mthode lobjet
while($objet->have_posts()) : $ objet->the_post();

<!-- contenu de la boucle -->

<?php endwhile; ?>


?>

Nous allons examiner les objets travers deux exemples : lobjet $post et
lobjet de WP_Query().
Vous navez pas dinquitude avoir si cela vous parat flou ou compliqu.
Rappelez-vous que tous les codes sources fonctionnent tels quels. Un simple
copier/coller permet de les faire fonctionner.

La boucle et lobjet $post


Lobjet $post est disponible ds que la fonction the_post() est excute
(toujours au moment du lancement de la boucle). $post est donc uniquement
disponible lintrieur dune boucle.
Lobjet $post permet de rcuprer des informations trs utiles concernant
larticle courant. Voici quelques-uns de ses paramtres :
$post->ID. Retourne lidentifiant de larticle courant. Utile si vous deviez
afficher uniquement cet article dans une boucle.
$post->post_content. Retourne le contenu principal de larticle (ou de
la page).
$post->post_title. Retourne le titre de larticle courant.
$post->comment_count. Retourne le nombre de commentaires dun
article.
$post->post_modified. Retourne la date de modification dun article.
$post->post_type. Retourne le type : page ou article ?
$post->post_category. Retourne lidentifiant de la catgorie qui contient
larticle courant.

Attention, $post naffiche rien. Si vous voulez afficher lune de ses valeurs,
il vous faudra utiliser la fonction php cho (), comme dans lexemple
suivant :

<!-- Boucle -->


...
6.3 Wordpress : fonctionnement avanc 117

<?php while ( have_posts() ) : the_post(); ?>


<?php echo($post->ID) ?> // affichera lID de
larticle
<?php endwhile; else: ?>
...
<!-- Fin boucle -->

Personnaliser une boucle avec un objet de WP_Query()


Comme query_posts(), WP_Query() va permettre de contrler une boucle
(figure 6.9).
Les puristes diront que query_posts() est uniquement rserve la boucle
principale. Il faudrait donc utiliser WP_Query() lorsque lon cre une autre
boucle totalement diffrente de la principale. En ralit, cela fonctionne
galement trs bien avec query_posts()...

Figure 6.9 WP_Query() contrle sa propre boucle

Concrtement, cela ressemble ceci :

<?php

$objet = new WP_Query(); // $objet est un objet de WP_Query()


$objet->query( posts_per_page=2); // query est une mthode de
WP_Query()
// la boucle dpend de $objet
while($objet->have_posts()) : $objet->the_post(); ?>

<!-- contenu de la boucle -->

<?php endwhile; ?>


118 Chapitre 6. Comment fonctionne un thme ?

Remarque Pour connatre les mthodes que peut utiliser un objet de


WP_Query(), il suffit de regarder les paramtres de query_posts(). Les mthodes
dun objet de WP_Query() utilisent les mmes paramtres que ceux de
query_posts().

Pour plus de dtails et pour obtenir la liste des mthodes de WP_Query(),


voir :
http://codex.wordpress.org/Function_Reference/WP_Query.
Pour les paramtres dun objet de WP_Query(), voir :
http://codex.wordpress.org/Template_Tags/query_posts.

Interagir avec la base de donnes WordPress


Si vous tes laise avec les requtes SQL (ce qui est loin dtre le cas
de beaucoup de monde), il vous sera facile de crer de toutes pices vos
propres boucles.
WordPress propose une classe qui se nomme $wpdb. Celle-ci permet
dinterroger la base de donnes avec des requtes SQL et de rcuprer les
rsultats.
Voici un exemple commun dutilisation :

$fivesdrafts = $wpdb->get_results("SELECT ID, post_title FROM $wpdb->posts


WHERE post_status = draft AND post_author = 5");

foreach ($fivesdrafts as $bidule) {


echo $bidule->post_title;
}

Explications : dans un premier temps, les rsultats de la requte sont


stocks dans une variable. Puis, on cre une boucle foreach base sur
cette variable, pour afficher le contenu.
Une boucle foreach est un moyen simple de passer en revue un
tableau : chaque itration, la valeur de llment courant est assigne
une variable.
Pour plus dinformations, voir :
http://codex.wordpress.org/Function_Reference/wpdb_Class.
6.4 Wordpress : lenvers du dcor 119

6.4 WORDPRESS : LENVERS DU DCOR


WordPress et les URL
Dordinaire, lors du dveloppement dun site web, des liens relatifs pour les
images, les CSS ou encore les fichiers JavaScript sont utiliss. Il faut entendre
ici relatif comme relatif au fichier HTML .
Or WordPress fonctionne uniquement avec des URL absolues et ignore
les liens relatifs. Il nest donc pas possible de les utiliser dans un thme. Ainsi,
il ne sera pas possible dcrire un lien sous cette forme :

/images/exemple-image.jpg

Seule celle-ci sera tolre par WordPress :

http://www.mon-site.com/wp-content/themes/nom_du_theme/images/exemple-
image.jpg

Ce nest pas trs pratique, mais heureusement, WordPress dispose dun


fameux template tag appel bloginfo() qui retourne une URL, en fonction
du paramtre fourni.
Ainsi, la ligne suivante affiche lURL de votre site. Ici : http://www.mon-
site.com :

<?php bloginfo(url); ?>

Tandis que celle-ci affiche le chemin complet du fichier contenant le


thme. Ici :
http://www.mon-site.com/wp-content/themes/nom_du_theme/ :

<?php bloginfo(template_url); ?>

Il sera donc ncessaire dajouter vos liens relatifs cette dernire


fonction ; ce qui donnera :

<?php bloginfo(template_url); ?>/images/exemple-image.jpg

Pour plus dinformations sur bloginfo(), voir :


http://codex.wordpress.org/Template_Tags/bloginfo.

WordPress et sa base de donnes


Nous avons souvent voqu la base de donnes de WordPress ; elle contient
tout le contenu du site : texte, lien des images, lien vido... mais galement
les utilisateurs, leurs prfrences, les commentaires, etc.
120 Chapitre 6. Comment fonctionne un thme ?

Mettons une image sur tout cela. Direction phpMyAdmin pour voir ce
que cache cette base de donnes (Figure 6.10). Pour rappel, une base de
donnes contient plusieurs tables de donnes.

Figure 6.10 WP_Query() Tables de donnes aprs installation de WordPress

Une installation vierge de WordPress contient exactement 11 tables de


donnes : pour les pages, articles, utilisateurs, commentaires, etc. Ds lors
que vous allez ajouter des plugins, il y a de grandes chances que ces
derniers en crent de supplmentaires, avec les risques de ralentissement et
de scurit qui vont avec. Faites attention !

Trucs et astuces pour russir son template


Mettre son propre contenu
Comme nous lavons vu au chapitre 2, WordPress inclut automatiquement
du contenu fictif lors de son installation. Il est prfrable de le supprimer
afin de crer le sien propre : catgorie, article, page... et de remplir tous les
champs.
De cette faon, 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 lon matrise permet de gagner en confiance.
6.4 Wordpress : lenvers du dcor 121

Optimiser son poids


Ce qui est le plus lourd dans un template, ce sont les images utilises
pour son design : images darrire-plan, ombrage, boutons, etc.
La rapidit daffichage tant un critre dterminant pour les visiteurs (et
pour Google), votre thme doit tre la hauteur. Ds lors, faites faire un
rgime vos images !
Si vous utilisez Photoshop, rendez-vous dans le menu Fichier > Enre-
gistrer pour le Web et les priphriques . Une fentre apparat alors. En
haut droite, vous pouvez choisir le format de limage (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 toujours le pire. Ne jamais penser que lutilisateur final va savoir
faire . Comme pour les templates publics, votre design doit tre flexible.
Imaginez quun utilisateur mette 250 liens dans votre barre latrale : il faut
que le design du site (lintgration HTML/CSS) tienne le coup.

Avoir un cahier des charges prcis


Si vous travaillez pour un client (ou autre), il est important quil dfinisse
aussi clairement que possible les fonctionnalits quil attend de son site :
nombre de rubriques crer (cela vous aidera grer lespace dans le
menu horizontal), dveloppement de plugins complexes, etc.
Certains clients pensent quun CMS est un outil magique qui permettrait
de tout faire. Ils nont pas vraiment tort... Nanmoins, le dveloppement
de fonctionnalits prcises peut demander beaucoup de temps et donc
beaucoup dargent (et l gnralement, les clients aiment moins...).

Livrer un mode demploi


Pour rassurer et accompagner lutilisateur final, noubliez pas dajouter
votre thme un mode demploi personnalis. Cest courtois, rassurant et utile,
surtout si votre thme est dot de fonctionnalits qui ne sont pas standard.
De plus, ce mode demploi vous servira de pense-bte , si daventure
votre client devait vous recontacter plus tard, pour un dysfonctionnement ou
pour une demande de mise jour.
7
Comment crer
son propre thme ?

7.1 BOTE OUTILS


Pour crer un thme WordPress, vous aurez besoin des mmes outils que
pour la cration dun site Internet. Le minimum requis se rsumant un
navigateur Internet et un diteur de texte.
Pour gagner en confort, en rapidit et en qualit, voici la bote outils
du parfait petit webdesigner .
Remarque importante Tous les codes sont disponibles sur la page ddie au
livre sur www.dunod.com pour faciliter le copier / coller.

1. Le navigateur Internet Firefox + des modules


Mozilla Firefox possde de nombreux modules complmentaires,
comme Firebug et Web Developer , qui permettent de simplifier
la vie des webdesigners.
Firebug permet dinspecter scrupuleusement le code source dune
page HTML, directement dans le navigateur, en survolant les diffrents
lments. Grce lui, les styles CSS qui sont associs un lment
sont visibles du premier coup dil. Mais surtout, le code source peut
tre dit en direct ! Vous pourrez le tlcharger en suivant ce lien :
https://addons.mozilla.org/fr/firefox/addon/1843/.
124 Chapitre 7. Comment crer son propre thme ?

Web Developer ajoute quant lui une barre doutils Firefox. Grce
ce module, vous pourrez par exemple, redimensionner la fentre du
navigateur votre guise, dsactiver les CSS ou le Javascript et valider
les CSS ou lHTML dun simple clic. Vous pourrez le tlcharger 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 dun bon diteur de
texte (coloration syntaxique du langage, choix de lencodage...), ils
permettent tous deux le partage de lcran en deux parties (par
exemple). Il est en effet trs pratique davoir, sur le mme cran,
dun ct un document HTML et de lautre un document CSS.
Vous trouverez NotePad++ ladresse 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 sassurer de la compatibilit de votre site sur plusieurs naviga-
teurs, noubliez pas de tous les tester. Si votre site saffiche correcte-
ment sur Firefox, Internet Explorer, Chrome, Opera et Safari, cest
dj trs bien !
4. Un logiciel dinfographie
Un webdesigner doit pouvoir dcouper la maquette dun infographiste
rapidement et prcisment. Si vous avez les moyens de les acqurir,
Photoshop ou Fireworks sont les rfrences dans ce domaine. Mais
des logiciels gratuits comme GIMP existent galement.
5. Les indispensables
Vous devrez galement possder un logiciel FTP (comme FileZilla) et
un serveur local (comme WAMP).

7.2 MTHODE SUIVRE

Prcisions
Cette rubrique propose une feuille de route pour mener bien la cration
dun site Internet sous WordPress, de A Z. Mme si vous nallez vous
occuper que dune partie prcise, il est important davoir une vue densemble
dun projet : cela revient savoir do lon vient pour savoir o lon va...
Dans la section Tutoriel : raliser le Template AlsaWP , qui se situe
la fin de cette troisime partie, au chapitre 8, vous trouverez une mise en
uvre dtaille de cette mthode.
7.2 Mthode suivre 125

Cration du design
Nous pourrions crire un livre entier ddi ce thme aussi vaste que
passionnant. Nous nen avons pas le temps, mais rien ne nous empche,
pendant quelques instants, de nous mettre la place dun infographiste.
La charte graphique dun site Internet doit rpondre un cahier des
charges spcifique. Celui-ci va bien entendu changer en fonction des
besoins du client : e-commerce, site institutionnel, site vitrine, magazine,
blog... Nanmoins, ces sites ont ceci de commun quils suivent quelques
tendances actuelles, que nous prsentons ci-aprs.

One page layout


Une des tendances actuelles consiste crer des sites carte de visite o
lensemble du site est contenu sur une seule et unique page. Lapproche est
plutt minimaliste, mais avec une pince de JavaScript, on peut en faire
dfiler le contenu (figure 7.1).

Figure 7.1 Exemples de sites One page layout

Le minimalisme
Une autre tendance est le recours au minimalisme, mais celui-ci devient
dsormais chaud et va contenir des couleurs fraches et beaucoup
despace (figure 7.2). On lappel plus communment le flat design .

Des headers qui en mettent plein la vue


Laisser vos en-ttes respirer, sexprimer ! Nhsitez pas pour cela prendre
toute la largeur et la hauteur de la page.
La premire impression tant la plus importante, optimisez vos en-ttes :
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 crer son propre thme ?

Figure 7.2 Exemples de sites minimalistes

En fonction du site, ce header surdimensionn ne sera prsent que dans


la page daccueil (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 lambiance


Les sites texturs donnent une ambiance plus marque. On pourra les utiliser
aussi bien pour des dtails que pour lensemble du site (figure 7.4).
Un lment incontournable si vous voulez ajouter une plus-value votre
site !

Figure 7.4 Exemples de textures


7.2 Mthode suivre 127

Des footers imposants


Tout comme les headers, les footers vont devenir plus riches : rseaux
sociaux, Flickr, informations personnelles, formulaires de contact, newsletters
(figure 7.5). On peut mme se demander sils ne vont pas finir un jour par
remplacer le contenu principal...

Figure 7.5 Exemples de footers

La typographie
Nhsitez plus utiliser la typographie comme lment principal du design
de votre site. Respectez lalignement, testez de nouvelles polices, amusez-
vous avec : cest le moment de les tordre dans tous les sens !
Grce la proprit CSS FontFace est un jeu denfant ! (figure 7.6).

Figure 7.6 Les choix typographiques

Des images normes


Les grandes images ont leur intrt : elles vont tre utilises 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 crer son propre thme ?

Figure 7.7 De grandes images

La disposition magazine
Les magazines sont de plus en plus prsents sur le Web et les blogs ont
tendance leur ressembler de plus en plus, saffranchissant ainsi dun
design et dune disposition simplistes qui, fort heureusement, ont tendance
disparatre (figure 7.8).

Figure 7.8 La disposition magazine

Le dessin fait main


Afin dapporter une touche dauthenticit votre design, utilisez le fait
main (figure 7.9).

Figure 7.9 Un exemple de dessin fait main


7.2 Mthode suivre 129

Mixez les perspectives


Nhsitez plus mlanger les perspectives pour apporter de la profondeur
(figure 7.10).

Figure 7.10 Mix des perspectives

Utilisez un systme de grille


Dernier conseil dinfographiste : essayez de raliser votre design avec un
systme de grille . Il vous permettra dobtenir une maquette quilibre
(figure 7.11). Vous trouverez un exemple de grille en suivant ce lien :
http://960.gs.

Intgration statique en HTML/CSS


La maquette du site tant prte, il est temps de lintgrer en HTML/CSS.
Pour les non connaisseurs : il sagit ici de transformer une image en une
page HTML fonctionnelle.
Raliser tout dabord sur papier un croquis des diffrentes zones placer
(divers titres, header, footer, etc.) permet davoir une vue globale du projet.
Vous gagnerez ainsi un temps considrable.
Bien entendu, nous insrons du contenu en dur dans le code HTML.
Cette intgration, dite statique, est une tape cruciale. Cest la charpente
de votre template ! Elle doit donc tre ralise avec le plus grand soin. Aprs
le placement des zones du site, il ne faut pas oublier de styler les diffrentes
balises (images, puces, liste, h1, h2, etc.).
Pour finir, un contrle qualit simpose : insrer beaucoup de contenu
vous permettra notamment de contrler le comportement de votre intgra-
tion.
Le rsultat final est une intgration statique de la page daccueil et dune
page de contenu (figure 7.12).
130 Chapitre 7. Comment crer son propre thme ?

Figure 7.11 Exemple de site ralis avec un systme de grille

Figure 7.12 Exemple final dune intgration statique (style contenant une ou plusieurs CSS)

Cration du template WordPress


Nous disposons maintenant dun fichier HTML accompagn de sa feuille de
style CSS grce lintgration statique. Il suffit maintenant de lui injecter du
code WordPress ( laide de boucles et autres template tags) aux endroits
qui vont tre dynamiques. Il sagit en fait de ce que WordPress va grer,
savoir : la navigation, le titre de la page, le contenu principal, etc.
Pour rsumer, nous allons transformer le contenu dur de notre
intgration statique en contenu dynamique.
7.3 Un bon dpart pour un bon thme 131

Il restera ventuellement styler certains lments que WordPress gnre


lui-mme, comme le contenu ou les listes. Le module Firebug de Firefox
sera dailleurs dune grande utilit pour dterminer quelle classe ou quel
identifiant devra tre styl dans nos feuilles CSS.
ce stade, une question se pose : Faut-il partir dun thme existant
pour pouvoir crer le ntre ?
Il est en effet possible de copier/coller le dossier dun thme existant
car la structure du thme peut tre reprise. Les fichiers PHP standard sont
dj prsents (pour mmoire, il sagit de style.css, index.php, single.php,
page.php, category.php functions.php). Il est donc trs facile de modifier
limage de prsentation de votre thme (screenshots.php) et sa description
(style.css) pour que le template soit rapidement fonctionnel.
Nanmoins, il nest pas conseill de reprendre le code source de ces
fichiers PHP. Bien entendu, on peut sen inspirer ; mais, en fonction du thme,
il y a un risque de perdre beaucoup de temps prendre connaissance du
code source. Il vaut donc mieux tout effacer et insrer son propre code HTML
statique pour insrer ses propres fonctions WordPress (boucles, template
tags, etc.).

7.3 UN BON DPART POUR UN BON THME


Partir dun thme existant ?
Nimaginez pas faire votre thme sur mesure et crer votre propre thme de
A Z. Pour gagner du temps, on peut copier / coller certains bouts de code,
notamment pour le fichier functions.php et le fichier style.css.

Quatre fichiers de dpart


Les thmes se trouvent dans le dossier wp-content/thmes de WordPress.
lintrieur de celui-ci, il faut au minimum crer ces fichiers :
index.php
functions.php
style.css
screenshot.png

Pour finir, il faut diter index.php en insrant tout simplement le code


HTML suivant :

<p>Mon theme fonctionne</p>


132 Chapitre 7. Comment crer son propre thme ?

Remarque importante Encodez toujours vos documents au format UTF-8,


sans BOM (chane de caractres place dans le fichier permettant la reconnais-
sance du fichier UTF-8 en tant que tel), car le BOM est incompatible avec
PHP. Or WordPress est bas sur le langage PHP. Aussi, dans le cas o le format
UTF-8 avec BOM est choisi, des dcalages peuvent apparatre dans le template.

Modifier la description et la vignette du thme


Il est important de modifier la description de votre thme ainsi que limage
screenshot.png . Ces informations seront visibles dans linterface dadmi-
nistration pour choisir lapparence de votre site.

Pour modifier la description : style.css


Aprs avoir ouvert le fichier, vous apercevrez tout au dbut du document
un segment se situant entre deux balises de commentaires /*...*/. Cest
uniquement cette partie qui nous intresse. Quant au reste, vous pouvez le
supprimer, car nous allons utiliser notre (ou nos) propre(s) feuille(s) de style
CSS.

/*
Theme Name: AlsaWP
Theme URI: http://www.alsacreations.com
Description: Template cre pour le livre "WordPress 3.0 : 100% pratique"
Author: Alsacrations - Simon KERN
Version: 1
*/

Dtails des diffrents champs :


Theme Name : nom de votre thme.
Theme URI : lien vers lauteur du thme.
Description : description de votre template.
Author : auteur du template.
Version : version de votre Template.

Sauvegardez et cest termin !

Remarque WordPress interdit la mme description pour deux thmes. Si le


cas se prsentait, il y aurait des problmes lors des choix du thme dans lespace
dadministration. Aussi, si vous partez dun thme existant (ce qui est le cas ici),
noubliez pas de modifier cette partie.
7.3 Un bon dpart pour un bon thme 133

Pour modifier la vignette : screenshot.png


La vignette affiche un aperu du design du template. Il faudra crer le fichier
screenshot.png pour ladapter votre thme avec un logiciel de retouche
dimages.
La dimension recommande pour cette image est de 1200 900 pixels
au format PNG. Un screenshot de votre site fera parfaitement laffaire.

Figure 7.13 Exemple dune vignette (screenshot.png) donnant un aperu du template


AlsaWP dans le back office

Tester et activer notre bauche de thme


Il faut maintenant vrifier que le thme est correctement reconnu par Word-
Press. Pour cela, rendez-vous tout dabord dans la partie dadministration
de WordPress pour lactiver. Si votre vignette et la description du thme sont
visibles, tout est en ordre (figure 7.14). Activez alors le thme et un message
de confirmation apparatra.
La partie publique affiche simplement le contenu de notre fichier
index.php , savoir : Mon thme fonctionne (figure 7.15).
partir de maintenant, chaque modification de ce thme sera visible
directement sur WordPress. Notre template est donc prt recevoir notre
code HTML enrichi de fonctions WordPress.

Insertion de votre code HTML statique


Commencez toujours par insrer votre propre code source (celui de lint-
gration statique) lintrieur dun fichier PHP.
134 Chapitre 7. Comment crer son propre thme ?

Figure 7.14 Le template est bien prsent dans la liste de choix

Figure 7.15 La partie publique affiche bien le fichier index.php

Noubliez pas de placer votre (ou vos) feuille(s) CSS et vos images dans
le dossier du thme.
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, grce au template tag php bloginfo()
vu prcdemment.
Ds prsent, votre template doit safficher correctement. Il reste main-
tenant rendre le contenu (navigation, contenu principal, etc.) dynamique,
grce aux boucles WordPress et aux marqueurs de modles (template tags).
7.4 Template WordPress : les bases 135

7.4 TEMPLATE WORDPRESS : LES BASES


Faire appel des fichiers PHP distants
Il est temps maintenant de diviser ce fichier index.php (ou nimporte quel
autre fichier). En dautres termes, nous allons en extraire certaines parties,
pour les incorporer dans dautres fichiers PHP.
En fonction de vos choix, il est possible dintgrer nimporte quel
fichier PHP lintrieur dun autre fichier PHP, grce au template tag
template_part() :

<?php get_template_part(footer); ?> <!-- intgre le contenu de


footer.php -->

<?php get_template_part(header); ?> <!-- intgre le contenu de


header.php -->

Figure 7.16 Index.php faisant appel trois fichiers PHP externes

Pour plus dinformations sur template part(), voir :


http://codex.wordpress.org/Function_Reference/get_template_part.
Avant la version 3 de WordPress, il tait habituel dutiliser trois template
tags ddis cette fonction. Il est encore possible de les utiliser :
136 Chapitre 7. Comment crer son propre thme ?

<?php get_header(); ?> <!-- intgre le contenu de header.php -->

<?php get_footer(); ?> <!-- intgre le contenu de footer.php -->

<?php get_sidebar(); ?> <!-- intgre le contenu de sidebar.php -->

<?php comments_template(); ?> <!-- intgre le contenu de comments.php -->

Cration dun header compatible WordPress


Un header dune page HTML est compos dun doctype et dune balise
head qui contient elle-mme dautres balises.
Pour pouvoir crer un header, quatre tapes sont ncessaires :
1. Mettre jour les liens (CSS, Favicon, JavaScript) grce au template
tag bloginfo().
2. Insrer la fonction wp_title() dans la balise Title. Cette fonction
affichera le titre de la page visite.
3. Insrer la fonction qui gre les pings. Elle permet de savoir qui parle
de votre site.
4. Et surtout : insrer la fonction wp_head() avant la balise fermante de
head. Sans cette fonction, votre site sera incompatible avec la plupart
des plugins et des fonctionnalits de WordPress, comme les RSS ou la
gestion du background.
Exemple dun header compatible WordPress :

<!DOCTYPE html>
<head> <title><?php wp_title(); ?></title> <meta
http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="shortcut icon" href="<?php bloginfo(template_directory);
?>/favicon.ico" />
<link rel="stylesheet" type="text/css" href="<?php
bloginfo(template_url); ?>/style.css" media="screen" />

<link rel="pingback" href="<?php bloginfo(pingback_url); ?>" />


<?php wp_head(); ?>

</head>
<body>
...

Cration dun footer compatible WordPress


Noubliez pas dinsrer systmatiquement la fonction wp_footer() avant la
balise fermante de body. En effet, il est plus lgant dinsrer du contenu
7.4 Template WordPress : les bases 137

JavaScript la fin dun document HTML. Il se peut quun plugin utilise


cette mthode. Certains plugins ont besoin de la prsence de cette fonction
cet endroit. Si cette condition nest pas respecte, certains plugins ne
fonctionneront pas.
...

<?php wp_footer() ?>

</body>

</html>

Mettre en place un Menu


La cration dun menu fait partie des bases pour crer un thme. Une partie
y est consacre plus loin.

Afficher un article ou une page avec une boucle standard

<!--Boucle article-->

<?php if ( have_posts() ) :?>

<?php while ( have_posts() ) : the_post(); ?>


<h3><a href="<?php the_permalink(); ?>" title="<?php
the_title(); ?>"><?php the_title(); ?></a></h3> <!-- Titre -->

<?php the_content(); ?> <!-- contenu -->

<?php endwhile; else: ?>

<p>Aucun resultat</p>

<?php endif; ?>

<!--Fin boucle article-->

Explications : cest la boucle standard de WordPress. Elle affiche le titre


et son lien dans une balise <h3>, puis le contenu de larticle.
Cette boucle doit tre intgre dans le fichier single.php pour
afficher un article ou dans page.php pour afficher une page ou
encore dans "index.php" pour afficher lun ou lautre. (cf. : la hirarchie
de fichiers de WordPress).
138 Chapitre 7. Comment crer son propre thme ?

Autres affichages avec une boucle


Pour pouvoir afficher plusieurs articles dune catgorie, le contenu dune
page ou le rsultat du moteur de recherche, il suffit dutiliser la boucle utilise
pour afficher un article complet. Seul le fichier dans lequel la boucle doit
tre intgre change :
Pour afficher plusieurs articles dune catgorie, elle doit tre intgre
dans le fichier category.php .
Pour afficher le contenu dune page, elle doit tre intgre dans le
fichier page.php .
Pour afficher le rsultat du moteur de recherche, elle doit tre intgre
dans le fichier search.php .
Cf : la hirarchie de fichiers de WordPress.

Une boucle : plusieurs rsultats


La boucle standard de WordPress est simple : elle sadapte au fichier php
appel par WordPress (grce la hirarchie de fichiers de WordPress). En
effet, une mme boucle peut afficher des rsultats diffrents. Tout dpend de
la manire dont cette boucle est appele par WordPress :
Si la boucle est appele pour afficher un article (single.php) ou une
page (page.php), elle bouclera une seule fois.
Si la boucle doit afficher plusieurs articles dune catgorie (cate-
gory.php), elle bouclera autant de fois quil y a darticles.
Si la boucle doit afficher plusieurs articles dune requte de recherche
(search.php), elle bouclera autant de fois quil y a de rsultats.

Il nest donc pas trs tonnant que certains thmes contiennent un fichier
PHP appel communment loop.php qui ne contient quune seule boucle.
Ce fichier est intgr dans les autres fichiers du thme.

Afficher un lien Lire la suite


Comme nous lavons vu prcdemment, le template tag the_content()
affiche le contenu entier dun article dans une boucle.

<!-- .... Intrieur Boucle .... -->

<?php the_content(Lire la suite); ?>

<!-- .... Suite - intrieur Boucle .... -->


7.4 Template WordPress : les bases 139

Si on passe un paramtre (du texte, ou du code HTML, par exemple pour


afficher une image), seul le contenu se trouvant avant la balise read-more
sera affich.
Par dfaut, aprs avoir cliqu sur le lien Lire la suite , WordPress nous
redirige vers larticle en question puis scroll directement jusquau niveau
o le texte continue. Ce nest pas forcment agrable. Voici le code PHP
insrer dans le fichier functions.php pour viter ce comportement.

function remove_more_link_scroll( $link ) {


$link = preg_replace( |#more-[0-9]+|, , $link );
return $link;
}
add_filter( the_content_more_link, remove_more_link_scroll );

Pour plus dinformations, voir :


http://codex.wordpress.org/Customizing_the_Read_More.

Afficher lextrait dun article


Les extraits sont des rsums facultatifs de vos articles, crits la main. Dans
la partie ddition un article, il faut cocher Extrait dans les Options
dcrans pour faire apparatre la box. Si aucun extrait nest prcis, cette
fonction affiche uniquement le texte dun article (sans les images) avec un
nombre de caractre prdfini.
Voici la fonction insrer lintrieur dune boucle :

the_excerpt();

Pour plus dinformations, voir :


http://codex.wordpress.org/Template_Tags/the_excerpt

Lister les catgories


<?php wp_list_categories(array(

orderby => name, // Manire dordonner la liste


order => ASC, // Ordre croissant ou dcroissant ?
show_count => 0, // Affiche ou non le nombre darticle
contenus
title_li =>__(Catgories), // Titre de la liste
exclude => "18,12", // ID de la ou des catgories
exclure
depth => 0 // Niveau de profondeur de larborescence
)); ?>
140 Chapitre 7. Comment crer son propre thme ?

Explications : affiche une liste des catgories de votre site.


wp_list_categories() accepte plusieurs paramtres qui permettent de
contrler son affichage.
Cette fonction se place lextrieur des boucles.

Note Si vous voulez connatre lidentifiant dune catgorie (dun article ou


dune page), il faut appliquer la valeur par dfaut des permaliens. Il suffit de
regarder lURL lorsque vous visitez une catgorie ou un article : vous pourrez y
voir une variable du type cat=1 ou p=2 .

Pour plus dinformations sur les paramtres, voir :


http://codex.wordpress.org/Template_Tags/wp_list_categories.

Lister les pages

<?php wp_list_pages(array(

title_li =>__(Pages), // Titre de la liste


exclude => "18,12", // ID de la ou des pages exclure
include => "9,17", Inclure seulement ces pages (par leur ID)
depth => 0, // Niveau de profondeur de larborescence
sort_column => menu_order, post_title, // Comment trier laffichage
des listes
)); ?>

Explications : affiche une liste des pages de votre site. wp_list_pages()


accepte plusieurs paramtres qui permettent de contrler son affi-
chage.
Cette fonction se place lextrieur des boucles.
Une autre fonction, plus rcente, permet de faire la mme action :
wp_page_menu().

Insrer des commentaires


Pour pouvoir insrer 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 larticle dans le fichier single.php ou page.php .
Attention, pour une raison encore inconnue, un problme daffichage des
commentaires peut survenir si le fichier comments.php est inclus avec la
fonction get_template_part(). Il est donc recommand dutiliser la fonction
comments_template() cre spcialement cet effet.
7.5 Template WordPress : des fonctionnalits utiles 141

<?php
// Dbut de la boucle
while ( have_posts() ) : the_post();

// Si les commentaires sont autoriss


if ( comments_open() || get_comments_number() ) {
comments_template();
}
endwhile;
?>

7.5 TEMPLATE WORDPRESS : DES


FONCTIONNALITS UTILES

Afficher la date et lheure de parution dun article

<?php the_time(); ?> <!-- affiche lheure au format dfini dans le back
office -->

<?php the_date(); ?> <!-- affiche la date lheure au format dfini dans le
back office -->

<p> Publi le : <?php the_time(j F, Y); ?> </p> <!-- affiche : Publi le 8
Mai, 2010 -->

<p> Publi le : <?php the_date(j F, Y); ?> </p> <!-- affiche : Publi le 8
Mai, 2010 -->

Explications : la fonction the_date() affiche la date de publication de


larticle courant. La fonction the_time(), elle, affiche, sans surprise,
lheure de parution.
Toutes deux, lorsquelles sont utilises avec les mmes paramtres,
affichent des lments identiques. En fonction de ces paramtres, on
peut forcer la manire dont ces lments vont tre affichs.

Vous trouverez plus de paramtres sur la date et lheure en suivant ce


lien : http://codex.wordpress.org/Formatting_Date_and_Time.
Il est prfrable dutiliser la fonction the_time() pour forcer laffichage de
la date. Contrairement the_date(), il ny aura pas de soucis daffichage si
plusieurs articles sont posts le mme jour.
Noubliez pas de rgler le format de la date et de lheure dans les
rglages de WordPress (figure 7.17).
142 Chapitre 7. Comment crer son propre thme ?

Figure 7.17 Rglage du format de la date et de lheure

<?php echo get_the_date(); ?> <!-- "fonction de rfrence" disponible


depuis la Version 3 de WordPress -->

Afficher lauteur dun article

<p> Ecrit par <?php the_author_posts_link(); ?> </p> // affiche le nom de


lauteur avec un lien

<p> Ecrit par <?php the_author(); ?> </p> // affiche le nom de lauteur
sans lien

Explications : rcupre et affiche le nom de lauteur dun article.


Ce code est insrer lintrieur dune boucle. La fonction
the_author_posts_link() permet donc dafficher le nom de lauteur
pointant vers la page de description de cet auteur. Nous reviendrons
ultrieurement sur ce point.

Afficher limage la une


WordPress possde une fonction qui permet dafficher limage la une dune
page ou dun article. Par dfaut, en insrant une image dans WordPress, ce
dernier cre 4 occurrences : loriginale, la grande, la mdium et la miniature.
Ces paramtres de taille sont grables depuis le back-office de WordPress.
7.5 Template WordPress : des fonctionnalits utiles 143

La fonction the_post_thumbnail()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 :

<!-- Affichage de limage la une ( mettre dans une boucle) -->


<?php the_post_thumbnail(thumbnail)?>

Pour plus dinformations sur les paramtres : http://codex.wordpress.org/


Function_Reference/the_post_thumbnail

Afficher des news


Pour afficher des news, voici les tapes suivre :
crer une catgorie news (avec des articles) dans le back-office ;
crer une boucle personnalise dans le fichier sidebar.php (ou dans
un autre fichier) avec query_posts() ou WP_query() ;
paramtrer cette boucle de telle sorte quelle prenne en compte X
articles de la catgorie ayant comme nom news .

<?php query_posts(category_name=News&posts_per_page=3 );?>


<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

<!-- ... -->

<?php
global $more;
$more = 0;
?>
<p><?php the_excerpt() ?></p>
<!-- ... -->

<?php endwhile; ?>

<?php else : endif;?>


<?php wp_reset_query();?>

Crer un article mis en avant


Un article mis en avant permet de crer une accroche. Le fichier va ainsi tre
structur en deux parties (figure 7.18) :
la boucle principale : elle affiche des articles de manire standard,
avec une vignette ;
la boucle secondaire : elle affiche uniquement le dernier article publi.
144 Chapitre 7. Comment crer son propre thme ?

Deux boucles seront donc prsentes lintrieur dun mme fichier.

Figure 7.18 Structure dune page comportant une accroche

Concrtement, cela donnera :

<div id="content">

<div id="accroche">

<!-- boucle secondaire -->

</div> <!--accroche -->

<div id="articles">

<!-- boucle principale -->

</div> <!--articles -->


</div>

La boucle secondaire
Avant daller plus loin, commenons par schmatiser la structure HTML de
notre accroche (figure 7.19).
7.5 Template WordPress : des fonctionnalits utiles 145

Figure 7.19 Structure HTML de laccroche

<div id="accroche">

<?php
$accroche= new WP_Query();
$accroche->query(array(
posts_per_page=>1, // on rcupre que 1
article
));

while($accroche->have_posts()) : $accroche->the_post();
$wp_query->in_the_loop = true;
$accroche_ID = $post->ID;
?>

<?php if (get_post_meta($post->ID, grande-vignette,true)) { ?>

<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 href="<?php the_permalink(); ?>" title="<?php
the_title(); ?>"><?php the_title(); ?></a></h2>

<?php the_content(Lire la suite); ?>


</div>

<?php endwhile; ?>

</div> <!--accroche -->


146 Chapitre 7. Comment crer son propre thme ?

Explications : le mme fichier contenant deux boucles diffrentes, il est


possible, pour la boucle secondaire, dutiliser au choix Wp_Query() ou
query_posts(). Ici, nous utiliserons Wp_Query().
Lobjet WP_Query(), alias $accroche, va permettre de personnaliser la
boucle secondaire (celle qui va afficher laccroche). On choisit alors le
nombre darticle que nous voulons afficher (un seul). On peut sarrter
l, mais on peut galement prciser la catgorie qui nous intresse.
La boucle dmarre alors : tant que $accroche contient des articles
(ici il ny en a quun seul), la boucle affiche le code HTML de laccroche.
Lidentifiant de cet article est alors stock dans la variable $accroche_ID,
ce qui a toute son importance pour la suite.
lintrieur de cette boucle, la fonction get_post_meta() est utilise
pour rcuprer limage de larticle grce un champ personnalis
pralablement cr. Enfin, les template tags basiques sont utiliss pour
afficher le titre de larticle, son lien et son extrait.
Laccroche est alors acheve.

La boucle principale
Cest une boucle standard qui affiche plusieurs articles. Il nest donc
pas ncessaire dutiliser query_posts() ou WP_Query(). Un petit dtail reste
nanmoins rgler : si la boucle de laccroche et la boucle principale puisent
les articles dans la mme catgorie, nous risquons de nous retrouver avec
un doublon.
Laccroche affiche le premier article. La liste darticles (gnre par la
boucle principale) va commencer avec ce mme premier article. Il faut donc
demander la boucle principale de ne pas lafficher.
Une simple condition if et une variable $accroche_ID feront alors laf-
faire :

<div id="articles">

<!-- boucle principale -->

<?php if ( have_posts() ) :?>

<?php while ( have_posts() ) : the_post(); ?>

<?php if ($post->ID != $accroche_ID) { ?>

<!-- si les identifiants sont diffrents, on


affiche le code interne la boucle -->

<?php } ?>
7.5 Template WordPress : des fonctionnalits utiles 147

<?php endwhile; else: ?>

<p>Aucun rsultat :(</p>

<?php endif; ?>


<!--Fin boucle article-->

</div> <!--articles -->

Explications : si larticle courant ne possde pas le mme identifiant


que larticle () de laccroche, alors le code qui gnre la liste est affich.
Cette condition se place donc lintrieur de la boucle principale.

Crer un formulaire de recherche


Voici un exemple de code source dun formulaire de recherche, avec un
champ de type input et un bouton submit . Il suffira de le styler en CSS
pour que son esthtique corresponde vos besoins :

<form class="bidule" name="searchform" method="get" action="<?php echo


home_url(); ?>">
<fieldset>
<legend>Recherche</legend>

<label>
<input type="text" name="s" value="#" id="recherche"
/>
</label>

<input type="submit" id="votre-id" value="Chercher" />


</fieldset>

</form>

Ce code est communment intgr dans un fichier appel search-


form.php , puis intgr dans les autres fichiers.
Lorsquune requte de recherche sera excute partir de ce formulaire,
WordPress va automatiquement reconnatre lURL (qui prendra alors la
forme suivante : http://www.example.com/?s=mot-recherche) et va donc
faire appel au fichier search.php .
Si search.php nest pas trouv, il affichera index.php.
Vous pouvez revoir la section Hirarchie des fichiers du chapitre 6
pour plus de prcisions.
148 Chapitre 7. Comment crer son propre thme ?

Attention La mthode de passage de paramtres se fait avec get . Laction


se fait avec laide de la fonction home_url(). Le name="s" est obligatoire.

Partager un article sur les rseaux sociaux


Partager un article sur les rseaux sociaux permet daugmenter son potentiel
de lecteurs. Faciliter sa propagation avec des liens peut donc savrer
bnfique.

Insrer un lien partager sur Facebook


Pour partager un lien sur Facebook, il suffit dinsrer ce morceau de code
dans la boucle qui se situe dans le fichier single.php . Libre vous de
mettre une image ou de laisser ce lien sous forme textuelle :

<a href="https://www.facebook.com/sharer.php?u=<?php the_permalink();


?>&t=<?php the_title(); ?>" title="Partager sur facebook"
target="blank">Partager sur Facebook</a>

Pour plus dinfos sur Facebook : https://developers.facebook.com/docs/


plugins

Insrer un lien partager sur Twitter


Pour partager un lien sur Twitter, insrez ce morceau de code dans la boucle
situe elle aussi dans le fichier single.php :

<a href="https://twitter.com/intent/tweet?text= A voir : <?php


the_permalink(); ?>" title="Partager sur Twitter !"
target="_blank">Partager sur Twitter !</a>

Pour plus dinfos sur Twitter :


https://dev.twitter.com/web/tweet-button
Quelques plugins disponibles sur le site de WordPress vous permettront
galement dajouter de nombreux autres liens vers les rseaux sociaux :
Add this :
http://wordpress.org/plugins/addthis/.
Shareaholic :
http://wordpress.org/plugins/shareaholic/
7.5 Template WordPress : des fonctionnalits utiles 149

Navigation interne : suivant et prcdent

<?php next_posts_link() ?> <!-- affiche un lien pour les articles


suivants -->

<?php previous_posts_link() ?> <!-- affiche un lien pour les


articles prcdents -->

Explications : affiche un lien qui permet daccder aux articles suivants


ou prcdents. Ces fonctions sont places avant ou aprs une boucle.
Ces liens sont automatiquement masqus lorsquil ny a plus darticles
afficher.
Il est possible de formater leur affichage :

<?php next_posts_link(Articles suivants) ?> <!-- affiche un lien "


Articles suivants " -->

<?php next_posts_link(<img src="chemin-image.jpg"/>) ?> <!-- affiche une


image comme lien -->

Rappel Pour choisir le nombre darticles qui saffichent sur une page, il faut
se rendre dans les options de lecture du back-office.

Pour plus dinformations, voir :


http://codex.wordpress.org/Template_Tags/next_post_link et
http://codex.wordpress.org/Template_Tags/previous_post_link.

Rcuprer le nom ou la description dune catgorie

// Rcupre et affiche la description de la catgorie courante

<?php
$category = get_the_category();
echo $category[0]->category_description;
?>

// Rcupre et affiche le nom de la catgorie courante

<?php
$category = get_the_category();
echo $category[0]->cat_name;
?>
150 Chapitre 7. Comment crer son propre thme ?

Pour plus dinformations, voir :


http://codex.wordpress.org/Function_Reference/get_the_category.

Crer une page 404 personnalise


Pour crer une page 404 personnalise, il est ncessaire de crer un fichier
que lon nommera : 404.php . Cest ce fichier que WordPress ira chercher
dans le thme sil ne trouve aucun rsultat. Souvenez-vous que, par dfaut,
il affichera le fichier index.php .
Ici, il nest pas ncessaire dutiliser une boucle. En effet, il ny a aucun
article ou contenu chercher. Aussi, un simple code HTML avec des template
tags fera trs bien laffaire.

<?php get_header();?>

...

<div id="content">

<!-- On affiche le contenu de cette page 404 -->


<p> Erreur 404 </p>

</div><!--content-->

...

<?php get_footer(); ?>

Explications : les fichiers header.php et footer.php sont appels


grce aux template tags get_header() et get_footer().
Notons que la fonction get_template_part() aurait galement pu tre
utilise.
Il suffit ensuite dafficher le contenu de son choix. Certaines pages 404
sont trs graphiques, dautres le sont moins mais ont plus de fonction-
nalits (moteur de recherche intgr, archives, plan du site, etc.).

Pour de plus amples informations, voir :


http://codex.wordpress.org/Creating_an_Error_404_Page.

Ajouter les classes CSS WordPress


Chaque article, chaque page, chaque lment gr par WordPress, possde
des identifiants et des classes CSS uniques et gnralistes. Cest trs utile
lorsque lon veut cibler un ou plusieurs lments.
7.5 Template WordPress : des fonctionnalits utiles 151

Cest la fonction post_class()qui va gnrer lensemble des classes CSS


de larticle ou de la page affiche. On peut y galement ajouter nos propres
classe en paramtre de cette fonction.
<div id="post-<?php the_ID(); ?>" <?php post_class(ma-classe); ?
va afficher par exemple :

<div id="post-4564" class="post post-4564 category-48 category-dancing


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

Changer larrire-plan du site depuis le back office


Cette fonction sinsre dans le fichier functions.php de votre thme pour
activer cette fonctionnalit dans le backoffice. Il faut noter que limage
choisie dans le back office sera intgre en CSS directement sur la balise
HTML <body>. Pensez-y lors de votre intgration HTML/CSS !

add_custom_background();

Figure 7.20 Rsultat de la fonction : ajout dune option dans le signet Apparence

Pour que cela fonctionne dans notre thme, il faut ajouter la fonction
body_class() dans notre balise HTMl body .

<body <?php body_class() ?>>

Cette fonction body_class() ajoute des classes CSS spcifiques Word-


Press, ce qui permet de changer le fond de notre thme depuis lespace
dadministration de WordPress.
152 Chapitre 7. Comment crer son propre thme ?

Bien entendu, si vous ne voulez pas que le fond de votre thme soit
personnalisable, via lespace dadministration, il suffit de supprimer cette
fonction du fichier functions.php .

7.6 DES PLUGINS TRS PRATIQUES


Leffet lightbox
Leffet lightbox permet notamment dagrandir une image lintrieur dune
bote modale en utilisant une transition esthtique (figure 7.21). Le langage
utilis est JavaScript.

Figure 7.21 Exemple dun effet lightbox

Pour raliser cet effet, il suffit dutiliser le plugin jQuery Colorbox . Voici
la marche suivre :
1. Tlchargez le plugin cette adresse :
http://wordpress.org/plugins/jquery-colorbox/
2. Installez le plugin et activez-le.
3. Insrez une image dans un article ou une page.
4. Vrifiez que le lien de limage rduite pointe bien vers limage elle-
mme (figure 7.22).
5. Cest termin. Votre Effet Lightbox est en place et dsormais parfaite-
ment fonctionnel.
Ainsi, ds que vous cliquerez sur une image, un voile assombrira le site
et affichera le lien (une image plus grande) dans une fentre modale.
7.6 Des plugins trs pratiques 153

Figure 7.22 Vrification du lien vers limage originale

Vous remarquerez quune nouvelle rubrique intitule jQuery Colorbox a


fait son apparition dans les signets Rglages . Vous pouvez cet endroit
choisir la couleur du voile (par dfaut cest le noir). Pour permettre au plugin
dinsrer automatiquement le lien HTML permettant son utilisation, gardez
la case coche.

Pagination numrote
Comme nous lavons vu prcdemment, WordPress propose des fonction-
nalits qui permettent de naviguer lintrieur des pages. Nanmoins, ces
fonctionnalits se rsument de simples liens Suivant ou Prcdent ,
ce qui se rvle peu pratique lorsque lon est amen naviguer dans des
dizaines de pages...
Nous allons utiliser ici le plugin WP-PageNavi qui permettra doptimi-
ser cette navigation interne grce la pagination.
Voici comment procder :
1. Tlchargez le plugin cette adresse :
http://wordpress.org/extend/plugins/wp-pagenavi/.
2. Installez le plugin et activez-le.
3. Insrez le code suivant dans un fichier de votre thme (par exemple
category.php ) :

<?php wp_pagenavi(); ?>

4. Noubliez pas de supprimer les anciennes lignes de code :

<?php next_posts_link() ?> <!-- affiche un lien pour les articles


suivants -->

<?php previous_posts_link() ?> <!-- affiche un lien pour les


articles prcdents -->
154 Chapitre 7. Comment crer son propre thme ?

5. Cest termin ! Votre plugin est dsormais fonctionnel.

Rendez-vous dans les rglages de ce plugin (Rglages > PageNavi) pour


formater correctement laffichage en franais. Il est galement possible
dutiliser une feuille de style ddie laffichage de cette pagination.

Rappel Pour choisir le nombre darticles qui saffichent sur une page, il faut
se rendre dans les options de lecture du back-office.

Insrer un fil dAriane (breadcrumbs)


Par dfaut, WordPress ne propose pas de fonction pour grer un fil dAriane.
Pourtant, lorsquun site est volumineux et contient plusieurs niveaux de
profondeurs, cet lment peut devenir trs vite indispensable.
Voici quoi peu ressembler un fil dAriane : Vous tes ici : Accueil >
catgorie > article .
Comme souvent, il existe de nombreux plugins proposant cette fonc-
tionnalit, mais tous ne sont pas de qualit gale. Nanmoins, deux se
distinguent plus particulirement, il sagit de Breadcrumb NavXT et de Yoast
Breadcrumbs.

Breadcrumb NavXT
Premire tape, tlchargez Breadcrumb NavXT ladresse suivante :
http://wordpress.org/extend/plugins/breadcrumb-navxt/.
Aprs installation et activation, insrez le morceau de code suivant
dans le fichier header.php :

<div class="fil-ariane">

<?php
if(function_exists(bcn_display)){
bcn_display();
}
?>
</div>

Crer et afficher un formulaire de contact


Vous trouverez de nombreux plugins qui permettent de crer des formulaires
dans WordPress. Leur fonctionnement est similaire : une interface permet
de crer un formulaire avec ses diffrents champs, puis un shortcode est
gnr. Ce dernier est directement insrable dans une page ou un article
ou dans notre thme grce la fonction do_shortcode() de WordPress.
7.7 Cration dune ou de plusieurs zones de Menus 155

Voici une liste de plugin non exhaustive : cformsII, Form Manager, Contact
form 7.

Grer une ou plusieurs Google Maps


Difficile de se passer dune carte Google Maps sur la majorit des sites. Les
plugins existant fonctionnent de la mme manire que prcdemment : une
interface de cration puis un shortcode nous sont fournis. Il est alors trs
simple de modifier le type de carte (plan, photo, reflief), le niveau de zoom,
les infos-bulles, les pins, etc.
Voici une liste non exhaustive de plugins : Maps Builder, WP Google
Maps...

Rendre un site priv


Pour plusieurs raisons, il est bon de savoir comment rendre un site priv
(maintenance, en construction, extranet...) avec le plugin My Private Site
(entre autres) en un coup de souris, votre site est scuris : vous devez vous
authentifier pour y accder.
Lien du plugin : https://fr.wordpress.org/plugins/jonradio-private-site/

7.7 CRATION DUNE OU DE PLUSIEURS ZONES DE


MENUS
Introduction
Il est possible dafficher (et de grer par lintermdiaire du back-office)
plusieurs menus trs facilement. Le nombre de menus disponibles dans un
thme est spcifi dans le fichier functions.php .
Il y a donc deux tapes :
Cration de la (ou des) zone dans le fichier functions.php ;
Mise en place de la zone lendroit souhait dans notre thme.

Le fichier functions.php
Nous allons crer une zone de menu que nous allons appele Zone
principale .
156 Chapitre 7. Comment crer son propre thme ?

register_nav_menus( array(
Zone Principale => __( Navigation Principale),
) );

Explications : Une zone Navigation Principale apparat maintenant


dans le back-office de WordPress.
Si aucun menu personnalis nest affect un emplacement, la
fonction wp_nav_menu() se transforme en wp_page_menu() qui liste uni-
quement les pages.
Avantages : rapide, efficace et flexible. Lutilisateur peut changer
comme il lentend lintitul de ses menus dans lespace dadminis-
tration. Il peut choisir lemplacement de chacun !

Pour plus dinformations, voir :


http://codex.wordpress.org/Function_Reference/wp_nav_menu.

Insertion dans le thme


Il ne reste plus qu mettre dans le thme cette fameuse zone. Dans notre
cas ce sera dans le header.php lendroit de la navigation.

<?php wp_nav_menu( array(theme_location => Zone Principale,) ); ?>

Par dfaut, cette fonction affiche une div qui contient une liste ul et li. Mais
il est tout fait possible de formater la faon dont on veut que WordPress
code notre menu. La liste des paramtres est disponible ici : http://codex.
wordpress.org/Function_Reference/wp_nav_menu

Reconnatre la rubrique courante


Pouvoir reconnatre la rubrique dans laquelle un internaute navigue est
un plus dans lergonomie dun site. Lexemple le plus commun est le
changement dapparence de la rubrique du menu dans laquelle on se
trouve.
WordPress la bien compris en ajoutant automatiquement des classes
CSS ddies llment courant :

.current-menu-item {
// permet de styler llment courant du menu de navigation
}

. current-cat {
// permet de styler llment courant dune liste de catgories
}
7.8 Cration dune zone de Widget 157

. current_page_item {
// permet de styler llment courant dune liste de page
}

Nhsitez pas utiliser loutil Firebug de Firefox afin de pouvoir rapide-


ment dterminer quelle classe CSS doit tre utilise.

7.8 CRATION DUNE ZONE DE WIDGET


Introduction
Il est possible dafficher (et de grer par lintermdiaire du back-office)
plusieurs zones de Widget. Voici comment en crer une :
Il y a donc deux tapes :
Cration de la (ou des) zone(s) dans le fichier functions.php
Mise en place de la zone lendroit souhait dans notre thme.

Le fichier functions.php
Nous allons crer une zone de Widget que nous allons appeler Zone
principale .

register_sidebar( array(
name => __( Zone Sidebar),
id => zone1,
description => __( Zone de Widget dans sidebar),
) );

Explications : une zone de widget Zone Sidebar apparat 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. Trs pratique pour ladapter
une intgration HTML/CSS spcifique. Pour plus dinformations, voir :
http://codex.wordpress.org/Function_Reference/register_sidebar

Insertion dans le thme


Il ne reste plus qu mettre dans le thme cette fameuse zone. Dans notre
cas ce sera dans le header.php lendroit de la navigation.

<?php wp_nav_menu( array(theme_location => Zone Principale,) ); ?>


158 Chapitre 7. Comment crer son propre thme ?

Par dfaut, cette fonction affiche une div qui contient une liste ul et li. Mais
il est tout fait possible de formater la faon dont on veut que WordPress
code notre menu. La liste des paramtres est disponible ici : http://codex.
wordpress.org/Function_Reference/wp_nav_menu
Pour plus de dtails sur les widgets, voir :
http://codex.wordpress.org/Widgetizing_Themes.

7.9 CRATION DUN MODLE DE PAGE


Introduction
Un modle de page permet de personnaliser laffichage dune (ou plusieurs)
page(s) prcises. Cest un template spcifique qui va sappliquer cette ou
ces page(s).

Cration du fichier php


Pour crer un modle de page, cest trs simple : crez dabord un nouveau
fichier PHP dans votre thme (sans prendre un nom rserv par WordPress)
puis, donnez-lui un nom. Enfin, insrez tout au dbut de ce fichier le code
suivant (sans espace libre) :

<?php /* Template Name: nom du modle de page */ ?>

Le modle de page sera ensuite disponible dans la liste des modles,


dans linterface de publication dune page.

Personnaliser la homepage avec un modle de page


Prenons un cas concret : vous souhaiteriez pouvoir disposer dune page
daccueil totalement diffrente du reste du site. Pour ce faire, il faut crer
un modle de page Accueil que vous allez appliquer une page de
WordPress, en suivant les tapes dcrites ci-aprs :
Dans lespace dadministration, crez une page Accueil .
Dans les rglages de WordPress, choisissez cette page statique comme
page daccueil.
Crez ensuite un fichier PHP, par exemple accueil.php .
Insrez tout au dbut de ce fichier (sans espace libre) la ligne suivante :

<?php /* Template Name: Accueil */ ?>


7.9 Cration dun modle de page 159

Aprs sauvegarde du fichier, rendez-vous dans lespace dadministra-


tion pour modifier la page Accueil .
Enfin, choisissez le modle de page Accueil .

Vous pouvez ds prsent diter ce fichier accueil.php comme bon


vous semble. Bien entendu, noubliez pas dinsrer une boucle standard
permettant dafficher le contenu de la page.

Crer un modle de page avec une boucle personnalise


Comme son nom lindique, un modle de page sapplique une page.
Or nous savons maintenant que WordPress affiche plusieurs rsultats
diffrents avec la mme boucle, en fonction du type de fichier (page, article,
catgorie...).
Pour mmoire, une mme boucle de base naffichera pas le mme
rsultat selon quelle est appele par le fichier category.php ou par le
fichier page.php : le fichier category.php va en effet afficher plusieurs
articles, alors que le fichier page.php naffichera que le contenu de la
page (cf. hirarchie de fichiers de WordPress).
Ds lors, comment procder pour afficher plusieurs articles dune cat-
gorie dans une page, tant donn quune boucle standard naffiche que le
contenu de la page ?
La solution est en fait trs simple : il suffit de personnaliser cette boucle
en utilisant WP_Query() ou query_posts(), en indiquant les bons paramtres :

<?php query_posts(category_name=nom-categorie);?>

<!-- Boucle -->


<?php if ( have_posts() ) :?>

<?php while ( have_posts() ) : the_post(); ?>

<!-- contenu de la boucle -->

<?php endwhile; else: ?>

<!--Si la boucle naffiche rien -->

<?php endif; ?>


<!-- Fin boucle -->

Ainsi, grce query_posts(), il est possible dafficher ce que lon souhaite


dans toutes les pages, en forant WordPress ne pas afficher la boucle
comme une boucle de page .
160 Chapitre 7. Comment crer son propre thme ?

Si vous souhaitez utiliser un lien Lire la suite dans une page , il suffit
pour cela dajouter ce morceau de code :

<?php
global $more;
$more = 0;
?>

<?php the_content(Lire la suite); ?>

En effet, puisque WordPress affiche une page (souvenez-vous de la


hirarchie des fichiers), il va afficher tout le contenu de cette page : il faut
donc lui forcer la main.

7.10 CRATION DARTICLES PERSONNALISS


(CUSTOM POST TYPE)
Introduction
WordPress dispose par dfaut dun flux darticles et dun flux de page. Les
articles personnaliss (custom post type) sont un flux supplmentaire et
totalement indpendant des autres flux.

Figure 7.23 Flux de WordPress


7.10 Cration darticles personnaliss (Custom Post Type) 161

Il y a donc deux tapes :


Cration du flux dans functions.php,
Affichage de ce flux dans notre thme.

Le fichier functions.php
Nous allons crer un Flux Livres dans notre fichier functions.php :

// creation des custom post type livres


register_post_type(livres, array(
label => Livres,
public => true,
show_ui => true,
capability_type => post,
hierarchical => false,
rewrite => array(slug => livres),
query_var => true,
supports => array(title,
editor,
excerpt,
trackbacks,
custom-fields,
comments,
revisions,
thumbnail,
author,
page-attributes,)) );

Explications : On cre un label, des identifiants, puis on construit son


interface dadministration : la mme que pour un article ou une page.
https://codex.wordpress.org/Function_Reference/register_post_type
La figure 7.24 montre ce qui apparat dans le back-office de WordPress.

Ajouter une taxonomie


Une taxonomie permet de classer une information. Cest tout simplement
une catgorie ou des tags. Ajoutons une catgorie nos customs post type.

register_taxonomy( categorie_projet, livres, array( hierarchical =>


true, label => Catgorie, query_var => true, rewrite => true ) );

On ajoute lidentifiant de notre flux ( livres ), on assigne true


hierarchical et on met un label qui sera le texte affich dans le back-office
(ici Catgorie ). Voici le rsultat.
162 Chapitre 7. Comment crer son propre thme ?

Figure 7.24 Custom Post Type Livres

Figure 7.25 Taxonomie (catgories) de Livres

Modifier licne dans le back-office


Les custom post types de WordPress peuvent facilement tre personnaliss en
ajoutant une icne correspondant au contenu. Rendez-vous dans le fichier
functions.php, plus prcisment dans notre fonction de cration de custom
post type de Livres .
Puis nous ajoutons cette ligne :
7.11 Champs personnaliss (Custom Fields) 163

menu_icon => get_bloginfo(template_directory) . /images/mon-image.png,


// URL de limage

Affichage dans le thme


Une boucle standard naffiche que les flux normaux (pages + articles). Or,
nous venons de crer un flux supplmentaire. Nous disposons de deux
solutions pour afficher ces articles.
Cration dun modle de page qui va contenir une boucle personnalise
(query_post()) affichant ce flux prcis.
query_posts(post_type=livres);
Ou alors directement dans le menu, grce notre taxonomie, il est possible
dafficher directement une rubrique qui pointe vers celle-ci.

Des plugins
Des plugins existent pour crer la vole des custom post types, ce qui nous
vite de tout faire la main. Voici les plus connus : Custom Post Type UI et
Types.

7.11 CHAMPS PERSONNALISS (CUSTOM FIELDS)

Prsentation
Les champs personnaliss permettent dajouter, travers linterface dadmi-
nistration, une ou plusieurs donnes que vous allez pouvoir utiliser dans les
thmes.
Ces informations bonus , insres par lauteur lui-mme, vont accom-
pagner un article ou une page. Elles pourront servir dans llaboration dun
thme WordPress.
Prenons un cas concret : lier une vignette un article.
Pour afficher une vignette, il faut bien entendu lavoir upload dans
WordPress. Lorsque cette tape est acheve, veillez bien noter son URL qui
doit tre de type :
http://www.mon-site.com/wp-content/uploads/vignette.jpg.
164 Chapitre 7. Comment crer son propre thme ?

Cration depuis le back-office


Dans la partie administration, rendez-vous dans linterface de publication
dun article (ou dune page).
En scrollant vers le bas, arrtez-vous au signet Champs personnaliss .
Puis, renseignez les deux champs (figure 7.26).

Figure 7.26 Champs personnaliss

Le champ Nom va servir didentifiant dans vos templates. Appelez-le


par exemple vignette , puis insrez lURL de la vignette dans le champ
Valeur .
Il suffit ensuite de cliquer sur les boutons Ajouter un champ personna-
lis et Mettre jour .

Affichage dans le thme


Le champ personnalis tant en place, il faut maintenant rcuprer son nom
ainsi que sa valeur. Celle-ci sera utilise pour afficher la vignette. WordPress
dispose dune fonction spcialement conue cet effet : get_post_meta ().

<?php echo get_post_meta($post->ID, nom-du-champ, true); ?> // affiche


la valeur du champ personnalis

Cette fonction comprend trois paramtres :


lID de larticle (ou de la page) pour spcifier lendroit o se trouvent
ces champs personnaliss ;
le nom du champ personnalis, de manire indiquer WordPress
quel(s) champ(s) il doit chercher ;
un boolen : vrai si on ne souhaite quun seul rsultat et faux
pour obtenir un tableau de rsultats.
7.11 Champs personnaliss (Custom Fields) 165

Dans lexemple de la vignette, lURL va tre affiche dans une balise


image.

<img class="vignette" src="<?php echo get_post_meta($post->ID, vignette,


true); ?>" alt="vignette"/>

Remarque Cette fonction est utilise lintrieur dune boucle. Libre vous
de crer une variable qui stockerait linformation pour lafficher ailleurs.

Cration de Meta boxes avec le plugin ACF


Une meta boxe est une bote qui se trouve dans linterface ddition
dun article ou dune page (lextrait, limage la une, etc.). Il est possible
de crer facilement nos propres Meta boxes en se basant sur les champs
personnaliss, grce au plugin Advanced Custom Fields.
http://wordpress.org/plugins/advanced-custom-fields/
Voici la marche suivre :
Installation et activation du plugin
Dans la rubrique ACF, cliquer sur ajouter .
Une grande page apparat avec des champs remplir. Laissez vous
guider pour la suite.
Il est possible dassigner un groupe de champs un modle de page
prcis ou un custom post type. Cest trs pratique !
Rendez-vous dans une page pour tester que les meta boxes sont bien
prsentes.
Cest termin !

Rcupration et affichage dans le thme


En lisant la documentation du plugin (claire et bien faite), voici la fonction
mettre dans notre thme lextrieur ou lintrieur dune boucle.

<?php the_field(document_pdf); ?>


166 Chapitre 7. Comment crer son propre thme ?

Figure 7.27 Cration dune Meta Boxe PDF

Figure 7.28 Rsultat de la Meta Boxe PDF

7.12 POUR ALLER PLUS LOIN

Crer ses propres Shortcodes


Un shortcode est un morceau de code entre crochets que vous pouvez
littralement insrer dans vos articles, vos pages ou alors directement dans
vos fichiers de thmes.
Grce aux Shortcodes, il est possible de crer des boutons, des botes
flottantes et la gestion de plusieurs colonnes dans le contenu (tel un
framework), tout a, sans avoir besoin dcrire une seule ligne de code : un
luxe pour vos utilisateurs !
Voici une liste non exhaustive : Shortcodes Ultimate, Jshortcode, All-In-
One Shortcodes...
7.12 Pour aller plus loin 167

Ajouter des fonctionnalits natives votre thme


Comme nous lavons vu prcdemment, un thme WordPress peut contenir
un fichier nomm functions.php . Ce fichier contient, comme son nom
lindique, des fonctions qui vont permettre dajouter des fonctionnalits
votre thme.
Cest par exemple ce fichier qui contient la fonction permettant de grer
limage de fond depuis le back-office.
Mais rien ne vous empche dajouter et de crer vos propres fonctions !
functions.php permet dajouter des fonctions natives votre thme.
Celles-ci vont faire la mme chose que des plugins, mais sans les plugins.
Cest une excellente faon dajouter des fonctionnalits un seul et mme
thme, ce que ne permettent pas les plugins qui, eux, sont activs pour
lensemble du site (pas de diffrence entre les thmes) et qui ncessitent une
action de la part de lutilisateur (installation et activation).

Comment transfrer/intgrer la fonction dun plugin nativement dans un thme ?


Sans surprise, il suffit de transfrer (copier/coller) le code source du plugin
lintrieur mme du fichier functions.php . Pour certains plugins, quelques
amnagements seront sans doute ncessaires pour que tout fonctionne
correctement.
De cette faon, ds lors que le thme est activ, les fonctions inhrentes
un plugin seront automatiquement mises en place. Do les ventuelles
apparitions de menus persistants supplmentaires dans la sidebar latrale
dadministration, lors de lactivation dun thme !
Mais attention, dans ce cas, il ny aura pas de mises jour automatiques.
Il faudra donc veiller ce que la dernire version de ce plugin soit bien dis-
ponible. Si cest le cas, une mise jour manuelle du fichier functions.php
simposera.

Quelques pistes pour ajouter des options votre thme


Nous nallons pas entrer dans les dtails de ces diffrentes mthodes, car
celles-ci requirent des notions un peu plus pousses que dordinaire en
programmation et en algorithmique. Nanmoins, un petit tour dhorizon des
diffrentes mthodes permettra de vous lancer lorsque vous serez prts.

Modifier le fichier functions.php en y ajoutant des fonctions et ses variables de


thmes
Vous pouvez modifier le fichier par copier/coller de plugins existants, ou en
crer vous-mme de toutes pices.
168 Chapitre 7. Comment crer son propre thme ?

Nous vous conseillons pour cela de consulter quelques ressources


intressantes :
http://wpshout.com/create-an-advanced-options-page-in-wordpress/.

Crer sa propre librairie


Il sagit l dune variante de la premire mthode. Le fichier functions.php
est beaucoup plus lisible, car il fait appel des fichiers PHP externes.
Concrtement, voici ce que cela peut donner dans le fichier func-
tions.php :

// On dfinit la variable THEMELIB qui va contenir le chemin de la


librairie
define(THEMELIB, TEMPLATEPATH . /library);

// Puis on fait appel un fichier PHP externe


require_once(THEMELIB . /fichier-de-la-librairie.php);

Le thme Thematic utilise cette mthode. Nous vous conseillons de


dissquer son fichier functions.php et son dossier library pour bien
comprendre son fonctionnement.
Pour plus dinformations, voir :
http://wordpress.org/extend/themes/thematic.

Utilisation du plugin Option Tree


Utilis sur de nombreux templates premium, ce plugin permet de crer
rapidement son interface dadministration.
Pour plus dinformations, voir :
https://wordpress.org/plugins/option-tree/

Thme enfant
Il sagit dune fonctionnalit qui peu savrer intressante, en fonction de vos
besoins. En effet, WordPress permet de crer un thme enfant (child theme).
Lide est de partir dun thme existant (qui jouera le rle de parent) pour
crer un autre thme bas sur celui-ci (qui, lui, jouera le rle denfant). Ces
deux dossiers entretiennent donc une trs forte relation : le thme enfant
tant bas sur le thme parent, le moindre changement graphique de celui-ci
se rpercutera sur le premier.
La cration dun thme enfant est trs simple. Il suffit pour cela de crer
tout dabord un nouveau dossier portant le nom de votre thme enfant dans
7.12 Pour aller plus loin 169

wp-content/themes , puis de crer lintrieur de ce thme enfant un


fichier style.css (comme vous le feriez pour crer un thme normal ).
Cest ce dernier fichier qui va appeler le thme parent.
Voici le code insrer au dbut du fichier style.css :

/*
Theme Name: Le theme enfant
Theme URI: http://mon-site.com
Description: Theme enfant dun autre theme
Author: Brin de web
Author URI: http://www.brindeweb.com
Template: Nom-dossier-du-theme-parent
Version: 1.0
*/

@import url("../Nom-dossier-du-theme-parent/style.css");

La ligne la plus importante est Template: Nom-dossier-du-theme-


parent . Cest en effet celle qui spcifie le nom du dossier du thme parent.
Une ligne plus commune mais optionnelle est la ligne de rcupration
de la feuille de style du thme parent. partir de maintenant, tout ce que
vous allez ajouter la suite de ce fichier, crasera les instructions CSS du
thme parent.
Il est noter que certains posent la question de lintrt de cette
fonctionnalit. En effet, si lon souhaite crer un nouveau thme diffrent, il
suffit de dupliquer le thme qui nous intresse, puis de le modifier (comme
nous lavons dj vu dans ce livre). Non ? Et bien cest une remarque qui
fait dbat... Cest uniquement une histoire de got. Certains trouvent cette
fonctionnalit inutile, dautres la trouvent gniale.

Les marqueurs conditionnels (conditional tags)


Le codex WordPress dfinit ainsi les marqueurs conditionnels :
Les marqueurs conditionnels peuvent tre utiliss dans vos thmes
pour dcider du contenu afficher sur une page spcifique ou com-
ment ce contenu doit tre affich en fonction de conditions que remplit
cette page. Par exemple, si vous voulez insrer un texte particulier
au-dessus dune srie darticles, mais seulement sur la page principale
de votre blog, avec le marqueur conditionnel is_home(), cela devient
facile.
Ces marqueurs sont en relation troite avec la hirarchie des modles
de WordPress.
170 Chapitre 7. Comment crer son propre thme ?

Pour plus dinformations, voir :


http://codex.wordpress.org/fr:Marqueurs_conditionnels.
Les marqueurs conditionnels permettent davoir un contrle encore plus
pouss sur votre template. Par exemple, grce ces marqueurs, il est possible
de dfinir que telle partie du template est visible uniquement un endroit
prcis o navigue lutilisateur (comme la page daccueil). Ces marqueurs
sont donc troitement lis au modle de hirarchie de WordPress.
Prenons des exemples :

<?php if (is_home()) { ?>


<p>Ce message ne saffichera que sur la page daccueil</p>
<?php } ?>

<?php if (is_category()) { ?>


<p>Ce message ne saffichera que dans une catgorie</p>
<?php } ?>

<?php if (is_404()) { ?>


<p>Ce message ne saffichera que si cest une page 404</p>
<?php } ?>

De nombreuses possibilits soffrent vous : soyez cratif ! Nhsitez pas


faire le tour des marqueurs disponibles.

Retour sur ce que vous venez dapprendre


Cette partie est maintenant termine. Elle regroupe les principaux usages de
WordPress dans le monde du Web. Comme vous le savez, il est impossible
de tout regrouper dans un seul livre, car les possibilits quoffre un tel
programme sont pratiquement infinies et seraient donc difficiles rsumer.
Retenez cependant que la plupart des codes que nous avons utiliss
sont bass sur les boucles et leur personnalisation. Pour personnaliser une
boucle, on utilise WP_Query() ou query_posts(). Ces deux fonctions possdent
les mmes paramtres.
Vos seules limites sont vos aptitudes en programmation PHP, SQL, HTML,
CSS, JS et algorithmique ! Si cest le cas, un plugin existe srement !
8
Un tutoriel pratique :
raliser le template
AlsaWP

8.1 FEUILLE DE ROUTE

Voici une mise en situation concrte : la cration du template AlsaWP.


Les fichiers sources (PSD, Intgration statique et template) sont disponibles
sur la page ddie louvrage sur www.dunod.com. Nhsitez surtout pas
les regarder pour analyser le code source. Pour mmoire, toutes les tapes
ont dj t abordes dans les parties prcdentes de cet ouvrage.
Cette mthode, utilise par la majorit des professionnels, est utilisable
pour nimporte quel autre projet de ce type. Voici les trois tapes suivre :
1. Cration de la maquette : le fichier PSD
Dans un premier temps, il sagit de crer le design du site grce des
logiciels de graphismes tels que Photoshop. Respectez les standards
du webdesign (dimension, lgret, facilit dintgration, etc.), puis
laissez parler votre imagination !
En fonction de limportance du projet, on cre au minimum une page
daccueil et une page interne de contenu.
172 Chapitre 8. Un tutoriel pratique : raliser le template AlsaWP

2. Intgration statique HTML/CSS : PSD to HTML


Notre maquette termine, nous allons la transformer en page HTML.
Nous dcoupons la maquette, de faon pouvoir disposer des
diffrentes images (fond, header, footer, vignettes), puis nous les
utilisons pour lintgration HTML/CSS de la page daccueil et de la
page interne.
3. Finalisation du template : HTML to WordPress
Dernire tape : il sagit maintenant de transformer nos pages HTML
statiques en template WordPress, pour les rendre dynamiques. Cette
tape se rsume insrer des fonctions PHP WordPress (boucle et
template tags) et la dcoupe en plusieurs fichiers PHP propres aux
templates WordPress.

8.2 LE FICHIER PSD

La maquette graphique du template AlsaWP est compose dun header et


dun footer imposants (figure 8.1). Le header comporte une accroche, un
logo et un bandeau suprieur. Le footer est compos de trois parties. La
partie du milieu est spare en deux et contient une barre latrale et une
partie centrale destine au contenu principal.

8.3 INTGRATION STATIQUE : PSD TO HTML

Avant de se lancer corps perdu dans le code HTML et le code CSS, il


faut absolument raliser un schma dintgration. Il va nous permettre
davoir une vue densemble du projet et de dfinir lavance les diffrents
identifiants, classes et proprits CSS (figure 8.2).
La balise <body> contiendra le fond du site.
Le div wrapper va englober toute la partie du site. Ce qui va
permettre de le centrer.
Le div header contiendra le bandeau suprieur et laccroche.
Le div main va contenir plusieurs classes .billet composes dune
image, dun titre h3 et dune description.
La barre latrale est compose 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 contrler toutes les parties de notre
template ! Bien entendu, libre vous dutiliser un plugin pour grer ce
formulaire.
8.3 Intgration statique : PSD to HTML 173

Figure 8.1 Maquette graphique

Ce template utilise une Google font pour grer une police exotique.
Nous aurions pu galement utiliser la proprit CSS Font-face . Voil
pour les grandes lignes. Si vous avez du mal visualiser ces tapes
en code HTML et CSS, nous vous conseillons danalyser les fichiers
sources disponibles sur le site www.dunod.com. Notre feuille de style
CSS se trouve dans un rpertoire nomm style .

Nous disposons maintenant dune page HTML statique. Il est temps de la


rendre dynamique !
174 Chapitre 8. Un tutoriel pratique : raliser le template AlsaWP

Figure 8.2 Schma dintgration

8.4 HTML TO WORDPRESS

Pour transformer notre intgration 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 175

Prparation des fichiers du template


Comme nous lavons dcrit dans la section Un bon dpart pour un
bon thme du chapitre 7, nous allons crer un dossier au nom de
notre thme : ici AlsaWP.
Copier un fichier style.css de nimporte quel thme ( 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 crons un
fichier functions.php vide qui sera rempli au fur et mesure de nos
besoins.

Insertion du code statique


Tous les fichiers de lintgration statique sont copis, tel quel, la
racine de notre template.
Nous crons un fichier index.php en insrant lintrieur de celui-ci
du code html statique (celui de index.html par exemple).

Figure 8.3 Fichiers statiques de dpart du template AlsaWP

Dans linterface dadministration de WordPress, nous pouvons mainte-


nant activer le thme et insrer nos propres contenus (quatre articles,
176 Chapitre 8. Un tutoriel pratique : raliser le template AlsaWP

trois pages, deux menus personnaliss...). Bien entendu, tout est encore
statique ! Mais plus pour trs longtemps...

Insertion des fonctions WordPress (template tags)


Le contenu statique va tre remplac par des fonctions PHP pour le rendre
dynamique. Nous allons dbuter par len-tte du site et finir par le bas de
page.

Le header
Rendre les liens durs (images, feuilles CSS, fichier JavaScript)
dynamiques grce la fonction bloginfo().
Insertion des fonctions wp_title() et bloginfo() dans la balise <title>.
Ajout de la fonction wp_head() dans la balise <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
Cration du menu dans la partie back-office.
Dans le div #navigation , nous insrons le code PHP pour afficher
les rubriques du menu personnalis. Voir la section Cration dune
ou plusieurs zones de Menus du chapitre 7.

La partie principale
Dans le div #main , nous insrons une boucle WordPress standard.
Cette boucle va afficher plusieurs extraits darticles en gnrant des
div avec la classe .billet .
Ajouter le bout de code PHP au dbut de cette boucle permet dafficher
les vignettes.
Aprs cette boucle, il est dusage dinsrer deux liens de navigation.

La sidebar
Le formulaire de recherche est appel avec get_template_part
(searchform).
Cration dune zone de widget. Voir la section Rendre "widgetisable"
une zone du chapitre 7.
8.4 HTML to WordPress 177

Le footer
Nous laissons le formulaire de contact tel quel. Comme vous avez pu
le constater, il nest pas fonctionnel. Il faudrait lui ajouter un script PHP
pour quil puisse envoyer un e-mail.
Nous crons deux zones widgetisables.
La fonction wp_footer() est insre.

Cest termin ! Votre template est maintenant fonctionnel.


Mais nous allons lamliorer. En effet, nous nutilisons que le fichier
index.php . Or souvenez-vous, WordPress possde dautres fichiers dans
sa hirarchie. Il est temps de dcouper ce fichier index.php en dautres
fichiers.

Dispatcher le fichier index.php


Pour ce faire, nous allons utiliser la fonction get_template_part() dans le
fichier index.php . Grce elles, nous pouvons le relier avec ces trois
fichiers PHP : footer.php , sidebar.php et header.php .

Grer les catgories

Rappel Une catgorie affiche plusieurs articles qui lui appartiennent.

WordPress va appeler le fichier category.php qui se trouve dans le


template. Nous allons donc le crer !
Dans notre cas, la prsentation dune catgorie est exactement la mme
que la page daccueil. Nous allons donc simplement copier le fichier
index.php et le renommer en category.php . Il ny aura que le titre
h2 changer.

Grer un article
Pour afficher un article ou une page, WordPress va appeler le fichier
single.php qui se trouve dans le template.
Il sagit l aussi dune copie du fichier index.php . En revanche, nous
allons cette fois-ci modifier lgrement la boucle : suppression des vignettes
et de la classe .billet .
178 Chapitre 8. Un tutoriel pratique : raliser le template AlsaWP

8.5 CONCLUSION
Le template est maintenant termin. Mais il nest pas finalis.
Noublions pas que ce thme na pas vocation tre utilis par le monde
entier contrairement au thme payant ou gratuit qui se trouvent sur le Web.
Cest plutt un exemple de ce que pourrait tre un thme dvelopp pour
un client et uniquement ce client : il y aura certainement des manques au
besoin de chacun. Mais il nattend que vous pour sadapter vous !
La suite est plutt destine la finalisation des styles CSS et
larborescence de chacun (pagination, plugin, custom post type, etc.).
Le plus important dans un site web est la conception avec la construction
dune base solide (du storyboard jusqu lintgration html-wordpress). Ds
que celle-ci est fiable et mise en place, le reste se rsume limbrication de
code PHP mlang de lHTML/CSS/JS.
Libre vous maintenant de le personnaliser et de lamliorer : vous
pouvez par exemple ajouter des modles de pages ou styler en CSS la
totalit des lments. En effet, au moment de lintgration statique nous
avons styl quelques-uns dentre eux (h1, h2, Hh3,p, ul, li...), mais il en reste
encore dautres.
9
tude de cas :
acheter et modifier un
Template HTML/CSS ou
un Template WordPress

9.1 INTRODUCTION

Internet regorge de thmes WordPress prts lemploi. On peut en trouver


normment de trs bonne qualit pour environ 50 $ (voir le site themefo-
rest.net par exemple). Alors faut-il cder la tentation ?
On peut rsumer un projet avec un curseur : plus le curseur va vers le
ct qualitatif plus cela va demander de temps (et dargent). Dans le sens
inverse : plus cest rapide, plus la qualit sera moindre.
Mettons-nous en conditions avec un client qui souhaite un site Internet.
Ce dernier doit : tre de bonne qualit, respecter les standards, tre
responsive (visible sur mobile et tablette), avoir un design sexy, avoir une
deadline est trs proche et (bien entendu) un budget plutt limit. Bref, cela
ressemble au mouton cinq pattes.
180 Chapitre 9. tude de cas : acheter et modifier un Template HTML/CSS...

Vous allez faire deux propositions de devis : lune sur-mesure et lautre


prt porter . Explications :
Le sur-mesure consiste partir dune feuille blanche pour arriver au site
final. Nous allons donc passer par les tapes du cahier des charges,
du storyboard, du design, de lintgration HTML-CSS-JS, au choix du
CMS puis la formation. Cela prend du temps et de largent : le
budget doit donc suivre.
Le prt 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,
lajout ou suppression de telles fonctionnalits). Il ne faut pas oublier
quadapter un thme existant prend plus de temps que lon imagine.
Rare sont les projets qui collent parfaitement 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 prt porter nous rduisons la plupart des tapes du
projet : le design, lintgration HTML/CSS, la cration 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 ct nfaste : le ct cratif nest plus vraiment
au rendez-vous et cest assez frustrant : vous pourrez avoir limpression de
faire du travail la chane en dupliquant un patron ; cela ne colle pas au
ct flatteur du travail artisanal : faonnage, originalit et minutie. Certes, il
y a un grand choix de templates, mais on se rend vite compte que la plupart
se ressemblent beaucoup. Pourquoi ? Car ils se basent sur des frameworks
communs (voir les explications plus loin ce sujet).
Pour conclure, acheter et modifier un thme doit rester une solution
exceptionnelle. En termes de rentabilit, cest assez sduisant, mais si on en
abuse, on risque de perdre toute valeur ajoute ainsi quen savoir-faire.

9.3 LES FRAMEWORKS CSS


Pour avoir autant de renouvellement de thmes 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 181

En rsum, 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), llment 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 :

Figure 9.1 Colonnes Bootstrap sur grand cran

Suivant le nom de la classe CSS, les colonnes vont prendre le nombre de


colonnes adquat. Un framework CSS gre bien entendu le ct responsive.
Voici le mme exemple avec une largeur de fentre plus petite :

Figure 9.2 Colonnes Bootrstrap sur mobile

On remarque que les colonnes sont replaces par des lignes.


182 Chapitre 9. tude de cas : acheter et modifier un Template HTML/CSS...

Pour conclure, les frameworks CSS (associ au framework javascript


comme jQuery) font gagner un temps prcieux et cest un vritable plaisir
davancer rapidement. Par contre, on est restreint un cadre et il est difficile
den sortir : do un certain manque de crativit !
Il y a galement un danger invisible dans le temps : force dutiliser
uniquement des frameworks, on risque de trop shabituer 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 nest souvent
plus le cas. Le jour o un framework nest plus maintenu par son auteur, on
risque de perdre beaucoup.
titre personnel, jen utilise que trs peu (sauf jQuery, car je ne suis pas
dveloppeur). Je touche plusieurs domaines diffrents mais nanmoins lis
(graphisme, illustration, web...). Je prfre alors coder la main ma partie
web pour ne pas tre esclave dune technologie et apprendre constamment :
cest plus contraignant mais cest une valeur sre et prenne de ne pas
oublier !

9.4 MTHODOLOGIE : MODIFIER UN TEMPLATE


HTML/CSS
Vous venez de trouver un template HTML/CSS/JS qui vous plat normment
et vous voulez en crer un thme WordPress ? Nous allons en voir comment !
Chaque projet est diffrent, il ny a pas de marche suivre ultime.
Nanmoins, le processus est souvent le mme dans les grandes lignes avec
des variantes propres chacun.

Le template Prologue de HTML5UP.NET


HTML5UP.NET est un petit site qui regroupe une vingtaine de template
HTML/CSS de belle qualit. Ils sont gratuits sous licence Creative Commons
Attribution 3.0 License : on peut donc les utiliser et les modifier pour des
projets personnels et professionnels condition de faire mention de lauteur.
Ce qui est bien le minimum !
Notre template Prologue est tlchargeable sur le site de lditeur ou
sur le site de lauteur : html5up.net/prologue. Chose rare pour un template
gratuit, aucune trace dun framework CSS ou de liens de pub cachs. Cest
apprciable !
Remarque : avant de lire la suite, il est conseill de visualiser le template
pour mieux comprendre les problmatiques.
9.4 Mthodologie : Modifier un Template HTML/CSS 183

Figure 9.3 Le thme HTML Prologue

Aprs tlchargement et dcompression de larchive, on prend connais-


sance de trois dossiers (images, js, css) et du fichier index.html . Cest un
site One Page signifiant que tout le site se trouve sur une seule et mme
page dfilant grce au menu. Cest une structure un peu spciale car il ny
a aucune arborescence. Tout se trouve sur la page daccueil !

Figure 9.4 Les fichiers sources du template HTML/CSS Prologue

Le code est propre et sans surprise : que du bonheur ! Nous allons


maintenant passer sa WordPressification .

Cration du dossier et des fichiers de thme


Dans le dossier wp-content/thmes de WordPress, crez un dossier
portant le nom du nouveau thme.
lintrieur de celui-ci, importez directement les trois dossiers et le
fichier index.html du template Prologue .
Utilisez un fichier style.css dun autre template en modifiant les
informations commentes dans le haut du fichier et en supprimant tout
le reste.
Crez limage screenshot.png au format adquat pour faciliter votre
choix dans linterface dadministration.
184 Chapitre 9. tude de cas : acheter et modifier un Template HTML/CSS...

Renommez index.html en index.php . Activez le thme dans le


back-office. Tous les liens relatifs lintgration statique sont rompus
(lien des feuilles de styles, script, image etc.). Il est possible de les
rendre dynamiques grce la fonction bloginfo() de WordPress.
Dans len-tte, nous rajoutons la fonction wp_head() et dans le bas de
page, la fonction wp_footer() afin de permettre aux plugins dinsrer
leur propre code.

Le thme saffiche maintenant parfaitement, mais il est toujours aussi


statique. Nous allons le rendre dynamique !

Quel angle dattaque adopter ?


Comme prcis plus haut, nous avons faire un template One Page
o tout se trouve sur une mme page. Toute forme darborescence nexiste
alors pas : la navigation se faisant uniquement par des liens avec des ancres
internes.
La logique de la hirarchie de fichiers de WordPress peut alors se
limiter uniquement lindex.php. Plusieurs solutions soffrent nous pour
pouvoir afficher / grer les quatre rubriques du thme (Intro, Portfolio, About
me et contact).
Solution 1 : la plus simple
Tout le site est gal une seule et unique page dans WordPress.
Dans linterface ddition de celle-ci, on insre le contenu du template
(image, titre, texte...) puis grce la partie html de lditeur, 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 lon
fait : un utilisateur lambda risque de modifier des informations au mauvais
endroit et de rendre le site non fonctionnel.
Solution 2 : lindex, ses boucles et les pages
Le fichier index.php serait compos de quatre boucles personnalises.
Les quatre rubriques du thme (Intro, Portfolio, About me et contact) auraient
chacune sa propre page statique dans WordPress. Nous placerons alors
quatre query_posts() (boucles personnalises) dans les balises html section
adquate. Chacune des boucles affichera une page prcise en indiquant
comme paramtre lidentifiant de la page.
Solution 3 : pourquoi un thme WordPress ?
Cest une question quon pourrait se poser. Sans un norme travail de
dveloppement, il est impossible un utilisateur lambda de pouvoir ajouter
9.4 Mthodologie : Modifier un Template HTML/CSS 185

Figure 9.5 Une boucle personnalise pour chaque


page dans index.php

la vole de nouvelles rubriques du fait de la disposition originale du one


Page . Mais livrer un site dont le contenu est modifiable, aussi petit soit-il,
cest toujours mieux !
WordPress est un gestionnaire de contenu : il ne soccupe pas de gnrer
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 grce
la fonction bloginfo(), de mme pour le slogan du site Hyperspace
Engineer . Nous aurions galement pu crer deux zones de widgets pour
utiliser de simple widget texte.
Les icones des rseaux sociaux resteront en dur dans le template. Ces
informations ne changeront pas dans le temps, inutile de rinventer la roue,
au risque dajouter un temps de chargement la page (si on utilise un plugin
ou des fonctions php...)
Pour la cration dun menu, se reporter ce qui suit.
186 Chapitre 9. tude de cas : acheter et modifier un Template HTML/CSS...

Figure 9.6 La sidebar

Le menu
Nous crons une zone de menu en lajoutant dabord dans le fichier
functions.php de notre thme puis ouvrons index.php pour placer cette zone.
Mais attention, dans le back-office, il ne faut surtout pas faire de simple
lien vers les quatre pages statiques que nous avons cres avec la solution 2.
Nous perdrions leffet One Page car en cliquant sur une page, nous
afficherons une page seule, or nous voulons faire dfiler une mme page
vers une section prcise (remplie par cette page).
Il faut alors faire des liens personnaliss qui pointent directement vers les
ancres de chaque partie.
Autre point critique : il faut adapter le code de la fonction wp_nav_menu().
Le code HTML du menu du template diffre de celui qui est cr par la
fonction WordPress.
9.4 Mthodologie : Modifier un Template HTML/CSS 187

Figure 9.7 Des liens pointant vers des ancres en guise de navigation

Voici le code du template Prologue :

<ul>
<li>
<a class="skel-panels-ignoreHref active" href="#top">
<span class="fa fa-home">Intro</span>
</a>
</li>
</ul>

Voici le code par dfaut de la fonction wp_nav_menu().

<ul>
<li id="..." class="... ">
<a href="#">Portfolio</a>
</li>
</ul>

Grce au codex, il est possible de modifier le code de sortie de la fonction


wp_nav_menu() en modifiant le fichier functions.php. Nous pouvons alors
rajouter une balise span lintrieur du lien. Voici quoi nous arrivons :

<ul>
<li id=".." class="..">
<a href="#"><span>Portfolio</span></a>
</li>
</ul>
188 Chapitre 9. tude de cas : acheter et modifier un Template HTML/CSS...

Il faudra modifier lgrement la feuille de style CSS pour modifier la


faon de pointer les lments. WordPress ne nous permet pas dajouter
une class personnalise llment span . Par contre, depuis linterface
dadministration des menus, nous pouvons ajouter notre propre classe CSS
au parent du lien (ici <li>).

Figure 9.8 Ajouter une classe CSS personnalise une rubrique

Conclusion
Voil pour les grandes lignes : le thme Prologue HTML/CSS est mainte-
nant devenu un thme WordPress !

9.5 MTHODOLOGIE : MODIFIER UN TEMPLATE


WORDPRESS EXISTANT
Vous venez de trouver un template WordPress complet qui vous plat ? Vous
voulez avoir une feuille de route pour procder des modifications ? Voici
quelques conseils.
Chaque projet est diffrent et il ny a pas de marche suivre ultime.
Nanmoins, le processus est souvent le mme dans les grandes lignes avec
des variantes propres chacun.

Conseils
Choisissez bien votre template en nhsitant pas regarder le code
source sur le site de dmonstration du template.
Vrifiez la prsence dun framework CSS ou non suivant votre got.
Lisez la notice dutilisation.
Il est conseill dinstaller le thme avec le contenu de dmo pour
faciliter sa prise en main.
9.5 Mthodologie : Modifier un Template WordPress existant 189

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 thme,
prenez le temps de comprendre le fonctionnement de celui-ci. Chaque
template est luvre dun auteur diffrent : ils ne sont pas tous pareils.
Utilisez un thme enfant pour modifier un thme existant. Le jour o
vous installez une mise jour de votre thme, vos modifications seront
crases et donc perdues.
Usez de firebug (ou un quivalent) pour trouver rapidement les rgles
CSS ou les balises HTML modifier.
Ne modifiez jamais les feuilles de style dun framework CSS. Ajoutez
simplement vos rgles CSS la suite de la dernire feuille CSS appele
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 prcise.

Conclusion
Modifier un template existant ncessite autant de connaissance que pour la
cration dun template entier, voire plus si on veut le revoir en profondeur.
Il faut sadapter aux technologies utilises (framework...) et rapidement
comprendre le principe global pour pouvoir agir au bon endroit.
Gardez toujours lesprit (comme pour la cration dun thme) que
chaque modification doit aller dans le sens de lutilisateur profane. Par
exemple : Le design de ce titre h3 dans les actualits ne vous convient pas ?
Agissez sur les balises H3 en ciblant ses parents et non en lui assignant une
classe directement. Si ce nest pas le cas, lutilisateur devra lui-mme ajouter
cette classe la main dans lditeur html de WordPress. Chose impensable.
Mieux vaut prvoir une rgle CSS stipulant que tous les titres H3 se trouvant
dans les div actualits vont safficher de telle manire.
QUATRIME PARTIE

WordPress
ct coulisses
10
WordPress
et le multisites

10.1 PRSENTATION

Le multisite est une fonctionnalit relativement mconnue de WordPress. Elle


peut pourtant savrer intressante.
Il existait une version spciale et ddie de WordPress permettant de
grer le multisite : WordPress MU (ou multiutilisateurs). Le principe est de
concentrer plusieurs sites web possdant chacun leur administration mais
sur une seule installation. Ces sites font alors parti dun mme rseau et
partagent la mme installation, mais attention, ce sont des sites spars et
indpendant les uns des autres.
Qui dit son propre site dit son propre contenu, son propre thme, ses
propres plugins, etc. En dautres termes, un autre site WordPress complet ! Il
suffit dune seule mise jour sur linstallation mre pour mettre jour tous
ses sites enfants et une seule sauvegarde suffit pour tous les sites.
WordPress incorpore cette fonctionnalit nativement, mais il faut lactiver.
Le multisite est conseill pour : des rseaux de blog, un intranet, crer
son propre rseau social et pourquoi pas pour des sites multilingues.
194 Chapitre 10. WordPress et le multisites

10.2 ACTIVATION DE LOPTION 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 dajouter 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 lajout dune section Rseau dans longlet Outils
(figure 10.1).

Figure 10.1 Section Rseau

2. Cration du sous-rseau
Aprs avoir cliqu sur la sous-partie Cration du Rseau et
renseign les diffrents champs relatifs votre rseau, une page
souvre nous invitant suivre 2 tapes (figure 10.2).
Copiez coller les deux codes fournis aux deux endroits indiqus.
3. Reconnexion et Fin !
Il est ncessaire de se reconnecter lespace dadministration. Un
nouveau signet, nomm Mes Sites a fait son apparition dans le
coin suprieur gauche (figure 10.3), ainsi quune nouvelle rubrique
dans la barre latrale. Vous tes maintenant un Super Administrateur !

Remarque importante On peut vite se perdre. Il y a maintenant deux types


de tableaux de bords : celui du site pre et celui du rseau.

10.3 LINTERFACE DADMINISTRATION DU RSEAU


Le compte Super Admin permet de grer le site principal, mais surtout
lensemble de son rseau des (sous-) sites (figure 10.4).
10.3 Linterface dadministration du rseau 195

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 crer un nouveau site et un nouvel
utilisateur.
La rubrique Sites
Cette rubrique permet de lister tous les sites des utilisateurs.

Note En plus dtre automatiquement ajout la liste des sites, le sous-site


sera galement ajout la liste des utilisateurs.

En survolant avec la souris le nom dun site, un sous-menu apparat.


Il permet notamment de modifier le site, mais galement de se connecter
automatiquement son back-office (figure 10.7).
La rubrique Tableau de Bord
Dans ses sous rubriques, il est facilement possible de mettre jour tout
ce qui concerne le rseau (extensions, thmes, traductions, WordPress,
etc.)
La rubrique Utilisateurs
Cette rubrique liste tous les utilisateurs qui possdent leur propre site
ainsi que les utilisateurs du site principal. Le super Administrateur peut
aussi diter les informations de chaque utilisateur.
196 Chapitre 10. WordPress et le multisites

Figure 10.3 Les deux Tableaux de bord. On peut vite sy perdre !

Figure 10.4 Le compte Super Admin


10.3 Linterface dadministration du rseau 197

Figure 10.5 Rubrique tableau de bord Super Admin

Figure 10.6 Listing des sites

La rubrique Thmes
Cest cet endroit quil est possible dactiver (ou non) les diffrents
thmes disponibles pour ce rseau de sous-sites. Cest lutilisateur
final que reviendra le choix de ses thmes activs dans son espace
dadministration propre.
Les thmes utiliss sont les mmes que ceux du site principal. Aucune
modification de leur code source nest ncessaire.
La rubrique Extensions
Cette rubrique permet de grer les diffrentes extensions que les sous-
sites pourront utiliser.
198 Chapitre 10. WordPress et le multisites

La rubrique Rglages
Elle permet de rgler les paramtres du rseau.

Figure 10.7 dition dun site : accs rapide diverses parties

10.4 MARCHE SUIVRE POUR CRER UN SOUS-SITE


Dans linterface dadministration du rseau :
On cre un sous-site que lon peut par exemple appeler Mon Site
Enfant en se rendant dans la sous-section Ajouter de longlet Sites.

Ladministrateur du nouveau site va recevoir ses codes daccs et il


pourra sy connecter.

10.5 CHOIX DE LA FAON DINSTALLER LES


SOUS-SITES
Il est possible de choisir la faon dont on atteint les sous-sites par rapport
au site pre. Soit en sous-domaine mon-sous-site.mon-site.com ou en
sous-dossier mon-site.com/mon-sous-site .
10.5 Choix de la faon dinstaller les sous-sites 199

Figure 10.8 Cration du site Mon Site Enfant

Pour changer dinstallation, ouvrez le fichier wp-config.php et reprez


cette ligne :
define( SUBDOMAIN_INSTALL, true );
false : correspond la faon de nommer par sous-dossier mon-
site.com/mon-sous-site .
true : correspond la faon de nommer par sous-domaine mon-sous-
site.mon-site.com .

Remarque Certains serveurs supportent mal les sous-domaines. Comme pour


les permaliens, vrifiez bien que le mode mod_rewrite module est activ (il
est rare que ce ne soit pas le cas).
11
Maintenance

11.1 SAUVEGARDER WORDPRESS


Introduction
Comme vous lavez remarqu lors de son installation, WordPress fonctionne
avec une base de donnes. En plus de sauvegarder tous les fichiers de
WordPress, il est galement ncessaire de sauvegarder cette base de donnes
(figure 11.1).

Figure 11.1 Fichiers et base de donnes : lments pour sauvegarder WordPress


202 Chapitre 11. Maintenance

Sauvegarder les fichiers


Pourquoi ?
Les fichiers contiennent notamment toutes les images que vous avez tl-
charges, tous vos mdias, tous les plugins que vous avez installs, tous vos
thmes, votre fichier de configuration, etc. Il est donc trs important de tout
sauvegarder.

Comment faire ?
Il suffit simplement de sauvegarder (transfrer sur votre ordinateur) tous les
fichiers (ou le dossier) qui concernent WordPress. Ces fichiers sont les mmes
que ceux qui ont t uploads par FTP.

Sauvegarder la base de donnes


Pourquoi ?
La base de donnes SQL contient votre site (articles, pages, liens vers les
images), les utilisateurs, leur mot de passe, la liste des plugins activs,
les rglages, les options, les commentaires, etc. Une sauvegarde est donc
ncessaire.

Comment faire ?
Rendez-vous dans linterface de phpMyAdmin qui permet de grer la base
de donnes de votre hbergement. Il ny a pas dinquitude avoir, aucune
connaissance en SQL nest requise.
Si vous possdez plusieurs bases de donnes, choisissez celle dans
laquelle WordPress est install, dans le menu de gauche. Lorsque vous
vous trouverez lintrieur de celle-ci, vous pourrez apercevoir son contenu
(figure 11.2).
Note Un WordPress frachement install, dispose de 11 tables de donnes.
Cependant, plus vous installez de plugins, plus vous aurez de chance de retrouver
un nombre plus levs de tables de donnes.

Cliquez ensuite sur longlet Exporter (figure 11.3). Puis, en bas de


page, choisissez votre format et cliquez sur Excuter .
Une fentre apparat alors vous demandant denregistrer cette archive
(figure 11.4). Conservez-la prcieusement : cest toute votre base de don-
nes !
Cest termin. Votre base de donnes et vos fichiers sont maintenant
sauvegards.
11.1 Sauvegarder WordPress 203

Figure 11.2 Contenu de la base de donnes de WordPress aprs son installation

Figure 11.3 Longlet Exporter


204 Chapitre 11. Maintenance

Figure 11.4 Exportation de la base de donnes

Cas spcifique : les options de thme


Quest-ce que cest ?
Dans une grande majorit des templates achets sur Internet, la plupart pos-
sdent une rubrique Themes Options dans le back-office de WordPress.
Comme son nom lindique, cest lendroit permettant de grer et configu-
rer les options du thme en question (la couleur principale, la police utilise,
les options daffichage, etc.).
Il existe diffrents plugins qui permettent de mettre en place cette
fonctionnalit (OptionTree tant un des plus connus).

Comment les sauvegarder et les restaurer ?


En sauvegardant la totalit de la base de donnes ainsi que les fichiers, il
y a de grandes chances que ces options de thme ne soient pas incluses. Il
faut donc exporter ces donnes ! Par chance tout est prvu dans la majorit
de ces plugins : il y a une rubrique import / Export qui permet dexporter
ces fameux paramtres.
Il en rsultera un fichier xml que vous pourrez importer (ou sauvegarder)
dans la nouvelle adresse du site.
11.1 Sauvegarder WordPress 205

Figure 11.5 Exemple de la rubrique Theme Options

Figure 11.6 Interface de gestion de lexport et de limport des options du thme


206 Chapitre 11. Maintenance

11.2 METTRE JOUR WORDPRESS


Avertissement
Avant chaque mise jour, pensez faire une sauvegarde de votre base de
donnes et des fichiers WordPress.
Personne nest labri dune mise jour qui se passe mal. Si le cas devait
se prsenter, les sauvegardes que vous aurez effectues vous permettront de
revenir la version prcdente.
Vrifiez que votre hbergement possde bien toutes les caractristiques
requises pour pouvoir accueillir la nouvelle version de WordPress (PHP,
MySQL).
Enfin, dsactivez tous vos plugins.

Mise jour manuelle


Le but dune mise jour est de remplacer les anciens fichiers de WordPress
par les nouveaux. Mais attention, certains fichiers ne doivent surtout pas tre
remplacs. Leur remplacement impliquerait en effet un risque important de
perte de donnes essentielles (images, templates, plugins). Voici la feuille de
route :
1. Obtention de la dernire version de WordPress
http://fr.wordpress.org/ (version franaise)
http://wordpress.org/download/ (version anglaise)
2. Dcompression de larchive
Un simple clic droit est ncessaire pour extraire larchive (.zip)
contenant les fichiers de WordPress.
3. Remplacement des anciens fichiers
Voici ltape la plus importante : il sagit ici de remplacer les anciens
fichiers par les nouveaux. Vous devez tout remplacer, SAUF les
lments suivants :
le dossier wp-content/plugins ;
le dossier wp-content/themes ;
le fichier wp-config.php (normalement ce fichier ne figure
pas dans la dernire version tlcharge, car il est cr aprs
linstallation de WordPress).
4. Lancement de la mise jour
Visitez la partie dadministration de votre site. Si une mise jour de la
base de donnes est ncessaire, WordPress le fera automatiquement
11.2 Mettre jour WordPress 207

pour vous. Il vous en informera et vous devrez alors cliquer sur un


bouton (figures 11.7 et 11.8).

Figure 11.7 Notification de mise jour de la base de donnes

Figure 11.8 Notification de fin de mise jour de la base de donnes

5. Vrification et fin
En bas de page de ladministration, vrifiez que vous utilisez bien la
dernire version (figure 11.9).

Figure 11.9 Nous disposons bien de la dernire version !

Si cest bien le cas, il est dsormais temps de ractiver vos plugins !

Mise jour automatique


Attention, chez certains hbergeurs cette solution ne fonctionne pas, mais
ils sont plutt rares. Voici la marche suivre. Il suffit simplement de cliquer
208 Chapitre 11. Maintenance

sur la section Mises jour du signet Tableau de bord de la barre


dadministration latrale, puis de cliquer sur le bouton Mettre jour
automatiquement (figure 11.10).

Figure 11.10 Tableau de bord Mise jour de WordPress

WordPress tlchargera, dcompressera et installera alors la dernire


version trs rapidement.
Cest termin ! Aprs avoir cliqu sur le lien Aller sur le tableau de
bord , pensez vrifier que vous utilisez bien la dernire version.

Remarque Depuis la version 3.7 les mises jour mineures se feront auto-
matiquement. Par exemple, les versions 3.7.1, 3.7.2 et ainsi de suite seront
installes sans que lutilisateur ait soccuper lui-mme de la procdure. Ces
versions dentretien servent souvent diffuser des correctifs quand des failles
sont repres dans le code. Notez que cette mise jour automatise est bien
spcifique aux versions mineures. Ainsi, lorsque sortira une version majeure
(comme 3.9 ou 4.0), lutilisateur devra toujours sen charger lui-mme.
11.3 Dmnager WordPress 209

11.3 DMNAGER WORDPRESS


WordPress et son URL
WordPress se construit entirement (base de donnes, liens, images) partir
de lURL qui lui a t indique dans les options gnrales de lespace
dadministration (figure 11.11). Elle est donc trs importante.

Figure 11.11 Options gnrales de WordPress

Cette URL est stocke dans la base de donnes. Il faudra donc la modifier
en cas de changement de nom de domaine.

WordPress et son fichier wp-config.php


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 donnes.
Ces informations sont :
le nom de la base de donnes ;
le prfixe de la table ;
lutilisateur de la base de donnes ;
le mot de passe de la base de donnes ;
ladresse de la base de donnes.

Souvenez-vous : il sagit en fait des informations que WordPress avait


demandes lors de son installation. Elles taient ncessaires pour la cration
du fichier wp-config.php .
210 Chapitre 11. Maintenance

En cas de changement dhbergeur (et donc de base de donnes), ces


informations devront tre modifies.

Dplacer un site WordPress entier


Votre site WordPress doit tre dmnag vers un nouvel hbergeur et il
soctroie un nouveau nom de domaine.
Voici la marche suivre pour russir son dmnagement :
1. Rapatriement de tous les fichiers WordPress en local
Comme pour la sauvegarde des fichiers, il est ncessaire de transfrer
tous les dossiers de WordPress sur votre disque dur, grce un logiciel
FTP.
2. Modification du fichier wp-config.php
Parmi les fichiers que vous venez de tlcharger, le fichier wp-
config.php doit tre dit. En effet, une nouvelle base de donnes
vous attend sur le nouvel hbergement.
Munissez-vous des renseignements ncessaires concernant la nouvelle
base de donnes ( voir chez votre hbergeur), puis ditez le fichier :

/** Le nom de la base de donnes */


define(DB_NAME, bibi-db);

/** Le nom dutilisateur de la base de donnes */


define(DB_USER, utilisateur);

/** Mot de passe de la base de donnes */


define(DB_PASSWORD, m0t-de-passe);

/** Localisation de la base de donnes */


define(DB_HOST, adresse-de-la-base);

/** Prfixe des tables de la base de donnes de lancien site */


$table_prefix = wp_tables_ancien_site;

3. Exporter la base de donnes


Voir pour cela la partie Sauvegarder sa base de donnes de ce
chapitre. Veillez bien conserver cette archive dexport.
4. Changement de lURL dans lexport de la base de donnes
Lancienne 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 grce
NotePad++. Aprs avoir dcompact larchive de lexport, vous
obtiendrez un fichier sql que vous ouvrirez alors dans NotePad++.
11.3 Dmnager WordPress 211

Pour pouvoir remplacer lancienne URL par la nouvelle, vous pou-


vez utiliser la fonction Rechercher/Remplacer (figure 11.12). Le
raccourci clavier CTRL+F permet louverture dune fentre contenant
plusieurs onglets. Choisissez longlet Remplacer .

Figure 11.12 La fonction Rechercher/Remplacer dans NotePad++

Remplissez le champ Recherche avec lURL de lancien site et le


champ Remplacer par avec la nouvelle URL.
Pour finir, cliquez sur le bouton Remplacer tout . Une deuxime
fentre apparat alors montrant le nombre doccurrences remplaces.
Cest termin ! Lancienne URL a disparu du fichier.
5. Uploader les fichiers WordPress vers le nouveau site
Cest le moment duploader les fichiers locaux (avec le nouveau fichier
wp-config.php) vers son nouvel hbergement, grce un logiciel
FTP.
6. Importer la base de donnes
La dernire tape consiste importer la base de donnes. Pour
cela, rendez-vous dans lespace dadministration de votre base de
donnes chez votre hbergeur. Dans cet espace dadministration
MySQL (phpMyAdmin par exemple), choisissez la base de donnes
adquate (sil y en a plusieurs), et cliquez sur longlet Importer
(figure 11.13).
Cliquez sur Parcourir et allez chercher le fichier SQL cr aupara-
vant. Puis, cliquez sur le bouton Excuter situ en bas droite. Un
message confirmera alors la bonne excution de limportation.
Vous remarquerez que toutes vos tables sont prsentes dans la
colonne de gauche.
212 Chapitre 11. Maintenance

Figure 11.13 Longlet Importer

Remarque Par dfaut, lexport SQL de la base de donnes recre une base de
donnes. Nhsitez pas supprimer cette ligne dans lexport SQL si vous navez
pas les droits (un message derreur vous prviendra).

7. Cest termin !
En vous rendant sur le nouveau site, vous verrez que votre site
WordPress est dsormais en place : le dmnagement sest donc
parfaitement droul ! (Noubliez pas ltape concernant les options
de thme dcrite plus haut si vous utilisez un template pr-fait).

Supprimer son site WordPress


1. Suppression des fichiers WordPress
Supprimez la totalit des fichiers WordPress.
2. Nettoyer la base de donnes
Bien que les fichiers nexistent plus, la base de donnes, elle, contient
encore les tables de WordPress. Pour la nettoyer, il faut se rendre dans
lespace dadministration de la base de donnes (phpMyAdmin) et
supprimer les tables de WordPress.
11.4 Garder WordPress en bonne sant 213

11.4 GARDER WORDPRESS EN BONNE SANT

Scuriser et amliorer WordPress


WordPress (comme beaucoup dautres CMS) peut tre la cible dattaques
malveillantes ayant pour rsultats des consquences plus ou moins graves.
Voici quelques plugins qui pourront vous prmunir de ces attaques. Bien
entendu, ils ne vous dispensent pas de toujours bien veiller au respect des
rgles de base (mises jour WordPress, utilisation de mots de passe difficiles
trouver, protection des accs FTP, etc.) :
WP Security Audit Log
Permet de surveiller toutes les connections au back-office de Word-
Press. Trs utile pour vrifier les ventuelles tentatives de piratage :
https://wordpress.org/plugins/wp-security-audit-log/
Du mme type, il existe aussi le plugin Login LockDown .
Secure WordPress
Supprime tous les lments qui peuvent tre utiles un hacker (version,
requtes malicieuses, message derreur...) :
http://wordpress.org/extend/plugins/secure-wordpress/.
WP Rocket
Plugin franais. Lorsque vous construisez votre site avec WordPress et
que celui-ci commence tre fourni ou trs visit, ou que vous achetez
un thme pro sans trop le connatre, vous pouvez rapidement tomber
sur certaines longueurs lors du chargement de pages (trop de requtes,
Serveur un peu faible, trop dimages...)
http://wp-rocket.me/
UpdraftPlus
Le plugin ultime pour sauver votre site en un clic : images uploades,
thmes et base de donnes. Attention, les fichiers dinstallation de
WordPress ne sont pas compris. En cas dattaque, la meilleure mthode
consiste restaurer le site. https://wordpress.org/plugins/updraftplus/
Protger le fichier wp-config.php
Ce fichier, cr au moment de linstallation, contient des informations
essentielles : le nom de votre base de donnes, vos identifiants,
etc. Mme crypts, ces lments restent sensibles. Grce au fichier
.htaccess se trouvant la racine de votre WordPress, il est possible
dy interdire laccs en insrant ce code :

<FilesMatch wp-config.php$>deny from all</FilesMatch>


214 Chapitre 11. Maintenance

Webmaster Google tools


Ce service de Google (figure 11.14) est ddi aux personnes propritaires
dun ou plusieurs sites. Il se rvle trs pratique pour optimiser le rf-
rencement du site, analyser des statistiques ou encore pour forcer Google
rexaminer votre site en cas dattaque ou de virus sur votre site. Pour
pouvoir utiliser ce service, vous devez disposer dun compte Google (cration
gratuite).

Figure 11.14 Outils Google pour les webmasters

11.5 RFRENCEMENT ET STATISTIQUES


Conseils et plugins
WordPress possde des qualits indniables pour le rfrencement naturel
vu quil respecte et ninterfre pas avec la qualit de votre intgration
HTML/CSS, mais rien ne vous empche de lamliorer en suivant ces
quelques rgles :
Activer vos permaliens
Les permaliens sont importants, ils permettent une meilleure lisibilit
des URL.
Du contenu de qualit
Utilisez des titres prcis, dcrivez vos images (attribut alt ), utilisez la
smantique (titre h1, h2, h3, paragraphe, liste...).
Des changes de liens
changez des liens avec dautres sites est primordial. Noubliez cepen-
dant pas dchanger des liens de qualit vers des sites de confiance.
11.5 Rfrencement et statistiques 215

Mettre jour votre sitemap


Google aime les sitemaps, qui sont de vritables cartes didentit
du contenu de votre site. Il est donc important de le mettre jour
rgulirement. Heureusement des plugins existent pour cela (par
exemple Google XML Sitemaps :
http://wordpress.org/plugins/google-sitemap-generator/)
Choisir ou non WWW dans son nom de domaine
vous de choisir si vous souhaitez garder le www. dans lURL de
votre site. Puis tenez-vous ce choix prcis. Dans le cas contraire,
Google risquerait de prendre ces deux adresses (avec www et sans)
pour du contenu dupliqu, ce qui peut tre trs nuisible au bon
rfrencement.
Ce rglage seffectue dans les options gnrales de WordPress et dans
le fichier .htaccess .
Si vous souhaitez afficher les www , voici le code adquat :

RewriteEngine On
RewriteCond %{HTTP_HOST} !www\.simon-k\.com [NC]
RewriteRule (.*) http://www.simon-k.com/$1 [QSA,R=301,L]

Des thmes de qualit


Utilisez toujours des templates de qualit. Entendez surtout par l des
thmes respectant les standards HTML / CSS / JS en limitant le nombre
de requtes serveur PHP au minimum.
Un plugin pour le rfrencement
Le plugin All in one SEO Pack vous permettra de grer en pro-
fondeur tous les paramtres pour optimiser votre rfrencement
(http://wordpress.org/extend/plugins/all-in-one-seo-pack/).

Google Analytics
Google Analytics est un outil pouss qui permet de visualiser en dtail les
statistiques de frquentation dun ou plusieurs sites Internet (figure 11.15).
Cet outil gratuit est propos par Google. Pour pouvoir lutiliser, il faut
possder un compte Google. Si ce nest pas le cas, vous pouvez le crer
gratuitement et rapidement sur google.com.

Cration dun compte Google Analytics


Lorsque vous tes connects dans Google Analytics, il est tout dabord
ncessaire de crer un compte. Un compte reprsente en fait un site Internet
qui va tre surveill .
216 Chapitre 11. Maintenance

Figure 11.15 Interface de Google Analytics

Lorsque ce compte est cr, Google Analytics vous demande dinsrer


un bout de code JavaScript dans le code source de votre site.
Voil quoi ressemble ce code :

<script type="text/javascript">

var _gaq = _gaq || [];


_gaq.push([_setAccount, UA-4242221-5]);
_gaq.push([_trackPageview]);

(function() {
var ga = document.createElement(script); ga.type = text/javascript;
ga.async = true;
ga.src = (https: == document.location.protocol ? https://ssl :
http://www) + .google-analytics.com/ga.js;
var s = document.getElementsByTagName(script)[0];
s.parentNode.insertBefore(ga, s);
})();

</script>
11.5 Rfrencement et statistiques 217

Insertion dans le template


Copiez le bout de code gnr par Google Analytics, puis insrez-le dans le
fichier footer.php de votre thme, avant la balise </body>. Cest aussi
simple que cela.

Figure 11.16 Espace dadministration

Sachez quil existe des plugins pouvant soccuper eux-mmes de linser-


tion du code dans le template. Notamment :
Google-analyticator : http://wordpress.org/extend/plugins/google-
analyticator/.

Utilisation de Google Analytics


De retour dans lespace dadministration de Google Analytics (figure 11.16),
vrifiez bien que ltat est valid, ce qui prouve que le code insr prc-
demment a bien t repr. La liaison est dsormais tablie.
Enfin, cliquez sur le lien Afficher le rapport pour voir apparatre les
statistiques de frquentation du site. Il est possible cet endroit de connatre
la provenance gographique des visiteurs ou les sources du trafic, de savoir
quelles pages ont t visites, etc. (figure 11.17).
218 Chapitre 11. Maintenance

Figure 11.17 Vue des frquentations dun site Internet dans Google Analytics
12
WordPress
ct nomade

12.1 GRER SON WORDPRESS NIMPORTE O


Vous tes un ou une aventurire ? Vous ne pouvez pas rester en place ? Ou
vous navez tout simplement pas le courage dallumer votre ordinateur pour
grer votre WordPress ? Pas dinquitude, votre site WordPress va vous suivre
partout !

Applications Wordpress : Apple & Android,


Pour mettre jour votre site partir de votre mobile, il est bien entendu
possible de passer par le navigateur Internet de votre smartphone pour vous
connecter votre back-office. Nous allons en parler dans la partie suivante.
Automattic, la socit cratrice de WordPress, dveloppe des applications
spcifiques pour pouvoir grer votre site partir de vos smartphones.
Les applications permettent un accs rapide et simplifi votre espace
dadministration.
Des modes demploi (vidos et textes) pour chaque application vous
attendent pour dbuter facilement. Rien de bien compliqu nanmoins :
aprs linstallation, il faut insrer vos identifiants et vous avez dsormais
accs votre back-office optimis pour smartphone.
220 Chapitre 12. WordPress ct nomade

Figure 12.1 WordPress pour iOS ou Android

Figure 12.2 WordPress pour Windows

Zoom sur lapplication Iphone


Voici un rapide mode demploi pour installer et utiliser lapplication officielle
de WordPress sur Iphone. Le fonctionnement est similaire avec les autres
plateformes.
12.1 Grer son WordPress nimporte o 221

tape 1 : installation
Rendez-vous dans lApp Store puis tlchargez et installez gratuitement
lapplication WordPress.

Figure 12.3 WordPress pour Android

tape 2 : lancement et paramtrage


Lancez lapplication, vous arriverez sur une page avec un formulaire
deux champs. Ces champs sont rservs si vous avez un site sur la plateforme
"WordPress.com" (figure 12.4). Nous possdons notre propre hbergement
donc nous allons cliquer sur Ajouter un site auto-hberg . Trois champs
remplir apparaissent (figure 12.5). Aprs connexion, notre site est accessible
(figure 12.6).
222 Chapitre 12. WordPress ct nomade

Figure 12.4 Champs qui apparaissent par dfaut

Figure 12.5 Champs ncessaires pour se


connecter notre site Auto hberg
12.1 Grer son WordPress nimporte o 223

Figure 12.6 Laccs notre site WordPress

tape 3 : dcouverte de lapplication


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 thme utilise des articles personnaliss (custom post type)
ou autres lments qui ne sont pas l par dfaut, il vous sera impossible de
les visionner sur lapplication ! De mme pour les options, elles ne sont pas
aussi compltes que la version en ligne (figure 12.8).
tape 4 : Publication dun article ou dune page
Vous arriverez sur une interface simplifie avec le renseignement dun
titre et du contenu. Chose intressante, il est possible de publier une photo
directement aprs lavoir prise (bouton en bas gauche), option qui nest
pas disponible sur la version en ligne.

Zoom sur le back-office mobile


Nous venons de voir les applications tlchargeables dans les diffrents
stores.
Voyons maintenant ce que donne linterface de WordPress si on navigue
directement dans le navigateur web de notre smartphone.
224 Chapitre 12. WordPress ct nomade

Figure 12.7 Laccs notre site WordPress

Figure 12.8 Les options disponibles


12.2 WordPress et le responsive web 225

Figure 12.9 Interface de publication

tape 1 : connexion
Rendez-vous dans la partie dadministration (exemple : monsite.com/wp-
admin) Figure 12.10.WP
tape 2 : Visualisation de linterface responsive
Que dcouvrons-nous ? Depuis la version 3.8, Wordpress soffre une
interface totalement responsive et optimise pour smartphone ! Dailleurs,
il y a une grande diffrence avec les versions mobiles : nous avons accs
tout puisque cest linterface que lon visite depuis toujours. Cest un vrai
bonheur : vous navez plus dexcuse !

12.2 WORDPRESS ET LE RESPONSIVE WEB

Avec lessor des smartphones, beaucoup de personnes dcouvrent les joies


de la navigation sur Internet, sans forcment tre derrire 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.
226 Chapitre 12. WordPress ct nomade

Figure 12.10 Interface de connexion

Figure 12.11 Tableau de bord de WordPress version mobile


12.2 WordPress et le responsive web 227

Figure 12.12 Toutes les fonctionnalits sont prsentes


228 Chapitre 12. WordPress ct nomade

Mais attention, adapter son site pour quil saffiche bien sur toutes les
plateformes nest pas une mince affaire : des ouvrages entiers sont consacrs
au responsive web design !
Dans cette partie, nous naborderons donc que les grandes lignes.

Le responsive web design : les grandes lignes


Grce aux feuilles de style CSS, nous allons pouvoir choisir les lments
afficher suivant le type de mdia utilis. Rappelez-vous la rgle dor :
sparation du contenu et de la forme.
Lorsque lon sait quun site va tre responsive, lintgration HTML / CSS
doit tre rflchie pour que chaque lment HTML puisse voluer aisment
entre un affichage desktop (grand cran) et un affichage de smartphone
(petit cran) : cest les CSS du template qui vont soccuper de laffichage
suivant les largeurs de la fentre.
Le principe est simple : il sagit dinsrer une ligne de code (dans la
balise <head> ou dans la feuille de style CSS) permettant de spcifier les
rgles CSS appliquer lorsque la page est affiche sur un smartphone.

Exemple en utilisant les media-queries (CSS3) :

@media only screen and (max-device-width:480px) {

/* Rgles CSS qui sappliquent pour des crans infrieurs 480px de


large */

Exemple en utilisant la balise <link> :

<link rel="stylesheet" type="text/css" href="style/style-mobile.css"


media="handheld" />

Voil pour le principe de base ! Par exemple, si le site saffiche sur


smartphone, nous supprimerons limage de fond, ainsi que la sidebar, nous
modifierons la taille du logo, la disposition du menu, la taille maximale des
images, etc.
Il faudrait galement ajouter dautres points de ruptures pour les tablettes
au format horizontal, puis au format vertical.
Mais il y a plusieurs faons de procder et le responsive web design est
une discipline part qui est maintenant incontournable : il faut sy intresser.
vous de sublimer vos feuilles CSS de votre thme WordPress !
12.2 WordPress et le responsive web 229

Adapter son WordPress pour les mobiles en deux minutes


Sans tre spcialiste du Web mobile, il est possible de rendre rapidement et
simplement son WordPress ami avec les mobiles, grce des plugins.
La plupart de ces plugins reposent sur un mme principe : ils dtectent le
visiteur mobile puis ils lui affectent un thme spcifique. Libre vous ensuite
de le modifier (ou den crer) pour personnaliser laffichage de votre site
pour les mobiles.
Voici une liste de plugins qui transformeront votre WordPress en mobile
friendly :
WordPress Mobile Pack :
http://wordpress.org/extend/plugins/wordpress-mobile-pack/
WPtouch 3 :
http://wordpress.org/plugins/wptouch/
Bibliographie

Jean-Pierre VINCENT, Jonathan VERRECCHIA, HTML5, De la page web


lapplication web, Dunod, 2012.
Bill SANDERS, HTML5 pour le webdesign, Dunod, 2012.
Jean-Marie COCHETEAU, Laurent KHOURI, Tout sur HTML5 et CSS3, Dunod,
2012.
Vincent OLIVEIRA (de), Cdric ESNAULT, CSS3, le design web moderne,
Dunod, 2012.
Rodolphe RIMELE avec la contribution de Raphal GOETTER, HTML5 : Une
rfrence pour le dveloppeur web, Eyrolles, 2013.
Raphal GOETTER, CSS avances : Vers HTML5 et CSS3, Eyrolles, 2011.
Raphal GOETTER, Sbastien BLONDEEL, CSS2 Pratique du design web,
Eyrolles, 2005.
Jason TSELENTIS, Design graphique pour crans, ordinateurs, tablettes,
smartphones, Dunod, 2013.
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 dernires nouveauts
de WordPress !

Les sites WordPress officiels


http://wordpress.org : le site officiel de WordPress.
http://codex.wordpress.org/ : le codex rassemble toute la documen-
tation technique disponible (notamment pour llaboration de votre
template).
https://developer.wordpress.org/reference/ : le nouveau codex
(en cours dlaboration). Aprs une recherche sur le codex, il est
possible quune infobulle vous propose de vous rendre sur le site
developer.wordpress.org.
http://wordpress.org/extend/plugins : cest un peu un WordPress
Store o vous trouverez normment de plugins (du coup galement
des widgets).
http://www.wordpress-fr.net : La communaut francophone autour du
CMS WordPress et son cosystme.

Les sites magazines gnralistes


Ces sites procurent des articles de qualit sur de nombreux sujets : webde-
sign, infographie, HTML, CSS, PHP, jQuery, WordPress, etc. Nhsitez pas
vous y rendre trs souvent !
http://www.smashingmagazine.com
http://sixrevisions.com
Webographie 233

http://www.noupe.com
http://www.instantshift.com
http://designrfix.com
http://www.creativejuiz.fr/blog/
http://wpchannel.com
http://www.webdesignerdepot.com
http://www.alsacreations.com
http://webdesignledger.com
http://www.wpbeginner.com
http://www.wptavern.com
www.catswhocode.com
http://themeforest.net/
http://www.rockettheme.com/
Glossaire

Le vocabulaire du Web
Le Web dispose de son vocabulaire propre. Si vous ny tes pas
encore habitu, ce petit mmo pourra vous aider.
Back office Espace dadministration dun site Internet, sa partie prive.
Background Fond/larrire-plan dun 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 dsigner du contenu (et pas
forcment un article comme un article de blog).
Codex Documentation officielle de WordPress.
http://codex.wordpress.org
Download Tlchargement dun document du Web vers votre disque dur.
Footer Bas de page dun site Internet.
Front office Partie publique dun site Internet visible par lensemble des
internautes.
Hack Ensemble dinstruction (code HTML + PHP + Template tag Word-
Press) pour aboutir un rsultat.
Header Terme anglais dsignant lentte dun site Internet.
Homepage Page daccueil dun site Internet ; cest la premire page qui
saffiche lorsquun internaute arrive sur un site Internet.
Infographiste Personne qui crer le design dun site Internet, dune
affiche, dun logo...
Loop Boucle.
Plugin Extension.
Glossaire 235

Racine La racine dun site Internet, cest le dossier qui contient lensemble
de votre site. Cest le dossier qui est le plus loign dans une
arborescence.
Screenshot Copie dcran.
Sidebar Barre latrale dun site internet.
Slug Identifiant. Cest la version normalise ( URL-friendly du nom dune
catgorie. Il ne contient gnralement que des lettres minuscules
non accentues, des chiffres et des traits dunions.
Template Thme dun site Internet (son apparence).
Template tag Marqueur de modles.
Upload Tlchargement dun document du disque dur de votre ordinateur
vers le Web.
Webdesigner Terme (un peu trop) gnraliste... Certains affirment
quun 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 ct graphique
du designer . Dautres personnes pensent quun webdesigner
crer le design dun site Internet, quil serait un infographiste
spcialis dans le Web. Bien entendu, personne nempche de
cumuler ces comptences...
Webmaster Personne qui gre et qui faire vivre un site Web.
Index

A D
accroche 144 date et heure 141
arrire-plan 75, 151 Dreamweaver CC 22
article 39
auteur dun article 142
avatar 71 E
effet lightbox 152
B en-ttes 125
extensions 77
back office 33
bibliothque des mdias 55
bloginfo() 136
blogs 128
F
boucle 137 Facebook 148
personnalise 159 fichier hosts 30
principale 146 fil dAriane 154
secondaire 144 FileZilla 20
WordPress 109 Firebug 123
Firefox 123
footer 127, 177
C footer.php 103, 105
catgorie 40, 45 formulaire de recherche 147
champs personnaliss 163 front office 32
child theme 168 FTP (File Transfer Protocol) 19
CMS 48 function reference 109
commentaires 67 functions.php 131, 155
compte
administrateur 57, 96
crer un nouveau 58 G
Super Admin 194
utilisateur 57 get_footer() 150
conditional tags 169 get_header() 150
contenus personnaliss 42 Google Analytics 215
custom post types 42 Gravatar 71
Index 237

H P
header 76, 126, 136, 176 page 41
header.php 103, 105 daccueil 158
homepage 158 dynamique 41
HTML/CSS 129 statique 41
page 404 150
panneau Attributs 47
I permaliens 91, 95
image 53 PHP 100, 110
index.php 102, 105, 131 plugin 77
intgration statique 172 Akismet 95
interface 42 plugin Akismet 77
profil 95

L
langue 86 Q
lien
query_posts() 111
hypertexte 50
lire la suite 50, 138
loop 109
R
M rfrencement 214
rglages des mdias 90
magazine 128 rseaux sociaux 148
MAMP 21
marqueurs conditionnels 169
mdias 96
menu de navigation 176
S
menu personnalis 59 screenshot.png 131, 133
modle de page 158 section Rseau 194
multi-sites 193 Secure WordPress 213
MySQL 21 serveur
Apache 19
distant 23
N local 20, 23
navigation interne 149 sidebar 176
news 143 smartphones 225
NotePad++ 22, 210 style.css 102, 131
Sublime Text 22

O
objet $post 116 T
objets PHP 115
One page layout 125 template 73
options AlsaWP 171
de discussion 90 WordPress 130
de lecture 89 template tags 107
de vie prive 91 TextPad 22
dcriture 88 texture 126
des permaliens 91 the_author_posts_link() 142, 143
outils 94 the_content() 138
238 Sites Web avec WordPress

the_date() 141 widget 81


the_excerpt() 139 WordPress 85
thme 73, 99, 123 base de donnes 201
enfant 168 cration de la base de donnes 24
the_time() 141 espace dadministration (back office) 33
Twitter 148 maintenance 201
typographie 127 mise jour 206
paramtrage 85
partie publique (front office) 32
V tableau de bord 33
vido 55 wp-config.php 209
Vimeo 55 WP-DBManager 213
Virtual Host 31 wp_list_categories() 140
wp_list_pages() 140
WP_Query() 117, 146
W
WAMP 21, 23 Y
Web Developer 124
Webmaster Google tools 214 Youtube 55