785326-Propulsez-Votre-Site-Avec-Wordpress - Copie PDF

Propulsez votre site
avec WordPress
Par Midnight Falcon
www.openclassrooms.com
Licence Creative Commons 6 2.0

Dernire mise jour le 11/03/2014
2/113
Sommaire
Sommaire ........................................................................................................................................... 2
Partager .............................................................................................................................................. 3
Propulsez votre site avec WordPress ................................................................................................ 5
Partie 1 : Prendre en main Wordpress ................................................................................................ 5
Dcouvrir WordPress ........................................................................................................................................................ 6
Prsentation ................................................................................................................................................................................................................ 6
Introduction .................................................................................................................................................................................................................. 6
Historique .................................................................................................................................................................................................................... 6
Fonctionnalits ............................................................................................................................................................................................................ 6
Mise en place du serveur web ..................................................................................................................................................................................... 6
Qu'est-ce qu'un serveur ? ........................................................................................................................................................................................... 6
Sur Windows : WAMP ................................................................................................................................................................................................. 7
Sur Mac : MAMP ......................................................................................................................................................................................................... 8
Sur Linux : LAMP ...................................................................................................................................................................................................... 10
Installation ................................................................................................................................................................................................................. 11
Cration de la base de donnes ................................................................................................................................................................................ 11
Tlchargement ......................................................................................................................................................................................................... 11
Paramtrage de linstallation ..................................................................................................................................................................................... 12
L'interface d'administration ........................................................................................................................................................................................ 13
Les publications ............................................................................................................................................................... 15
Les articles ................................................................................................................................................................................................................ 16
Gestion des articles ................................................................................................................................................................................................... 16
Catgories et mots-cls ............................................................................................................................................................................................ 17
Les pages .................................................................................................................................................................................................................. 18
Les attributs ............................................................................................................................................................................................................... 18
Le menu .................................................................................................................................................................................................................... 19
Crer un menu .......................................................................................................................................................................................................... 19
Organiser les menus ................................................................................................................................................................................................. 20
Les mdias ................................................................................................................................................................................................................ 21
Insertion dans un article ............................................................................................................................................................................................ 21
Grer les mdias non utiliss .................................................................................................................................................................................... 24
Grer un site participatif .................................................................................................................................................. 24
Les commentaires ..................................................................................................................................................................................................... 25
Activer ou non les commentaires .............................................................................................................................................................................. 25
Les options ................................................................................................................................................................................................................ 26
Modrer les commentaires ........................................................................................................................................................................................ 26
Les utilisateurs .......................................................................................................................................................................................................... 28
Gestion des utilisateurs ............................................................................................................................................................................................. 28
Les rles .................................................................................................................................................................................................................... 28
Cration d'utilisateur .................................................................................................................................................................................................. 29
Modifier l'apparence ........................................................................................................................................................ 29
Changer de thme ..................................................................................................................................................................................................... 30
Ajouter un thme via l'administration ........................................................................................................................................................................ 31
Utiliser un thme tlcharg ..................................................................................................................................................................................... 31
Ajouter des widgets ................................................................................................................................................................................................... 32
Placer un nouveau widget ......................................................................................................................................................................................... 32
Dsactiver un widget ................................................................................................................................................................................................. 33
TP : Crez vos premires pages ..................................................................................................................................... 34
Prsentation de l'exercice ......................................................................................................................................................................................... 35
Consignes ................................................................................................................................................................................................................. 35
Correction .................................................................................................................................................................................................................. 37
Le thme ................................................................................................................................................................................................................... 37
La page de prsentation personnelle ........................................................................................................................................................................ 37
L'article d'introduction ................................................................................................................................................................................................ 38
Le menu .................................................................................................................................................................................................................... 39
Les widgets ............................................................................................................................................................................................................... 40
Ajouter des plugins .......................................................................................................................................................... 41
Grer les plugins ....................................................................................................................................................................................................... 41
Installer de nouveaux plugins .................................................................................................................................................................................... 41
Mise jour d'un plugin .............................................................................................................................................................................................. 42
Exemples de plugins ................................................................................................................................................................................................. 42
qTranslate ................................................................................................................................................................................................................. 42
Hupso Share Buttons ................................................................................................................................................................................................ 44
NextGEN Gallery ....................................................................................................................................................................................................... 45
Partie 2 : Dvelopper votre thme .................................................................................................... 46
Premiers pas dans le code .............................................................................................................................................. 47
Utiliser la documentation ........................................................................................................................................................................................... 47
La structure de WordPress ........................................................................................................................................................................................ 47
Systme de fichiers ................................................................................................................................................................................................... 47
La base de donnes .................................................................................................................................................................................................. 47
Le principe des actions ............................................................................................................................................................................................. 48
Thorie ...................................................................................................................................................................................................................... 48
Les fonctions utilises ............................................................................................................................................................................................... 48
WordPress et la programmation oriente objet ......................................................................................................................................................... 48
Sommaire 3/113
Retour en arrire ....................................................................................................................................................................................................... 48

Et votre code dans tout a ? ..................................................................................................................................................................................... 49
Les thmes ...................................................................................................................................................................... 50
Structure d'un thme ................................................................................................................................................................................................. 50
Le fichier styles.css ................................................................................................................................................................................................... 50
Un premier fichier PHP .............................................................................................................................................................................................. 51
Un fichier courant : functions.php .............................................................................................................................................................................. 51
Hritage de thme ..................................................................................................................................................................................................... 52
Dclaration du thme enfant ..................................................................................................................................................................................... 52
Surcharge de fichiers ................................................................................................................................................................................................ 53
Ajouter une zone de widgets ..................................................................................................................................................................................... 54
Enregistrer la zone .................................................................................................................................................................................................... 54
Afficher les widgets ................................................................................................................................................................................................... 55
Une mthode alternative : des widgets sans zone .................................................................................................................................................... 55
Ajouter un menu ........................................................................................................................................................................................................ 56
Dclaration du menu ................................................................................................................................................................................................. 56
L'affichage ................................................................................................................................................................................................................. 56
Le processus de rendu .................................................................................................................................................... 57
La boucle de rendu .................................................................................................................................................................................................... 58
Les templates tags .................................................................................................................................................................................................... 58
Rendu dun contenu .................................................................................................................................................................................................. 58
Les filtres ................................................................................................................................................................................................................... 60
Appeler un filtre ......................................................................................................................................................................................................... 60
Brancher un filtre ....................................................................................................................................................................................................... 60
Ajouter des templates personnaliss ........................................................................................................................................................................ 61
Linternationalisation ........................................................................................................................................................ 62
Les fonctions de traduction ....................................................................................................................................................................................... 63
Traduire un texte ....................................................................................................................................................................................................... 63
Le domaine de traduction .......................................................................................................................................................................................... 63
Ajouter des traductions ............................................................................................................................................................................................. 64
Utiliser Poedit ............................................................................................................................................................................................................ 64
Utiliser les traductions dans un thme ...................................................................................................................................................................... 67
TP : Personnalisez votre thme ...................................................................................................................................... 68
Prsentation de l'exercice ......................................................................................................................................................................................... 69
Consignes ................................................................................................................................................................................................................. 69
Indications ................................................................................................................................................................................................................. 70
Correction .................................................................................................................................................................................................................. 70
Dclarer les emplacements du menu et du widget ................................................................................................................................................... 70
Gestion des lments affichs .................................................................................................................................................................................. 70
Corrig type ............................................................................................................................................................................................................... 72
Partie 3 : Dvelopper un plugin complet ........................................................................................... 73
Crer des plugins ............................................................................................................................................................ 74
Dclarer le plugin ...................................................................................................................................................................................................... 74
Nos premires fonctions ........................................................................................................................................................................................... 75
Rajouter un filtre simple ............................................................................................................................................................................................ 75
Utiliser une structure objet ........................................................................................................................................................................................ 75
Une structure multifichiers ......................................................................................................................................................................................... 76
Un plugin complet ..................................................................................................................................................................................................... 77
Les objectifs .............................................................................................................................................................................................................. 77
La classe Zero_Newsletter ........................................................................................................................................................................................ 77
Crer des widgets ........................................................................................................................................................... 79
Dclarer un widget .................................................................................................................................................................................................... 79
Une nouvelle classe .................................................................................................................................................................................................. 79
Les paramtres ......................................................................................................................................................................................................... 81
Le rendu final ............................................................................................................................................................................................................. 82
Modifier la base de donnes ........................................................................................................................................... 84
Excuter des requtes SQL ...................................................................................................................................................................................... 84
Crer une nouvelle table ........................................................................................................................................................................................... 84
Tracer lactivation du plugin ....................................................................................................................................................................................... 84
La dsactivation et la dsinstallation du plugin ......................................................................................................................................................... 85
L'insertion et la slection ........................................................................................................................................................................................... 86
L'administration ............................................................................................................................................................... 89
Ajouter des menus .................................................................................................................................................................................................... 89
Menu principal ........................................................................................................................................................................................................... 89
Les sous-menus ........................................................................................................................................................................................................ 90
Crer des options ...................................................................................................................................................................................................... 92
Le fonctionnement des options ................................................................................................................................................................................. 93
Le formulaire ............................................................................................................................................................................................................. 93
Gnration automatique des champs ....................................................................................................................................................................... 95
Traiter des actions ..................................................................................................................................................................................................... 98
Les shortcodes .............................................................................................................................................................. 100
Utiliser un shortcode ............................................................................................................................................................................................... 100
Format ..................................................................................................................................................................................................................... 100
Paramtres .............................................................................................................................................................................................................. 101
Crer un shortcode .................................................................................................................................................................................................. 101
Partie 4 : Exploiter votre site ........................................................................................................... 105
Mettre en production ..................................................................................................................................................... 105
Sur un hbergement mutualis ............................................................................................................................................................................... 105
Sur un serveur ddi ............................................................................................................................................................................................... 106
Installation et copie des fichiers .............................................................................................................................................................................. 106
Partager 4/113
Dfinition du Virtual Host ......................................................................................................................................................................................... 107

Amliorer le rfrencement ........................................................................................................................................... 107
Des URLs propres ................................................................................................................................................................................................... 108
Un contenu de qualit ............................................................................................................................................................................................. 108
Faciliter l'indexation ................................................................................................................................................................................................. 108
Le sitemap ............................................................................................................................................................................................................... 108
Les robots ................................................................................................................................................................................................................ 109
Optimiser les performances .......................................................................................................................................... 110
Utiliser le cache WordPress .................................................................................................................................................................................... 110
Optimiser l'affichage des pages .............................................................................................................................................................................. 110
Cacher les ressources ............................................................................................................................................................................................. 110
Fusionner les fichiers JS et CSS ............................................................................................................................................................................. 111
Partager 5/113
Propulsez votre site avec WordPress
Par Midnight Falcon
Mise jour : 11/03/2014

Difficult : Facile
Aujourd'hui, de nombreux acteurs du monde informatique se sont mis la mode des blogs, ces petits sites de contenu grs la
plupart du temps par une personne et qui laissent transparaitre les rflexions de leur auteurs sur les sujets qui les passionnent.
Pour faciliter la cration de ces sites d'un genre particulier, il est prfrable de partir d'un systme solide et qui a fait ses preuves,
tout en vitant aux auteurs les complications du dveloppement d'un site Internet.
WordPress a t cr dans cette optique, c'est donc probablement l'outil qu'il vous faut si vous dsirez tenir un blog ou bien
simplement un site de prsentation personnel ou d'entreprise. Ce cours a pour objectif de vous faire dcouvrir et utiliser
WordPress afin d'tre parfaitement autonome avec cet outil !
En premire partie, nous aborderons WordPress en tant qu'utilisateur, c'est--dire comme webmaster d'un site Internet. Nous
apprendrons grer le site, rajouter des contenus et changer son aspect visuel grce l'interface d'administration qui permet de
quasiment tout faire sans avoir connatre le fonctionnement technique de WordPress.
Dans la seconde partie, nous passerons du ct du dveloppeur afin d'aller plus loin dans la personnalisation d'un site sous
WordPress. Cette partie n'est pas obligatoire pour grer un blog (la plupart des utilisateurs de WordPress s'en passe), mais elle
permet de modifier l'affichage du site pour qu'il corresponde prcisment vos besoins.
Nous poursuivrons dans cette optique avec la troisime partie qui sera focalise sur la cration d'un nouveau module de
newsletter pour WordPress, ce qui vous donnera les bases afin, par la suite, de modifier le fonctionnement interne de
l'application comme bon vous semblera.
Ces deux sections requirent la matrise de PHP ainsi que du HTML et du CSS pour pouvoir tre correctement
exploites.
Pour terminer, il sera temps de mettre un site WordPress en ligne, de s'occuper de son rfrencement et de ses performances.
Loin d'tre la fin de votre travail sous WordPress, c'est l qu'une nouvelle aventure commence !
Propulsez votre site avec WordPress 6/113
Partie 1 : Prendre en main Wordpress
Dcouvrir WordPress
Ce premier chapitre introductif sera loccasion de dcouvrir ce quest WordPress et ce quil nous permet de raliser. Nous en
profiterons aussi pour linstaller et faire un rapide survol des fonctionnalits dans son interface dadministration.
Prsentation
Introduction
WordPress est un logiciel libre principalement spcialis dans la cration de blogs, dont la ralisation est trs facile. Cest
cependant loin dtre sa seule possibilit et rien ne vous empchera de crer un site diffrent.
Ainsi, il est bon savoir que WordPress est un CMS (Content Management System ou Systme de Gestion de Contenu en
franais), cest--dire quil permet lutilisateur (c'est--dire ladministrateur du site) de crer facilement des pages de contenu,
comme par exemple :
la page de prsentation dune entreprise ;

des articles de blog ;
une page de contact ;
un portfolio pour un artiste ;
bien encore des fiches produits sur un site de vente en ligne ;
etc.
Lide dun CMS est de donner la possibilit de facilement crer du contenu sur le site, sans avoir mettre les mains dans le code
ni mme avoir de connaissances techniques particulires.
Historique
WordPress est sorti pour la premire fois en 2003 comme un projet driv de cafelog, lui-mme tant un moteur de blog sorti en
2001. De nombreuses versions sont sorties depuis, chacune apportant son lot de nouveauts par rapports aux versions
prcdentes, comme les plugins, les widgets, les thmes, une interface utilisateur amliore La version 3 est sortie en 2010 en
apportant notamment la gestion des menus, de nouvelles fonctions pour grer len-tte du site ainsi que le support du multisite
(cest ce qui permet davoir plusieurs sites sur une mme instance de WordPress).
Fonctionnalits
WordPress est crit en PHP, un langage de programmation spcialis dans la cration de sites Internet. Ce langage permet donc
aux dveloppeurs de rajouter des fonctionnalits qui pourront tre rutilises par dautres utilisateurs. Il est donc facile
modifier si vous avez de bonnes bases dans ce langage.
Lune des grandes forces de WordPress est ainsi la multitude de plugins disponibles, dvelopps par la communaut. Ce sont
des modules permettant d'ajouter des fonctionnalits WordPress, comme par exemple la cration d'une galerie photo ou la
gestion d'une newsletter. Il y en a aujourdhui plus de 25 000 plugins sur le site officiel, wordpress.org. Il y a donc fort parier
que, si vous cherchez une fonctionnalit supplmentaire pour votre site, un plugin existe dj pour cela ! Si cela ntait pas le
cas, vous pouvez bien entendu dvelopper le votre et ventuellement le publier.
La renomme de WordPress dans le monde du blogging est telle quil existe mme un site ddi, wordpress.com ( ne pas
confondre avec le site officiel en .org), qui vous permet de crer votre blog WordPress sans vous occuper de son hbergement
ou de son installation. Tout est gr automatiquement, vous navez qu crer votre contenu. Vous navez en revanche pas
directement la main sur le code et il sera ncessaire de passer par linstallation de thmes ou de plugins pour faire des
modifications fonctionnelles.
Mise en place du serveur web
Qu'est-ce qu'un serveur ?
Pour fonctionner, tout site Internet sappuie sur un serveur qui se charge d'envoyer les pages un visiteur qui en fait la
demande. Le serveur est un programme qui excute le code du site web (crit en PHP dans le cas de WordPress) pour gnrer et
envoyer la page au format HTML, lisible par un navigateur Web (Safari, Google Chrome, Mozilla Firefox, etc.). Pour utiliser
WordPress, vous devrez donc obligatoirement en utiliser un ! Le serveur le plus utilis pour PHP sappelle Apache, il est
totalement gratuit et peut fonctionner sur nimporte quel environnement (Windows, Linux ou Mac), mais il en existe dautres,
parfois payants.
De plus, le serveur web fonctionne le plus souvent conjointement une base de donnes, qui permet de stocker les informations
spcifiques votre site : le contenu des pages, les utilisateurs inscrits, la configuration Tout ce qui change dun site lautre
est potentiellement stock lintrieur sous la forme de plusieurs tableaux de donnes. MySQL est un systme de base de
donnes trs connu et rpandu, car il est totalement gratuit et compatible avec une majorit dapplications, cest pourquoi nous
allons lutiliser.
Un serveur web et la base de donnes peuvent s'installer sur n'importe quelle machine, mme votre ordinateur personnel. Cela
permet notamment de faire des tests localement, sans que votre site soit en ligne ; on parle alors dinstallation locale . Il faut
toujours commencer par une installation locale lorsque vous prenez en main un outil, afin de limiter la porte des erreurs que
vous pourriez faire en dbutant. Si vous faites des erreurs alors que votre site est en ligne, nimporte quel visiteur pourra le voir,
tandis que vous tes seul y avoir accs tant que le site reste sur votre ordinateur personnel.
Sur Windows : WAMP
Si vous tes sous Windows, vous pouvez utiliser WAMP. C'est un programme qui contient un serveur Apache ainsi qu'une base
de donnes MySQL sur votre ordinateur. Vous pouvez tlcharger WAMP sur le site officiel, qui propose plusieurs versions
diffrentes du logiciel. Si vous ne savez pas laquelle choisir pour votre ordinateur, vous pouvez choisir la premire de la liste qui
fera a priori parfaitement l'affaire.
Une fois le paquet tlcharg, lancez l'installation en conservant les options par dfaut, ce qui devrait crer un dossier c:\wamp
sur votre ordinateur. Vous pouvez vrifier que WAMP fonctionne correctement avec l'icne qui doit s'afficher dans la barre des
tches (voir la figure suivante).
Apparition de l'icne de WAMP dans la barre des tches
Ouvrons maintenant un navigateur en indiquant http://localhost/ dans la barre d'adresse, qui correspond l'adresse du serveur
web (voir la figure suivante).
La page d'accueil de WAMP
Si vous obtenez bien cette page, votre serveur web est oprationnel et prt faire tourner WordPress !
Sur Mac : MAMP
Pour les systmes sous Mac OS X, il existe le logiciel MAMP, qui installe lui aussi tous les programmes qui nous seront
ncessaires. Vous pouvez le tlcharger directement en passant par ce lien. http://www.mamp.info/en/index.html Commencez par
extraire larchive .zip puis excutez le fichier .pkg pour lancer linstallation (voir la figure suivante).
L'installation MAMP sur Mac
Une fois MAMP install, vous pouvez le lancer depuis le dossier Applications > MAMP de votre ordinateur. La fentre qui
souvre indique le statut des serveurs Apache et MySQL. Sil sont arrts, cliquez sur dmarrer les serveurs pour voir le statut
passer au vert (voir la figure suivante).
Dmarrage des serveurs
Ouvrez ensuite la fentre Prfrences . Dans longlet Ports , cliquez sur le bouton Ports par dfaut dApache et de
MySQL . Puis, dans longlet Apache , vous pouvez choisir le dossier dans lequel vous placerez les diffrents sites sur votre
ordinateur. Je vous conseille de choisir le dossier Sites qui doit dj exister dans votre rpertoire personnel (voir la figure
suivante).
Les ports d'Apache et MySQL sont mis jour
Vous pouvez valider les modifications, puis vous rendre sur la page http://localhost/MAMP/ dans votre navigateur pour vrifier
le bon fonctionnement du serveur (voir la figure suivante).
La page
d'accueil de MAMP
Sur Linux : LAMP
Si vous utilisez un systme Linux comme Ubuntu ou Debian, le plus simple est dinstaller les diffrents paquets contenant
Apache, PHP et MySQL. Lancez donc la commande suivante dans une console :
Code : Console
sudo apt-get install apache2 php5 mysql-server libapache2-mod-php5 php5-

mysql
Lensemble des paquets doit sinstaller sans problme. Lors de linstallation de MySQL, la console vous demandera dentrer un
mot de passe dont vous devrez vous souvenir pour vous connecter la base de donnes, ne loubliez pas ! Installez ensuite
phpMyAdmin avec la ligne de commande suivante.
Code : Console
sudo apt-get install phpmyadmin
Linvite de commande vous demandera dans un premier temps de choisir le serveur configurer pour phpMyAdmin, choisissez
Apache, puis validez la cration dune base de donnes ltape suivante. Enfin, vous devrez entrer le mot de passe choisi
linstallation de MySQL pour que le paquet puisse crer sa propre base de donnes.
Une fois linstallation termine, rendez-vous ladresse http://localhost/ dans votre navigateur. Une page de confirmation,
comme la figure suivante, doit safficher.
La page d'accueil sur Linux
Installation
Cette partie vous concerne si vous souhaitez installer WordPress sur un environnement local (aprs avoir install un serveur
Apache sur votre ordinateur) ou bien sur un serveur ddi chez un hbergeur, ce qui vous permettrait de mettre votre site en
ligne en grant votre serveur seul. Si vous choisissez de crer votre blog sur le site officiel de WordPress, tout ce que vous aurez
faire est de vous inscrire, et tout sera install automatiquement.
Cration de la base de donnes
Avant de continuer, nous allons devoir crer la base de donnes pour que WordPress puisse stocker les informations
spcifiques notre site. Pour cela, nous devons accder l'interface de phpMyAdmin l'adresse http://localhost/phpmyadmin
ou bien http://localhost/MAMP/phpmyadmin si vous utilisez MAMP. Identifiez-vous avec le login root et un mot de passe
vide (si cela ne fonctionne pas, le mot de passe est probablement root , notamment sur MAMP) afin d'arriver sur l'interface de
gestion de la base de donnes. Cliquez en haut de la page sur l'onglet Base de donnes , puis choisissez un nom de base de
donnes (par exemple "WordPress") sur la page qui s'affiche (voir la figure suivante).
Crer la base de donnes dans phpMyAdmin
Validez par un clic sur "Crer", puis passez l'tape suivante.
Tlchargement
Les sources de WordPress sont rcuprables sur le site fr.wordpress.org directement depuis la page daccueil. Vous rcuprez un
fichier .zip (ou .tar.gz) contenant un dossier intitul wordpress que vous devez dcompresser dans le rpertoire racine de
votre serveur web.
Par exemple :
C:/wamp/www sous windows avec WAMP
/var/www sur Ubuntu/Debian

/Users/[nom]/Sites avec MAMP
Une fois le dossier en place, nous pouvons aller l'adresse http://localhost/wordpress afin de passer l'tape suivante.
Paramtrage de linstallation
Si vous allez directement sur lURL de votre site, vous obtenez une page derreur indiquant que WordPress a besoin dun fichier
wp-config.php pour fonctionner (voir la figure suivante).
Le fichier wp-config.php est manquant
partir de l, vous pouvez soit cliquer sur le bouton vous proposant de crer automatiquement un fichier de configuration en
remplissant les informations de votre base de donnes, soit crer ce fichier la main. Dans le premier cas, il faudra que votre
serveur web ait les droits dcriture la racine de votre site pour pouvoir gnrer le fichier.
Suivre linstallation automatique

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

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

L'interface d'administration
Vous pouvez accder linterface dadministration via lURL http://localhost/wordpress/wp-admin, en vous identifiant avec le
nom et le mot de passe fournis pendant la phase dinstallation (voir la figure suivante).
L'interface de connexion WordPress
Avant de plonger dans lensemble des fonctionnalits offertes par votre CMS, il est bon de commencer par vous familiariser avec
son interface.
Le menu est partag en trois section :
le tableau de bord ;
les contenus ;
les paramtres du site.
Le tableau de bord est une page affichant des informations gnrales sur lensemble du site. On peut y trouver des statistiques,
un fil dactualit sur WordPress, la liste des commentaires rcents C'est sur cette page (voir la figure suivante) que vous
arrivez lorsque vous vous connectez l'interface.
L'accueil du panneau d'administration
La seconde section concerne ldition des contenus que sont les pages, les articles, les mdias ainsi que les commentaires. Ici,
vous pourrez ajouter, supprimer ou diter le contenu de votre site et, faire de la modration sur les commentaires. Cest la partie la
plus utilise pour produire du contenu sur le site.
Enfin, le bas du menu donne accs au paramtrage du site, comme le choix du thme et des plugins ou la gestion des utilisateurs.
Il est aussi possible de grer le fonctionnement de certaines fonctionnalits du site dans la partie Settings .
Si vous dcidez par la suite dinstaller des plugins (c'est--dire des modules apportant des fonctionnalits supplmentaires au
site), ceux-ci pourront rajouter des informations sur le tableau de bord, comme par exemple :
des statistiques sur vos visiteurs ;

le nombre d'abonns votre newsletter ;
la cration de nouveaux menus ladministration afin de donner accs de nouvelles pages ;
etc.
Linterface est donc susceptible dvoluer.
WordPress est un CMS crit en PHP cr en 2003.

Un site Internet a besoin d'un serveur et d'une base de donnes pour fonctionner.
Le serveur peut tre install sur votre ordinateur pour vos tests.
L'interface d'administration permet de grer votre site.
Les publications
Votre site est dornavant install et prt lemploi, mais il est encore terriblement vide ! Voyons comment remdier cela en
ajoutant du contenu pour les visiteurs.
Les articles
Sous WordPress, les contenus sont organiss en deux types : les articles et les pages. La diffrence entre les deux rside dans le
type de contenu que vous allez placer lintrieur.
Un article sera gnralement un contenu dactualit, cest--dire quil prend sa plus grande valeur au moment de sa publication.
Cest typiquement le type de contenu utilis pour les publications dun blog ou sur un fil dactualit.
Une page aura au contraire un contenu valeur constante dans le temps sans avoir besoin dtre mise jour. On peut lutiliser
pour prsenter une socit, une personne ou bien pour parler dun sujet de fond.
Au niveau de la prsentation, les articles peuvent tre affichs en liste par ordre chronologique, puisque cest ce qui fait leur
sens, soit compltement soit avec un aperu du contenu, tandis que les pages seront accessibles par un lien (le plus souvent
dans le menu de navigation) vers leur contenu.
Gestion des articles
Pour crer un article, il suffit daller dans Articles et de choisir Ajouter dans le sous-menu.
L'diteur de texte
Dans la page qui apparat, vous avez un champ pour dfinir le titre de votre article ainsi quun diteur de texte pour taper son
contenu et le mettre en forme grce la barre d'outils ddie (voir la figure suivante).
L'diteur de texte riche
Vous pouvez notamment mettre du texte en gras ou en italique, crer des listes puces, changer l'alignement du texte ou sa
couleur.
Pour avoir une description de ce que fait l'un des boutons de l'diteur, vous pouvez le survoler pour afficher une petite bulle
d'informations. Aussi, la dernire icne (en forme de point dinterrogation), affiche l'aide de l'diteur dans une nouvelle fentre.
Enfin, deux onglets intituls Visuel et Texte permettent d'alterner la vue entre l'aperu du rendu final et le code HTML
gnr. Si vous ne connaissez pas le HTML, il est inutile de basculer en mode texte, le mode visuel vous suffira amplement.
Publier l'article
droite se trouvent les actions disponibles pour larticle en cours de cration. Il est notamment possible davoir un aperu de
larticle avec le design du blog pour avoir une ide du rendu final. Vous pouvez aussi, comme dans la figure suivante, grer ltat
de publication de votre article.
Publication d'un article
Tant quun article nest pas dans ltat Publi , il napparat pas sur le site. Vous pouvez donc commencer le rdiger en tant
que brouillon, sauvegarder puis y revenir plus tard pour le terminer. Le bouton Publier permet de valider larticle pour quil
soit affich, ventuellement une date ultrieure.
Catgories et mots-cls
Il est possible dassocier une ou plusieurs catgories un article, ainsi quun ensemble de mots-cls. Ceci permettra vos
visiteurs de se reprer plus facilement parmi la liste darticles aux thmes varis que vous pourrez crire.
Les catgories
Pour grer les catgories, il suffit de se dplacer dans le menu Articles > Catgories . La page correspondante permet
dajouter une catgorie et dditer celles qui existent dj.
Par dfaut, seule une catgorie est prsente et il nest pas possible de la supprimer, cest la catgorie par dfaut des articles si
aucune autre assignation nest choisie.
Pour crer une catgorie, il faut renseigner :
le nom de la catgorie, qui sera affich sur les pages ;

un identifiant, typiquement utilis dans lurl lors de laffichage des articles dune catgorie donne ;
un parent (facultatif), cest--dire que chaque catgorie peut avoir une catgorie parente ;
une description (facultative) qui sera ventuellement affiche si le thme le permet.
Une fois la catgorie cre, nous pouvons choisir dy assigner un article. Pour cela, sur la page ddition de larticle, il suffit de
cocher la case correspondant la catgorie associer, puis de mettre jour larticle. Si lon affiche notre site nouveau, la
catgorie ajoute devient visible dans le pied-de-page du site (ou sur le cot suivant le thme). En cliquant dessus, vous pouvez
constater que lon obtient sur une nouvelle page la liste des articles associs (voir la figure suivante).
La liste des catgories s'affiche sur le blog
Les mots-cls
Contrairement la description thmatique des catgories, les mots-cls ou tags permettent de caractriser un article de faon
plus prcise. Par exemple, un article sur le fonctionnement de WordPress, pourra tre dans la catgorie Mes tutos sur le blog,
mais pourra avoir comme mots-cls cours , informatique , formation , fonctionnement , WordPress , etc. La
description du contenu de l'article devient plus riche.
De mme que pour les catgories, il existe une page spcifique dans ladministration pour grer les mots-cls, dans le sous-menu
du mme nom. On prfre cependant crer les mots-cls directement sur la page de cration dun article, car il est commun d'en
crer spcifiquement pour un article.
Pour cela, sous le formulaire permettant lajout de catgories, un champ vous invite indiquer les mots-cls (spars par des
virgules). Il est aussi possible de faire un choix parmi les mots-cls existants les plus utiliss. Crez ou slectionnez vos tags et
mettez jour larticle pour enregistrer les modifications (voir la figure suivante).
Choix des mots-cls pour chaque article
Lors de la visualisation de larticle, vous aurez dornavant une liste de mots-cls qui vous redirigeront vers la liste des articles
associs, comme cest le cas pour les catgories. En effet, si deux articles ont un mot-cl en commun (par exemple informatique
), l'utilisateur pourra retrouver ces deux articles en tapant le mot-cl. Cela permet de faciliter la recherche de publications pour
vos visiteurs en leur proposant un ventail des mots qui reviennent frquemment sur votre site.
Les pages
La cration de pages est trs similaire celle des articles et se fait via le menu Pages > Ajouter . L'dition du contenu se fait
par le mme diteur de texte et la publication suit le mme procd. En revanche, les options de la page sont diffrentes. Nous
navons plus de catgories ou de mots-cls associer, mais trois attributs nouveaux.
Les attributs
Sur le ct droit de la zone d'dition des pages, un cadre similaire la figure suivante s'affiche.
Les diffrents attributs de page
On peut associer une page parente une autre, ce qui permet de dfinir une hirarchie de pages. Le principal changement visuel
apparat dans le menu principal qui arborera alors des sous-menus pour afficher les pages enfants que vous aurez dfinies.
L'attribut Modle (qui n'est pas toujours visible suivant les thmes) sert changer le format de la page, cest--dire la faon
dont elle est affiche. Par dfaut, les pages sont le plus souvent affiches avec une colonne latrale (comme pour la liste des
articles) qui affiche des widgets (liste de catgories, mots-cls, liens divers). Il est donc possible sur certains thmes de choisir
de ne pas afficher cette barre latrale sur une page bien prcise en choisissant un modle de page pleine largeur .
Enfin, l'attribut Ordre dfinit lordre dapparition de la page dans le menu par rapport aux autres. La page avec l'ordre le plus
petit apparaitra gauche, tandis que la page la plus droite sera celle avec l'ordre le plus lev.
Le menu
Un menu est l'lment essentiel de la navigation sur le site, car il donne un lien vers les principales pages de celui-ci.
La gestion des menus s'effectue via le sous-menu Rglages > Menus dans l'interface d'administration.
WordPress me dit qu'il n'y a pas de menu existant ! Il y a pourtant bien un menu en haut de mes pages, non ?
En effet, en l'absence de menu, celui-ci est automatiquement gnr par le thme lors de l'affichage d'une page. En l'occurrence, il
affichera un lien vers la page d'accueil ainsi qu'un lien par page que vous aurez cre. Il vaut donc mieux avoir un menu
personnalis si vous souhaitez avoir la main sur l'affichage et les liens qui seront affichs !
Crer un menu
Pour crer un menu, rien de plus simple : il suffit de choisir un nom et de cliquer sur Crer un menu .
Une fois le menu cr, il ne manque plus qu' lui ajouter des liens. Ceux-ci peuvent tre de plusieurs types :
un lien personnalis pour lequel vous choisissez l'url exacte ;

une page statique ;
un lien vers une catgorie.
Lorsqu'un lien est ajout au menu, il apparat dans le cadre central qui rsume les lments de menu ajouts. Il est alors possible,
en dpliant le bloc, de supprimer le menu, de modifier le libell ou de rajouter un attribut title au lien correspondant (voir la
figure suivante).
Modification des attributs du menu
De cette faon, une bulle apparat lorsque l'on survole le menu avec la souris (voir la figure suivante).
L'attribut title s'affiche sous la souris
Une fois que vous avez ajout vos liens, il faut activer le menu dans le bloc Emplacements du thme o vous pouvez choisir
le menu principal. Le menu sera alors utilis comme navigation principale du site. Si le thme que vous utilisez le permet, il peut
tre possible d'avoir plus d'un emplacement de menu actif la fois, vous pourriez alors en activer un deuxime affich un autre
endroit de vos pages.
Je ne peux plus aller vers la page qui liste mes articles, on n'a pas pu l'ajouter au menu !
Vous l'avez vu, il n'est pas possible d'ajouter dans le menu un lien de type page d'articles . Vous tes donc obligs de taper
l'url de base du site pour avoir la liste de vos publications, ce qui n'est pas optimal Deux solutions peuvent rgler ce problme.
La premire consiste ajouter un lien personnalis au menu, qui sera la page d'accueil du site et qui aura par exemple pour titre
Accueil . Cette solution est nanmoins peu pratique et il faudra changer le menu si votre site change d'adresse.
La deuxime option consiste associer la liste des articles une page. Dans Rglages > Lecture , vous devez alors choisir
d'afficher une page statique en tant que page d'accueil (choisissez donc une page de contenu que vous avez cre), puis une
page pour lister les articles. Notez que si elle est utilise pour lister les articles, le contenu de cette page ne sera jamais affich, il
peut donc tre vide.
Il suffit ensuite d'ajouter ces deux pages votre menu, la premire sera la page d'accueil et la seconde fera le lien vers la liste des
articles.
La seconde option ne permet pas de conserver la page des articles comme page d'accueil. Il faut pour cela faire un
dveloppement spcifique dans le code PHP de WordPress, ou utiliser un plugin qui le permettrait.
Organiser les menus
L'ordre d'affichage des liens se fait par dfaut dans l'ordre d'ajout au menu, mais il est tout fait possible de modifier cela comme
bon vous semble. En glissant-dposant les menus choisis, vous pouvez les ordonner comme il vous plat, mais aussi crer des
sous-menus. Pour cela, il faut simplement dplacer l'lment de menu lgrement vers la droite, en-dessous de celui qui sera le
parent (voir la figure suivante).
L'interface de gestion des menus
Dornavant, un survol sur le menu parent affichera le sous-menu comme sur la figure suivante !
Affichage du sous-menu au
survol
Ceci permet de reproduire une navigation similaire ce que l'on avait obtenu en dfinissant des pages parentes d'autres pages,
mais c'est ici applicable tous les types d'lments de menu, comme les liens personnaliss et les catgories.
Les mdias
Si vous tes dornavant capables de crer des contenus sur votre site, il vous manque un lment important pour rendre celles-
ci plus attrayantes : les mdias. Images, sons ou vidos, il est tout fait possible de les insrer dans vos pages et vos articles
pour illustrer vos propos.
Insertion dans un article
Toutes les informations qui suivent sont valables sur les pages ainsi que sur les articles.
Sur la page d'dition d'un article, vous trouverez un bouton Ajouter un mdia (voir la figure suivante).
L'ajouter d'un mdia
Aprs avoir cliqu dessus, une nouvelle fentre d'envoi de fichier apparat (voir la figure suivante).
L'interface pour l'envoi des mdias
Vous pouvez glisser-dposer, comme dans la figure suivante, un fichier dans la fentre ou bien cliquer sur le bouton
Slectionner les fichiers pour utiliser l'explorateur de fichiers. Une fois le fichier slectionn, celui-ci est directement envoy sur
le serveur web et un aperu est visible dans l'onglet Bibliothque de mdia de la fentre.
Envoie de l'image sur le serveur
Il est possible d'envoyer tout type de fichier, tant que celui-ci une taille infrieure 2Mo. Vous pouvez donc sans hsiter insrer
un fichier de musique ou mme un PDF, WordPress se chargera de proposer un affichage adquat lors de la visualisation de
l'article par un visiteur (voir la figure suivante).
Apparence d'un mdia audio sur un article
Lorsque le mdia que vous voulez utiliser dans votre article est envoy, vous n'avez plus qu' le slectionner et cliquer sur le
bouton d'insertion dans l'article en bas droite. Avant cela, vous pouvez diter les proprits du mdia sur la droite de la fentre :
Titre : le texte afficher au survol du mdia ;

Lgende : une lgende qui apparat sous le mdia ;
Description : un texte de description plus long que la lgende (cela dpend du thme, elle n'apparait pas sur le thme par
dfaut par exemple) ;
Lier : permet de choisir le comportement lorsque l'on clique sur le mdia.
Il y a aussi quelques attributs spcifiques aux images :
Texte alternatif : le texte afficher si l'image n'a pu tre affiche ;

Alignement : si vous choisissez gauche ou droite , l'image sera borde par le texte de l'article ;
Taille : la taille de la miniature afficher dans l'article.
Enfin, lorsque les mdias voulus ont t insrs, n'oubliez pas de mettre jour votre article pour que les modifications soient
prises en compte !
Sur la page Mdias > Ajouter , vous pouvez, de mme que sur un article, ajouter de nouveaux mdias la
bibliothque. Notez cependant que pour apparatre sur le site, il faudra obligatoirement ajouter ce mdia un article ou
une page.
Grer les mdias non utiliss
Lorsque vous supprimez un mdia d'un article, celui-ci n'est pas totalement supprim de WordPress, le fichier envoy reste sur le
serveur pour pouvoir tre ventuellement utilis sur d'autres articles.
Pour effacer compltement un mdia, vous devrez, comme dans la figure suivante, passer par la page Mdias > Bibliothque
qui rpertorie l'ensemble des fichiers envoys sur le site. Il suffit alors de cliquer sur le lien Supprimer dfinitivement pour
l'effacer de la bibliothque.
Suppression des mdias envoys
Si vous supprimez un mdia qui est toujours utilis dans un article, vous aurez alors un lien mort affich sur votre site,
ce qui est trs frustrant pour vos visiteurs. Soyez donc certain que le mdia n'est plus du tout utilis avant de le
supprimer !
Les articles sont des publications rgulires dpendant de l'actualit.

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

La vie dun site, et en particulier dun blog, ne se limite pas ncessairement laction dune seule personne (en loccurrence
vous). Elle passe aussi par la participation des visiteurs qui peuvent apporter leur rflexion vos articles, ainsi qu dautres
rdacteurs qui peuvent s'investir dans lenrichissement de votre contenu.
Les commentaires
Si votre site a du succs, il y a fort parier que des visiteurs voudront laisser des commentaires sur certains articles qui les
auront inspir, voire sur certaines pages.
Activer ou non les commentaires
Tout d'abord, voyons comment faire pour activer (ou dsactiver) les commentaires sur les pages et les articles du site.
Dans l'interface d'administration, allez dans Rglages > Discussion . En haut de la page, une case vous demande si vous
souhaitez Autoriser les visiteurs publier des commentaires sur les derniers articles . Si cette case est coche, tous les articles
et les pages que vous crerez pourront recevoir des commentaires, et inversement si vous la dcochez. En revanche, cette option
ne permet pas d'activer ou dsactiver les commentaires sur les contenus qui sont dj crs. Pour cela, il faut aller dans le menu
Articles , puis choisir Modification rapide sous l'article dont vous souhaitez changer le statut (voir la figure suivante).
Plusieurs actions sont disponibles pour les articles
Vous pouvez alors, comme sur la figure suivante, modifier l'autorisation des commentaires via la case cocher Autoriser les
commentaires .
Autorisation des commentaires
Pour faire ce changement sur la totalit de vos articles, vous devrez slectionner Modifier dans la liste des actions groupes,
slectionner tous les articles pour lesquels vous souhaitez dsactiver les commentaires, et cliquer sur Appliquer . Un
formulaire similaire au prcdent s'affiche alors et permet entre autres d'activer (ou dsactiver) les commentaires pour tous les
articles (voir la figure suivante).
L'activation des commentaires peut tre groupe
Les actions dcrites ici sont aussi valables pour les pages en passant par le menu listant les pages du site.
Les options
Revenons la page Rglages > Discussion . De nombreux paramtres sont disponibles ici pour vous aider grer les
commentaires, il est par exemple possible de demander ce que tous les commentaires soient valids par un administrateur ou
bien de dsactiver les commentaires pour les vieux articles. En bas de la page il est possible de choisir si les commentaires
peuvent avoir un avatar cot du nom de l'utilisateur l'ayant post. Si oui, vous devez alors choisir un type d'avatar :
Homme mystre : un logo d'utilisateur anonyme est affich ;

Vide : une image blanche est affiche ;
Gravatar : l'image est rcupre sur Gravatar, un service permettant d'associer une image une adresse email ;
Gnration automatique : l'avatar sera une image alatoire dans le style visible sur l'aperu.
Si votre choix se porte sur Gravatar, il vous faut alors choisir un niveau maximal pour la censure de l'image, c'est dire qu'une
image rserve aux adultes ne sera par exemple pas affiche si vous choisissez un niveau parmi G, PG ou R. Si vous ne savez pas
lequel slectionner, laissez G Visible pour tous , qui est celui utilis par dfaut.
Modrer les commentaires
Les statuts
Une fois un commentaire cr, il peut se trouver dans plusieurs statuts diffrents.
Approuv : le commentaire est visible sur le site ;

En attente : le commentaire est en attente de validation, seul vous ou un autre administrateur du site peuvent le voir ;
Indsirable : le commentaire est masqu car il a t dsapprouv par un administrateur.
Enfin, il est possible d'avoir un commentaire dans la corbeille si vous avez dcid de le supprimer. Voyons tout de suite comment
procder ces changements de statut.
dition et suppression
La liste des commentaires prsents sur le site est affichable par le menu "Commentaires" du panneau d'administration. En
survolant un commentaire et en cliquant sur Modifier , vous accdez la page d'dition d'un commentaire.
Lorsque vous tes connect comme administrateur, il est aussi possible d'accder directement la fiche d'dition d'un
commentaire avec le lien Modifier qui apparat sur le front-office lors de la visualisation d'un commentaire.
Au centre vous pouvez modifier le contenu du commentaire ainsi que le nom de l'utilisateur ayant post celui-ci. Un historique
des actions sur ce commentaire (par exemple un changement de statut) est aussi affich en bas de page.
Il est dconseill d'diter le contenu d'un commentaire car l'utilisateur pourra penser que vous cherchez modifier sa
dclaration en votre faveur. N'utilisez cette fonctionnalit que pour supprimer une phrase offensante par exemple, bien
que dans la plupart des cas la suppression pure et simple du commentaire soit prfrable.
Sur la droite, nous retrouvons la liste des statuts prsents plus haut, ainsi que la date de cration du commentaire et un lien
pour le dplacement dans la corbeille.
Si nous choisissons de placer le commentaire comme En attente , vous pouvez voir qu'il est immdiatement retir de
l'affichage public sous l'article auquel il se rattachait. D'autre part, un petit 1 est apparu dans le menu d'administration pour
indiquer qu'un commentaire tait en attente de validation par un administrateur (voir la figure suivante).
Un commentaire en attente de validation
Si le commentaire est marqu comme Indsirable ou bien plac dans la corbeille, il n'apparat plus dans la liste des
commentaires. Il faut alors choisir le filtre Indsirable (ou corbeille) en haut de la page pour y accder (voir la figure suivante).
La corbeille regroupe les messages supprims
Vous pouvez alors choisir d'annuler ce statut et de restaurer le commentaire pour qu'il apparaisse nouveau, ce qui est utile en
cas d'erreur par exemple (voir la figure suivante).
Les commentaires indsirables peuvent tre conservs ou
effacs
Rglages
En plus des paramtres s'appliquant tous les commentaires que nous avons dj parcouru, il est possible de filtrer certains
textes contenus dans les commentaires pour les empcher d'tre publis sans votre approbation. Dans le champ Modration de
commentaires , vous pouvez choisir un ensemble de mots qui dclencheront la mise attente d'un commentaire ayant ce contenu
dans son texte. Il n'est pas obligatoire de mettre des mots complets, c'est--dire que Press bloquera les commentaires
contenant WordPress ,
Pression ou encore Presse .
Faites bien attention ne mettre qu'un mot bloquant par ligne dans la zone de texte.
Vous pouvez faire de mme dans le champ Liste noire pour les commentaires , la diffrence que les commentaires
correspondant l'un des mots choisis seront immdiatement marqus comme Indsirables , sans avoir tre modrs.
Les utilisateurs
Gestion des utilisateurs
Toute la gestion des utilisateurs s'effectue par le menu Utilisateurs de l'administration qui vous permet de grer l'ensemble
des utilisateurs existant, d'en crer de nouveaux et d'diter votre propre profil. Vous pouvez donc lister tous les utilisateurs de
votre site (voir la figure suivante).
Liste des utilisateurs inscrits sur
votre site
Les rles
chaque utilisateur est associ un rle dfinissant l'ensemble des droits qui lui sont accords, c'est--dire la liste des actions
qu'il pourra effectuer dans l'interface d'administration du site.
Administrateur : c'est le rle qui accorde tous les droits et que vous avez par dfaut en tant que crateur du site ;
diteur : il permet de publier et diter l'ensemble des articles du site, mme celles qui ne lui appartiennent pas ;
Auteur : l'auteur peut publier et diter ses propres contenus ;
Contributeur : il peut crer ou diter des articles et des pages lui appartenant, mais ne peut pas les publier (il lui faut
demander un diteur ou un administrateur de le faire pour lui) ;
Abonn : il peut uniquement accder au panneau d'accueil de l'administration et grer son profil.
Pour modifier le rle d'un utilisateur, cliquez sur son nom dans la liste des utilisateurs. Vous pouvez alors faire votre choix grce
une liste droulante. Notez que vous ne pouvez pas changer votre propre rle (voir la figure suivante) !
Attribution des rles aux
utilisateurs
La gestion des droits est un sujet important pour la scurit de votre site. Il faut toujours faire attention n'accorder
que les droits strictement ncessaires un utilisateur. vitez donc de crer un profil administrateur si la personne qui
l'utilisera n'a besoin que d'crire des articles.
Cration d'utilisateur
Vous pouvez crer un nouvel utilisateur en allant dans le sous-menu Ajouter . Cette interface permet de dfinir le nom du
nouvel utilisateur, son rle et quelques informations personnelles optionnelles.
Il est aussi possible d'autoriser la cration de comptes utilisateur pour n'importe quel visiteur du site. Pour cela, dans le menu
Rglages > Gnral , il suffit de cocher la case Tout le monde peut s'enregistrer et de dfinir le rle par dfaut de ces
utilisateurs.
Il est peu probable que vous ayez besoin de cette option, mais il est bon de savoir qu'elle existe. En revanche, si vous
l'utilisez, faites attention ce que le rle par dfaut des utilisateurs soit le plus faible possible (abonn), sinon vous
vous exposez des modifications du contenu de votre site par n'importe qui voulant s'enregistrer !
Les commentaires permettent aux visiteurs de s'exprimer sur les publications.

L'administrateur peut modrer les commentaires avant et aprs leur publication.
Plusieurs personnes peuvent contribuer au site, ventuellement avec des droits diffrents.
Modifier l'apparence
L'identit de votre site passe avant tout par le thme graphique, c'est--dire l'ensemble des caractristiques visuelles de votre
site, comme les couleurs, la taille des textes, les images de fond ou la disposition des blocs sur la page. Lorsque vous avez
install WordPress, vous navez pas eu la possibilit de choisir le thme graphique utilis, et pour cause : il est install par dfaut
et cest ensuite vous den trouver un autre et de le changer si vous le voulez. Voyons tout de suite comment procder.
Changer de thme
Le choix d'un thme se fait lui aussi dans l'interface d'administration, on y accde par le menu Apparence > Thmes . Ici vous
aurez probablement un ou deux thmes prinstalls et que vous pouvez activer ou dsactiver loisir (voir la figure suivante).
Liste des thmes installs
Essayons de modifier le thme actuellement utilis (ici, Twenty Thirteen ) par le thme Twenty Twelve . Cliquez sur le lien
Activer , puis rafrachissez votre site : la nouvelle apparence est d'ores et dj mise en place, il n'y a rien de plus faire (voir la
figure suivante) !
Le thme actif a t modifi
Et si je veux essayer de nouveaux thmes non fournis avec WordPress ?
Il est en effet possible d'installer des thmes crs par la communaut de diverses faons : en utilisant l'interface d'administration
ou en tlchargeant les fichiers vous-mme.
Ajouter un thme via l'administration
Pour ajouter un thme directement depuis l'interface, choisissez l'onglet Installer des thmes en haut de la page de slection
des thmes. Ici, vous pouvez rechercher des thmes par mots-cls, envoyer un fichier .zip contenant un thme pralablement
tlcharg, ou encore parcourir les derniers thmes ajouts par les crateurs (voir la figure suivante).
Nouveau thme tlcharger
Lorsque vous parcourez une galerie de thmes (c'est--dire en faisant une recherche ou en parcourant les derniers thmes mis
jour) vous avez la possibilit d'avoir un aperu du rsultat final du thme par le lien Aperu en dessous de chaque miniature.
En cliquant sur le bouton Installer maintenant , WordPress va tlcharger automatiquement le thme demand et celui-ci sera
ensuite disponible dans la liste des thmes.
Utiliser un thme tlcharg
Dans le cas o vous auriez tlcharg un thme sparment, par un exemple directement sur wordpress.org ou sur un site
proposant des thmes WordPress, vous pouvez installer ce thme manuellement en plaant les fichiers dans l'arborescence du
CMS.
Essayez pour l'exemple d'installer le thme expound propos sur le site officiel de Wordpress, dans l'onglet Themes .
Dcompressez le fichier .zip rcupr et placez le dossier expound dans le rpertoire wordpress/wp-content/themes/
de votre installation. Si vous affichez nouveau la liste des thmes dans l'interface d'administration, Expound est maintenant
slectionnable pour une utilisation sur votre site (voir la figure suivante) !
Les thmes peuvent tre installs
manuellement
Ajouter des widgets
Les widgets (ou composant d'interface graphique en franais) sont des petits blocs ajouter sur les pages de votre site. Ils
fournissent une information ou une fonctionnalit spcifique aux visiteurs. Par exemple, il peut s'agir de l'heure, d'un calendrier,
du bulletin mto, de mini-jeux C'est un moyen simple de rajouter du contenu dynamique, toujours sans avoir besoin de
modifier le code du site.
Placer un nouveau widget
Dans le menu Apparence > Widgets, on retrouve au centre de la page l'ensemble de tous les widgets disponibles sur le
site, et sur la droite, les diffrentes zones de votre thme pouvant contenir lesdits widgets. En effet, les widgets ne peuvent pas
tre placs n'importe o dans une page, ils ont besoin qu'une (ou plusieurs) zone du thme graphique utilis soit conue pour en
recevoir. Par dfaut, WordPress a un certain nombre de widgets livrs sans que vous ayez besoin de les installer. Il est
nanmoins toujours possible d'en rajouter au travers de plugins, que nous verrons plus tard comment rcuprer.
Pour ajouter un widget dans une zone spcifique du site (qui est dtermine par le thme utilis), il vous suffit de le glisser-
dposer de la zone centrale vers la Zone principale (ce nom peut varier en fonction du thme utilis) sur la droite. Ajoutons
par exemple le widget Nuage de mots-cls par cette mthode (voir la figure suivante).
Assigner le widget une zone spcifique
Une fois qu'un widget est plac dans une zone de widgets, vous pouvez diter ses proprits, qui dterminent son
comportement sur les pages de votre site. Ajoutons donc le titre Mots-cls et choisissons la taxinomie Mots-cls , qui
permet d'afficher une courte liste des mots-cls les plus utiliss pour marquer les articles que vous avez publis. L'autre option,
Catgories , propose le mme affichage mais pour les catgories d'articles. Cliquez donc sur Enregistrer , puis rafrachissez la
page d'accueil du site ; le nouveau widget doit apparatre dans la zone choisie (avec le thme Twenty Thirteen et la zone
Principale , ce sera le pied-de-page), cot de ceux dj prsents (voir la figure suivante).
Le pied de page affiche le widget
fraichement ajout
Dsactiver un widget
Pour retirer un widget, rien de plus simple : il suffit de cliquer sur le lien Supprimer . Cela retirera le widget de la zone dans
laquelle il se trouvait et supprimera les rglages appliqus (voir la figure suivante).
Suppression du widget
En revanche, vous pouvez aussi choisir de ne plus afficher un widget, tout en conservant les options que vous aviez choisies,
comme le titre par exemple. Pour cela, vous pouvez dplacer le widget en question dans la zone Widgets dsactivs situe en
bas de la page de gestion des widgets. Vous pourrez alors replacer le widget sur votre site plus tard avec les mmes rglages.
L'apparence du site est dtermine par le thme choisi.

De nouveaux thmes peuvent tre tlchargs depuis la bibliothque officielle.
Les widgets offrent des fonctionnalits supplmentaires dans les zones priphriques de chaque page.
TP : Crez vos premires pages

Afin de pratiquer les notions prsentes jusqu'ici, je vous propose un exercice d'application consistant crer diffrents
contenus au travers de l'interface d'administration. Nous allons donc crer l'bauche d'un blog avec quelques lments de base.
Ce sera ensuite vous de poursuivre ce travail au gr de votre imagination !
Prsentation de l'exercice
Consignes
Ce TP ne devrait pas vous poser beaucoup de problmes. Je vous donne ici les lignes directrices afin de parcourir nouveau les
fonctionnalits principales que nous avons vues jusque l, pour raliser le contenu de votre site.
L'objectif sera donc de crer votre premier article. Je vous propose de suivre, dans l'ordre les lments suivants :
installer un thme ;
crer un article ;
crer des catgories, dont Le blog ;
crer une page de prsentation personnelle ;
crer un menu comprenant trois lments ;
installer des widgets.
Tout d'abord, commencez par installer un thme spcifique. Dans mon cas, jai choisi Base WP , mais n'hsitez pas faire un
choix diffrent selon vos gots. Vous pourrez ensuite crer un premier article de prsentation de votre blog, similaire la figure
suivante. Tous les lments de mise en forme sont disponibles dans lditeur de texte riche. Nhsitez pas explorer les
possibilits quil offre et rajouter du contenu supplmentaire ! Vous devrez au minimum intgrer une liste puces, un lien vers
une autre page du site, une image et le formatage du texte (par exemple avec des lments en gras ou italique).
Votre premier article doit attirer l'oeil !
Ensuite, vous devez crer des catgories, dont Le blog .
Une fois les catgorie cres, vous devrez crer une page de prsentation personnelle qui sera rattache la catgorie Le blog
. Rattachez aussi votre premier article cette catgorie.
Le menu doit donc comprendre (comme sur la figure suivante) :
la page daccueil faisant le listing des articles publis ;

la page de prsentation personnelle ;
un lien vers la catgorie Le blog .
Le menu du blog
Enfin, je vous demande d'utiliser, comme sur la figure suivante, les widgets suivants :
le calendrier ;
la barre de recherche ;
les catgories ;
les mots cls.
Vous aurez probablement des widgets dj installs avec votre thme, il faudra donc les supprimer s'ils sont inutiles. N'oubliez
pas que vous pouvez toujours les rajouter plus tard si vous en prouvez le besoin (voir la figure suivante).
La barre latrale contenant les widgets
Avant de passer la correction, vrifiez bien que vous avez ajout tous les lments demands ci-dessus. N'hsitez pas vous
rfrer aux chapitres prcdents si vous ne retrouvez pas une fonctionnalit prcise.
tout de suite pour la correction !

Correction
Si vous avez bien suivi le cours jusqu'ici, vous devriez n'avoir rencontr que peu de problmes pour dbuter sur votre blog.
Nous allons reprendre ensemble les points principaux qui ont pu vous poser quelques difficults.
Le thme
Le thme est gnralement le point de dpart pour votre site puisqu'il dtermine l'identit de celui-ci. Les images de prsentation
du TP on t prises sur le thme Base WP , que vous pouviez utiliser en utilisant la fonctionnalit de recherche de thmes
prsente dans la chapitre ddi ce sujet.
La page de prsentation personnelle

C'est le premier contenu par lequel vous pouviez commencer, tant donn qu'il fallait ensuite crer un lien vers cette page sur
votre premier article. Je n'ai pas pos de critre de ralisation particulier ici, vous tiez donc assez libre. Pour ajouter cette page
la catgorie Le blog , vous pouviez passer par le formulaire sur la droite de l'diteur qui permet de crer et assigner la catgorie
(voir la figure suivante).
Crez et slectionnez la catgorie assigner la page
L'article d'introduction
Comme je vous l'ai dit, cet article contenait plusieurs lments insrer avec l'diteur de texte de WordPress : une liste puces,
une image et un lien.
Pour insrer une liste puces, il suffit de cliquer sur cette petite icne (voir la figure suivante). Ensuite, ajouter les puces une par
une, en tapant le texte et en passant la ligne. Un nouveau clic sur l'icne permet darrter la liste.
Bouton pour les listes puces
Notez que vous pouviez aussi crer des listes numrotes avec le bouton suivant (voir la figure suivante).
Bouton pour les listes numrotes
L'ajout d'une image se fait avec le bouton d'ajout des mdia au dessus de l'diteur de texte. Il vous suffit ensuite de choisir une
image comme nous l'avions fait dans le chapitre sur les mdias, puis de valider (voir la figure suivante).
Bouton pour l'ajout d'image
Il fallait ensuite crer un lien vers la page de prsentation cre prcdemment. Le bouton en forme de chane, comme sur la
figure suivante, permet de raliser cette tche (voir la figure suivante).
Bouton pour les liens
En cliquant dessus, une fentre s'ouvre. Vous deviez donc taper l'adresse d'un lien quelconque (vers l'extrieur de votre site) ou
bien un lien vers une autre page du blog en slectionnant celle-ci dans la liste affiche (comme sur la figure suivante).
dition du lien insrer
Enfin, avant de publier l'article, assignez-lui la catgorie cre plus tt grce au formulaire sur la droite de la page.
Le menu
Pour ajouter les liens demands votre menu, il fallait commencer par crer un nouveau menu en passant par l'cran Apparence
> Menu . Vous pouviez ensuite rajouter les pages qui vous intressent en les slectionnant manuellement, puis en cliquant sur
Ajouter au menu . Faites ensuite de mme pour la catgorie Le blog (voir la figure suivante).
Ajoutez les pages dans le menu
N'oubliez pas ensuite de lier le menu votre thme dans l'onglet Grer les menus . Choisissez le menu dans la liste droulante
avant d'enregistrer ce changement (voir la figure suivante).
Slectionnez le
menu utiliser avec ce thme
Les widgets
Pour terminer, vous deviez ajouter quelques widgets votre thme. Sur l'illustration prsente au dbut de l'exercice, j'ai utilis
quatre widgets :
le calendrier ;
la recherche ;
la liste de catgories ;
le nuage de mots-cls.
Pour les intgrer, il vous suffit d'aller sur l'cran de gestion des widgets et de les faire glisser un par un dans la zone de widgets
voulue. Par exemple ici, la barre latrale (voir la figure suivante).
Les widgets utiliss pour ce TP
Ajouter des plugins

Vous l'avez vu avec les thmes, WordPress propose une grande souplesse dans la personnalisation de votre site, et ceci avec
des processus simplifis au maximum. De mme que nous avons pu modifier l'apparence de notre site sans difficult, nous
pourrons aussi lui ajouter de nouvelles fonctionnalits grce aux plugins. Les plugins sont des modules installer
individuellement dont le but est d'tendre les fonctionnalits d'un logiciel, ici WordPress. Par exemples, intgrer des boutons
Facebook, ajouter les statistiques de visites dans le panneau d'administration ou encore avec une galerie de photos sur vos
publications
Grer les plugins
Installer de nouveaux plugins
Tout comme les thmes, les plugins peuvent tre installs directement par l'interface d'administration ou manuellement en
tlchargeant les fichiers ncessaires et en les plaant dans le dossier appropri.
Installation automatique
Nous accdons au moteur de recherche des plugins par le menu Extensions > Ajouter , qui propose une mthode de
recherche similaire celle des thmes. Vous pourrez chercher des plugins par mots-cls, par date d'ajout ou bien simplement
parcourir les plus utiliss par la communaut. Cherchons parmi les extensions les plus populaires en cliquant sur le lien
correspondant (voir la figure suivante).
La grande majorit des plugins est cre destination du monde entier, par consquent leur description mais aussi la
documentation sont gnralement crites en anglais. Ne soyez donc pas surpris d'avoir des rsultats de recherche dans
la langue de Shakespeare !
La bibliothque de plugins de WordPress
Dans la liste qui s'affiche, nous pouvons voir pour chaque plugin son nom, la version actuelle, une note des utilisateurs et une
courte description de ses fonctionnalits. Pour lancer l'installation, cliquez simplement sur Installer maintenant et WordPress
se chargera de tlcharger les fichiers ncessaires au fonctionnement, l encore tout se passe selon le mme procd que pour
les thmes.
Installation manuelle
Les plugins sont aussi tlchargeables manuellement sur le site officiel de WordPress, dans la section plugins. Lorsque vous
avez rcupr les fichiers du plugin, placez-les dans le dossier wordpress/wp-content/plugins, cela suffit pour
terminer l'installation !
Activer ou supprimer le plugin
L'administration propose un panneau de gestion des plugins accessible via Extensions > Extensions installes . Vous pourrez
ici grer les diffrents plugins installs sur votre site.
Une fois qu'un plugin est install, il est ncessaire de l'activer pour que ses fonctionnalits soient appliques. Cela se fait
simplement en cliquant sur le lien Activer sous la description du plugin. De mme, si vous n'avez plus besoin d'un plugin,
vous pouvez le dsactiver de la mme faon. Enfin, pour dsinstaller un plugin, c'est--dire pour supprimer l'ensemble de ses
fichiers et les informations qu'il a pu stocker dans votre base de donnes, il faut cliquer sur le lien Supprimer .
La suppression est irrversible ! Vous devrez rinstaller le plugin si vous voulez le rutiliser plus tard.
Pour pouvoir supprimer un plugin, il faut d'abord que celui-ci soit dsactiv.
Mise jour d'un plugin
Afin de bnficier de nouvelles fonctionnalits ou simplement de corrections de bugs, les plugins ont la possibilit d'tre mis
jour lorsque l'quipe en charge du dveloppement en sort une nouvelle version. Ceci vous est signal dans le menu principal
avec une petite vignette indiquant le nombre de plugins pouvant bnficier d'une mise jour. (Voir la figure suivante)
Une mise jour est disponible
Avant de mettre jour le plugin, consultez les dtails de la mise jour. Vous y trouverez une liste dcrivant l'ensemble de ces
mises jour et des risques ventuels. Lorsque vous tes prt pour rcuprer la dernire version, cliquez sur Mettre jour
automatiquement , WordPress tlchargera automatiquement les nouveaux fichiers.
Si vous tes plutt adepte du tlchargement manuel de l'archive contenant le code du plugin, vous pouvez effectuer la mise
jour d'un plugin en rcuprant la nouvelle version du code et en remplaant l'ancien dossier du plugin mettre jour, de la mme
faon que pour l'installation.
Exemples de plugins
Vous savez maintenant rechercher et installer des plugins, en voici quelques-uns parmi les plus populaires qui pourraient vous
tre utiles.
qTranslate
Par dfaut, un site utilisant WordPress ne peut tre affich qu'en une seule langue inscrite dans la configuration. De plus, vos
articles et pages sont rdigs dans la langue de votre choix, mais il n'est pas possible d'en avoir plusieurs versions dans des
langues diffrentes.
qTranslate permet de contourner cette limitation en proposant une interface de rdaction des publications modifie pour que
celles-ci soient rdiges en plusieurs langues. Il est aussi possible aux utilisateurs de choisir la langue dans laquelle ils
souhaitent parcourir votre site. Une fois le plugin install, un nouveau menu fait son apparition dans Rglages > Langues et
vous permet notamment de choisir les langues que vous souhaitez utiliser sur votre site (voir la figure suivante).
Il est trs probable que lors de l'activation du plugin, votre interface passe en anglais. Vous devez alors ajouter le
franais la liste des langues actives et en faire la langue par dfaut.
Gestion des langues
Sur la page d'dition des articles, un champ de texte par langue a t rajout pour le titre de la publication. De plus, un systme
d'onglets permet de choisir la langue dans laquelle vous ditez le contenu, vous avez donc toutes les versions d'une mme
publication sur une seule page. C'est ensuite l'utilisateur qui choisira la langue dans laquelle il souhaite parcourir le contenu.
L'interface modifie pour la
rdaction
Enfin, pour que les utilisateurs puissent changer de langue comme bon leur semble, le plugin fournit aussi un widget pour choisir
la langue dans laquelle les pages doivent s'afficher. L'affichage peut varier du lien la liste droulante, avec ventuellement
l'affichage des drapeaux correspondant aux pays (voir la figure suivante). Vous verrez, c'est trs pratique !
Le widget de qTranslate
Hupso Share Buttons
Ce second plugin se concentre sur les rseaux sociaux en proposant d'ajouter des boutons de partage pour une vaste slection
d'entre eux. Vos visiteurs peuvent ainsi partager vos publications d'un simple clic vers les rseaux sociaux. Les boutons peuvent
tre ajouts en dessous de vos articles, pages et mme comme widget suivant la configuration que vous choisissez. (Voir la
figure suivante)
Quelques options pour la configuration des boutons
De nombreuses options sont par ailleurs disponibles, vous pouvez ainsi choisir la position des boutons et la faon dont le texte
de partage est dtermin, exclure des catgories d'articles du partage ou encore changer le type de bouton. C'est donc un plugin
trs utile qui vous vite les tapes fastidieuses d'intgration de ces boutons pour chaque rseau social, et le rsultat est plutt
russi (voir la figure suivante).
Lorsque ce plugin est utilis sur une installation locale, les fonctionnalits de partage peuvent tre incompltes voire
ne pas fonctionner. C'est un comportement normal d au fait que les rseaux sociaux essayent de se connecter au site
en partageant un lien dans le but d'y rcuprer des informations de partage. Cette tape n'tant pas ralisable sur un
site local, le partage ne peut fonctionner normalement.
Le rendu
sous les articles
NextGEN Gallery
Pour terminer cette slection, regardons de plus prs le plugin NextGEN Gallery, qui permet la cration de galeries d'images
afficher dans vos publications.
Vous commencez par crer un album dans lequel vous ajoutez des images une par une ou par groupe de faon trs simplifie,
vous les classez, puis vous pouvez afficher celles-ci divers endroits : dans un article, une page ou un widget. L'affichage peut
aussi prendre la forme d'un carrousel afin de faire dfiler les images de faon automatique, c'est vous de choisir.
Ici aussi, de nombreuses options permettent d'adapter le plugin tous vos besoins, que ce soit en changeant la taille, le style, les
dures de transitions des images, ou encore en permettant une slection prcise des images afficher en fonction du contexte de
la page visualise (voir la figure suivante).
L'affichage sous forme de galerie
WordPress est personnalisable l'aide de plugins. Ces modules permettent d'ajouter de nombreuses fonctionnalits.
Les plugins sont dvelopps par la communaut.
Il existe plus de 25 000 plugins, n'hsitez pas parcourir la bibliothque !
Partie 2 : Dvelopper votre thme 47/113
Partie 2 : Dvelopper votre thme
Premiers pas dans le code

Avant de nous attaquer au dveloppement sous WordPress, je propose une entre en matire gnrale afin de prendre nos
premires marques avec la documentation, ainsi que la structure de WordPress et de ses concepts. Une fois que nous aurons
dgrossi le sujet, vous serez prts plonger au cur de votre site !
Utiliser la documentation
Si vous avez dj dvelopp des sites web en utilisant un CMS ou un framework, vous avez probablement dj eu besoin de
rechercher des informations dans la documentation ddie. Dans le cas contraire, sachez que c'est une mine d'informations pour
les dveloppeurs qui dcrit l'ensemble des fonctionnalits fournies par l'application pour vous permettre de les exploiter.
Sur WordPress, la documentation s'appelle le codex et regroupe tout ce qu'il faut savoir sur la cration de thmes, de plugins ou
encore de widgets. Elle dcrit aussi le fonctionnement interne de WordPress, n'hsitez donc pas la parcourir si vous souhaitez
approfondir vos connaissances ou simplement dtailler un point prcis.
La structure de WordPress
Systme de fichiers
La plupart des fichiers situs directement la racine de WordPress sont soit des points dentre de lapplication (cest--dire
appels directement par le client lors dune requte vers le site) tels que index.php, wp-login.php ou wp-signup.php,
soit des fichiers permettant linitialisation de lapplication, comme wp-config.php ou wp-settings.php.
Vous avez ensuite trois dossiers qui regroupent le cur de WordPress :
wp-includes regroupe toute la logique de WordPress, pour toutes les fonctionnalits natives (hors administration).
wp-admin permet de regrouper les pages et fonctionnalits de linterface dadministration.
wp-content contient les plugins et les thmes installs dans votre application (respectivement dans les sous-dossiers
Plugins et Themes ), cest dans ce dossier que nous dvelopperons de nouvelles fonctionnalits.
J'insiste lourdement sur le fait que tout le code que vous crivez devra se trouver dans un plugin ou bien dans un thme, et nulle
part ailleurs ! Vous ne devez jamais modifier les fichiers natifs de WordPress pour des raisons de propret du code : tout ce qui
est spcifique votre site doit tre cloisonn pour tre facilement rutilisable. De plus, lorsque WordPress est mis jour, tous les
fichiers extrieurs aux plugins et aux thmes sont susceptibles d'tre modifis. Vos ventuelles modifications seraient donc
perdues !
Rien ne vous empche en revanche d'ouvrir les fichiers de WordPress, par exemple pour chercher ce que fait exactement une
fonction que vous utilisez. Il est ainsi trs commun d'avoir regarder le contenu du dossier wp-includes lorsque l'on
commence rajouter des fonctionnalits personnalises.
La base de donnes
Maintenant que vous avez fait connaissance avec les fichiers de WordPress, nous allons jeter un coup dil ce qui se cache
dans la base de donnes. Nayez pas peur, cest vraiment trs lger !
WordPress ne contient que 11 tables par dfaut, cest--dire si vous ne faites pas de modification particulire. Bien entendu, des
plugins peuvent crer de nouvelles tables si les fonctionnalits quils rajoutent le ncessitent.
wp_commentmeta et wp_comments permettent la sauvegarde des commentaires sur les publications du site.
wp_links tait utilise dans les anciennes versions de WordPress et est toujours prsente pour des raisons de
compatibilit.
wp_options contient les valeurs des paramtres de configuration du site, comme le slogan, qui peuvent tre ditables
dans linterface dadministration.
wp_postmeta et wp_posts stockent le contenu des publications du site, que ce soit des articles ou des pages, mais
aussi les menus. Il faut noter quil existe un systme de version des pages et des articles et que les diffrentes versions
sauvegardes sont reprsentes chacune par une ligne dans la table wp_posts.
wp_term_relationships, wp_term_taxonomy et wp_terms contiennent les informations relatives aux
catgories, aux tags, ainsi que leur lien avec les diffrents articles et pages du site.
wp_usermeta et wp_users maintiennent les donnes utilisateurs, que ce soit leur nom ou bien les droits accords
chacun.
Les noms des tables prsentes tiennent compte du prfixe par dfaut wp_ ajout lors d'une installation standard, le
dbut des noms peut donc varier si vous avez choisi un prfixe diffrent. Dans la suite du cours, les tables seront
notes avec le prfixe par dfaut.
Le principe des actions
Thorie
Dans WordPress, tout ou presque a t prvu dans le but de pouvoir tre adaptable par des dveloppeurs tiers voulant
personnaliser l'application. Pour cela, il faut que celle-ci fournisse un moyen de rajouter du code spcifique sans pour autant que
le dveloppeur ait besoin de modifier les fichiers natifs de WordPress. De cette faon, le code rajout peut tre partag sur un
autre site en ajoutant simplement de nouveaux fichiers et sans modifier les existants. Pour offrir cette possibilit, le concept des
actions a t introduit.
Une action est une fonction qui est appele lorsqu'un vnement particulier se produit, par exemple la sauvegarde d'un article par
un contributeur. L'ide gnrale est que, dans notre exemple, la fonction qui gre la sauvegarde de l'article va dclencher un
vnement intitul save_post, qu'un certain nombre de fonctions peuvent observer, pour s'excuter cet instant.
Le nombre de fonctions observant un vnement n'est pas limit, c'est l tout l'intrt de ce principe. Si vous avez besoin de faire
un traitement spcifique lorsqu'un article est sauvegard, il vous suffit de crer la fonction effectuant ce traitement et de la
brancher sur l'vnement save_post, et WordPress s'occupera de faire l'appel au moment opportun.
Les fonctions utilises
Concrtement, l'enregistrement d'une action se fait l'aide de la fonction add_action(), qui prend en paramtre le nom de
l'vnement dclencheur et le nom de la fonction appeler.
Un troisime argument peut-tre ajout cet appel, c'est la priorit. tant donn que les actions peuvent tre multiples sur un
vnement donn, vous pourriez avoir besoin de dterminer si votre action sera excute avant ou aprs une autre. C'est l'utilit
de la priorit : les actions ayant la priorit de plus faible niveau seront excutes en premier, la valeur par dfaut tant 10.
Ainsi, si vous voulez excuter un fonction nomme ma_fonction() aprs les autres actions observant l'vnement
save_post, vous pouvez faire l'appel qui suit.
Code : PHP
<?php
add_action('save_post', 'ma_fonction', 20);
L'appel aux actions connectes un vnement donn se fait lorsque la fonction do_action() est excute, celle-ci prenant
en argument le nom de l'vnement et les ventuels arguments passer aux actions excutes.
L'appel l'vnement save_post, situ dans le fichier wp-includes/post.php, suit bien entendu ce format :
Code : PHP
<?php
do_action('save_post', $post->ID, $post);
WordPress et la programmation oriente objet

Retour en arrire
Comme il a t dit en introduction, la premire version de WordPress est sortie au cours de l'anne 2003. De son ct, PHP5, qui
inclut un support avanc des concepts objets dans le langage, est sorti en 2004, soit peu de temps aprs.
Par consquent, le dveloppement de WordPress s'est l'origine purement organis sur du code procdural, c'est--dire sans
notions de programmation oriente objet. Au fil des versions, de nouveaux composants on t ajouts WordPress, et ceux-ci
ont t construits dans une mesure de plus en plus importante autour des objets.
Cependant, afin de maintenir la plus grande compatibilit possible pour les plugins et les thmes existants, crs par la
communaut, mais aussi pour ne pas avoir a rcrire compltement le CMS, une grande partie du code est reste sous forme
procdurale au fil des ans. Il est donc trs courant d'utiliser des fonctions de l'espace global, tout en ayant parfois affaire des
objets pour les fonctionnalits les plus rcentes de WordPress. Ne soyez donc pas tonn d'avoir manier ces deux aspects au
cours de vos dveloppements, c'est tout fait normal d'aprs la conception du moteur.
Et votre code dans tout a ?
En ce qui concerne le code que vous crirez, il n'y a pas de norme particulire suivre : de nombreux plugins sont encore crits
sans avoir une structure objet, d'autres au contraire y sont trs attachs. Dans la suite de ce cours, les exemples seront le plus
souvent orients objet, mais il reste toujours certains cas particuliers (notamment les thmes) pour lesquels la structure de
WordPress n'est pas adapte. Nous devrons donc aussi, suivant les cas, concilier les deux.
Gardez toutefois l'esprit que le choix reste le vtre et qu'aucune obligation n'existe. Si la programmation objet devient de plus en
plus utilise sur les applications PHP, le fonctionnement du CMS n'est pas toujours le choix le plus vident.
Le codex renferme toutes les informations techniques sur WordPress.

Il existe onze tables permettant de stocker l'ensemble des informations spcifiques votre site.
Les actions permettent d'excuter des fonctions lors du dclenchement d'vnements spcifiques.
WordPress contient du code procdural et orient objet dans son coeur, il vous appartient de choisir comment vous
souhaitez organiser votre propre code.
Les thmes
Nous avions vu dans la premire partie de ce cours comment installer un nouveau thme WordPress. Cela nous a permis de
modifier lapparence de notre site, mais il est certain que vous prfreriez avoir la possibilit de crer votre propre thme ou bien
de modifier un thme existant. Il est maintenant temps de nous y plonger !
Structure d'un thme
Pour crer un thme, il faut commencer par ajouter un dossier dans le rpertoire wp-content/themes. Ce dossier porte
gnralement le nom du thme (sans espaces, ni caractres spciaux), par exemple themezero .
Mais que mettre dans ce nouveau dossier ?
Dans WordPress, un thme a une structure assez simple, car il ne ncessite qu'au minimum, deux fichiers !
Le fichier styles.css
Tout d'abord, un fichier style.css permet de dclarer le thme auprs de WordPress ; on y renseignera notamment le nom du
thme, l'auteur et le site Internet, ou encore un numro de version. S'il est prfrable de remplir le plus d'informations possible,
notamment dans le cas o vous dcidiez de publier votre thme, seul le nom de celui-ci est obligatoire.
Pour dclarer le thme, il suffit de mettre les informations demandes dans un commentaire au dbut de votre fichier
style.css.
Code : CSS
/*
Theme Name : Le thme des zros
Author : Midnight Falcon
Author URI : http://monsiteweb.com
Description : Notre premier thme WordPress !
*/
Ce fichier style.css pourra aussi contenir des rgles de mise en forme CSS (c'est tout mme le but de ce type de fichier !). La
seule obligation est d'avoir un en-tte de dclaration du thme. Rien qu'avec ce fichier, WordPress est capable de dtecter votre
nouveau thme, celui-ci doit ainsi tre visible dans la liste des thmes (voir la figure suivante).
Le nouveau thme dans l'administration
Un premier fichier PHP
Ensuite, vous aurez besoin d'un fichier PHP pour gnrer le code HTML de la page. Un fichier index.php est le minimum pour
dmarrer et peut thoriquement suffire pour un thme, mme s'il sera difficile d'aller bien loin avec si peu !
a parat trop simple ! Comment peut-on grer tous les cas proprement avec seulement un seul fichier PHP ? J'ai vu des
thmes avec plus d'une dizaine de fichiers !
Effectivement, moins de grer tous les cas d'affichage dans votre fichier index.php et d'arriver un code illisible, votre
thme sera forcment incomplet. Pour cette raison, WordPress va lire un fichier diffrent du thme suivant le contexte de la page
courante. Par exemple, pour afficher la liste des articles associs une catgorie, le fichier category.php sera appel.
Cependant, si celui-ci n'existe pas, l'application applique le comportement par dfaut et c'est le fichier index.php qui sera
utilis pour le rendu.
Ce fonctionnement de WordPress est le mcanisme de fallback, il vous permet de ne pas avoir crer autant de fichiers que de
types de pages sur le site et de mutualiser le code pour les pages ayant un affichage semblable. Quand le fichier cens tre utilis
pour une page n'existe pas, on retombe sur un fichier par dfaut.
Aussi, cette hirarchie de fichier comporte en gnral plusieurs niveaux. Par exemple, si la catgorie que vous souhaitez afficher
s'appelle zro , WordPress ira tout d'abord chercher un fichier nomm category-zero.php, puis category.php si le
premier est inexistant. Puis, il ira chercher index.php.
Il y a en ralit cinq niveaux de hirarchie pour les templates d'une catgorie, j'ai volontairement simplifi le systme
pour que vous compreniez.
Nous pouvons d'ores et dj crer le fichier index.php et crire une simple ligne dedans.
Code : PHP
<?php
echo 'Bonjour les zros';
Activez maintenant le thme et rafrachissez une page pour constater que le fichier index.php est bien appel : le texte
Bonjour les zros s'affiche sur la page.
Un fichier courant : functions.php

Il reste un dernier fichier qui revient trs souvent dans les thmes, c'est le fichier functions.php qui contient des fonctions
aidant l'affichage dans un thme donn. Il ne s'occupe pas du rendu proprement parler mais vous permet principalement de
dfinir des traitements particuliers appeler depuis vos templates, dans le but d'viter d'alourdir ces derniers avec trop de code
PHP.
Son inclusion est faite automatiquement par WordPress s'il est prsent dans le dossier du thme courant. Les fonctions qui y
sont dfinies sont alors accessibles depuis tous les fichiers du thme.
Par exemple, crez une fonction display_hello() dans ce fichier :
Code : PHP
<?php
function display_hello()
{
echo 'Bonjour les zros';
}
Nous pouvons maintenant appeler cette fonction dans n'importe quel template de notre thme, nous allons donc le faire dans
index.php :
Code : PHP
<?php
display_hello();
Vous devez donc obtenir le mme rsultat que prcdemment, le code a simplement t dplac dans une fonction.
Hritage de thme
Avant de nous lancer tte baisse dans la cration dun nouveau thme partir de rien, commenons simplement : modifier un
thme existant.
En revanche, pas question de modifier directement les fichiers du thme original ! En effet, si jamais celui-ci venait tre mis
jour, vous perdriez vos modifications en tlchargeant les dernires nouveauts.
Pour concilier ces deux points, lhritage de thme est exactement ce dont vous avez besoin. Il s'agit de dfinir un thme dit
enfant qui pourra alors ne surcharger que les lments ncessaires du thme dit parent . Tous les fichiers qui ne sont pas
redfinis dans le thme enfant seront pris dans le thme parent. Vous tes donc libre de modifier ce que bon vous semble en
copiant certains fichiers du thme parent dans le thme enfant afin de les adapter l'apparence que vous souhaitez obtenir.
Dclaration du thme enfant
Comme pour la dclaration dun thme classique, un thme hrit consiste crer un nouveau dossier (par exemple enfant)
plac dans le rpertoire themes. Celui-ci doit contenir un fichier style.css indiquant des informations de base. En plus du
nom du nouveau thme, il faut indiquer quel thme sera le parent avec la ligne Template .
Code : CSS
/*
Theme Name : Mon template hrit
Template : twentythirteen
*/
Ici, nous avons cr un template enfant du thme par dfaut Twenty Thirteen . Notez bien que la directive Template doit
contenir le nom du dossier du thme parent, et non le nom du thme dclar dans le fichier style.css de ce dernier.
Si vous activez ce nouveau thme, vous vous rendrez compte que le contenu de la page est bon, mais la mise en forme est
compltement dtruite. Malgr lhritage de thme, le fichier style.css du thme parent nest pas pris en compte. Cest une
exception lhritage des fichiers de thme.
Le fichier functions.php est une autre exception : si vous en crez un dans le thme enfant, il sera inclus en plus
de celui du thme parent, mais ne lcrasera pas. Vous pouvez donc rajouter de nouvelles fonctions sans risquer de
rendre inutilisables celles qui taient cres par dfaut.
En revanche, rien ne vous empche de faire explicitement appel au fichier CSS du parent partir de votre propre fichier
style.css afin de rcuprer le design original.
Code : CSS
@import url("../twentythirteen/style.css");
Le site a maintenant d reprendre son apparence originale. Partant de cette tape, nous pouvons commencer rajouter de
nouvelles rgles CSS pour modifier le thme dorigine. Essayons par exemple de changer la couleur du nom du site.
Code : CSS
.site-header h1 {
color:green;
}
Si lon rafrachit lune des pages du site, le titre est bien devenu vert (voir la figure suivante).
Nouvelle couleur du titre
Surcharge de fichiers
Nous pouvons prsent modifier le style dun thme, mais pourquoi ne pas aller plus loin et modifier le contenu des pages ?
Par exemple, en bas de toutes les pages, vous pouvez voir que la signature de lquipe WordPress apparat. Vous souhaitez la
retirer ? Aucun problme, il suffit de surcharger le template footer.php pour retirer le lien qui y est gnr. Vous pouvez mme
en profiter pour rajouter votre propre mention, comme un copyright (voir la figure suivante).
Code : PHP
<footer id="colophon" role="contentinfo">

<div class="site-info">
Thme du zro, reproduction interdite.
</div>
</footer>
Le nouveau pied-de-page
Vous avez donc remplac le pied-de-page original par votre contenu personnel. Ce systme de surcharge fonctionne avec tous
les fichiers de templates, nhsitez donc pas lutiliser pour modifier des thmes existants.
Ajouter une zone de widgets
La majorit des thmes sous WordPress permettent l'ajout de widgets dans une ou plusieurs zones des pages du site. Il est
obligatoire qu'un thme supporte au moins une zone de widgets pour que ceux-ci puissent tre ajouts via le menu Apparence
> Widgets de l'administration, nous allons donc dtailler la cration d'une telle zone.
Enregistrer la zone
Pour pouvoir afficher une zone de widgets, il faut commencer par l'enregistrer avec la fonction register_sidebar(), qui
prend un tableau en paramtre. Celui-ci peut avoir jusqu' sept cls :
id : un id unique qui servira afficher la zone ;

name : le nom de la zone qui sera affich dans l'administration ;
description : le texte afficher sur la page de gestion des widgets ;
before_widget : code HTML afficher avant chaque widget ;
after_widget : code HTML afficher avant chaque widget ;
before_title : code HTML afficher avant chaque titre de widget ;
after_title : code HTML afficher aprs chaque titre de widget.
Aucune des cls n'est obligatoire mais mieux vaut toutes les dfinir vous-mme, sinon WordPress choisira des valeurs par dfaut
(entre autres, l'id sera gnr de faon tre unique). De plus, la fonction doit tre excute lors de l'action widget_init, il
faudra donc passer par un appel la fonction add_action(). Dans le fichier functions.php du thme, nous ajoutons
donc le code suivant :
Code : PHP
<?php
add_action('widgets_init','zero_add_sidebar');
function zero_add_sidebar()
{
register_sidebar(array(
'id' => 'my_custom_zone',
'name' => 'Zone suprieure',
'description' => 'Apparait en haut du site',
'before_widget' => '<aside>',
'after_widget' => '</aside>',
'before_title' => '<h1>',
'after_title' => '</h1>'
));
}
Vous devriez maintenant voir apparatre, comme sur la figure suivante, la nouvelle zone sur la page d'dition des widgets dans
l'administration.
Apparition de la nouvelle zone dans l'administration
Afficher les widgets
Une fois la zone de widgets cre, vous pouvez l'afficher o bon vous semble dans votre thme avec un appel
dynamic_sidebar(), prenant en paramtre l'id de la zone choisie.
Code : PHP
<div><?php dynamic_sidebar('my_custom_zone');?></div>
Une mthode alternative : des widgets sans zone
Il est aussi possible d'afficher un widget dans un thme sans passer par une zone ddie. Mais si vous procdez ainsi, le widget
ne sera pas modifiable dans le menu "Apparence > Widgets", c'est donc une mthode moins commune d'afficher les widgets.
Pour procder, nous devons appeler la fonction the_widget(), pouvant prendre trois paramtres :
Code : PHP
<?php the_widget( $widget, $instance, $args ); ?>
Le paramtre $widget correspond au nom du widget ajouter, c'est--dire la classe PHP dcrivant le widget. La liste des widget
natifs de WordPress est disponible sur cette page de la documentation.
Le paramtre $instance doit contenir les paramtres (sous forme d'un tableau) du widget, c'est--dire ceux que vous auriez dfinis
dans l'administration lors de l'ajout du widget une zone, par exemple le titre. De nouveau, les valeurs possibles sont indiques
dans la documentation.
Enfin, $args ( nouveau un tableau) permet de choisir la valeur des variables before_widget, after_widget,
before_title, after_title, que nous avons vues plus haut. Seul le premier argument est obligatoire, il est donc trs
simple d'ajouter un widget avec cette fonction.
Code : PHP
<?php the_widget( 'WP_Widget_Calendar'); ?>
Ajouter un menu
Dclaration du menu
De mme que pour les widgets, l'affichage d'un menu passe par une zone ddie qui doit tre au pralable dclare par le thme
pour tre utilise lors de l'initialisation de WordPress. L'enregistrement se fait au travers de la fonction
register_nav_menu(), prenant deux paramtres : l'identifiant du menu, qui doit tre unique pour un thme donn (un
thme peut utiliser plusieurs menus), et le libell du menu, qui sera affich dans le panneau d'administration pour l'identifier sur
l'cran de gestion des menus.
Il vous suffit donc d'utiliser une action sur l'vnement init comme dans l'exemple suivant.
Code : PHP
<?php
add_action('init', 'zero_add_menu');
function zero_add_menu()
{
register_nav_menu('main_menu', 'Menu principal');
}
Cet emplacement doit maintenant apparatre dans l'interface d'administration (la gestion des menus) ds lors que votre thme est
actif.
Apparition de la nouvelle zone de menu
L'affichage
Pour afficher le menu, il vous suffit d'appeler la fonction wp_nav_menu() qui ncessite un tableau comme unique paramtre.
Celui-ci peut contenir les diffrentes cls suivantes :
theme_location : c'est la zone de menu que vous souhaitez afficher. Ce sera le plus souvent la seule cl vraiment
ncessaire prciser ;
menu : si vous souhaitez insrer un menu prcis, spcifiez son nom ici ;
menu_class : ceci est la classe CSS appliquer au menu, la valeur par dfaut tant 'menu' ;
container : la balise HTML pour dfinir le conteneur du menu (par exemple 'div', qui est la valeur par dfaut) ;
container_class : la classe CSS appliquer au conteneur du menu ;
before, after : du code HTML insrer avant (ou aprs) chaque lien du menu.
Vous devez donc fournir vos paramtres sous la forme dun tableau avec des paires cl-valeur. Pour rappel, la cl pour indiquer le
nom Menu est : theme_location. L'appel le plus simple du menu tient donc simplement en une ligne :
Code : PHP
<?php wp_nav_menu(array('theme_location' => 'main_menu'));
Pour que votre menu s'affiche sur le site, n'oubliez pas de l'assigner la zone voulue dans le panneau d'administration.
Un thme a besoin au minimum d'un fichier style.css et index.php pour fonctionner.

Faire hriter un thme enfant permet de personnaliser un design existant sans modifier le thme parent
Les widgets et les menus peuvent tre ajouts dans un thme. Pour cela, il faut dclarer au moins une zone d'accueil
pouvant les accueillir.
Le processus de rendu
Aprs avoir cr un thme pour personnaliser l'apparence du site avec notre propre code HTML et CSS, nous allons dtailler le
processus de rendu des pages dans WordPress, afin de savoir quelles fonctionnalits sont disponibles pour modifier le
comportement de l'application un point donn.
La boucle de rendu
Les templates tags
Prsentation
Lensemble des fonctions fournies et conues pour tre appeles directement dans les fichiers de thme, sont appeles des
template tags. Ces fonctions de WordPress peuvent avoir plusieurs utilisations :
afficher une contenu sur une page ;

vrifier une condition ;
rcuprer une information globale comme le titre du site ou son adresse.
Par exemple, la fonction bloginfo() permet de rcuprer toutes sortes de valeurs dans la base de donnes en fonction du
paramtre quon lui fournit : le nom du blog, le rpertoire du thme utilis, la version de WordPress Aussi, la fonction
wp_title() se charge de calculer la valeur du texte prsent dans la balise <title> de votre page HTML en fonction de la
page vue, ce qui nous vite de faire divers tests pour le dterminer ( moins que vous ne vouliez afficher une valeur spcifique).
Le but des template tags est donc d'afficher les lments ajouts par ladministrateur du site (par exemple les articles) grce
l'utilisation de fonctions PHP spcifiques.
Structurer le site
Les template tags permettent aussi d'appeler des portions de code affiches sur de nombreuses pages, comme c'est le cas de l'en-
tte et du pied de page, prsents sur l'ensemble du site. Pour ces lments, les fonctions get_header() et get_footer()
ont t cres et se chargent de l'inclusion dans votre page des fichiers header.php et footer.php respectivement.
Ainsi, en crant ces deux fichiers avec les contenus pour l'en-tte et le pied de page, le fichier index.php peut tre crit ainsi :
Code : PHP
<?php get_header() ?>

<?php get_footer() ?>
Rendu dun contenu
Les pages et articles
Le rendu dune page ou dun article passe donc lui aussi par lutilisation dun template tag particulier. Cependant, il doit suivre
un processus prvu par WordPress qui est appel la boucle de rendu, consistant en un appel successif de fonctions qui
permettent la rcupration des informations au sein dune boucle.
La boucle de rendu la plus simple fait appel au moins trois fonctions diffrentes de WordPress afin de parcourir et afficher les
articles rcuprs.
Code : PHP
<?php
while (have_posts()) :
the_post();
the_content();
endwhile; ?>
Pour la simplicit du code, il n'y a pas de HTML dans les templates, mais vous en aurez trs probablement besoin dans
un vrai thme pour obtenir le design de votre choix.
La fonction have_posts() renvoie un boolen pour savoir sil reste des objets afficher sur la page en cours. Par exemple,
lorsque lon cherche lister les derniers articles dun blog, la fonction renverra true tant que tous les articles rcuprs dans la
base de donnes nauront pas t affichs.
lintrieur de la boucle, la fonction the_post() effectue la rcupration dun article. chaque appel de cette fonction, un
curseur interne WordPress slectionne larticle suivant dans la liste de ceux que lon a rcuprs. Lorsque le curseur arrivera au
dernier article, alors la mthode have_posts() renverra false et la boucle se terminera.
Une fois que le curseur est positionn sur un article, il faut appeler la fonction the_content() qui se charge de laffichage
du contenu de larticle en lui mme. Cette fonction est donc conue pour fonctionner l'intrieur de la boucle de rendu, car elle
est associe au rendu d'un article donn. De mme, l'utilisation de la fonction the_title() au sein de la boucle permettra
d'afficher le titre de l'article en cours.
Pourquoi utiliser une boucle lorsque lon sait que lon aura un seul objet, par exemple une page ?
En effet, utiliser la boucle de rendu pour une page peut paratre lourd alors que lon sait lavance quil ny aura quun seul
passage. Noubliez cependant pas que WordPress a un systme de fallback (c'est--dire une procdure par dfaut) pour
lutilisation des templates. Il est donc possible (et c'est souvent le cas) quun template donn soit utilis pour le rendu des pages
et des listes darticles, qui seront quant eux plusieurs sur une mme page HTML. Utiliser la boucle permet donc davoir des
templates plus gnriques et qui fonctionneront quel que soit lentit que lon cherche afficher.
Les commentaires
Avec l'affichage des publications viennent aussi les commentaires de vos visiteurs, que vous aurez besoin d'intgrer dans votre
thme. nouveau, tout se joue avec l'utilisation des bons template tags l'endroit o vous dsirez afficher les commentaires.
Tout d'abord, la fonction comments_template(), appele dans la boucle de rendu, inclut le fichier comments.php que nous
verrons plus bas et qui se charge de la mise en forme des commentaires. Ensuite, la fonction comment_form() cre le formulaire
pour les utilisateurs voulant ajouter un nouveau commentaire une publication. La boucle de rendu se complte donc encore un
peu avec ces nouvelles fonctions.
Code : PHP
<?php
while (have_posts()) :
the_post();
the_content();
comments_template();
comment_form();
endwhile; ?>
Le fichier comments.php, si l'on met de ct la mise en forme, n'a besoin que d'appeler wp_list_comments() pour
afficher les commentaires associs l'article. Cette fonction se charge de l'itration au travers de la liste des commentaires
associs la publication actuellement parcourue par la boucle de rendu.
Code : PHP
<ol>
<?php wp_list_comments(); ?>
</ol>
Les filtres
Mme si nous avons notre disposition toutes les fonctions ncessaires pour rcuprer les contenus du site, il y a fort parier
pour que vous vouliez, un moment ou un autre, modifier la valeur de retour d'une fonction native de WordPress.
Prenons la fonction the_title(), qui permet dobtenir le titre de larticle ou de la page en cours. Supposons que vous ne
vouliez afficher au maximum que les 50 premiers caractres du titre si celui-ci est trop long. Regardons le prototype de la fonction
(dans le fichier wp-includes/post-template.php) :
Code : PHP
<?php function the_title($before = '', $after = '', $echo = true)
Le fonction permet de rajouter du code HTML avant et aprs le titre avec les deux premiers paramtres, tandis que le troisime
indique si elle doit retourner la valeur du titre ou lafficher elle-mme via un echo.
Ce dernier argument pourrait tre utilis (en choisissant la valeur false) pour faire un traitement la suite de la rcupration du
titre. En revanche, ce traitement particulier devrait tre excut pour chaque template qui utilise cette fonction : cest lourd et cela
charge les templates de traitements supplmentaires.
Pour viter cela, WordPress propose un systme de filtres sur lesquels vous pouvez brancher des fonctions effectuant un
traitement comme celui que lon dsire obtenir.
Appeler un filtre
Pour bien comprendre comment WordPress vous permet dajouter un traitement particulier un endroit du code, il faut voir
comment les filtres sont appels.
La fonction apply_filters() dclenche lapplication de toutes les fonctions rattaches une cl de filtre donne. Cette cl
de filtre est le premier argument de la fonction, suivi par les paramtres envoys.
Si nous revenons la fonction the_title(), nous voyons quelle fait elle-mme un appel la fonction
get_the_title() situe dans le mme fichier (wp-includes/post-template.php). Cest cette dernire qui excute
apply_filters() avant de renvoyer la valeur du titre le larticle que lon dsire obtenir. Cet appel contient trois arguments :
Code : PHP
<?php apply_filters( 'the_title', $title, $id );
La cl du filtre est donc the_title, tandis que deux arguments sont passs aux fonctions de retour : le titre de larticle et son
ID dans la base de donnes. partir de ces donnes qui seront transfres au filtre, vous avez les moyens dappliquer vos
traitements.
Brancher un filtre
Pour brancher une fonction de filtre, nous utilisons la fonction add_filter() prenant deux paramtres : le nom du filtre et
une fonction de rappel lorsque le filtre doit tre excut.
Pour cela, vous devrez utiliser le fichier functions.php (crez-le si vous ne lavez pas encore) de notre thme et qui est
inclus automatiquement par WordPress sil existe.
Code : PHP
<?php add_filter('the_title', 'truncate_long_title');
Bien entendu il faut maintenant dclarer la fonction truncate_long_title() pour que le filtre fonctionne. Faites cela la
suite, toujours dans functions.php.
Code : PHP
<?php
function truncate_long_title($title)
{
if (strlen($title) > 50) {
$title = substr($title, 0, 50).'...';
}
return $title;
}
Maintenant, si vous crez un article avec plus de 50 caractres dans son titre, il sera coup.
Ce quil faut vraiment retenir ici, cest que nous avons pu tendre une fonctionnalit de WordPress sans pour autant avoir
modifi le code du cur de lapplication : tout le code supplmentaire se trouve uniquement dans le thme que nous avons cr.
Cest un principe de dveloppement auquel il faut se tenir si lon veut proposer du code maintenable et pouvant rester
fonctionnel mme avec de nouvelles versions du moteur.
Ajouter des templates personnaliss
Nous avons un dernier point important claircir pour conclure cet aperu des thmes de WordPress. Jusque l, vous savez
comment dclarer des fichiers de thme dont le nom est dfini par WordPress (comme content.php ou footer.php) et
comment les surcharger grce aux thmes enfants. Mais comment utiliser des fichiers totalement personnaliss qui ne sont
utilisables que sur votre site et dont le choix du nom sera arbitraire ?
On ne peut pas simplement utiliser la fonction require de PHP ?
C'est une solution envisageable, mais qui manque beaucoup de souplesse, car vous devrez indiquer le chemin du fichier lors de
l'appel.
Code : PHP
<?php
require __DIR__ . '/mon-template.php';
// ou mieux :
require STYLESHEETPATH . '/mon-template.php';
La constante STYLESHEETPATH correspond au chemin du rpertoire de votre thme, c'est--dire le dossier dans
lequel se situe le fichier style.css. Il n'est donc pas ncessaire de connatre le nom du thme pour avoir le chemin
des fichiers.
Malheureusement avec ce fonctionnement, nous perdons tout le mcanisme de fallback de WordPress. En effet, si le fichier
n'existe pas, nous aurons une erreur d'excution lors de la tentative d'inclusion. De plus, dans le premier cas, il n'est pas possible
pour un thme enfant de surcharger uniquement le fichier mon-template.php, il faudra aussi surcharger les appels. Et dans
le second cas d'inclusion, le fichier devrait obligatoirement tre redfini dans le thme enfant, ce qui va l'encontre du systme
d'hritage de thme.
Pour rsoudre ce problme, il existe la fonction get_template_part() dfinie dans le fichier wp-includes/general-
template.php comme suit :
Code : PHP
<?php function get_template_part( $slug, $name = null )
Cette fonction inclut le fichier de template de la forme $slug-$name.php, ou $slug.php si $name vaut null ou que le
premier n'existe pas, tout en conservant le mcanisme de fallback.
Ainsi, l'appel notre fichier spcifique devient tout simplement :
Code : PHP
<?php
get_template_part( 'mon-template.php' );
N'hsitez pas vous servir de l'argument $name pour cette fonction si la fonctionnalit spcifique que vous dsirez
coder doit comporter plusieurs templates. De cette faon, vous pouvez regrouper sous le mme prfixe (l'argument
$slug) plusieurs templates similaires.
La boucle de rendu est charge d'afficher l'ensemble des articles correspondant une page donne du site.
Les fonctions de filtres permettent de modifier le contenu de la valeur de retour de certaines fonctions, comme le titre de
la page ou le contenu d'un article.
Vous pouvez inclure des fichiers spcifiques avec la fonction get_template_part().
Linternationalisation
Lorsqu'un site peut tre visible de tous ou que l'on dveloppe des fonctionnalits (thmes ou plugins) pouvant tre rutilises
par n'importe qui dans le monde, il est essentiel de penser la traduction des textes qui seront affichs sur l'cran des
utilisateurs. Pour cela, il faut prparer la traduction des chanes de caractres en utilisant des fonctions de traduction, puis
raliser les traductions de vos textes dans les langues que vous souhaitez proposer.
Les fonctions de traduction
Traduire un texte
La traduction dun texte passe toujours par une fonction de traduction dont le travail est de trouver la correspondance entre une
chane de caractres dans une langue donne (gnralement langlais) et la chane traduite dans une autre langue. La chane
originale est appele cl de traduction. Cest elle qui sera crite dans le code PHP et que lon traduira vers le langage dsir dans
des fichiers annexes contenant lensemble des traductions possibles.
Comment WordPress dtermine-t-il la langue de lutilisateur ?
La langue dans laquelle traduire le texte est dtermine par la locale de lapplication. C'est un code permettant de dterminer le
pays et la rgion parlant la langue choisie. Par exemple, la locale de la France est fr_FR, celle des tats-Unis est us_EN. La locale
de votre application WordPress est inscrite dans le fichier wp-config.php, lorsque la constante WPLANG est dfinie.
Code : PHP
<?php
define('WPLANG', 'fr_FR');
Pour traduire une cl donne, WordPress utilise une fonction nomme __() (deux underscores successifs) qui prend comme
paramtre la cl de traduction. Sa valeur de retour est le texte traduit dans la langue souhaite. Il est aussi possible dutiliser la
fonction _e(), qui fonctionne exactement de la mme faon que la prcdente, mais qui utilise un echo pour afficher
directement le rsultat de la traduction, au lieu de la renvoyer laide dun return. Elle est donc trs adapte une utilisation
dans les fichiers de thmes.
En reprenant le fichier footer.php que nous avions modifi plus tt dans notre thme, nous pouvons placer le texte (en
anglais maintenant) spcifique notre thme dans une fonction de traduction.
Code : PHP
<?php _e('Zero theme, copy is forbidden.'); ?>
Le texte nest pas traduit quand jaffiche la page, cest normal ?
Cest parfaitement normal : nous n'avons indiqu nulle part comment traduire le texte. Dans le cas o la fonction de traduction ne
trouve pas de correspondance entre la cl de traduction et la locale demande, elle renvoie directement la cl. Ainsi, si lon
demande la traduction dune cl qui na pas t intgre dans les fichiers de traductions, aucune modification ne sera effectue.
Il faudra donc absolument rajouter la correspondance dans la langue choisie !
Le domaine de traduction
Les fonctions de traduction __() et _e() prennent en plus de la cl un second paramtre optionnel correspondant au domaine
de traduction. Le domaine de traduction permet de spcifier plus prcisment lorigine de la traduction que vous utilisez,
notamment si celle-ci est spcifique un thme ou un plugin donn. Dans ce cas, vous pourrez placer toutes les traductions du
domaine dans un fichier unique, sans avoir modifier dautres fichiers de traductions.
Par exemple, dans le thme TwentyThirteen, le texte "Laisser un commentaire" visible sous les articles est dclar ainsi :
Code : PHP
<?php
__( 'Leave a comment', 'twentythirteen' )
Pour tre utilis, le domaine doit auparavant tre dclar, par exemple dans le fichier functions.php de votre thme, laide
de la fonction load_theme_textdomain(). Cette fonction attend de recevoir le domaine dclarer et le chemin vers les
fichiers de traduction pour ce domaine. Par convention, le chemin choisi est un dossier languages dans le dossier du thme.
Le thme TwentytThirteen procde donc lui aussi de cette manire :
Code : PHP
<?php
load_theme_textdomain( 'twentythirteen', get_template_directory() .
'/languages' );
Si les fichiers de traduction ne sont pas trouvs dans le dossier dclar, comme cest le cas pour TwentyThirteen, alors
WordPress ira les chercher dans le dossier wp-content/languages/themes.
Ajouter des traductions
Pour ajouter de nouvelles traductions, nous devons gnrer les fichiers qui contiendront les associations entre les cls de
traduction et les textes traduits dans chaque langue. Les fichiers dont WordPress a besoin sont des fichiers MO (Machine
Object) crits en langage binaire et donc illisibles pour nous. Heureusement, nous pouvons crire les fichiers de traduction dans
un format lisible puis les convertir en fichiers MO pour WordPress.
Utiliser Poedit
Nous allons utiliser le logiciel Poedit pour grer les traductions de notre thme car il a lavantage dtre disponible sous
Windows, Mac et Linux et il est relativement simple lutilisation. Vous pouvez le tlcharger sur le site officiel.
Une fois tlcharg et install, lancez Poedit. Vous devez, comme sur la figure suivante, arriver sur une interface trs minimaliste.
L'accueil de Poedit
La premire chose faire est de crer un Catalogue , cest ce qui correspondra un domaine dans WordPress. Ouvrez le menu
Fichier > Nouveau catalogue , puis ouvrez longlet Chemins des sources dans la fentre qui souvre. Poedit est capable
de lire les fichiers PHP la recherche de fonctions de traduction. Il vous propose donc dindiquer le chemin de vos fichiers PHP
pour les lire la recherche de vos cls de traduction. Cliquez donc sur le bouton Nouvel lment , puis crivez le chemin
complet vers votre thme dans la zone de texte (voir la figure suivante).
Le chemin vers vos
fichiers sources
Allez ensuite dans Mots-cls source et ajoutez le nom des deux fonctions permettant deffectuer des traductions dans
WordPress : _e (underscore puis e ) et __ (deux underscores). Cela permet Poedit de savoir quelle fonction chercher dans le
code pour rcuprer les cls de traduction (voir la figure suivante).
Les noms des fonctions
de traductions
Choisissez ensuite Accepter et vous devriez voir la liste des textes traduisibles dans le thme choisi (voir la figure suivante).
Affichage de la liste des cls de traduction
Il ne vous reste plus qu slectionner la ligne traduire puis crire la traduction de chaque cl dans la case Traduction en
bas. Une fois termin, allez dans Fichier > Enregistrer sous pour sauvegarder les traductions au format PO ainsi quune
copie au format MO.
Si vous souhaitez modifier des traductions aprs avoir dj export les fichiers, vous pouvez rouvrir le fichier PO puis le
sauvegarder avec vos changements, le fichier MO sera lui aussi mis jour.
Utiliser les traductions dans un thme
Pour que le fichier de traductions soit utilis dans le thme, nous devons placer le fichier MO dans le dossier wp-
content/themes/zero/languages. Le nom du fichier MO doit tre de la forme locale.mo, par exemple fr_FR.mo.
Il ne manque plus que la dclaration du domaine dans le fichier functions.php, et lappel de celui-ci dans les fonctions de
traduction.
Code : PHP
<?php
load_theme_textdomain( 'zero', get_stylesheet_directory() .
'/languages' );
Code : PHP
<?php _e('Zero theme, copy is forbidden.', 'zero'); ?>
La traduction est traite par les fonctions __() et _e().

Les valeurs d'une cl de traduction dans une langue donne doivent tre crites dans des fichiers PO compils au format
MO.
Le domaine de traduction permet de regrouper les traductions, notamment pour les thmes et les plugins.
TP : Personnalisez votre thme

Nous avons d'ores et dj parcouru de nombreuses fonctionnalits de WordPress pour lesquelles il vous est possible de faire
des dveloppements spcifiques. L'objectif tant d'adapter l'application au design que vous dsirez. Ce TP est l'occasion de
mettre en pratique ces notions, en crant votre premier thme original !
Prsentation de l'exercice
Consignes
Pour cet exercice, vous devez crer un thme original sans base de dpart et sans utiliser l'hritage de thme. De plus, votre
thme devra inclure les lments suivants :
au moins un emplacement pour le menu ;

au moins une zone de widget ;
le support des pages, articles et commentaires ;
les diffrents lments doivent tre judicieusement spars en utilisant les template tags ;
les portions de texte faisant partie du design doivent pouvoir tre traduites.
En plus de ces points, vous pouvez, si vous vous sentez l'aise, utiliser le systme de fallback de WordPress en crant un
affichage spcifique pour une page catgorie (avec le fichier category.php), ou bien pour les publications de type Page
(avec un fichier page.php).
Si vous tes en mal d'inspiration, voici (dans la figure suivante) la page d'accueil du thme ralis pour cet exercice et qui inclut
les lments demands.
Exemple de
ralisation
Indications
Vous ne savez pas par o commencer ? Voici un exemple de marche suivre, que vous pouvez appliquer :
dclarer le nouveau thme avec les fichiers index.php et style.css ;

mettre en place les diffrents fichiers PHP dont vous aurez besoin ;
construire le fichier index.php petit petit en testant et vrifiant rgulirement que les lments se comportent comme
prvu.
Enfin, prenez le temps d'implmenter chaque fonctionnalit demande en y allant progressivement. Rien ne presse, l'important
tant d'arriver au bout !
Correction
Dclarer les emplacements du menu et du widget
Commenons par le fichier functions.php, afin de dclarer tout de suite un emplacement pour le menu et une zone de
widget, que nous utiliserons par la suite dans le thme.
Code : PHP
<?php
add_action('widgets_init','tp_add_sidebar');
function tp_add_sidebar()
{
register_sidebar(array(
'id' => 'zone_widget_droite',
'name' => 'Zone latrale droite',
'description' => 'Apparait sur la droite site',
'before_widget' => '<aside>',
'after_widget' => '</aside>',
'before_title' => '<h1>',
'after_title' => '</h1>'
));
}
add_action('init', 'tp_add_menu');
function tp_add_menu()
{
register_nav_menu('main_menu', 'Menu principal');
}
Gestion des lments affichs
Nous continuons ensuite avec index.php, dont le rle est de rassembler la gestion de tous les lments affichs sur le site.
Nous devons appeler l'en-tte, la barre latrale pour les widgets et le pied de page. Au milieu, nous ajoutons la boucle de rendu
qui se charge d'afficher les publications en fonction de la page sur laquelle nous nous trouvons.
Code : PHP
<?php get_header(); ?>

<div class="container">
<div class="content">
<?php
while (have_posts()) {
the_post();
get_template_part('content');
}?>
</div>
<?php get_sidebar() ?>
</div>
<?php get_footer();
Vous pouvez noter l'utilisation d'un template spcifique pour l'affichage du contenu des publications grce la fonction
get_template_part().
Dans le fichier header.php, nous ajoutons le dbut du code HTML pour nos pages, avec l'inclusion du fichier CSS, le titre du
blog ainsi que son slogan avec la fonction bloginfo(), et le menu qui a t dclar plus haut.
Code : PHP
<!doctype html>
<html>
<head>
<title><?php echo wp_title() ?></title>
<link rel="stylesheet" href="wp-
content/themes/themetp/style.css" type="text/css"/>
</head>
<body>
<header class="header">
<div class="container">
<h1><?php bloginfo() ?></h1>
<h2><?php bloginfo( 'description' ); ?></h2>
<?php wp_nav_menu(array('theme_location' => 'main_menu')) ?>
</div>
</header>
Le pied de page est ici trs simple. Vous pouvez y ajouter une mention de l'auteur et le nom de votre thme par exemple. Pensez
donner la possibilit de traduire le texte avec la fonction _e() !
Code : PHP
<footer>
<p><?php _e('Mon premier thme') ?></p>
</footer>
</body>
</html>
Pour afficher les widgets, nous passons par le fichier sidebar.php, appel grce la fonction get_sidebar() depuis
index.php.
Code : PHP
<div class="widgets">
<?php dynamic_sidebar('zone_widget_droite'); ?>
</div>
Il nous reste maintenant afficher le contenu des publications en lui-mme. Faisons cela dans le fichier content.php et
affichons le titre de chaque article, son contenu puis les commentaires associs, ces derniers tant traits dans
comments.php.
Code : PHP
<article class="post">
<h1><?php the_title() ?></h1>
<div>
<?php the_content(); ?>
</div>
<?php comments_template() ?>
<?php comment_form(); ?>
</article>
Code : PHP
<ol>
<?php wp_list_comments(); ?>
</ol>
Vous tes maintenant capables de mettre en place (ou de modifier) un thme WordPress pour l'adapter aux besoin d'un site.
N'oubliez pas que l'apparence est la premire chose que l'on voit lorsque l'on arrive sur une page web. Il est donc important d'y
apporter du soin, notamment avec les rgles de formatage CSS !
Corrig type
Vous trouverez donc ci-dessous le fichier CSS utilis pour raliser l'illustration d'exemple prsente avec les consignes de ce TP.
Code : CSS
/*
Theme Name: Thme TP
*/
* {
margin:0;
padding:0;
text-decoration:none;
color:black;
font-family:sans-serif;
}
body {background:#F5F5F5;}
h1,h2 {color:#555;}
a {color:#DDAA88}
.container {
margin:0 auto;
width:900px;
}
.header {
background:#E9E9E9;
border-bottom:1px solid #E0E0E0;
margin-bottom:20px;
padding-top:10px;
}
.header h1 {
color:#CC3030;
font-size:40px;
margin:10px 0;
}
.header h2 {
color:#FF9090;
font-size:24px;
}
.content {
display:inline-block;
width:650px;
}
.menu li {
border-right:1px solid #DDD;
padding:10px;
list-style:none;
}
.menu li:last-child {border:none;}
.menu a {color:#555;}
.current-menu-item a {color:#E44;}
.widgets {
width:200px;
vertical-align:top;
}
.widgets li {list-style:none;}
.widgets aside {
background:#FFF;
border-radius:3px;
box-shadow:0 2px 6px -2px #999;
margin:0 0 15px;
padding:15px;
}
.widgets aside h1 {
border-bottom: 1px dashed #CCC;
color:#555;
margin-bottom:10px;
font-size:18px;
}
.post {
background:#FFF;
border-radius:3px;
box-shadow:0 2px 6px -2px #999;
margin:0 10px 15px;
padding:20px;
}
.post h1 {margin-bottom: 15px;}
.comment-respond {
border-top:1px solid #DDD;
font-size:14px;
margin:20px 5px;
padding-top:10px;
}
footer {
text-align:center;
font-size:12px;
background:#E9E9E9;
border-top:1px solid #E0E0E0;
margin-top:20px;
padding:10px 0;
}
Partie 3 : Dvelopper un plugin complet 74/113
Partie 3 : Dvelopper un plugin complet
Crer des plugins

Aprs avoir vu thmes, nous aborderons ici le second point majeur de WordPress : les plugins. Le support de ces modules
additionnels a pour objectif de vous offrir un moyen sans limite de rajouter de nouvelles fonctionnalits WordPress, qu'elles
soient spcifiques votre site ou bien rutilisables les autres. Grce aux plugins, vous pourrez ajouter tout ce dont vous avez
besoin. Aprs avoir abord les principes de la cration d'un plugin sous WordPress, nous suivrons pas pas les tapes de
cration travers une tude de cas.
Dclarer le plugin
De mme que les thmes, les plugins ont une structure de base trs simple. Seul un minimum d'actions doit tre excut pour
pouvoir les dclarer, et c'est ensuite vous d'y rajouter des fonctions pour complter leur structure.
Les plugins doivent tous tre situs dans le dossier wp-content/plugins, et peuvent tre constitus d'un ou plusieurs
fichiers.
Tout d'abord, crons un dossier zero dans lequel seront placs les fichiers PHP du plugin, ainsi qu'un premier fichier
zero.php.
Ce premier fichier ne doit pas obligatoirement tre nomm comme le dossier parent, mais c'est prfrable par
convention.
Pour que le plugin soit reconnu par WordPress, il faut ncessairement dclarer au moins son nom dans le fichier principal. Nous
faisons cela via un commentaire au dbut du fichier.
Code : PHP
<?php
/*
Plugin Name: Nom du Plugin
*/
Si vous souhaitez donner plus d'informations propos de votre plugin, notamment si vous souhaitez le distribuer, il existe
d'autres informations qu'il est recommand d'indiquer la suite du nom.
Plugin URI : l'adresse du site de votre plugin dcrivant son fonctionnement et donnant des informations complmentaires
;
Description : un paragraphe de description du plugin, affich en parcourant la liste des plugins ;
Version : la version du plugin ;
Author : votre nom ;
Author URI : l'adresse de votre site ;
License : un nom de licence pour le code du plugin.
Nous pouvons donc avoir un en-tte comme celui-ci :

Code : PHP
<?php
/*
Plugin Name: Zero plugin
Plugin URI: http://zero-plugin.com
Description: Un plugin d'introduction pour le dveloppement sous
WordPress
Version: 0.1
Author: Midnight Falcon
Author URI: http://votre-site.com
License: GPL2
*/
Votre plugin est maintenant reconnu par WordPress ! Pour le vrifier, allez dans l'interface d'administration. Vous devez le voir
apparatre dans la liste des extensions. Si c'est le cas, activez-le (voir la figure suivante) !
Le plugin est
reconnu par WordPress
Nos premires fonctions

crivons maintenant notre premire fonction dans ce plugin. Tout ce qui est dclar dans le plugin peut tre appel depuis
nimporte quel autre endroit du code, que ce soit depuis un thme ou un autre plugin. Il est donc tout fait possible pour un
plugin dutiliser les fonctions dun autre plugin, si celui-ci a t activ sur votre site.
Malgr cela, il est prfrable dutiliser au maximum le systme modulaire de WordPress pour appeler vos fonctions, comme nous
lavons fait plus tt avec les filtres et la fonction add_filter(). De cette faon, il nest pas ncessaire dappeler les
fonctions du plugin en dehors de celui-ci, ce qui limite les dpendances et les besoins de crer des appels depuis lextrieur. En
particulier, utiliser les filtres vous permet de rendre votre plugin compatible avec nimporte quel thme de votre site, puisquil
enregistra de lui-mme les actions quil doit effectuer.
Rajouter un filtre simple
Notre premire tche sera de modifier sur toutes les pages lattribut <title> pour indiquer que le plugin est activ. Pour ce
faire, le filtre wp_title, appel avec la fonction the_title(), est idal pour nous.
Code : PHP
<?php
add_filter('wp_title', 'zero_modify_page_title', 20) ;
function zero_modify_page_title($title) {
return $title . ' | Avec le plugin des zros !' ;
}
Pour viter au maximum les conflits dans les noms de fonctions avec un autre plugin, il est conseill de les prfixer, ici
avec zero.
Dornavant, tant que le plugin sera activ, toutes les pages verront leur titre mis jour comme crit dans la fonction. En allant
par exemple sur une page intitule propos de nous , nous trouvons le code HTML suivant :
Code : HTML
<head>

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

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

{
}
}
new Zero_Plugin();
Comme vous le voyez, lutilisation de la fonction add_filter() a t lgrement modifie pour la spcification de la fonction
de rappel. tant donn que nous avons dplac la fonction modify_page_title() dans un objet, il faut aussi fournir
linstance de lobjet pour pouvoir appeler la fonction ! Ceci se fait en passant comme argument un tableau avec linstance de
lobjet utiliser et le nom de la mthode de classe appeler.
Une structure multifichiers
Toujours dans le but de structurer votre plugin, vous aurez probablement besoin dcrire du code dans diffrents fichiers, qui
contiendront par exemple diffrentes classes si vous choisissez dutiliser des objets.
Dans une application PHP, lutilisation de plusieurs fichiers passe par linclusion de ceux-ci au travers dune directive include ou
include_once. Au sein de WordPress, seul le fichier principal dun plugin activ (celui qui dclare le nom du plugin) est inclus
automatiquement au chargement de lapplication. Tous les autres fichiers doivent donc tre inclus par le dveloppeur sil dsire
les utiliser. Dans le cas contraire, les ventuelles classes et mthodes contenues ne seront pas utilisables.
La tche de notre fichier zero.php sera donc plus particulirement de charger les fichiers ncessaires au chargement du plugin.
Pour illustrer cela, nous allons une dernire fois rorganiser la structure de notre code : une nouvelle classe Zero_Page_Title,
dans un fichier pagetitle.php, contiendra le filtre de titre que nous avons cr et la classe Zero_Plugin se chargera dinstancier
Zero_Page_Title (et toute autre classe que nous pourrons ajouter ultrieurement). De cette faon, nous avons un point dentre
qui prend en charge les crations dobjets, eux-mmes effectuant des traitements spcifiques, ce qui facilitera lajout de
fonctionnalits.
Le code final des deux classes est donc le suivant.
Code : PHP
<?php
class Zero_Plugin
{
{
include_once plugin_dir_path( __FILE__ ).'/page_title.php';
new Zero_Page_Title();
}
}
Code : PHP
<?php
class Zero_Page_Title
{
{
add_filter('wp_title', array($this, 'modify_page_title'),
20) ;
}
public function modify_page_title($title)

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

Le plugin est dclar avec un commentaire dans l'en-tte du fichier principal.
Un plugin doit tre de prfrence dcoup en fichiers suivant les fonctionnalits ajoutes.
Crer des widgets

Comme nous avons pu le voir au dbut du cours, les widgets sont des lments de base bien pratiques de l'interface graphique.
Ils permettent de dplacer des blocs de fonctionnalits sur diffrentes zones de vos pages, mais pour tre utilisables, encore
faut-il en avoir dfini le comportement dans le code auparavant !
Dclarer un widget
Commenons tout de suite par le widget afficher sur le site pour linscription des emails.
Une nouvelle classe
Tous les widgets sont des objets qui doivent hriter de la classe WP_Widget (dclare dans le fichier wp-
includes/widgets.php) et surcharger au moins deux mthodes.
Avant tout, le constructeur de la classe WP_Widget doit tre appel par le constructeur de la classe fille afin de dfinir :
un identifiant pour le widget ;

un titre afficher dans ladministration ;
ventuellement des paramtres supplmentaires comme la description du widget (elle aussi affiche dans le panneau
widget de ladministration).
Code : PHP
<?php function __construct( $id_base, $name, $widget_options =

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

{
echo 'widget newsletter';
}
La classe de notre widget est maintenant cre, il faut donc dire WordPress que nous voulons lutiliser, cest--dire la dclarer
en tant que widget.
Pour cela, on utilise la fonction register_widget(), qui prend en paramtre le nom de la classe du widget. Dans notre cas,
lappel sera le suivant :
Code : PHP
<?php
register_widget('Zero_Newsletter_Widget');
Cependant, nous ne pouvons pas lappeler nimporte quel moment, il faut attendre que WordPress soit prt enregistrer
lexistence des widgets. Ceci se fait grce une action widget_init ; nous devons donc faire un appel add_action()
pour la dclaration du widget.
Ainsi, en utilisant les fonctions anonymes de PHP, lenregistrement du widget devient :
Code : PHP
<?php
add_action('widgets_init',
function(){register_widget('Zero_Newsletter_Widget');});
Afin de garder une structure cohrente dans notre module, nos allons crer une nouvelle classe Zero_Newsletter qui se
chargera de tout le code concernant la fonctionnalit de newsletter. Plaons-la dans un fichier newsletter.php, qui sera
pour linstant assez simple.
Code : PHP
<?php
include_once plugin_dir_path( __FILE__ ).'/newsletterwidget.php';
{
{
add_action('widgets_init',
function(){register_widget('Zero_Newsletter_Widget');});
}
}
Noubliez pas de modifier le constructeur de la classe Zero_Plugin pour crer un nouvel objet Zero_Newsletter.
Code : PHP
<?php
include_once plugin_dir_path( __FILE__ ).'/newsletter.php';
new Zero_Newsletter();
Le widget est dornavant dclar et se retrouve visible dans la liste propose par WordPress lorsque lon se rend dans le menu
Apparence > Widgets (voir la figure suivante).
Le widget Newsletter
Les paramtres
Vous avez probablement remarqu que le widget na aucun paramtre disponible dans linterface dadministration. Pourtant, il
faudrait au minimum pouvoir dfinir un titre afficher en haut du widget pour quil soit identifiable parmi les autres.
Laffichage du paramtrage du widget est compltement dlgu notre classe en surchargeant la mthode form(), qui prend
en paramtre un tableau contenant les valeurs prcdemment enregistres.
Dans le formulaire que nous allons crer, il est important dutiliser, pour la gnration des attributs id et name de vos champs,
deux mthodes dfinies par WP_Widget qui sont respectivement get_field_id() et get_field_name(). Ces deux
mthodes vont gnrer un identifiant et un nom unique pour chaque champ qui utiliss par WordPress lors de la sauvegarde des
valeurs, il est donc trs important de les utiliser, sans quoi lenregistrement des paramtres ne pourra pas fonctionner.
Voici donc comment nous allons redfinir la mthode form().
Code : PHP
<?php
public function form($instance)
{
$title = isset($instance['title']) ? $instance['title'] : '';
?>
<p>
<label for="<?php echo $this->get_field_name( 'title' ); ?
>"><?php _e( 'Title:' ); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id(
'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?
>" type="text" value="<?php echo $title; ?>" />
</p>
<?php
}
Vous pouvez maintenant dfinir une valeur pour le titre, et vrifier que celle-ci est bien sauvegarde (voir la figure suivante).
L'ajout du widget dans une zone ddie
Le rendu final
Pour terminer notre widget, il faut maintenant modifier la mthode widget() afin dafficher le paramtre titre et le champ
denregistrement des emails.
La rcupration dun paramtre se fait au travers de la variable $instance contenant les paramtres du widget. Le titre est donc
rcupr par linstruction $instance['title']. Cela nest cependant pas tout : il existe un filtre intitul widget_title auquel
peuvent se brancher des fonctions appliquant un traitement particulier pour les titres des widgets.
Il nest bien sr pas obligatoire de lutiliser pour obtenir laffichage du paramtre, mais gardez lesprit quun utilisateur de votre
plugin pourrait vouloir utiliser ce filtre pour modifier laffichage des widgets sur son thme. Il faut donc lutiliser !
Code : PHP
<?php
echo apply_filters('widget_title', $instance['title']);
Le formulaire denregistrement dadresse sera trs simple, car nous navons besoin que dun seul champ.
Code : HTML
<form action="" method="post">

<p>
<label for="zero_newsletter_email">Votre email :</label>
<input id="zero_newsletter_email"
name="zero_newsletter_email" type="email"/>
</p>
<input type="submit"/>
</form>
Jai volontairement laiss le champ action du formulaire vide, afin que lutilisateur reste sur la mme page lors de son
inscription. Nous verrons plus bas comment rcuprer les informations postes.
Code : PHP
<?php
public function widget($args, $instance)
{
echo $args['before_widget'];
echo $args['before_title'];
echo apply_filters('widget_title', $instance['title']);
echo $args['after_title'];
?>
<form action="" method="post">
<p>
<label for="zero_newsletter_email">Votre email :</label>
<input id="zero_newsletter_email"
name="zero_newsletter_email" type="email"/>
</p>
<input type="submit"/>
</form>
<?php
echo $args['after_widget'];
}
Le widget est maintenant prt et doit s'afficher correctement avec un champ d'enregistrement d'emails (voir la figure suivante).
Le widget est install
Chaque nouveau widget doit tre enregistr lors de l'vnement widgets_init.

Les widgets doivent hriter de la classe WP_Widget et surcharger la mthode widget().
Le rendu du widget doit utiliser les paramtres fournis par le thme pour gnrer un code HTML cohrent avec celui-ci.
Modifier la base de donnes

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

un champ email pour stocker ladresse des inscrits.
Crer une nouvelle table
Pour crer la table contenant les adresses email, nous devons excuter une requte SQL spcifique. Dans WordPress, laccs la
base de donnes se fait laide de la classe wpdb, qui contient de nombreuses mthodes pour interagir avec elle. Notamment,
une mthode query() est destine excuter les requtes qui lui sont passes en paramtre.
Une instance de la classe wpdb est cre au chargement de lapplication et stocke dans une variable globale. Sa rcupration
se fait donc depuis nimporte quel endroit du code de faon trs simple :
Code : PHP
<?php
global $wpdb ;
Dans la classe Zero_Newsletter, crons une fonction statique install() qui aura pour charge deffectuer toutes les
actions ncessaires lors de lactivation du plugin. Pour linstant, seul un appel la mthode wpdb::query() est ncessaire.
Code : PHP
<?php
public static function install()
{
global $wpdb;
$wpdb->query("CREATE TABLE IF NOT EXISTS {$wpdb-

>prefix}zero_newsletter_email (id INT PRIMARY KEY, email
VARCHAR(255) NOT NULL);");
}
quoi correspond la variable $wpdb->prefix dans la requte ?
Vous vous rappelez probablement que lors de linstallation, WordPress nous avait demand de choisir un prfixe pour les tables
de la base de donnes. Lattribut prefix de la classe wpdb contient la valeur de ce prfixe, qui peut tre diffrent dune
installation de WordPress lautre. Par consquent, nous devons lutiliser pour dterminer le nom de la table que nous allons
crer.
Il nous reste maintenant appeler la mthode install() pour lancer la cration de la table des adresses.
Tracer lactivation du plugin
videmment, la cration de la table ne doit tre effectue quune seule fois, lorsque le plugin sera install. Il nous faut donc un
moyen de savoir que le plugin vient dtre install, pour effectuer les modifications dans la base de donne cet instant
uniquement.
Heureusement pour nous, WordPress dclenche des vnements particuliers lorsquun plugin est activ, dsactiv ou bien
encore supprim de lapplication. Cest ici le premier cas qui nous intresse mais les autres fonctionnent de faon similaire.
La fonction register_activation_hook(), dfinie dans wp-includes/plugin.php, permet dajouter une

fonction appeler lors de lactivation dun plugin particulier.
Cette fonction doit tre appele dans le fichier principal du plugin (celui qui dfinit la valeur Plugin Name dans len-tte) et
prciser le chemin du plugin ainsi que la fonction excuter lactivation.
Pour passer le chemin du plugin, il suffit dutiliser la constante __FILE__, indiquant le nom du fichier courant.
En interne, la fonction register_activation_hook() va transformer __FILE__ en une chane de la forme

dossier_du_plugin/nom_du_plugin qui permet didentifier le plugin de faon unique, dans notre cas zero/zero.
Lappel peut tre plac directement dans le constructeur de la classe Zero_Plugin, il est finalement trs similaire ce que lon
avait pour lajout dactions ou de filtres :
Code : PHP
<?php
register_activation_hook(__FILE__, array('Zero_Newsletter',
'install'));
La mthode install() tant statique, cest le nom de la classe, et non une instance, que nous passons dans les
paramtres.
Si votre plugin est dj activ, dsactivez-le puis ractivez-le nouveau afin de dclencher la cration de la table dans la base de
donnes. Pour vrifier sa bonne excution, nous pouvons aller dans phpmyadmin et voir sur la ct gauche la liste des tables de
la base de donnes (voir la figure suivante).
Rsultat de la table des adresses email
La dsactivation et la dsinstallation du plugin
En plus de lactivation, nous pouvons tracer la dsactivation dun plugin, ainsi que sa suppression pure et simple. Pour cela, il
existe la fonction register_deactivation_hook(), dont lappel est strictement identique
register_activation_hook(), mais vous n'en aurez pas l'utilit ici.
En revanche, nous devons penser la dsinstallation du plugin. En effet, si un utilisateur dcide de supprimer le plugin de son
installation WordPress, il faut aussi que la table que nous avons cre soit efface de la base de donnes pour que celle-ci
retrouve son tat original.
De mme que pour linstallation, crons une fonction qui va cette fois supprimer la table des adresses.
Code : PHP
<?php
public static function uninstall()
{
global $wpdb;
$wpdb->query("DROP TABLE IF EXISTS {$wpdb-

>prefix}zero_newsletter_email;");
}
Dans le cas de la dsinstallation, la fonction appele doit tre statique (ou bien appartenir lespace global), ce qui
ntait pas obligatoire pour lactivation.
Il ne reste qu appeler la fonction register_uninstall_hook() la fin du constructeur de Zero_Plugin.
Code : PHP
<?php
register_uninstall_hook(__FILE__, array('Zero_Newsletter',
'uninstall'));
Maintenant, si vous supprimez le plugin laide du lien Supprimer dans la page de gestion des plugins, la table des adresses
sera elle aussi efface.
L'insertion et la slection
Il ne reste plus quune tape pour lier le widget et la base de donnes ; nous avons besoin denregistrer les adresses entres par
les visiteurs dans la table spcifiquement cre. Pour cela, il nous faut avant tout une mthode save_email() se chargeant
de lajout des adresses la base de donnes. Cette mthode sera appele sur toutes les pages du site et vrifiera la prsence
dune variable zero_newsletter_email dans la superglobale $_POST. Si elle existe, la valeur contenue sera insre dans
la table ddie.
Comme pour les requtes prcdentes, nous utilisons lobjet wpdb pour interagir avec la base de donnes. Avant deffectuer
linsertion, nous devons vrifier si ladresse propose nexiste pas dj dans la table, auquel cas nous arrterions le processus.
Nous utilisons pour cela la mthode wpdb::get_row(), prenant en paramtre la requte SQL excuter.
Code : PHP
<?php
if (isset($_POST['zero_newsletter_email']) &&
!empty($_POST['zero_newsletter_email'])) {
global $wpdb;
$email = $_POST['zero_newsletter_email'];
$row = $wpdb->get_row("SELECT * FROM {$wpdb-

>prefix}zero_newsletter_email WHERE email = '$email'");
La mthode get_row() retourne un tableau des colonnes de la premire ligne de rsultats de la requte, ou bien la valeur
null si aucun rsultat nest trouv.
WordPress se charge de protger toutes les requtes contre les failles de scurit lorsqu'elles sont soumises via la mthode
query(), elle-mme appele par get_row(). Il nest donc pas ncessaire de vous charger de nettoyer les variables prsentes
dans vos requtes.
Si la requte ne retourne aucun rsultat, nous pouvons insrer la nouvelle adresse en passant par la mthode insert(). Le
premier paramtre de celle-ci est le nom de la table dans laquelle on souhaite insrer une ligne, le second est un tableau associatif
contenant les valeurs de la ligne pour chaque champ de la table.
Code : PHP
<?php
if (is_null($row)) {
$wpdb->insert("{$wpdb->prefix}zero_newsletter_email",
array('email' => $email));
}
Cest tout ! La mthode save_email() est prte enregistrer toutes les adresses de vos visiteurs ! Voici un rcapitulatif de
son contenu :
Code : PHP
<?php
public function save_email()
{
if (isset($_POST['zero_newsletter_email']) &&
!empty($_POST['zero_newsletter_email'])) {
global $wpdb;
$email = $_POST['zero_newsletter_email'];
$row = $wpdb->get_row("SELECT * FROM {$wpdb-

>prefix}zero_newsletter_email WHERE email = '$email'");
if (is_null($row)) {
$wpdb->insert("{$wpdb->prefix}zero_newsletter_email",
array('email' => $email));
}
}
}
Nous navons pas gr la vrification du format de ladresse email car le but reste ici de montrer comment traiter la valeur reue et
linsrer en base. Dans une application relle, il faudrait bien entendu vrifier que la valeur envoye correspond bien une
adresse email.
Il faut maintenant utiliser une action pour connecter la mthode save_email() laffichage des pages du site. Pour cela,
nous pouvons utiliser lidentifiant wp_loaded qui correspond linstant o lapplication est charge et o elle sapprte
effectuer le rendu du thme pour la page demande.
Code : PHP
<?php
add_action('wp_loaded', array($this, 'save_email'));
En entrant une adresse email puis en validant le formulaire, nous restons sur la mme page mais la table des adresses doit
contenir ladresse choisie (voir la figure suivante).
Enregistrement des adresses dans la table
Les requtes SQL sont traites par l'objet wpdb.

L'API (Interface de programmation) fournit des mthodes pour crer facilement des requtes de slection, d'insertion et
de mise jour des entres d'une table.
L'administration
Les fonctionnalits de notre plugin sont presque compltes ! Il nous reste cependant un point important finaliser : le plugin
doit pouvoir tre configur dans ladministration, notamment pour lui dfinir des options mais aussi pour excuter lenvoi de la
newsletter lorsque ladministrateur le dcide.
Il nous faut donc ajouter un menu spcifique pour la gestion du module, dans lequel nous disposerons des paramtres ditables
ainsi que d'un bouton denvoi des emails aux adresses enregistres.
Ajouter des menus
Menu principal
Commenons par crer un lment de premier niveau qui apparatra dans le menu principal de l'administration, c'est--dire
directement dans la colonne de gauche. Cet ajout se fait lors du chargement des menus de WordPress, un vnement identifi
par le dclenchement de l'action admin_menu. Dans le constructeur de la classe Zero_Plugin, il nous faut donc brancher
une fonction add_admin_menu() que l'on dfinira plus bas.
Code : PHP
<?php
add_action('admin_menu', array($this, 'add_admin_menu'));
La cration d'un menu s'effectue avec la fonction add_menu_page(), qui peut prendre jusqu' sept paramtres :
le titre de la page sur laquelle nous serons redirigs ;

le libell du menu ;
l'intitul des droits que doit possder l'utilisateur pour pouvoir accder au menu. Si les droits sont insuffisants, le menu
sera masqu ;
la cl d'identifiant du menu qui doit tre unique (mettre le nom du plugin est une bonne option) ;
la fonction appeler pour le rendu de la page pointe par le menu ;
l'icne utiliser pour le lien (vous pouvez laisser les valeurs par dfaut) ;
la position dans le menu (vous pouvez laisser les valeurs par dfaut).
Code : PHP
<?php
public function add_admin_menu()
{
add_menu_page('Notre premier plugin', 'Zero plugin',
'manage_options', 'zero', array($this, 'menu_html'));
}
Une fois que cette fonction est dfinie, le menu doit apparatre dans l'interface d'administration (voir la figure suivante).
Le lien du plugin dans le menu
Il nous reste dfinir la mthode menu_html() pour l'affichage de la page. Ce sera la page d'accueil du plugin, placez donc un
contenu trs simple simplement pour vrifier son bon fonctionnement (voir la figure suivante).
Code : PHP
<?php
public function menu_html()
{
echo '<h1>'.get_admin_page_title().'</h1>';
echo '<p>Bienvenue sur la page d\'accueil du plugin</p>';
}
La fonction get_admin_page_title() renvoie la valeur du premier argument donn la fonction

add_menu_page().
La page principale du plugin
Les sous-menus
Ajoutons immdiatement un sous-menu Newsletter notre lment du menu principal, afin de pouvoir grer plusieurs
sections si besoin.
Pour cela, nous devons passer par la fonction add_submenu_page(), qui comprend elle aussi de nombreux arguments. Le
premier d'entre eux est l'identifiant du menu parent dans lequel devra apparatre le sous-menu, c'est donc la valeur que nous
avions choisie prcdemment. Notez que si vous voulez ajouter un sous-menu l'un des menus natifs de WordPress, vous
devrez ici mettre le nom du fichier PHP utilis pour le rendu du menu en question, par exemple users.php pour le menu
Utilisateurs . Les dtails sont disponibles sur la page de rfrence de la fonction.
Sur cette mme page de la documentation, vous pouvez voir qu'au lieu de spcifier le fichier PHP d'un menu natif, vous
pouvez utiliser des fonctions ddies qui appellent en interne add_submenu_page() avec les arguments adquats.
Par exemple, pour ajouter un sous-menu dans Utilisateurs , il existe la fonction add_users_page().
Les arguments suivants de la fonction sont respectivement :
le titre de la nouvelle page ;

le libell du menu ;
les droits requis pour y accder ;
l'identifiant du sous-menu ;
la fonction d'affichage.
Tout est donc trs similaire l'ajout d'un menu de premier niveau.
Nous allons dlguer la cration du sous-menu la classe Zero_Newsletter, il faut donc connecter une action
l'vnement admin_menu et crire la mthode correspondante.
Code : PHP
<?php
{
{
//...
add_action('admin_menu', array($this, 'add_admin_menu'),
20);
}

{
add_submenu_page('zero', 'Newsletter', 'Newsletter',
'manage_options', 'zero_newsletter', array($this, 'menu_html'));
}
}
Pourquoi avoir mis une priorit 20 dans la mthode add_action() ?
Ici, la priorit augmente (la valeur par dfaut est 10) permet de s'assurer que la fonction sera excute aprs celle qui ajoute le
menu parent du plugin. Il faut en effet que celui-ci ait t cr avant de pouvoir crer les sous-menus correspondants.
Rafrachissez votre interface d'administration, vous devriez avoir, comme sur la figure suivante, le sous-menu affich au survol
du menu parent (si le menu parent tait dj slectionn, alors le sous-menu sera visible par dfaut).
Le sous-menu contient le nouvel lment
Deux menus on t crs ! Pourtant il n'y a qu'un seul appel add_submenu_page() !
En effet, lors de la cration d'un sous-menu, WordPress ajoute par dfaut un premier lien identique au menu parent. Vous pouvez
cependant en changer le libell en crant un sous-menu donc l'identifiant est gal l'identifiant parent (voir la figure suivante).
Par exemple, nous pouvons ajouter une ligne juste aprs la gnration du menu parent :
Code : PHP
<?php
{
add_menu_page('Zero plugin', 'Zero plugin', 'manage_options',
'zero', array($this, 'menu_html'));
add_submenu_page('zero', 'Apercu', 'Apercu', 'manage_options',
'zero', array($this, 'menu_html'));
}
Le menu mis jour
Avant de continuer, crons la fonction d'affichage du sous-menu Newsletter qui se contentera pour l'instant d'afficher le titre
de la page (voir la figure suivante).
Code : PHP
<?php
{
//...
{
}
}
La page newsletter
Crer des options

Nos pages sont maintenant cres, il nous faut donc crire le formulaire permettant de renseigner les diffrentes options de notre
choix via la mthode menu_html(). Dans un premier temps, nous allons travailler avec un seul champ pour comprendre la
dmarche effectuer, puis nous en ajouterons de nouveaux.
Le fonctionnement des options
Pour conserver un maximum de souplesse, WordPress inscrit un grand nombre de valeurs de configuration dans la base de
donnes, dont un certain nombre sont ditables au travers du menu Rglages de l'administration. Ce fonctionnement permet
d'avoir des attributs facilement modifiables par l'administrateur pour ne pas avoir modifier le code PHP lorsqu'il dsire modifier
des paramtres comme le titre du site, le format des dates, la taille des mdias
Ces diffrents paramtres sont appels des options et sont stocks dans la base de donnes dans la table wp_options,
l'identifiant de l'option tant rang dans la colonne option_name et sa valeur dans option_value. Ainsi, rien ne nous
empche de dfinir nos propres valeurs de configuration, notamment lorsque l'on veut pouvoir paramtrer un plugin. Il suffit
pour cela d'ajouter une ligne la table avec l'identifiant et la valeur dsirs.
Pour rcuprer la valeur d'une option, il faut utiliser la fonction get_option() en lui indiquant l'identifiant de l'option
rcuprer. Si l'option n'existe pas, la fonction retourne false ou bien la valeur du second paramtre s'il a t fourni.
L'ajout d'une option dans la base de donnes se fait avec la mthode add_option(), laquelle il faut envoyer l'identifiant
ainsi que la valeur de l'option. Toutefois, cette fonction ne permet pas de mettre jour une option dj existante, il faut alors
utiliser update_option(), dont les paramtres sont identiques. Notez qu'en utilisant update_option(), l'option sera
cre si elle n'existe pas encore. Elle est donc utilise dans la majorit des cas car elle convient aux deux usages.
Enfin, pour supprimer une option, on utilise la fonction delete_option() qui ne prend en paramtre que le nom de l'option.
Elle renvoie la valeur true si l'option a t correctement supprime, ou bien false si l'opration chou ou que l'option
n'existait pas.
Le formulaire
Le code HTML
Lorsque l'on cre un formulaire destin enregistrer des donnes dans la table des options, celui-ci doit appeler le fichier wp-
admin/options.php lors de la soumission des donnes. Commencez donc complter la mthode
Zero_Newsletter::menu_html() comme ceci :
Code : PHP
<?php
{
?>
<form method="post" action="options.php">
</form>
<?php
}
Rajoutons tout de suite le champ de texte permettant l'enregistrement de l'adresse email de l'expditeur de la newsletter, ainsi que
le bouton de validation du formulaire grce la fonction submit_button(). Cette dernire permet de gnrer un bouton de
validation avec les classes CSS ncessaires un affichage homogne dans l'interface d'administration. Le libell du bouton peut
tre modifi en passant une nouvelle valeur en paramtre.
Code : PHP
<label>Expditeur de la newsletter</label>
<input type="text" name="zero_newsletter_sender" value="<?php echo
get_option('zero_newsletter_sender')?>"/>
<?php submit_button(); ?>
Le formulaire doit maintenant s'afficher correctement, mais si vous l'envoyez, vous verrez qu'aucune valeur n'est sauvegarde
dans la base de donnes (le champ apparat vide lorsque vous revenez sur la page). Ceci est du au fait que nous n'avons pas
encore autoris WordPress enregistrer la valeur de l'option zero_newsleter_sender.
Enregistrer les options modifiables
La premire chose rajouter l'intrieur du formulaire est un appel la fonction settings_fields(), qui affiche un certain
nombre de champs cachs permettant notamment l'application de savoir quel groupe d'option les champs que vous allez
rajouter appartiennent.
Qu'est-ce qu'un groupe d'options ?
Un groupe d'options correspond l'ensemble des options modifiables sur une page donne. WordPress a besoin de connatre le
groupe auquel appartiennent les options afin de dcider si vous avez le droit de modifier ces valeurs. Pour dterminer si les
options peuvent tre mises jour, il sera ncessaire de dclarer l'ensemble des options modifiables dans un groupe d'options
donn avec la fonction register_setting(). Nous appellerons notre groupe d'options
zero_newsletter_settings, c'est donc l'argument utiliser pour l'appel settings_fields().
Code : PHP

<?php settings_fields('zero_newsletter_settings') ?>
Il nous faut ensuite enregistrer le champ zero_newsletter_sender dans le groupe d'options. Ceci doit imprativement se
faire lorsque le systme d'administration est initialis, c'est--dire au dclenchement de l'vnement admin_init. Ajoutons
donc une fonction register_settings dans la classe Zero_Newsletter, ainsi que l'enregistrement de l'action dans
son constructeur.
Code : PHP
<?php
add_action('admin_init', array($this, 'register_settings'));
Code : PHP
<?php
public function register_settings()
{
register_setting('zero_newsletter_settings',
'zero_newsletter_sender');
}
Le formulaire est en place, l'option que nous souhaitons enregistrer est dclare comme autorise, nous pouvons donc vrifier
que l'enregistrement fonctionne. Pour cela, entrez une adresse et validez le formulaire. La page doit se rafficher et le champ tre
pr-rempli avec la valeur envoye (voir la figure suivante).
Sauvegarde de la valeur du champ
Gnration automatique des champs
Il reste deux options rajouter dans notre formulaire : l'objet du mail et son contenu. Pour ces deux nouveaux champs, nous
allons utiliser un autre moyen de cration du code HTML, en nous reposant un peu plus sur l'API de WordPress. L'ide consiste
dclarer des champs avec leurs proprits, puis demander l'affichage de tous les champs associs un formulaire donn.
Chaque champ doit tre ajout une section, c'est dire un groupe d'option, elle-mme tant appele depuis le formulaire final.
L'intrt de ce fonctionnement est de pouvoir rajouter de nouveaux champs dans le formulaire sans pour autant devoir modifier
la mthode de rendu de celui-ci, simplement en enregistrant une nouvelle section ou un nouveau champ. Il est donc tout fait
possible, grce ce mcanisme, de rajouter de nouvelles options dans un formulaire natif de WordPress ou cr par un autre
plugin.
La cration d'une section se fait par la fonction add_settings_section(), que l'on peut appeler directement dans la
mthode Zero_Newsletter::register_settings().
Code : PHP
<?php
add_settings_section('zero_newsletter_section', 'Paramtres
d\'envoi', array($this, 'section_html'),
'zero_newsletter_settings');
Les paramtres de cette fonction sont l'identifiant de la section, son titre, une fonction appele au dbut du rendu de la section et
enfin la page sur laquelle devra s'afficher la section.
Nous allons crer immdiatement la mthode section_html() afin d'afficher une description de la section au dbut de celle-
ci.
Code : PHP
<?php
public function section_html()
{
echo 'Renseignez les paramtres d\'envoi de la newsletter.';
}
Mme si la section ne contient pour l'instant aucun champ, nous pouvons en activer son affichage. Pour cela, il suffit d'appeler la
fonction do_settings_sections() avec comme argument l'identifiant de la page pour laquelle la section a t cre. Si plusieurs
sections on t dclares pour une page donne, elle seront toutes affiches conscutivement (voir la figure suivante). Modifiez
donc le formulaire en supprimant le champ Expditeur pour le remplacer par l'appel de cette nouvelle fonction.
Code : PHP

<?php settings_fields('zero_newsletter_settings') ?>
<?php do_settings_sections('zero_newsletter_settings') ?>
<?php submit_button(); ?>

</form>
Affichage de la section avec sa description
Pour dclarer le champ "Expditeur" ainsi que les deux champs supplmentaires, il faut passer par la fonction
add_settings_field() qui se charge de l'ajout d'un champ une section donne.
Code : PHP
<?php
add_settings_field('zero_newsletter_sender', 'Expditeur',
array($this, 'sender_html'), 'zero_newsletter_settings',
'zero_newsletter_section');
Les paramtres de cette fonction sont l'identifiant du champ, le libell afficher, la fonction de rendu du champ, pour terminer par
la page concerne et la section laquelle il appartient. La mthode de rendu est trs simple et ne doit se charger d'afficher que le
champ en lui mme comme nous l'avions fait prcdemment (voir la figure suivante).
Code : PHP
<?php
public function sender_html()
{?>
<input type="text" name="zero_newsletter_sender" value="<?php
echo get_option('zero_newsletter_sender')?>"/>
<?php
}
Retour du champ expditeur dans une section
Le formulaire est maintenant revenu l'tat prcdent, il ne reste plus qu' dclarer les deux nouveaux champs en passant par
add_settings_field() et register_setting() et le formulaire sera mis jour automatiquement, sans modifier la
mthode menu_html(). Voici donc un rcapitulatif des mthodes mises jour avec les deux nouveaux champs Objet et
Contenu .
Code : PHP
<?php
public function register_settings()
{
'zero_newsletter_sender');
'zero_newsletter_object');
'zero_newsletter_content');
add_settings_section('zero_newsletter_section', 'Newsletter
parameters', array($this, 'section_html'),
'zero_newsletter_settings');
add_settings_field('zero_newsletter_sender', 'Expditeur',
array($this, 'sender_html'), 'zero_newsletter_settings',
add_settings_field('zero_newsletter_object', 'Objet',
array($this, 'object_html'), 'zero_newsletter_settings',
add_settings_field('zero_newsletter_content', 'Contenu',
array($this, 'content_html'), 'zero_newsletter_settings',
}
public function object_html()

{?>
<input type="text" name="zero_newsletter_object" value="<?php
echo get_option('zero_newsletter_object')?>"/>
<?php
}
public function content_html()

{?>
<textarea name="zero_newsletter_content"><?php echo
get_option('zero_newsletter_content')?></textarea>
<?php
}
Vous pouvez maintenant rafrachir la page pour renseigner les valeurs de ces nouvelles options (voir la figure suivante).
Le formulaire final
Traiter des actions

Lorsque lensemble des options sont configures, il ne manque plus quun bouton afin denvoyer la newsletter aux adresses
inscrites. Ce bouton doit donc dclencher lappel dune fonction spcifique qui envoie lemail tous les destinataires souhaits.
Nous avons deux solutions pour arriver nos fins. Nous pouvons utiliser un lien vers un fichier spcifique de notre plugin qui
traitera directement lenvoi des emails avant de nous rediriger vers linterface dadministration de notre plugin. Cest une
solution qui parat assez simple mais qui implique de charger les fonctionnalits de WordPress manuellement dans le fichier cible,
cest pourquoi elle na pas ma prfrence. Au lieu de cela, nous allons simplement rafrachir la page en cours et brancher une
nouvelle action se chargeant de vrifier si lenvoi a t demand et de lexcuter le cas chant.
Nous allons pour cela insrer un second formulaire dans la page, la fin de la mthode menu_html().
Code : PHP
<form method="post" action="">

<input type="hidden" name="send_newsletter" value="1"/>
<?php submit_button('Envoyer la newsletter') ?>
</form>
Le formulaire contient simplement un champ cach qui sera envoy en POST afin de demander lenvoi des emails. Au clic sur le
bouton, la page actuelle sera rafrachie avec le paramtre send_newsletter prsent dans la requte.
Nous devons donc intercepter la prsence de ce paramtre au chargement de la page. Pour cela, il existe dans WordPress un
vnement dclench au chargement de toutes les pages dadministration, de la forme load-[identifiant de la
page]. Lidentifiant de la page est rcuprable lors de la cration du menu qui permet daccder la page : cest le retour de la
fonction add_submenu_page() (cela fonctionne aussi avec add_menu_page()).
Nous modifions donc la mthode Zero_Newsletter::add_admin_menu() :
Code : PHP
<?php
{
$hook = add_submenu_page('zero', 'Newsletter', 'Newsletter',
'manage_options', 'zero_newsletter', array($this, 'menu_html'));
add_action('load-'.$hook, array($this, 'process_action'));
}
Dans cette mthode process_action(), nous vrifions la prsence du paramtre send_newsletter avant dappeler la
mthode denvoi.
Code : PHP
<?php
public function process_action()
{
if (isset($_POST['send_newsletter'])) {
$this->send_newsletter();
}
}
Il ne reste plus maintenant qu crire la mthode send_newsletter() pour envoyer les emails nos visiteurs inscrits.
Nous allons donc devoir rcuprer les paramtres de configuration choisis ainsi que la liste des emails, puis appeler la fonction
wp_mail() qui permet de construire un email.
Code : PHP
<?php
public function send_newsletter()
{
global $wpdb;
$recipients = $wpdb->get_results("SELECT email FROM {$wpdb-
>prefix}zero_newsletter_email");
$object = get_option('zero_newsletter_object', 'Newsletter');
$content = get_option('zero_newsletter_content', 'Mon contenu');
$sender = get_option('zero_newsletter_sender', 'no-
reply@example.com');
$header = array('From: '.$sender);
foreach ($recipients as $_recipient) {

$result = wp_mail($_recipient->email, $object, $content,
$header);
}
}
Et voil ! Le site est prt envoyer des newsletters ses inscrits en un seul clic sur le bouton d'envoi !
De nouvelles pages peuvent tre ajoutes dans l'interface d'administration, accessibles avec des menus spcifiques.
Les options permettent de sauvegarder les valeurs de vos paramtres de configuration.
Vous pouvez crer des options spcifiques votre plugin et les diter dans l'administration.
L'enregistrement des sections et des champs pour les formulaires permet plus de souplesse que la construction manuelle.
Les shortcodes
Un shortcode est un morceau de code PHP que l'on peut placer directement dans un article ou une page de votre blog. Cette
balise code est automatiquement interprte par WordPress et permet d'ajouter des fonctionnalits (une galerie image, une
insertion vido, etc.) sans programmation de votre part! Grce aux shortcodes, votre blog devient dynamique puisque son
contenu peut tre chang tout moment, en temps rel et sans comptence informatique.
Utiliser un shortcode
Format
Pour utiliser un shortcode, il suffit de mettre son nom dans le contenu d'un article, encadr de crochets.
Code : Autre
[nom_du_shortcode]
Par exemple, WordPress connat un shortcode gallery qui renvoie l'ensemble des mdias de type image associs un article,
dont l'affichage sur le site changera en fonction du nombre d'images dans la bibliothque sans qu'il y ait besoin de modifier
l'article en question.
Choisissez donc un article ou une page possdant des images, et introduisez le shortcode au sein de son contenu (voir la figure
suivante).
L'ajout du shortcode dans le contenu d'un article
Lorsqu'un visiteur parcourra l'article choisi, il verra, comme sur la figure suivante, l'ensemble des images associes celui-ci.
Affichage
du shortcode Gallery
Paramtres
Pour ajouter de la souplesse aux shortcodes, il est tout fait possible de leur attribuer des paramtres utiliss par la fonction PHP
lors du rendu, en rajoutant des paires cls/valeur la suite du nom du shortcode.
Code : Autre
[nom_du_shortcode attribut1="valeur1" attribut2="valeur2"]
On peut aussi ajouter une grosse portion de texte dans un shortcode en l'crivant sous une forme diffrente, avec une balise
ouvrante et une balise fermante. Ce texte sera alors considr comme un nouveau paramtre, gnralement utilis comme
contenu du shortcode.
Code : Autre
[nom_du_shortcode]le contenu vient ici[/nom_du_shortcode]
De plus, le contenu peut tre du texte brut ou bien du HTML ; il n'y a pas de restriction. Ce sera ensuite le rle du shortcode de
traiter le texte fourni en cas de besoin.
Crer un shortcode
Que diriez-vous de crer un shortcode simple, dont le rle sera par exemple de lister les derniers articles publis sur votre blog ?
Plac par exemple dans une page statique, il fournira sous forme de liste les titres des derniers articles avec un lien vers chacun
d'eux.
Pour traiter le shortcode, il faudra utiliser une nouvelle classe de notre plugin qui sera ddie au rendu de la liste des derniers
articles. Ajoutez donc un nouveau fichier recent.php dans lequel vous dfinirez une classe Zero_Recent, elle-mme tant
instancie dans le constructeur de la classe Zero_Plugin, comme cela a t fait pour les classe prcdentes.
Code : PHP
<?php
class Zero_Plugin
{
{
//...
include_once plugin_dir_path( __FILE__ ).'recent.php';
new Zero_Recent();
Il faut ensuite dclarer le shortcode afin que WordPress sache le reconnatre dans le contenu d'une publication. On utilise pour
cela la mthode add_shortcode(), qui attend en paramtres le nom du shortcode ainsi que la fonction appeler lors de son
rendu. Placez donc cet appel dans le constructeur de la classe Zero_Recent.
Code : PHP
<?php
class Zero_Recent
{
{
add_shortcode('zero_recent_articles', array($this,
'recent_html'));
}
}
WordPress a dornavant connaissance du nouvel lment, il ne lui manque que la dfinition de la fonction appeler pour
l'afficher. Cette dernire recevra deux arguments lors de son appel : le premier est un tableau des paramtres permettant de
configurer le shortcode, le second est la valeur du contenu si le shortcode a t dclar avec les deux balises ouvrante et
fermante.
Code : PHP
<?php
public function recent_html($atts, $content)
{
}
La premire chose faire est d'initialiser des valeurs par dfaut pour les paramtres du shortcode, si jamais ceux-ci n'ont pas t
fournis. En effet, un shortcode doit au maximum pouvoir tre utilis sans paramtres, il faut donc prvoir un comportement
fonctionnel dans ce cas. Pour fusionner simplement le tableau de paramtres fournis et les valeurs par dfaut, WordPress
propose la fonction shortcode_atts().
Code : PHP
<?php
$atts = shortcode_atts(array('numberposts' => 5), $atts);
Seules les cls du tableau des valeurs par dfaut seront prsentes en sortie de cette fonction, tous les autres
paramtres fournis au shortcode seront ignors et supprims !
Une fois les arguments filtrs, vous pouvez rcuprer la liste des derniers articles avec la fonction get_posts(), pour laquelle
les paramtres doivent tre envoys dans un tableau comme premier argument. La fonction renverra alors une liste d'articles, qui
sont par dfaut tris par date dcroissante, ce qui correspond nos besoins.
Code : PHP
<?php
$posts = get_posts($atts);
Vous pouvez bien entendu rajouter de nouveaux paramtres compatibles avec la fonction dans le tableau $atts, il
vous suffit pour cela de regarder la dfinition de la fonction pour connatre la liste des cls autorises.
Il ne reste plus qu' parcourir la liste des articles et les insrer dans une liste au format HTML, avec un lien permettant d'afficher
chacun d'entre eux. Si la variable $content a t dfinie par l'utilisateur du shortcode, vous pouvez l'insrer par exemple au
dessus de la liste, ce qui permet de rajouter un texte de prsentation.
Code : PHP
<?php
$html = array();
$html[] = $content;
$html[] = '<ul>';
foreach ($posts as $post) {
$html[] = '<li><a href="'.get_permalink($post).'">'.$post-
>post_title.'</a></li>';
}
$html[] = '</ul>';
echo implode('', $html);
Le shortcode est termin et prt tre utilis ! Rendez-vous pour cela dans l'diteur de contenu d'une de vos publications, et
placez le code suivant l'intrieur :
Code : Autre
[zero_recent_articles numberposts=3]Voici les derniers articles publis sur le blog : [
l'affichage de la page, comme sur la figure suivante, vous obtenez la liste jour des trois derniers articles publis.
Affichage des trois derniers articles
Un shortcode est un morceau de code PHP que l'on insre directement au sein d'une publication. Il permet l'affichage de
contenu sans savoir mme coder.
Les shortcodes peuvent rcuprer des paramtres fournis par le contributeur d'un article pour modifier leur affichage.
Il existe plusieurs formats pour les shortcodes, avec une seule ou deux balises pour rajouter du contenu.
Partie 4 : Exploiter votre site
Mettre en production
Voil, vous avez maintenant une bonne matrise de WordPress. Vous avez trouv ou programm les thmes et plugins dont vous
aviez besoin pour que votre site puisse tre mis en ligne ? Il est temps de nous attaquer aux derniers rglages pour la mise en
production de WordPress !
Suivant la solution que vous aurez choisie pour votre hbergement, la procdure est quelque peu diffrente, nous allons donc
faire un tour d'horizon des solutions qui s'offrent vous.
Sur un hbergement mutualis
L'hbergement mutualis est la solution la moins onreuse et permet d'avoir un site en place rapidement sans avoir passer
beaucoup de temps en configuration. C'est celle qui est conseille si vous n'attendez pas (pour l'instant !) un fort trafic sur votre
site. De plus, les offres d'hbergement s'accompagnent souvent d'un nom de domaine pour votre site Internet (c'est le cas chez
OVH notamment), vous n'avez donc pas payer autre chose que le serveur.
Lorsque vous prenez une offre chez un hbergeur, vous recevrez des identifiants permettant de vous connecter la base de
donnes ainsi qu'au serveur l'aide d'un logiciel FTP pour envoyer vos fichiers sur le site. Vous pouvez pour cela utiliser le
logiciel FileZilla qui est plutt simple d'utilisation.
Aprs avoir lanc FileZilla, vous devez indiquer vos identifiants ainsi que l'adresse du serveur FTP dans la barre de connexion
en haut. Toutes les informations doivent avoir t fournies lors de l'inscription par l'hbergeur (voir la figure suivante).
Connexion au serveur avec vos identifiants
Une fois connect, vous devrez, comme sur la figure suivante, envoyer la totalit des fichiers de votre site dans le rpertoire
racine du serveur, le plus souvent intitul www .
Partie 4 : Exploiter votre site 106/113
Transfert des fichiers de WordPress dans le rpertoire
Ds que la copie est termine, vous pouvez vous rendre l'adresse de votre site Internet qui est maintenant en ligne. Il faut alors
lancer la procdure d'installation de WordPress comme nous l'avons fait au dbut de ce cours.
Sur un serveur ddi
Si vous choisissez comme solution d'hbergement un serveur ddi, il y a un peu plus de travail que prcdemment car il faut
aussi s'occuper de l'installation et de la configuration du serveur. Une fois votre serveur en place, vous aurez besoin de vous
connecter sur celui-ci afin de dbuter l'installation des diffrents fichiers. Les identifiants de connexion au serveur vous ont
normalement t fournis par l'hbergeur et permettent de s'y connecter avec le protocole SSH. Pour cela, vous pouvez utiliser le
logiciel Putty sur Windows ou bien un terminal sur Linux et Mac.
Installation et copie des fichiers
La configuration du serveur est sensiblement identique l'installation d'un serveur local sur Linux. Les logiciels installer sont
les mmes (mis part phpMyAdmin qui est inutile ici) et suivront la mme procdure.
Code : Console
sudo apt-get install apache2 php5 mysql-server libapache2-mod-php5 php5-

mysql
Vous pouvez maintenant copier les fichiers de WordPress sur votre serveur.
Code : Console
cd /var/www
curl -O http://fr.wordpress.org/wordpress-3.6.1-fr_FR.tar.gz
tar xzf wordpress-3.6.1-fr_FR.tar.gz
Le nom du fichier peut varier suivant la version de WordPress. Pensez le vrifier sur le site officiel afin de rcuprer la
dernire version.
Vous obtenez ainsi un dossier intitul wordpress contenant les sources de la dernire version du CMS prt tre lu par
Apache.
Dfinition du Virtual Host
Il nous reste configurer un Virtual Host pour que votre serveur sache que l'adresse http://monsite.com correspond au
rpertoire de WordPress. Sans cela, vous ne pourrez y accder que par une URL de la forme
http://monsite.com/wordpress.
Voici un exemple de Virtual Host basique pour WordPress, qui reprend entre autre le contenu du fichier .htaccess fourni,
vous devrez bien sr adapter les valeurs votre installation. Vous devez placer cette configuration dans le rpertoire
/etc/apache2/sites-available, dans un fichier intitul wordpress.conf. Le nom peut varier, mais l'extension doit
tre .conf.
Code : Autre
<VirtualHost *:80>
ServerName monsite.com
DocumentRoot /var/www/wordpress
<Directory /var/www/wordpress>
Deny from none
Allow from all
Order allow,deny
AllowOverride None
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule .* /index.php [L]
</Directory>
</VirtualHost>
Il faut ensuite activer ce VirtualHost avec la commande a2ensite, et dsactiver la configuration par dfaut avec a2dissite.
Enfin, demandez Apache de recharger sa configuration pour prendre en compte les dernires modifications.
Code : Console
a2ensite wordpress
a2dissite default
service apache2 reload
Un site peut tre hberg soit sur un serveur mutualis partag par plusieurs utilisateurs, soit sur un serveur ddi.
Le logiciel FileZilla permet d'envoyer vos fichiers sur un serveur mutualis avec un accs FTP.
Sur un serveur ddi, la configuration du serveur Apache doit se faire manuellement.
Amliorer le rfrencement
Une fois votre site en ligne, la prochaine tape importante est d'avoir des visiteurs. L'objectif de ce chapitre est de comprendre
comment optimiser votre site et vos contenus, afin d'apparatre dans les meilleurs rsultats des moteurs de recherche (par
exemple, Google). Pour cela, il faut configurer correctement WordPress et mettre en avant les sujets en rapport avec votre site.
Des URLs propres
Le contenu des URLs qui pointent vers votre site, et plus prcisment vos publications, est essentiel pour avoir un bon
rfrencement. Par dfaut, les URLs des publications sont de la forme http://monsite.com?p=3, ce qui ne donne aucune
information quant au contenu de la page. Si votre page s'appelle Bienvenue sur mon blog , il est nettement plus intressant
d'avoir l'URL de la forme http://monsite.com/bienvenue-sur-mon-blog car les moteurs de recherche rcuprent des informations
en plus, rien qu'en lisant l'adresse de la page. Pour faire cela, il suffit d'aller sur le panneau l'administration du site, dans
Rglages > Permaliens , puis de slectionner le rglage Nom de l'article sur la page des options (voir la figure suivante).
Rglage des paramtres en
fonction des URLs souhaites
Une fois ce rglage effectu, vous aurez la possibilit, sur chaque publication, de choisir le lien qui mnera la page
correspondante.
Veillez ne pas modifier ce lien une fois que l'article a t publi, car si un visiteur (ou un moteur de recherche) rcupre
le lien original avant qu'il soit modifi, alors une erreur 404 apparatra lors de l'accs la page.
Si malgr tout vous souhaitez modifier une URL aprs coup, il est conseill de crer une redirection de l'ancien lien vers le
nouveau afin d'indiquer que le contenu a t dplac pour viter de perdre vos visiteurs. Certains plugins permettent de grer
cela automatiquement, comme Redirection.
Un contenu de qualit
L'un des critres essentiels pour un bon rfrencement est la mise jour rgulire du contenu de votre site. Les moteurs de
recherche sont en effet conus pour dtecter les modifications apportes vos pages, aux nouvelles publications et plus
gnralement, au changement. Un site l'abandon descendra rapidement dans les rsultats de recherche, car on considre alors
que les informations qu'il fournit sont obsoltes.
On ne parle pas ici de publier des articles tous les jours, il y a trs peu de blogs qui font cela. L'important est d'avoir un rythme
rgulier qui convient aux sujets auxquels vous choisissez de vous consacrer, c'est ce qui dtermine la frquence de mise jour. Si
vous publiez sur un projet personnel, vous aurez envie de tenir vos visiteurs au courant de chaque avance. Si c'est une
entreprise que vous reprsentez, alors le site peut tre mis jour lors d'vnements particuliers ou de nouvelles activits.
chaque site convient son rythme. Ce qu'il faut retenir, c'est qu'il ne faut pas laisser vos pages l'abandon pour conserver un
classement intressant sur les moteurs de recherche.
Ceci tant dit, il ne faut pas faire valoir la quantit au dtriment de la qualit. Publier des articles au contenu riche et pertinent est
plus valorisant pour votre site que de publier rgulirement du contenu avec peu d'intrt. Pour mettre en avant vos pages et
vos articles, n'oubliez pas de placer les mots importants dans le contenu de ceux-ci pour faciliter la recherche de vos potentiels
visiteurs. Pensez aussi associer des catgories et des mots-cls pertinents vos articles.
Faciliter l'indexation
Le sitemap
Le sitemap est un fichier contenant un plan de votre site, cest--dire la liste de toutes les pages qui existent avec leurs URLs.
Cela permet un moteur de recherche de trouver plus facilement vos pages pour les indexer. Le sitemap doit dans lidal tre mis
jour chaque fois quune nouvelle page est cre, afin dtre parcourue rapidement par les robots et donc de contribuer
votre rfrencement. L encore, il existe des plugins qui permettent de gnrer automatiquement le sitemap de votre blog,
notamment Sitemap generator
Les robots
On dsigne par le terme de robots les programmes qui parcourent les pages Internet la recherche de contenu indexer dans les
moteurs de recherche. Il est possible, sur votre site, de demander aux robots de ne pas indexer une partie des pages dans les
moteurs. Cela peut tre utile par exemple pour la page de connexion ladministration de WordPress, qui na pas de raison de se
retrouver dans les rsultats de recherche dun internaute. Pour cela, on utilise des directives spcifiques destines ces robots
afin de leur indiquer les pages pertinentes pour lindexation.
Malgr ce systme, les robots peuvent trs bien choisir dindexer vos pages, cela ne reste quune indication. Ils sont
cependant gnralement respectueux de vos demandes.
WordPress offre la possibilit de cacher lensemble de votre site aux robots, il faut donc bien vrifier que cette fonctionnalit est
dsactive lors de la mise en ligne de votre site. Dans le cas contraire, vous pourriez ne pas apparatre du tout dans les moteurs
de recherche ! Pour vrifier cela, allez dans Rglages > Lecture , loption Demander aux moteurs de recherche de ne pas
indexer ce site doit tre dcoche.
Les URLs rcrites permettent de donner du sens vos liens pour les moteurs de recherche.
Plus les contenus seront mis jour, plus ceux-ci auront de la valeur pour les moteurs de recherche.
Les mots-cls rajoutent des informations pour mettre en avant les articles.
Faciliter l'indexation du site (sitemap, directives adresses aux robots) permet d'amliorer le rfrencement.
Optimiser les performances

L'un des critres les plus importants dans l'exprience de navigation d'un visiteur sur votre site est sans aucun doute le temps
que celui-ci prend s'afficher. Il est donc important de rduire ce temps au minimum. Pour cela, il faut chasser toutes les lenteurs
qui peuvent amoindrir la qualit de la visite, au niveau du code PHP ou bien de l'affichage HTML sur le navigateur. Accorder de
l'attention ces deux points permet d'amliorer significativement les performances ressenties lorsque l'on parcourt votre site.
Nous allons donc tudier quelques astuces qui lui donneront un coup de jeune.
Utiliser le cache WordPress
Sur les applications web, l'une des actions les plus coteuses en termes de temps de calcul de la page est l'accs aux
informations de la base de donnes. En effet, une vaste proportion du contenu d'une page donne provient de la configuration
et des contributions des administrateurs du site, tout ceci se trouvant dans diffrentes tables de la base de donnes.
L'application doit donc, pour chaque page affiche, tablir une connexion et effectuer des requtes pour obtenir les donnes
ncessaires son fonctionnement.
Pour acclrer le temps de rendu de vos pages et donc diminuer la charge de votre serveur, il est important de faire attention aux
ressources utilises, notamment lorsque vous dveloppez votre propre plugin, qui devra vraisemblablement crire et lire dans la
base de donnes. Si le premier conseil connatre est de ne pas rcuprer des donnes depuis la base plusieurs fois dans une
mme page, cela n'est pas toujours possible de faon simple et les dveloppeurs de WordPress s'en sont bien rendu compte.
La classe WP_Object_Cache fournit une interface au travers de laquelle il est possible de stocker des informations (sous
forme de paires cl/valeur) afin de les rcuprer plus tard au cours du chargement de la page. Cette solution offre l'avantage
d'viter d'effectuer plusieurs reprises des calculs ou des requtes coteuses en enregistrant le rsultat de l'opration pour un
usage ultrieur.
Pour utiliser l'objet grant le cache, il faut passer par des fonctions d'accs dfinies dans le fichier
wp_includes/cache.php. Ainsi, la fonction wp_cache_add() permet d'ajouter une entre de cache, en fournissant en
paramtres la cl utiliser et la valeur stoker. Pour rcuprer la valeur en cache, on appellera wp_cache_get() avec la cl en
paramtre, qui renverra la valeur stocke ou bien false si aucune entre n'est trouve.
En utilisant ces fonctions, l'ide est donc de faire un appel wp_cache_get() lorsque l'on a besoin d'une valeur qui est
potentiellement prsente en cache. Si cette valeur n'est pas trouve dans le cache, on la calcule comme on l'aurait fait sans le
cache, puis on la stocke pour un accs ultrieur, ventuellement dans une autre partie du code.
Code : PHP
<?php
function getMaValeur()
{
if (wp_cache_get('ma_valeur')) {
return wp_cache_get('ma_valeur');
} else {
// on calcule notre variable normalement, stocke dans
$value
//...
wp_cache_add('ma_valeur', $value);
return $value;
}
}
En utilisant le cache de cette faon, vous tes certain de ne traiter les donnes lourdes que lorsque vous en avez besoin, tout en
garantissant de ne faire ce traitement qu'une seule fois, c'est--dire lors du premier accs.
Optimiser l'affichage des pages
Cacher les ressources
chaque chargement d'une page, le navigateur doit rcuprer la fois le code HTML, les fichiers CSS et JavaScript ainsi que les
images affiches. Mme si ces diffrentes ressources (hormis le code HTML) ne changent que trs rarement, le navigateur va
donc par dfaut les rcuprer en effectuant pour cela une requte auprs du serveur. Pour chaque fichier, une requte diffrente
est mise et doit tre traite pour renvoyer la ressource, ce qui constitue un cot en temps de rendu de la page et en bande
passante.
Afin de limiter le nombre de requtes envoyes votre serveur, il faut explicitement indiquer au navigateur des visiteurs quels
sont les fichiers qui ne changeront que rarement lors de leurs visites. Dans ce cas, ces ressources seront caches sur l'ordinateur
du visiteur et rutilises chaque fois qu'une page de votre site sera affiche, tant que le dlai minimum d'expiration ne sera pas
coul. Les feuilles de style CSS peuvent par exemple tre stockes plusieurs semaines si vous ne mettez pas jour le design de
faon trs rgulire. Il n'y a pas de raison de forcer vos visiteurs la tlcharger chaque affichage.
Pour cacher des ressources, il faut effectuer des modifications dans la configuration du serveur, c'est--dire dans le VirtualHost
(entre les balises <VirtualHost> du fichier) si vous en avez dfini un, ou bien directement dans le fichier .htaccess (situ
la racine de WordPress) dans le cas contraire.
Code : Autre
ExpiresActive On
ExpiresByType text/css "access plus 7 days"
ExpiresByType text/javascript "access plus 7 days"
ExpiresByType image/jpeg "access plus 7 days"
ExpiresByType image/x-icon "access plus 7 days"
Pour chaque type de fichier que l'on souhaite cacher, on ajoute une ligne indiquant la dure aprs laquelle le fichier doit tre
redemand par le navigateur. Ici, j'ai choisi une dure de sept jours, c'est--dire qu'un visiteur n'aura pas besoin de tlcharger
ces ressources lors de toutes ses visites dans la semaine qui suit sa premire connexion.
Fusionner les fichiers JS et CSS
Principe
Si cacher les ressources permet de limiter le nombre de requtes sur votre serveur partir de la deuxime visite d'un internaute,
cela n'a aucun impact pour les nouveaux arrivants qui devront quoi qu'il arrive tlcharger toutes vos images ainsi que vos
fichiers CSS et JavaScript. Si vous possdez plusieurs feuilles de style ou fichiers JavaScript sur votre site, il peut devenir
intressant de les fusionner afin de n'en faire qu'un, qui sera alors tlcharg en une seule fois par vos visiteurs. La page sera
ainsi tlcharge plus rapidement et donc affiche tout aussi vite.
Ici encore, des plugins existent pour vous faciliter la tche et fusionner vos fichiers la vole lors du chargement de la page.
Vous n'avez pas vous occuper de la gnration du fichier final. Tout est fait automatiquement pour vous, comme c'est le cas
avec WP Minify.
Configurer WP Minify
Une fois le plugin WP Minify install, un nouveau menu est disponible dans l'administration en cliquant sur Rglages > WP
Minify . La configuration par dfaut est normalement correcte : la compression des fichiers JavaScript et CSS est active et le
nombre de requtes adresses votre serveur est immdiatement rduit. Vous pouvez tout instant dsactiver la fusion des
fichiers en modifiant la configuration dans le cas o des problmes apparatraient. Le plugin prend aussi en charge la
compression du code HTML en supprimant des caractres inutiles comme les espaces, mais l'impact sur les performances est
moindre par rapport la fusion des fichiers de ressources (voir la figure suivante).
Les paramtres du plugin WP
Minify
Le cache WordPress permet de limiter les requtes sur les base de donnes, en enregistrant les informations requises
plusieurs fois par page.
La configuration du serveur indique au visiteur les contenus qu'il peut cacher sur son ordinateur pour limiter les
tlchargements.
La compression des fichiers de ressources permet d'acclrer le chargement des pages en limitant les requtes sur le
serveur.

785326-Propulsez-Votre-Site-Avec-Wordpress - Copie PDF

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

785326-Propulsez-Votre-Site-Avec-Wordpress - Copie PDF

Transféré par

Droits d'auteur :

Formats disponibles

Propulsez votre site

Licence Creative Commons 6 2.0

Retour en arrire ....................................................................................................................................................................................................... 48

Dfinition du Virtual Host ......................................................................................................................................................................................... 107

Propulsez votre site avec WordPress

Par Midnight Falcon

Mise jour : 11/03/2014

Partie 1 : Prendre en main Wordpress

la page de prsentation dune entreprise ;

Sur Windows : WAMP

Apparition de l'icne de WAMP dans la barre des tches

La page d'accueil de WAMP

Sur Mac : MAMP

L'installation MAMP sur Mac

Dmarrage des serveurs

Les ports d'Apache et MySQL sont mis jour

Sur Linux : LAMP

sudo apt-get install apache2 php5 mysql-server libapache2-mod-php5 php5-

sudo apt-get install phpmyadmin

La page d'accueil sur Linux

Cration de la base de donnes

Crer la base de donnes dans phpMyAdmin

Validez par un clic sur "Crer", puis passez l'tape suivante.

C:/wamp/www sous windows avec WAMP

/var/www sur Ubuntu/Debian

Le fichier wp-config.php est manquant

Suivre linstallation automatique

La configuration de la base de donnes est correcte

Crer le fichier wp-config.php

L'installation est termine

L'interface de connexion WordPress

Le menu est partag en trois section :

L'accueil du panneau d'administration

des statistiques sur vos visiteurs ;

Linterface est donc susceptible dvoluer.

WordPress est un CMS crit en PHP cr en 2003.

Gestion des articles

L'diteur de texte riche

Publication d'un article

Pour crer une catgorie, il faut renseigner :

le nom de la catgorie, qui sera affich sur les pages ;

La liste des catgories s'affiche sur le blog

Choix des mots-cls pour chaque article

Les diffrents attributs de page

un lien personnalis pour lequel vous choisissez l'url exacte ;

Modification des attributs du menu

L'attribut title s'affiche sous la souris

Organiser les menus

L'interface de gestion des menus

Insertion dans un article

L'ajouter d'un mdia

L'interface pour l'envoi des mdias

Envoie de l'image sur le serveur

Apparence d'un mdia audio sur un article

Titre : le texte afficher au survol du mdia ;

Il y a aussi quelques attributs spcifiques aux images :

Texte alternatif : le texte afficher si l'image n'a pu tre affiche ;

Taille : la taille de la miniature afficher dans l'article.

Grer les mdias non utiliss

Suppression des mdias envoys

Les articles sont des publications rgulires dpendant de l'actualit.

Grer un site participatif

Activer ou non les commentaires