Vous êtes sur la page 1sur 511

Le Campus

WordPress 3
Toutes les cls pour crer, maintenir et faire voluer votre site web
http://www.free-livres.com/

Xavier Borderie Francis Chouquet Amaury Balmer

Prambule de Michel Valdrighi Prface de Matt Mullenweg

customer 27921 at Fri Mar 11 19:29:26 +0100 2011 Proprit de Albiri Sigue <tag.tog@gmail.com>

WordPress 3
Toutes les cls pour crer, maintenir et faire voluer votre site web

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Pearson Education France a apport le plus grand soin la ralisation de ce livre afin de vous fournir une information complte et fiable. Cependant, Pearson Education France nassume de responsabilits, ni pour son utilisation, ni pour les contrefaons de brevets ou atteintes aux droits de tierces personnes qui pourraient rsulter de cette utilisation. Les exemples ou les programmes prsents dans cet ouvrage sont fournis pour illustrer les descriptions thoriques. Ils ne sont en aucun cas destins une utilisation commerciale ou professionnelle. Pearson Education France ne pourra en aucun cas tre tenu pour responsable des prjudices ou dommages de quelque nature que ce soit pouvant rsulter de lutilisation de ces exemples ou programmes. Tous les noms de produits ou autres marques cits dans ce livre sont des marques dposes par leurs propritaires respectifs. Publi par Pearson Education France 47 bis, rue des Vinaigriers 75010 PARIS Tl. : 01 72 74 90 00 www.pearson.fr Collaboration ditoriale: Herv Guyader Mise en pages : TyPAO ISBN : 978-2-7440-4162-4 Copyright 2010 Pearson Education France Tous droits rservs

Aucune reprsentation ou reproduction, mme partielle, autre que celles prvues larticle L. 122-5 2 et 3 a) du code de la proprit intellectuelle ne peut tre faite sans lautorisation expresse de Pearson Education France ou, le cas chant, sans le respect des modalits prvues larticle L. 122-10 dudit code. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from Pearson Education, Inc.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

WordPress 3
Toutes les cls pour crer, maintenir et faire voluer votre site web
Xavier Borderie, Francis Chouquet et Amaury Balmer

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Table des matires


Prambule....................................................................................................................... Prface. ............................................................................................................................. Introduction. ................................................................................................................. Petit guide du blogueur dbutant................................................................................ Qu'est-ce qu'un blog?............................................................................................. Qu'est-ce que WordPress?. ................................................................................... Qu'est-ce qu'un bon blog?. ................................................................................... Faire ses premiers pas dans la blogosphre..................................................... Responsabilit du blogueur................................................................................... Dcouvrir la culture blog.............................................................................................. Les origines des blogs............................................................................................. Apparition et popularit des blogs...................................................................... Et dans les pays francophones......................................................................... La blogosphre d'aujourd'hui................................................................................ Les diffrents systmes de blog.................................................................................. Services d'hbergement de blogs......................................................................... Logiciels hberger soi-mme............................................................................ Prsentation de WordPress. .......................................................................................... De b2 WordPress................................................................................................... volutions de WordPress de 2003 aujourd'hui............................................ Combien vous cotera WordPress ?................................................................... qui appartient WordPress?............................................................................... La communaut francophone de WordPress................................................... Terminologie de la blogosphre. ................................................................................ Vocabulaire du blog. ................................................................................................ Vocabulaire propre WordPress.......................................................................... Remerciements................................................................................................................. Les auteurs tiennent remercier..................................................................... Amaury. ....................................................................................................................... Francis.......................................................................................................................... Xavier. ..........................................................................................................................
XX 1 3 3 3 4 5 6 8 10 10 11 13 14 15 16 17 19 19 22 33 33 34 35 36 38 40 40 40 41 41

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

VI

WordPress 3

Partie I

WordPress ct utilisateur. ..................................................................


1. Installer WordPress................................................................................................... Le kit de dpart . .............................................................................................................. Choisir un nom de domaine................................................................................. Un hbergement ....................................................................................................... Vos donnes de connexion . .................................................................................. Un logiciel FTP......................................................................................................... Dernire version de WordPress ........................................................................... Installation de WordPress . ........................................................................................... Transfert des fichiers WordPress sur votre hbergement . .......................... Cration de la base de donnes WordPress ..................................................... Cration du blog . ..................................................................................................... 2. Le quotidien du blogueur. .................................................................................. Premiers pas avec WordPress...................................................................................... Dcouverte de l'interface........................................................................................ Anatomie du tableau de bord................................................................................ Votre premier article....................................................................................................... Introduction............................................................................................ Tout commence par le titre!................................................................................. Le contenu de votre article.................................................................................... Insrer un mdia........................................................................................................ La bibliothque de mdias..................................................................................... Options avances de rdaction d'un article...................................................... tat de publication.................................................................................................... Options de l'cran..................................................................................................... Dcouverte des catgories. .................................................................................... Dcouverte des mots-clefs..................................................................................... Grer vos articles...................................................................................................... crire et grer une page................................................................................................. Diffrence entre page et article............................................................................ Cration, modification et suppression d'une page. ........................................ Gestion des pages..................................................................................................... crire et grer les liens et les catgories de liens.................................................. Dfinition................................................................................................ Cration, modification et suppression d'un lien . et d'une catgorie de liens......................................................................................

43 45 45 46 48 50 50 51 52 52 54 57 61 61 61 62 65 65 65 66 70 71 83 86 88 88 91 95 96 96 97 98 98 98 99

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Table des matires Gestion et paramtrage des commentaires.............................................................. Gestion des commentaires..................................................................................... Paramtrage des commentaires............................................................................ Diffrents rles d'utilisateurs................................................................................ Crer un nouvel utilisateur. ................................................................................... Gestion des utilisateurs........................................................................................... Diffrents paramtrages du blog. ............................................................................... Options gnrales. .................................................................................................... Options d'criture...................................................................................................... Options de lecture..................................................................................................... Menu Vie prive........................................................................................................ Modifier la structure des permaliens.................................................................. L'onglet Outils.................................................................................................................. Mettre jour WordPress................................................................................................ Mise jour automatique......................................................................................... Mise jour manuelle............................................................................................... Mise jour par Subversion.................................................................................... Mettre jour au moyen d'une extension.................................................................. En cas de problme......................................................................................................... Le blog est bloqu en tat de maintenance. ..................................................... J'ai perdu les modifications de mon thme/d'une extension....................... Le blog ne s'affiche pas comme avant. .............................................................. J'ai rcrit certaines parties de WordPress........................................................ Je prfre la version prcdente........................................................................... Je veux mettre jour depuis une trs vieille version.................................... 3. Choisir le thme et les extensions pour son blog. ............................. Bien choisir le thme pour son blog.......................................................................... Quel style pour mon blog?................................................................................... Gratuit ou payant?................................................................................................... propos des "theme frameworks"..................................................................... Ressources web................................................................................................................ Installer et grer son thme. ......................................................................................... Installation d'un thme............................................................................ Modification d'un thme......................................................................................... Utilisation des widgets............................................................................................

VII
102 102 103 108 109 110 111 111 114 118 120 120 122 123 124 127 131 134 135 135 135 136 136 137 137 139 139 139 140 141 141 143 143 146 147

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

VIII

WordPress 3 Utilisation et gestion des extensions......................................................................... Installation. ................................................................................................................. Mise jour des extensions..................................................................................... Les extensions par dfaut....................................................................................... Les indispensables.................................................................................................... Ressources web pour trouver des extensions.................................................. Gestion des menus........................................................................................................... Utilisation spcifique du thme par dfaut, Twenty Ten. ................................... Arrire-plan. ............................................................................................................... En-tte. .........................................................................................................................
149 149 152 152 153 154 155 157 157 158

Partie II

WordPress ct dveloppeur: concevoir un thme........................................................................................


4. Comprendre le fonctionnement d'un thme WordPress. .............. Analyse de la structure d'un thme pour WordPress............................................ La feuille de style. .................................................................................................... Les fichiers de modle. ........................................................................................... Le fichier functions.php.......................................................................................... Le dossier images..................................................................................................... Structure et convention de nomenclature. ........................................................ Diffrents fichiers pour diffrentes pages......................................................... Hirarchie des diffrents types de pages........................................................... Les fichiers propres chaque thme. ................................................................. Structure HTML d'un thme WordPress.................................................................. Prsentation des marqueurs de modle. ................................................................... Le contenu dans la page web....................................................................................... L'en-tte (header.php). ............................................................................................ La colonne latrale (sidebar.php)........................................................................ Le pied de page (footer.php)................................................................................. Spcificit de la page d'article.............................................................................. La boucle WordPress...............................................................................................

159 161 161 161 162 162 162 163 165 166 167 167 168 169 169 170 170 171 171

5. Crer son propre thme WordPress.............................................................. 175 Pourquoi crer son propre thme?............................................................................ 175

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Table des matires

IX
Cration de la structure de base.................................................................................. 176 Installer WordPress en local sur votre ordinateur.......................................... 176 Installer XAMPP sur Windows . ......................................................................... 177 Installer MAMP sur MacOSX........................................................................... 180 Cration de la base de donnes locale de WordPress................................... 181 Installation de WordPress en local...................................................................... 181 Alimenter votre base de donnes. ....................................................................... 182 Cration des fichiers du blog, les "fichiers de modle". ..................................... 182 Cration du dossier du thme............................................................................... 182 Cration des premiers fichiers du thme........................................................... 183 Cration des fichiers pour les diffrents types de pages.............................. 212 Validation XHTML du thme. ............................................................................. 227 Fonctions et options avances de WordPress. ........................................................ 229 Fonction "more"........................................................................................................ 229 Afficher un extrait d'article.................................................................................... 230 Insertion de vignettes dans votre thme........................................................... 231 Cration d'un modle de page. ............................................................................. 237 Cration d'un thme enfant.................................................................................... 238 6. Concevoir le design de son blog.................................................................... 241 Commencer avec un croquis........................................................................................ 241 Placement des diffrents lments du blog............................................................. 242 lments gnraux du thme................................................................................ 242 Positionnement des diffrents lments............................................................ 244 Mise en place du design: l'en-tte et le fond du blog.................................. 248 Dfinition du style des liens du blog.................................................................. 258 Dfinition du style de la colonne latrale......................................................... 258 Dfinition du style du pied de page.................................................................... 259 Dfinition du style des commentaires................................................................ 260 Style pour les vignettes sur la page d'accueil.................................................. 266 Style pour les pages ou articles non trouvs.................................................... 266 Mise en conformit sur les diffrents navigateurs................................................ 267 Conclusion......................................................................................................................... 271

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

WordPress 3

Partie III

WordPress ct dveloppeur: concevoir une extension. .......................................................................


7. Dcouvrir les principes d'une extension avec Hello Dolly............ Prsentation de l'extension. .......................................................................................... Rappel sur l'emplacement des extensions. .............................................................. En-tte des extensions.................................................................................................... Dcomposition du code................................................................................................. 8. Philosophie des extensions WordPress...................................................... Le concept.......................................................................................................................... Les prrequis techniques............................................................................................... L'API des crochets. ......................................................................................................... Prsentation............................................................................................ Les filtres..................................................................................................................... Les actions. ................................................................................................................. Supprimer une action ou un filtre........................................................................ Liste des filtres et actions disponibles par dfaut. ......................................... Les fonctions amovibles de WordPress.................................................................... Liste des fonctions amovibles disponibles par dfaut.................................. 9. Les API de WordPress............................................................................................. Avant-propos..................................................................................................................... Activation et dsactivation d'une d'extension . ...................................................... Principe................................................................................................... Activation.................................................................................................................... Dsactivation.............................................................................................................. Bonnes pratiques....................................................................................................... Dsinstallation d'une extension . ................................................................................ Principe................................................................................................... Mthode 1: utilisation du fichier uninstall.php.............................................. Mthode 2: utilisation du crochet de dsinstallation................................... Initialisation de l'extension........................................................................................... Principe................................................................................................... Le code......................................................................................................................... Les options de WordPress............................................................................................. Concept................................................................................................... Fonctions de base......................................................................................................

273 275 275 275 276 277 279 279 280 281 281 282 283 284 285 286 287 289 289 289 289 290 290 290 291 291 292 292 293 293 293 294 294 294

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Table des matires Automatiser la cration d'une interface d'administration ........................... Dclarer les options dans WordPress................................................................. Bonnes pratiques....................................................................................................... Les permissions et les rles.......................................................................................... Concept................................................................................................... Principes. ..................................................................................................................... Les niveaux de WordPress rappel.................................................................... Classes PHP................................................................................................................ Fonctions d'aide......................................................................................................... Exemples. .................................................................................................................... Bonnes pratiques....................................................................................................... Internationalisation de WordPress. ............................................................................ Concept................................................................................................... Implmentation dans WordPress......................................................................... Fonctions. .................................................................................................................... Bonnes pratiques....................................................................................................... WP_Http: l'API HTTP.................................................................................................. Concept................................................................................................... Rappel: les diffrents types de requtes HTTP............................................. Technologies. ............................................................................................................. Fonctions. .................................................................................................................... L'API shortcode. .............................................................................................................. Concept................................................................................................... Utilisation.................................................................................................................... Fonctions. .................................................................................................................... Exemple....................................................................................................................... Les menus de WordPress. ............................................................................................. Concept................................................................................................... Fonctions. .................................................................................................................... Bonnes pratiques....................................................................................................... Le mcanisme de scurit nonce................................................................................ Concept................................................................................................... Fonctions. .................................................................................................................... Exemples. .................................................................................................................... Bonnes pratiques.......................................................................................................

XI
295 297 298 298 298 298 299 300 300 302 302 302 302 303 304 307 308 308 308 309 309 311 311 311 312 313 314 314 314 316 316 316 317 318 319

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

XII

WordPress 3 L'API des widgets............................................................................................................ Concept................................................................................................... Fonctions. .................................................................................................................... La classe WP_Widget.............................................................................................. Bonnes pratiques....................................................................................................... Ressources. ................................................................................................................. Classe d'accs la base de donnes WPDB........................................................ Concept................................................................................................... Fonctions. .................................................................................................................... Les diffrents types de retour. .............................................................................. Crer une table dans WordPress. ......................................................................... Bonnes pratiques . .................................................................................................... Le cache de WordPress.................................................................................................. Concept................................................................................................... Activation du cache.................................................................................................. Remplacer l'implmentation du cache de WordPress . par une alternative. ................................................................................................... Fonctions. .................................................................................................................... Utiliser le cache dans son extension................................................................... Bonnes pratiques....................................................................................................... Ressources. ................................................................................................................. La taxinomie dans WordPress..................................................................................... C'est quoi la taxinomie?........................................................................................ Implmentation dans WordPress......................................................................... Exemple....................................................................................................................... Fonctions. .................................................................................................................... L'URL rewriting de WordPress WP_Rewrite. .................................................... C'est quoi le rewriting?.......................................................................... Implmentation dans WordPress......................................................................... Le fichier .htaccess de WordPress....................................................................... Fonctions. .................................................................................................................... Gestion des JavaScripts WP_Scripts. .................................................................... Concept................................................................................................... Fonctions. .................................................................................................................... Bonnes pratiques....................................................................................................... La classe cron de WordPress WP_Cron. .............................................................. C'est quoi un cron?................................................................................ Implmentation dans WordPress......................................................................... Fonctions. .................................................................................................................... Bonnes pratiques.......................................................................................................
319 319 320 322 323 323 323 323 324 328 328 330 330 330 331 332 332 333 333 334 334 334 335 336 337 340 340 340 341 342 344 344 344 346 346 346 347 347 348

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Table des matires Fonctions de formatage. ................................................................................................ Concept................................................................................................... Les fonctions esc_*(). ............................................................................................. KSES le filtre HTML de WordPress............................................................... Fonctions de date............................................................................................................. Principe................................................................................................... Fonctions. .................................................................................................................... Fonctions diverses........................................................................................................... wp_die( $message, $title = '' ). ............................................................................ wp_mail( $to, $subject, $message, $headers = '', $attachments = array() )........................................................................................ wp_redirect($location, $status = 302).............................................................. paginate_links( $args = '' ). .................................................................................. API Post Meta Les mtadonnes des articles..................................................... Concept................................................................................................... Fonctions. .................................................................................................................... API WP_Query Requtage de la base de donnes WordPress. .................... Concept................................................................................................... Fonctions. .................................................................................................................... Bonnes pratiques....................................................................................................... Custom Post Types API crer son propre type de contenu................................. De quoi s'agit-il?.................................................................................... Fonctions. .................................................................................................................... Bonnes pratiques....................................................................................................... 10. Utiliser WordPress en tant que CMS ........................................................... Introduction. ...................................................................................................................... Les pages statiques.......................................................................................................... Comment en crer. ................................................................................................... Comment les afficher. ............................................................................................. Les taxinomies personnalises.................................................................................... Qu'est-ce qu'une taxinomie?.................................................................. Ce que cela apporte.................................................................................................. Comment en crer. ................................................................................................... Comment les afficher. ............................................................................................. Les types de contenu personnaliss........................................................................... Qu'est-ce qu'un type de contenu?.......................................................... Ce que cela apporte.................................................................................................. Comment en crer. ...................................................................................................

XIII
348 348 348 352 352 352 353 353 354 354 354 354 355 355 355 357 357 358 358 359 359 359 361 363 363 364 364 364 366 366 367 367 370 371 371 371 372

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

XIV

WordPress 3 11. Construire une extension volue................................................................... Objectif de l'extension. .................................................................................................. Quelles fonctionnalits? .............................................................................................. Regroupement des fonctionnalits...................................................................... Architecture de l'extension........................................................................................... Fichier ou dossier?................................................................................. Un gros fichier? Ou plusieurs petits fichiers?............................................... Architecture de Simple Classifieds..................................................................... Dveloppement de l'extension..................................................................................... Les bases de l'extension.......................................................................... Activation de l'extension........................................................................................ Initialisation de l'extension.................................................................................... Mise en place du type de contenu....................................................................... Mise en place des taxinomies............................................................................... Partie Administration........................................................................................... Partie Widget.......................................................................................................... Partie Shortcode. ................................................................................................... Partie Internationalisation. ................................................................................. Conclusion.........................................................................................................................
375 375 375 377 377 377 378 378 379 379 380 381 381 382 384 390 394 397 398

Partie IV

WordPress en mode multisite.........................................................


12. Le mode multisite de WordPress. ................................................................... Prsentation. ...................................................................................................................... Historique et numrotation des versions.................................................................. Quels usages?. ................................................................................................................. Plate-forme de sites publique. .............................................................................. Rseaux thmatiques de sites et gros blogueurs. ........................................... qui s'adresse le mode multisite de WordPress?................................................ Les formats d'adresse. .................................................................................................... Quand utiliser le mode multisite?............................................................................. Un ou plusieurs blogs?. ......................................................................................... Petite ou grande frquentation?.......................................................................... Quel hbergeur?....................................................................................................... Quel niveau technique?. ........................................................................................ Conclusion.........................................................................................................................

399 401 401 402 402 402 403 403 404 404 404 404 405 405 405

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Table des matires 13. Crer un rseau de sites avec WordPress................................................. Configuration logicielle ncessaire............................................................................ Serveur mutualis ou serveur ddi?. ............................................................... Prrequis ..................................................................................................................... Rcriture des URL WordPress (serveur HTTP)........................................... Gestion dynamique des sous-domaines (serveur HTTP, serveur DNS). Configuration. ............................................................................................................ Quelques prcisions importantes......................................................................... Pas de www?............................................................................................................. Le fichier de configuration. ................................................................................... Prsentation de l'interface du Super Admin..................................................... Tableau de bord......................................................................................................... Super Admin............................................................................................................... Super Admin Sites................................................................................................ Super Admin Utilisateurs................................................................................... Super Admin Thmes. ......................................................................................... Super Admin Options.......................................................................................... Super Admin Mettre jour................................................................................ Rglages Gnral. ................................................................................................. Outils Supprimer le site...................................................................................... 14. Spcificits du dveloppement en mode multisite............................ Le rseau et les sites sous WordPress en mode multisite................................... La base de donnes de WordPress en mode multisite......................................... Architecture....................................................................................................................... Le cas Lyceum........................................................................................................... Le choix du mode multisite . ................................................................................ Les tables du rseau WordPress.................................................................................. Les fichiers supplmentaires........................................................................................ Sunrise, qusaco?........................................................................................................... Les mu-plugins et les extensions . ............................................................................. Prcautions prendre lors du dveloppement d'extensions. ............................. La variable $table_prefix........................................................................................ Les chemins de fichiers en dur............................................................................. Spcificit pour les thmes multisite.........................................................................

XV
407 407 407 407 408 408 409 412 413 413 413 413 415 415 417 418 418 419 420 420 421 421 422 423 423 424 424 425 426 427 427 427 428 428

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

XVI

WordPress 3

Partie V

Les autres projets de la WordPress Foundation 433


15. BuddyPress la face sociale de WordPress............................................. Prsentation. ...................................................................................................................... Historique........................................................................................................................... Installation dans WordPress......................................................................................... La communaut francophone...................................................................................... Fonctionnalits. ................................................................................................................ Les profils tendus.................................................................................. Blog personnel........................................................................................................... Messagerie prive..................................................................................................... La liste d'amis............................................................................................................ Les groupes................................................................................................................. Le flux d'activits...................................................................................................... Mises jour de statut............................................................................................... Le thme de BuddyPress........................................................................................ L'avenir................................................................................................................................ 16. bbPress le forum pens "WordPress"....................................................... Prsentation. ...................................................................................................................... Historique.......................................................................................................................... Fonctionnalits. ................................................................................................................ Rapide et lger........................................................................................................... Interface simple......................................................................................................... Thmes personnalisable. ........................................................................................ Hautement extensible.............................................................................................. Protection contre le spam....................................................................................... Flux RSS...................................................................................................................... Intgration facile avec votre blog........................................................................ La taxinomie............................................................................................................... bbPress en franais.......................................................................................................... Intgration WordPress................................................................................................. Base d'utilisateurs commune.................................................................. Identification commune.......................................................................................... Correspondance des rles. ..................................................................................... Quand intgrer bbPress WordPress?...............................................................
435 435 436 436 437 437 437 438 438 439 440 440 441 441 442 443 443 444 444 444 445 445 445 445 446 446 446 446 447 447 447 447 448

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Table des matires

XVII
449 451 451 453 453 454 457 458 461 462 464 465 468 469 470 470 471 473 476 477

Partie VI

Annexes...............................................................................................................................
A. Participer l'amlioration de WordPress.................................................. Aider les utilisateurs....................................................................................................... Traduire les textes............................................................................................................ Traduire un thme ou une extension directement.......................................... Prsentation du processus gettext. ...................................................................... Localisation d'un thme ou d'une extension.................................................... Commencer une traduction. .................................................................................. Mettre jour une traduction.................................................................................. Rgles respecter dans une traduction. ............................................................ Extraire les chanes marques pour gettext...................................................... Utiliser GlotPress pour traduire WordPress.com........................................... Amliorer la documentation. ....................................................................................... Tester WordPress. ............................................................................................................ Amliorer le code source.............................................................................................. WordPress, un projet open-source.......................................................... Premire approche de Subversion et de Trac. ................................................. Soumettre un ticket au Trac de WordPress. ..................................................... Trouver des bogues corriger.............................................................................. Crer un correctif au format .patch ou .diff..................................................... B. Description du schma de la base de donnes MySQL de WordPress................................................................................................................ Concept............................................................................................................................... Les tables en mode monosite....................................................................................... Les tables en mode multisite........................................................................................

481 481 481 483

Index Utilisateur......................................................................................................... 485 Index Dveloppeur................................................................................................... 489

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Prambule
Lodeur du maquis corse, le ballet des hirondelles ma fentre, une conversation avec une blogueuse australienne; treize heures un samedi, et la dcision de crer mon propre outil de blog tait prise. Cest un dsir dindpendance qui est lorigine de b2: jutilisais Blogger.com et un service externe pour les commentaires, dont le nom mchappe comme mont chapp les nombreux commentaires qui y taient hbergs quand le service a ferm. Mes buts: conserver la souplesse dutilisation de Blogger, sans les indisponibilits temporaires du serveur, et mclater. Les Anglais de Blur chantaient "Song2" dans Winamp, je criais "Woohoo", et "Blog2" est n, renomm "b2" dans la soire. En juin 2001, il existait dj un certain nombre doutils de blog installer soi-mme, mais trs peu taient vraiment open-source, et ceux qui ltaient ne me convenaient pas: gabarits difficiles diter, interfaces trop basiques ou trop encombrantes, installations souvent malaises. Aussi, quand jai mis en ligne un premier prototype utilisable, jai immdiatement sollicit lavis et les attentes dautres blogueurs pour dterminer ce qui serait et ne serait pas prsent dans b2. De cette premire priode il reste un souvenir deffervescence et dexcitation face l inconnu, exacerb au fil des semaines par la premire version publique, le premier Blogathon (24 heures de blog daffile, pour une bonne cause), les premires contri butions dautres dveloppeurs, autant dtapes qui avec le temps prennent laspect de mythes fondateurs. Fin 2002, la dpression me gagnait et je nai plus donn de nouvelles que sporadiquement. Jai pu prendre conscience de limportance du projet (et de limportance de lOpen Source) lorsque, contrairement dautres avant lui, il nest pas mort avec ma disparition dInternet. Au printemps 2003, une fois la dpression vaincue, je dcouvris que les bourgeons de mon code avaient donn trois fruits: WordPress, b2++ et b2evolution. La familiarit et les affinits avec les dveloppeurs de WordPress me poussrent prfrer celui-ci, et jannonai la fin de b2 et sa succession par WordPress. Je navais plus beaucoup de temps pour diriger un projet, aussi jtais heureux de contribuer au dveloppement par mes ides et mon code au fil des mois suivants, sous la direction de Matt Mullenweg et Mike Little. Ironiquement, pour un projet aux racines franaises, WordPress ne disposait pas dune traduction franaise (la blogosphre francophone tait peine naissante en 2001). Un oubli rectifi en 2004, notamment par le travail de Xavier Borderie et par la formation de lquipe WordPress-FR.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

XX

Prambule
Quand je regarde en arrire, aprs toutes ces annes et maintenant que WordPress est assez clbre (assez pour que vous teniez ce livre entre vos mains!), je ne peux qutre fier du chemin parcouru. Il est une ide reue qui ferait dInternet et des blogs un monde virtuel. Cest oublier quil sagit dun monde peupl par des personnalits relles; les relations qui se crent entre elles sont tout sauf virtuelles. Je naurais jamais assez de pages pour vous dcrire quel point b2, WordPress et les encontres que jai pu faire grce ces projets ont chang ma vie. r Il ne me reste qu souhaiter que WordPress change autant la vtre! Michel Valdrighi. Crateur du projet b2 lorigine de WordPress Octobre 2008

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Prface
Ma participation au mouvement open-source et au projet qui deviendra par la suite Word Press a commenc de manire assez humble. Le Franais Michel Valdrighi avait cr lexcellent outil b2/cafelog, que jutilisais pour mon propre blog, et dont jai commenc modifier le code source pour mes besoins. Autant que je me souvienne, ma premire contribution fut un petit bout de code que javais baptis Texturize et qui tentait autant que faire se peut de transformer les signes de ponctuation basiques en entits typographiques adquates. Lide tait de faire gagner du temps aux utilisateurs de b2, en faisant en sorte quils naient pas se soucier de ces entits typographiques, ou mme se douter de leur existence, le tout se faisant de manire automatique. Quand ce bout de code a t accept, jai ressenti une vague dmotion lide que des centaines de sites web allaient utiliser le code que javais crit. Leuphorie devint une drogue jtais devenu accro lOpen Source. Du concept mme de lOpen Source, qui stipule que le code source dun programme appartient qui veut bien sen occuper, dcoule une ide magnifique: un projet nest plus li un seul auteur, et il vivra tant que des dveloppeurs en auront lenvie. Cest ce qui est arriv b2/cafelog, abandonn par Michel et que jai repris en main avec laide de Mike Little afin dofficialiser toutes les amliorations que nous voulions y apporter. La tche tait norme, mais par chance nombreux furent ceux qui y crurent et se mirent participer : en nous attachant quelques ides fondamentales, nous avons rapidement fait renatre autour de WordPress la communaut originale de b2. La premire de ces ides tait de respecter le temps des utilisateurs. WordPress est une page blanche qui ne sert rien tant que vous ny apportez pas votre crativit et votre temps. Un logiciel doit tre un moyen de parvenir une fin et non tre une fin en soi. Cela implique que, si nous faisons bien notre travail en tant que dveloppeurs, ce travail devient invisible, et il ny a plus aucun obstacle entre lauteur et ce quil crit. Deuximement, nous avons dcid de miser totalement sur les standards du Web, qui lpoque commenaient tout juste se faire remarquer. En encourageant lutilisation de standards comme le XHTML, le CSS, le RSS2.0, ainsi que les microformats comme le XFN, nous voulions montrer le bon exemple pour les autres projets existants, et faire du Web, ou du moins le petit coin du Web que nous occupions, un endroit o il fait bon se rendre. En troisime lieu, nous voulions garder en tte que de nombreux projets open-source souffraient dune asphyxie due un trop grand nombre doptions. LOpen Source est un mouvement prnant un plus grand contrle des outils, ce que certains projets tentaient de donner en proposant un trs grand nombre doptions. Pire encore, ils se servaient souvent des options pour rsoudre les dbats internes; par exemple, sil y avait un profond dsaccord dans la communaut sur la taille donner une section de linterface, ils finissaient par couper court au dbat en crant une option, afin de laisser lutilisateur dcider, plutt que chercher savoir quel choix tait le meilleur. Trop doptions poussent une surcharge cognitive avec laquelle lutilisateur ne souhaite pas toujours se confronter, et qui au final le ralentit.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Prface
La quatrime ide tenait notre conviction que coder est un art (en anglais, code is poetry, littralement "le code est un pome"). Cette ide nous avait t inspire par le pote T.S.Eliot, qui, avec une conomie de mots sans pareille, parvenait donner plusieurs niveaux de sens chaque phrase et syllabe quil crivait. Le code peut sen approcher: court, lgant, ne rvlant que le ncessaire, et devenant une source dinspiration. En gardant cette ide en tte, la communaut forme autour de WordPress a russi conserver le cur du code lger et vloce, mme aprs des annes constamment tendre le nombre de ses fonctionnalits. Enfin, il y a galement une envie de mettre du beau et du respect dans notre travail, chose que nous commmorons lors de chaque version majeure en la baptisant du nom de lun de nos jazzmen favoris. ce jour, WordPress fait tourner plus de 6millions de sites web, ce qui fait 5,999millions de plus que ce que je naurais jamais pu imaginer au dbut du projet. Des blogueurs connus et inconnus partagent leur travail avec le monde par le biais de WordPress, au rythme de plusieurs centaines de milliers darticles par jour. Linfrastructure de cration dextensions et de thmes, cre quasiment par hasard, est maintenant au cur dun cosystme en pleine croissance, fait de milliers de dveloppeurs concevant des fonctionnalits qui transforment WordPress en tout autre chose, parfois sans ressemblance avec le logiciel dorigine. Ce logiciel est devenu la base du travail dautres dveloppeurs, comme une autre page blanche. un tel niveau de croissance, nombre de projets commenceraient scrouler sous leur propre poids, ralentir leur progression ou sempter, mais la beaut de lOpen Source fait que notre communaut se rapproche plutt dune boule de neige descendant une pente: nous prenons de la vitesse. WordPress voit dsormais natre trois versions majeures par an, chacune rpondant aux demandes explicites ou implicites dutilisateurs comme vous. Malgr tout le chemin que nous avons parcouru, je me retrouve encore tous les jours aussi frustr que lorsque le projet WordPress a commenc. Quand nous recevons des prix ou quun nouvel excellent livre sort, comme celui que vous tenez entre les mains, cela ne veut pas dire que nous puissions nous reposer sur nos lauriers; cest notre dfi, notre responsabilit toujours intense, de crer le meilleur logiciel de publication dans le monde, sans comparaison possible. Nous ny parviendrons pas en faisant de plus grosses dpenses que la concurrence, mais en aimant toujours plus ce que nous faisons. Nous le ferons grce aux dveloppeurs et aux utilisateurs qui se tiendront par la main. Nous le ferons ensemble. On dit souvent quil faut dix ans pour faire un grand logiciel. WordPress a rcemment ft son cinquime anniversaire cest donc que nous sommes mi-chemin. Matt Mullenweg. Fondateur du projet WordPress Aot 2008

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Introduction
Les ides sont faites pour se propager, et aujourdhui les moyens de propagation nont jamais t aussi nombreux, amenant mme notre poque recevoir lappellation dre de la communication. Entre baisse des prix et amlioration des rseaux, Internet autorise aujourdhui tous ceux quune ide anime la faire entendre plus globalement quavec un tlphone, de manire plus abordable quavec la tlvision, plus rapide quavec un livre, plus prenne quavec le bouche--oreille Si vous avez une ide faire partager, Internet est devenu incontournable. Au cur dInternet se trouve le World Wide Web, fait dinnombrables sites abordant autant de sujets. Et une part toujours plus grande de ces sites web appartient la catgorie des blogs. Vous avez ouvert ce livre parce que vous voulez en savoir plus sur la publication en ligne laide de WordPress, CMS spcialis en la matire.

Petit guide du blogueur dbutant


Qu'est-ce qu'un blog?
Cette introduction est probablement loccasion idale pour dfinir ce quest un blog. Sans plonger dans lexplication technique ni la justification "philosophique", on peut simplement dire quun blog est une forme particulire de site web, avec des caractristiques prcises, mais qui ne sont pas toujours prsentes. La dfinition la plus large est la suivante: un blog se caractrise par la publication plus ou moins rgulire darticles, gnralement classs par ordre chronologique inverse sur la page principale. Les articles sont dats, et chacun dispose dune URL unique dote dune zone de commentaire. Dj dans cette dfinition, certains points sont facultatifs : lordre peut ne pas tre strictement chronologique, il se peut que les articles naient pas dURL unique, ou lauteur a pu choisir de refuser les commentaires. Partant de l, de nombreux composants peuvent sajouter: prsence ou non dun flux de syndication, utilisation dun systme de gestion de contenus (Content Management System, ou CMS), ou criture la main du code HTML,etc. Les liberts sont nombreuses, et effectivement il est difficile de donner une dfinition qui puisse sappliquer absolument tous les blogs. Dans les faits, un blog est davantage dfini par son aspect extrieur que par son contenu. On pourrait ainsi diffrencier sites web et blogs en prcisant simplement que ces derniers sont rgulirement mis jour. Un site web reste quant lui statique mme sil peut inclure une section blog, ce qui est souvent une solution idale pour faire vivre un site statique

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

WordPress 3
Il existe toutes sortes de blogs, depuis le blog trs personnel ax sur un sujet intime jusquau blog dentreprise servant de mdia direct entre lentreprise et ses clients. Certains blogs sont beaucoup lus et mme influents auprs des mdias traditionnels, tandis que dautres ne sont lus que par une poigne de personnes proches du blogueur Politique, promotion produit, couture : tous les sujets sont abords, et les blogs les plus visits sont souvent ceux qui expriment la passion de leur auteur. Tenir un blog est aujourdhui un phnomne reconnu et solidement install dans les habitudes des internautes. Linfluence des blogs est dailleurs telle quil peut tre difficile de diffrencier blogs et mdias traditionnels, tant les journalistes qui tiennent un blog sont nombreux, et tant les caractristiques du format "blog" sont frquemment reprises par les sites "classiques". Lexpression "avoir un blog" est donc le plus souvent rserve aux personnes qui tiennent un blog personnel, mais lexpression "avoir un site web" est tout aussi valable dsormais.

Qu'est-ce que WordPress?


WordPress est un logiciel de gestion de blog gratuit et open-source cest--dire que tout le monde peut participer son volution. g aujourdhui de 7ans, il est en mesure de grer bien plus quun simple blog: il peut tre utilis pour construire un site dynamique complet. Men initialement par deux personnes (Matt Mullenweg et Mike Little), le projet WordPress est dsormais essentiellement maintenu par les dveloppeurs de la socit Automattic, cre par Mullenweg en aot2005, ainsi que par un grand nombre de dveloppeurs indpendants. Sous lgide dAutomattic, WordPress a volu pour exister sous plusieurs formes. Cest pourquoi le nom WordPress dsigne deux projets distincts, mais aux racines communes: WordPress, le gestionnaire de blog open-source. Projet le plus connu, WordPress (ou WP) est un script PHP gratuit qui peut grer un site web complet grce ses fonctionnalits avances de gestion de contenus tels que les pages statiques. Il peut galement grer un rseau de sites (ou "ferme de blogs") trs rapidement bien que cela soit rserver aux spcialistes, car sa maintenance nest pas si aise que pour une installation monosite. Ce projet constitue le sujet principal de ce livre. WordPress.com, le service dhbergement de blogs. Cest un service gratuit dhbergement de blogs, avec options payantes. Gr par Automattic, ce service est bas sur WordPress MU. Afin de diffrencier WordPress-le-script de WordPress.com-le-service-dhbergement, on utilisera rgulirement les appellations "WordPress.org" ou "la version autonome de WordPress". Plus globalement, si le ".com" nest pas mentionn, on peut sans crainte partir du principe que lon parle de la version autonome. noter quune troisime dition de WordPress existait jusque rcemment: WordPress MU. Avant sa version3.0, WordPress ne pouvait grer quun seul site par installation. WPMU tait une dclinaison de WP permettant de grer plusieurs sites. Avec la version3.0, WPMUa t intgr ldition classique de WordPress et na donc plus de raison dtre cit. On parle dsormais de "WordPress en mode multisite".

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

5
Outsider lorigine, WordPress est aujourdhui lun des outils de gestion de blog les plus populaires: les statistiques de 2009 relevaient environ 6millions de blogs WordPress; de son ct, le service WordPress.com comptait plus de 4millions de blogs, plus de 140000articles publis chaque mois en moyenne. Sa popularit dpasse aujourdhui celle du service gratuit Blogger.com (proprit de Google). En avril 2010, lors dune confrence autour du CMS Drupal, les rsultats dune rcente tude annonaient que WordPress propulsait 8,5% de lensemble des sites web. En considrant que Google indiquait en 2008 quil indexait plus de 100milliards de sites, cela mettrait le nombre de sites WordPress aux alentours de 8milliards... La socit Automattic ne fait pas que grer ces deux incarnations de WordPress: dans son portfolio de projets, on retrouve un outil open-source de gestion de forum (bbPress), un service gratuit de lutte contre le spam (Akismet, inclus par dfaut avec WordPress), un service gratuit de gestion des avatars en ligne (Gravatar), un outil open-source de gestion de site communautaire/rseau social (BuddyPress, bas sur WordPress), un service gratuit de prise en charge avance des commentaires de blog (Intense Debate), un service gratuit de gestion de sondages (PollDaddy), et de nombreux autres projets... Automattic tait lorigine un nom gnrique pour les projets personnels de Matt Mullenweg, et il est devenu aujourdhui lun des acteurs les plus puissants du monde du blog; il compte plus de 30employs, et a rcemment lev plus de 30 millions de dollars dinvestissement afin de consolider ses f ondations et de voir long terme. Lavenir de WordPress semble donc assur

Qu'est-ce qu'un bon blog?


Bien quil nexiste pas de rgles graves dans le marbre, la blogosphre est aujourdhui suffisamment mature et varie pour quil soit possible de discerner les points communs des blogs de qualit: Il a une voix personnelle. crire un blog sur rien ne vous amnera pas bien loin, tout comme crire un blog sur tout ce qui se passe ne vous rendra jamais plus intressant aux yeux des internautes, qui recherchent avant tout loriginalit. Cette originalit, qui sortira votre blog du lot, ne peut stablir qu partir du moment o vous crivez sur des sujets qui vous touchent profondment ou vous passionnent rellement. Lide est de faire "votre trou" dans la blogosphre en crivant avec passion, passion qui trouvera forcment un cho chez certains blogueurs/internautes, si tant est que vos propos soient sincres. Il encourage la conversation. Tenir un blog est une chose, cen est une autre que recevoir des commentaires pertinents, et mme voir se former une vritable communaut dhabitus autour du blog. Cette communaut ne se formera pas du jour au lendemain: il faut non seulement interpeller ses lecteurs (sans pour autant finir chaque article par "quen pensez-vous?"), mais galement sinscrire dans la communaut plus grande de la blogosphre, savoir laisser des commentaires appropris sur les autres blogs (ce qui par ailleurs vous ramnera des visiteurs), mais encore rpondre aux articles des autres blogs par vos propres articles bien construits. Bien sr, cela demande du travail et nest

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

WordPress 3
nullement ncessaire pour tre heureux avec son blog: certains blogs nautorisent pas les commentaires et nen sont pas moins apprcis. Il sait rester humble. Votre avis nest pas toujours plus important ou plus judicieux que celui des autres, et si jouer la provocation peut vous rapporter un lectorat, il sera bien moins fidle que celui dun blog sobre et affable. Nombreux sont ceux qui se lancent dans la blogosphre avec pour objectif de sy faire un nom, voire de devenir un blogueur "influent" (ou un "influenceur", un "buzzeur", ad nauseam, etc.). Lide du blog est dtablir une conversation, pas de convaincre de putatifs lecteurs du bien-fond de vos arguments. Il respecte ses lecteurs. Cela suppose de ne pas modifier les articles dj publis afin den arranger le propos sans lindiquer clairement, de ne pas effacer les articles que lon regrette (sauf injonction judiciaire), et de toujours publier les commentaires des lecteurs (sauf cas de force majeure). Avoir une tiquette de publication est essentiel pour tablir une relation de confiance avec ses lecteurs. Il respecte le contenu dautrui. Un blog doit faire preuve dune certaine originalit pour sortir du lot. Certains blogs se sont fait une spcialit de reprendre mot pour mot les contenus dautres sites (images, vidos, parfois mme textes) afin de surfer sur lphmre vague de "buzz" que ce contenu peut gnrer, et profiter des possibles requtes Google sur le sujet et, donc, esprer des clics sur leurs bannires publicitaires. Si ces blogs sont certes populaires (dans le sens le moins noble du terme), cela ne prsage pas de leur qualit: ils napportent rien la conversation, ntant quun relais vide de sens. Comme pour tout mdia, le droit de citation existe sur les blogs, et lexigence de qualit ne doit amener la (courte) citation que pour mieux la discuter, non pour avoir sur son blog les mmes mots-clefs que sur tant dautres blogs cibls "buzz". Plus prosaquement, le contenu dun site tant une uvre de lesprit, il entre dans le cadre de la proprit intellectuelle. De fait, reprendre un contenu sans autorisation explicite de lauteur peut sapparenter du piratage Il est libre de toute contrainte. Terminons cette liste en temprant les points prcdents: un bon blog prend ses lecteurs au dpourvu, il sort de sa propre "ligne ditoriale" (si tant est quil en ait une), il se met ses lecteurs dos et les fait ragir idalement, en les poussant bloguer de leur ct plutt qucrire un commentaire. Un bon blog doit donner envie douvrir un blog. En dfinitive, la caractristique premire dun bon blog reste sans doute sa libert de ton, aussi les points que nous venons dvoquer ne sauraient tre des vrits scientifiques, mais sont plutt des "bonnes pratiques"; ne pas les suivre la lettre ne fera probablement pas de vous un mauvais blogueur. Soyez libre!

Faire ses premiers pas dans la blogosphre


La blogosphre est une communaut trs ouverte: il est extrmement facile dy entrer, il suffit de crer un blog. En revanche, il est plus difficile dy rester, de sy faire remarquer ou mme de sen faire oublier, de comprendre ses dynamiques et ses politiques internes

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

7
Devenir membre de la blogosphre, pour celui qui souhaite sy mettre srieusement, requiert plus que quelques penses matinales et des photos de chat en contre-jour. Si vous vous apprtez ouvrir votre premier blog, gardez les points suivants en tte, ils vous viteront un certain nombre de faux pas! Tout le monde vous lit. Votre blog sera accessible tous, notamment aux moteurs de recherche. vitez donc dcrire des textes que vous ne souhaiteriez pas voir ressurgir dans quelques annes. En rgle gnrale, si vous crivez sous votre nom, il peut tre bon de bloguer comme si vous vous adressiez vos parents, votre grand-mre, votre patron, vos anciens collgues qui tous, potentiellement, peuvent vous lire. Et, si vous crivez sous un pseudonyme, ne croyez pas tre anonyme pour autant Lanonymat nexiste pas vraiment sur Internet et noffre donc quune protection toute relative. Plus dun sest brl les ailes en se croyant en scurit. tout prendre, il est mme prfrable de bloguer sous votre vritable nom, afin de contrler vous-mme votre image sur Internet, plutt que risquer de voir une recherche sur votre nom renvoyer vers un site que vous ne contrlez pas. Le blog y perdra sans doute en libert de ton, mais votre rputation nen sortira certainement que grandie. Gardez vos secrets, et ceux des autres. Un blog est un "journal intime pas intime" en ceci que vous pouvez y raconter la vie de votre entourage et que son contenu devient aussitt public et accessible tous. Ne parlez donc que de ce qui vous implique vous, et non une autre personne. En gnral, vitez de citer les noms complets surtout sils nont pas dj un site web officiel, car votre article pourrait alors tre le premier rsultat dune recherche sur le nom! Les moteurs de recherche archivent tout, pour toujours. Les requtes des moteurs de recherche se font non pas directement sur Internet mais sur une copie de votre site qui est rgulirement faite et stocke sur les serveurs de Google, Yahoo!, Archive.org et tant dautres. Si vous effacez un article ou fermez le blog, il existera toujours sur les serveurs de ces moteurs, et il ne sera pas vident de len supprimer. Soyez donc bien conscient de lincontrlable prennit de vos crits sur Internet et des implications possibles pour vous ou votre entourage dans un an, cinq ans, dix ans Respectez les codes de conduite tablis. La blogosphre est trs permissive, mais les rgles de base de lchange sur Internet et dans la "vraie vie" sy appliquent toujours. Comme dans toute culture, il existe des codes sociaux, et ce nest pas parce quon est en ligne quil faut traiter les gens diffremment. La Netiquette, imagine bien avant la cration du Web, est une charte de rgles de conduite et de politesse qui tente de dcrire le comportement adopter pour que les relations sur le Net restent courtoises. Sans que la Netiquette soit absolue ou dfinitive, il faut garder en mmoire que sur Internet la personne en face reste un tre humain et que les querelles de clocher napportent rien lidal humaniste que reprsente ce rseau mondial. Ce ne sont l que quelques rgles de base, qui traduisent la biensance du rseau. En dfinitive, vous restez seul matre de vos crits: il ny a pas et il ny aura jamais de "dontologie universelle du blogueur".

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

WordPress 3
Le blogueur est donc seul matre bord, mais galement seul responsable devant autrui et devant la loi ce qui forme un autre thme important, auquel nous consacrons la section suivante.

Responsabilit du blogueur
Si Internet est un vaste lieu de libert, les internautes nen sont pas moins soumis aux lois terrestres, qui sappliquent dautant plus aux blogueurs, tant donn que leurs sites sont rgulirement mis jour, et donc trs favoriss par les moteurs de recherche. Depuis le dbut, la justice surveille cet espace, et des blogs se sont dj fait condamner cause dun article quils publiaient, ou mme dun commentaire quils affichaient. La prudence reste donc de mise.
Les auteurs n'tant pas juristes, nous avons tir une grande partie du contenu de cette section d'un article publi par l'avocat-blogueur matre Eolas, article que nous vous encourageons lire : http://maitre-eolas.fr/2008/03/24/905-blogueurs-et-responsabilite-reloaded . Par ailleurs, cette section ne fait rfrence qu'aux lois applicables en France. Nous demandons aux lecteurs francophones d'autres pays (Suisse, Belgique, Qubec,etc.) de bien vouloir nous excuser de ne pas avoir pu prendre en compte leurs lois locales, et les enjoignons se renseigner. Enfin, notez que cette section se base en majeure partie sur la lgislation de 2008, et ne prend pas forcment en compte les dernires volutions de la loi en la matire.

Lgalement, cest lditeur du site qui est responsable de son contenu, et non lhbergeur du site, comme danciennes affaires judiciaires peuvent le faire croire. Cette responsabilit a t tablie par la loi pour la confiance dans lconomie numrique (LCEN), et la jurisprudence na de cesse daller dans ce sens. Un blog tant un site web part entire, le blogueur est cens respecter certaines obligations: Dclarer son identit son hbergeur. Un hbergement sous un faux nom, mme gratuit, est un dlit. Faire figurer sur le site le nom du responsable, ou, en cas de site non professionnel et anonyme, la mention de lhbergeur qui a les coordonnes du responsable. Ce texte se trouve souvent plac dans la rubrique Mentions lgales. Publier gratuitement un droit de rponse de toute personne nomme ou dsigne dans un article ou un commentaire, sous trois jours compter de la rception. Il faut bien comprendre quun blog entre dans le cadre du droit pnal de la presse et de ldition, linstar de tout crit mis la disposition du public, et celui du droit limage et de lintimit de la vie prive. La libert dexpression perd donc ses droits devant un texte diffamatoire, faisant lapologie des crimes contre lhumanit, incitant la haine raciale, contenant de la pornographie infantile, poussant commettre des crimes ou dlits. Si la plupart de ces actes sont heureusement rares, il est cependant facile dcrire un texte injurieux ("expression outrageante ne contenant limputation daucun fait") ou diffamatoire ("allgation ou imputation dun fait qui porte atteinte lhonneur ou la considration de la personne ou du corps auquel le fait est imput") sans forcment se rendre compte des

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

9
implications surtout si le propos diffamatoire provient dun commentaire, dont le blogueur est lgalement responsable. Les blogueurs peuvent le plus souvent se reposer sur la prescription, qui sapplique trois mois aprs la publication de larticle ou du commentaire en cause mais qui pourrait passer un an si une rcente proposition de loi venait passer. Le respect de la vie prive fait galement partie intgrante de la responsabilit du blogueur: larticle9 du Code civil franais est sans ambigut, "chacun a droit au respect de sa vie prive", et cela sapplique aussi bien aux voisins ou amis quaux personnes publiques. Une star de cinma peut donc lgalement se plaindre si vous publiez des photos de sa vie prive La loi peut mme sappliquer un blogueur nayant pas commis de dlit particulier: des sanctions professionnelles ont dj t prises lgard demploys ou de fonctionnaires parce quils crivaient pour leur blog pendant leurs heures de travail, quils divulguaient des informations confidentielles, ou simplement quils parlaient de leurs professions alors quils devaient sen abstenir et cest ici quil faut bien comprendre que lanonymat nexiste pas sur Internet. Les blogueurs amricains ont mme une expression pour cela, to get dooced, tire du pseudonyme de Heather Armstrong, qui en 2002, un an aprs avoir ouvert son blog ladresse http://www.dooce.com, a t renvoye de sa socit pour avoir parl de ses collgues de manire satirique. Plus proche de nous, la blogueuse anonyme derrire le site http://www.petiteanglaise.com/ a t renvoye pour "faute grave" en 2006, aprs avoir blogu sur lambiance son travail lemployeur ntait pourtant jamais identifiable dans les articles, qui ne nuisaient donc pas lentreprise. Par ailleurs, le blogueur Garfieldd a t rvoqu de lducation nationale en 2006 pour avoir tenu un blog sur sa vie de proviseur et dhomosexuel sans jamais mlanger les deux ni faire de rapprochement qui puisse tomber sous le coup de la loi pnale. Certes, ces deux affaires franaises se sont plutt bien termines: Petite Anglaise a ensuite gagn son procs devant les Prudhommes et a crit des livres; Garfieldd de son ct a vu sa rvocation ramene une exclusion pendant un an et une mutation; mais chaque affaire est unique Ajoutons enfin un rapide laus propos des commentaires. En effet, deux possibilits se prsentent: Le commentaire nest pas en ligne tant que vous ne lavez pas valid. Vous donnez donc un accord explicite ce commentaire, et votre responsabilit est totalement engage. Valider les commentaires manuellement revient en devenir lditeur, voire lauteur. Le commentaire est automatiquement valid. La publication se fait donc sans votre accord, et votre responsabilit est moindre mais pas nulle pour autant. Vous tes considr comme un hbergeur. Dans tous les cas, vous devez faire attention autant au contenu de vos articles qu celui de vos commentaires...

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

10

WordPress 3
Ce nest l quune approche trs succincte de ce thme, que lon pourrait rsumer ainsi: prenez garde ce que vous publiez sur votre blog. Ce que vous y crivez pourrait revenir vous hanter dans plusieurs annes, soyez donc certain dassumer totalement, et sur le long terme, vos propos.

Dcouvrir la culture blog


Les origines des blogs
Le monde du blog tel que nous le connaissons aujourdhui est le rsultat dannes dvolutions, de dcouvertes et de formalisation. Il est toujours intressant de se plonger dans ce pass pour comprendre ses consquences sur la blogosphre actuelle. Pour commencer, il faut bien savoir que ds sa cration le Web a t pens comme un mdia o les internautes pouvaient aussi bien lire qucrire le premier navigateur tait dailleurs une combinaison de lecteur et dditeur de sites web. Lide premire de Tim Berners-Lee, inventeur du World Wide Web en 1990, tait que quiconque circulant sur le Web disposerait dun espace personnel sur lequel il pourrait crire ce quil veut, simplement do lditeur intgr au navigateur et accessible par un simple clic. Les volutions logicielles ont spar navigateurs et diteurs de pages web (exception faite dAmaya), mais lavnement des blogs et des wikis a permis la vision initiale de Tim BernersLee de se raliser pleinement: il est aujourdhui possible, dun simple clic, de publier ses ides en ligne. Le mouvement de la communaut "blog" na pas eu une naissance spontane ni une popularit immdiate, mais trouve probablement ses origines dans les BBS, ces machines hberges chez des particuliers, administres par des "sysop" (system operators), relies au rseau tlphonique commut, et auxquelles les utilisateurs pouvaient se connecter par le biais dun appel tlphonique au travers dun modem. Sur ces BBS se sont cres les premires communauts numriques, forcment disparates mais permettant de partager des fichiers autrement plus facilement quen envoyant des disquettes par la poste, comme ctait lusage au sein des communauts de pirates informatiques et de crateurs de dmos. De simples dpts de fichiers, avec de strictes rgles de quotas denvoi et rception de fichiers, les BBS ont rapidement volu pour inclure des systmes de messagerie interne et de forums ddis aux divers sujets sur lesquels le BBS tait spcialis, jusqu devenir de simples endroits o les membres pouvaient discuter de tout et nimporte quoi En France, les BBS peuvent tre compars aux serveurs RTC, qui exploitaient les possibilits graphiques et rseau du Minitel. Partage de fichiers, forums de discussion, graphisme, gestion par des particuliers passionns: BBS et serveurs RTC ont beaucoup en commun. Les BBS sont apparus dans les annes1980, et leur popularit na cess daugmenter avec lamlioration des modems, culminant vers la fin des annes1990, au moment o le Web est devenu accessible tous, notamment avec des offres avantageuses comme celles dAOL. Louverture au grand public des outils dInternet, notamment Usenet (les newsgroups, ou groupes de discussion), du courrier lectronique et lapparition des listes de diffusion

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

11
(mailing-list) et enfin du Web avec la naissance des forums de discussion, tout cela a particip montrer quil tait possible de publier ses ides directement, depuis un ordinateur. Partant de l, les premiers sites web personnels ont men la publication en ligne de journaux personnels, et donc au passage au numrique du diarisme do une dfinition du terme blog le dcrivant comme un "journal intime pas intime", voire un "journal extime"

Apparition et popularit des blogs


Le prix du premier blog revient sans doute linventeur du Web, Tim Berners-Lee, qui en 1992 avait mis en place une page "Whats New" permettant de suivre les volutions de son projet World Wide Web: nouvelles versions de navigateurs, nouveaux serveurs, nouveaux membres de lquipe. Les premiers diaristes du Web, ces particuliers qui se sont lancs dans la description rgulire et sur le Web de leur quotidien et/ou de leurs penses, sont apparus en 1994. Le plus clbre dentre eux est Justin Hall, un tudiant amricain qui en janvier1994 sest mis lister et commenter ses bons liens du moment au fur et mesure quil les dcouvrait, puis, en janvier1996, sest mis documenter sa vie intime sur son site links.net (voir Figure1.01). Il a tenu son blog jusquen 2005.
Figure 1.01
Links.net en dcembre 1996.

Dans les pays francophones, cest le Qubec qui tire le premier avec Montral, soleil et pluie de Brigitte Gemme, de juin1995 juin1998, aprs quoi il faudra attendre aot1999 pour voir larrive du blog collaboratif anonyme Pssst.ca.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

12

WordPress 3
On laura compris, lessor des blogs na pas t immdiat: tout comme une simple page mise jour la main suffisait lister les nouveaux sites web en 1993, il existait une page recensant les nouveaux blogs, tenue la main par le blogueur Jesse James Garrett. En janvier1999, celle-ci en recensait 23. Mais dj la communaut stait formalise, dune certaine manire, en adoptant le terme "weblog", cr par John Barger en dcembre1997 sur son blog robotwisdom.com contraction de web log, littralement "journal en ligne", qui dcrivait le fait de "tenir le journal de son activit sur le Web" (logging the Web). Petit petit, les sites personnels rgulirement mis jour par leurs auteurs ont t dcrits comme des blogs Weblog est devenu "blog" suite une plaisanterie du dveloppeur et blogueur Peter Merholz, qui crivait en mai1999: "Pour ce que a vaut, jai dcid de prononcer le mot weblog comme [wee-blog]. Ou blog pour faire court." Lvolution de weblog en blog aurait pu rester un simple clin dil entre connaisseurs, si quelques mois plus tard, en aot 1999, la socit Pyra Labs navait sorti loutil en ligne Blogger.com, une interface complte et gratuite de mise jour de site (voir Figure1.02). Ce ntait certes pas le premier outil de gestion de blog (Open Diary avait t lanc en octobre1998, LiveJournal, en mars1999), mais la simplicit dutilisation de Blogger fera que ce dernier aura un impact important sur le monde de la publication personnelle en ligne; impact qui, accessoirement, aidera le mot "blog" entrer dans le langage courant des internautes.

Figure1.02
Blogger.com en janvier 2000.

Les quelques mois qui ont prcd le lancement de Blogger.com ont connu une explosion: dabord amorce par une poigne dadopteurs prcoces (early adopters) qui souvent se connaissaient, puis les suiveurs ont commenc lancer leurs propres blogs, enfin larrive de services simples et gratuits comme Blogger.com a vritablement favoris un dluge de blogs sur Internet. En simplifiant la publication en ligne au point de ne plus devoir crire

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

13
decode HTML ni utiliser de client FTP, les services en ligne comme Blogger.com ont vritablement popularis ce type de site. partir de cette ouverture au plus grand nombre, la blogosphre na fait que grandir en volume et en diversit, les outils se sont multiplis, la couverture mdiatique sest affole Au niveau politique, linfluence des blogs a commenc vritablement se faire sentir aprs les attentats du 11septembre 2001 et dans le climat politique tendu aux tats-Unis aprs cette date: de nombreux blogueurs se sont lancs, et les mdias se sont enfin penchs sur le mouvement. Entre prparatifs de guerre, limitation des droits individuels et unilatralit des mdias, les blogs ont pu donner une opinion alternative de plus en plus forte et omniprsente, allant jusqu dnoncer les manquements des politiciens comme des journalistes, avec des consquences trs relles dmission du snateur Trent Lott, du journaliste Dan Rather Ds les lections prsidentielles amricaines de 2004, les blogueurs taient traits (bien que de manire exprimentale) comme des journalistes aux confrences. Dsormais, toute personne souhaitant toucher le grand public (du moins ceux ayant accs Internet) se doit de tenir un blog. Politiciens, chefs dentreprise ou simple quidam: le blog autorise une immdiatet et une proximit jamais atteintes auparavant, mettant toutes les couches sociales sur un pied dgalit celui de la libre publication sur Internet. Nombreux sont ceux qui voient en Internet le plus grand progrs pour lhumanit depuis linvention de limprimerie, et les blogs ne font que simplifier lexploitation de ce progrs

Et dans les pays francophones


Comme nous lavons signal auparavant, le premier blog francophone date de 1995, mais il faudra attendre 1999-2000 pour voir les francophones se lancer en masse, avec des blogs qui sont encore ouverts et actifs aujourdhui. La blogosphre francophone a suivi le mme chemin que la blogosphre amricaine, avec quelques annes dcart: elle dispose de "stars", de communauts, de politiciens et de journalistes, de son propre classement de popularit, et organise mme des runions mensuelles (ParisCarnet Paris, YULblog Montral, Yulbuz Qubec, Strasbourg et Bruxelles, Bloggy Friday Lausanne,etc.) o les blogueurs se rencontrent, le plus souvent dans un bar. Les politiques franais ont assez vite compris lintrt davoir une tribune libre sans devoir passer par les mdias traditionnels. Alain Rousset, candidat aux lections rgionales en Aquitaine, ouvre le bal en dcembre2003, rapidement suivi par Dominique Strauss-Khan et Jean-Franois Cop en fvrier2004. Parmi les personnages en vue de la blogosphre francophone, on peut sans doute nommer Loc Le Meur (http://www.loiclemeur.com). Entrepreneur infatigable, il sintresse aux blogs au moment o les mdias commencent se pencher sur le sujet, en septembre2003, et trs rapidement rachte la plate-forme U-Blog, cre par Stphane Le Solliec, afin de monter la socit du mme nom. Ds le mois de mars2004, U-Blog devient distributeur exclusif des produits Six Apart (Movable Type, TypePad), et Loc Le Meur devient le premier promoteur des blogs en France. Par son action, puis par un effet dimitation, nombreux sont les

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

14

WordPress 3
chefs dentreprise, grands mdias et politiciens qui se lanceront dans la blogosphre. En ce sens, Loc Le Meur a eu une grande influence dans la formation de la blogosphre franaise actuelle, recevant mme le titre de "pape des blogs". Depuis, il est plus discret, mais ses quatre annes de promotion des blogs dans les mdias ont laiss une certaine trace. Longtemps avant larrive inluctable de "VRP" comme Loc Le Meur, la promotion des blogs revenait aux early adopters, le plus souvent des geeks (ou affilis) qui navaient pas peur des nouvelles ides. Par ironie, ceux qui avaient ouvert un blog avant Loc Le Meur (donc, avant le 29 septembre 2003) sont parfois surnomms "dino-blogueurs" diffrencier des "no-blogueurs", apparus aprs Loc Le Meur et ne rechignant pas devant les articles sponsoriss (quivalent du publireportage sur Internet), les encarts publicitaires et le marketing personnel. Parmi ces pionniers, il faut noter le travail de la Suissesse Stephanie Booth (http://climbtothestarscom), qui sans tre totalement geek (elle a fait des tudes de lettres) ni totalement francophone (elle est dorigine anglaise) a t la fondatrice ou partie prenante de nombreux projets fondamentaux pour les blogs en particulier et les standards du Web en gnral. Ainsi, elle a lanc ds 2001 le wiki Spirolattic pour la promotion en franais de ses sujets de prdilection, puis le site Pompage.net pour traduire les articles anglais sur la conception web. tant bilingue, elle a trs tt lanc des dbats sur la terminologie des blogs, et a particip la promotion des blogs au sein de la communaut des dveloppeurs. Ils sont nombreux avoir trs tt dfrich le terrain des blogs en francophonie, au profit de tous. Sans tre exhaustifs, nous pouvons citer ceux qui sont encore actifs aujourdhui, comme Laurent Gloaguen (http://embruns.net/), Karl Dubost (http://www.la-grange. net/), ou encore Delphine Dispa (http://www.oeildemouche.net/).

La blogosphre d'aujourd'hui
La blogosphre fonctionne toujours sur les bases tablies en 1999 par la monte en popularit des blogs. Selon loutil de mesure de blogs Technorati, le nombre de blogs suit une courbe quasi exponentielle, depuis les premires mesures ralises en mars2003. En avril2007, leur nombre tait estim 70millions, avec environ 120000 blogs crs chaque jour, soit 1,4 chaque seconde. Daprs les statistiques de loutil, le nombre de blogs double tous les cinq sept mois. Les communauts francophones sont fortes et ne se mlangent pas toujours. La plus importante est bien entendu celle des blogs Skyrock, qui regroupe plus de 19millions de blogs, ce qui en fait le plus gros rseau social de France, devant Facebook. La communaut des blogueurs adolescents forme donc une part importante de la blogosphre, mais la communaut des geeks est galement trs forte, tout comme celles, inattendues, des fans de tricot ou de scrapbooking, trs soudes et dont le nombre est insouponnable. Les blogs font dsormais partie du paysage familier dInternet ils sont mme trop prsents pour certains, qui prfreraient que des blogs personnels ne surgissent pas en trop haute position pour certains rsultats cls des moteurs de recherche. En effet, ces derniers ont tendance donner plus de poids aux sites rgulirement mis jour; donc, pour un mme sujet, les blogs sont souvent gagnants face un site statique autre avantage dutiliser un blog.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

15
Cette forme de publication sest popularise trs rapidement, et il est impossible de limiter les blogs une catgorie de gens tant ils sont simples dutilisation: quon soit geek, politicien, artiste (dessinateur, musicien,etc.), ou tout simplement dsireux de partager, toutes les passions se retrouvent sur Internet. Les entreprises elles-mmes ont bien compris lintrt de ce nouveau mdia, et lancent toutes sortes de blogs: communication interne ou avec la clientle, promotion dun produit Mais il faut accepter de voir ses erreurs pointes du doigt par les lecteurs, ce qui nest pas forcment donn aux socits qui dcouvrent ce nouveau moyen de diffusion. Le mdia blog sest diversifi pour accueillir plus que du texte et des liens: les photographes prsentent leurs travaux sur un photoblog, les vidastes ont leur vidoblog, et il est possible de grer moindres frais son propre mdia audio ou vido en produisant un podcast. Cette dernire appellation dcrit un blog (professionnel ou personnel) proposant rgulirement en tlchargement des missions audio ou vido chose qui tait inimaginable il y a quelques annes encore Les blogs sont par ailleurs devenus sources de profits pour certains. Beaucoup de blogueurs ont mis en place des publicits (le plus souvent textuelles) sur leurs pages, en laissant le soin de jeunes rgies de grer les publicits. Google profite ainsi de cette opportunit avec sa rgie AdSense, Yahoo! avec son Publisher Network, Microsoft avec adCenter, et un grand nombre de petits acteurs, comme Text-Link-Ads, qui cherchent exploiter cette nouvelle manne. Certains blogueurs y trouvent un apport lger, mais une poigne peut se permettre de vivre uniquement de leur blog parfois mme en se faisant payer pour publier des articles. Ce dernier point provoque les polmiques habituelles dun mouvement alternatif dont la notorit explose : opposition entre pionniers et marchands, entre dfricheurs et influenceurs, entre humour de connivence et dballage exclusif du dernier tlphone la mode Les blogs font aujourdhui partie intgrante du paysage des internautes et deviennent donc le reflet de notre socit, o lexcellence croise limperfection et parfois partagent le mme hbergeur

Les diffrents systmes de blog


WordPress est loin dtre la seule solution lorsquon souhaite se lancer dans la publication en ligne. Depuis lavnement de cette forme de site, un trop grand nombre de logiciels et outils ont t crs pour quon puisse imaginer en dresser une liste exhaustive. Bien sr, nous pensons que WordPress est en mesure de rpondre toutes les attentes dun blogueur, mais il est toujours bon de savoir dans quoi on sengage et ce qui existe ailleurs. Aussi, nous allons prendre le temps de parler des autres systmes de blogs. Ceux-ci se regroupent en deux principales catgories : les services dhbergement de blogs, et les l ogiciels hberger soi-mme. La slection qui suit naborde que les systmes les plus rputs. Tous ne sont pas gratuits ni open-source, mais chacun dispose dune large base dutilisateurs et dun dveloppement soutenu, ce qui leur assure une certaine prennit.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

16

WordPress 3

Services d'hbergement de blogs


Nous allons pour cette section faire une sparation: les services crs par des quipes francophones dun ct, et ceux dorigine anglophone de lautre. Dans les faits, la plupart des services anglophones disposent dune interface en franais mais, la traduction tant parfois alatoire, il peut tre prfrable de se reposer sur un service francophone ds le dpart. Les francophones Blogspirit. Service payant lanc en 2004. Il dispose de deux offres payantes, selon les envies du blogueur. Canalblog. Service gratuit lanc en 2003. Hautetfort. Service gratuit, lanc en 2003 par Benot Desavoye et rachet par Blog spirit lanne suivante. Hautetfort reste lun des services francophones les plus en vue. Dispose doffres payantes. Joueb. Site communautaire gratuit et centr autour des blogs de ses membres, lanc en 2001 par Stphane "Biz" Gigandet, lun des premiers blogueurs francophones. Joueb est la contraction de "journal web" et est lune des traductions possibles de "weblog". Dispose de deux offres payantes. Over-blog. Service gratuit lanc en 2004, et aujourdhui lune des principales platesformes de blog franaises. Il a la particularit de proposer une rmunration en droits dauteur pour les blogueurs publiant du contenu original et de qualit. Skyrock blog. Plate-forme gratuite lance par la radio Skyrock, et connaissant un norme succs auprs des adolescents. Cest statistiquement le plus gros rseau social francophone, et le plus gros site franais respectueux des standards du Web. ViaBloga. Service payant lanc en 2004 par les crateurs de Joueb.com et disposant de trois offres graduelles. ViaBloga est gr par lassociation but non lucratif du mme nom. Les anglophones Blogger. Lun des plus anciens services gratuits toujours en ligne, Blogger a t lanc en 1999 par Pyra Labs et ses fondateurs, Evan Williams et Meg Hourihan. Blogger tait un projet annexe men par Pyra pendant le dveloppement de leur projet principal, un outil de gestion de projet, de contacts et de tches. Le projet principal a vite t abandonn devant le succs de Blogger. Conu lorigine pour mettre jour un fichier sur un site distant, Blogger est devenu hbergeur part entire avec le lancement de Blogspot. com ; il est toujours possible de choisir entre les deux modes. Aprs de nombreuses difficults financires, le service a t rachet par Google en 2003 et continue dtre dvelopp aujourdhui. Son cofondateur, Evan Williams, a depuis cr le service de microblogging Twitter. Facebook. Rseau social lanc en 2004 par Mark Zuckerberg, alors quil tait tudiant, et aujourdhui lun des sites les plus connus sur le Web, avec plus de 100millions dutilisateurs actifs. Les membres peuvent crire des articles et les rendre disponibles via un flux RSS.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

17
LiveJournal. Communaut virtuelle gratuite centre autour du blog, lance en 1999 par Brad Fitzpatrick, et lune des plus grandes au monde. Rachete par la socit Six Apart en 2005, LiveJournal a t revendue ds 2007 SUP, une socit russe, la marque LiveJournal tant trs populaire en Russie. Elle est gre par la socit LiveJournal, Inc., proprit de SUP, dont Brad Fitzpatrick a rejoint le conseil consultatif. Chaque membre a la possibilit de crer un blog accessible depuis sa page. MySpace. Rseau social lanc en 2003 par la socit eUniverse, spcialise dans le marketing sur Internet. Rachet en 2005 par le magnat des mdias Rupert Murdoch via son groupe de mdias News Corporation, dj propritaire de nombreux journaux et magazines, des studios 20thCentury Fox, de la chane Fox News,etc. Les utilisateurs peuvent tenir un blog et le diffuser via un flux RSS. TypePad. Service payant lanc par Six Apart en octobre2003 et aujourdhui lun des plus importants hbergeurs payants de blogs. TypePad est bas sur le code de Movable Type, autre produit de Six Apart, et dispose de nombreuses offres payantes. Vox. Communaut virtuelle gratuite centre autour des blogs, lance en 2006 par Six Apart. Vox combine le meilleur de LiveJournal avec tout un espace communautaire trs fort. Windows Live Spaces. Communaut virtuelle gratuite centre autour des blogs, lance en 2004 par Microsoft, initialement sous le nom de MSN Spaces. WordPress.com. Service gratuit lanc par Automattic en 2005, initialement sur la base de WordPress MU, la version multiblog de WordPress. Dispose dune offre payante pour les blogueurs demandeurs.

Logiciels hberger soi-mme


Les services dhbergement facilitent grandement la maintenance dun blog, mais le blogueur qui veut voir par lui-mme sy trouve rapidement limit. Les logiciels hberger soimme permettent de matriser totalement loutil: nom de domaine, apparence, extension, taille et nombre des fichiers joints,etc. En contrepartie, le blogueur devra grer tout seul la maintenance technique du blog Notez que, sans prtendre lexhaustivit, nous nous efforons de mentionner tous les l ogiciels les plus marquants. b2evolution. Logiciel conu partir du code de b2, tout comme WordPress. Cr en 2003 par Franois Planque, il a ds le dpart choisi le support de multiples blogs partir dune mme installation, ce que WordPress a mis deux ans mettre en place avec sa version WordPress MU. b2evolution est aujourdhui toujours en dveloppement, et est utilis par la plate-forme NRJBlog. Licence open-source. Dotclear. Logiciel quivalent en de nombreux points WordPress, conu par Olivier Meunier en 2003 et trs populaire en France. Aprs une priode dinactivit qui a fait craindre la fin du projet, celui-ci a t remis sur les rails notamment grce au registrar

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

18

WordPress 3
Gandi, qui a financ le dveloppement de Dotclear 2.0, une version multiblog sur laquelle est conue la plate-forme gratuite GandiBlogs. Les dveloppeurs de Dotclear se sont depuis affranchis de Gandi, et le dveloppement a gagn en indpendance grce la forte communaut de ce logiciel. Licence open-source. Drupal. Logiciel de gestion de communaut la base, Drupal permet de crer toutes sortes de sites, donc des blogs. Conu en 2001 par le Belge Dries Buytaert, Drupal tait lorigine un systme de gestion de forum, mais sa grande extensibilit lui a permis dvoluer en une vritable plate-forme de publication trs complte, et gratuite. Licence open-source. ExpressionEngine. Logiciel de publication trs complet, lanc par Rick Ellis en 2004, et successeur du blogiciel pMachine du mme Rick Ellis. Cest un systme robuste, professionnel, et dot de nombreuses fonctionnalits. Il dispose dune offre gratuite, ainsi que de son propre service payant dhbergement. Licence propritaire. Habari. Lanc en janvier 2007 par des designers et des dveloppeurs mcontents de lvolution de WordPress, Habari se base sur PHP5 et MySQL5 plutt que rester compatible avec PHP4 et MySQL4, comme WordPress ce qui lui permet dtre la pointe de la technologie. Actuellement en version0.5.1, il est cependant dj stable et mature. Licence open-source. Movable Type. Logiciel de publication lanc en 2001 par le dveloppeur Ben Trott, initialement pour grer le blog de sa compagne Mena Trott et soccuper pendant quils cherchaient un emploi tous les deux. Le succs fut tel quils crrent la socit Six Apart ds lanne suivante (le nom dsignant le nombre de jours sparant la naissance des deux fondateurs). Six Apart est aujourdhui lun des principaux acteurs de la blogosphre, et Movable Type compte parmi les grands concurrents de WordPress. Licence propritaire, dispose depuis peu dune version limite open-source (la question de la licence de Movable Type a longtemps t pineuse, ce qui a bien profit WordPress). Serendipity. Surnomm "s9y" et programm en utilisant PHP et MySQL. Lanc en octobre2003, ce logiciel qui promettait beaucoup ses dveloppeurs tant des membres minents de la communaut a cependant rapidement t dpass en popularit par WordPress. s9y a introduit le concept dextension avec site web centralis, repris par WordPress. Licence open-source. TextPattern. Logiciel de publication lanc en 2001 par le dveloppeur Dean Allen. Ayant la particularit de grer au mieux les CSS et la smantique de son code gnr (notamment par le biais de la syntaxe Textile) en plus dtre trs intuitif, TextPattern est considr comme un logiciel de grande qualit, mais surpass par les autres offres. Il reste lune des inspirations initiales de WordPress, au mme titre que le dfunt logiciel GreyMatter. Licence open-source. Typo. Logiciel lanc en 2005 par Tobias Ltke, aujourdhui maintenu par le Franais Frdric de Villamil. ne pas confondre avec le CMS TYPO3. Licence open-source. WordPress. Logiciel lanc en 2003 par Matt Mullenweg et Mike Little. Voir la section ci-aprs pour plus de dtails. Licence open-source.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

19
Prsentation de WordPress
Prrequis techniques WordPress est un logiciel crit en PHP et stockant ses donnes dans une base MySQL. Les seules conditions qu'un espace d'hbergement doit remplir pour faire fonctionner normalement WordPress sont donc les suivantes: PHP en version4.3 (ou une version suprieure); MySQL en version4.1.2 (ou une version suprieure). WordPress est non pas un logiciel qui se lance depuis Windows ou OSX, mais un script qui s'installe sur un site web. Il vous faudra donc avant tout disposer d'un hbergement web (gratuit ou payant) remplissant les conditions prcdentes et d'un logiciel de transfert de fichier (client FTP), par exemple FileZilla pour Windows ou Transmit pour OSX. Tout est expliqu au Chapitre2.

Avec ce livre, nous souhaitons vous faire entrer de plain-pied dans la communaut des utilisateurs aguerris de WordPress. Une communaut vieille de sept ans dj, et dont lhistoire remonte plus loin encore, jalonne dvnements marquants qui lont faonne telle quelle est dsormais. En vous plongeant dans son histoire, vous comprendrez mieux les choix qui ont fait de WordPress le logiciel quil est aujourdhui.

De b2 WordPress
WordPress trouve ses origines en Corse, le de naissance du dveloppeur Michel "michel_v" Valdrighi, qui le 12 juin 2001 se lana dans le dveloppement de son propre logiciel de publication de blog. Ce logiciel, baptis b2 en rfrence Blogger (qui lpoque fonctionnait sporadiquement), fait le pari de se reposer sur une base de donnes (MySQL) plutt que sur des fichiers statiques, afin dviter le laborieux processus de rgnration des pages HTML chaque publication processus sur lequel reposait Movable Type ses dbuts. Le dveloppement de b2 est open-source et se fait donc publiquement par le biais du blog de test hberg sur cafelog.com (ce qui explique lappellation de "b2/cafelog" frquemment donne ce logiciel), introduisant le concept de marqueurs de modle ds le 16juin (the_ content(), the_title(), the_author()), systme qui est toujours en vigueur dans WordPress neuf ans aprs. Plong dans le dveloppement, michel_v ajoutait de nombreuses fonctionnalits, jusqu ce quil disparaisse de la surface dInternet en novembre2002 (date de la dernire version de b2, la 0.6.1) pour des raisons personnelles. michel_v tant le seul dveloppeur du projet, son absence prolonge a commenc inquiter srieusement les utilisateurs de b2, qui ont t jusqu lancer des appels information. Parmi ces dveloppeurs inquiets, certains prirent les choses en main pour corriger les problmes dcouverts dans b2. Cest l lune des grandes forces du mouvement open-source: si un projet est abandonn par son auteur, nimporte qui peut reprendre le flambeau. Ainsi, Franois Planque se mit retoucher le code pour son propre usage, en avril2003, ce qui lamena sortir publiquement sa version, b2evolution, ds le mois de mai2003.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

20
Figure 1.03

WordPress 3

Interface d'administration de b2 0.6.2.2.

Figure 1.04
Thme par dfaut de b2.

De son ct, Matt Mullenweg lanait ds janvier2003 un appel suggestions, auquel rpondit aussitt Mike Little. Tous deux se lancrent dans la correction des bogues et lajout de fonctionnalits. Lide initiale de Matt tait de profiter de la licence open-source de b2 pour en faire un logiciel combinant "la flexibilit de Movable Type, la smantique de TextPattern, lextensibilit de b2 et la simplicit dinstallation de Blogger". Le logiciel GreyMatter, de Noah Grey, tient galement une place importante dans les inspirations de WordPress. Leur volution de b2, baptise WordPress par une amie de Matt, sortit le 27 mai 2003, en version0.70. Cette premire version de WordPress suivait de quelques jours lannonce

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

21
par Michel lui-mme, revenu la surface, que WordPress devenait le successeur officiel de b2. Michel allait dailleurs rejoindre lquipe de dveloppement peu aprs. Le code de WordPress tout comme son interface dadministration et son thme par dfaut seront grandement revus et stabiliss avec la version 0.72 (voir Figures1.05 et 1.06).

Figure 1.05
Administration de WordPress 0.72.

Figure 1.06
Thme par dfaut, cr par Dave Shea pour la version 0.72, aujourd'hui nomm Classic.

Pour autant, le projet b2evolution continue dtre dvelopp ce jour, en ayant son petit succs.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

22

WordPress 3

volutions de WordPress de 2003 aujourd'hui


2003-2004: des origines la reconnaissance Comme il se doit, le projet WordPress a bien volu depuis cette premire version, dans de nombreux domaines, et il serait impossible de lister lensemble de ces volutions. Nous nen donnerons quun aperu ici. Lanne 2003 a t consacre principalement consolider le code, corriger de nombreux bogues, ainsi qu introduire de nouvelles fonctionnalits. Toutes ces modifications ont donn la version1.0 le 3janvier 2004, trs rapidement suivie par la version1.0.1, qui corrigeait de nombreux bogues et fut baptise "Miles" en hommage Miles Davis.
Figure 1.07
Administration de WordPress 1.0.1.

Cest avec la version 1.0.1 (voir Figure 1.07) que lhabitude a t prise de baptiser les versions de WordPress en hommage aux grands musiciens de jazz, musique dont Matt Mullenweg est friand, lui-mme tant un joueur de saxophone. Cet usage a t appliqu la version mineure suivante (la version1.0.2 de mars2004, baptise "Blakey" pour Arthur Blakey), puis a t rserv aux seules versions majeures. Cest dailleurs avec la version majeure suivante, WordPress 1.2 "Mingus", diffus le 22mai 2004, que le projet a connu de grands bouleversements (voir Figure1.08). Tout dabord, cette version prsentait pour la premire fois des avances notables sur la concurrence du moment : architecture dextension (auparavant, lextensibilit de WordPress reposait sur un fichier tiers, wp-hacks.php), internationalisation (les premires quipes de traduction staient formes dans les pays non anglophones), sous-catgories, outil intgr de lutte contre le spam (un systme de liste noire),etc.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>


Figure 1.08
Administration de WordPress 1.2.

23

Mais, surtout, une lutte politique entoure cette version. En effet, une dizaine de jours avant la sortie de WordPress1.2, la socit Six Apart annona une nouvelle politique de prix pour son produit Movable Type, ainsi quun changement de licence dutilisation. Auparavant, Movable Type tait simplement gratuit pour un usage personnel, et payant pour ceux qui voulaient vendre des services bass sur le logiciel. La nouvelle situation rendait lutilisation de Movable Type gratuite pour un auteur et trois sites au maximum, payant au-del, partir de 100dollars. Un trs grand nombre de blogueurs impliqus ont donc prfr quitter Movable Type pour WordPress ; notamment, le blogueur et dveloppeur Mark Pilgrim a prfr faire don WordPress des 535dollars que lui aurait cot une licence Movable Type. La version1.2 marque donc un tournant majeur pour le logiciel, du fait que de nombreux blogueurs de premier ordre ont commenc utiliser WordPress ce moment-l: le projet prenait clairement position parmi les principaux outils de blogging.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

24

WordPress 3
Il reste que Movable Type permettait de grer plusieurs blogs distincts partir dune mme installation, ce que WordPress ne proposait pas. Plusieurs variations de WordPress et b2 proposaient cependant cette capacit multiblog: b2evolution, Lyceum, ou encore b2++. Ce dernier tait gr par lIrlandais Donncha OCaoimh, qui durant lt2004 a rejoint lquipe WordPress pour crer une version multiblog du logiciel partir du code de b2++. WordPress MU0.1 sortira ds octobre2004 et prendra de plus en plus dimportance, tout en restant un projet distinct de WordPress. Ainsi, WPMU profite toujours des innovations de WordPress, mais avec quelques semaines de retard; les innovations propres WPMU ne sont jamais apportes WordPress. 2005-2008: la stabilisation et la professionnalisation La version majeure suivante de WordPress est la 1.5, sortie en fvrier 2005, baptise "Strayhorn" en rfrence au pianiste Billy Strayhorn, et qui introduit le fameux thme Kubrick cr par Michael Heilemann et utilis par dfaut pour toute nouvelle installation de WordPress (voir Figure 1.09) lancien thme par dfaut devenant le thme Classic. Kubrick a t cr pour exploiter les nouvelles possibilits de lAPI de cration de thmes, entirement remanie, linstar de lAPI de cration dextensions.

Figure 1.09
Nouveau thme par dfaut, baptis Kubrick.

WordPress 1.5 introduit par ailleurs le concept de "pages", qui sont des entres en dehors de la chronologie des articles du blog, et qui font passer WordPress du statut de moteur de blog celui plus complet de CMS, appellation que les dveloppeurs de WP sappliqueront mriter avec les volutions suivantes (voir Figure1.10).

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>


Figure 1.10
Administration de WordPress 1.5.

25

Cependant, ce remaniement du fonctionnement interne de WordPress apportera son lot de problmes de scurit, avec pas moins de quatre versions mineures en deux mois (la fameuse srie 1.5.1, 1.5.1.1, 1.5.1.2 et 1.5.1.3). WordPress gardera de cette priode une rputation de logiciel aux mises jour trop nombreuses et rapproches. En mme temps que sortait WordPress 1.5, le projet Shuttle dmarrait, dont lobjectif tait daccorder linterface dadministration la mme qualit graphique que le thme Kubrick le crateur de ce dernier faisant dailleurs partie de lquipe. Le projet Shuttle tait men par des indpendants habitus de WordPress, mais ne faisant pas partie de lquipe principale de dveloppement. Une fois leur projet termin, sur la base de WordPress1.5, les modifications apportes au code de la version majeure venir de WordPress taient telles que seuls quelques lments furent incorpors ici et l. Dpits, les dveloppeurs en charge de Shuttle se lancrent dans le dveloppement dHabari, un logiciel de blogging dont lobjectif tait dutiliser les dernires technologies (PHP5, MySQL5,etc.). Cette version majeure tait WordPress 2.0 "Duke" (pour Duke Ellington), sortie en dcembre2005 aprs de longs mois dattente. En plus dune zone dadministration entirement remanie (voir Figure1.11), en partie grce au projet Shuttle, WordPress2.0 offrait de vastes amliorations et modifications, justifiant ce saut de version ( lorigine ce devait tre la version 1.6). Entre autres choses, le blogueur disposait dsormais dune interface dcriture dite "WYSIWYG" base sur TinyMCE, dune installation par dfaut de la clbre extension antispam Akismet, dun gestionnaire de rles pour les utilisateurs, dun systme interne de cache

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

26
Figure 1.11
Administration de WordPress 2.0.

WordPress 3

Les longs mois passs entre les versions1.5 et 2.0 nont cependant pas eu comme seul rsultat quune nouvelle version majeure de WordPress, aussi importante ft-elle. En aot2005, Matt Mullenweg, le principal responsable de WordPress, cra Automattic, une structure officielle pour hberger les divers projets quil chapeautait, et qui deviendra une socit part entire peu avant la sortie de WP2.0. Cest que les projets mens par Matt sont nombreux: outre WordPress et le service antispam Akismet, Automattic hberge galement le projet bbPress, un outil simple de gestion de forum cr fin2004, et surtout le service WordPress.com, mis en ligne en aot2005 et ouvert tous en novembre de la mme anne. WordPress.com est une version hberge de WordPress, ou plutt de WordPress MU, qui a fait bien du chemin depuis son lancement moins de dix mois plus tt. Tous les projets mens par Automattic sont disponibles en open-source, mis part Akismet pour des raisons comprhensibles de protection des algorithmes utiliss Suivront rgulirement des mises jour de scurit et de correction de bogues pour la branche 2.0.x, tandis que lquipe travaillait la prochaine version majeure. Parvenue la version2.0.9, elle est considre comme trs stable. Dans les faits, cest la dernire version de WordPress fonctionner avec MySQL3.23. Lquipe de dveloppement, qui avait annonc vouloir maintenir cette version jusquen 2010 (soit 5 ans), a finalement prfr abandonner cette branche, depuis longtemps obsolte.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

27
Janvier 2007 a vu la sortie dune nouvelle version majeure, la 2.1, baptise "Ella" pour Ella Fitzgerald. Celle-ci introduit quelques fonctionnalits intressantes comme la sauvegarde automatique, un nouveau format interne dimport-export et un vrificateur dorthographe. Mais avec la 2.1, lquipe prend la dcision de se baser sur un nouveau cycle de dveloppement, proche de celui du systme Ubuntu Linux: faire au moins une version majeure tous les quatre mois, avec de possibles versions mineures ici et l. Suivront ainsi, en mai2007, WordPress2.2 "Getz" (pour Stan Getz) et la 2.3 "Dexter" en septembre2007 (pour Dexter Gordon). Ces deux versions apportent comme on peut lattendre des innovations certaines: support des widgets, support Atom complet, options de configuration avance (DB_CHARSET, DB_COLLATE, WP_SITEURL et WP_HOME), systme de gestion de mots-clefs (tags), notification de nouvelle version, rvision graphique de lditeur de texte, systme de taxinomie interne,etc. 2008: la qute de l'interface idale La version2.4 tait normalement prvue pour dcembre2007, puis janvier2008, du fait du grand nombre de modifications et des vacances des dveloppeurs. Finalement, la version2.4 fit place la version2.5 "Brecker" (pour Michael Brecker), sortie en mars2008, six mois aprs la version 2.3. Le cycle de dveloppement a donc volu pour prendre en compte les ralentissements dus aux congs dhiver: lquipe en restera dsormais trois versions majeures par an. Six mois entre deux versions majeures, mais les diffrences sont notables. La plus importante est le tout nouvel aspect de linterface dadministration, cre en collaboration avec les designers de Happy Cog (dont le fameux Jeffrey Zeldman, gourou du design web) [voir Figure 1.12]. Cette interface cherche mettre en avant les principales fonctionnalits de publication, au risque de dboussoler certains utilisateurs habitus la prcdente interface, en place depuis de nombreuses annes. Mais la version 2.5 nest pas quune nouvelle interface : elle profite dun tout nouveau systme de gestion de mdias (images, sons, vidos) et de cration de galeries, dune notification de mise jour pour les extensions ainsi que dune API de "shortcode", dune forte emphase donne la scurisation de la connexion, et bien dautres ajouts et corrections. WordPress 2.6 "Tyner" (pour McCoy Tyner) est sorti de son ct un mois avant la date prvue, mi-juillet 2008, et est construit sur les avances de la version 2.5 : parcours de lhistorique dun article (comme dans un wiki), implmentation de Gears pour acclrer ladministration, prvisualisation du thme choisi, rvision du gestionnaire dimage, support SSL

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

28
Figure 1.12
Administration de WordPress 2.5.

WordPress 3

Laventure continue avec WordPress 2.7 "Coltrane" (pour John Coltrane), diffus en dcembre2008, et qui est une nouvelle rvolution, de la taille de la version2.5. En effet, la nouvelle interface de cette dernire version na pas t si bien reue par les utilisateurs, et les dveloppeurs ont donc cherch voir si en repartant de zro ils pouvaient crer une meilleure interface, plus accessible et agrable lusage (voir Figure1.13). Conue sous le nom de code CrazyHorse, cette nouvelle interface dplace le menu principal de WordPress depuis le haut vers la gauche, dans une colonne. Pour bien faire, Automattic a financ des tests oculomtriques pour comparer les deux versions. Ces derniers ont rvl que CrazyHorse tait plus efficace, aussi cette nouvelle interface a t intgre WordPress.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>


Figure 1.13
Administration de WordPress 2.7, issue du projet CrazyHorse.

29

Mais WordPress 2.7 va galement trs loin dans les fonctionnalits: mise jour automatique de WordPress, des thmes et des extensions; intgration dun moteur de recherche et dinstallation automatique dextensions et de thmes ; nouvelle API pour grer ses commentaires en dehors de WordPress; commentaires hirarchiss et pagins ; mise en avant darticle (Sticky Post) Lobjectif avec cette nouvelle version majeure est vritablement de simplifier la vie du blogueur et de lui viter de devoir toucher directement aux fichiers de WordPress. 2009: prparer l'volution vers de nouveaux sommets Disposant dsormais dune base solide avec la 2.7, lquipe de dveloppement travaille amliorer toujours plus la vie des utilisateurs comme des dveloppeurs. Cela passe, en partie, par une adaptation de la nouvelle interface graphique aux besoins de chacun, et nombre

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

30

WordPress 3
de questions relatives linterface sont dsormais directement poses la communaut par le biais de sondages. En avril 2009, le projet BuddyPress arrive enfin maturit avec sa version 1.0, aprs plus dun an de dveloppement pour Andy Peatling, son seul dveloppeur, entre-temps embauch par Automattic. WordPress 2.8 "Baker" (pour Chet Baker) est lanc en juin 2009, aprs donc plus de cinq mois de dveloppement. On pourrait sattendre, aprs tant de temps, des avances s pectaculaires, mais les dveloppeurs ont surtout choisi de consolider lexistant, de rendre WordPress plus rapide et lger et de prparer lavenir. Pour autant, les apports sont notables: installation et mise jour automatique des thmes, comme il tait dj possible de le faire pour les extensions dans la 2.7; refonte complte de la page de gestion des widgets, ainsi quune nouvelle API de widgets ; et, surtout, des centaines de petites amliorations, tant pour les utilisateurs que pour les dveloppeurs. Bien que la 2.8 ft une version ayant eu un grand nombre de contributeurs, elle aura quand mme six mises jour mineures (jusqu la 2.8.6), et notamment trois en un mois, pour des raisons de scurit, ce qui relance les questions sur la protection offerte par WordPress... Du fait de sa grande popularit, le projet WordPress est rgulirement la cible de personnes malveillantes, et linstauration dun outil de mise jour automatique permet aux utilisateurs de se prmunir plus rapidement et simplement dattaques potentielles. Lanne 2009 est galement marque par un rel succs des thmes payants, et par un dbat intense dans la communaut sur le fait de devoir diffuser ses thmes sous licence GPL (donc, gratuitement). Lquipe de dveloppement, partisane du tout-GPL, a t confirme dans son choix par le Software Freedom Law Center. Nombre de dveloppeurs ayant russi ont dcid de suivre cet enseignement et de passer au tout-GPL. Pour autant, le sujet reste encore lobjet de nombreux dbats enflamms... 2009 marque aussi labandon de la branche 2.0.x de WordPress. Celle-ci devait tre maintenue jusquen 2010 afin de respecter la norme du projet Debian, mais les mises jour ntaient que sporadiques, et les problmes de scurit ne faisaient que rendre cette branche plus dangereuse. Cest en dcembre que sort enfin la version 2.9, plus de six mois aprs la prcdente version majeure, secoue par de nombreuses mises jour de scurit. Baptise "Carmen" en lhonneur de la chanteuse de jazz Carmen McRae, elle introduit principalement quatre nouveauts : un diteur dimages intgr (voir Figure 1.14), afin de couper, pivoter ou redi mensionner les images depuis linterface de WordPress ; un systme de Corbeille pour rcuprer les contenus effacs trop rapidement; un systme communautaire dvaluation de la compatibilit des extensions, afin de sassurer quelles fonctionnent correctement et de minimiser les risque de "cassure" du blog; enfin, une prise en compte facilite des contenus en provenance dautres sites, notamment les vidos (YouTube, DailyMotion, etc.). Et, comme dhabitude, de nombreux autres ajouts et corrections moins visibles, notamment destination des dveloppeurs et crateurs de thmes.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>


Figure 1.14
L'diteur d'image intgr, en action.

31

2010: la grande intgration La version 2.9 dsormais disponible, tous les regards se portent vers la version 3.0. Malgr le fait que Matt Mullenweg a toujours annonc que les numros des versions majeures se suivaient sans lien avec limportance de chaque version, toute la communaut attend une volution majeure pour cette version. Leurs attentes sont satisfaites peu de temps avant la sortie de la version 2.8 : ds mai 2009, Matt a commenc annoncer dans les diffrents WordCamps auxquels il participait autour du monde que la version 3.0 serait loccasion dintgrer totalement le code multiblogs au sein de WordPress et de ne plus avoir quune version. partir de WordPress3.0, WordPress MU naura plus de raison dtre: les fonctionnalits multiblogs seront directement accessibles pour toutes les installations de WordPress moyennant quelques rglages inaccessibles aux dbutants, heureusement... Pour les projets open-source grs par Automattic, une tape importante est franchie fin janvier 2010, avec le lancement de la WordPress Fundation, charge de grer le code source et les marques dposes lies ces projets. Automattic nest donc plus quune socit qui participe au dveloppement de ces projets. Autre tape importante avec la 3.0 : labandon de Kubrick comme thme par dfaut. En place depuis WordPress1.5 (2005), ce thme a certes permis WordPress de se faire une place parmi les blogs "beaux ds linstallation", mais est depuis devenu un peu trop envahissant, nombre de blogueurs ne prenant pas le temps de mettre en place un autre thme. Le nouveau thme, baptis Twenty-Ten ("2010" en anglais) permettra par ailleurs dintgrer toutes les nouvelles API mises en place depuis les dernires versions, et que Kubrick ne reconnaissait pas (voir Figure 1.15).

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

32
Figure 1.15

WordPress 3

Twenty Ten, le nouveau thme par dfaut de WordPress.

WordPress 3.0 sort enfin le 17 juin 2010, six mois presque jour pour jour aprs le lancement de son dveloppement. Outre la fusion avec WPMU et le nouveau thme, cette version prsente quelques amliorations de premire importance. Parmi celles-ci, larrive dun gestionnaire de menus qui permet (pour les thmes qui peuvent lexploiter) de grer le menu du thme directement depuis ladministration, sans devoir modifier le code HTML ou PHP; cet outil, bas largement sur les travaux de lquipe de WooThemes, facilite normment le quotidien des utilisateurs. Autres amliorations de la version 3.0, les types de contenus personnaliss et taxinomies personnalises (custom post types et custom taxonomies) propulsent WordPress dans le groupe des CMS robustes et complets au point de mriter un nouveau chapitre pour le prsent livre. Par ailleurs, toujours dans un souci de rendre WordPress plus simple daccs, lensemble des pages de ladministration dispose dsormais dune aide contextuelle trs complte (et totalement traduite en franais...). L'avenir La version 3.0 a t un vritable marathon, o lensemble des dveloppeurs a d travailler darrache-pied des semaines durant pour lintgration de certaines fonctionnalits. De fait, il a t dcid de ne pas attaquer immdiatement le dveloppement de la version3.1, mais de ddier lt 2010 lamlioration des outils communautaires, commencer par la refonte totale du site WordPress.org. Ce projet est baptis "3.org", et devrait voir non seulement le site officiel transform en rseau social grce BuddyPress, mais aussi une refonte du Codex, des dpts de thmes et dextensions, des forums, etc. En parallle, les dveloppeurs prendront le temps dobserver ce que les dveloppeurs et crateurs de thmes peuvent imaginer avec les nombreuses API de la version3.0, afin de les amliorer encore pour la3.1. La reprise des dveloppements en vue de cette version3.1 est quant a elle prvue pour dbut septembre 2010...

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

33
Combien vous cotera WordPress ?
Le fait de dire que WordPress est disponible sous licence open-source nest pas toujours clair pour tous les utilisateurs et encore moins quand on mentionne la licence GPL. La prsente section est donc ncessaire. WordPress, parce quil est plac sous la licence open-source GPL, est un logiciel gratuit et libre dusage. Cela signifie donc, tout simplement, les points suivants: Vous naurez jamais payer pour lutiliser. Vous pouvez parfaitement vous en servir pour grer un site web vocation commerciale ou pour afficher des publicits, type Google Ads. Mais, attention, notez bien que seul le logiciel lui-mme est gratuit et libre dusage. Il existe autour de WordPress, comme pour tout logiciel open-source, un vritable cosystme construit au fur et mesure des besoins des utilisateurs: designers de thmes, dveloppeurs dextensions, et autres services. Si de nombreux membres de cette communaut participent titre gratuit, une portion non ngligeable vend ses services et ils en ont parfaitement le droit. Dans votre qute dun blog qui vous ressemble vraiment, vous rencontrerez donc certainement des thmes payants (et mme quelques extensions), et nombre de services se proposant dinstaller un blog pour vous. Certains vivent trs bien de cette activit plein temps (surtout les designers de thmes), et nous esprons quavec ce livre vous pourrez vous aussi devenir un de ces lucky few qui vivent 100% grce WordPress. En dfinitive, utiliser WordPress ne vous cotera que le temps que vous voudrez bien passer (ou apprendre ) vous en servir, et en retour vous offrira une forme de libert: plutt quutiliser un outil ferm (payant ou non) do vous ne pouvez pas partir sans lui abandonner vos donnes, WordPress peut tre install chez tous les hbergeurs et dispose doutils dimport-export vous assurant de toujours pouvoir faire hberger votre site l o il vous sied. Cette libert des donnes est une spcificit non pas des logiciels open-source mais des formats ouverts qui en dcoulent... Mais cest un autre dbat. Bien sr, il vous faudra quand mme payer votre hbergeur, ainsi que votre fournisseur daccs Internet!

qui appartient WordPress?


La rponse standard est : WordPress nappartient personne, puisque le code du projet est sous licence open-source. Cest lun des grands principes de lOpen Source: le code nappartient personne, nimporte qui peut crer une version alternative de WordPress (un fork) et en faire ce que bon lui semble, tout dpend de la communaut quil parviendra runir autour de sa version. Cest ce qui sest pass quand Matt Mullenweg et Mike Little ont dcid de reprendre b2/cafelog pour en faire WordPress... Cependant, la prsence de la socit Automattic tend faire douter les plus sceptiques. Cre par Matt Mullenweg, gestionnaire de WordPress.com, propritaire des serveurs qui

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

34

WordPress 3
hbergent le code WordPress, employeuse des principaux dveloppeurs de WordPress... Nombre de faits portent croire que, malgr la licence open-source, Automattic garde la mainmise sur le code et pourrait en faire ce que bon lui semble. Cest une fois de plus oublier que la licence autorise nimporte quel mcontent prendre lintgralit du code et aller le faire dvelopper ailleurs, avec la communaut idoine. Plus prosaquement, si Automattic emploie effectivement nombre de personnes qui travaillent exclusivement sur WordPress, pas moins de quatre core developers du projet ne doivent pas leur pain quotidien cette socit, soit plus de la moiti. Reste que tout porte croire que cest Automattic qui tire les ficelles; aussi, pour parer ce type de critique, Matt Mullenweg a lanc en 2010 un projet qui lui tenait cur: la Fondation WordPress. Celle-ci est aujourdhui propritaire du code ainsi que des marques lies WordPress, BuddyPress, bbPress et le concept de WordCamp. Il sagit dune association but non lucratif ("501(c)3 non-profit organization"). Automattic et Matt Mullenweg ne sont donc pas propritaires de WordPress... du moins directement.

La communaut francophone de WordPress


Les francophones ont longtemps d utiliser WordPress en anglais et navaient que les forums officiels (anglophones) o poser leurs questions. De fait, WordPress na t accessible pendant longtemps quaux personnes bilingues. WordPress na pu tre correctement traduit qu partir de la version1.2 (mai2004), qui ajoutait quelques fonctionnalits allant dans ce sens, et surtout la version1.5 (fvrier2005). Effort collectif lorigine ralis par le biais dun wiki, la traduction a volu rapidement grce aux outils normaliss reconnus par WordPress1.5. Cest avec cette version que la traduction a t entirement remanie collectivement, par le biais du logiciel en ligne Rosetta. Enfin, sous un format stable (le standard gettext, utilisant des fichiers .po/. mo), lquipe de dveloppement a laiss la maintenance de la traduction des volontaires, Myriam Faulkner et Xavier Borderie, rejoints par la suite par Sbastien Erard, puis Amaury Balmer. Le besoin de forums dentraide en franais se faisant cependant de plus en plus sentir, le site communautaire WordPress Francophone est lanc en aot2005 par une poigne dutilisateurs: Matthieu Bellon, Damien Gayrard et Xavier Borderie. Cette quipe de bnvoles sagrandit rapidement avec larrive de volontaires enthousiastes: Amaury Balmer, Benot Catherineau et Hubert Selliah, puis Arnaud Mangasaryan et Thomas Grim. Ladresse du site est http://wordpress-fr.net/ (voir Figure1.16). WordPress Francophone soccupe galement dorganiser, chaque anne depuis 2008, ldition parisienne du WordCamp (http://wordcamp.fr), sous la forme dun barcamp o chacun vient partager ses connaissances et rencontrer les autres participants de la communaut. Ldition 2009 a dailleurs reu la visite de Matt Mullenweg.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>


Figure 1.16
Page d'accueil du site WordPress Francophone.

35

La communaut orbite principalement autour du forum gr par les utilisateurs eux-mmes, avec lassistance dune poigne de modrateurs, ainsi que la traduction de WordPress. La communaut francophone ne se limite heureusement pas au seul site WordPress Francophone: nombreux sont les utilisateurs ou crateurs de thmes et extensions lancer de leur ct des initiatives personnelles pour assurer un support plus particulier. Parmi les plus connus, vous trouverez, par ordre alphabtique: Amaury Balmer, crateur dextensions et de thmes (http://www.herewithme.fr/), traducteur de WordPress et de bbPress (http://bbpress.fr/); Bruno Bichet, actualits et astuces (http://www.css4design.com/); Francis Chouquet, crateur de thmes (http://fran6art.com/); Maxime Guernion, actualits et astuces (http://blogtoolbox.fr/) ; Henri Labarre, actualits et astuces (http://www.2803.fr/); Yann LHostis, traducteur de thmes et darticles (http://wordpress-tuto.fr/).

Terminologie de la blogosphre
Comme tout corps de mtier, le Web dispose de son vocabulaire propre, connu aujourdhui de la plupart des internautes, mme dbutants: navigateur, site, e-mail, pop-up, spam, foire aux questions, smiley Le monde des blogs lui-mme dispose dun vocabulaire trs spcifique, auquel il faut shabituer si lon souhaite par exemple comprendre les discussions relatives aux flux RSS, aux podcasts ou aux rtroliens.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

36

WordPress 3
La plupart de ces mots sont utiliss tout au long de cet ouvrage, il est donc dans votre intrt de les connatre afin de savoir de quoi il retourne dans les pages qui suivent. En raison de lorigine souvent anglophone des technologies du Web, nombreux sont les nologismes, voire les emprunts directs. Ici nous mettons en avant les termes qui semblent les plus couramment admis; vous trouverez nanmoins des traductions et des synonymes aprs leur dfinition.

Vocabulaire du blog
Agrgateur. Outil permettant de recevoir les mises jour et de lire les derniers articles de blogs choisis par le biais de labonnement leurs flux. galement : lecteur RSS, lecteur de flux, lecteur de news. Archives. Regroupement dun ensemble darticles dun blog. Le regroupement est le plus souvent chronologique, mais peut galement tre thmatique: par sujet, par catgorie, par auteur Article. lment atomique du blog, comprenant un titre, un contenu, une date et un permalien. Un blog est compos dune suite darticles tris par date. Cest la base du blog: sans article, pas de blog. galement: billet, entre, note; post, blogpost, entry. Blog. Site personnel ou dentreprise, prenant la forme dune suite darticles affichs antchronologiquement (du plus rcent au plus ancien). galement: blogue, weblogue, carnet web, cybercarnet, joueb; weblog, webdiary. Blogiciel. CMS spcialis dans la cration de blogs. galement: carneticiel; blogware. Blogosphre. Ensemble des blogs sur Internet, qui peut tre subdivis en autant de communauts au besoin (francoblogosphre, tricoblogosphre). galement : blogobulle, carnetosphre. Bloguer. Action de publier sur son blog. galement: carntiser. Blogueur. La personne qui crit les articles du blog. Ils peuvent tre plusieurs crire pour un seul blog. galement: carnetier, diariste; blogger. Catgorie. Regroupement darticles cr par le blogueur afin de runir les entres portant sur le mme thme. Un article peut se trouver dans plusieurs catgories. Les cat gories forment une mthode hirarchique de classement des donnes. CMS. Outils de gestion de contenu, de langlais Content Management System, qui simplifient grandement la mise en ligne de contenu multimdia (textes, images, sons, vidos). Les outils de blog comme WordPress sont des CMS spcialiss dans la gestion de blogs. Commentaire. Entre attache un article prcis, crite par un lecteur ou le blogueur lui-mme, en rponse larticle ou un commentaire prcdent. Les commentaires forment la base des discussions sur un blog et servent lenrichir par les discussions ainsi

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

37
engages. Pour autant, certains blogueurs prfrent fermer leurs commentaires, ou du moins les ouvrir que pour certains articles. Entre. Contenu ajout par le blogueur. Il peut sagir dun article, dune page, dun lien, dun commentaire galement: item. Flux de syndication. Fichier contenant les derniers articles, automatiquement mis jour par le CMS lors dune nouvelle publication. Ce fichier, difficilement lisible tel quel car bas sur le format XML, est destin tre lu par les agrgateurs. Il contient lessentiel de chaque article: titre, date de publication, adresse directe, et au choix un extrait de larticle ou le texte complet. Les deux formats les plus rpandus sont les flux RSS (Rich Site Summary ou Really Simple Syndication) et les flux Atom. galement: fil; feed. Horodatage. La date et lheure de publication dun article. Metablog. Blog collectif, collaboratif ou communautaire, pouvant aborder des sujets trs clectiques en fonction de ses membres. galement: mtacarnet, mtablogue. Mtadonne. Information associe une entre, qui sert la dcrire et qui peut tre exploite par le CMS: auteur, date de publication, catgorie galement: metadata. photos, Moblog. Blog crit principalement par le biais dun tlphone portable (envoi de de vidos). galement: moblogue, blogue mobile, mobicarnet. Mots-clefs. Regroupement darticles cr par le blogueur afin de runir les entres listant les mmes mots-clefs. Un article peut disposer dautant de labels que le blogueur lestime utile. Les mots-clefs forment une mthode non hirarchique de classement des donnes et ne doivent donc pas tre utiliss comme des catgories. galement: labels; tags. Permalien. Lien permanent vers un article, une catgorie, un label ou une date du blog. Permet depuis un flux daccder directement un article, mme ancien, sans devoir passer par la page daccueil du site, ni son moteur de recherche. Sert didentifiant visuel dans le cas o le blog dispose dURL propres. Photoblog. Blog dont les articles contiennent principalement des photographies prises par le blogueur. Ping. Fonction interne du logiciel de blog, destine indiquer un site li quon parle de lui dans larticle publi. Sert galement signaler une mise jour aux moteurs dindexage. Podcast. Srie dmissions enregistres au format audio ou vido, diffuses par le biais dun blog. Le lecteur de podcast tlcharge le fichier MP3 ou vido partir de son URL contenue dans le flux RSS, sous le nom denclosure. Publier. Laction de mettre un article en ligne, accessible tous. Un article peut ga lement tre prpubli si sa date de publication est dans le futur. galement: poster.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

38

WordPress 3
Rfrent. Sites web ou blogs do proviennent les lecteurs. Vrifier ses rfrents permet de savoir quels sont les sites/blogs qui font un lien vers son blog, ou de connatre les mots-clefs qui affichent son blog dans les moteurs de recherche. galement: referer. Rtrolien. Lien explicite plac par le blogueur vers un autre blog, afin de lui signaler quil est mentionn dans larticle publi. Fait le plus souvent office de doublon avec le systme automatis de ping. galement: pisteur; trackback.

Quelques technologies et logiciels utiles Apache. Serveur web. Cest le logiciel avec lequel communique le navigateur et qui se charge denvoyer les fichiers (code HTML, image, sons,etc.) attachs une adresse web. Un fichier .htaccess plac la racine du site permet de contrler certains aspects du serveur. Gratuit, le serveur Apache est utilis par la grande majorit des sites web. CSS. Langage de description permettant de sparer le contenu (texte, image, son) du contenant (mise en page). FTP , le blogueur peut accder son espace web et . Protocole de transfert de fichiers. Par le biais dun client FTP ainsi mettre en ligne ou effacer des fichiers. Cest la premire tape de linstallation dun blog ou de la mise en place dun thme ou dune extension. HTML/XHTML. Langage de balisage de donnes permettant de dcrire le contenu dune page web. Cest le socle dune page web, partir duquel sont appels les images, les sons et autres fichiers tiers. Il est surtout utile de le connatre si lon veut matriser le code de ses articles ou crer/modifier son thme. JavaScript. Langage de programmation web, ct client, permettant de mettre en place une certaine interactivit sur une page web. MySQL. Systme de gestion de base de donnes (SGBD). Le contenu dun blog nest pas stock dans des fichiers texte, mais sur un serveur MySQL. Gratuit, cest lun des SGBD les plus populaires sur le Web actuellement. PHP . Langage de programmation web, ct serveur. PHP permet de crer selon les besoins des pages HTML diffrentes, sans intervention de lutilisateur. Un trs grand nombre de sites sont programms laide de PHP , parmi lesquels Wikipdia, Facebook, Digg et, donc, WordPress. phpMyAdmin. Logiciel crit en PHP permettant de grer une base de donnes MySQL par le biais dune interface web plutt quen ligne de commande.

Vocabulaire propre WordPress


WordPress dispose galement dun langage spcifique, auquel nous aurons recours tout au long de ce livre. De fait, si certaines dfinitions vous laissent perplexe, ne vous inquitez pas, tout va sclairer dans les chapitres qui suivent. Ct utilisateur Administration. Ensemble des pages permettant de grer le blog, notamment lcriture darticles. Cette section nest accessible quau propritaire du blog et aux coblogueurs quil aura dsigns. Barre latrale. Zone annexe du blog, gnralement affiche ct des articles de la page daccueil et contenant certaines informations : catgories du blog, calendrier, donnes en provenance de certaines extensions. galement: sidebar.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

39
Champ personnalis. Mtadonne cre par lutilisateur ou une extension plutt que par WordPress. galement: custom fields. Codex. Site principal de documentation de WordPress. Le Codex repose sur un systme de type wiki, ce qui signifie que la documentation peut tre amliore par nimporte qui. Extension. Programme conu par un dveloppeur tiers, et qui tend ou modifie le fonctionnement de WordPress. Une extension typique est un filtre antispam. Modle. Fichier dynamique utilis pour gnrer le code HTML du blog. Un modle est llment atomique dun thme. Ses fichiers sont crits en PHP. galement: patron, gabarit; template. Page. Entre publie en dehors de la chronologie du blog. Les pages fonctionnent de la mme manire que les articles, mais sont traites diffremment par WordPress: elles ne peuvent pas appartenir une catgorie, mais une page peut contenir plusieurs souspages. Pour les diffrencier de lexpression gnrale de "page web", on parlera ici de "page statique". Rle. Identit que peut prendre un membre du blog. WordPress gre cinq rles: administrateur, diteur, auteur, contributeur, abonn. chaque rle se rattachent des capa cits, cest--dire des droits daccs certaines fonctionnalits de ladministration. Thme. Ensemble de modles PHP, dimages et de fichiers CSS dfinissant lapparence du blog pour les visiteurs. Ct dveloppeur Action. Crochet utilis par WordPress au cours de son fonctionnement interne. Il permet au dveloppeur dextensions de modifier ce fonctionnement son gr. API. De langlais Application Programming Interface, traduit en "interface de programmation", il sagit dun ensemble de fonctions mises la disposition des dveloppeurs de thmes ou dextensions, afin dexploiter les donnes du blog. Boucle. Cur de laffichage du blog, la boucle parcourt les entres du blog selon certains critres tablis par le dveloppeur du thme et influencs par les actions du visiteur, afin dafficher du contenu plus ou moins spcifique (tous les articles du blog, tous les articles dune catgorie, un seul article,etc.). Champ personnalis. Mtadonne rattache un article ou une page statique. Crochet. Fonctionnalit de WordPress laquelle un dveloppeur dextensions peut attacher du code. Il y a deux types de crochets: laction et le filtre, la diffrence la plus visible tant que le filtre renvoie une valeur, au contraire de laction. galement: hook. Filtre. Crochet utilis par WordPress avant dcrire une donne dans la base de donnes ou de lafficher lcran. Le filtre permet au dveloppeur dextensions de modifier la donne avant lcriture ou laffichage.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

40

WordPress 3
Marqueur de modle. Fonction PHP utilise dans un modle, permettant dy placer un contenu tir de la base de donnes du blog. Typiquement, il sagit des donnes lies une entre: titre, contenu, horodatage, lien, auteur Taxinomie. Un regroupement de contenus. Par dfaut, les articles peuvent tre groups l'aide de catgories et de mots-clefs. Un thme ou une extension peut par ailleurs ajouter autant de taxinomies que ncessaire, n'importe quel type de contenu, par dfaut ou personnalis. galement : taxonomy, custom taxonomy. Type de contenu. WordPress dispose par dfaut de cinq types de contenus : les articles, les pages, les fichiers joints, les rvisions et les menus de navigation. Un thme ou une extension peut par ailleurs ajouter autant de types de contenu que ncessaires : les types de contenu personnaliss. galement : custom post types.

Remerciements
Les auteurs tiennent remercier
Patricia Moncorg, notre ditrice chez Pearson, tout dabord pour avoir mont le projet, mais surtout pour lavoir soutenu malgr tous les problmes survenus pendant sa conception. Sans le soutien constant et la grande comprhension de Patricia, ce livre serait obsolte avant mme son arrive en librairie Merci galement Amandine Sueur et toute lquipe de Pearson Education France ainsi qu' Herv Guyader, pour nous avoir aids terminer ce projet dans les meilleures conditions. Enfin, un grand merci notre correcteur, Philippe Grard: sans son travail de fourmi, nos textes seraient sans doute bien moins digestes. Michel Valdrighi, le crateur de b2, et Matt Mullenweg, le fondateur du projet WordPress, sans qui ce livre naurait tout simplement pas de raison dtre. Ils ont eu par ailleurs la gentillesse daccepter dcrire chacun un texte introductif, le prambule et la prface. Stephanie Booth, membre mrite de la blogosphre francophone, nous a t dune trs grande aide en faisant plus que relire simplement nos chapitres: ses conseils et corrections ont largement contribu rendre la premire dition de ce livre encore meilleure. Sil devait rester des fautes et incohrences, elles ne seraient dues qu notre propre inattention.

Amaury
Jai toujours t convaincu que participer la communaut dun logiciel libre tait un excellent tremplin professionnel. Cest pourquoi jai longtemps navigu entre diffrents gestionnaires de contenu libres, comme Dotclear, XOOPS ou Typo3, en tentant de mimpliquer par les forums, les documentations, et ainsi trouver une place dans leurs communauts. Cependant, lorsquune communaut existe dj depuis longtemps, il nest pas facile, voire impossible, de "faire son trou". Par chance, en aot 2005, je suis tomb par le plus grand des hasards sur un article dappel participation pour construire ce qui allait devenir le WordPress Francophone. Cet appel, lanc conjointement par Matthieu Bellon et Xavier Borderie, allait changer ma vie ! En plus de contribuer au dbat dides autour du portail francophone, jai pris la responsabilit

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

41
deffectuer la majorit des dveloppements techniques ncessaires aux fonctionnalits de WP-FR. Cinq ans aprs, et quelques coups de folie de ma part, je tiens remercier Xavier et Matthieu pour leur confiance et leur patience chose qui na pas toujours d tre facile. Grce cette aventure, jai eu loccasion dacqurir une exprience unique et une reconnaissance dans ce domaine. Jai donc pu crer mon entreprise, WP-Box, et je suis dsormais un entrepreneur expert dans les technologies WordPress et BuddyPress. Cest galement grce cet investissement bnvole que je me retrouve ici crire un livre sur mon sujet de prdilection, WordPress chose que je naurais jamais imagine il ny a pas si longtemps que cela... Pour finir, je tiens galement remercier ma compagne, Meriem, et ma famille, pour mavoir permis darriver sans encombre au bout de la rdaction de ce livre.

Francis
Quand jai dmarr mon blog en 2006, ce ntait pas dans loptique de parler de WordPress. Cela sest fait naturellement, comme souvent sur les blogs. Jai ador la plate-forme et surtout sa communaut. Jen ai donc parl, mes articles ont t lus, et de fil en aiguille, fran6art. com est devenu une solide base de donnes sur WordPress. Ensuite, tout sest enchan. Jai dcid de faire des blogs et de WordPress mon mtier, et un jour la possibilit sest prsente de faire un livre sur ma plate-forme de prdilection. Et tout cela parce quun jour jai cr un blog et que jai dcid de parler de WordPress! Sil vous fallait un exemple du pouvoir des blogs, ne cherchez plus! crire un livre na rien dvident. Mme si le sujet est passionnant, il faut trouver le bon axe pour laborder, et trouver les bonnes formules. Lorsque le projet a t voqu, jai tout de suite pens Xavier et Amaury pour leur implication dans la communaut francophone, mais aussi pour leurs qualits techniques et humaines. Rdiger un ouvrage tel que celui-ci avec nos diffrentes visions de loutil ne pouvait tre que bnfique pour le lecteur. Je tiens les remercier tout particulirement pour avoir accept cette mission. Sans eux, le livre naurait pas cette consistance. Je voudrais aussi remercier tout simplement ma famille, et en premier lieu ma femme, Silja, qui ma toujours soutenu et qui me donne chaque jour lopportunit daccomplir mes rves. Un grand merci aussi ma fille, Lola, mon plus grand bonheur, ainsi qu mes parents, pour avoir toujours t derrire moi, mme quand la route tait plus que sinueuse.

Xavier
Jai commenc bloguer en fvrier 2003, avant tout pour me forcer crire afin de mieux me remmorer les petits moments du quotidien, et donc aider ma mmoire trop souvent dfaillante. Jutilisais loutil pMachine, mais je me suis rapidement intress b2, puis son

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

42

WordPress 3
successeur WordPress. Jai saut le pas et ai install WordPress en juin 2004, mais je mtais impliqu dans sa traduction ds le mois de mars. Cest en travaillant de manire ouverte avec dautres utilisateurs que je me suis pris de passion non seulement pour ce logiciel, mais surtout pour le mouvement open-source et sa croyance fondamentale dans le bnfice des autres pour moi excellemment rsum par le mot "ubuntu": "Je suis ce que je suis grce ce que nous sommes tous." De fil en aiguille, je suis devenu le principal responsable de la traduction franaise, puis le cofondateur de la communaut franaise, et aujourdhui le prsident de lAssociation des utilisateurs francophones de WordPress. Aprs toutes ces annes, je reste avant tout un passionn, anim par lapport de la communaut et lamour du travail bien fait. Pour le projet de longue haleine dont le livre que vous tenez entre vos mains reprsente laboutissement, je tiens tout dabord remercier mes compagnons de route: Francis pour mavoir propos de my investir et pour nous avoir rappel la ncessit de boucler dans les temps ; Amaury pour sa pertinence technique ; Stephanie pour son accompagnement au quotidien lors de la premire dition; et Patricia pour sa volont de publier un bon livre sur WordPress plutt quun livre de plus sur le sujet crire un livre technique requiert tout autant dtre un passionn dinformatique quun amoureux des lettres. Si jai la chance de combiner ces deux intrts, cest en premier lieu grce mes parents et mes deux frres, qui ont respect et encourag ces passions, et mes amis, qui ont contribu faire de moi ce que je suis. Jespre quils sont contents du rsultat! Un salut particulier Fabrice Le Guernec, qui depuis plusieurs annes mencourage crire un livre; il ne sattendait probablement pas ce rsultat, mais lintention est l.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Partie
WordPress ct utilisateur
2. Installer WordPress. ........................................................................... 45 3. Le quotidien du blogueur.................................................................. 61 4. Choisir le thme et les extensions pour son blog.............................. 139

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Installer WordPress
Lorsque vous souhaitez crer un blog en ligne avec WordPress, vous avez deux possibilits: WordPress.com. Vous navez pas envie de vous compliquer la vie avec un hbergement et la maintenance dun blog en ligne? Alors, WordPress.com est probablement la solution pour vous. En effet, en cinq minutes, votre blog est en ligne et avec votre adresse web personnalise. Choisissez votre design parmi les diffrents thmes proposs, et il ne vous restera plus alors qu rdiger vos articles. WordPress.com est en fait une solution de blogs "autohbergs". Pas besoin dinstaller quoi que ce soit, ce sont les hbergeurs qui soccupent de tout. Vous navez qu vous concentrer sur le contenu et lapparence de votre blog. WordPress.org. Cest le sujet de notre livre. Si les blogs hbergs sont intressants pour les utilisateurs nophytes, ils ne vous permettent pas de prendre en main votre blog et davoir entirement le contrle sur ce que vous pouvez en faire. Avoir un blog que vous hbergez vous-mme et pour lequel vous avez tous les accs vous permettra de crer une structure personnalise et paramtre par vos soins. Ici vous pourrez choisir votre hbergement, donc dcider des capacits de votre blog, crer un design 100% fait maison ou installer des fonctionnalits supplmentaires qui ne sont pas proposes dans la version par dfaut. Elle demande quelques notions techniques mais qui sont assez simples et accessibles pour quiconque sintresse un minimum la "technologie informatique". Les deux structures sont proches. Il est donc tout fait possible de commencer avec un blog "autohberg" chez WordPress.com, puis de migrer vers un blog que vous hbergerez tout seul. Cela vous aidera comprendre le fonctionnement de WordPress et vous familiariser avec lunivers des blogs si vous nen avez jamais eu un auparavant. Enfin, il faut savoir que le fait dhberger son propre blog reprsente un cot, alors que louverture dun blog chez WordPress.com est gratuite. Donc, si vous ntes pas encore sr de ce que vous comptez faire avec votre blog, nhsitez pas commencer par un test sur WordPress.com. Dans cet ouvrage, nous partons du principe que votre choix sest port sur la seconde option. Vous y apprendrez donc installer WordPress, tape par tape, et ds la fin de ce chapitre, votre blog sera en ligne et prt accueillir vos articles.

Le kit de dpart
Avant de pouvoir utiliser votre blog WordPress, vous allez devoir linstaller. Et pour cela, il vous faut: un nom de domaine; un hbergement avec PHP et MySQL; un logiciel FTP; la dernire version de WordPress.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

46

WordPress ct utilisateur

Choisir un nom de domaine


Laccs un site web ou un blog se fait par un nom de domaine. Ce domaine possde donc un nom et une extension (.com, .fr, .net,etc.), ce qui donne: www.nomdomaine.com. Cest ce qui permettra nimporte qui possdant un navigateur et une connexion Internet daccder votre blog. Si le nom de domaine nest pas indispensable pour installer WordPress, il est tout de mme important den possder un ds le dpart pour donner un nom et quelque part une "marque" votre blog. Choisir un nom de domaine peut paratre simple au premier abord, mais cest peut-tre ce qui va vous demander le plus de temps ici. En effet, vous allez devoir choisir un nom pour le site qui va hberger votre blog. Et ce choix sera diffrent selon que cest un blog personnel, vu seulement par votre entourage, un blog avec une thmatique particulire, ou encore un blog professionnel. Vous devrez donc prendre en compte diffrents aspects qui vous permettront de faire le meilleur choix. Si cest un blog personnel, vous pouvez utiliser nimporte quel nom, cela naura pas beaucoup de consquences. Lidentit du blog se construira autour de ce nom, quel quil soit. Vous pouvez utiliser notamment votre nom-prnom.com, le tout attach, ou encore partir de cette structure et travailler sur des variantes. Vous pouvez galement opter pour un nom plus original. Le choix est vraiment large ; mais noubliez pas que ce nom de domaine va tre votre identit sur le Web. Cest ce nom qui va vous reprsenter. Il sera trs difficilede le modifier par la suite sans quil y ait des incidences sur votre rfrencement et votre positionnement sur Internet. Mais, pour un blog personnel, il ny a pas vraiment de rgles. Si, par contre, vous souhaitez crer un blog avec une thmatique bien prcise, il est fortement conseill de choisir un nom de domaine en relation directe avec cette thmatique. Imaginons, pour illustrer ce propos avec un exemple concret, que vous souhaitiez crer un blog consacr aux voitures anciennes et autres vhicules de collection. Si vous lui attribuez un nom qui na rien voir avec le sujet, vous passez ct de lopportunit de donner une identit forte votre blog. Ce sera notamment le cas sur les moteurs de recherche o les visiteurs potentiels intresss par votre contenu effectuent des recherches rapides. Un nom visible et bien comprhensible de tous accentuera la probabilit davoir des visiteurs sur votre blog guids par ces moteurs de recherche. Trs souvent, on commence un blog pour se faire plaisir, mais trs rapidement on a envie dtre lu et on finit gnralement par accorder beaucoup dattention aux visites en provenance des moteurs de recherche. Et quand on sait quils utilisent le nom de domaine comme mot-clef, on ralise limportance dune bonne rflexion avant de se lancer dans la conception dun blog. Pour reprendre notre exemple de blog, supposons que vous choisissiez un nom de domaine tel que www.autos-anciennes.fr. Un moteur de recherche de type Google prendra en compte les mots-clefs "autos" et "anciennes" pour faciliter les recherches des internautes. Il peut tre tentant de choisir un nom un peu "fun" au dbut. Mais aprs quelques mois, si votre blog remporte un certain succs, vous pourriez regretter votre choix, qui sera mal adapt ou pas "trs srieux". Le changer aprs coup vous fera perdre votre rfrencement

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Installer WordPress

47

sur les moteurs de recherche, car ceux-ci auront index tous les articles du blog avec votre premier nom de domaine. Vous risquez de perdre en nombre de visites pendant quelque temps, parfois des semaines ou des mois, jusqu ce que les moteurs de recherche indexent nouveau toutes vos pages avec le nouveau nom de domaine. Une fois que votre choix est arrt, vous devez acheter ce nom de domaine. La plupart des offres courent sur un an. Au terme de cette anne, vous recevrez un e-mail vous demandant si vous souhaitez continuer possder ce nom de domaine. Vous allez donc vous procurer votre nom de domaine chez un "registrar", cest--dire une socit o vous pourrez enregistrer ce nom de domaine. Nous allons voir par la suite que vous devrez galement acheter un hbergement. Et il se trouve quaujourdhui de nombreux hbergeurs vous proposent un pack complet nom de domaine+hbergement. Vous avez donc deux possibilits: Hbergement et nom de domaine chez un mme prestataire. Il vous est alors possible de prendre une solution "tout en un", hbergement+nom de domaine. Cest probablement la solution la plus simple et la moins onreuse. Cependant, elle peut se rvler risque chez de petits hbergeurs peu scrupuleux qui ne vous autoriseraient pas par la suite changer facilement dhbergement. Hbergement et nom de domaine chez deux prestataires distincts. Ici, vous avez la possibilit de prendre un hbergement chez un prestataire et un nom de domaine chez un autre. Lavantage, cest que vous pourrez grer votre hbergement indpendamment de votre nom de domaine et ainsi en changer facilement. Nous pourrions faire le parallle avec la tlphonie mobile. Votre numro de tlphone (ici votre nom de domaine) serait indpendant de votre abonnement (ici votre hbergement), ce qui vous permettrait den changer librement sans tre li votre oprateur tlphonique. Linconvnient de cette solution est le cot, puisque la plupart des packs "tout en un" proposent un ou plusieurs noms de domaine inclus gratuitement au moment de lachat dun hbergement. Et puis cette seconde solution est plus difficile mettre en place pour quelquun qui na pas ou peu de notions dinformatique. Faites donc le tour des hbergeurs, en voyant notamment les grands noms tels que OVH, 1&1, Amen, ou encore Gandi. tudiez bien leurs offres et choisissez loption qui rpond le mieux vos besoins et votre budget. Les prix pour un nom de domaine seul sont trs variables. Tout va dpendre si le nom de domaine est libre ou non. Sil est libre, vous pourrez lacqurir pour environ 5euros, condition que vous le preniez avec une extension .com, .net ou .fr par exemple. Par contre, si vous souhaitez une extension moins rpandue, en rfrence par exemple votre pays, comme lextension .ch pour la Suisse, il vous en cotera un peu plus cher. Enfin, il existe des noms de domaine qui sont en vente, mais qui ne sont pas libres. Cela veut dire quils ont t achets pour tre revendus. Ce sont souvent des noms de domaine trs priss, ce qui fait quils sont trs chers.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

48

WordPress ct utilisateur

Un hbergement
WordPress est un logiciel crit en PHP dont les donnes sont stockes dans une base MySQL. De fait, les seules conditions que votre espace dhbergement doit remplir pour faire fonctionner normalement WordPress sont les suivantes: avoir PHP en version4.3 (ou une version suprieure); avoir MySQL en version4.0 (ou une version suprieure). Notez que, si votre hbergement ne vous propose que des versions plus anciennes des outils cits ci-dessus (par exemple, MySQLv3.23.23), vous pouvez toujours installer WordPress en version2.0.10. En effet, la branche2.0.x est stable et doit tre maintenue jusquen 2010. En revanche, vous ne pourrez pas bnficier des dernires innovations de WordPress, et c ertains thmes et extensions ne marcheront probablement pas comme prvu. WordPress nest pas un logiciel qui se lance depuis Windows ou OSX, cest un script qui sinstalle sur un site web. Il est donc indispensable que vous disposiez dun hbergement web (gratuit ou payant) remplissant les conditions ci-dessus. Et, une fois de plus, vous allez devoir faire un choix en fonction de vos besoins. Les offres prsentes par les prestataires peuvent tre trs diverses. Il est important de faire le tour des diffrentes prestations et de bien les comparer. Alors, au moment de choisir votre hbergement, que faut-il prendre en compte? Quel va tre votre besoin? De par notre exprience de blogueurs, nous dirions quil y a quatre aspects considrer: Le type dhbergement. Quand vous visitez le site web dun hbergeur, vous vous rendez rapidement compte quil existe une multitude doffres et surtout diffrents types dhbergements. Vous comprendrez aisment en les examinant un par un quils dpendent compltement du type de site que vous allez crer. De manire gnrale, vous trouverez trois grandes familles dhbergements: Hbergements mutualiss. Ils sont les plus utiliss car ils sont peu chers et faciles installer et grer. Dans cette option, votre hbergement va partager un serveur avec dautres sites web ou blogs (idal pour les petits budgets et blogs personnels). Hbergements ddis. Ici, vous avez un serveur, donc une machine physique, entirement "ddi" votre site. Ce type dhbergement est principalement destin ceux qui veulent matriser entirement la gestion du serveur qui hberge leur blog. Il apporte galement plus de puissance. Cependant, ce sont les offres les plus chres (conues pour les gros sites et pour ceux qui administrent eux-mmes le serveur). Hbergements virtualiss ou privs. La virtualisation est mi-chemin entre les deux solutions prsentes ci-dessus. Dans ce cas prcis, vous devrez partager un serveur avec dautres sites, mais vous serez compltement isol et votre environnement se comportera exactement comme celui dun serveur ddi. Vous devrez galement administrer votre site vous-mme. Les prix se situent entre ceux dun hbergement mutualis et ceux dun serveur ddi (solution intressante pour ceux qui trouvent loffre mutualise trop restreinte mais qui ne veulent pas investir dans un serveur ddi).

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Installer WordPress

49

vous donc de faire votre choix en fonction de vos besoins et de votre portefeuille. La capacit de stockage. Quel que soit le type dhbergement, vous pouvez avoir des capacits de stockage trs diffrentes. Cela dit, aujourdhui, les capacits proposes suffisent largement pour hberger un blog. Normalement, vous ne devriez avoir aucun souci avec loffre que vous choisirez. Un blog WordPress ne prend que 5Mo. Ce sont surtout tous les fichiers type photos, images, voire podcasts et vidos, qui prendront le plus de place. Ici encore, tout dpendra du contenu de votre blog, et bien souvent vous aurez tendance hberger certains types de mdias comme les vidos sur des sites tels que YouTube ou DailyMotion. La bande passante. Cest galement une donne prendre en compte dans le choix de son hbergement, bien que les offres semblent sorienter vers une bande passante illimite. Cependant, ce nest pas encore le cas de tous les prestataires, notamment pour les offres dentre de gamme. Il est donc important de bien savoir ce que cest et quelle quantit vous sera probablement ncessaire. La bande passante correspond la largeur du "tuyau" qui relie le site au reste dInternet et aussi la quantit de donnes qui vont transiter chaque mois. Plus les blogs seront riches en images et en vidos, plus le besoin en bande passante sera important. En gnral, pour un site "normal", cest--dire sans trop de photos ou vidos, on peut tabler sur une capacit mensuelle de 15Go, et cela peut aller jusqu 60-80Go pour les blogs les plus gros. La taille de la base de donnes. Beaucoup de prestataires proposent des bases de donnes qui ne sont pas trs importantes. La base de donnes, cest lendroit o sera plac le contenu de votre blog. Cest l que vont tre stocks vos articles, vos commentaires, vos pages,etc. Cette base de donnes est souvent utilise par des extensions de WordPress, comme les outils de statistiques. Il est donc important ici davoir, ds le dpart, une base de donnes suffisamment grande pour pouvoir travailler convenablement. Pour notre part, nous vous conseillons de ne pas prendre dhbergement avec une base de donnes dont la taille serait infrieure 25Mo. Vous risqueriez dtre rapidement bloqu, surtout si vous installez des extensions qui vont utiliser votre base de donnes. Le mieux serait mme davoir plusieurs bases de donnes pour sparer les tables de votre blog de celles dventuelles extensions ou services extrieurs. Prenez donc le temps de faire le tour des offres et de choisir celle qui vous convient le mieux. De toute faon, vous aurez toujours la possibilit par la suite dvoluer vers une autre offre, soit chez le mme prestataire, soit chez un nouveau. Pour dbuter, il existe des solutions 1euro par mois qui sont grandement suffisantes pour un blog qui publie un article chaque jour, avec peu de vidos. Afin de vous aider dans votre choix, voici une liste non exhaustive des prestataires que nous vous conseillons: OVH (www.ovh.net); 1&1 (www.1&1.fr);

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

50

WordPress ct utilisateur
Gandi (www.gandi.net); Infomaniak (www.infomaniak.ch). vitez en revanche les prestataires suivants: Online; Free. Nous vous les dconseillons car ils proposent des solutions gratuites qui ne vous permettront pas de profiter au maximum de votre blog. Ils imposent en effet des rgles techniques qui se rvlent parfois contraignantes pour un blog. Si vous narrivez pas vous dcider, nhsitez pas vous tourner vers la communaut francophone de WordPress (www.wordpress-fr.net), qui saura vous aider et vous orienter selon vos besoins.

Vos donnes de connexion


Une fois que vous avez choisi votre hbergement, vous allez recevoir diffrents e-mails provenant de votre hbergeur. Il sagit des donnes de connexion votre hbergement, ainsi que celles concernant la connexion la base de donnes. Voyons quelles sont les informations qui doivent vous tre transmises pour pouvoir procder linstallation de votre blog WordPress: Informations de connexion lhbergement: nom du serveurFTP; nom de lutilisateur; mot de passe de lutilisateur. Informations de connexion la base de donnes: nom du serveur de la base; nom de la base; nom de lutilisateur de la base; mot de passe de lutilisateur.

Un logiciel FTP
Pour vous connecter votre hbergement, vous aurez besoin dun logiciel FTP qui utilisera les informations rcoltes prcdemment auprs de lhbergeur. De nombreux logiciels FTP sont disponibles sur Internet. Encore une fois, il nest pas toujours facile de faire le bon choix. Sachez tout de mme quil en existe certains qui font trs bien leur travail et qui sont gratuits. Cest le cas notamment de FileZilla (http://filezillaproject.org/), qui existe aussi bien pour Windows, MacOSX et Linux, ou encore le trs connu Cyberduck (www.cyberduck.ch), qui fonctionne uniquement sur MacOSX.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Installer WordPress
Figure2.01
FileZilla.

51

Figure2.02
Cyberduck.

Dernire version de WordPress


Maintenant que vous avez tous les outils pour crer votre blog, il ne vous reste plus qu rcuprer la dernire version de WordPress. Pour cela, rendez-vous sur www.wordpress-fr.net et cliquez sur le bouton Tlcharger WordPress. Le tlchargement dmarre automatiquement. Une fois que le tlchargement est termin, dcompressez larchive (dossier rcupr au format .zip). Vous obtenez alors un dossier intitul "wordpress". En louvrant, vous verrez quil contient lensemble des fichiers qui composent votre futur blog WordPress. Ce sont ces fichiers que vous devrez transfrer sur votre hbergement.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

52

WordPress ct utilisateur

Installation de WordPress
Votre kit de dpart est prt, vous allez pouvoir procder linstallation mme de votre futur blog WordPress. Cette procdure va se drouler en plusieurs tapes et ne va durer que cinq petites minutes!

Transfert des fichiers WordPress sur votre hbergement


1. Ouvrez votre logiciel FTP et choisissez une nouvelle connexion (voir Figure2.03).
Figure2.03
Connexion FTP .

2. Renseignez les informations suivantes, fournies par votre hbergeur (voir Figure2.04): nom du serveur; nom de lutilisateur; mot de passe de lutilisateur. (Dautres informations seront aussi complter. Normalement, elles devraient tre dj remplies par dfaut. Il sagit du port, ici 21 par dfaut, et du protocole utiliser. Ici, cest le protocole FTP.) 3. Une fois que ces informations sont saisies, connectez-vous. La fentre daccs sera diffrente selon le prestataire que vous aurez choisi. Chez certains, vous devrez ouvrir un dossier "www" pour stocker lensemble de vos donnes (voir Figure 2.04), alors que chez dautres, ce sera un dossier "web", "public_html", ou encore vous arriverez directement dans lespace o vous allez transfrer vos fichiers (historiquement, ce dossier sappelait "httpdoc"). Avant de procder un transfert complet de vos fichiers et dossiers, nhsitez pas regarder une nouvelle fois les e-mails envoys par votre hbergeur. Gnralement, cette information y est prcise. Si ce nest pas le cas, contactez-le rapidement.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Installer WordPress
Figure2.04
Fentre de connexion OVH.

53

4. Transfrez dans ce dossier "web" lensemble du dossier WordPress que vous avez tlcharg prcdemment (voir Figure2.05).
Figure2.05
Transfert des fichiers.

Tous vos fichiers sont dsormais en ligne. Il ne vous reste plus qu installer WordPress. Cette installation va se faire par le biais de votre navigateur Internet (tout ordinateur en possde forcment un!). Linstallation va se passer en deux temps: 1. Cration de la base de donnes de votre blog. WordPress va commencer par se connecter la base de donnes de votre hbergement et va crer les tables qui seront utilises pour votre blog. 2. Cration du blog. Une fois les tables gnres, vous pourrez crer votre blog en donnant les premires informations de son identit.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

54

WordPress ct utilisateur

Cration de la base de donnes WordPress


Ouvrez votre navigateur Internet et saisissez lURL de votre blog. Une fentre apparat et vous prsente les informations ncessaires pour commencer linstallation de WordPress.
Figure2.06
cran 1 installation WordPress.

Sur cet cran (voir Figure2.06), un message vous informe que pour accder la base de donnes il vous faut crer un fichier nomm wp-config.php. Ce fichier va contenir les informations de connexion la base de donnes. Et cest grce ces informations que WordPress va pouvoir aller sur votre base et gnrer les tables ncessaires la cration de votre blog. Wordpress vous informe ici que vous avez deux manires de crer ce fichier : automati quement, via linterface web, ou manuellement: Cration automatique du fichier config.php. Ici vous allez renseigner les informations de connexion la base de donnes via votre navigateur web. 1. Lorsque vous tes sur la premire page dinstallation de WordPress, cliquez sur le bouton qui vous permet de crer le fichier config.php. Vous arrivez sur une nouvelle page qui vous prsente les informations dont vous allez avoir besoin pour crer ce fichier wp-config.php (voir Figure2.07). Une fois que vous avez lu et compris ces informations, cliquez sur Allons-y!
Figure2.07
cran 2 installation WP .

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Installer WordPress

55

2. Une nouvelle fentre souvre et vous propose de renseigner les informations de connexion votre base de donnes informations identiques celles prsentes dans la mthode manuelle (voir Figure2.08).
Figure 2.08
cran 3 Installation WP .

3. Sur cette page, vous pouvez choisir un prfixe pour les tables de la base de donnes. Par dfaut, le prfixe "wp_" est propos. Nous allons prendre ici un exemple concret pour bien comprendre ce que sont les prfixes de la base de donnes. WordPress fonctionne avec une base de donnes. Chacune des informations du blog, comme les articles, les commentaires, les utilisateurs et bien dautres donnes, va tre stocke dans des tables. Il va donc y avoir une table pour les articles, une pour les commentaires et ainsi de suite. Ces tables ont un nom. Mais ce nom est unique. Alors, imaginons que vous ayez envie dutiliser la mme base de donnes pour plusieurs blogs; il va vous falloir diffrencier ces tables, puisquau dpart elles portent le mme nom. Cest l que le prfixe va tre important car il va tre ajout devant le nom de la table. Ainsi, si vous prenez wp_ comme prfixe, votre table darticles va sintituler wp_posts. Ds lors que vous crerez un autre blog et utiliserez la mme base de donnes, vous devrez penser modifier le prfixe, en "wp2_" par exemple. Ainsi, les tables de vos diffrents blogs seront diffrencies et il ny aura aucun risque de conflit. Cependant, dans labsolu, il vaut mieux installer plusieurs blogs WordPress sur diffrentes bases de donnes pour viter les conflits. Dans le cas prsent, nous partons du principe que nous installons notre premier blog, nous gardons donc le prfixe propos par dfaut.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

56

WordPress ct utilisateur
4. Une fois que toutes les informations sont renseignes, cliquez sur le bouton de validation. Une nouvelle fentre apparat pour confirmer que les tables ont bien t cres et que nous allons maintenant pouvoir installer lensemble du blog WordPress (voir Figure2.09).

Figure2.09
cran 4 installation WP .

Cliquez une nouvelle fois en bas de la page pour procder linstallation du blog. Cration manuelle du fichier config.php. 1. Renommez le fichier wp_config_sample.php en wp_config.php. 2. Ouvrez le fichier wp_config.php et trouvez les lignes suivantes:
define('DB_NAME', 'putyourdbnamehere'); // Le nom de la base de donnes define('DB_USER', 'usernamehere'); // Votre identifiant MySQL define('DB_PASSWORD', 'yourpasswordhere'); // ...et votre mot de passe define('DB_HOST', 'localhost'); // Dans la plupart des cas, vous n'aurez pas modifier cette ligne

3. Remplacez les informations de putyourdbnamehere (mettez votre nom de base de donnes ici), usernamehere (nom dutilisateur ici), yourpasswordhere (mot de passe ici) et localhost (nom du serveur) par vos donnes personnelles de connexion la base de donnes: nom de la base (DB_NAME); nom de lutilisateur de la base (DB_USER); mot de passe de lutilisateur (DB_PASSWORD); nom du serveur de la base (DB_HOST). 4. Un peu plus bas dans le fichier, vous retrouvez le prfixe attribuer la base de donnes, dont nous avons parl un peu avant:
// You can have multiple installations in one database if you give each a unique prefix $table_prefix = 'wp_'; // Only numbers, letters, and underscores please!

Vous allez galement y trouver les clefs de scurit AUTH_KEY, SECURE_AUTH_KEY, LOGGED_IN_KEY, NONCE_KEY, AUTH_SALT, SECURE_AUTH_SALT, LOGGED_IN_SALT, NONCE_SAL, qui permettront de mieux protger les informations disponibles dans les cookies des utilisateurs. Ces clefs sont dfinies par dfaut mais vous pouvez trs bien les modifier votre convenance. Voici un exemple donn:

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Installer WordPress

57

define('AUTH_KEY', 'PnIOV~sv:Iix,^p7UOJt1:1NnqG@.M<|bEAq*sCgG*4S$9?| X@bFBhB*6&?Y=FSp'); define('SECURE_AUTH_KEY', 'ZW!aug}N*&7[..q*pEMDH2:wURz%J49-&Ct:` =qyK/=Jt(pPA[XyoQhU($hnTX8R'); define('LOGGED_IN_KEY', '0woykcp`9BAafuW^1j15s9W-x_sNHhA<SRyZN?Nia/PB [j8L2ne,K52Mm67-qsZ2'); define('NONCE_KEY', '-8.Yuj3ZWJ?~[{RjEx%4*`m-A<UzRwSi/YNq, *N nSwau$So;.`5PQQNb]I.Z=Qe'); define('AUTH_SALT', 'Bz;Uu(VFzU^@8OoF-*.Pzp=9i;t~%Q8nY%dy#>@5<+s$] ~m+9Ur^^HJ z4L09B$$'); define('SECURE_AUTH_SALT', 'T8(-OJ*]vTgX{%3K*ghnsP&l/OUJ53eCx ty:^bE#e!z-r. dxu_8k}Cxkj1Zi#R!'); define('LOGGED_IN_SALT', 'SwU*wa=U!T%*hgHvy5s`jQ7T7Do]dY8?8Zta`5MLr8C3. SL!=04hnxs%1U{`S.,O'); define('NONCE_SALT', 'yV@^k:s`3;LU9*B_.}SDFf&s)ytEr2PdS`uZ/jCt<9Y< Lwt1|;4#:q*kFM@&I^s<');

5. Une fois les informations saisies, enregistrez le fichier et allez ladresse www. exemple.fr/wp-admin/install.php pour valider la cration des tables. Cest tout!

Cration du blog
Que vous ayez cr le fichier de configuration wp_config.php manuellement ou automatiquement, vous arrivez dans tous les cas sur la fentre de cration de votre blog (voir Figure2.10). Ici, vous devrez renseigner quelques informations de base qui vont tre utilises pour crer votre blog:
Figure2.10
cran 5 installation WP .

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

58

WordPress ct utilisateur
Titre du blog. Saisissez le titre que vous avez choisi pour votre blog. Il ny a rien de dfinitif, cependant, vous pourrez toujours le modifier par la suite. Nom utilisateur. Cest le nom que vous allez utiliser pour vous reprsenter sur votre site. Mot de passe. Il accompagne votre nom dutilisateur et vous sera demand chaque fois que vous souhaiterez vous connecter ladministration de votre blog. Adresse e-mail. Saisissez ladresse e-mail qui sera utilise pour ladministration du blog. Cest aussi une donne que vous pourrez modifier plus tard, mais vous allez en avoir rapidement besoin puisque WordPress va vous envoyer un e-mail avec votre mot de passe linterface dadministration, et ce ds que vous aurez cr votre blog. Indexation du blog dans les moteurs de recherche. vous de dcider si vous voulez que les pages de votre blog apparaissent dans ces outils. Si vous souhaitez rapidement trouver un public, vous avez tout intrt cocher cette case. Par contre, si vous souhaitez avoir votre blog en ligne mais le garder plutt "priv", ne cochez pas cette case. Notez cependant que quand je dis priv, cela veut seulement dire que, mme si le blog reste visible par tout le monde, vous naurez pas de visites en provenance des moteurs de recherche. Une fois encore, sachez quil vous sera possible de modifier votre choix par la suite, rien nest dfinitif. La destine de votre blog tant trace, cliquez sur le bouton Installer WordPress.

Figure2.11
cran 6 installation WP .

Vous pouvez maintenant vous connecter votre blog, tout frachement install! Accdez la page didentification en cliquant sur le lien qui vous est propos et entrez votre identifiant ainsi que le mot de passe (voir Figure2.12).

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Installer WordPress
Figure2.12
Connexion.

59

Validez le tout. Vous tes maintenant bord (voir Figure2.13)! Bienvenue sur WordPress!
Figure2.13
Administration WordPress.

Histoire de bien voir que votre blog existe rellement, cliquez sur le titre du site, situ en haut gauche. Une nouvelle fentre souvre avec votre nom de domaine et votre blog (voir Figure2.14). Tout est prt! Votre blog nattend plus que vous lui donniez vie!

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

60
Figure2.14
cran blog WP .

WordPress ct utilisateur

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le quotidien du blogueur

Premiers pas avec WordPress


Dans ce chapitre, vous allez dcouvrir ce qui va rapidement devenir votre quotidien de blogueur. Vous allez apprendre rdiger des articles, crer des catgories, insrer des images, des vidos,etc. Vous apprendrez galement grer votre blog et faire face aux attaques extrieures comme le spam dans les commentaires. Cette partie est le cur de WordPress. Tout le cheminement sera articul autour dun article. Vous apprendrez le rdiger mais aussi prendre en compte toutes les options qui lentourent.

Dcouverte de l'interface
La connexion Tout dabord, pour pouvoir utiliser votre blog, vous allez vous connecter son interface dadministration. Pour cela, connectez-vous lURL suivante : http://www.exemple.fr/ wp-login.php (voir Figure3.01).
Figure3.01
Page de connexion.

Vous arrivez sur le tableau de bord de WordPress, qui est en quelque sorte la "page daccueil" de linterface dadministration de votre blog (voir Figure3.02).

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

62
Figure3.02

WordPress ct utilisateur

Tableau de bord WordPress.

Si vous tes dj connect, vous pouvez accder directement cet cran en utilisant lURL suivante: http://www.exemple.fr/wp-admin.

Anatomie du tableau de bord


Comme nous lavons vu prcdemment, lorsque vous vous connectez linterface dadministration de WordPress, vous arrivez directement sur le tableau de bord. Cette page regroupe diffrentes informations qui vous permettront davoir une vision globale de ce qui se passe sur votre blog, et elle vous donne galement la possibilit daccder directement des fonctions importantes pour notamment crer une nouvelle page, un nouvel article ou encore grer vos commentaires (voir Figure3.03). Cette page est facilement paramtrable pour faire apparatre les informations qui vous semblent les plus utiles. Pour cela, vous avez un petit bouton, situ en haut droite de lcran, intitul Options de lcran, qui vous permet de dcider quels blocs ou modules faire apparatre sur le tableau de bord. Ces "options de lcran" vont se retrouver sur une grande partie des pages de linterface dadministration de WordPress. Elles vous permettront aussi de cacher les informations qui ne vous seront pas utiles (voir Figure3.04). Lorsque vous avez choisi les diffrents modules qui vont apparatre, vous pouvez dcider de leur ordre tout simplement en plaant la souris dessus et en les dplaant avec le bouton de la souris enfonc (voir Figure3.05).

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le quotidien du blogueur
Figure3.03
Tableau de bord.

63

Figure3.04
Options du tableau de bord.

Figure3.05
Dplacement des modules du tableau de bord.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

64

WordPress ct utilisateur
droite des options de lcran se trouve un deuxime bouton, Aide, qui permet daccder directement laide en ligne de WordPress, cest--dire au forum de discussion ainsi quau Codex. Sur la gauche du tableau de bord se trouve le menu de navigation de linterface dadministration de WordPress (voir Figure3.06). Vous y trouvez trois blocs distincts:

Figure3.06
Menu de navigation de l'interface de WordPress.

Accs au tableau de bord. Pour y revenir partir de nimporte quelle page. Articles. Ce bloc regroupe toutes les fonctions de rdaction et de gestion des articles mais aussi des pages du blog. Vous y retrouvez galement la gestion des mdias et des commentaires. Gestion et paramtrage du blog. Ici, vous dfinissez lapparence de votre site en choisissant un thme, vous y ajoutez des extensions, vous pouvez crer de nouveaux utilisateurs et rglez les diffrents paramtrages pour le bon fonctionnement de votre blog. En haut du tableau de bord, vous trouvez galement un autre menu, dans une bande grise sombre, qui vous permet de vous dconnecter de linterface dadministration, mais qui sert galement de raccourci pour accder aux pages de rdaction darticles et aux pages de gestion des commentaires (voir Figure3.07).
Figure3.07
Menu de navigation horizontal.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le quotidien du blogueur

65

Votre premier article


Introduction
Lintrt principal dun blog se concentre surtout autour de la possibilit dcrire des billets, des articles. Ici, nous allons donc voir dans le dtail comment rdiger ces articles, comment bien les paramtrer mais aussi comment les grer une fois quils sont publis et en ligne. Pour rdiger votre premier article, cliquez sur longlet Articles dans le menu de navigation situ gauche de la page web. Une nouvelle fentre souvre sur la liste des articles. Pour le moment, il ny a que larticle par dfaut de WordPress. gauche, sous longlet Articles, vous allez trouver des sous-menus. Cliquez sur Ajouter un nouvel article. Vous tes maintenant sur la page de rdaction dun article (voir Figure3.08). Sur cette page, vous avez toute une srie dinformations que nous allons dtailler au fur et mesure de la rdaction de votre article.
Figure3.08
Page de rdaction d'un article.

Tout commence par le titre!


Le titre dun article a beaucoup dimportance parce quil conditionne la lecture de son contenu (voir Figure3.09). Cest le titre qui va retenir ou non lattention du lecteur. Il faut donc lui apporter une attention toute particulire. Sans tre ncessairement accrocheur, il doit dj donner une ide du sujet dont vous allez parler par la suite. Vous allez le saisir directement dans le cadre rserv cet effet, sous lindication Ajouter un nouvel article.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

66
Figure3.09
Le titre de l'article.

WordPress ct utilisateur

Cependant, il nest pas obligatoire de trouver le bon titre avant de rdiger larticle. Vous pouvez en choisir un temporairement qui vous aidera identifier larticle mais que vous pourrez changer par la suite. Finalement, cest souvent le contenu mme qui vous aidera trouver le meilleur titre. Le titre est trs important parce que cest lui qui va conditionner lintrt du visiteur. Par exemple, si celui-ci passe sur votre blog pour un autre article et dcide de prolonger sa visite, nul doute que sil voit un titre darticle intressant, il va essayer den savoir plus en lisant le contenu. Cest la mme chose pour les moteurs de recherche. Il est probable que vous ayez au minimum quelques visites en provenance de ces moteurs, et quand un internaute cherche quelque chose, il veut rapidement le trouver. Plus votre titre sera explicite et donnera une bonne description du contenu et plus il aura dimpact.

Le contenu de votre article


Le contenu, cest le cur de larticle. Cest par lui que vous allez faire passer vos messages. vous de trouver les mots pour vous exprimer, les bonnes phrases qui ont du sens pour essayer de partager vos penses. Le plus souvent, un style direct, clair, et des articles ne dpassant pas les 1000mots sont les plus apprcis. vitez galement les phrases et les paragraphes trop longs. Le style doit tre fluide et lisible rapidement par linternaute. Pour vous aider rdiger vos articles dans les meilleures conditions, WordPress vous propose deux diteurs de texte avec des fonctionnalits diffrentes, selon les habitudes et les besoins de chacun. Il sagit de lditeur visuel et de lditeur HTML. L'diteur visuel Cest ce quon appelle un diteur WYSIWYG (What You See Is What You Get). Ce que vous allez voir dans lditeur est ce qui saffichera globalement sur votre blog (voir Figure3.10). Vous retrouvez ici le concept et lergonomie classique dun logiciel de traitement de texte, mais modifis pour coller au plus prs avec les besoins de la rdaction dun article sur un blog. Hormis les boutons classiques de mise en page, vous avez donc quelques options qui vous permettront de personnaliser au mieux vos articles et en mme temps votre blog.
Figure3.10
diteur visuel.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le quotidien du blogueur
Le Tableau3.01 fait un rcapitulatif des diffrentes fonctions de lditeur visuel. Tableau3.01: Contenu de lditeur visuel
Boutons Fonctions Met le texte en caractres gras.

67

Met le texte en italique.

Permet de barrer le texte.

Cre une liste puces non ordonne.

Cre une liste ordonne.

Permet de mettre en relief une citation (le thme doit avoir pris en compte la balise blockquote). Aligne le texte gauche.

Aligne le texte droite.

Centre le texte.

Permet de crer un hyperlien dans votre article.

Permet de supprimer l'hyperlien prexistant.

Permet de ne faire apparatre que la premire partie de larticle (avant dappuyer sur le bouton) sur la premire page du blog, avec un lien Lire la suite. Le paramtrage de cette fonction est expliqu en dtail dans la partie de ce livre consacre la cration d'un thme pour WordPress. Correcteur d'orthographe. En cliquant sur la flche, vous pouvez choisir la langue que vous voulez. Permet de rdiger un article en mode Plein cran.

En cliquant sur ce bouton, vous accdez une deuxime ligne de fonctionnalits de l'diteur visuel.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

68

WordPress ct utilisateur
Boutons Fonctions Dfinit le style pour chaque lment de votre article, que ce soit les paragraphes, les titres de parties ou encore le code. Permet de souligner le texte.

Aligne le texte gauche et droite.

Permet de dfinir une couleur pour votre texte.

Colle du texte simple, issu de n'importe quel diteur de texte.

Colle du texte en provenance de Microsoft Word.

Efface la mise en forme de tout ou partie du texte.

Insre une vido dans votre article. Cette fonction sera dtaille dans la section "Insrer un mdia". Permet d'insrer des caractres particuliers dans un article.

Permet de dsindenter un texte qui aurait t indent.

Permet d'indenter un texte vers la droite.

Annule une modification.

Rtablit une modification.

Aide de lditeur visuel.

L'diteur HTML Si lditeur visuel pour WordPress est trs complet, il en est autrement pour lditeur HTML (voir Figure3.11). Cependant, celui-ci ne sadresse pas au mme public. Ici, si vous navez aucune notion en HTML, passez votre chemin. Par contre, si vous avez la fibre "dveloppeur" sans pour autant ltre et si vous voulez contrler tous les aspects de vos articles, vous utiliserez rapidement lditeur HTML.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le quotidien du blogueur
Figure3.11
diteur HTML.

69

Ici, vous allez avoir le texte tel quil est compris et assimil par le navigateur web, alors que via lditeur visuel, le texte est tel quil va apparatre dans le navigateur web. Le fond est le mme, cest la forme qui est diffrente. Prenons un exemple simple pour illustrer nos propos. Tapez un mot dans lditeur HTML. Vous allez le surligner avec votre souris et cliquer sur le bouton b qui est le symbole HTML pour dire "gras". Vous pouvez voir que maintenant le texte est entour par une balise strong qui est la balise html pour mettre des portions de texte en gras (voir Figure3.12).
Figure3.12
Texte dans l'diteur HTML.

Si maintenant vous passez du ct de lditeur visuel en cliquant sur le lien Visuel en haut droite, vous dcouvrez le mme texte mais ici directement en gras, tel que vous le verrez sur le blog. Vous pouvez galement faire le test en sens inverse; vous voyez que le rsultat est diffrent alors que le texte est le mme (voir Figure3.13).
Figure3.13
Texte dans l'diteur visuel.

Pour lditeur HTML, les options sont moins nombreuses mais largement suffisantes pour rdiger facilement et rapidement un article (voir Tableau3.02).

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

70

WordPress ct utilisateur
Tableau3.02: Contenu de lditeur HTML
Balises
b i b-quote

Fonctions Met le texte en caractre gras. Met le texte en italique. Permet de mettre en relief une citation (le thme doit avoir pris en compte la balise blockquote). Permet de barrer le texte. Permet de mettre en relief du texte qui aurait t ajout aprs publication de larticle. Permet d'insrer simplement une image dans votre article. Il vous suffit de saisir l'URL de l'image et de lui donner une description. Cre une liste puces non ordonne. Cre une liste ordonne. Permet d'ajouter une ligne une liste. Permet d'identifier des exemples de code cits dans votre article et de les sparer du code de la page web. Fonction "more" dont le principe a t prsent plus haut. Permet d'obtenir une dfinition pour un mot prcis. Permet de fermer les balises que vous auriez laisses ouvertes.

del (barr) ins img

ul ol li code

more lookup close tags

Bien entendu, les balises proposes ici sont celles qui sont le plus souvent utilises, mais vous pouvez trs bien vous servir de toutes les autres balises HTML qui rpondent plus spcifiquement votre besoin.

Insrer un mdia
Avec les deux diteurs prsents ci-dessus, vous avez toutes les cartes en main pour proposer des articles complets du point de vue du contenu mais aussi au niveau de la mise en forme. Maintenant, nous allons encore plus loin en vous montrant comment insrer un mdia dans vos articles. Ces mdias peuvent tre de diffrentes sortes. Il peut sagir de photos, de vidos ou encore de fichiers audio. Les deux diteurs vous proposent par dfaut dajouter des mdias. Lditeur visuel propose dinsrer des vidos, alors que lditeur HTML vous permet dinsrer des images. Mais, depuis la version2.5, WordPress possde une bibliothque de mdias qui vous permet de transfrer tout type de fichier mdia depuis votre ordinateur sur le serveur de votre blog, mais aussi de les grer directement partir de linterface dadministration de WordPress. Et cest le gros avantage par rapport aux mthodes utilises par les deux diteurs. Voyons dans le dtail toutes les possibilits offertes pour insrer un mdia dans vos articles.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le quotidien du blogueur

71

La bibliothque de mdias
Si vous avez bien observ la page de rdaction dun article, vous avez srement remarqu un lien intitul Envoyer, situ juste au-dessus de lditeur, et suivi de quatre petits pictogrammes reprsentant diffrents types de mdias (voir Figure3.14).
Figure3.14
Insertion d'un mdia.

Chaque bouton va ouvrir une nouvelle fentre qui vous permettra dinsrer un mdia. Insertion d'une image Il faut que vous ayez au pralable une image ajouter dans votre article. Celle-ci peut se trouver sur votre ordinateur ou sur un serveur en ligne. Pour insrer une image dans votre article, vous allez tout dabord pointer le curseur de votre souris lendroit o vous souhaitez lintgrer. Ensuite, vous allez cliquer sur le bouton situ droite de Envoyer (voir Figure3.15). Une nouvelle fentre souvre alors.
Figure3.15
Envoyer une image.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

72

WordPress ct utilisateur
Dans cette fentre, vous allez choisir la provenance de votre image: Depuis votre ordinateur. Choisissez une image sur votre ordinateur et transfrez-la directement sur votre hbergement. Faire un lien vers une adresse web. Votre image est dj disponible en ligne. Vous allez donc fournir son URL ainsi que plusieurs informations qui vous permettront de linsrer dans votre article. partir de la bibliothque de mdias. force de mettre des mdias en ligne, vous allez vous constituer une bibliothque qui sera disponible directement partir du troisime onglet de cette page. Pour notre exemple, nous allons choisir de transfrer une image directement depuis lordinateur. Vous allez donc cliquer sur le bouton Envoyer. Une fentre va apparatre pour que vous puissiez slectionner limage transfrer sur votre hbergement (voir Figure3.16).

Figure3.16
Choisir le fichier transfrer.

Une fois que vous avez trouv cette image, validez votre choix; limage est directement transfre. Dans la mme fentre apparaissent alors une vignette de limage ainsi que toute une srie dinformations renseigner (voir Figure3.17). Ici, vous allez pouvoir lui donner un titre, une lgende, cest--dire un titre alternatif, puis une description. Ces informations sont cependant facultatives, mme sil est recommand dindiquer au moins un titre descriptif.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le quotidien du blogueur
Figure3.17
Informations concernant le mdia insrer.

73

En dessous, vous allez pouvoir rcuprer lURL du mdia que vous venez de charger sur le serveur de votre site. Ici, vous devez choisir si vous souhaitez que votre image soit associe un lien et, si oui, quel type de liens. En tout, vous avez trois possibilits: Aucun(e). Ici, pas de lien. Vous ne pouvez pas cliquer sur limage dans larticle. URL du fichier. Qui est slectionn par dfaut. Cela signifie que, si vous cliquez sur limage dans larticle, vous allez accder lURL de limage qui va apparatre seule dans une nouvelle fentre du navigateur. Pour revenir sur le blog, vous devrez utiliser le bouton Annuler ou Afficher la page prcdente de votre navigateur. URL de larticle. Ici, en cliquant sur limage, vous accdez une page du blog qui est ddie votre image, o le visiteur aura la possibilit de laisser des commentaires. Cela peut se rvler trs utile pour les artistes notamment, qui souhaiteraient utiliser WordPress comme portfolio. Pour notre exemple, nous allons choisir loption Aucun. Limage sera visible dans larticle, mais il ne sera pas possible de cliquer dessus pour aller sur une autre page. Vous devez ensuite choisir le positionnement de cette image dans le texte de larticle, ainsi que la taille de limage afficher: miniature, moyenne et taille originale. Pour notre exemple, vous allez aligner limage gauche et avec la taille originale. Tout en bas, vous allez galement trouver un lien qui se nomme Ajouter une vignette larticle (voir Figure3.18). En cliquant sur ce lien, vous allez pouvoir utiliser limage que vous venez de charger comme vignette sur votre site. Cette fonctionnalit, apparue depuis la version2.9 de WordPress, vous permet donc dinsrer des vignettes sur vos pages darticle,

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

74

WordPress ct utilisateur
sur la page daccueil ou encore sur les pages darchives. Cependant, tous les thmes nintgrent pas encore cette fonction. Vous pouvez tout de mme la tester avec Twenty Ten, qui lintgre. Nous verrons galement au Chapitre6 comment utiliser et insrer cette fonction dans votre thme WordPress.

Figure3.18
Lien pour utiliser une image " la une".

Une fois ces diffrentes informations saisies, cliquez sur le bouton Insrer dans larticle (notez ici la possibilit denregistrer toutes les modifications sans pour autant insrer limage dans larticle). Votre image apparat alors dans votre article dune manire diffrente, selon que vous utilisez lditeur visuel ou lditeur HTML. Si vous utilisez lditeur visuel, vous allez pouvoir modifier certains aspects de limage. Pour cela, vous allez cliquer sur votre image, puis sur le petit pictogramme faisant office dimage (voir Figure3.19).
Figure3.19
Fonctions supplmentaires pour l'insertion d'une image.

Une nouvelle fentre souvre alors et vous permet de personnaliser encore un peu plus laffichage de votre image. Ici, nous avons modifi la lgende pour avoir un petit texte situ sous limage. Vous pouvez galement modifier le positionnement et certains aspects du style de limage en cliquant sur longlet Options avances (voir Figure3.20). Enregistrez vos modifications. Vous pouvez alors visualiser votre article en cliquant sur le bouton Aperu propos en haut droite du titre de larticle. Une nouvelle fentre souvre et limage apparat bien insre droite comme prvu (voir Figure3.21). Vous pouvez galement passer la souris par-dessus limage pour voir si elle nest pas "cliquable".

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le quotidien du blogueur
Figure3.20
Options avances d'insertion d'une image.

75

Figure3.21
Image insre dans l'article.

Insertion d'un autre type de mdia Pour insrer un autre type de mdia en utilisant les autres boutons proposs, vous utiliserez la mme mthode que pour une photo ou une image. Cependant, le rsultat ne sera pas le mme, et vous raliserez rapidement que linsertion dune vido ou dun fichier audio via la bibliothque de mdias nest pas toujours optimale. Un grand nombre dutilisateurs se tournent rapidement vers des extensions compltes et qui permettent dinsrer facilement

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

76

WordPress ct utilisateur
des vidos en provenance de sites comme YouTube, DailyMotion, ou encore des vidos hberges sur leur serveur. Il en est de mme pour les fichiers audio. WordPress va jusqu proposer des extensions vous permettant de transformer votre blog en un vritable podcast. Pour plus dinformations, allez directement au Chapitre4, dans la section rserve aux extensions. Cration d'une galerie Quand vous cliquez sur le bouton Envoyer, la nouvelle fentre qui souvre donne accs trois onglets. Nous venons de voir le premier, et les deux autres sont nomms Galerie et Bibliothque de mdias. Si la bibliothque de mdias vous donne accs tous les fichiers que vous avez dj transfrs sur votre hbergement, longlet Galerie va, comme son nom lindique, crer une galerie dans votre article. Cela ne concerne donc que les photos et images. Cela peut paratre logique, mais il vous faudra deux images pour crer une galerie. Une fois que vous aurez deux images disponibles, elles vont apparatre dans longlet Galerie (voir Figure3.22).

Figure3.22
Galerie.

Sous les images insrer, vous allez trouver les paramtres de la galerie crer. L, vous devez renseigner plusieurs informations: Lier les miniatures ... Ici, vous allez choisir si les vignettes de la galerie seront lies aux images directement ou si vous allez crer des "attachments" cette image. En gros, vous avez la possibilit dafficher limage sa taille normale en choisissant la premire option ou, alors, vous pouvez insrer un visuel de ces images dans le design de votre site avec la possibilit pour les visiteurs de laisser des commentaires. Ranger les images par... Vous pouvez choisir lordre daffichage des vignettes. Vous avez pour cela plusieurs possibilits: ordre du menu, titre, date et alatoire. Ordre. Vous pouvez galement choisir lordre daffichage en dcidant sil doit tre ascendant ou descendant. Colonnes de galerie. Choisissez ici le nombre de colonnes que doit faire votre galerie.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le quotidien du blogueur

77

Une fois tous les renseignements remplis, vous pouvez crer votre galerie. Elle va apparatre sous forme diffrente selon que vous utilisez lditeur visuel (voir Figure3.23) ou HTML (sous forme de shortcode [gallery]).
Figure3.23
Affichage de la galerie dans l'article.

En visualisant votre article, vous dcouvrirez alors une galerie qui comprend les diffrentes images que vous avez insres (voir Figure3.24).
Figure3.24
Galerie dans l'article.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

78

WordPress ct utilisateur
En cliquant sur chacune delles, vous aurez accs au permalien de chaque image (voir Figure3.25), donc leur URL propre, et les visiteurs auront mme la possibilit de laisser un commentaire.

Figure3.25
Permalien de mdia.

Insrer un mdia partir de l'onglet Bibliothque La bibliothque de mdias a pour objectif de rfrencer tous les mdias que vous avez pu transfrer sur votre hbergement. Chacun de ces mdias a une URL propre. Il peut arriver que vous souhaitiez rutiliser une photo qui a dj servi pour un article prcdent. Pour cela, vous devez aller dans la fentre Insrez un mdia et cliquer sur le troisime onglet Bibliothque de mdias (voir Figure3.26).
Figure3.26
Insrer un mdia partir de la bibliothque.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le quotidien du blogueur

79

Choisissez limage que vous souhaitez insrer dans votre article en cliquant sur le bouton Afficher. Les diffrentes informations concernant limage apparaissent, et vous pouvez alors choisir la taille ainsi que le positionnement de votre image, comme nous lavons vu prcdemment. Validez le tout en cliquant sur le bouton Insrer dans votre article. Limage apparat alors, comme convenu, dans votre article en cours de rdaction. Changer l'emplacement de stockage des mdias Cet emplacement est dfini par dfaut au dpart. Il sagit du dossier uploads, qui se situe sous le dossier wp-content. Ilest cependant modifiable dans les rglages de WordPress, sous longlet Rglages et le sous-menuMdias. Trouvez la ligne Envoi de fichiers et modifiez lemplacement des fichiers. (voir Figure3.27).
Figure3.27
Emplacement des mdias sur l'hbergement.

Notez qu partir de cette page vous pouvez aussi organiser votre dossier chronologiquement. Vos mdias sont alors associs des annes et des mois. Cela peut tre trs utile ds lors que vous grez beaucoup dimages ou de vidos par exemple. Faites bien attention galement ce que lemplacement choisi pour stocker vos mdias ne soit pas directement dans le dossier de votre thme car, si vous supprimez celui-ci pour en changer, vos mdias ne seraient plus visibles sur votre blog. Taille des images Les dimensions de la miniature et de la taille moyenne sont dfinies par dfaut ds linstallation de WordPress, mais vous pouvez les modifier en fonction de vos besoins. Ces tailles "miniature" et "moyenne" sont paramtrables sous longlet Rglages, puis sous-menu Mdias, directement sous la dfinition des liens par dfaut pour un mdia. Sur cette page, un bloc intitul Taille des images va vous permettre de fixer des tailles pour les miniatures, la taille moyenne et la grande taille (voir Figure3.28).
Figure3.28
Taille des images.

Par dfaut, celles-ci sont fixes 150 150 pixels en ce qui concerne les miniatures, et 300300pixels pour la taille moyenne. vous de fixer les tailles appropries et de choisir enfin le type dimage que vous souhaitez voir apparatre dans votre article.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

80

WordPress ct utilisateur
Intgration et taille des vidos (affichages distants) Depuis la version 2.9 de WordPress, vous avez la possibilit dintgrer des vidos en provenance de nombreux sites (YouTube, Vimeo, etc.) en donnant uniquement lURL de cette vido. WordPress traduit directement cette URL pour en tirer la vido et lafficher sur votre article. Sur la page Mdias des rglages, vous avez la possibilit dactiver ou de dsactiver cette fonction. En dessous, vous pouvez galement choisir la taille des vidos qui vont safficher dans vos articles (voir Figure 3.29).

Figure3.29
Affichages distants.

Gestion de la bibliothque de mdias Comme nous venons de le voir, la bibliothque a pour but de rfrencer tous les mdias utiliss sur le blog. Il vous est tout fait possible de grer cette bibliothque via une page de linterface dadministration de WordPress qui lui est ddie. Elle se trouve sous longlet Grer et dans le sous-menu Bibliothque de mdias (voir Figure3.30).
Figure3.30
Bibliothque de mdias.

Navigation dans la bibliothque de mdias Si vous utilisez beaucoup de mdias comme des images ou des vidos, vous devrez rapidement faire un tri pour pouvoir trouver facilement ce que vous cherchez. Pour vous aider, vous

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le quotidien du blogueur

81

pouvez ici chercher par type de mdia, par date, ou encore via un formulaire de recherche (voir Figure3.31).
Figure3.31
Navigation dans les mdias.

Pour chaque mdia, vous pourrez visualiser le ou les articles dans lesquels il est prsent, ainsi qualler sur son permalien sur le blog. Modification ou suppression d'un mdia Pour modifier un mdia, il vous suffit de cliquer sur son nom dans la colonne Mdia, et vous arrivez directement sur une nouvelle page qui vous permet de modifier toutes les infor mations que vous avez saisies au moment de son ajout dans la bibliothque. Pour supprimer un mdia, il suffit de cocher la case situe avant la vignette du mdia et de cliquer en haut de la page sur le bouton Supprimer. Insrer une vido via l'diteur visuel de WordPress Nous avons vu prcdemment quil tait possible dutiliser les fonctions des deux diteurs pour ajouter des mdias dans vos articles. Lditeur visuel propose notamment dinsrer une vido (voir Figure3.32). Pour cela, vous allez cliquer sur le bouton prvu cet effet (voir au Tableau3.01 les boutons de lditeur visuel). Une nouvelle fentre souvre. Elle comprend deux onglets: Gnral et Avanc.
Figure3.32
Insrer une vido avec l'diteur visuel.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

82

WordPress ct utilisateur
Longlet Gnral vous demande de: dfinir le type de vido parmi ceux qui sont proposs (QuickTime, Shockwave, Real Media, Flash et Windows Media); saisir lURL du fichier vido; dfinir les dimensions voulues pour votre vido. Longlet Avanc, quant lui, vous permet de dfinir dautres donnes en fonction du type de fichier vido que vous aurez choisi (voir Figure3.33). Une fois que vous avez saisi toutes les informations ncessaires, cliquez sur le bouton Insrer et votre vido apparat alors dans le corps du texte de votre article (voir Figure3.34).

Figure3.33
diteur visuel Insertion de vido Onglet Avanc.

Figure3.34
Vido dans l'article sur l'diteur visuel.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le quotidien du blogueur

83

Options avances de rdaction d'un article


Directement sous lditeur de texte, vous avez diffrents blocs qui vous permettent de renseigner des informations concernant votre article et notamment son affichage. Aucune de ces options nest obligatoire. Cependant, en fonction de vos besoins, elles pourront se montrer trs utiles. Dans cette section, nous ne les passerons pas toutes en dtail. Certaines options concernent principalement lapparence des articles sur le thme et seront donc dtailles plus lon guement dans la partie de ce livre consacre la cration dun thme pour WordPress. Extrait
Figure3.35
Extrait d'un article.

Au moment de la prsentation des deux diteurs de WordPress, nous avons fait la connaissance de la fonction More, qui permet de ne proposer quun morceau de larticle sur la page daccueil du blog (voir Figure3.35). Ici, vous avez la possibilit dcrire un rsum de votre article plutt quen proposer les premires lignes. Cest souvent plus pertinent pour amener un sujet intressant. Cela peut servir de teaser. Si vous le souhaitez, vous pouvez crire votre rsum dans lespace qui lui est allou, et ce morceau de texte apparatra sur la page daccueil pour inciter le lecteur aller lire larticle sur son permalien. Cependant, comme pour la fonction More, vous devrez vrifier si votre thme vous permet dafficher cet extrait. Ce paramtrage vous est expliqu en dtail au Chapitre6. Rtroliens et pings
Figure3.36
Rtroliens.

Les rtroliens permettent de notifier dautres blogs que vous avez cr un lien vers eux (voir Figure3.36). Cette fonction est aujourdhui dprcie car les systmes de blogs grent cette fonction de manire automatique. Cependant, elle existe et elle vous permet de saisir une ou plusieurs URL que vous souhaiteriez notifier, le cas chant.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

84
Figure3.37

WordPress ct utilisateur
Champs personnaliss

Les champs personnaliss.

Par dfaut, les champs personnaliss (voir Figure3.37) vous permettent dajouter quelques informations supplmentaires au niveau de votre article, concernant par exemple votre humeur, ce que vous lisez en ce moment ou encore un texte qui rsumerait en trois mots le contenu de larticle: Humeur: en pleine forme!!; En train de lire: Des souris et des hommes, de Steinbeck; Politique trangre. Les champs personnaliss sont galement trs utiliss ces derniers temps sur les thmes magazines pour faire apparatre des images sur la page daccueil. Vous dfinissez limage au niveau du champ personnalis et elle apparat sur la page daccueil, en face de larticle (voir Figure3.38).
Figure3.38
Utilisation des champs personnaliss pour afficher des images.

Leur paramtrage est expliqu en dtail au Chapitre6.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le quotidien du blogueur
Figure3.39
Discussion.

85

Vous allez dcider ici si vous souhaitez autoriser ou non les commentaires pour votre article (voir Figure3.39). Idem pour les rtroliens. Commentaires Si votre article a des commentaires, ils viendront safficher ici. partir de cette page, vous pourrez dailleurs les grer et envoyer une rponse (voir Figure 3.40).
Figure3.40
Commentaires.

Auteur Choisissez ici lauteur de larticle. Il est modifiable, mme une fois que larticle est publi (voir Figure 3.41).
Figure3.41
Auteur.

Identifiant de l'article Par dfaut, WordPress va donner un identifiant votre article (voir Figure3.42). Cet identifiant dpendra de la structure des permaliens donne votre blog (voir plus loin dans ce chapitre). Pour faire simple, disons que WordPress va attribuer une URL par dfaut votre article.En haut de la page, sous le titre, vous pouvez changer le permalien de larticle. Si la structure des permaliens est celle dfinie par dfaut, vous ne pourrez pas effectuer de modifications. Cependant, WordPress vous donne un lien vers la page qui vous permettra de modifier cette structure (voir Figure 3.42).
Figure3.42
Identifiant de l'article.

Si vous choisissez par exemple une structure qui va afficher le nom de votre article, vous pourrez alors modifier les mots inclus dans cette URL et les remplacer par exemple par des mots-clefs.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

86

WordPress ct utilisateur
WordPress vous donne galement la possibilit de rcuprer lURL de base de vos articles, qui peut faire office dURL raccourcie tant donn sa taille rduite.

tat de publication
La page de rdaction dun article compte une colonne latrale, droite, qui vous permet de dfinir diffrentes informations concernant le statut de larticle, mais aussi de dfinir des mots-clefs et une ou plusieurs catgories pour votre article. Le premier bloc est destin tout ce qui touche la publication dun article (voir Figure3.43).
Figure3.43
Bloc Publier de la colonne latrale.

Prvisualisation et enregistrement de l'article Tout dabord, vous avez un bouton qui vous permet de prvisualiser votre article dans une nouvelle fentre. LURL de larticle nest pas disponible pour les visiteurs de votre blog. Elle est uniquement visible par vous, ds lors que vous souhaitez voir quoi va ressembler larticle que vous tes en train de rdiger. gauche, vous avez un deuxime bouton qui vous permet denregistrer votre article. Son enregistrement nentrane pas ici de modification de son tat tant que vous ne le modifiez pas sur la ligne juste en dessous. L, si vous changez son tat, celui-ci ne sera pris en compte quaprs lenregistrement. tats de l'article Sous WordPress, il existe diffrents tats pour larticle: Publi. Article publi et visible par tous. Brouillon. Enregistr mais pas publi. Programm. Planifi pour une publication dans un futur proche. En attente de relecture. Doit tre valid par un administrateur avant dtre publi. Priv. Visible uniquement par les utilisateurs enregistrs du blog.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le quotidien du blogueur

87

Tant que votre article n'est pas enregistr, il aura le statut de "brouillon". Visibilit de l'article WordPress vous permet davoir trois types de visibilit pour votre article (voir Figure 3.44a). Il peut tre public, donc visible par tout le monde. Il peut tre protg par un mot de passe; dans ce cas, vous devez fournir le mot de passe pour que les visiteurs puissent le visualiser. Enfin, il peut tre priv, ce qui veut dire quil ne sera visible que par les visiteurs qui ont un compte daccs au blog, via un rle; bien souvent, celui utilis est "abonn".
Figure 3.44a
Visibilit de l'article.

Placer un article en tte de la page d'accueil Depuis la version2.7 de WordPress, vous avez la possibilit de mettre en avant un article sur la page daccueil de votre blog. Celui-ci saffichera tout en haut de la page, au-dessus des autres, passant ainsi au-dessus de la suite antchronologique dun blog. Pas mal de blogs en font souvent une section particulire appele la une (voir Figure3.44b).
Figure3.44b
Article la une.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

88

WordPress ct utilisateur
Cette option peut servir pour mettre en lumire des articles qui intresseraient ventuel lement les lecteurs de votre blog et qui seraient probablement perdus dans la masse de billets si cette option nexistait pas. Choisir la date de publication d'un article Par dfaut, votre article est publi immdiatement, mais dans WordPress, vous avez la possibilit de choisir la date et lheure auxquelles votre article sera mis en ligne (voir Figure3.45). Pour cela, il vous suffit de cliquer sur le lien Modifier, droite du petit calendrier et du texte Publier tout de suite.

Figure3.45
Changer la date de publication d'un article.

Cette option peut tre intressante dans bien des cas, par exemple si vous partez en vacances mais que vous souhaitez tout de mme publier des articles pour vos lecteurs. Ainsi, vous rdigez vos articles et vous pouvez choisir des dates rparties sur les jours et semaines qui suivent. Une fois le billet planifi, cliquez sur Publier et celui-ci passera en statut Programm. Il napparatra sur le blog qu la date que vous aurez choisie.

Options de l'cran
Comme sur le tableau de bord, vous avez ici un panneau vous permettant de choisir les blocs que vous souhaitez voir apparatre quand vous rdigez un article (voir Figure3.46).
Figure3.46
Options de l'cran de rdaction d'un article.

Vous pouvez galement choisir dafficher la page sur une ou deux colonnes.

Dcouverte des catgories


Insertion des catgories dans un article Directement sous les tags, vous allez attribuer au moins une catgorie votre article. Cellesci permettent de classer les articles par sujet. Nous sommes dans le mme domaine que les mots-clefs, sauf quici nous viterons de classer nos articles dans beaucoup de catgories

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le quotidien du blogueur

89

la fois. La catgorie sera le sujet de larticle, alors que les mots-clefs seront plutt les mots qui caractrisent le mme article (voir Figure3.47).
Figure3.47
Gestion des catgories dans la page de cration d'un article.

Il faut galement savoir quun article doit tre associ au minimum une catgorie, alors que vous pouvez trs bien ne pas proposer de mots-clefs. Tout comme les mots-clefs, les catgories facilitent beaucoup la navigation pour les visiteurs. Bien souvent, on affichera la liste des catgories dans la colonne latrale, pour permettre linternaute de trouver facilement le sujet quil recherche (voir Figure3.48).
Figure3.48
Affichage des catgories dans la colonne latrale.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

90

WordPress ct utilisateur
Ici aussi, essayez de limiter le nombre de catgories. Beaucoup de personnes conseillent de nen choisir quune par article pour simplifier au maximum leur gestion. Il nexiste par dfaut quune seule catgorie, qui sappelle Non class. Si vous crivez votre premier article, cest la seule qui vous sera propose. Vous allez donc probablement devoir en crer une ou plusieurs autres pour coller au mieux avec le contenu de votre article. Pour cela, cliquez sur le lien + Ajouter une nouvelle catgorie dans le bloc consacr aux catgories. Une nouvelle ligne apparat. Saisissez le nom de votre nouvelle catgorie et choisissez ou non une catgorie parente. Si cest le cas, votre nouvelle catgorie deviendra une sous-catgorie. Mais, si vous crez votre premire catgorie, vous ne choisirez pas de catgorie parente (voir Figure3.49).

Figure3.49
Cration d'une catgorie pour un article.

Vous pouvez galement choisir ici dafficher les catgories de deux manires : soit vous affichez "toutes les catgories", soit vous naffichez que les catgories les "plus utilises". Gestion des catgories Comme pour les mots-clefs, il existe une page o vous allez grer lensemble de vos catgories. Cette page se situe sous longlet Articles et le sous-menu Catgories. Sur cette page, vous allez pouvoir crer, modifier et supprimer une ou plusieurs catgories. Cration, modification et suppression d'une catgorie linstar de la page de gestion des mots-clefs, la page de gestion des catgories est divise en deux colonnes: celle de gauche, qui vous permet de crer une nouvelle catgorie, et celle de droite, qui vous permet de modifier les catgories existantes (voir Figure3.50).

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le quotidien du blogueur
Figure3.50
Page de gestion des catgories.

91

Pour crer une nouvelle catgorie, vous devez renseigner diffrentes informations: Nom de la catgorie. Identifiant de la catgorie. Important parce que cest lui qui va apparatre dans lURL de la page des catgories, si vous choisissez la structure de cette URL. Catgorie mre. Description. Elle peut tre utile car certains thmes ont tendance lafficher sur la page des catgories. Pour modifier ou supprimer une catgorie, le fonctionnement est identique que pour les mots-clefs. Vous remarquerez cependant que la catgorie par dfaut Non class nest pas supprimable.

Dcouverte des mots-clefs


Directement sous le bloc Publier se trouve un autre bloc appel Mots clefs. Dans cette section, vous allez apprendre choisir et insrer des mots-clefs dans votre article, mais nous en profiterons aussi pour apprendre les grer, via la page de linterface dadministration qui leur est ddie. Insertion des mots-clefs dans un article Rdiger un article ne consiste pas uniquement crer un contenu et trouver un titre. Cet article, vous allez devoir lassocier diffrentes informations qui pourront tre trs utiles aux visiteurs de votre blog. Les mots-clefs en font partie.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

92

WordPress ct utilisateur
Quest-ce quun mot-clef ? En anglais, on les appelle des "tags". Ce sont des mots qui caractrisent votre article. Ils sont trs priss et utiliss sur le Web de nos jours. Ils pourront safficher au niveau de larticle (voir Figure3.51) mais aussi au niveau de la colonne latrale du blog, via notamment un widget qui servira ainsi doutil de recherche pour le visiteur (voir Figure3.52). Ce widget va afficher tous les mots-clefs crs dans tous les articles sous forme de nuage. Plus un mot-clef est utilis, plus il va tre gros. Cest le principe mme du nuage de tags. Il est donc important de ne pas crer trop de mots-clefs par article pour que ce nuage reste utilisable. Si vous avez en tout 500mots-clefs par exemple sur votre blog, vous ne pourrez probablement pas y afficher le nuage. Essayez de vous limiter une dizaine au maximum par article.

Figure3.51
Prsentation des tags au niveau d'un article.

Figure3.52
Prsentation des tags dans un widget.

En cliquant sur un mot-clef sur le blog, vous accdez une nouvelle page du blog qui rfrencera tous les articles qui ont t tagus avec le mot que vous avez choisi (voir Figure3.53). Dans la colonne latrale de votre page de rdaction darticle, vous avez donc un bloc o vous allez saisir les diffrents mots-clefs associs votre article. Si leur utilisation est fortement conseille, elle nest cependant pas obligatoire, contrairement aux catgories que nous allons voir ensuite (voir Figure3.54). Essayez de trouver les mots-clefs qui caractrisent le mieux le message que vous voulez faire passer dans votre article.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le quotidien du blogueur
Figure3.53
Page d'un tag sur le blog.

93

Figure3.54
Les tags dans la rdaction d'un article.

Gestion des mots-clefs Chaque tag cr est gr par WordPress. Sur linterface dadministration, une page est ddie leur gestion (voir Figure3.55). Elle se situe dans longlet Articles et le sous-menu Mots clefs. Sur cette page, vous pourrez aussi bien crer, modifier ou encore supprimer des tags.
Figure3.55
Page de gestion des tags.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

94

WordPress ct utilisateur
La page est divise en deux colonnes. Celle de gauche vous permet de crer un nouveau mot-clef en lui donnant un nom et un identifiant. La colonne de droite vous donne la possibilit de modifier les mots-clefs existants. Ici, vous avez trois possibilits: Modifier, dition rapide, qui correspond une modification mais sous une forme diffrente, et Supprimer. Pour modifier le mot-clef, vous pouvez cliquer directement dessus, et pour le supprimer, vous pouvez cocher la case devant le motclef et choisir Supprimer dans le menu droulant des actions disponibles (voir Figure3.56).

Figure3.56
Suppression d'un mot-clef.

Enfin, cette page vous permet de connatre galement lensemble des articles comprenant un tag. Dans le tableau, vous avez droite une colonne qui sintitule Articles et qui rfrence le nombre darticles contenant le mot-clef. Cliquez sur ce chiffre et vous aurez la liste des articles en question (voir Figure3.57).
Figure3.57
Nombre d'articles possdant ce mot-clef.

Insertion d'une vignette dans l'article Depuis la version 2.9 de WordPress, vous avez la possibilit dinsrer des vignettes dimages dans vos articles (voir Figure 3.58). Cette vignette accompagnera votre article partout o elle pourra tre affiche. Cette utilisation est trs courante notamment sur les thmes "magazines". Dans Twenty Ten, le nouveau thme par dfaut de WordPress, la vignette est utilise de manire assez originale puisquelle va remplacer limage qui est utilise dans len-tte du thme.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le quotidien du blogueur
Figure3.58
Insertion d'une image la une.

95

Le processus est identique ce que nous avons vu prcdemment pour insrer une image directement dans un article. Une fois votre image charge, elle apparat sur la page de rdaction de votre article. Au Chapitre 6, nous verrons comment insrer et utiliser cette fonction dans nimporte quel thme.

Grer vos articles


Il vous arrivera peut-tre de vouloir modifier des articles, mme lorsquils sont publis, voire en supprimer certains. Pour cela, vous devez aller sur la page de gestion des articles qui est situe sous longlet Articles et le sous-menu Modifier (voir Figure3.59). Le systme de gestion des articles reprend le mme concept que celui que nous avons vu prcdemment pour les mots-clefs et les catgories.
Figure3.59
Page de gestion des articles.

Navigation parmi les articles Pour trouver un article, utilisez la fonction de recherche de cette page, situe en haut droite. Cest une fonction classique mais souvent sous-utilise. Grce elle, vous trouverez rapidement ce que vous cherchez (voir Figure3.60).

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

96
Figure3.60

WordPress ct utilisateur

Formulaire de recherche de la page de gestion des articles.

Vous pouvez galement effectuer des slections en triant: Par type darticle. Tous les articles, publis, brouillons ou encore par articles privs. Par date. WordPress propose un menu droulant pour effectuer un tri dans les archives. Ce tri se fait par mois. Par catgorie. Vous avez la possibilit ici de trier lensemble de vos articles par catgorie. Par auteur. Dans le tableau regroupant lensemble des articles, vous trouverez une colonne Auteur. En cliquant sur un des auteurs prsents, vous pourrez voir lensemble des articles quil a pu rdiger. Par tag. Vous pouvez aussi faire un tri par tag, au niveau de la colonne Tags dans le tableau des articles. Modification et suppression d'un article Pour modifier un article, il vous suffit de cliquer sur son titre ou dutiliser les liens situs en dessous et qui vous permettront de crer laction voulue. Vous pouvez galement cocher la case devant la ligne de larticle et choisir une action dans le menu droulant au-dessus du tableau. En savoir plus sur les articles partir de la page de gestion des articles, vous avez la possibilit de voir les commentaires pour chaque article, en cliquant sur la "bulle" avec un chiffre qui correspond au nombre de commentaires pour larticle. La nouvelle page qui souvrira sera la page de gestion des commentaires (voir Figure3.61).
Figure3.61
Accder aux commentaires partir de la page de gestion des articles.

crire et grer une page


Diffrence entre page et article
Une page est considre par WordPress comme un lment statique du blog, cest--dire qui est en dehors du flux chronologique. Vous allez notamment lutiliser pour crer des lments distincts du blog, comme une page davant-propos, darchives ou encore un formulaire de contact. Les articles, eux, sont des lments dits dynamiques; ils alimentent le contenu du

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le quotidien du blogueur

97

site et sont de ce fait trs priss par les moteurs de recherche car ils apportent du contenu frais sur le Web. Il est donc important de bien comprendre la diffrence entre une page darticle du blog, autrement appele permalien, et une page statique du blog dont nous allons parler dans la section suivante.

Cration, modification et suppression d'une page


Pour crer une nouvelle page dans votre blog, allez sous longlet Page. Cliquez sur Ajouter. Vous arrivez directement sur la page qui va vous permettre de crer une nouvelle page pour votre blog (voir Figure3.62). L, vous retrouvez une grande partie de ce qui existe dj pour la rdaction des articles.
Figure3.62
Cration d'une nouvelle page.

Comme pour la rdaction dun article, vous avez diffrentes options telles que les champs personnaliss, la gestion des commentaires et des pings, ainsi que la possibilit de choisir lauteur de la page. Mais la cration de page a galement ses propres spcificits: Parent. Vous avez la possibilit de crer des "sous-pages", de donner une hirarchie vos pages. Modle de page. Vous pouvez assigner votre page un modle spcifique que vous aurez cr ou qui est fourni avec le thme. La dfinition de modle se rapproche du

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

98

WordPress ct utilisateur
concept de template de WordPress. Ici, le contenu comme le design peuvent tre dtermins de manire unique. La notion de modle de page sera aborde de manire plus dtaille au Chapitre6. Ordre. Les pages sont classes par ordre chronologique; vous avez la possibilit de les classer dans un ordre arbitraire. La notion dtat de publication, quant elle, est la mme que pour la rdaction dun article. noter que vous pouvez galement associer une page une image la une.

Gestion des pages


Pour grer les diffrentes pages du blog, vous allez rester dans le mme onglet ouvert pour la cration dune page du blog et vous allez cliquer sur le lien Modifier. Cette page est semblable ce que vous avez dj vu pour les articles, mais aussi les mots-clefs et les catgories, ou encore linsertion dune vignette: recherche via le formulaire; tri par type de page ou par auteur; modification des pages en cliquant sur leur titre; modification ou suppression des pages via les liens Modifier, dition rapide, Supprimer et Afficher ou Aperu selon ltat de la page; suppression ou modification en cochant la case devant chaque page et en choisissant laction souhaite dans le menu droulant situ au-dessus du tableau; accs aux commentaires et aux pings les concernant via la petite "bulle" prvue cet effet.

crire et grer les liens et les catgories de liens


Dfinition
Lorsque vous installez WordPress, votre blog possde automatiquement ce quon appelle une liste de liens , pointant vers diffrents sites de WordPress (voir Figure3.63). La blogroll est une liste de liens que vous partagez avec vos lecteurs, un peu comme des listes de blogs damis que lon voit souvent affiches sur diffrents sites.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le quotidien du blogueur
Figure3.63
Liste de liens WordPress.

99

Cration, modification et suppression d'un lien et d'une catgorie de liens


Cration des liens Vous commencerez par crer un premier lien. Vous allez galement en profiter pour crer une catgorie de liens. Pour cela, allez sous longlet Liens, puis cliquez sur Ajouter; vous arrivez directement sur la page de cration dun lien (voir Figure3.64).
Figure3.64
Page de cration d'un lien.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

100

WordPress ct utilisateur
L, vous allez renseigner diffrentes informations: Nom. Indiquez le nom qui va apparatre sur la page web. Adresse web. crivez ici lURL du site ou du blog pour lequel vous souhaitez crer un lien. Description (facultatif). Fournissez une courte description qui saffichera au survol du lien par la souris. Catgories. Cest ici que vous allez associer vos liens avec une catgorie de liens. La seule catgorie propose lorsque vous crez votre blog est la blogroll. Nous allons donc en crer une seconde que nous appellerons "blogs amis". Pour cela, cliquez sur le lien + Ajouter une nouvelle catgorie. Vous pourrez alors enregistrer votre nouvelle catgorie de liens en lui donnant tout simplement un nom. Notez que vous avez la possibilit de mettre le mme lien dans plusieurs catgories. Ensuite, WordPress vous propose plus doptions avances, qui sont cependant facultatives et que vous pourrez afficher ou masquer grce aux options de lcran. Tout dabord, vous allez choisir la cible de vos liens, cest--dire que vous dterminerez comment vont souvrir les liens ds lors quils seront cliqus. Vous avez trois possibilits: _blank. Ouverture du lien dans une nouvelle fentre. _top. Ouverture du lien dans un nouvel onglet. Aucune. Ouverture du lien dans la mme fentre. Puis WordPress vous propose de fournir des informations concernant la relation avec le propritaire du site li (XFN). Cette information, stocke dans le code sous la fonction rel, permet davoir des prcisions sur votre "relation" avec la personne qui possde le site que vous allez lier ici (voir Figure3.65). Ces informations sont cependant optionnelles et peu utilises.

Figure3.65
Relation avec le propritaire du site li (XFN).

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le quotidien du blogueur

101

Enfin, WordPress vous propose toute une srie doptions pour laffichage de vos liens: Adresse de limage. Vous pouvez remplacer votre lien texte par une image. Il vous suffit de fournir son URL. Adresse du flux RSS. Vous pouvez fournir ladresse du flux RSS du blog que vous liez. Commentaires. Laissez ici tout commentaire concernant ce lien. Classement. Les liens sont des listes cres par ordre alphabtique. Vous pouvez ici leur donner un ordre arbitraire. Dans la colonne de droite, vous avez la possibilit de dterminer si le lien est priv ou pas. Sil est priv, le lien napparatra que pour les utilisateurs enregistrs du blog. Options avances WordPress vous offre la possibilit dassocier quelques informations supplmentaires votre lien: lassocier une image; lassocier un flux RSS; lassocier des notes; lassocier un systme de notation qui va de 0 10. Gestion des liens Tout se passe sur la page Modifier de longlet Liens. Nous reprenons ici les mmes lments de gestion que ceux que nous avons vus prcdemment sur les autres pages de gestion, savoir: possibilit de faire une recherche via le formulaire en haut droite; tri des liens par catgorie, par identifiant du lien, par nom, par adresse, par notes; modification de lien en cliquant sur son nom; modification ou suppression via les liens Modifier, dition rapide, Supprimer et Afficher ou Aperu selon ltat de la page; suppression ou modification en cochant la case devant chaque lien et en choisissant laction souhaite dans le menu droulant situ au-dessus du tableau; accs direct sur le site li en cliquant sur lURL; et, enfin, suppression de lien en cochant la case qui prcde son nom et en cliquant ensuite sur le bouton Supprimer. Gestion d'une catgorie de liens Nous avons gnr une nouvelle catgorie de liens directement en crant un lien. Sur WordPress, il existe une page ddie ces catgories de liens. Cette page se trouve toujours sous longlet Liens et sur la page Catgories de liens.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

102

WordPress ct utilisateur
Sur cette page, vous avez la possibilit de crer et de grer les diffrentes catgories de liens de la mme manire que ce que nous avons pu faire prcdemment. Les diffrentes infor mations que vous pourrez renseigner pour chaque catgorie de liens sont: Nom de la catgorie. Vous allez lui donner le nom de votre liste, "blogs amis". Identifiant. Trs utile pour le rfrencement et avec lutilisation de certaines URL. Il ne doit pas contenir daccents. Description. Vous pouvez donner un court descriptif de votre liste ou catgorie de liens. Notez quici vous avez la possibilit de supprimer la catgorie fournie par dfaut dans WordPress, savoir la blogroll. Sachez galement que si vous supprimez une catgorie de liens, les liens qui lui sont associs ne seront pas supprims mais attribus la catgorie de liens par dfaut, savoir la blogroll.

Gestion et paramtrage des commentaires


Plus votre blog aura de succs, plus il recevra de commentaires. Il est donc important de savoir les grer mais aussi de savoir les paramtrer. Les commentaires sont une des parties les plus intressantes du blog car cest grce eux que vont exister les discussions et les dbats. Un blog sans commentaires ne serait pas vraiment un blog. Malheureusement, ce sont galement les commentaires qui vont tre soumis aux attaques de spam, identique celui que vous pouvez recevoir dans vos e-mails. Ici, il va donc falloir distinguer et grer les commentaires en provenance des visiteurs "humains", qui sont l pour engager une discussion, et des robots qui viennent polluer votre blog de spam.

Gestion des commentaires


Pour grer vos commentaires au quotidien, rendez-vous sous longlet Commentaires. Vous retrouvez ici le mme fonctionnement que pour les autres pages de gestion du blog. Voici une liste complte des spcificits de la gestion des commentaires: Vous pouvez afficher les commentaires selon leur tat, quils soient en attente de modration ou approuvs (voir Figure3.66).
Figure3.66
Affichage des commentaires selon leur tat.

Vous avez la possibilit, une fois le ou les commentaires slectionns, de leur donner un tat "en masse", cest--dire modifier plusieurs commentaires en mme temps. Vous pourrez ainsi les approuver, les marquer comme indsirables, les dsapprouver ou encore les supprimer, quel que soit leur nombre.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le quotidien du blogueur

103

WordPress fournit diffrentes informations sur la personne qui a laiss le commentaire: nom, site web, adresse e-mail et adresse IP (voir Figure3.67).
Figure3.67
Donnes concernant l'auteur du commentaire.

Accdez la page web de larticle sur laquelle celui-ci a t laiss en cliquant sur son lien. Accdez directement aux commentaires de cet article en cliquant sur le nombre de commentaires dans la colonne En rponse cet article. Enfin, vous pouvez dcider de laction faire pour ce commentaire: lapprouver/dsapprouver, le rendre indsirable, le supprimer, le modifier, voire rpondre directement au commentaire (voir Figure3.68).
Figure3.68
Actions sur les commentaires.

Notez que lorsquun commentaire apparat en jaune, cest quil est en attente de modration.

Paramtrage des commentaires


La gestion des commentaires peut paratre complexe si elle nest pas bien paramtre ds le dpart. Bien entendu, nous parlons ici des blogs forte frquentation, mais mme si vous avez un blog plus "intime", vous ne serez pas protg du spam dans les commentaires. WordPress fournit par dfaut lexcellente extension Akismet, qui vous protgera la plupart du temps contre ce spam (voir au Chapitre4 la section sur les extensions), mais la plateforme vous propose galement toute une srie de fonctionnalits qui vous faciliteront la vie au quotidien et vous permettront de dresser quelques barrires utiles contre le courrier non dsir. Ces options se situent dans longlet Rglages et le sous-menu Discussion.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

104
Figure3.69

WordPress ct utilisateur
Rglages par dfaut des articles

Rglages par dfaut des articles.

Dans ce premier bloc, vous pouvez dcider de notifier ou non les blogs que vous mentionnez dans vos articles (voir Figure3.69). Vous avez galement la possibilit daccepter ou non les notifications en provenance dautres blogs. Enfin, vous pouvez choisir dautoriser ou non lescommentaires pour lensemble du blog. Autres rglages des commentaires
Figure3.70
Autres rglages des commentaires.

Lauteur dun commentaire doit renseigner son nom et son e-mail: si vous cochez cette case, le visiteur ne pourra pas laisser de commentaire sil na pas renseign au minimum un nom et un e-mail (voir Figure3.70). Un utilisateur doit tre enregistr et connect pour publier des commentaires: ici, vous voulez que chaque participant une discussion sur votre blog soit enregistr sur ce mme blog pour pouvoir laisser un commentaire. Cest une solution qui risque de freiner les commentaires mais qui vous protgera compltement du spam. Fermer automatiquement les commentaires pour les articles vieux de plus de X jours: vous pouvez dcider de fermer les commentaires pour tous les articles aprs une date fixe. Activer les commentaires imbriqus jusqu X niveaux: partir de WordPress2.7, il est possible davoir une gestion de commentaires imbriqus. Comme nous le verrons plus longuement au Chapitre6, il est possible de rpondre un commentaire spcifique. Ici, vous pouvez donc dcider du nombre de niveaux de discussion. Diviser les commentaires en pages, avec X commentaires par page et la X page affiche par dfaut: ici, vous allez dcider du nombre de commentaires afficher par page. Les commentaires doivent tre affichs avec le plus X en premier: vous de choisir si vous souhaitez avoir le premier commentaire en haut de la page ou le dernier. M'envoyer un e-mail lorsque
Figure3.71
M'envoyer un e-mail lorsque.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le quotidien du blogueur

105

WordPress vous propose ici de recevoir ou non un e-mail lorsquun commentaire a t laiss sur votre blog, ou lorsquil y en a un en attente de modration (voir Figure3.71). Il est trs important de cocher cette case pour savoir ce qui se passe sur votre blog, sans pour autant avoir besoin de passer par linterface dadministration. Avant la publication d'un commentaire
Figure3.72
Avant la publication d'un commentaire.

Un administrateur doit toujours approuver le commentaire: aucun commentaire ne saffichera sur le blog tant que ladministrateur ne laura pas valid manuellement (voir Figure3.72). Pour un blog qui a peu de visites, cela peut tre utile. Par contre, cela peut devenir rapidement ingrable si votre blog a beaucoup de succs. Lauteur dun commentaire doit avoir dj publi au moins un commentaire approuv: cette notion est trs intressante. En effet, toute personne qui viendrait pour la premire fois sur votre blog et qui laisserait un commentaire serait automatiquement mise en attente de modration. Cest un peu une manire de faire le tri et de voir le srieux du commentateur. Par contre, si cette personne laisse un deuxime commentaire, celui-ci sera automatiquement approuv et apparatra directement sur le blog. Enfin, WordPress vous propose deux fonctionnalits qui vont mettre en place des conditions pour savoir quand un commentaire doit tre mis en attente de modration, voire considr directement comme indsirable. Modration de commentaires
Figure3.73
Modration des commentaires.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

106

WordPress ct utilisateur
Tout dabord, vous allez dcider du nombre de liens maximal partir duquel un commentaire doit tre mis directement en attente de modration (voir Figure3.73). Nous savons que le spam ou pourriel utilise les blogs pour "vendre" des produits. Le spam fournit parfois toute une liste de liens. Fixer une limite basse peut tre une solution pour minimiser son impact. Par dfaut, ce nombre de liens est limit 2. File de modration WordPress vous propose de crer une liste qui va contenir des mots, des noms, des URL, des adresses e-mail ou encore des adresses IP, pour lesquels les commentaires seront directement placs dans la file de modration. Ainsi quand un commentaire arrivera sur votre blog avec une ou plusieurs de ces indications, il sera automatiquement mis dans la file de modration. Notez que cette fonction reconnat galement les bouts de mots et que vous ne devez mettre quune valeur par ligne. Liste noire Cest le mme concept que la file de modration. Fournissez le mme type de liste avec toujours les mmes types dinformations, cest--dire des mots, des noms, des URL, des adresses e-mail ou encore des adresses IP, mais cette fois-ci dans le but de les marquer dfinitivement comme indsirables. Les commentaires ne seront mme pas mis en liste dattente. Cela dit, vous avez toujours la possibilit de les approuver manuellement en allant les chercher dans longlet Commentaires indsirables, sous le menu de gestion des commentaires. Ces options de liste de modration et de liste noire sont des options facultatives. Avatars Les avatars sont de petites vignettes qui saffichent ct de votre nom ou de votre commentaire. Le concept a t lanc il y a quelques annes par Gravatar (www.gravatar.com). Vous crez un compte votre nom et vous lui associez une image. chaque fois que vous allez laisser un commentaire sur un blog, Gravatar va faire le rapprochement entre votre adresse e-mail et votre compte Gravatar et affichera votre image en consquence (voir Figure3.74). En 2007, Automattic, la socit qui dite WordPress, a rachet Gravatar. Et aujourdhui, cette option est intgre directement dans les options de discussion. Vous disposez de plusieurs options pour grer les avatars (voir Figure3.75).

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le quotidien du blogueur
Figure3.74
Affichage des avatars.

107

Figure3.75
Gestion des avatars.

Tout dabord, vous pouvez dcider dafficher ou non les avatars. Certains blogueurs apprcient les avatars, qui apportent plus de personnalisation aux commentaires, alors que dautres pensent que cest inutile et prfrent garder le minimum. Ensuite, les avatars sont classs par famille. Pour protger les plus jeunes publics, vous pouvez dcider dafficher sur votre blog les avatars qui sont visibles par tous, et refuss ceux qui sont rservs aux personnes de plus de 17ans.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

108

WordPress ct utilisateur
Enfin, il arrive que certaines personnes qui viennent commenter vos articles ne possdent pas de Gravatar. Dans ces cas-l, vous pouvez attribuer un avatar par dfaut ces visiteurs.

Diffrents rles d'utilisateurs


Sous WordPress, il existe cinq diffrents types dutilisateurs qui ont des rles et donc des droits diffrents. Ces diffrents rles sont: abonn; contributeur; auteur; diteur; administrateur. Voici un tableau rcapitulatif des diffrentes actions qui leur sont attribues. Tableau3.03: Rles des utilisateurs sous WordPress
Action crire un article Publier un article crire une page Grer TOUS les articles Grer SES articles Grer les pages du blog Grer les catgories Importer base de donnes Exporter base de donnes Grer TOUS les commentaires Grer SES commentaires Modrer les commentaires Laisser des commentaires Grer la blogoliste Grer les thmes Grer les plugins Grer les utilisateurs Grer les options X X X X X X X X X X Abonn Contributeur X Auteur X X diteur X X X X X X X Administrateur X X X X X X X X X X X X X X X X X X

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le quotidien du blogueur

109

Crer un nouvel utilisateur


Le premier utilisateur WordPress est celui que vous avez cr lors de linstallation de votre blog. Il sagit de lutilisateur "admin" qui assume le rle dadministrateur. Il existe plusieurs manires de crer un nouvel utilisateur. Soit vous avez un compte dadministrateur, auquel cas vous avez tous les droits pour crer un utilisateur, soit vous permettez nimporte qui de se crer un compte sur votre blog, partir du moment o il connat lURL qui lui permettra de gnrer son profil et o vous laurez paramtre de cette manire dans les rglages de WordPress. en tant qu'administrateur Pour crer un utilisateur en tant quadministrateur, vous devez vous rendre sous longlet Utilisateurs et cliquer sur le sous-menu Ajouter. Vous arrivez alors sur une nouvelle page qui va vous permettre de crer un nouvel utilisateur. Ici, il y aura trois informations obligatoires: lidentifiant, ladresse e-mail et le mot de passe. Ensuite, vous avez la possibilit de fournir le nom, le prnom ou encore le site web de lauteur. Enfin, vous allez devoir attribuer un rle chacun de vos nouveaux utilisateurs en fonction des droits que vous souhaitez leur confrer (voir Figure3.76).
Figure3.76
Crer un nouvel utilisateur.

en tant que visiteur du blog Comme nous lavons fait remarquer prcdemment, il est tout fait possible dautoriser nimporte quel visiteur senregistrer. Cela est notamment trs utile si vous souhaitez quun utilisateur soit connect pour pouvoir laisser un commentaire.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

110

WordPress ct utilisateur
Pour autoriser ces inscriptions, vous devez au pralable en faire le paramtrage dans longlet Rglages, sous le menu Gnral. L, descendez jusqu la ligne Inscription (voir Figure3.77).

Figure3.77
Inscription et rle du nouvel utilisateur.

En cochant cette case, vous autorisez nimporte quel visiteur sinscrire sur votre blog. Pour cela, vous devez lui prsenter un lien dinscription sur le blog. Ce lien est fourni par le thme default mais pas forcment par tous les thmes. Le visiteur arrivera sur une nouvelle page o il pourra senregistrer comme nouvel utilisateur de votre blog. Vous pouvez donc autoriser vos lecteurs sinscrire sur votre blog. Mais quel va tre leur rle? Cest ce que vous allez paramtrer dans le champ suivant, Rle par dfaut de tout nouvel utilisateur. Dans la majorit des cas, vous lui donnerez le rle dabonn. Cest dailleurs le rle choisi par dfaut par WordPress. Le nouvel utilisateur ne pourra alors laisser que des commentaires. Vous pouvez ventuellement lui donner un autre rle par dfaut, mais son rle sera alors plus tendu. vous de choisir en fonction de vos besoins. Il est bon de noter ici que la plupart du temps les blogs nutilisent pas cette fonction, laissant la possibilit aux visiteurs de faire un commentaire sans avoir besoin de sinscrire.

Gestion des utilisateurs


En tant quutilisateur, vous avez le droit de modifier les informations vous concernant en allant sur longlet Utilisateurs et le sous-menu Votre profil. Ici, au-del des informations donnes lors de la cration de lutilisateur, vous allez renseigner dautres informations qui pourront tre utilises par le blog (voir Figure3.78). Tout dabord, vous pouvez personnaliser linterface dadministration de WordPress pour votre propre usage: Choisissez dafficher ou non lditeur visuel pour la rdaction darticles. Choisissez les couleurs de linterface dadministration. Ensuite, en plus de retrouver lensemble des informations vous concernant, vous allez f ournir un pseudonyme et choisir le nom afficher publiquement sur votre blog. En dessous, vous pouvez fournir diffrentes informations pour vous contacter en dehors de ladresse e-mail (ces options sont facultatives): AIM, Yahoo Messenger et Jabber/Google Talk.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le quotidien du blogueur
Figure3.78
Votre profil d'utilisateur.

111

Ensuite, vous avez la possibilit de laisser quelques lignes personnelles sur vous. Cette information, une sorte de biographie, est de plus en plus utilise sur les blogs multiauteurs. Son paramtrage est expliqu en dtail dans la partie de cet ouvrage consacre la cration dun thme WordPress. Enfin, vous pouvez modifier votre mot de passe utilisateur comme nous lavons vu au dbut de ce chapitre.

Diffrents paramtrages du blog


Dans cette section, nous allons voir lensemble des paramtrages du blog qui nont pas encore t voqus jusquici mais que vous devez tout de mme prendre en compte pour le bon fonctionnement de votre blog. Tous les points examins ici se paramtrent dans longlet Rglages.

Options gnrales
Titre et description du blog
Figure3.79
Titre et description du blog.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

112

WordPress ct utilisateur
Au moment de linstallation de WordPress, vous avez d choisir un titre pour votre blog. Si vous souhaitez le modifier, cest ici que vous le ferez (voir Figure3.79). Vous allez galement en profiter pour donner un slogan, une description de votre blog, celle qui est propose par dfaut ne correspondant probablement pas la thmatique de votre site. Adresse de WordPress et du blog

Figure3.80
Adresse de WordPress et du blog.

WordPress vous donne la possibilit de positionner vos fichiers WordPress une adresse diffrente de celle du blog (voir Figure3.80). Si vous avez gard le dossier wordpress tel que vous lavez tlcharg, vous devriez avoir une URL de blog de cette forme: www.exemple. fr/wordpress. Ici vous allez placer ladresse de votre blog un autre endroit de votre site, sa racine, par exemple, cest--dire sous la forme www.exemple.fr, tout en laissant les fichiers sous le dossier wordpress. Comment procder? 1. Renseignez les nouvelles adresses pour vos fichiers WordPress ainsi que ladresse laquelle vous souhaitez voir apparatre le blog (1). 2. Avant daller plus loin, enregistrez les modifications. 3. Allez dans votre logiciel FTP sur votre hbergement et positionnez lensemble des fichiers de WordPress lendroit indiqu plus haut, dans les options gnrales. 4. Copiez les fichiers index.php et .htaccess se trouvant sous le dossier wordpress pour les placer lendroit o vous souhaitez voir apparatre le blog. Ici, nous voulons que le blog apparaisse la racine du site (www.exemple.fr), nous allons donc placer ces deux fichiers la racine de lhbergement, en dehors du dossier wordpress. 5. Ouvrez le fichier index.php avec votre diteur de texte favori et changez la ligne suivante:
require(./wp-blog-header.php');

en
require(./wordpress/wp-blog-header.php').

6. Comme vous avez "remont" le fichier index.php, il nest plus au mme niveau que le fichier wp-blog-header.php. Il faut donc modifier le chemin pour dire au moteur de blog daller chercher ce fichier dans le dossier wordpress. 7. Retournez maintenant sur linterface dadministration de WordPress (www.exemple.fr/ wordpress/wp-admin/) et allez sur longlet Permalien qui se trouve sous le menu Rglages. L, tant donn que vous avez modifi lURL des pages du blog, vous devez mettre jour les permaliens pour que WordPress prenne bien en compte tous ces changements.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le quotidien du blogueur

113

En effet, les URL des articles vont passer dune structure telle que www.exemple.fr/ wordpress/identifiant-de-larticle www.exemple.fr/identifiant-de-larticle. Cliquez donc sur le bouton Enregistrer les modifications, tout en bas de la page, pour mettre ces permaliens jour. 8. Pensez faire cette modification trs vite aprs linstallation du blog pour que les moteurs de recherche naient pas rindexer tout votre site, ce qui pourrait tre prjudiciable votre rfrencement. Adresse e-mail
Figure3.81
Adresse e-mail renseigner dans les rglages.

Ladresse que vous fournissez ici nest pas directement lie votre compte utilisateur (voir Figure3.81). Cest ladresse e-mail utilise pour ladministration du blog, celle que vous avez renseigne lors de la cration du blog. Par exemple, lorsquun nouvel utilisateur est cr, cest cette adresse quune notification sera envoye. Si par la suite vous voulez la modifier, cest ici quil faudra le faire. Dates et horaires
Figure3.82
Formats dates et horaires.

Le temps est une donne importante et incontournable sur un blog (voir Figure3.82). Sans cette notion de chronologie, un blog ne serait plus un blog. Il est donc important de bien paramtrer le fuseau horaire sur lequel vous vous trouvez, ainsi que les formats de date et dheure, pour permettre vos lecteurs et visiteurs de savoir quand un article a t publi. Le format de date propos par dfaut correspondra normalement vos besoins. Si vous souhaitez le paramtrer diffremment, dautres formats vous sont proposs par dfaut, et

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

114

WordPress ct utilisateur
vous avez mme la possibilit de personnaliser cette date. Pour plus dinformations sur les formats de date, nhsitez pas aller sur cette page web: http://ch.php.net/date. Vous pouvez galement choisir le format pour lheure, de la mme manire que pour la date. Enfin, on vous propose de choisir le jour qui dbute la semaine. Dans nos contres europennes, la semaine commence le lundi, mais dans certaines cultures, le premier jour de la semaine peut tre diffrent.

Options d'criture
Champ de saisie et mise en forme
Figure3.83
Taille du champ de saisie et mise en forme.

Dans WordPress, il est possible de choisir la taille du champ de saisie de vos articles (voir Figure3.83). Ici, vous allez donc dfinir le nombre de lignes qui dtermineront la hauteur du champ de saisie. Cette fonctionnalit peut se rvler utile, mme si depuis la sortie de la version2.5 de WordPress, vous avez la possibilit dcrire les billets en format Plein cran (voir la section de ce chapitre consacre la rdaction de votre premier article pour plus de prcisions). Notez galement que sur la page de rdaction dun article, vous avez la possibilit dtirer la fentre de saisie en "tirant" sur le coin en bas droite (voir Figure3.84).
Figure3.84
tirer la fentre d'dition d'un article ou d'une page.

Les options dcriture proposent galement quelques fonctionnalits concernant la mise en forme de vos articles: Possibilit de convertir les moticnes en image. Les moticnes sont ces petites ttes jaunes qui affichent des humeurs dans les billets. On les appelle aussi des "smilies" (ou smileys). Elles permettent de donner une intonation certaines phrases. Vous en apprendrez plus sur cette page du Codex: http://codex.wordpress.org/Using_Smilies. Possibilit de laisser WordPress corriger automatiquement les balises XHTML qui seraient non valides. Cela sadresse plutt ceux qui voudraient utiliser lditeur HTML et qui feraient des fautes lors de linsertion des balises. Si vous cochez cette case, WordPress corrige automatiquement les erreurs de code que vous pourriez faire.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le quotidien du blogueur
Catgories par dfaut pour les articles et les liens
Figure3.85
Catgories par dfaut des articles et des liens.

115

Vous dfinissez ici la catgorie par dfaut utilise lorsque vous oubliez den mentionner une au moment de la publication de vos articles (voir Figure3.85). Le fonctionnement est identique pour dterminer une catgorie de liens par dfaut. Quand vous rdigez un article et que vous oubliez de mentionner une catgorie, celle qui est dfinie ici par dfaut sera automatiquement prise en compte. Cest la mme chose pour les liens. Si vous ne leur attribuez pas de "liste", celle qui est mentionne ici sera utilise par dfaut. Publier un article Avec cette option de WordPress, vous pouvez avoir sur votre navigateur prfr un favori qui, lorsque vous cliquez dessus, vous permet darriver directement sur une page de rdaction dun article (voir Figure3.86). Pour cela, il vous suffit de cliquer sur le lien Publier un article et, tout en laissant le bouton de la souris enfonc, de placer le lien dans la barre de votre navigateur.
Figure3.86
Favori dans la barre du navigateur.

Ainsi, ds que vous voudrez rdiger un article rapidement partir dune page web, vous cliquerez sur ce lien qui vous amnera directement sur une page spciale de rdaction dun article. Prenons un exemple. Vous surfez sur le Web et vous trouvez un sujet darticle que vous souhaitez immdiatement bloguer. Vous restez sur cette page et vous cliquez sur le bouton Publier un article. Une nouvelle fentre va souvrir sur une page ddie de rdaction darticle, avec un titre prformat avec le contenu de la page web sur laquelle vous tes et avec un lien vers cette mme page dans le contenu mme de larticle (voir Figure3.87).

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

116
Figure3.87

WordPress ct utilisateur

Publier un article partir d'une page web visite.

Envoi d'article par e-mail


Figure3.88
Envoi d'article par e-mail.

WordPress permet de publier des articles directement partir dun e-mail (voir Figure3.88). Pour cela, vous devez renseigner les diffrentes informations de ladresse e-mail utilise pour publier vos articles: Serveur e-mail + port; Identifiant; Mot de passe; Catgorie par dfaut attribuer aux billets arrivant par e-mail. Ainsi, lorsque vous rdigerez des messages destins ladresse e-mail paramtre ci-dessus, ils seront automatiquement mis en ligne, dans la catgorie dfinie par dfaut.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le quotidien du blogueur
Publication distance
Figure3.89
Publication distance.

117

Il existe sur le march un grand nombre doutils qui permettent de grer votre blog en dehors de linterface dadministration, qui demande obligatoirement une connexion Internet (voir Figure3.89). Ces outils vous permettent donc de rdiger vos articles "offline", cest--dire en local, sur votre ordinateur, sans tre connect. Nous pouvons citer notamment Livre Writer sur Windows et Ecto ou MarsEdit sur MacOSX. Cependant, pour publier des articles que vous avez rdigs sur une application tierce, vous devez passer par un protocole de publication Atom ou via une des interfaces de publication XML-RPC. Vous autorisez ainsi la communication entre les deux en choisissant le protocole qui correspond vos besoins. De plus en plus dditeurs grent automatiquement le choix du bon protocole. Services de mise jour Les blogs sont des sites web qui sont mis jour rgulirement. Pas mal de services en ligne se sont crs autour de ce concept, et aujourdhui des moteurs de recherche pour les blogs proposent notamment les derniers articles parus. Cest le cas de services tels que Technorati ou Google Blog Search qui sont beaucoup utiliss par les internautes. Sur cette page, vous allez renseigner les adresses web de ces services pour les prvenir que vous avez publi un nouvel article. Cette notification se fera en mme temps que la publication de larticle. Ladresse indiquer ici est celle qui va notifier le service. On lappelle ladresse de "ping". Par exemple, celle de Technorati est http://rpc.technorati.com/rpc/ping (vous trouverez

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

118

WordPress ct utilisateur
plus dinformations sur le Codex WordPress et notamment toute une liste mise jour de services notifier: http://codex.wordpress.org/Update_Services). Par dfaut, WordPress inclut ladresse de pingomatic (http://rpc.pingomatic.com/), qui est un service qui va informer toute une srie de moteurs de recherche que vous avez publi un nouvel article. Attention toutefois ne pas trop utiliser de services de ping car ils ont tendance ralentir considrablement la publication des articles.

Options de lecture
Figure3.90
Options de lecture.

Les options de lecture apportent une touche de personnalisation votre blog ainsi qu son flux RSS (voir Figure3.90). Quelle page d'accueil pour votre blog? Vous choisissez ici la page daccueil de votre blog. Par dfaut, cette page est celle qui affiche les derniers articles. Mais vous avez la possibilit de dsigner une autre page de votre blog comme page daccueil de votre site web. Cela peut tre une page de prsentation par exemple, et ainsi le blog devient une page parmi dautres sur le site. Comment procder ? En fait, vous allez choisir quelle page sera votre page daccueil et laquelle accueillera les articles. Prenons un exemple. Admettons que vous souhaitiez prsenter votre site sur votre page daccueil et avoir une autre page ddie vos articles. Vous avez saisi vos diffrentes

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le quotidien du blogueur

119

nformations sur la page propos et cest elle que vous allez choisir pour tre la "page i daccueil" de votre blog. Vous allez galement crer une nouvelle page du blog, qui sintitulera Articles et que vous choisirez comme page des articles (voir Figure3.91).
Figure3.91
Choix de la page d'accueil du blog.

Validez vos choix en enregistrant vos modifications et allez voir le rsultat directement sur votre blog. Vous avez maintenant une page daccueil qui est une page statique, qui reprend le contenu de la page propos, et vous avez une nouvelle page, intitule Articles, qui vous donne accs lensemble de vos articles. Affichage du nombre d'articles sur les pages du blog La page daccueil de votre blog compte par dfaut dix articles. Vous avez la possibilit den afficher plus ou moins selon vos envies et vos besoins. Affichage des articles dans les flux de syndication Si votre blog a du succs, il sera lu par un grand nombre de personnes via un lecteur de flux RSS tel que Netvibes (www.netvibes.com), Google Reader (www.google.com/reader) ou encore NetNewsWire (www.newsgator.com/INDIVIDUALS/NETNEWSWIRE/). Ici, vous pouvez choisir le nombre darticles afficher dans votre flux. Par dfaut, il affiche les dix derniers, mais vous pouvez modifier cette option. Dcidez aussi si vous souhaitez proposer la totalit de vos articles ou seulement les premires lignes, incitant alors le lecteur se rendre sur le blog pour lire la suite. Concernant ces deux aspects, pas mal dtudes et de sondages ont t raliss sur Internet pour savoir ce que prfraient les lecteurs, ceux qui utilisent les lecteurs de flux RSS pour suivre diffrents blogs. La tendance pour le nombre darticles afficher se situe une moyenne de dix quinze articles. Cest surtout trs utile pour le lecteur qui vient de sabonner votre blog et qui va avoir accs ce nombre darticles. Par contre, les dbats pour savoir sil faut afficher larticle complet ou uniquement un extrait ont souvent t houleux, chacun dfendant sa position. En fait, il y a dun ct le blogueur qui voudrait bien que le lecteur vienne lire larticle directement sur le blog et de lautre le lecteur qui, au contraire, aimerait bien consulter ses flux RSS sans avoir besoin de toujours aller lire la suite sur le blog. Et cest gnralement le lecteur qui a le dernier mot. On a souvent vu des blogs passant en flux "tronqus" ne proposant donc quun extrait de leurs articles perdre un nombre

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

120

WordPress ct utilisateur
important de lecteurs car ces derniers jugeaient pnible de ne pas avoir accs directement lintgralit des articles via leur lecteur de flux RSS. Enfin, un nombre grandissant de personnes utilisent leur tlphone portable pour consulter des flux RSS. Pour ces personnes, lire les articles directement dans le flux sera plus optimal que douvrir le navigateur web du tlphone pour lire le reste de larticle. Encodage des pages et des flux RSS Lencodage par dfaut sur WordPress est lUTF-8. Vous avez la possibilit de le changer, mais ce nest conseill que si vous matrisez le dveloppement web. Pour tout utilisateur lambda, cette fonctionnalit na pas lieu dtre modifie.

Menu Vie prive


Figure3.92
Menu Vie prive.

Au moment de linstallation de votre blog, on vous a demand si vous souhaitiez apparatre dans les moteurs de recherche. La modification de votre prsence sur Internet se fera via ce menu, qui se trouve sous le menu Rglages (voir Figure3.92).

Modifier la structure des permaliens


Chacun de vos articles a une adresse web, une URL. Cette adresse est ce quon appelle un permalien. Et ce permalien peut prendre des formes diffrentes. Par dfaut, WordPress propose la structure de permalien suivante:
http://www.exemple.fr/?p=123

qui vous donne ladresse du blog, puis lidentifiant de larticle en question, ici 123. Le problme avec ce type de structure cest que visuellement elle ne donne aucune infor mation intressante sur le contenu de votre blog. WordPress propose quelques structures prtablies vous permettant de la modifier: Date et titre; Mois et titre (la plus utilise); Numrique. Mais vous pouvez galement dfinir vous-mme votre structure sur la ligne Structure personnalise.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le quotidien du blogueur

121

Les mots-clefs et le rfrencement Les moteurs de recherche utilisent beaucoup dinformations pour mieux rfrencer et indexer les blogs et les sites web en gnral. Parmi ces informations, il y a les mots-clefs. Ces mots, vous les retrouvez dans le contenu mme de larticle ainsi que dans le titre, mais galement dans lURL. Ainsi, si vous souhaitez avoir de nombreuses visites en provenance de Google par exemple, et avoir vos articles bien positionns, il est important davoir une bonne structure de permaliens qui soit comprhensible et qui indique notamment le titre du contenu. WordPress permet donc de modifier cette structure en choisissant celle qui correspond le mieux vos besoins. Imaginons que vous souhaitiez voir apparatre deux informations dans votre permalien : la catgorie et le titre de larticle. Ces deux informations sont pertinentes et permettront nimporte qui davoir un aperu rapide du contenu de larticle. Vous allez donc utiliser ces deux marqueurs, %category% et %postname%, pour obtenir la structure suivante:
http://www.exemple.fr/%category%/%postname%/

LURL prendra alors cette forme (exemple avec comme catgorie "webdesign"):
http://www.exemple.fr/webdesign/titre-de-mon-article

Une telle structure va permettre de rcuprer les diffrents mots-clefs que sont webdesign et les mots composant le titre de larticle. Et ceci nest quun exemple. WordPress vous permet de construire votre propre structure sur la ligne Structure personnalise et en utilisant lun des marqueurs suivants: %year%: correspond lanne de publication de larticle sur quatre chiffres (par exemple 2008). %monthnum%: mois de lanne, sur deux chiffres (de 01 12). %day%: jour dans le mois, avec affichage de la date sur deux chiffres (de 01 31). %hour%: heure de la journe, sur deux chiffres (de 00 24). %minute%: minute dans lheure, affiche sur deux chiffres (de 00 59). %second%: seconde dans la minute, affiche sur deux chiffres (de 00 59). %postname%: nous venons de le voir ci-dessus, il affichera les diffrents mots composant le titre de larticle, spars par des tirets. %post_id%: affiche lidentifiant de larticle. %category%: affiche le nom de la catgorie de larticle (sil y en a plusieurs, WordPress affiche la premire par ordre alphabtique). %author%: affiche lauteur de larticle.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

122

WordPress ct utilisateur
Cas particuliers d'hbergeurs qui ne permettent pas la rcriture des permaliens Dans certains cas, vous ne pourrez pas modifier la structure des permaliens comme cela est propos ci-dessus, car votre hbergeur nautorise pas le "mod_rewrite", cest--dire quil ne permet pas dans le cas prsent la rcriture des permaliens. Si vous tes dans ce cas prcis, il y a une astuce qui vous permettra toutefois dutiliser la structure de permaliens de votre choix. Vous allez pouvoir utiliser les marqueurs voulus, mais vous devrez prcder la structure en y associant le fichier index.php qui permet laffichage du blog en ligne. La structure aura alors la forme suivante:
http://www.exemple.fr/index.php/%category%/%postname%/

Ce nest peut-tre pas aussi esthtique que la structure "normale", mais cela vous permettra tout de mme dy afficher les informations souhaites. Prfixe des catgories et des tags WordPress vous permet ici dajouter un prfixe pour les adresses web concernant vos catgories et vos tags. Lutilit principale est dajouter un mot-clef votre URL. Cette option reste cependant optionnelle et peu utilise.

L'onglet Outils
Publier un article On retrouve ici la mme option que celle dcrite prcdemment dans le sous-menu criture. Convertisseur de catgories et de tags WordPress a cr une extension qui vous permet de convertir vos catgories en tags ou linverse. En cliquant sur le lien, vous allez tre amen sur la page Import du mme onglet Outils. L, vous cliquerez encore sur le lien du convertisseur, parmi les autres outils dimportation, et vous serez redirig vers une page dextension que vous pourrez tlcharger. Ensuite, pour lutiliser, vous ferez les mmes manipulations que pour nimporte quelle extension. Importer Le menu Importation va vous permettre dimporter une base de donnes en provenance dun autre blog WordPress ou en provenance dautres plates-formes de blogging. Vous pourrez aussi rcuprer de nombreuses tables utilises par diffrentes extensions de WordPress. Exporter WordPress vous permet dexporter vos articles, sous un format WordPress eXtende RSS ou WXR. Vous pouvez galement filtrer ce que vous voulez exporter. Ainsi, vous pouvez choisir la date de dbut prendre en compte et/ou la date de fin. Vous pouvez faire un tri par auteur, catgories, types de contenu ou encore par statuts darticles.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le quotidien du blogueur

123

Mettre jour WordPress


WordPress nest pas un logiciel qui se repose sur ses lauriers. Bien quil soit devenu lun des outils de gestion de blog les plus utiliss au monde, ses dveloppeurs nont de cesse de chercher amliorer la vie du blogueur par lajout de nouvelles fonctionnalits et lamlioration de celles dj en place, grce aux versions majeures et mineures du logiciel. Par ailleurs, comme tout logiciel, WordPress nest pas parfait, et ces versions majeures sont souvent suivies de versions mineures qui corrigent certains dfauts ou sassurent que la scurit est optimale. La disponibilit dune version suprieure la vtre est clairement indique dans linterface dadministration (voir Figure3.93).
Figure 3.93
Le bandeau d'information notifiant l'existence d'une nouvelle version.

Dans les faits, il sort en moyenne trois versions majeures par an, et chacune est suivie dau moins une version mineure corrigeant les menus bogues rsiduels. Cela suppose donc pour le blogueur consciencieux environ six mises jour par an. Mme si les versions mineures nimpliquent le plus souvent que quelques fichiers, il est vrai que procder toutes ces mises jour peut facilement devenir laborieux, voire contraignant. Heureusement pour nous (et pour vous), la mise jour de WordPress est tout aussi facile et rapide que son installation, pour peu que vous suiviez correctement les instructions. Nous vous prsentons ici les mthodes principales: la mise jour automatique, la mise jour manuelle qui se fait via un client FTP et qui est la mthode adopte par la grande majorit des utilisateurs, la mise jour via Subversion, qui est rserver aux utilisateurs avertis et qui savent ce quils font, et la mise jour via une extension comme WordPress Automatic Upgrade. Seuls les utilisateurs dune version de WordPress gale ou suprieure la 2.7 pourront profiter de la mise jour automatique, les utilisateurs de versions plus anciennes (jusqu la

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

124

WordPress ct utilisateur
version2.6.3) ainsi que les utilisateurs de WordPress2.7 dont lhbergement nautorise pas la mise jour automatique devront se reposer sur les autres mthodes.

Mise jour automatique


Lun des principaux apports de la version2.7 de WordPress est lapparition dun outil de mise jour automatis directement intgr linterface dadministration. Celui-ci prend totalement en charge le transfert des fichiers depuis le serveur de dveloppement vers lhbergement du blog, rendant obsolte le processus classique de tlchargement, dcompression et mise en ligne via le client FTP.
L'outil de mise jour automatique, apparu avec WordPress 2.7, n'est videmment utilisable que pour mettre jour vers des versions qui lui sont suprieures: de 2.7 2.7.1, de 2.7.1 2.8, de 2.8 2.9, etc. Il n'est videmment pas disponible pour mettre jour vers la 2.7. Par consquent, les blogueurs qui souhaiteraient en profiter devront faire une dernire mise jour selon leur mthode habituelle.

Le processus de mise jour automatique est conu de telle sorte quune mise jour qui aura chou ne sera pas prise en compte: 1. Tlchargement de larchive depuis WordPress.org dans le dossier local /wp-content. 2. Dcompression de larchive localement, dans le dossier /wp-content/upgrade/ /core/ wordpress. 3. Cration du fichier temporaire .maintenance la racine du blog. Tant que ce fichier existe, le blog ne peut recevoir de nouvelle visite, tout comme son interface dadministration, ce qui permet de ne pas troubler le fonctionnement de WordPress tandis que les fichiers sont mis jour (voir Figure 3.94). 4. Copie des nouveaux fichiers en remplacement des anciens. 5. Mise jour de la base de donnes. 6. Effacement du contenu du dossier /wp-content/upgrade. 7. Effacement du fichier .maintenance. 8. Effacement des fichiers obsoltes.
Le thme par dfaut est galement mis jour; par consquent, si votre blog utilise le thme par dfaut avec des modifications personnelles, assurez-vous que vous avez bien renomm son dossier dans /wp-content/themes, sinon vous perdrez ces modifications. Par ailleurs, l'outil de mise jour est conu pour effacer tous les anciens fichiers et dossiers qui ne sont plus pris en compte par WordPress; faites donc une sauvegarde de votre dossier /wp-images s'il se trouve que vous vous en servez encore

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le quotidien du blogueur
Figure 3.94
Le message de maintenance, bloquant l'accs au blog.

125

Lancer la mise jour Il y a deux moyens douvrir lcran de mise jour automatique: en choisissant loption Mettre jour du sous-menu Outils, ou en cliquant directement sur le lien Veillez rester jour, qui se trouve en bas de chaque page de linterface dadministration de WordPress. Lcran qui saffiche alors vous avertit tout dabord quil est toujours utile de faire une mise jour des fichiers de votre blog et de la base de donnes. Certaines extensions, comme WPDB-Backup, peuvent vous y aider. Le lancement de la mise jour se fait en cliquant sur le bouton Mettre jour automatiquement. partir de l, deux possibilits peuvent se prsenter, qui dpendent de votre hbergement: WordPress vous demande vos identifiants FTP (voir Figure 3.95). La mise jour se dclenche directement.
Techniquement, WordPress fait appel l'outil suPHP pour permettre la mise jour en direct sans problme de droits d'accs. Si cet outil n'est pas install sur le serveur, ou si ses droits ont t rvoqus par l'utilisateur, plusieurs outils sont utiliss en fonction de la configuration serveur pour assurer une mise jour avec un maximum de scurit: ftpext, ftpsocket ou ssh2.

Figure 3.95
Les identifiants FTP dpendent de votre hbergeur.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

126

WordPress ct utilisateur
Si votre hbergeur vous demande vos identifiants FTP, saisissez ceux que vous avez utiliss pour installer WordPress. Ds que vous les avez saisis, le processus se lance et il est identique dans les deux cas (voir Figure3.96).

Figure 3.96
Les messages affichs pendant une mise jour complte.

Une fois la mise jour acheve avec succs, vous pouvez tranquillement retourner dans les diffrentes sections de WordPress pour bloguer comme dhabitude Mise en garde Le processus de mise jour automatique vous dcharge totalement de la laborieuse tape de remplacement des fichiers: cest le serveur PHP qui soccupe de tout. Mais il est toujours possible que des problmes ct serveur bloquent la mise jour chez certains hbergeurs. En effet, les huit tapes du processus demandent beaucoup de mmoire (pour dcompresser larchive .zip, entre autres choses), un temps maximal dexcution PHP appropri, et en gnral une configuration PHP adquate. De fait, la mise jour pourra tout simplement tre impossible chez certains hbergeurs: mmoire insuffisante, pare-feu trop restrictif, droits daccs aux fichiers limits, ncessit de changer de configuration,etc. Souvent, vous ne pouvez le savoir quen essayant Par exemple, par dfaut, un hbergement 1&1 (1and1.fr) ne pourra lancer la mise jour que si le site utilise la configuration PHP5, la configuration PHP4 tant insuffisante. Pour changer de configuration, il suffit dajouter la ligne suivante au fichier .htaccess la racine du compte: AddType x-mapp-php5 .php.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le quotidien du blogueur

127

Chez un autre hbergeur populaire, OVH (ovh.fr), la mise jour automatique narrive galement pas son terme (particulirement avec la configuration PHP5, active en plaant la ligne SetEnv PHP_VER 5 dans le fichier .htaccess). Les clients dOVH devront donc a priori en rester aux mthodes classiques La communaut WordPress a cr une page sur le Codex pour lister les rsultats de mise jour automatique selon les diffrents hbergeurs: ceux chez qui la mise jour marche sans problme, ceux chez qui elle ne marche que dans certains cas, et ceux chez qui elle ne marche malheureusement pas. Vous pouvez y accder via cette adresse: http://codex.wordpress.org/Core_Update_Host_Compatibility. Cest un wiki, donc nhsitez pas vous inscrire pour y contribuer par vos propres rsultats de test! Les possibilits dchec sont donc relles et, selon les cas, il est possible que vous ne puissiez faire appel la mise jour automatique. Vous devrez alors vous reposer sur la mise jour manuelle ou via Subversion, ou laide dune extension comme WordPress Automatic Upgrade.

Mise jour manuelle


WordPress sest forg une rputation (mrite) de facilit dinstallation: les dveloppeurs promettent aux utilisateurs un blog en tat de marche en moins de 5minutes. Dans le mme ordre dide, la mise jour de WordPress se fait idalement en trois tapes, avec un minimum de rgles suivre. Toutes les tapes sont suivre imprativement pour sassurer une mise jour sans souci. tape 1: prparation de la mise jour 1. Faites une sauvegarde. Pour prvenir tout problme pendant la mise jour, il est chaudement recommand de tlcharger lensemble des fichiers de WordPress prsents sur votre compte FTP et de les mettre en scurit sur votre disque dur. Si la mise jour venait chouer, vous pourriez ainsi revenir la version prcdente en effaant tous les fichiers et en les remplaant par cette sauvegarde. Pareillement, une exportation des donnes stockes dans MySQL peut viter de mauvaises surprises. Pour cela, des extensions ddies existent, comme WP-DB-Backup, http://wordpress.org/extend/plugins/wp-db-backup/ (voir Figure 3.97). Pour ceux qui savent sen servir, phpMyAdmin permet galement dexporter le contenu de la base dans de nombreux formats Noubliez pas cette tape: si la mise jour casse votre blog et si vous perdez vos donnes, vous ne pourrez vous en prendre qu vous-mme

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

128
Figure 3.97

WordPress ct utilisateur

WP-DB-Backup en action.

2. Dsactivez toutes les extensions. Certaines extensions peuvent tre lies WordPress
au point de crer un conflit pendant la mise jour. Les dsactiver toutes permet de parer tout problme. Pour ceux qui ont un grand nombre dextensions, il suffit de cocher la case en tte du tableau des extensions pour toutes les slectionner, puis de cliquer sur Dsactiver. Aprs la mise jour, il est conseill de ractiver les extensions une une pour sassurer quaucune ne cre de conflit avec la nouvelle version. Lorsque cest fait, si lune des extensions se rvle dfectueuse au point de vous empcher de vous reconnecter linterface dadministration, la solution est de renommer son fichier sur le serveur, le temps de vous connecter et de la dsactiver tape2: remplacer les fichiers de WordPress 1. Rcuprez la dernire version. Tlchargez la dernire version de WordPress en franais depuis http://fr.wordpress.org, et dcompressez larchive sur votre disque dur. 2. Nettoyez le serveur FTP. Pour viter les problmes de fichiers non remplacs, connectez-vous sur votre compte FTP et effacez totalement les dossiers /wp-admin et /wpincludes. Ne touchez pas au dossier /wp-content (et /wp-images sil existe), ni aux dossiers que vous auriez vous-mme crs. Effacez galement tous les fichiers la racine du dossier de WordPress (index.php, wp-rss.php,etc.), SAUF les fichiers suivants (voir Figure 3.98): wp-config.php, qui contient les codes de connexion avec la base MySQL; .htaccess, qui contient les rgles de rcriture pour obtenir des URL lisibles; les fichiers que vous avez installs vous-mme, et ceux crs par des extensions, par exemple les scripts de statistiques ou un fichier sitemap.xml.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le quotidien du blogueur
Effacez enfin certains sous-dossiers de /wp-content: /wp-content/cache; /wp-content/plugins/widgets.
Figure 3.98
Votre hbergement aprs l'effacement des fichiers et dossiers remplaables.

129

3. Mettez en ligne les nouveaux fichiers. Au moyen de votre client FTP, transfrez les dossiers /wp-admin et /wp-includes ainsi que tous les fichiers la racine depuis votre disque dur vers votre compte FTP. Ensuite, ouvrez sur votre compte FTP le dossier /wp-content et faites les modifications suivantes: Remplacez lextension Akismet par la version de larchive. Effacez et remplacez le thme par dfaut Kubrick, dans /wp-content/themes/default, sauf si vous avez modifi ce thme vous-mme, auquel cas ny touchez surtout pas au risque de perdre ces modifications. Mettez jour le fichier de traduction franaise fr_FR.mo dans /wp-content/languages/. Ne touchez pas aux autres extensions et thmes sans savoir ce que vous faites. tape3: lancer et vrifier la mise jour Les nouveaux fichiers de WordPress sont maintenant en place sur votre compte FTP, mais il est possible que la nouvelle version ncessite galement des modifications sur la base de donnes pour fonctionner correctement. Ces modifications sont ralises par un script interne, upgrade.php, dont le lien vous sera propos lorsque vous vous reconnecterez

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

130

WordPress ct utilisateur
linterface dadministration de WordPress aprs une mise jour. Cliquez sur ce lien pour terminer le processus de mise jour (voir Figure 3.99). Si le lien ne vous est pas propos, vous pouvez le lancer en allant directement ladresse http://votre-domaine.com/votredossier/wp-admin/upgrade.php.

Figure 3.99
Message affich par upgrade. php.

Si ces tapes ont t correctement suivies, votre version de WordPress est maintenant jour. Il vous reste parcourir les pages de votre blog et de linterface dadministration pour vous assurer que tout fonctionne correctement et dcouvrir les nouveauts de cette version! Parmi les points vrifier, vous pouvez lister: Les permaliens des articles et pages. Si votre blog est configur pour avoir des permaliens lisibles, assurez-vous quils fonctionnent toujours en parcourant quelques pages de votre blog. La compatibilit des extensions. Si vous avez bien suivi ltape1, toutes vos extensions ont t dsactives lors de la mise jour. Une fois le script upgrade.php correctement lanc, il est temps de ractiver vos extensions, mais pas toutes la fois. En effet, il est possible quune extension ancienne ne soit pas compatible avec la nouvelle version de WordPress et fasse ragir votre blog ou linterface dadministration de manire inattendue. Pour dcouvrir lextension fautive, ractivez donc les extensions une une, et vrifiez quelles fonctionnent comme prvu. Le cas chant, partez en qute dune alternative lextension fautive, et contactez son auteur. La compatibilit de votre thme. Tout comme les extensions, un thme peut faire appel des fonctions de WordPress depuis longtemps abandonnes. Assurez-vous donc que votre thme saffiche comme avant. Le cas chant, contactez son auteur, corrigez-le vous-mme, ou cherchez une alternative plus rcente. La variable SECRET_KEY. Si vous mettez jour depuis une version infrieure la 2.5, vous devez ajouter une ligne votre fichier wp-config.php, afin de renforcer la scurit de votre code: define('SECRET_KEY', 'a-remplacer-par-une-suite-de-caracteres-au-hasard'); (voir Figure3.100). Vous pouvez gnrer une cl secrte au hasard grce au script hberg sur le site de WordPress: http://api.wordpress.org/secret-key/1.0/.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le quotidien du blogueur
Figure 3.100
Mettre en place la cl secrte dans wp-config.

131

Votre blog est maintenant jour. Flicitations!

Mise jour par Subversion


La mise jour via FTP est suffisamment rapide pour pouvoir tre faite en 5minutes, mais devoir ritrer ces manipulations pour chaque nouvelle version peut rebuter certains utilisateurs, surtout ceux qui grent de nombreux blogs. Il est possible de raliser automatiquement les mises jour sans disposer de la version2.7 de WordPress, et ce avec un minimum dintervention, si vous utilisez directement le serveur Subversion de WordPress gr par Automattic, http://svn.automattic.com/wordpress/. Cette mthode est rserver aux utilisateurs qui connaissent Subversion et/ou les commandes, et qui ont la main sur leur serveur. Les fichiers passent directement des serveurs de WordPress votre propre serveur, sans devoir faire une transition par votre disque dur, ni grer une archive .zip (voir Figure3.101).
Figure 3.101
Subversion en action dans la ligne de commande.

Subversion (SVN) est un outil de gestion de version utilis par les dveloppeurs de Word Press, qui repose sur un serveur librement accessible par le Web depuis un client ddi, mais

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

132

WordPress ct utilisateur
surtout via une connexion SSH que nous utiliserons ici. Ce serveur donne accs toutes les versions existantes de WordPress correctement tiquetes (http://svn.automattic.com/ wordpress/tags/), aux dveloppements en cours pour une version donne (http://svn.automattic.com/wordpress/branches/) [voir Figure 3.102], ainsi qu la dernire version en cours de dveloppement dans le "tronc" (http://svn.automattic.com/wordpress/trunk/).

Figure 3.102
gauche, le contenu de /branche; droite, celui de /tags.

Le tronc est logiquement instable, il peut changer du jour au lendemain, et nest utiliser que pour les utilisateurs qui ont un intrt tre la pointe du dveloppement. Dans la vaste majorit des cas, il sera prfrable de mettre jour vers une version stable. Les versions stables sont dveloppes dans les branches ddies (par exemple http://svn. automattic.com/wordpress/branches/2.6/ pour la srie 2.6.x) et sont souvent aussi peu stables que /trunk. Les vritables versions stables, une fois valides partir du code dans / branches, sont places dans /tags avec le numro complet de la version (par exemple http:// svn.automattic.com/wordpress/tags/2.6.1/ pour la version2.6.1, tire des dveloppements de la srie2.6.x). Avant toute manipulation, vous devez savoir quelle version utiliser. Pour cela, visitez le dossier /tags avec votre navigateur et notez le numro de la dernire version. Installer un nouveau blog avec Subversion Un blog ne peut tre mis jour avec Subversion que sil est dj gr par cet outil. Le mieux pour y arriver est donc de commencer ds le dbut par crer le blog en rcuprant les fichiers de WordPress laide de la commande de "checkout" de Subversion (svn co), ce aprs vous tre plac dans le dossier de destination. La manipulation est faire depuis une interface de ligne de commande, une fois connect au serveur web. Voici comment installer WordPress2.6 par ce biais (voir Figure3.103):
$ mkdir blog $ cd blog $ svn co http://svn.automattic.com/wordpress/tags/2.6.1 .

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le quotidien du blogueur
Figure 3.103
svn co en action.

133

Noubliez pas le point final de la dernire ligne, spar de lURL, sinon la commande svn crera un dossier /tags/2.6.1 plutt que placer tous les fichiers tlchargs la racine du dossier cr avec la commande mkdir. Une fois le transfert de fichiers termin, renommez wp-config-sample.php en wp-config. php, et modifiez-le pour y mettre la configuration de votre serveur MySQL. Enfin, suivez le processus dinstallation normal tel quil est dcrit au Chapitre2. Mettre jour le blog install avec Subversion Les fichiers de votre blog peuvent prsent tre grs par Subversion. partir de maintenant, le processus de mise jour est considrablement simplifi, liminant le tlchargement de larchive sur votre disque dur, lenvoi de fichiers sur le serveur FTP,etc. Tout cela grce la commande "switch" de Subversion (svn sw), qui modifie uniquement les fichiers diffrents. Par exemple, pour mettre jour vers WordPress2.6.3:
$ cd blog $ svn sw http://svn.automattic.com/wordpress/tags/2.6.3 .

Ici encore, noubliez pas le point la fin de la ligne. Subversion devrait ainsi ne pas toucher vos fichiers (extensions, thmes,etc.), mais que cela ne vous empche pas de faire une sauvegarde avant, au cas o le processus chouerait. Une fois le transfert de fichiers achev, suivez le processus normal de mise jour expliqu dans ce chapitre, commencer par une connexion votre interface dadministration pour lancer le script upgrade.php.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

134

WordPress ct utilisateur
Convertir un blog install la main en blog gr avec Subversion Avec Subversion, la rapidit de la mise jour est telle que nombreux sont ceux qui voudront sen servir, mme sils nont pas install leur blog via Subversion ds le dpart. Heureu sement, il est trs facile de rparer cet oubli. Suivez ce processus pas pas: 1. Faites une installation avec Subversion dans un dossier temporaire, par exemple blog-temp, comme nous lavons vu prcdemment. 2. Placez vos fichiers personnels (wp-config.php, .htaccess, les thmes, extensions, images, scripts, fichiers de traduction,etc.) depuis votre dossier existant vers le dossier temporaire. 3. Pour conserver le dossier existant en cas de problme, renommez-le plutt que de leffacer, par exemple en "blog-vieux". Puis, renommez le dossier temporaire avec le nom normal du dossier du blog. 4. Lancez le script upgrade.php. Pour plus de scurit, vous pouvez faire une sauvegarde de votre base MySQL. Vous obtenez ainsi, partir dun blog install la main, les mmes bnfices quun blog install avec Subversion. Si un problme survient, il vous suffit de redonner au dossier "blog-vieux" son nom normal et de remettre en place vos donnes MySQL.

Mettre jour au moyen d'une extension


Lextension WordPress Automatic Upgrade (http://wordpress.org/extend/plugins/word press-automatic-upgrade/) a servi dinspiration loutil interne de mise jour automatique (voir Figure 3.104). Elle a donc lavantage de fonctionner pour les versions de WordPress infrieures la2.7. Cette extension tente de simplifier le processus de mise jour en recrant lide dun script serveur qui tlcharge et installe directement les fichiers de la nouvelle version, tout en tant plus simple prendre en main. Il est sans doute plus sr, tant donn que sa premire action est de vous proposer de tlcharger tous les fichiers de WordPress et le contenu de la base de donnes, avant de lancer la suite du processus (qui comprend une dsactivation automatique de toutes vos extensions). Pour autant, elle ne doit pas vous faire oublier de raliser une sauvegarde de vos fichiers et de votre base de donnes avant de vous lancer dans la mise jour. WPAU se charge ensuite de mettre jour les fichiers essentiels, savoir le contenu des d ossiers /wp-admin et /wp-includes, et les fichiers la racine.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le quotidien du blogueur
Figure 3.104
Administration de WordPress Automatic Upgrade.

135

En cas de problme
WordPress est depuis longtemps conu pour que ses mises jour se fassent rapidement et avec un minimum de souci pour lutilisateur, quel que soit son niveau. Pourtant, la grande varit des configurations serveur et logicielle fait quune mise jour peut, dans de rares cas, faire plus de mal que de bien. Voici quelques solutions aux problmes les plus courants

Le blog est bloqu en tat de maintenance


La mise jour automatique ne sest pas acheve a priori, et un fichier .maintenance doit toujours se trouver la racine de WordPress. Il est probable que la configuration par dfaut de votre hbergement soit insuffisante pour la mise jour automatique. Essayez de modifier cette configuration avec les possibilits offertes par votre hbergeur, ou contactez-le directement pour savoir sil est possible quil modifie sa configuration PHP pour autoriser le droulement complet de la mise jour. Pour accder nouveau votre blog et son interface dadministration, effacez simplement le fichier .maintenance au moyen dun client FTP. Pour aller jusquau bout, effacez les archives .zip tlcharges dans le dossier /wp-content, et effacez le contenu du dossier /wp-content/upgrade. Nhsitez pas faire profiter la communaut de votre exprience en ajoutant votre hbergeur sur le wiki de WordPress: http://codex.wordpress.org/Core_Update_Host_Compatibility.

J'ai perdu les modifications de mon thme/d'une extension


Heureusement, vous avez pens faire une sauvegarde de vos fichiers avant de lancer la mise jour, comme ctait conseill! Si ce nest pas le cas, vous ne pouvez malheureu sement que vous en prendre vous-mme

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

136

WORDPRESS CT UTILISATEUR
La mise jour automatique efface et remplace de nombreux fichiers et dossiers obsoltes. Parmi eux se trouvent: Les thmes Classic et Default. Le contenu des dossiers /wp-content/themes/classic/ et /wp-content/themes/default/ est intgralement mis jour. Donc, si vous avez personnalis lun des deux thmes par dfaut, par exemple en le traduisant ou en modifiant limage den-tte, assurez-vous davoir dplac vos fichiers modifis dans leur propre dossier, par exemple /wp-content/themes/default2/. Les extensions Akismet, Hello Dolly, Markdown et Textile. Akismet (/akismet/akismet.php) est rgulirement mise jour, donc son extension WordPress profite galement dun remplacement. Lextension Hello Dolly (hello.php) est moins souvent mise jour, mais si vous vous en servez, son fichier sera aussi remplac. Quant aux extensions Markdown (markdown.php) et Textile (textile1.php), elles datent galement des premires versions de WordPress et sont aujourdhui considres comme obsoltes, donc effaces. vous de faire en sorte de les conserver si vous vous en servez La mise jour automatique a pour but de nettoyer vos fichiers WordPress et elle peut se montrer trop efficace au got de certains. Noubliez donc jamais de faire une sauvegarde de vos fichiers originaux.

Le blog ne s'affiche pas comme avant


Aprs une mise jour, il peut arriver que le thme du blog apparaisse "cass": lignes de code PHP qui apparaissent, informations manquantes,etc. Le plus souvent, le code fautif provient dune extension trop ancienne qui utilise du code qui nest plus pris en compte par WordPress. Retrouvez-la en dsactivant toutes les extensions, puis en les ractivant une une. Une fois lextension fautive trouve, dsactivez-la et cherchez une alternative compatible et, idalement, contactez lauteur de lextension dfectueuse pour lui signaler le problme. Cest plus rare, mais il peut arriver que la cause dun thme "cass" soit le thme lui-mme, si celui-ci est trop ancien et donc bas sur du code obsolte. Dans ce cas, vous pouvez soit mettre la main dans le cambouis si vous avez des connaissances en HTML, soit contacter lauteur du thme pour lui demander poliment de corriger le problme. Au pire, il vous reste toujours la possibilit de donner un nouveau look votre blog, en utilisant lun des nombreux thmes disponibles sur le web. (Vous en trouverez une slection sur http:// apprendre-wordpress.fr/livre.)

J'ai rcrit certaines parties de WordPress


Certains utilisateurs prfrent modifier directement le code de WordPress plutt que dcrire une simple extension. Cest une mauvaise ide, car les mises jour vous obligent garder la trace de vos modifications, et ne pas mettre jour vous expose des failles de scurit pouvant faire des ravages. Plongez-vous dans la partie de ce livre qui explique le dveloppement dextensions, afin de transposer votre hack en une extension propre, dont vous pourrez mme faire profiter la communaut

Le quotidien du blogueur

137

Je prfre la version prcdente


Bien que cela soit fortement dconseill pour des raisons de scurit, il est possible de revenir une version prcdente dans la limite des diffrences entre deux versions. En effet, si le retour en arrire entre versions mineures (de 2.6.1 2.6 par exemple) ne pose pas de problme, il nen est pas de mme entre les versions majeures, tant les modifications internes peuvent tre importantes. Par exemple, une fois pass une version suprieure la 2.3, il devient dlicat de revenir en arrire et dangereux. Pour revenir une version antrieure, il suffit dexploiter la sauvegarde des fichiers et de la base de donnes que vous avez faite lors de ltape1 de la mise jour (automatique ou manuelle). Effacez tous les fichiers de WordPress et remplacez-les par les fichiers sauvegards, puis effacez toutes les tables MySQL lies WordPress et restaurez votre sauvegarde de base de donnes ( laide de loutil phpMyAdmin par exemple). Sans ces sauvegardes, revenir une version prcdente est presque impossible.

Je veux mettre jour depuis une trs vieille version


Le script upgrade.php prend en compte de nombreuses anciennes versions de WordPress, mais si votre blog utilise une version vraiment ancienne, comme la1.2, le processus de mise jour est sensiblement diffrent, du fait de lintroduction du systme de thmes dans la version1.5. Il vous faudra donc tlcharger WordPress1.5, faire une mise jour vers cette version, adapter votre thme, puis faire une nouvelle mise jour depuis la version1.5 vers la toute dernire. Notez que les extensions et thmes que vous utilisez devront tre certainement mis jour eux aussi, voire remplacs par des alternatives plus modernes

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Choisir le thme et les extensions pour son blog


Jusqu prsent, nous avons insist sur limportance que peut avoir le paramtrage du blog. Dans ce chapitre, nous allons nous intresser lapparence de votre blog. Nous passerons en revue les donnes qui sont prendre en compte pour bien choisir un thme, cest--dire un design pour votre blog. Nous verrons aussi comment personnaliser votre colonne latrale en utilisant les widgets, et enfin nous aborderons la notion dextension et nous verrons lesquelles sont indispensables pour votre blog.

Bien choisir le thme pour son blog


La recherche dun thme est srement lun des aspects les plus intressants lorsquon cre son propre blog. Mais cela peut galement tre lun des plus difficiles. Il faut trouver le thme qui saccordera bien avec le contenu et avec vos gots. Et parfois, cela se rvle tre une mission plutt prilleuse. Nous allons ici vous donner quelques pistes qui vous permettront de trouver le style qui vous correspondra le plus et qui refltera le mieux lidentit de votre blog.

Quel style pour mon blog?


Lorsquon commence parler de design pour un blog, on distingue deux catgories de personnes. Il y a tout dabord celles qui savent ce quelles veulent et qui ont une ide prcise de ce quelles recherchent. Et puis il y a celles qui ne savent pas du tout quel design choisir pour leur blog et qui retireront un grand bnfice des pages qui vont suivre. La communaut WordPress est gigantesque et elle regorge dides. Vous pourrez aussi bien parcourir diffrents sites qui proposent des thmes WordPress que des sites qui rfrencent les plus grands blogs WordPress. Toutes ces ressources vous donneront un premier aperu de ce que vous pouvez obtenir et vous guideront dans vos choix. Plus loin dans ce chapitre, nous vous donnerons une liste complte de ces ressources. Mais, avant de partir laventure, il est important que vous considriez quelques questions qui orienteront votre choix du meilleur thme pour votre blog. En effet, mme si vous avez une ide du rsultat que vous voudriez obtenir, vous devez toujours prendre en considration le visiteur et la corrlation entre le contenu et le contenant dun blog. Voici quelques questions types que vous pourriez vous poser: Quel est le contenu de mon blog? Est-ce un blog personnel? Un blog professionnel? Un photoblog? Ou encore un blog dactualits? Quel design choisir en fonction de ce contenu? Il existe de nombreux styles qui correspondent diffrentes orientations. Ces derniers temps, la mode semble tre aux thmes

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

140

WordPress ct utilisateur
dits "magazines", qui correspondent parfaitement des blogs de "news", dactualits, mais qui vont trs mal sassocier avec un contenu personnel ou un blog professionnel. Quelles couleurs choisir, toujours en fonction de ce contenu ? Des couleurs plutt chaudes? Plutt froides? Combien de colonnes pour mon blog? Une colonne qui donne un aspect plus intime, plus personnel? Deux colonnes qui sont un grand classique du blog? Trois colonnes, voire plus, qui vont sadresser plus des blogs dactualits ou professionnels? Quelle place rserver au contenu par rapport la ou les barres latrales? Si ces questions ne sont que des exemples parmi dautres, elles vous permettront nanmoins dorienter votre rflexion. Nhsitez pas non plus parcourir le Web pour dnicher des ides. Trouvez le design qui correspond le mieux vos envies, votre personnalit mais aussi au contenu de votre blog. Enfin, pour tenter de trouver le thme parfait sil existe, nhsitez pas tlcharger tous ceux qui vous plaisent et essayez-les sur votre blog. Cest le meilleur moyen de voir celui qui vous conviendra le mieux.

Gratuit ou payant?
Dans lunivers des thmes WordPress, on trouve de tout. Il y a du bon comme du moins bon, et il y a du gratuit comme du payant. Le tout est de savoir ce que vous recherchez et si vous tes prt dbourser un peu dargent pour vous payer un thme un peu plus volu. En fait, tout dpend du besoin. Parmi les thmes gratuits, vous trouverez tout type de style. Par contre, du ct des thmes payants (appels galement "thmes premium"), vous retrouvez bien souvent des thmes prvus pour des sites dactualits ou des sites institutionnels. Cela parat logique. Ds lors que vous dveloppez un thme pour un blog et que vous souhaitez le rendre payant, autant le destiner ceux qui auront les moyens de le payer et surtout qui verront cet achat comme un investissement. Mais, si vous souhaitez crer un blog personnel prvu uniquement pour votre entourage, il est fort probable que vous trouviez votre bonheur sans avoir besoin de dbourser quoi que ce soit. Par contre, si vous souhaitez crer un vritable site Internet, plutt professionnel, et qui utiliserait des techniques avances de WordPress, nhsitez pas vous tourner vers des solutions payantes. Mais, l encore, faites bien attention. De nombreux dveloppeurs et designers se sont lancs dans le design de thmes WordPress, mais pas toujours de manire bien srieuse. On trouve ici encore pas mal de thmes qui sont vendus trs cher et qui ne valent pas forcment le prix pay. Dans la section suivante, vous trouverez une liste complte de sites web o vous pourrez vous procurer des thmes gratuits ou payants de trs bonne qualit. Certains sont vraiment des rfrences en la matire et quel que soit le thme que vous tlchargerez, vous serez assur de sa qualit.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Choisir le thme et les extensions pour son blog

141

propos des "theme frameworks"


Tout dabord, quest-ce quun "theme framework": WordPress permet depuis quelques versions de crer des thmes enfants partir dun thme principal. Ce thme principal est souvent construit sous forme de "framework". Il a une structure et des fonctionnalits qui vont permettre lutilisateur de sen servir de manire pousse et optimale. Bien souvent, ces thmes ne sont pas utiliss directement tels quels mais le sont travers un thme enfant qui reprend la structure de son thme parent. Quels en sont les avantages? Le thme parent, le "theme framework", ne va pas tre modifi. Il pourra donc facilement tre mis jour. Cest un gros avantage pour bnficier des nouvelles fonctionnalits du thme ou alors des volutions de WordPress, le tout sans avoir aller modifier le code du thme directement. Quels sont les inconvnients? Le souci avec les thmes frameworks est que ce sont de vritables usines gaz. Donc, si vous souhaitez une fonctionnalit particulire qui nexiste pas dans le thme, il vous faudra mettre les mains dans le code, et l, vous risquez de vous heurter des structures trs complexes, difficiles comprendre et matriser pour quelquun qui ne connat pas le PHP.

Ressources web
Rpertoire de thmes chez WordPress.org (http://wordpress.org/extend/ themes/) Pendant longtemps, WordPress a possd un site web ddi aux thmes : http://themes. wordpress.net/. Puis, pour des raisons diverses, le site na plus t maintenu. Mais, dbut 2008, lquipe WordPress a dcid de remettre le navire flot avec un nouveau site, annexe du site principal de WordPress: http://wordpress.org/extend/themes/. Disons que cest le site "officiel" pour les thmes WordPress. La qualit peut sembler assez alatoire, mais le systme de navigation est trs bien conu et vous permettra de trouver facilement ce que vous cherchez. noter que vous avez la possibilit dinstaller les thmes prsents sur le site officiel directement partir de votre interface dadministration. Nous verrons comment faire dans une section suivante. Woothemes (http://www.woothemes.com) Woothemes propose la fois des thmes payants et gratuits. Cest aujourdhui le numro1 en terme de ventes et de communaut. Le service existe depuis 2008 et propose rgulirement des thmes de trs bonne qualit avec certains conus par des web designers clbres.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

142

WordPress ct utilisateur
Elegant Themes (http://www.elegantthemes.com) Ici, tous les thmes sont payants mais lauteur propose un service qui est trs intressant. En effet, vous payez un peu moins de 20dollars par an et vous avez accs tous les thmes quil propose. Et, quand on voit la qualit de ses thmes, nul doute que cela vaut le coup. Vraiment un coup de cur graphique! Blog Themes Plus (http://blogthemesplus.com) Ce site rfrence la fois des thmes payants et des thmes gratuits. Vous y trouverez le meilleur des deux mondes. noter que le site propose galement des sites pour dautres plates-formes telles que Tumblr ou Blogger. Press75 (http://press75.com) Ce site a t cr par Jason Schuller, un designer WordPress clbre. Il propose la fois des thmes gratuits et payants de trs bonne qualit. Les thmes Press75 sont trs apprcis pour leur univers graphique. Studiopress (http://www.studiopress.com/) Brian Gardner est lauteur des thmes proposs sur ce site. Brian est un des premiers concepteurs de thmes WordPress. Il est considr comme un pionnier et a propos divers services au fur et mesure de lvolution de WordPress. Aujourdhui, il est tourn vers les "themes frameworks" dont on a parl prcdemment. Il propose donc un thme de base et des thmes enfants, le tout tant payant. Thesis (http://diythemes.com/thesis/) Ce site propose un thme qui pourrait sapparenter un framework. Il est dailleurs interprt diffremment chez diffrentes personnes. Cest un thme simple graphiquement mais trs pouss au niveau des fonctions. Si vous recherchez un thme qui vous donne toute libert au niveau des options, Thesis pourrait tre le bon choix. Smashing Magazine (http://www.smashingmagazine.com/) Smashing Magazine nest pas proprement parler un site de thmes WordPress mais en propose rgulirement sur son blog. Les thmes proposs sont toujours gratuits et de trs bonne qualit. Le site propose galement rgulirement des articles recensant les meilleurs thmes WordPress. Avec ces diffrentes ressources, vous devriez facilement trouver votre bonheur. Si ce ntait pas le cas, nhsitez pas utiliser les moteurs de recherche et naviguer sur le Web. Internet regorge de thmes pour WordPress. Mais, comme nous lavons dit prcdemment, tous ne sont pas toujours bien cods, certains sont sponsoriss et comprennent parfois des liens vers des sites de spam. En piochant dans la liste propose ci-dessus, vous avez la garantie que votre blog aura un thme de qualit, tant au niveau du design quau niveau de son dveloppement.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Choisir le thme et les extensions pour son blog

143

Installer et grer son thme


Installation d'un thme
partir de l'hbergement Linstallation dun thme pour WordPress est trs simple. Suivez les instructions suivantes et vous profiterez rapidement de votre blog avec son nouveau design: 1. Une fois que vous avez trouv le thme que vous voulez essayer, tlchargez-le sur votre ordinateur. Il est compos dun dossier qui regroupe lensemble des fichiers du thme. 2. Ouvrez votre logiciel FTP prfr et connectez-vous votre hbergement, au niveau du dossier des thmes: wp-content> themes. 3. Transfrez le thme dans ce dossier. Les fichiers se trouvent maintenant dans wpcontent/themes/nomdutheme/ (voir Figure4.01).
Figure4.01
Dossier thmes.

4. Une fois le transfert effectu, allez sur linterface dadministration de WordPress, sous longlet Apparence et le sous-menu Thmes. La page est scinde en deux parties : Thme courant, qui correspond au thme employ actuellement sur le blog, et Thmes disponibles qui sont les thmes que vous pouvez utiliser. Cest l que vous allez voir apparatre le thme que vous venez de transfrer. 5. Descendez au niveau des Thmes disponibles et cliquez sur la vignette du nouveau thme (voir Figure 4.02). Vous pouvez avoir un aperu de votre blog avec le thme choisi avant de valider ce choix. Si vous tes satisfait du rsultat, cliquez en haut droite de la fentre sur Activer, suivi du nom du thme (voir Figure4.03). La page se rafrachit automatiquement et votre thme apparat dsormais comme thme courant (voir Figure4.04).

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

144
Figure4.02

WordPress ct utilisateur

Choisir le thme afficher.

Figure 4.03
Activer le thme choisi.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Choisir le thme et les extensions pour son blog


Figure 4.04
Thme courant.

145

partir de l'interface d'administration Lorsque vous tes dans le menu Apparence de ladministration de votre blog, vous avez deux onglets: Grer les thmes et Installer des thmes. Cliquez sur ce dernier onglet pour voir apparatre une nouvelle page qui va vous permettre de chercher des thmes en fonction de vos besoins (voir Figure 4.05).
Figure 4.05
Installer des thmes.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

146

WordPress ct utilisateur
Une fois vos choix effectus, cliquez sur le bouton Trouver des thmes. L souvre une nouvelle page avec une slection de thmes correspondant, ou presque, vos attentes (voir Figure 4.06).

Figure 4.06
Diffrents thmes disponibles en fonction des choix effectus.

Ce qui est intressant partir de cette page, cest que vous allez pouvoir prvisualiser chacun des thmes proposs sans avoir besoin de les tlcharger. Ce nest quune fois que vous aurez trouv votre bonheur que vous cliquerez sur le bouton Installer, situ sous le titre du thme. partir de l, WordPress va installer le thme. Cela peut prendre jusqu quelques minutes, selon le thme et votre connexion Internet. Une fois le thme install, vous pourrez une nouvelle fois le visualiser (mais cette fois-ci avec vos donnes) ou alors linstaller directement.

Modification d'un thme


Si vous connaissez bien le XHTML, CSS et autre PHP, vous aurez probablement envie de faire quelques modifications dans le thme que vous utilisez. Ceux-ci tant tous ou presque en licence libre, vous avez tout fait le droit de les personnaliser comme bon vous semble. Veillez toutefois ne pas supprimer les crdits pour lauteur. Si vous souhaitez effectuer des modifications sur votre thme, vous avez deux possibilits: Utiliser un diteur de texte pour modifier les diffrents fichiers du thme. Utiliser lditeur de thme via linterface dadministration de votre blog (Apparence> diteur de thme). Cette page vous permet de modifier chacun des fichiers composant votre thme, mais aussi les autres thmes disponibles sur votre blog. Pour plus dinformations concernant la structure dun thme WordPress, reportez-vous au Chapitre5 de cet ouvrage, portant sur le dveloppement dun thme pour WordPress.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Choisir le thme et les extensions pour son blog

147

Utilisation des widgets


Dfinition Un widget est un petit module qui vient se placer dans la barre latrale de votre blog. Sur beaucoup de thmes, vous avez dj plusieurs blocs dans la barre latrale. Cependant, ce sont des morceaux de code insrs directement dans les fichiers PHP du thme. Les widgets, eux, sinstallent directement partir de linterface dadministration de WordPress. Prrequis Pour utiliser les widgets, votre thme doit tre pralablement paramtr pour les accueillir. Lorsque vous choisissez un thme, vrifiez bien quil est "widgetis". Si ce nest pas le cas, il vous faudra alors insrer du code dans certains des fichiers de votre thme pour lutiliser avec les widgets. Toutes les instructions pour rendre un thme "widgetisable" sont fournies au Chapitre5. Cette section vous apprendra galement ce quil faut regarder dans un thme pour savoir sil est widgetis ou pas. Installation Pour installer vos widgets, allez dans Apparence > Widgets. Sur la gauche, une srie de widgets apparaissent (voir Figure4.07).
Figure4.07
Widgets proposs par dfaut.

chaque ligne correspond un petit bloc qui, sil est ajout, viendra sinstaller dans votre barre latrale. Trouvez donc le widget qui vous intresse et cliquez sur le lien Ajouter. partir de l, ce widget va apparatre dans la colonne de droite intitule Widgets actuels. Sur la droite du widget, vous trouverez un lien Modifier qui vous donnera accs ses options (voir Figure4.08).

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

148

WordPress ct utilisateur
En effet, si certains installent une fonction simple sur le blog, dautres demandent un paramtrage de votre part.

Figure4.08
Options d'un widget.

Enregistrez les modifications et allez sur la page daccueil de votre blog pour voir le rsultat. Vous pouvez constater que le bloc que vous avez choisi apparat bien dans la colonne de droite, mais que les blocs prsents prcdemment ont disparu. En effet, sur la plupart des thmes WordPress, cest lensemble de la colonne latrale qui est widgetise. Ds quun widget est activ, le contenu qui nest pas widgetis disparat. Lun des avantages des widgets est de pouvoir grer le contenu de votre colonne latrale sans avoir besoin de toucher au code du thme. Et cet avantage prend toute son envergure avec la possibilit dintervertir les widgets. En effet, vous pouvez changer le positionnement de chacun de vos widgets actuels grce la technique drag and drop qui est utilise ici (voir Figure4.09). Il suffit de les saisir avec la souris, de les dplacer et de les positionner comme vous le souhaitez, les uns en dessous des autres.
Figure4.09
Le drag and drop des widgets.

Noubliez pas denregistrer les modifications pour que les changements soient pris en compte.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Choisir le thme et les extensions pour son blog

149

Utilisation et gestion des extensions


Comme nous lavons dit prcdemment, les extensions sont des petites applications qui vont venir se greffer votre blog pour lui apporter une fonctionnalit supplmentaire. Leur utilit est trs diverse et peut aller de lajout dun systme de statistiques la cration dun "sitemap" pour votre blog, en passant par des outils permettant de visualiser des vidos. Dans cette section, nous allons voir comment installer ces extensions, comment les mettre jour et lesquelles vous apparatront rapidement indispensables.

Installation
Installation partir de la base WordPress.org WordPress permet partir de la version2.7 dinstaller automatiquement des extensions en provenance de leur base de donnes, dont le site web est http://wordpress.org/extend/ plugins/. Depuis la page Extensions> Ajouter, vous avez accs toutes ces extensions et vous pourrez les installer directement partir de votre interface dadministration. Sur cette page, vous avez tout dabord toute une srie donglets qui vous permettent de naviguer sur la base et de trouver notamment les extensions les plus populaires, les dernires mises jour ou mises en ligne, ou encore celles qui font lobjet dune mise en avant (voir Figure4.10). Cest un progrs notable pour trouver ce quon cherche sans avoir besoin de parcourir le Web.
Figure4.10
Onglets de navigation sur la base des plugins de WordPress.org.

Vous pouvez galement faire une recherche sur cette base grce au formulaire qui permet de chercher par terme, auteur ou tiquette (voir Figure4.11).
Figure4.11
Formulaire de recherche de plugins.

Une fois que vous avez trouv lextension que vous souhaitez utiliser, il vous suffit de cliquer sur le lien Installer, droite dans la colonne Actions. Une nouvelle page souvre alors au premier plan et vous donne les dtails de lextension directement en provenance du site web de WordPress (voir Figure4.12).

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

150
Figure4.12

WordPress ct utilisateur

Dtails de l'extension.

Validez linstallation en cliquant sur le bouton Installer maintenant, situ en haut droite. La fentre se referme alors et WordPress procde linstallation de lextension. Vous pouvez suivre le processus dinstallation directement sur la page Extensions> Ajouter (voir Figure4.13).
Figure4.13
Installation d'une extension.

Lorsque lextension est installe, WordPress vous propose de lactiver pour quelle soit oprationnelle. Loutil vous propose galement daller sur la page des extensions sans activer lextension (vous pouvez toujours le faire directement partir de la page des extensions). Lextension est maintenant active, et vous pouvez lutiliser. Nhsitez pas aller sur la page du plugin sur le site http://wordpress.org/extend/plugins/ pour avoir plus dinformations ce sujet (voir Figure4.14). Certaines extensions exigent des paramtrages supplmentaires pour tre fonctionnelles.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Choisir le thme et les extensions pour son blog


Figure4.14
Informations concernant l'utilisation d'une extension sur WordPress.org.

151

Installation en tlchargeant une extension partir de l'interface d'administration Toujours sur la mme page Extensions> Ajouter, vous avez la possibilit de transfrer les fichiers dune extension depuis votre ordinateur directement dans le dossier ddi aux extensions sur votre hbergement. Il vous faut tout dabord aller dans longlet Envoyer, en haut de la page, puis cliquer sur le bouton Choisir le fichier et aller sur votre disque dur pour trouver le ou les fichiers de lextension que vous souhaitez installer. Une fois que vous avez trouv le fichier transfrer, cliquez sur le bouton Choisir de votre navigateur. Le fichier apparat alors sur la page Extensions> Ajouter et vous navez plus qu cliquer sur le bouton Installer maintenant (voir Figure4.15).
Figure4.15
Installation d'une extension partir d'un transfert de fichier.

Maintenant que lextension est installe, il vous suffit de cliquer sur le bouton Activer ou daller sur la page Extensions> Install pour activer votre extension. Pour cela, vous devez descendre en bas de la page dans la liste des extensions inactives et lactiver en cliquant sur le lien situ droite, sur la mme ligne.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

152

WordPress ct utilisateur
Installation en transfrant une extension via FTP Le processus est analogue linstallation en tlchargeant lextension partir de linterface dadministration, si ce nest quici vous allez transfrer les fichiers de lextension via votre logiciel FTP. Dposez ces fichiers dans le dossier wp-content> plugins et allez ensuite sur la page Extensions> Install. Comme pour les installations prcdentes, vous devrez cliquer sur Activer pour que lextension soit oprationnelle.

Mise jour des extensions


Les extensions voluent avec le temps et les diffrentes versions de WordPress. Il vous faudra donc les mettre jour rgulirement. Cependant, vous navez pas besoin de rechercher ces mises jour vous-mmes, elles vous seront proposes automatiquement. Les mises jour effectuer apparatront automatiquement au niveau du menu de navigation, au niveau de longlet Extensions. En allant sur la page Installes, les extensions qui devront tre mises jour seront accompagnes dun petit bloc de texte vous invitant mettre jour lextension de plusieurs manires possibles: Soit vous faites la mise jour automatiquement, auquel cas cela se passera de la mme manire que pour linstallation automatique dune extension via linterface dadministration. Soit vous tlchargez les fichiers et faites la mise jour comme une installation classique dune extension, la diffrence quici il faudra penser dsactiver lextension avant de la mettre jour et quil vous faudra tout simplement remplacer les fichiers existants sur votre hbergement pour mettre jour votre extension (pensez la ractiver par la suite).

Les extensions par dfaut


Par dfaut, WordPress propose deux extensions.

Akismet
Cette extension est srement lune des plus importantes pour votre blog. Cest elle qui va le protger du spam, le fameux "courrier" publicitaire poubelle. Sur un blog, le spam se manifeste souvent par le biais des commentaires. Si votre blog a du succs, vous pouvez en recevoir des centaines par jour, ce qui est impossible grer manuellement. Si linstallation dune extension reste trs simple, celle dAkismet est plus complexe. Vous allez devoir vous rendre sur un site pour obtenir une cl API qui vous permettra dutiliser loutil. Attention, Akismet est payant pour les entreprises.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Choisir le thme et les extensions pour son blog

153

Hello Dolly
Cest le premier plugin dvelopp pour WordPress. Malgr tout, celui-ci est dune utilit toute limite puisquil ne propose que des passages de la fameuse chanson de Louis Armstrong, en haut droite de chaque page de linterface dadministration de votre blog. Cependant, Hello Dolly est souvent utilis pour comprendre comment fonctionnent les extensions de WordPress. Nous nous en servirons comme modle dans la dernire partie de louvrage pour apprendre crer une extension.

Les indispensables
linstar des thmes, les plugins pour WordPress sont innombrables. Sur le site officiel de WordPress.org (http://wordpress.org/extend/plugins), ce ne sont pas moins de 2700plugins qui sont rfrencs. Et, dans tout a, il nest pas facile de faire son choix. Ci-aprs, vous trouverez une liste complte des extensions, qui, si elles ne sont pas obli gatoires, sont toutefois fortement recommandes. Google XML Sitemaps (http://www.arnebrachhold.de/projects/ wordpress-plugins/google-xml-sitemaps-generator/) Cette extension, bien quelle soit quelque peu technique, est trs importante si vous souhaitez indexer votre blog sur les moteurs de recherche. En effet, elle va crer ce quon appelle un "sitemap" ou plan du site en franais, qui sera utilis par Google et les autres moteurs de recherche pour indexer plus facilement les diffrentes pages de votre blog. WordPress Database Backup (http://www.ilfilosofo.com/blog/wp-dbbackup/) Tout comme votre ordinateur, votre blog a parfois besoin dune sauvegarde. Personne nest labri dune panne de serveur, et il y a donc toujours un risque de perdre des donnes. Grce cette extension, vous allez pouvoir crer ou planifier des sauvegardes de votre base de donnes facilement. Attention, ce genre doutil ne sauvegarde pas les fichiers de votre blog, mais uniquement ceux de la base de donnes. Cest vous de planifier rgulirement et manuellement une sauvegarde des fichiers de votre site. Subscribe to comments (http://txfx.net/code/wordpress/subscribe-tocomments/) Subscribe to comments permet lensemble des personnes qui laissent des commentaires sur votre blog de sabonner au fil de discussion de larticle quelles ont comment. En clair, la personne laisse un commentaire et peut sabonner pour recevoir un e-mail ds quun autre commentaire est post. Les blogs engendrent des discussions, dit-on souvent, et cette extension permet dtre tenu facilement au courant de ce qui se dit sur un article et dintervenir une nouvelle fois si besoin est.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

154

WordPress ct utilisateur
Simple Tags (http://wordpress.org/extend/plugins/simple-tags/) Cette extension va vous permettre de mieux grer lensemble de vos tags et de tirer profit de leur utilisation. Vous pourrez par exemple associer les tags de vos articles aux mots-clefs figurant dans len-tte de vos pages web. Vous pourrez galement crer un nuage de tags paramtrables pour votre blog. Le plugin comprend bien dautres options tout aussi intressantes. cforms II (http://www.deliciousdays.com/cforms-plugin) Il y a de grandes chances que des lecteurs veuillent vous contacter via votre blog. Une bonne solution pour rester "joignable" est de proposer un formulaire de contact. Ainsi, un peu comme pour un commentaire, la personne peut laisser son nom, son adresse e-mail, ainsi quun message. Similar Posts (http://rmarsh.com/plugins/similar-posts/) Cette extension propose les articles du blog comparables celui qui saffiche. Vous trouverez souvent cette rubrique appele Articles en relation sur de nombreux blogs (voir Figure4.16).

Figure4.16
Articles identiques.

Ce type dextension vous demandera dinsrer un bout de code dans un ou plusieurs des fichiers du thme que vous utilisez.

Ressources web pour trouver des extensions


Contrairement aux thmes, les ressources qui regroupent lensemble des extensions pour WordPress sont moins nombreuses. Cela dit, il existe tout de mme de trs bons sites qui vous permettront de trouver la perle rare. WordPress Plugin Directory (http://wordpress.org/extend/plugins) Cest la rfrence incontournable. Ce site regroupe lensemble des extensions qui existent pour WordPress. Si elle ne figure pas ici, il y a de grandes chances pour quelle ne soit plus

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Choisir le thme et les extensions pour son blog

155

maintenue ou quelle ne soit pas de grande qualit. Le systme de recherche et de notation est vraiment trs utile pour trouver la meilleure extension. Geekeries (http://www.geekeries.fr/) Ce site est une vraie mine dor pour trouver des extensions WordPress, dont une grande partie en franais. ne pas manquer. Lester Chan (http://lesterchan.net/portfolio/programming/php/) On compte beaucoup de dveloppeurs dextensions pour WordPress. Quelques-uns cependant sont trs connus pour avoir cr certaines des extensions les plus utilises. Cest le cas de Lester Chan qui a dj cr une quinzaine dextensions. Nhsitez pas aller sur son site, vous y trouverez srement une ou deux extensions intressantes pour votre blog. noter que, depuis le dbut de lanne 2010, Lester ne met plus jour ces extensions pour les nouvelles versions de WordPress. Quoi quil en soit, son "uvre" reste ce jour incontournable. Alex King (http://alexking.org/projects/wordpress) Alex King est lui aussi trs connu pour ses plugins WordPress. Un incontournable quil ne faut absolument pas manquer.

Gestion des menus


Comme chaque mise jour, la version 3 de WordPress apporte son lot de nouveauts. Parmi celles-ci, une des plus importantes est probablement la nouvelle gestion des menus. Jusqu prsent, pour crer un menu, il vous fallait crer des pages ou des catgories et mettre le bon code dans le thme pour voir apparatre lun ou lautre. Avec WordPress 3, vous avez la possibilit de choisir ce que vous voulez voir apparatre dans votre menu, et lordre dans lequel vous voulez voir apparatre ces diffrents lments. Il y a cependant une chose importante noter. Tous les thmes ne permettent pas dutiliser cette nouvelle fonctionnalit. En effet, il faut pour cela "autoriser" cette utilisation en ajoutant quelques lignes de code dans le thme que vous utilisez. Nous expliquons comment faire plus loin dans le livre, si vous souhaitez crer vous-mme votre thme. Dans le cas prsent, nous allons utiliser le thme par dfaut, Twenty Ten. Si vous allez sur la page de votre site, vous allez trouver un menu par dfaut directement sous limage de lentte. Ce menu affiche deux lments, Accueil et propos. En crant un nouveau menu, vous allez remplacer ces deux lments. Ce qui est intressant dans cette nouvelle gestion des menus, cest que vous pouvez choisir diffrents types de liens afficher dans votre menu. Crez par exemple un nouveau menu que vous allez appeler Navigation (voir Figure 4.17). Une fois ce menu cr, vous avez, dans la colonne de gauche, diffrentes informations qui vont vous permettre de paramtrer votre menu.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

156
Figure4.17

WordPress ct utilisateur

Cration d'un menu.

Tout dabord, vous avez la possibilit de crer plusieurs menus sur votre thme, condition, bien entendu, que celui-ci le permette. Mais il arrive frquemment de voir des thmes qui proposent un menu avec les pages du site et un autre avec les catgories du site. Ainsi, dans le premier bloc de la colonne de gauche, vous pouvez choisir lemplacement de votre menu. Ici, on utilise le thme par dfaut, il ny a donc quun seul emplacement, Navigation (voir Figure 4.18).
Figure4.18
Emplacement du menu.

En dessous, vous trouverez diffrents blocs qui vous permettront de dterminer chacun des lments de votre menu (voir Figure 4.19). Lien personnalis. Ici, vous pouvez choisir dinsrer un lien vers une page extrieure, quelle quelle soit. Page. Liez ici votre menu une ou plusieurs pages de votre blog. Catgories. Liez votre menu une ou plusieurs catgories de votre blog.
Figure4.19
Diffrentes possibilits pour amnager votre menu.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Choisir le thme et les extensions pour son blog

157

Ainsi, votre menu cr et mis jour, vous pourrez dcouvrir les nouveaux lments direc tement sur votre blog. Vous pouvez galement les modifier nimporte quel moment.

Utilisation spcifique du thme par dfaut, Twenty Ten


Lorsque vous ouvrez le menu Apparence et que vous utilisez le thme par dfaut, Twenty Ten, diffrents menus ddis son utilisation saffichent. Cest notamment le cas pour les sous-menus Background et Header. Ces sous-menus sont ddis Twenty Ten. Cela veut dire quils napparatront que si vous utilisez ce thme, et pas un autre.

Arrire-plan
Dans le sous-menu Arrire-plan, vous pouvez choisir larrire-plan de votre site. Cela peut tre soit une image, soit une couleur. Si vous avez une image que vous souhaiteriez utiliser comme fond, il vous suffit de charger sur votre site ce motif comme vous le propose WordPress (voir Figure 4.20).
Figure4.20
Possibilits d'affichage pour l'arrire-plan.

Une fois limage mise en ligne, elle apparat directement sur la page avec diffrents paramtres choisir (voir Figure4.21). Vous pouvez galement choisir de changer la couleur de fond la place de celle prsente par dfaut. Saisissez directement le code hexadcimal ou bien choisissez une couleur sur la palette qui vous est fournie en cliquant sur le lien.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

158
Figure4.21

WordPress ct utilisateur

Possibilits d'affichage pour une image en arrire-plan.

En-tte
Len-tte du thme Twenty Ten possde une image. Via le sous-menu En-tte, vous avez la possibilit de changer cette image. WordPress vous en propose quelques-unes mais vous pouvez galement charger une image personnelle directement sur votre blog (voir Figure 4.22).
Figure4.22
Onglet En-tte du thme Twenty Ten.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Partie
WordPress ct dveloppeur: concevoir un thme
5. Comprendre le fonctionnement de WordPress.................................. 161 6. Crer son propre thme de WordPress.............................................. 175 ....................................................... 241 7. Concevoir le design de son blog.

II

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Comprendre le fonctionnement d'un thme WordPress


Le thme est une partie incontournable de WordPress. Cest le thme qui donne son identit au blog, et cest la premire chose que voit le visiteur. Le thme habille le contenu du blog et prend en charge tous les aspects de mise en page et de design : polices, organisation, couleurs Dans ce chapitre ddi au dveloppement dun thme, vous apprendrez mieux connatre tous les aspects dun thme WordPress. Afin de ne pas sortir des sentiers battus, tous nos exemples de code seront bass sur le nouveau thme par dfaut de WordPress, nomm Twenty Ten, et qui se trouve dans le dossier /wp-content/themes/twentyten de votre installation de WordPress. Dans le chapitre suivant, vous partirez dune page blanche et concevrez de A Z un thme pour votre blog. Si vous tes press, vous pouvez passer directement ce chapitre.

Analyse de la structure d'un thme pour WordPress


Vous avez pu voir dans la partie prcdente que les thmes ont un dossier qui leur est propre au niveau de linstallation de WordPress: /wp-content/themes. Par dfaut, un thme est disponible: Twenty Ten. Dans le dossier du thme, on retrouve les diffrents fichiers lis au thme et nomms selon une convention prcise: la feuille de style du blog: style.css; les fichiers composant le thme, appels "fichiers de modle": index.php, comments. php, header.php, footer.php, single.php,etc.; un fichier pour les fonctions lies au thme, agissant comme une extension: functions. php. Le thme par dfaut, Twenty Ten, contient par ailleurs un sous-dossier, /images, o sont stockes toutes les images quil utilise, ainsi quun sous-dossier "languages". Chaque fichier joue un rle bien prcis, dans une hirarchie souple et cohrente.

La feuille de style
Le fichier style.css contient tous les aspects de mise en page du thme de votre blog, crit laide du langage CSS (Cascading Style Sheet). Cest ici que sont enregistrs notamment tous les choix relatifs lemplacement, la couleur et la typographie. Cest galement ce fichier qui contient les informations que WordPress affichera au sujet du thme: nom du thme, version, nom de lauteur

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

162

WordPress ct dveloppeur: concevoir un thme

Les fichiers de modle


Lappellation "fichiers de modle" (template files) regroupe tous les fichiers au format .php du thme, hormis les fichiers spciaux comme functions.php. Il existe deux types de fichiers de modle: Les fichiers qui vont composer le thme. Relis entre eux, ils vont crer et afficher la page web. Les fichiers qui vont afficher les diffrentes pages du blog. Seuls deux fichiers sont obligatoires pour quun thme puisse tre considr comme valide par WordPress: index.php pour le code PHP, et style.css pour la mise en forme du blog. Notez quil suffit que le fichier style.css soit absent ou mal format pour que WordPress ne prenne pas le thme en compte. Avec un thme qui nutiliserait que ces deux fichiers, le fichier index.php doit contenir lensemble des appels PHP qui rcuprent et agencent les informations, pour les afficher sur le blog en fonction des requtes du visiteur: en-tte, pied de page, textes, commentaires, colonne latrale, moteur de recherche Cependant, si vous souhaitez personnaliser votre thme, il est prfrable de le segmenter en diffrents fichiers qui correspondront notamment diffrentes parties du blog : header.php pour len-tte, footer.php pour le pied de page, sidebar.php pour la colonne Nous verrons trs bientt les diffrents noms de fichier possibles.

Le fichier functions.php
Ce fichier agit un peu comme une extension de WordPress et nest pas obligatoire. Grce ce fichier, vous pouvez prsenter diffrentes options et paramtres du thme lutilisateur via linterface dadministration de WordPress, sans pour autant faire des modifications directement dans le thme. Il est ainsi possible, avec un peu de travail et de prvoyance, de laisser lutilisateur choisir le nombre de colonnes, limage en haut du blog, la taille des textes,etc. Les possibilits sont infinies.

Le dossier images
Ce dossier contient toutes les images qui servent la prsentation de votre blog. Il nest pas obligatoire, mais partir de trois images, il est prfrable de les ranger dans un dossier part. Le nom de ce dossier nest pas non plus fix, et vous pouvez le baptiser votre gr: images, img, pix Notez bien que ce nest pas dans ce dossier que vous devez ranger les images que vous avez lintention dutiliser dans vos articles. En effet, si vous les insrez ici, elles disparatront le jour o vous changerez de thme.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Comprendre le fonctionnement d'un thme WordPress

163

Structure et convention de nomenclature


Ce ne sont l que quelques exemples de la structure "classique" que vous trouverez sur de nombreux thmes WordPress. Cette structure se prsente le plus souvent comme suit: header.php.Affiche les informations de len-tte du blog. index.php. Affiche le contenu du blog. sidebar.php. Affiche la colonne latrale du blog. footer.php. Affiche le pied de page du blog. Notez que trois fichiers ont t extraits du header.php de base, pour grer respectivement trois zones du thme indpendantes du contenu : len-tte, le pied de page et la colonne latrale. Voici un exemple dorganisation simple de la page daccueil dun blog WordPress utilisant le thme par dfaut(voir Figure5.01).
Figure5.01
Page d'accueil.

Lors de laffichage dun seul article du blog, WordPress fera appel aux fichiers suivants, lis entre eux par des appels PHP et les conventions de WordPress: single.php. Affiche le contenu de larticle. header.php. Affiche len-tte du blog. sidebar.php. Affiche la colonne latrale du blog. footer.php. Affiche le pied de page du blog. comments.php. Affiche les commentaires et le formulaire de commentaire.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

164

WordPress ct dveloppeur: concevoir un thme


En sparant le thme en plusieurs fichiers, chacun soccupant dune partie prcise de laffichage, on simplifie les fichiers, et leur dveloppement devient bien plus ais. Le fichier HTML final est construit laide dappel de mthodes PHP internes WordPress, qui assument le chargement des fichiers ncessaires selon leurs noms et la hirarchie existante, ce que nous verrons dans la section qui suit.

Figure5.02
Page de l'article avec mise en relief des commentaires.

Sur les autres types de pages, comme les pages de catgories, de labels (tags), darchives ou encore de recherche, nous avons une combinaison tournant autour de ces fichiers:

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Comprendre le fonctionnement d'un thme WordPress

165

index.php, category.php, 404.php ou search.php: fichiers de modle spcifiques un affichage; header.php; sidebar.php; footer.php. Le thme reprend gnralement la mme organisation que pour la page daccueil, mais il est galement possible de crer un fichier typique pour chacune de ces pages, comme category. php pour les pages de catgories.

Diffrents fichiers pour diffrentes pages


Nous venons de voir quil est prfrable de scinder une page web en diffrents fichiers et de les appeler par des fonctions PHP de WordPress. Nous avons galement abord la structure HTML de base qui sera utilise pour crer un thme WordPress. Celle-ci sera dployer sur les diffrents fichiers qui afficheront diffrents types de pages du blog. Il reste dfinir les fichiers que nous pouvons utiliser. Voici la liste complte des fichiers permettant de grer sparment des parties du blog: single.php. Pour afficher un article seul. page.php. Pour afficher une page seule (on peut galement utiliser pagename.php qui affichera directement le nom de la page). home.php. Pour afficher une page daccueil spcifique. tag.php. Pour afficher les pages de tags (on peut aussi employer tag-slug.php qui affichera les articles correspondant un tag en ayant son nom directement dans lURL sous la forme "tag-wordpress.php" par exemple, avec ici "wordpress" comme nom de tag). archive.php. Pour afficher les archives (par catgorie, par label, par auteur,etc.). category.php. Pour afficher une catgorie seule. Il peut tre utilis sous une dclinaison encore plus prcise, category-X.php, pour grer laffichage des articles de la catgorie dont le numro didentifiant estX (par exemple, category-7-.php). search.php. Pour afficher les rsultats dune recherche. 404.php. Pour afficher la page derreur, quand un article nest pas disponible par exemple (ce quon appelle une erreur404). [nom de la page].php. Pour afficher une page prcise, partir de son permalien. Par exemple, si nous voulons un affichage spcifique pour la page propos, nous utiliserons a-propos.php. author.php. Pour afficher une page prsentant les donnes lies un auteur en particulier (articles, pages, liens, autres informations). date.php. Pour afficher les articles par date prcise (anne, mois ou jour).

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

166

WordPress ct dveloppeur: concevoir un thme


image.php, video.php, audio.php et application.php. Pour afficher les pages correspondant ces diffrents types de mdias qui ont leur propre URL. En crant un marqueur de modle particulier, vous pourrez gnrer des pages spcifiques pour chacun deux.

Hirarchie des diffrents types de pages


Les noms de fichiers prsents ci-dessus servent pour afficher les diffrentes vues disponibles du blog, sans tre pour autant obligatoires. En effet, les modles de WordPress fonctionnent autour dune hirarchie prcise, et si un fichier nexiste pas dans le thme, WordPress ira chercher le fichier suprieur dans cette hirarchie pour afficher le contenu. La Figure5.03 reprsente lorganigramme de hirarchie des modles dans WordPress.
Figure5.03
Hirarchie des modles.
is_date() is_category() is_tag() is_author() is_home() is_page()

date.php category-id.php tag-slug.php author.php home.php pagename.php

if not exist if not exist if not exist if not exist if not exist if not exist

category.php
if not exist

archive.php
is_archive()

tag.php

page.php

if not exist

What Page ?
is_search() is_404()

index.php search.php 404.php image.php vido.php audio.php application.php attachment.php


is_attachment() if not exist if not exist

if not exist

single.php
is_single()

Prenons un exemple pour illustrer la logique de cette hirarchie. Un visiteur passe sur un blog et clique sur le lien pour voir tous les articles de lanne2008. Cette URL a la forme suivante: http://www.monblog.com/2008. Si nous reprenons les rgles de nommage des fichiers cites ci-dessus, la page devrait safficher laide du fichier date.php. Or le thme employ ne dispose pas dun fichier de ce nom. En utilisant la hirarchie des modles, nous pouvons voir que dans ce cas WordPress ira trouver le fichier archive.php pour afficher les articles de lanne2008. Et sil nexiste pas non plus, il remontera jusquau fichier index.php qui, lui, est obligatoire. Il en est de mme pour lensemble des fichiers prsents plus haut. Ils suivent une hirarchie qui permettra toujours dafficher une page web avec le contenu demand, mais peut-tre pas sous une forme aussi affine que si le thme avait t cr avec chaque fichier propre chaque vue du blog.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Comprendre le fonctionnement d'un thme WordPress

167

Les fichiers propres chaque thme


Les fichiers qui composent cette hirarchie sont les seuls que vous pouvez utiliser pour afficher les pages du blog. Vous ne devez pas en crer dautres, ils ne seraient pas reconnus automatiquement par WordPress. Par contre, pour les fichiers qui vont composer les diffrentes parties de ces pages, il en va tout autrement. Vous pouvez trs bien crer un fichier spcifique pour une partie prcise de votre blog, par exemple intgrer le fichier pubs.php dans une partie de la colonne latrale pubs.php, afin de grer votre publicit part. Pour le thme Twenty Ten, il existe plusieurs autres fichiers qui lui sont spcifiques et qui ont tous une fonction particulire. loop.php. Pour le thme Twenty Ten, les dveloppeurs ont dcid de sparer la boucle WordPress pour la mettre dans un fichier spar. La boucle est ce qui permet dafficher les articles du site en fonction de la requte que vous aurez faite. Nous y reviendrons dans le dtail plus loin dans le chapitre. one-column-page.php. Ce fichier a t cr dans le cas o vous souhaiteriez avoir un site sans colonne latrale. sidebar-footer.php. Ce fichier correspond la zone widgetise qui est dans le pied de page du site. editor-style.css. Cette feuille de style est celle utilise pour lditeur TinyMCS, que vous trouvez sur les pages de cration dun article ou dune page. editor-style-rtl.css et rtl.css. Feuilles de style utilises pour les langues qui se lisent de droite gauche, comme larabe ou lhbreu.

Structure HTML d'un thme WordPress


Maintenant que nous avons vu les diffrents fichiers possibles et lutilit de chacun, il est temps de nous plonger dans le contenu de ces fichiers. Celui-ci mlange balises HTML (ou plutt XHTML pour les puristes) et code PHP pour grer les appels aux fonctions de WordPress, la mise en place de conditions et de boucles, bref tout ce qui au final gnrera un fichier HTML avec toutes les donnes voulues par le visiteur. Il est donc prfrable que vous connaissiez dj les langages XHTML et CSS avant daller plus loin Le PHP serait un plus, bien que vous puissiez trs bien comprendre le fonctionnement dun thme WordPress sans pour autant avoir de notions en PHP. Voyons donc ce que va donner le dcoupage dun thme au niveau HTML. Nous allons prendre ici un exemple simple, qui permettra de bien comprendre larchitecture dun thme WordPress. Nous partons avec un thme dont la structure est axe autour de quatre parties: len-tte, le contenu, la colonne latrale et le pied de page. Pour cet exemple, nous allons limiter les fichiers au strict minimum: index.php et style.css.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

168

WordPress ct dveloppeur: concevoir un thme


La structure HTML fondamentale du fichier index.php va donc donner:
<body> <div id="page"> <div id="header"></div> <div id="content"></div> <div id="sidebar"></div> <div id="footer"></div> </div><!-- end page --> </body>

Notez que nous ne mentionnons ici que le contenu de la balise <body>. Pour un thme complet, il faudra bien entendu indiquer le doctype, la balise <html>, les mtadonnes,etc.: tout ce qui fait un fichier XHTML valide. Dans ces diffrentes balises viennent sintgrer les fameux "template tags" de WordPress, ces marqueurs de modle qui se chargeront dappeler les fichiers concerns pour les afficher, selon la hirarchie tablie:
<body> <div id="page"> <div id="header"><?php get_header();?></div> <div id="content"></div> <div id="sidebar"><?php get_sidebar();?></div> <div id="footer"><?php get_footer();?></div> </div><!-- end page --> </body>

Ce schma sera rpter sur les diffrents fichiers qui afficheront le blog, tels que les pages darticles, de catgories, de tags,etc.

Prsentation des marqueurs de modle


Nous avons abord cette notion de template tags plusieurs fois auparavant. Les template tags sont traduits en franais par "marqueurs de modle", "balises de gabarit", "balises de modle" ou "tiquettes des fichiers du blog". Dans les faits, ces marqueurs sont de courtes fonctions PHP qui vont appeler dautres fichiers lendroit o ils ont t insrs, ou charger du contenu. Ils sont extrmement utiles et trs nombreux sur WordPress. Vous en trouverez une liste complte cette adresse : http:// codex.wordpress.org/Template_Tags. Ces fonctions PHP ont t cres spcialement pour faciliter le fonctionnement et le paramtrage dun thme. Cest l une des forces de WordPress, qui en fait la plate-forme de blogs prfre des designers et des dveloppeurs. Par exemple, le marqueur get_header() appelle simplement le fichier header.php et inclut son contenu tel quel dans le code HTML du fichier. Cest un marqueur trs facile retenir et manipuler, et il en existe de nombreux autres qui facilitent la vie du crateur de thmes de la mme manire. En ce qui concerne les fichiers propres au thme, dont nous avons parl un peu plus haut, il nest pas possible dutiliser de marqueurs prdfinis par WordPress, tant donn que ce

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Comprendre le fonctionnement d'un thme WordPress

169

fichier nest pas prvu par dfaut. Cest pourquoi les dveloppeurs de WordPress ont cr une constante PHP qui vous permettra dappeler nimporte quel fichier qui ne peut pas tre appel par un marqueur "classique", sans devoir prciser lURL absolue du fichier, ni craindre dutiliser une URL relative qui ne fonctionnerait pas dans certains cas:
<?php include(TEMPLATEPATH . '/nomdufichier.php');?>

TEMPLATEPATH est une constante qui correspond au dossier du thme, grce laquelle la fonction include() de PHP peut chercher le fichier "nomdufichier.php". De cette faon, le

contenu de ce fichier saffichera l o vous avez insr ce bout de code, de la mme manire que sil sagissait dun vrai marqueur de modle.

Le contenu dans la page web


Nous avons vu quels types de fichiers utiliser pour crer une page web. Il est galement important de comprendre le contenu de chacun de ces fichiers. Dans la section qui suit, nous allons prendre un exemple simple, la page daccueil du thmeKubrick, ancien thme par dfaut de WordPress, en prsenter chacune des parties, et voir quelles informations saffichent et quels marqueurs de modle elles utilisent.

L'en-tte (header.php)
Len-tte dun blog WordPress comprend toutes les informations utiles et ncessaires au navigateur pour afficher votre blog. Ces informations sont obligatoires pour toute page web et sont comprises dans la balise <head>. Nous nous intressons ici au contenu de len-tte, donc ce qui va tre utilis par le navigateur. En regardant len-tte du thme Twenty Ten tel quil saffiche dans le navigateur (voir Figure5.04), trois informations lies au blog ressortent: le titre du blog, sa description et le menu de navigation. Pour ce qui est du titre et de sa description, les deux informations sont cres automatiquement par un seul marqueur, grce deux de ses variantes.
Figure5.04
En-tte default avec les template tags.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

170

WordPress ct dveloppeur: concevoir un thme


Le titre du blog utilise le template tag <?php bloginfo('name');?>. WordPress va chercher dans les informations du blog (bloginfo) le nom de celui-ci (name). Dans le mme esprit, la description, quant elle, utilisera le mme marqueur de modle, mais ira chercher la description du blog: <?php bloginfo('description');?>. Ces informations sont contenues dans la base de donnes, et ce marqueur est appel de nombreuses fois sous diffrentes variantes depuis le fichier header.php. Pour que ces informations soient lisibles par le visiteur, les deux variantes dcrites ci-dessus sont appeles dans le <body> du fichier. Pour ce qui est du menu de navigation, dont nous avons dj parl au chapitre prcdent, cest le template tag <?php wp_nav_menu (); > qui sera utilis.

La colonne latrale (sidebar.php)


Le nombre dinformations affiches par dfaut dans la colonne latrale peut tre plus grand. On y trouve notamment un formulaire de recherche, les archives et les informations mta. Chacune de ces informations ou listes saffiche par le biais dun marqueur de modle. Noubliez pas ici que ces informations disparatront ds que vous utiliserez les widgets. Le thme Twenty Ten est widgetis mais affichera les informations dont nous venons de parler tant quaucun widget ne sera activ. Voici donc une image reprenant la structure de la colonne latrale du thme default avec les diffrents marqueurs utiliss (voir Figure5.05).
Figure5.05
Sidebar + template tags.

Le pied de page (footer.php)


Le pied de page est gnralement utilis pour indiquer le nom du crateur du thme et renvoyer vers le site officiel de WordPress.
Figure5.06
Footer + template tags.

Le thme utilise nouveau le marqueur bloginfo() pour aller chercher le titre du blog ('name'). Le reste des informations est gnr sans lutilisation de marqueurs. Si vous souhaitez en modifier le contenu, il faudra le faire directement depuis le fichier footer.php.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Comprendre le fonctionnement d'un thme WordPress

171

Spcificit de la page d'article


Le fichier qui affiche un unique article du blog va suivre la mme organisation. Cependant, il y a une grande diffrence par rapport la page daccueil: elle va afficher les commentaires lis larticle. Pour cela, nous allons utiliser un fichier spar, appel comments.php. Ce fichier nappartenant pas la hirarchie WordPress, nous devons lappeler partir dun fichier qui en fait partie, en loccurrence single.php. Si comments.php ne fait pas partie de la hirarchie, WordPress dispose tout de mme dun marqueur spcifique pour lappeler: comments_template(). Celui-ci se charge de rcuprer le fichier nomm comments.php et de linclure dans le fichier courant. Dans le fichier single.php, on appellera ce marqueur de la mme manire quune fonction PHP:
<?php comments_template();?>

Ce marqueur spcifique peut sappliquer pour les pages statiques du blog, dans le cas o on souhaiterait y afficher des commentaires.

La boucle WordPress
Nous venons dvoquer tous les fichiers qui vont pouvoir afficher les diffrentes parties du blog, sans toutefois aborder le contenu. Celui-ci est pourtant llment central du blog: il va se retrouver sur chaque page du blog. Ce contenu est charg et mis en place par ce quon appelle la boucle WordPress the loop en anglais. Cette boucle met en place les conditions pour afficher les articles en fonction des requtes du visiteur. Elle dcide quoi afficher et comment lafficher pour une URL donne. La Figure5.07 reprend tout ce qui se trouve entre ces deux lignes et qui explique succinctement comment fonctionne la boucle WordPress.
Figure5.07
Exemple de boucle WordPress.
Fonctionnement de la boucle WordPress
<?php if (have_posts()) : ?> (Est-ce quil y a des articles afficher ? - Ouverture de la boucle WordPress) <?php while (have_posts()) : the_post(); ?> (dans le cas o il y en a, on les affiche...)
<div class="post" id="post-<?php the_ID(); ?>"> <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Lien permanent vers <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <small><?php the_time('j F Y') ?> <!-- par <?php the_author() ?> --></small> <div class="entry"> <?php the_excerpt('Lire le reste de cet article &raquo;'); ?> </div> <p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Publi dans <?php the_category(', ') ?> | <?php edit_post_link('Modifier', '', ' | '); ?> <?php comments_popup_link('Aucun commentaire ', '1 commentaire ', '% commentaires ', 'comments-link', 'Les commentaires sont ferms'); ?></p> </div>

<?php endwhile; ?> (On ferme laffichage des articles...) <?php else : ?> (sil n y a pas darticle afficher...)

<h2 class="center">Introuvable</h2> <p class="center">Dsol, mais vous cherchez quelque chose qui ne se trouve pas ici .</p> <?php include (TEMPLATEPATH . "/searchform.php"); ?>

<?php endif; ?>(fermeture de la boucle WordPress)

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

172

WordPress ct dveloppeur: concevoir un thme


Dun point de vue pratique, tout se passe de la manire suivante: 1. Le visiteur cre une requte sur le blog. Cette requte peut tre aussi simple que laffichage de la page daccueil (la boucle affiche simplement les derniers articles) ou aussi complexe que lutilisation du formulaire de recherche (la boucle doit afficher les articles contenant les mots saisis). 2. Une fois la requte lance, la boucle vrifie sil y a des articles afficher (<?php if (have_posts()):?>). Si oui, WordPress doit afficher ces articles un un laide du code prcis (<?php while (have_posts()):the_post(); ?>). Une fois le nombre darticles voulu a ffich, la boucle principale se termine (<?php endwhile;?>). Si non (<?php else:?>), WordPress doit en informer le visiteur avec un message et idalement un moteur de recherche. 3. Lorsque tous ces traitements ont abouti, la boucle se termine (<?php endif;?>). Voyons maintenant dans le dtail ce que va afficher WordPress, et surtout comment il va lafficher. Nous allons prendre ligne par ligne et dtailler le contenu de la boucle:
<div class="post" id="post-<?php the_ID();?>">

Ds le dpart, il va personnaliser chaque article affich sparment grce au tag the_ID, qui renvoie le numro unique de larticle. Cela peut tre trs utile dans le cas o vous souhaiteriez donner un style particulier certains articles prcis.
<h2><a href="<?php the_permalink();?>" rel="bookmark" title="Lien permanent vers <?php the_title_attribute();?>"><?php the_title();?></a></h2>

La balise <h2> signifie quil va y avoir un titre ici. Ce titre saffiche au sein dun lien unique, celui de larticle. Pour ce faire, WordPress utilise trois marqueurs: the_permalink() pour obtenir lURL unique de larticle; the_title() pour obtenir le titre de larticle; the_title_attribute() pour obtenir le titre de larticle, sous une forme "nettoye" et donc approprie, au sein de lattribut title de la balise.
<small><?php the_time('j F Y');?> <!-- by <?php the_author();?> --></small>

En dessous du titre, on retrouve quelques informations, appeles "mtadonnes de larticle". Elles affichent notamment la date et lauteur par le biais de deux marqueurs: the_time() pour obtenir la date, selon le format de la fonction date() de PHP; the_author() pour obtenir le nom public de lauteur de larticle affich.
<?php the_content('Lire le reste de l'article &raquo;');?>

Ensuite, le contenu mme de larticle saffiche. Il est possible dutiliser deux marqueurs: the_content() pour obtenir larticle en entier ou jusqu la balise [more] de larticle. Cest le choix dans notre exemple. the_excerpt() pour obtenir une partie de larticle : soit lextrait tel quil est dfini explicitement par le blogueur, soit les 55premiers mots de larticle. La balise [more] na pas dinfluence ici.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Comprendre le fonctionnement d'un thme WordPress

173

Le marqueur the_content() peut par ailleurs recevoir en argument la phrase afficher dans le cas o larticle contient une balise [more]. Dans notre exemple, le message "Lire le reste de larticle" apparatra sur la page et invitera le lecteur lire le reste en cliquant sur le permalien de larticle.
<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />');?> Publi dans <?php the_category(', ');?> | <?php edit_post_link('Modifier', '', ' | ');?> <?php comments_popup_link('Aucun commentaire"', '1 commentaire"', '% commentaires"', 'comments-link', 'Les commentaires sont ferms');?></p>

Enfin, on affiche le reste des mtadonnes de larticle, chacune avec un marqueur ddi: the_tags() pour obtenir les labels donns larticle. the_category() pour obtenir les catgories o larticle a t plac. edit_post_link() pour afficher un lien permettant de modifier larticle. Ce lien nest visible qu une personne habilite modifier les articles du blog. comments_popup_link() pour afficher un lien vers les commentaires (donc, dans les faits, un lien vers larticle lui-mme). Ces marqueurs, on le voit, peuvent recevoir des paramtres. Les voici, par ordre dapparition: the_tags('Tags: ', ', ', '<br />'): texte afficher avant les labels; sparateur placer entre chaque label; texte afficher aprs les labels. the_category(', '): sparateur placer entre chaque catgorie. edit_post_link('Modifier', '', ' | '): texte du lien; texte afficher avant le lien; texte afficher aprs le lien. comments_popup_link('Aucun commentaire"', '1 commentaire"', '% commentaires"', 'comments-link', 'Les commentaires sont ferms'): chacun des trois premiers paramtres correspond un tat des commentaires de larticle et permet donc de prciser la phrase afficher; le quatrime permet de prciser la classe CSS appliquer au lien; le cinquime et dernier paramtre correspond galement un tat des commentaires et donc la phrase afficher. Ci-aprs, un exemple de ce que vous allez obtenir comme rsultat visuel avec les informations que nous venons de voir (voir Figure5.08).
Figure5.08
Article de la page d'accueil default.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Crer son propre thme WordPress


Dans ce chapitre, vous allez raliser un thme de A Z. Vous suivrez un processus de cration simple, qui va du croquis au thme final en passant par diffrentes tapes, telles que la conception des fichiers ncessaires, la ralisation dune premire maquette et son intgration. Pour pouvoir suivre et comprendre les diffrentes tapes de cration dun thme, il vous faudra tout de mme quelques connaissances techniques, notamment en HTML, PHP et CSS. Le thme ralis ici restera trs simple, mais vous permettra de bien comprendre larchitecture gnrale du systme de thme, et vous aidera mettre votre crativit au service de WordPress. La cration du thme se passera en trois grandes tapes: 1. Vous allez crer les diffrents fichiers du thme qui vont permettre dafficher le contenu. Il sagira ici de mettre en pratique tout ce qui a t vu au chapitre prcdent et de crer ces diffrents fichiers par vous-mme. 2. Ensuite, vous passerez une partie plus crative avec la ralisation dun croquis et dune premire maquette pour avoir un aperu visuel de votre thme. 3. Enfin, vous raliserez lintgration de votre thme et ferez les derniers rglages pour mettre le tout en ligne!

Pourquoi crer son propre thme?


Avant dentrer dans le vif du sujet et passer de longues heures crer ce thme, il est important de rpondre cette question: pourquoi vouloir crer un thme pour WordPress? En effet, il existe dj beaucoup de thmes, un grand nombre tant de trs bonne qualit. Qui plus est, sils ne vous conviennent pas entirement, vous avez toujours la possibilit de les modifier. Crer un thme de A Z demande beaucoup de temps et surtout des notions t echniques en PHP, HTML et CSS. Cela dit, avoir votre propre thme, que vous aurez conu partir de rien, peut prsenter de nombreux avantages. Dun point de vue technique: Vous concevez entirement le thme. Vous connaissez donc chaque ligne de code et chaque style utilis. Vous pouvez modifier, mettre jour progressivement, ou encore optimiser votre thme. Cela reprsente un gain de temps considrable par rapport un thme conu par quelquun dautre. Vous pouvez le crer selon vos propres mthodes. Vous saurez rpondre aux problmes plus rapidement. Dun point de vue esthtique:

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

176

WordPress ct dveloppeur: concevoir un thme


Vous concevez votre propre design; vous aurez donc un thme unique plutt quun blog qui ressemble tant dautres. Vous disposez des fichiers originaux des images; vous serez donc plus facilement en mesure de modifier tous les aspects graphiques comme bon vous semble, ce qui nest pas toujours le cas avec les thmes utilisant des images. Plus prosaquement, crer un thme peut tre galement un trs bon outil de communication! Si vous tes graphiste ou webdesigner et si vous souhaitez amliorer votre visibilit sur le Web, voire simplement faire parler de vous, crer et diffuser un thme pour WordPress peut tre une trs bonne vitrine pour votre activit. Enfin, cest un excellent exercice pour mieux comprendre le fonctionnement de WordPress et se familiariser avec les langages quil utilise.

Cration de la structure de base


Dans cette premire partie, nous allons crer lensemble des fichiers qui vont composer votre thme. Nous explorerons ici la structure de base: si votre thme sera bien "utilisable" la fin de cette premire partie, il ne disposera pas cependant de graphiques ou de mise en page, car nous nabordons pas encore la feuille de style.

Installer WordPress en local sur votre ordinateur


Pour raliser votre thme, il vous faut une structure de test, ne serait-ce que pour pouvoir apprcier directement lvolution de votre travail sans pour autant devoir lutiliser sur votre blog public. Deux solutions sont possibles: installer une seconde instance de WordPress sur votre hbergement, qui vous servira de blog de test pour tous vos dveloppements personnels, ou installer WordPress en local, sur votre ordinateur. Cette seconde solution a normment davantages, comme la possibilit de travailler sur votre thme sans avoir besoin dtre connect Internet, cest--dire sans devoir faire des allers-retours incessants entre votre diteur pour lcriture du code, votre client FTP pour la mise en ligne des fichiers modifis, et votre navigateur pour vrifier limpact de vos modifications sur le thme. Avec un serveur local, vous pourrez tout tester simplement en pointant votre navigateur vers un dossier de votre ordinateur, et une fois que le thme sera conu et prt tre mis en ligne, vous naurez qu transfrer son dossier sur votre hbergement. Installer WordPress localement ne se fait pas automatiquement : il faut utiliser ce quon appelle un package xAMP. Ce sigle fait rfrence aux trois serveurs ncessaires pour faire fonctionner un site dynamique: Apache pour le serveur web, MySQL pour le serveur de base de donnes, et PHP pour le langage de script. Le "x" est gnralement remplac par le systme dexploitation vis: LAMP pour Linux, WAMP pour Windows, et MAMP pour OSX (Macintosh). Un package xAMP facilite grandement la mise en place dun serveur web local fonctionnel, et cest la solution que nous vous prsentons ici.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Crer son propre thme WordPress

177

Deux des logiciels les plus connus sont XAMPP, qui existe pour plusieurs plates-formes (et peut fonctionner avec Perl, do le second "P"), et MAMP, qui lui ne fonctionne que sur OS X. Ils sont tlchargeables respectivement aux adresses suivantes : http://www. apachefriends.org/fr/xampp.html et http://www.mamp.info/en/index.php. Deux autres packages trs utiliss sont WampServer/WAMP5 et lanctre EasyPHP, tous deux franais. Tous ces packages sont gratuits.

Installer XAMPP sur Windows


Linstallation de XAMPP suit un cheminement trs simple: 1. Tlchargez le package XAMPP pour Windows depuis le site de XAMPP (voir Figure6.01). Prenez soin de choisir celui qui est marqu "Installer" plutt que "ZIP" ou "EXE".
Figure6.01
Tlchargement de XAMPP .

2. Une fois le fichier tlcharg, excutez-le pour lancer le programme dinstallation. 3. Validez les diffrentes fentres, et les fichiers sinstallent. la fin, une fentre DOS saffiche, afin de configurer les serveurs pour votre machine, et linstallation est termine. Au moment de quitter linstallateur, celui-ci vous propose de lancer le panneau de contrle de XAMPP, ce que vous pouvez faire (voir Figure6.02).
Figure6.02
Lancement du panneau de contrle de XAMPP .

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

178

WordPress ct dveloppeur: concevoir un thme


Une fois que tout est install, il reste configurer les serveurs et apprendre dmarrer et stopper. Tout ceci saccomplit depuis le panneau de contrle. 1. Lancez le panneau de contrle. Si linstallateur na pas plac dicne sur votre Bureau, vous devez ouvrir le dossier o XAMPP a t install (par dfaut, C:\xampp) et doublecliquer sur licne xampp-control.exe (voir Figure6.03).

Figure6.03
xampp-control.exe.

2. Dans ce panneau, chaque serveur dispose dun bouton Start/Stop. Activez les serveurs Apache et MySQL sils ne le sont pas dj. Il est fort probable que lors du premier dmarrage du serveur Apache, le systme de scurit de Windows affiche une alerte vous demandant sil faut bloquer le programme Apache HTTP Server. Ici cliquez sur le bouton Dbloquer (voir Figure6.04).
Figure6.04
Dblocage de XAMPP .

3. Ouvrez votre navigateur Internet et saisissez ladresse http://localhost/, ou cliquez simplement sur le bouton Admin du serveur Apache depuis le panneau de contrle. Ladresse "localhost" est celle du serveur qui vient dtre install sur votre ordinateur.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Crer son propre thme WordPress

179

Sur cette page, vous devez choisir une langue. Une fois que cest fait, le site souvre avec linterface dadministration de XAMPP (voir Figure6.05).
Figure6.05
Interface d'administration de XAMPP .

Ds lors, vous pouvez commencer exploiter le serveur web, en plaant les fichiers HTML, PHP et CSS dans un sous-dossier ddi votre site, plac dans le C:\xampp\htdocs. Par exemple, pour installer un blog WordPress de test, vous pourriez placer les fichiers dans C:\ xampp\htdocs\wptest (voir Figure6.06).
Figure6.06
Dossier blog sur XAMPP .

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

180

WordPress ct dveloppeur: concevoir un thme

Installer MAMP sur MacOSX


1. Tlchargez MAMP et installez-le dans votre dossier dapplications. 2. Cliquez sur licne de lapplication MAMP pour dmarrer automatiquement les serveurs Apache et MySQL et ouvrir par l mme lapplication (voir Figure6.07).
Figure6.07
Ouvrir MAMP .

3. Sur la fentre de lapplication, cliquez sur le bouton Ouvrir la page daccueil qui va ouvrir automatiquement une fentre dans votre navigateur. Cest celle de linterface dadministration de MAMP (voir Figure6.08).
Figure6.08
Interface d'administration de MAMP .

Ensuite, le fonctionnement est le mme que pour XAMPP. Vous placerez vos fichiers HTML, PHP et CSS dans un dossier rang directement sous MAMP/htdocs.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Crer son propre thme WordPress

181

Cration de la base de donnes locale de WordPress


Avant dinstaller WordPress, vous devez crer une base de donnes dans laquelle se placeront les tables qui contiendront les donnes du blog. Quel que soit le logiciel que vous utilisez, vous avez accs au phpMyAdmin via linterface dadministration. Vous allez donc cliquer sur le lien vers phpMyAdmin, et de l crer votre base de donnes: 1. Trouvez la ligne Crer une base de donnes, en gras dans la section droite de linterface. En dessous de cette ligne, dans le champ libre, crivez "wordpress", qui sera le nom de la base de donnes de votre installation en local. 2. Cliquez sur le bouton Crer sans vous soucier du menu Interclassement. Votre base de test va alors tre liste dans la colonne de gauche. Quittez phpMyAdmin: votre base de donnes est maintenant cre.

Installation de WordPress en local


Commencez par tlcharger la dernire version de WordPress depuis WordPress Francophone (www.wordpress-fr.net) et placez-la directement dans le dossier htdocs de lappli cation (xampplite/htdocs ou MAMP/htdocs). La procdure dinstallation sera la mme que sur un hbergement en ligne, si ce nest que les donnes de connexion la base de donnes seront adaptes une installation locale. Celles-ci vous sont fournies sur linterface dadministration de XAMPP ou de MAMP. Elles seront quasi identiques: Nom de la base: wordpress. Nom de lutilisateur: root. Mot de passe: root pour MAMP; ne saisissez rien pour XAMPP, lespace doit rester vide. Nom de lhte: localhost. Pour lancer le script dinstallation, entrez ladresse locale du fichier. Si vous avez choisi de placer les fichiers dans le /htdocs/wordpress, vous pourrez lancer WordPress en tapant http://localhost/wordpress dans votre navigateur. Vous serez alors directement redirig vers la page dinstallation de WordPress, o vous utiliserez la mme procdure que pour un blog en ligne (voir Chapitre2). Une fois install, votre blog de test sera visible cette mme adresse. Vous allez maintenant pouvoir faire tous les tests que vous voulez sur cette installation en local, sans avoir besoin dtre connect Internet, et sans que ce blog soit visible en ligne.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

182

WordPress ct dveloppeur: concevoir un thme

Alimenter votre base de donnes


Tout au long de cette section, vous allez tester continuellement votre thme. Il est donc important dalimenter votre blog de test ds le dpart avec quelques articles et une ou deux pages statiques. Par dfaut, WordPress installe un article et une page dexemple, mais nous vous recommandons den crer plusieurs, avec des catgories, des images, des sous-pages, des tags Bref, faites en sorte que ce blog soit plus vrai que nature, afin de ne pas tre pris par surprise quand votre thme sera utilis "pour de vrai". Le contenu na aucune importance ici, vous pouvez donc utiliser des variantes du clbre faux texte "Lorem Ipsum". Celui-ci, par son manque de valeur smantique combin sa grande ressemblance un texte normal, est utilis depuis longtemps pour construire des mises en page sans pour autant avoir le texte dfinitif sous la main. Vous trouverez une explication plus dtaille, ainsi quun trs utile gnrateur automatique, sur le site http:// fr.lipsum.com/. Il existe sur Internet des extensions ou des fichiers qui vous permettent de remplir une base dessai pour votre blog. Cest le cas notamment dun fichier XML fourni par WPCandy (http://wpcandy.com/articles/easier-theme-development-with-the-sample-post-collection.html). Pour installer le fichier, il vous faut aller dans le menu Outils > Importer et choisir loption WordPress, qui vous permet dimporter des articles, commentaires et autres lments sur votre blog. Une fois le fichier import, retournez sur la page daccueil de votre blog, vous allez dcouvrir toute une srie de nouveaux articles, avec des catgories, commentaires, et jen passe. Lavantage de ce contenu "bidon" est quil va vous permettre de tester votre thme dans toutes les conditions possibles. Vous allez trouver des articles avec des listes, ordonnes et non ordonnes, des images cales gauche, dautres droite. Bref, tout ce quil vous faut pour tester votre thme.

Cration des fichiers du blog, les "fichiers de modle"


partir de maintenant, nous partons du principe que vous disposez dun blog WordPress de test, quil soit en ligne ou en local. Nous allons pouvoir nous consacrer la cration du thme. Nous avons vu au chapitre prcdent comment tait structur un thme WordPress. Ici, nous allons passer directement sa ralisation.

Cration du dossier du thme


Vous allez commencer par crer le dossier qui va hberger les diffrents fichiers de votre blog. Pour cela, allez dans le dossier themes de votre installation (/htdocs/wordpress/wpcontent/themes) et crez-y un nouveau dossier, que vous appellerez creation_theme (voir Figure6.09).

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Crer son propre thme WordPress


Figure6.09
Cration du dossier de thme.

183

Cration des premiers fichiers du thme


Vous allez ensuite crer les diffrents fichiers de "base" que va contenir votre thme. Nous avons vu prcdemment que le fichier de base tait index.php. Mais ici, nous allons sparer les diffrentes parties en une organisation logique et donc crer quatre fichiers: index.php, header.php, sidebar.php et style.css (la feuille de style du blog). Tous ces fichiers seront placs la racine du dossier de votre thme, cest--dire ici /htdocs/wordpress/wp-content/ themes/creation_theme. Cest le fichier index.php qui va rfrencer lensemble des donnes de la page web. Nous allons donc y renseigner diffrentes informations en premier, ce qui vous permettra de faire des tests en direct tout au long de la cration du thme. En effet, si vous commencez par crer le fichier de len-tte, header.php, rien ne saffichera sur le navigateur puisque le fichier index.php, tel que le prsente la hirarchie des modles, nexiste pas et, in extenso, le thme ne serait alors pas valide. Notez que tous vos fichiers doivent tre encods en UTF-8, pour viter les problmes daffichage sur les lettres accentues et autres caractres spciaux. La plupart des outils le font aujourdhui par dfaut, mais si votre diteur est rgl pour enregistrer ses fichiers avec un encodage diffrent, par exemple ISO-8891-1, prenez soin de modifier ce rglage. Cration du modle index.php Nous allons commencer par le fichier PHP de base du thme: index.php. Le contenu de ce fichier va avoir la structure suivante: donnes de len-tte (importes depuis header.php); contenu du blog (rcupr par la boucle WordPress); colonne latrale (importe depuis sidebar.php); pied de page (import depuis footer.php). Cration de la feuille de style CSS Vous allez maintenant crer la feuille de style du blog. Il est trs important de la crer ds le dpart, sans quoi le thme napparatra pas dans le slecteur de thme de linterface dadministration de WordPress, et vous ne pourrez pas le choisir pour le tester.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

184

WordPress ct dveloppeur: concevoir un thme


Vous allez dabord fournir diffrentes informations qui permettront WordPress dafficher votre thme parmi ceux qui sont disponibles. Pour cela, commencez le fichier avec les lignes de commentaire suivantes:
/* Theme Name: Cration Thme WordPress Theme URI: http://www.fran6art.com/ Description: Thme cr de A Z avec le livre Campus WordPress. Version: 1.0 Author: Francis Chouquet Author URI: http://www.fran6art.com/ Creation Theme by Francis Chouquet || http://www.fran6art.com */

Vous devez respecter la lettre le nommage des diffrentes sections de len-tte de style. css, car cest de l que WordPress va extraire les informations affiches dans son slecteur de thme. Deux thmes ne doivent pas prsenter les mmes informations, car cela provoque de la confusion dans le slecteur. Les sections obligatoires sont: Theme Name: le nom du thme; Theme URI: ladresse de la page web qui prsente le thme; Description: un descriptif du thme; Author: le nom de lauteur du thme; Author URI: ladresse du site de lauteur. Les sections optionnelles sont: Version: le chiffre de la version; Template: le thme utiliser (fonctionnalit avance). Enfin, vous pouvez terminer cet en-tte en ajoutant un texte libre, qui peut tre une explication du fonctionnement, une licence dutilisation, un avertissement Ce texte ne sera pas repris par WordPress. Notez bien que les informations prsentes dans notre exemple concernent lauteur de ces pages, mais vous pouvez et mme devez les remplacer par les vtres. Ceci fait, enregistrez votre feuille de style et allez sur linterface dadministration de votre blog, onglet Apparence et sous-menu Thmes. Vous pouvez fermer le fichier, car nous ne toucherons pas aux CSS pour cette premire partie, pour nous concentrer sur le code HTML et la smantique des lments affichs. Votre thme est dsormais disponible dans WordPress (voir Figure6.10).

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Crer son propre thme WordPress


Figure6.10
Votre thme apparat dans WordPress.

185

Slectionnez-le et activez-le. Pour le moment, vous navez quune page blanche. Sur la page de linterface dadministration de WordPress, chaque thme est associ une image miniature cense le reprsenter. Si vous le souhaitez, vous pouvez dores et dj crer cette miniature. Pour cela: 1. Crez une image aux dimensions 300240pixels, peu importe son contenu. 2. Appelez-la screenshot.png. 3. Placez-la au mme niveau que les autres fichiers de votre thme. Lorsque vous retournez sur la page dadministration des thmes de WordPress, votre thme apparat dsormais accompagn de son image. Quand votre thme sera termin, il sera toujours temps de crer une nouvelle image plus reprsentative, comme une capture dcran du thme en action. Le fichier index.php est cr, et votre blog de test est dsormais configur pour utiliser votre thme mme si, pour le moment, WordPress affiche une page blanche. Maintenant vous allez pouvoir ajouter du contenu tous les fichiers dj crs et ainsi dcouvrir toutes les informations quils proposent. Un conseil sur le nommage des rgles CSS: durant la cration de ce thme, nous utiliserons des termes anglais pour nommer les diffrentes rgles CSS. En effet, il est souvent prfrable de les avoir dans une langue connue par un maximum de personnes, au cas o vous souhaiteriez le proposer par la suite au tlchargement. Si vous employez une terminologie francophone, il sera trs difficile par la suite de modifier le thme pour quelquun qui ne connat pas le franais. Cration du modle header.php Vous allez prsent crer le fichier header.php. Cest lui qui contient les informations de base qui vont permettre la page web de bien safficher dans le navigateur. Cette partie comprend notamment:

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

186

WORDPRESS CT DVELOPPEUR : CONCEVOIR UN THME


le DOCTYPE, qui fournit au navigateur les informations sur la spcification utilise (XHTML, HTML4,etc.); la balise HEAD et tout ce quelle contient: les balises META, le titre du blog, le lien vers la feuille de style et vers les flux RSS,etc.; louverture de la balise BODY, qui va englober lensemble du style et du contenu du blog. Toutes ces informations constituent les bases pour crer votre thme. Sans le doctype, le navigateur ne saura pas comment afficher la page web et devra se dbrouiller au risque de mal interprter vos balises. Sans la balise HEAD et ses diffrentes informations, le navigateur ne saura pas quel type de codage de caractre utiliser, comment sappelle le blog, o sont les infos de style, o se trouve le flux RSS Ces donnes sont importantes pour tout site Internet et se trouvent toujours en premier, dans len-tte de la page web. Tout ceci implique que ces informations devront se retrouver sur toutes les pages du blog, et donc que le fichier header.php devra tre inclus au dbut de chaque page. Vous allez ouvrir votre diteur de texte et crer le fichier header.php. Noubliez pas de lenregistrer directement dans le dossier du thme creation_theme. Vous allez y ajouter les lignes de code suivantes (vous trouverez toutes ces donnes sur http://apprendre-wordpress.fr/livre ):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head prole="http://gmpg.org/xfn/11">

La premire ligne reprsente le doctype qui, comme son nom lindique, renseigne sur le type du document afficher, ce qui est essentiel au navigateur pour choisir avec quel moteur de rendu traiter la page: le mode de rendu respectueux des standards (Standard), ou le mode de compatibilit (Quirks), ce dernier se dbrouillant comme il peut pour afficher la page au mieux. Vous comprenez donc que le doctype est une part essentielle dune page valide. Dans nos exemples, nous allons utiliser le mode Standard en combinaison avec le langage XHTML1.0 Transitional. Ce dernier est une version plus permissive que le langage XHTML1.0 Strict, en cela que certains lments de HTML4.01 interdits dans la version Strict sont accepts en Transitional (<center>, <font> ou encore <strike>), ce qui permet aux dveloppeurs habitus au HTML de faire une transition facile vers le XHTML, un langage plus propre et extensible. Un mot sur limportance de la validit dune page. Avoir un site valide, que ce soit en XHTML ou en HTML, permet dtre sr que celui-ci dispose dun code propre et cohrent (mais pas forcment juste), et que son traitement sera facilit. Nous verrons comment valider notre thme une fois celui-ci termin, en fin de chapitre. La ligne suivant immdiatement le doctype ouvre la balise <html>, qui regroupe lensemble du document XHTML et doit tre la racine de toute page XHTML valide. Par ailleurs, en XHTML, cette balise doit contenir un attribut xmlns, qui permet dassocier la balise html lespace de nom (namespace) de XHTML, savoir http://www.w3.org/1999/xhtml.

Crer son propre thme WordPress

187

La ligne suivante ouvre llment <head>, qui contient toutes les balises donnant des informations sur la page ou le site. Le projet WordPress tant un fervent soutien du format de mise en relation XFN, la plupart des thmes intgrent le profil XFN, mais cela reste une option. Nous allons donc remplir llment <head> avec les informations relatives au site. Ces informations tant pour la plupart tires de la base de donnes de WordPress, cela va nous forcer entreprendre notre exploration des marqueurs de modle. Commenons par le titre du document, contenu dans la balise <title>:
<title> <?php bloginfo('name'); ?> <?php if ( is_404() ) : ?> &raquo; <?php _e('Not Found'); ?> <?php elseif ( is_home() ) : ?> &raquo; <?php bloginfo('description'); ?> <?php else : ?> <?php wp_title(); ?> <?php endif; ?> </title>

Ici nous faisons en sorte que la balise title contienne quelques informations supplmentaires. Aprs le titre du blog, nous placerons un texte correspondant au contexte: dans le cas dune page introuvable, le message "Not Found"; dans le cas de la page daccueil, le sous-titre/descriptif du blog; dans les autres cas, un appel au marqueur wp_title().
wp_title() est un marqueur qui, son tour, renvoie du texte en fonction du contexte:

dans le cas dun article seul ou dune page seule, son titre; dans le cas dune archive par date, la date en question ("2008", "2008 Dcembre", etc.); dans le cas dune catgorie ou dun label (tag), son nom; dans le cas dune page dauteur, son identifiant public. Ajoutez ensuite les lignes suivantes qui correspondent aux mtadonnes du blog cest-dire des informations propos des informations du blog. Toutes ces donnes vont tre utilises par le navigateur pour afficher correctement la page web. Nous y retrouvons notamment lencodage de caractres utiliser (charset), lemplacement de la feuille de style employer (stylesheet), ainsi que les diffrents formats pour utiliser les flux RSS:
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats --> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/ css" media="screen" /> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

188

WordPress ct dveloppeur: concevoir un thme


<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" /> <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

Le marqueur WordPress employ ici est php bloginfo avec diffrentes variables: html_type: permet de connatre le type de HTML utilis. version: permet de connatre la version de WordPress employe. stylesheet_url: donne lURL de la feuille de style. rss2_url: fournit ici lURL du flux RSS au format RSS 2.0. rss_url: fournit lURL du flux RSS au format RSS 0.92. atom_url: fournit lURL du flux RSS au format Atom 0.3. pingback_url: fournit lURL des rtroliens. Ensuite, renseignez lemplacement et le format des archives utilises pour votre blog:
<?php wp_get_archives('type=monthly&format=link'); ?>

Et, enfin, placez les quelques lignes suivantes:


<?php wp_head(); ?> </head> <body>

Le marqueur wp_head() que vous insrez ici est ce quon appelle un hook pour les extensions WordPress. Cest une sorte de repre qui sera utilis par les dveloppeurs dextensions pour afficher convenablement les informations dans les diffrents fichiers du thme. Sans ce repre, lextension ne pourra pas fonctionner dans len-tte. En dessous, vous refermez la balise head et vous ouvrez la balise body, lintrieur de laquelle vous allez insrer lensemble du contenu visuel du blog. Pour ce qui est de len-tte, ce contenu va se limiter, comme souvent, au titre du blog et sa description. Vous enregistrez votre fichier que vous nommez header.php. Maintenant, vous allez devoir insrer le marqueur de modle get_header dans le fichier index.php, puisque cest lui qui va appel les diffrents "blocs" ou "modules" du thme. Vous allez donc ouvrir le fichier index.php et y insrer la ligne de code suivante:
<?php get_header(); ?>

Dans le fichier header.php, vous avez ouvert la balise body. Vous allez la refermer ici, dans le fichier index.php, et directement sous le marqueur qui appelle len-tte. Vous allez donc avoir la structure de code suivante:
<?php get_header(); ?> </body> </html>

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Crer son propre thme WordPress

189

Maintenant que nous avons rempli len-tte du fichier avec les informations ncessaires au navigateur, il est temps de mettre en place les balises qui afficheront le blog lui-mme, petit petit: titre, article, commentaire Insertion du titre du blog Nous lavons vu au chapitre prcdent, la requte PHP qui va afficher le titre du blog est:
<?php bloginfo('name'); ?>

Vous allez donc insrer ce code directement sous louverture de la balise body (voir Figure6.11).
Figure6.11
Insertion du marqueur du titre de blog.

Sauvegardez votre fichier et allez voir ce qui se passe dans votre navigateur. Le titre du blog apparat en haut gauche (voir Figure6.12).
Figure6.12
Affichage du titre du blog.

Vous allez maintenant donner au titre son premier style en lui attribuant une balise h1, qui est la balise la plus importante pour ce qui est des titres dans une page web. Pour ce faire, ajoutez <h1> devant la requte php et </h1> la fin de cette mme requte:
<h1><?php bloginfo('name'); ?></h1>

Sauvegardez votre fichier et rafrachissez une nouvelle fois votre navigateur. Le titre du blog apparat maintenant en plus gros, avec le style par dfaut attribu aux titres h1 (voir Figure6.13).
Figure6.13
Affichage du titre avec la balise h1.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

190

WordPress ct dveloppeur: concevoir un thme


prsent, vous allez mettre un lien sur ce titre qui va pointer sur la page daccueil du blog. Cela se rvlera trs utile quand un visiteur qui sera sur une page intrieure du blog souhaitera revenir la page daccueil. Pour faire pointer ce lien, il faut que vous retrouviez la structure classique dun hyperlien, savoir:
<a href="URL">texte</a>

Pour produire le "texte" cliquable, nous allons utiliser le marqueur dont nous venons de parler. Pour ce qui est de lURL, nous nous servirons du mme tag, bloginfo(), mais en lui appliquant le paramtre url, qui va ds lors afficher lURL du blog plutt que son nom. Entourez le tout par la balise h1, et vous obtenez la ligne de code suivante:
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

Lavantage dutiliser des marqueurs de modle plutt que dcrire directement le titre et lURL est que vous pourrez employer votre thme sur nimporte quel blog, celui-ci affichera toujours les bonnes informations, car elles seront tires directement depuis la base de donnes. Une fois que vous avez modifi votre fichier header.php avec les nouvelles informations, enregistrez-le et rafrachissez nouveau la fentre de votre navigateur pour voir apparatre le lien sur le titre (voir Figure6.14).
Figure6.14
Affichage du titre du blog en lien.

Insertion de la description du blog Vous allez maintenant ajouter la description du blog sous le titre. Ici, vous utiliserez une nouvelle fois le tag bloginfo() et vous lui attribuerez le paramtre "description", tout simplement. Vous obtiendrez alors le marqueur de modle complet suivant:
<?php bloginfo('description'); ?>

Cest donc ce morceau de code qui va afficher la description du blog. Insrez-le directement sous la ligne ddie au titre du blog et sauvegardez votre fichier. Rafrachissez votre navigateur: la description du blog apparat sous son titre (voir Figure6.15).
Figure6.15
Affichage de la description du blog.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Crer son propre thme WordPress

191

Mise en forme de l'en-tte du blog Pour finir avec len-tte du blog, vous allez placer diffrentes balises CSS autour du titre et de la description du blog pour pouvoir leur donner un style spcifique par la suite. Tout dabord, vous placerez une balise div pour envelopper les deux lignes dj cres. Elle permettra de donner un style complet pour len-tte. Pour cibler cette balise uniquement avec une rgle CSS, nous ajoutons un attribut "id" ayant la valeur "header". Cet attribut signifie que nous donnons un identifiant unique cette balise et que seule cette balise aura cette valeur dID dans tout le code HTML. Vous obtenez alors la structure suivante:
<div id="header"> <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1> <?php bloginfo('description'); ?> </div>

Sauvegardez votre fichier header.php. Pour terminer, vous allez crer une nouvelle balise, qui va sappeler "page". Cette balise aura pour but de styler lensemble du contenu, l o la balise "body" met en forme lensemble de la page web.
<div id="page">

Schmatiquement, dun point de vue CSS, la structure doit tre la suivante (voir Figure6.16).
Figure6.16
Structure CSS de la page web.
<body> <page> <header>

<content>

<sidebar>

<footer>

Vous allez donc ouvrir cette balise page directement sous la balise body. Noubliez pas de refermer cette balise, dans le fichier index.php, directement au-dessus de la fermeture de la balise body:

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

192

WordPress ct dveloppeur: concevoir un thme


</div> <!-- fermeture page --> </body> </html>

Pour ce qui est des informations den-tte, le code final sera donc le suivant:
<body> <div id="page"> <div id="header"> <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1> <?php bloginfo('description'); ?> </div>

Nous en resterons l pour le moment avec le fichier header.php. En effet, le reste de la balise body (donc le reste de laffichage du blog) sera pris en charge par le fichier index.php. Nous sparons donc physiquement le code en charge de laffichage de la partie suprieure du design du blog et celui en charge du contenu lui-mme. Mise en place de la boucle WordPress Vous allez maintenant insrer les diffrentes informations que contient la boucle WordPress. partir dici, il est primordial que votre blog comprenne quelques articles pour vrifier que la boucle fonctionne correctement. Ouvrez le fichier index.php que vous avez dj cr et insrez les quelques lignes suivantes de la boucle WordPress sous le marqueur de modle qui appelle le fichier header.php. En effet, dans notre exemple, le contenu va venir se positionner sous len-tte:
<?php get_header(); ?> <div id="content"> <?php if(have_posts()) : ?> <?php while(have_posts()) : the_post(); ?> <?php endwhile; ?> <?php else : ?> <h2 class="center">Aucun article trouv. Essayez une autre recherche ?</h2> <?php include (TEMPLATEPATH . '/searchform.php'); ?> <?php endif; ?> </div>

Comme nous lavons vu au chapitre prcdent, WordPress va vrifier sil existe des articles afficher. Sil y en a, il les affichera, sinon il vous proposera de faire une recherche. Ici, nous en avons galement profit pour ajouter une balise "content" la boucle WordPress. Cela permettra par la suite une meilleure personnalisation de laffichage du contenu du blog. Mais, dans ces quelques lignes, vous navez que les conditions de chargement des articles, pas laffichage de ceux-ci. Vous devez maintenant placer aux bons endroits les marqueurs de modle qui vont afficher le contenu mme de ces articles. Affichage du titre des articles Les deux premires lignes de la boucle WordPress vrifient sil y a des articles afficher:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Crer son propre thme WordPress

193

have_posts() et the_post() sont deux marqueurs de WordPress qui ont une importance

primordiale pour la boucle. Sans eux, rien ne saffiche. Comme tous les marqueurs de modle, ce sont l de simples raccourcis de fonctions PHP internes WordPress qui simplifient grandement la rcupration des donnes: have_posts(): renvoie la valeur VRAI ou FAUX selon quil reste ou non des articles afficher selon le contexte en cours. the_post(): rcupre lidentifiant interne de larticle suivant dans la liste des articles afficher, ainsi que ses donnes (titre, contenu, permalien). De fait, ds que le marqueur est appel, toutes les donnes lies larticle sont charges et prtes tre utilises par les autres marqueurs ddis. La boucle while() sassure que tous les articles ncessaires passent par ce processus; il est donc temps de mettre en place les marqueurs qui extraient le contenu de larticle en cours. Le marqueur de modle qui sera utilis en premier est assez explicite:
<?php the_title(); ?>

Insrez-le donc directement sous les deux lignes prcdemment cites, dans la boucle. Enregistrez les modifications et affichez la page web de votre blog pour voir le rsultat. Maintenant, les diffrents titres de vos articles apparaissent les uns aprs les autres (voir Figure6.17).
Figure6.17
Affichage des titres des articles.

Comme vous lavez fait pour le titre du blog, vous allez convertir ces titres darticles en liens, afin de permettre au visiteur de cliquer sur le titre de larticle pour se rendre sur sa page et ses commentaires. Vous allez modifier la ligne que vous venez dinsrer pour utiliser celle-ci:
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>

Vous avez ici ajout le lien vers le permalien de larticle via le marqueur de modle the_permalink(), et vous avez affich le titre de larticle grce au marqueur de modle the_title(). Enfin, vous avez attribu une balise de titre qui sera ici H2 pour le titre affich. La balise h1 est rserve au titre du blog, et sur lchelle dimportance des titres, on estime que ce sont ceux des articles qui doivent primer. On leur attribue donc un niveau H2.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

194

WordPress ct dveloppeur: concevoir un thme


Le rsultat donne alors une liste de titres darticles qui sont maintenant cliquables (voir Figure6.18).

Figure6.18
Affichage des titres des articles avec lien.

Vous pouvez mme aller sur lURL de larticle en question en cliquant sur le lien ds maintenant. Vous remarquez que laffichage est identique celui de la page daccueil, si ce nest quil ny a que le titre de larticle sur lequel vous avez cliqu qui apparat. Cest tout fait normal, puisque si vous reprenez la hirarchie des modles de WordPress, quand il ny a pas de fichier single.php cr, WordPress va utiliser le fichier index.php. Affichage du contenu des articles Pour afficher le contenu des articles, vous avez le choix entre deux marqueurs de modle: <?php the_content(); ?> va afficher tout le contenu de larticle (jusqu la balise MORE). <?php the_excerpt(); ?> va afficher uniquement les 55premiers mots de larticle (sans prendre MORE en compte). Les rsultats laffichage sont donc diffrents (voir Figures6.19 et 6.20). Pour la cration de ce thme, vous allez utiliser the_content(). Vous linsrerez direc tement sous la ligne de code pour le titre des articles afficher:
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"> <?php the_title(); ?></a></h2> <?php the_content(); ?>

Sauvegardez votre fichier, et rafrachissez le navigateur ; le contenu de vos articles est dsormais visible.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Crer son propre thme WordPress


Figure6.19
Affichage de la page d'accueil avec l'utilisation du tag the_content().

195

Figure6.20
Affichage de la page d'accueil avec l'utilisation du tag the_excerpt().

Mise en forme du contenu Vous allez maintenant "baliser" les diffrents lments insrs, pour pouvoir les person naliser au mieux au moment de la cration du style du blog. Le titre des articles est dj balis avec le titre H2. Par contre, vous devrez mettre en place une balise pour le contenu mme, mais aussi pour envelopper lensemble des articles, un

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

196

WordPress ct dveloppeur: concevoir un thme


par un. Vous allez donc ajouter une balise post autour des lments insrs pour un article, cest--dire le titre et le contenu:
<div class="post"> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"> <?php the_title(); ?></a></h2> <?php the_content(); ?> </div>

Ici, nous allons utiliser une classe plutt quun ID. Cela pour une raison simple : un ID est un identifiant unique, qui ne sera utilis quune seule fois, alors quune classe peut tre rutilise autant de fois quon veut. Comme nous allons mettre en forme laffichage des articles, il est important dutiliser une classe, tant donn que nous prvoyons dcrire plus dun article. Cette balise post, vous allez lassocier un marqueur de modle qui vous permettra de rcuprer lidentifiant de larticle affich. Ce marqueur de modle est the_ID(), et vous allez linsrer directement lintrieur dune balise ID post:
<div class="post" id="post-<?php the_ID(); ?>">

Ici, vous sparez le style pour lensemble des articles, individuellement, avec la classe post, mais vous tes galement capable de personnaliser certains articles, en particulier grce lID "post-identifiant de larticle". Lensemble va donc ressembler au code qui suit:
<div class="post" id="post-<?php the_ID(); ?>"> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"> <?php the_title(); ?></a></h2> <?php the_content(); ?> </div>

Ceci fait, vous allez ajouter une balise autour du contenu mme, balise que vous appellerez post_content:
<div class="post_content"> <?php the_content(); ?> </div>

Vous employez ici des classes CSS, car les informations qui leur sont associes seront rutilises pour tous les articles du blog. ce stade de la cration du thme, le code global de la boucle WordPress est le suivant:
<div id="content"> <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?> <div class="post" id="post-<?php the_ID(); ?>"> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"> <?php the_title(); ?></a></h2> <div class="post_content"> <?php the_content(); ?> </div> </div> <?php endwhile; ?> <?php else : ?>

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Crer son propre thme WordPress

197

<h2 class="center">Introuvable</h2> <p class="center">D&eacute;sol&eacute;, mais vous cherchez quelque chose qui ne se trouve pas ici .</p> <div id="searchno"> <?phpget_search_form();?></div> <?php endif; ?> </div>

Notez quen PHP la syntaxe ":" permet de faire un raccourci en vitant dutiliser les accolades qui encadrent le contenu dune fonction, mais obligeant du coup fermer expli citement les mots-clefs idoines (endif pour if, endwhile pour while,etc.). Ainsi, en crivant le dbut de la boucle sans ce raccourci syntaxique, cela donnerait:
if (have_posts()) { while (have_posts()) { the_post(); the_content(); } else { echo "Introuvable"; }

La dcision de baser la boucle sur cette syntaxe rsulte de lenvie de compartimenter autant que possible le code PHP et faire en sorte quil ressemble au minimum du code PHP, qui effraie facilement les dbutants, et plus du code HTML. Affichage des mtadonnes des articles Il vous reste maintenant une seule chose intgrer pour que laffichage du contenu soit complet: les mtadonnes des articles. Ces donnes comptent entre autres les catgories, la date de publication, lauteur de larticle, ainsi que le nombre de commentaires pour chaque article. Les marqueurs de modle utiliss pour afficher ces informations sont: date: the_time(); auteur: the_author(); catgories: the_category(); commentaires: comments_popup_link. Vous allez placer ces diffrentes informations sous le titre de larticle, de manire quelles saffichent de faon cohrente et lisible. Le code employ pour afficher ces donnes sera le suivant:
<p class="postmetadata"> <?php the_time('j F Y') ?> par <?php the_author(); ?> | Cat&eacute;gorie : <?php the_category(', '); ?> | <?php comments_popup_link('Pas de commentaires', '1 Commentaire', '% Commentaires'); ?> <?php edit_post_link('Editer', ' &#124; ', ''); ?> </p>

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

198

WordPress ct dveloppeur: concevoir un thme


Enregistrez les modifications et vrifiez les changements dans votre navigateur. Votre blog ressemble dsormais ceci (voir Figure6.21).

Figure6.21
Affichage des mtadonnes des articles.

Tout dabord, vous avez cr une enveloppe pour ces informations. Nous lavons appele "postmetadata". Nous utilisons ici le tagP et non plus DIV pour des raisons de smantique. La balise P correspond un paragraphe. Cette balise est referme la fin de laffichage de ces donnes. Ensuite, le marqueur the_time va permettre laffichage de la date. Ici, diffrents paramtres sont dfinis pour choisir le format de cette date. Vous trouverez tous les formats disponibles ladresse http://php.net/date. Puis vient the_author(), pour lauteur de larticle. Arrive enfin laffichage du nombre de commentaires. Cest le marqueur comments_popup_ link() qui est utilis. Nous lui avons attribu trois paramtres diffrents pour trois cas: "pas de commentaires" saffichera dans le cas o il ny a pas de commentaires pour larticle. "1 commentaire" dans le cas o il ny a quun seul commentaire. "% commentaires" pour tous les articles qui auraient plus dun commentaire, % tant remplac par le nombre de commentaires effectifs. Cette personnalisation permet davoir un message diffrent selon le contexte. Sous ces mtadonnes, vous avez enfin ajout un lien vers ldition de chacun des articles. Cela peut se rvler trs utile pour aller modifier un article directement partir de la page daccueil du blog par exemple ( condition dtre connect). Le marqueur employ ici est edit_post_link().

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Crer son propre thme WordPress

199

Insertion des mots-clefs Si vous utilisez les labels (tags) sur votre blog, vous pouvez galement les afficher ici. Pour ne pas les mlanger avec les mtadonnes, vous allez intgrer cette information avec le m arqueur de modle the_tags():
<p class="tags"><?php the_tags(); ?></p>

Ce code sera insr aprs la fermeture de la classe post_content et avant la fermeture de la classe post:
<div class="post_content"> <?php the_content(); ?> </div> <p class="tags"><?php the_tags(); ?></p> </div>

Vous avez balis les mots-clefs avec une classe tags, et le marqueur utilis ne comprend aucun paramtre particulier. Enregistrez les modifications et rafrachissez votre navigateur pour voir le rsultat (voir Figure6.22).
Figure6.22
Visualisation des mots-clefs au niveau de l'article.

Cration de la colonne latrale du blog La colonne latrale, ou sidebar en anglais, va regrouper toute information qui pourrait tre utile au visiteur. Pour lheure, vous allez crer une colonne latrale simple, qui va rassembler lensemble des donnes utiles ou importantes que vous pouvez afficher. Pour votre propre blog, ce sera vous de choisir les lments que vous estimez utiles ou importants.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

200

WordPress ct dveloppeur: concevoir un thme


Commencez par ouvrir le fichier sidebar.php que vous avez cr au dbut de ce chapitre. Pour le moment, il na aucun contenu. Vous allez donc crer une balise avec une classe qui va envelopper cette colonne latrale. Vous lappellerez sidebar. Nous avons choisi une classe ici pour pouvoir rutiliser son style sur dautres pages du blog. cette balise vous ajouterez une liste non ordonne. Cela vous permettra de prendre lensemble du contenu de la colonne latrale pour une liste globale. En effet, smantiquement, on peut considrer lensemble du contenu de la colonne comme une liste dinformations. Chaque bloc dinformations sera un lment de cette liste. Le code insrer est le suivant:
<div class="sidebar"> <ul> </ul> </div>

Tout ce qui sera ajout par la suite devra tre compris entre ces deux balises UL. Vous allez galement devoir insrer le marqueur de modle pour la colonne latrale dans le fichier index.php. Directement au-dessus de la fermeture de la balise page, insrez le code suivant:
<?php get_sidebar(); ?>

Vous devriez avoir la structure suivante:


<?php endif; ?> </div> <?php get_sidebar(); ?> </div> <!-- fermeture page --> </body> </html>

Insertion du formulaire de recherche Vous allez prsent remplir votre colonne avec un formulaire de recherche. Il est toujours important de bien positionner ce formulaire pour permettre au visiteur dapprofondir sa recherche quand il ne trouve pas une information. Avant dinsrer quoi que ce soit dans le fichier sidebar.php, vous devez crer un nouveau fichier qui correspondra ce formulaire de recherche. Nous considrons ce formulaire comme un lment part entire du blog, qui pourra tre rutilis sur dautres pages, la page404, par exemple; par consquent, il est plus facile de crer un fichier distinct et de lajouter grce une requte plutt que de copier lensemble du code chaque fois. Ouvrez donc un nouveau fichier et enregistrez-le au mme niveau que les autres fichiers du blog, en le nommant searchform.php. Dans ce fichier, insrez les lignes de code suivantes:
<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/"> <div> <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" /> <input type="submit" id="searchsubmit" value="Chercher" /> </div> </form>

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Crer son propre thme WordPress

201

Vous venez de crer un formulaire (balise form). Vous y avez plac deux balises input qui forment le formulaire de recherche en tant que tel: le champ de recherche (type text) quiva utiliser le marqueur de modle the_search_query(), et le bouton (type submit) pour effectuer la recherche, appel Chercher. Votre fichier searchform.php est dsormais cr. Vous pouvez le fermer, vous naurez plus y toucher. Maintenant, vous allez le relier la colonne latrale pour quil puisse safficher sur le blog. Le marqueur que nous allons utiliser ici est:
<?php get_search_form(); ?>

Vous entourerez ensuite ce code dune balise li. En effet, vous tes dans une liste que vous avez gnre un peu plus tt (les balises UL), vous devez donc crer une ligne ici. Vous en profiterez galement pour lui donner un attribut "id" que vous appellerez search. Le code final donne le rsultat suivant:
<li id=search><?php get_search_form(); ?></li>Insrez ce code directement

sous louverture de la liste:


<div class=sidebar> <ul> <li id=search><?php get_search_form(); ?></li> </ul> </div>

Enregistrez votre fichier sidebar.php et ouvrez votre navigateur pour voir le rsultat. Le formulaire de recherche, premier lment de la colonne, apparat sous le dernier article; cest tout fait logique, car tant que nous navons pas styl les lments du blog avec CSS, la page les affiche selon lordre dans lequel les lments HTML ont t crits. Le code de la colonne a t plac aprs celui des articles, donc le premier lment de celle-ci apparat sous le dernier article affich (voir Figure6.23).
Figure6.23
Affichage du formulaire de contact.

Insertion du calendrier Le marqueur de modle utilis pour afficher le calendrier de WordPress est get_calendar(). Vous allez linsrer sous le formulaire de recherche, toujours accompagn dune balise de ligne et dun titre h2:
<li id="calendar"><h2>Calendrier</h2> <?php get_calendar(); ?> </li>

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

202

WordPress ct dveloppeur: concevoir un thme


Enregistrez les modifications, et rafrachissez la fentre de votre navigateur. Le calendrier apparat maintenant sous le formulaire de recherche (voir Figure6.24).

Figure6.24
Affichage du calendrier.

Insertion des catgories Le marqueur de modle WordPress utilis pour afficher la liste des catgories est wp_list_ categories(). Vous allez linsrer de la manire suivante:
<?php wp_list_categories('sort_column=name&optioncount=1&hierarchical=0&title_ li=<h2>Catgories</h2>'); ?>

Le marqueur de modle est associ ici plusieurs paramtres distincts pour avoir une certaine personnalisation de cette liste: sort_column=name: trie la liste par ordre alphabtique. optioncount=1: affiche le nombre de billets pour chaque catgorie. Si vous aviez mis le chiffre0 la place du1, le nombre de billets ne safficherait pas. hierarchical=0: interdit laffichage des sous-catgories. Si vous voulez les voir apparatre, mettez1 la place de0. title_li=xxx: prcise comment afficher le titre associ au tag. Ici, nous utiliserons de prfrence un titre H2 que nous afficherons, mais chacun remplit cet espace comme il le souhaite. Ici, il ny a pas besoin de balise de ligne "li", cette balise tant dj intgre dans le marqueur de modle. Une fois le code insr sous le calendrier, enregistrez les modifications et rafrachissez la fentre de votre navigateur. Les catgories apparaissent dsormais sous le calendrier (voir Figure6.25).

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Crer son propre thme WordPress


Figure6.25
Affichage des catgories.

203

Insertion des pages du blog Linsertion de la liste des pages statiques sert souvent pour crer un menu de navigation du blog. Ici, vous allez ajouter les diffrentes pages du blog en une simple liste, grce au marqueur de modle wp_list_pages(). Ce sera exactement le mme fonctionnement que pour les catgories. Le marqueur de modle offre dj la structure des lignes de la liste, et vous allez modifier le titre dans les paramtres pour avoir un titre dans une balise h2. Le code est le suivant:
<?php wp_list_pages('title_li=<h2>Pages</h2>'); ?>

Avec la version 2.7 de WordPress, une fonction trs ressemblante a fait son apparition ; il sagit de wp_page_menu(). Ce marqueur de modle est plus complet que wp_list_ pages() car il permet dafficher, en plus des pages du blog, un lien vers la page daccueil et de mettre en "relief" la page active. Enregistrez le tout et rafrachissez une nouvelle fois votre navigateur. La liste des pages du blog apparat maintenant sous les catgories (voir Figure6.26).

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

204
Figure6.26

WordPress ct dveloppeur: concevoir un thme

Affichage des pages du blog.

Insertion des archives Le marqueur de modle utilis pour linsertion des archives est wp_get_archives(). Vous allez ajouter un paramtre ce modle pour afficher ces archives par mois. Vous obtenez alors le code suivant:
<?php wp_get_archives('type=monthly'); ?>

Pour afficher les archives correctement, vous devez entourer ce marqueur par une balise de liste ul. Les mois safficheront alors sous forme de liste une fois encore pour des questions de smantique. Vous devez prciser ici la racine de la liste, car le marqueur de modle ne la met pas en place de manire automatique. Enfin, vous allez insrer un titre au dbut et envelopper le tout par une balise de liste. Le rsultat est le suivant:
<li><h2>Archives</h2> <ul> <?php wp_get_archives('type=monthly'); ?> </ul> </li>

Insrez ce code sous la liste des pages du blog et regardez le rsultat sur votre navigateur. La liste complte des archives ranges par mois apparat alors en bas de la page (voir Figure6.27).

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Crer son propre thme WordPress


Figure6.27
Affichage des archives du blog.

205

Insertion de la blogoliste Pour afficher la blogoliste, vous allez utiliser le marqueur de modle get_links_list(). Cette fonction gre automatiquement le titre et la liste, ce nest donc pas la peine dajouter quoi que ce soit ici. Vous insrerez le code tel quel directement sous les archives:
<?php get_links_list(); ?>

Enregistrez votre fichier et rafrachissez votre navigateur. La blogoliste apparat maintenant sous les archives (voir Figure6.28).
Figure6.28
Affichage de la blogoliste.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

206

WordPress ct dveloppeur: concevoir un thme


Insertion des informations de connexion Sur certains blogs, il est possible de senregistrer pour laisser par exemple des commentaires. Il est donc important de laisser un lien dans la colonne latrale. Le marqueur de modle utilis pour lenregistrement est wp_register(). Il peut tre utile galement davoir un lien de connexion sur chacune des pages de votre blog. Cest un trs bon raccourci pour se connecter linterface dadministration. Pour ce faire, vous devrez utiliser le marqueur de modle wp_loginout() qui affichera un lien Connexion quand vous ne serez pas connect, et un lien Dconnexion quand vous serez connect. Vous devrez aussi ajouter la fin de la colonne latrale le crochet (hook) wp_meta() pour les extensions, qui leur permettra dafficher leur contenu dans la colonne. Cest le mme raisonnement que pour wp_head(), vu dans len-tte. Le code insrer sous la blogoliste est le suivant:
<li><h2>Infos Meta</h2> <ul> <?php wp_register(); ?> <li><?php wp_loginout(); ?></li> <?php wp_meta(); ?> </ul> </li>

Vous commencez par crer une ligne li de la liste qui va englober le tout. Vous ajoutez un titre H2, et vous crez ensuite une liste ul pour pouvoir afficher les diffrentes informations mta. wp_register() gre automatiquement la ligne, alors que vous devez en ajouter une au modle wp_loginout(). Une fois votre code insr, vous pouvez enregistrer votre colonne latrale et voir safficher les mtadonnes dans votre navigateur. Ce que vous verrez dpendra du fait que vous soyez connect ou non (voir Figure6.29).
Figure6.29
Affichage des donnes de connexion.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Crer son propre thme WordPress

207

Insertion des flux RSS Les dernires informations que vous allez insrer dans votre colonne sont les liens vers les flux RSS pour les articles et les commentaires. Vous les avez vus prcdemment dans le thme default, mais ils taient situs dans le pied de page. Ici, nous allons les inclure dans la colonne latrale, afin de leur donner une meilleure visibilit que dans le pied de page. Le marqueur de modle utilis sera encore bloginfo(), mais avec des paramtres diffrents: rss2_url pour le flux RSS des articles; comments_rss2_url pour le flux RSS des commentaires des articles. Ajoutez le code suivant:
<li><h2>Abonnez-vous au blog !</h2> <ul> <li><a href="<?php bloginfo('rss2_url'); ?>" title="Flux RSS des articles">Flux RSS des articles</a></li> <li><a href="<?php bloginfo('comments_rss2_url'); ?>" title="Flux RSS des commentaires">Flux RSS des commentaires</a></li> </ul> </li>

Nous reprenons le mme schma que prcdemment. Vous crez une ligne de liste et vous lui donnez un titre, ici Abonnez-vous au blog!. Ensuite, vous ouvrez une nouvelle liste et vous insrez un lien qui pointe vers les deux flux en ajoutant les marqueurs de modle pour avoir les URL des flux RSS. Enregistrez votre fichier et rafrachissez votre navigateur. Les liens vers les flux RSS apparaissent maintenant sous les informations mta (voir Figure6.30).
Figure6.30
Affichage des flux RSS.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

208

WordPress ct dveloppeur: concevoir un thme

Widgetisation de la colonne latrale Premire mthode Les widgets, que vous avez pu dcouvrir dans la partie "utilisateur", sont apparus avec la version 2.2 de WordPress. Ils sinstallent dans votre colonne latrale directement depuis linterface dadministration de WordPress et viennent y remplacer le contenu que vous avez mis dans votre colonne latrale. Mais, pour pouvoir installer ces widgets, il faut que votre colonne latrale soit "widgetisable". Pour cela, vous devez insrer quelques morceaux de code dans diffrents fichiers. Tout dabord, vous allez ajouter un peu de code dans votre fichier sidebar.php pour que WordPress sache que vous souhaitez utiliser les widgets dans votre colonne latrale. Insrez donc le code suivant directement sous la balise ul, qui ouvre la liste non ordonne de la colonne latrale:
<div class="sidebar"> <ul> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

Et le code suivant, juste avant la fermeture de la balise ul de la liste de la colonne latrale:


<?php endif;?>

Ainsi, cest toute la colonne latrale qui sera widgetise. Si vous utilisez un widget, il apparatra dans votre colonne latrale, sinon cest le contenu du fichier sidebar.php qui saffichera. Mais avant de pouvoir afficher des widgets, vous devez "activer" ce changement, et celui-ci sera actif via un fichier appel functions.php. Vous allez donc crer un fichier functions.php et dans ce fichier, vous allez insrer le code suivant:
<?php if ( function_exists('register_sidebar') ) register_sidebar(); ?>

Ce code va dire WordPress dafficher la colonne latrale dynamique, donc les widgets. Cette fonction est valable dans le cas o vous navez quune seule zone widgetiser, ce que nous comptons faire pour notre thme. Cependant, sil y a plusieurs zones de votre blog dans lesquelles vous souhaitez avoir des widgets, vous utiliserez le code suivant:
<?php if ( function_exists('register_sidebars') ) register_sidebars(4); ?>

Vous remarquerez que les seules diffrences entre ces deux codes sont le "s" la fin de sidebar et lajout du chiffre4 en argument. Ce chiffre quivaut au nombre de zones widgetises que vous mettrez en place. Si vous nen voulez que deux, par exemple, vous choisirez le chiffre2. Si vous avez plusieurs zones widgetises, vous devrez aussi modifier le contenu du fichier sidebar.php ou dautres fichiers pour y positionner les diffrentes zones. Vous reprenez alors le mme format que celui qui tait prsent prcdemment, sauf que vous y ajoutez le chiffre de la zone widgetiser derrire dynamic_sidebar. Par exemple, si vous souhaitez crer

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Crer son propre thme WordPress

209

trois zones widgetises, vous allez insrer les trois morceaux de code suivants aux endroits voulus, sans oublier php endif pour refermer la zone widgetiser:
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(1) ) : ?> <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(2) ) : ?> <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(3) ) : ?>

Vous allez maintenant vrifier que tout fonctionne bien. Allez dans linterface dadministration de WordPress, et dans le menu Apparence, ouvrez longlet Widgets. Prenez un ou plusieurs widgets dans la colonne de gauche et ajoutez-les dans celle de droite (voir Figure6.31).
Figure6.31
Ajout de widgets dans la colonne latrale.

Enregistrez les modifications et ouvrez une nouvelle fois la page daccueil de votre blog: les lments que vous avez insrs auparavant ont disparu pour laisser place aux widgets que vous venez dajouter (voir Figure6.32).
Figure6.32
Les widgets apparaissent dans la colonne latrale.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

210

WordPress ct dveloppeur: concevoir un thme

Deuxime mthode

Il existe pour crer vos zones widgetisables une autre manire qui est un peu plus complique mais qui vous permettra notamment de nommer ces diffrentes zones mais aussi de choisir le type de zone que vous voulez. Prenons un exemple : imaginons que vous souhaitiez crer une zone widgetisable dans votre colonne latrale, y mettre une liste avec un titre H3 et que cette liste corresponde aux derniers commentaires. Dans votre colonne latrale, vous allez devoir entrer le code suivant:
<?php if ( function_exists ( dynamic_sidebar ) && dynamic_ sidebar(commentaires) ) : ?>

On a ajout le nom de la zone widgetisable. Ensuite, vous allez entrer le code suivant dans le fichier functions.php:
<?php if ( function_exists('register_sidebar') ) register_sidebar(array( 'name' => __( 'Commentaires' ), 'before_widget' => '<li>', 'after_widget' => '</li>', 'before_title' => '<h3">', 'after_title' => '</h3>', )); ?>

Ici, on a une fonction plus complte qui va vous permettre dentrer plus dinformations sur la zone que vous souhaitez crer. Tout dabord, vous allez y mettre le nom de la zone widgetiser pour que WordPress fasse la relation avec le code que vous avez entr dans le fichier sidebar.php. Ensuite, vous dcidez du type de contenu que vous souhaitez mettre dans cette zone. Ici, on a choisi une liste de commentaires dont on utilise les balises "li". Mais vous pouvez trs bien choisir un autre type de contenu. En dessous vient le type de titre que lon va utiliser pour le titre. Ici, on choisit les titres de type H3. Une fois que vous avez saisi toutes ces informations dans les bons fichiers, vous pouvez aller sur ladministration de votre blog, au niveau des widgets et, en haut droite, vous voyez apparatre votre zone widgetisable, tout juste cre. Et, au lieu davoir "colonne latrale 1", vous voyez safficher le nom que vous avez choisi (voir Figure 6.33). Cela permet de mieux grer toutes ces zones ds lors quelles sont nombreuses.
Figure6.33
Cration d'une zone widgetisable "Commentaires".

Insertion du pied de page Les informations contenues dans le pied de page peuvent tre diffrentes dun blog un autre. Cependant, quelques-unes se rvlent importantes et utiles: Mettez un copyright sur le contenu et le design de votre blog.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Crer son propre thme WordPress

211

Montrez que vous utilisez WordPress (un peu de publicit ne fait pas de mal, et cela peut tre trs utile pour les personnes visitant votre blog). Ce sont les informations que nous allons proposer ici. Ouvrez donc le fichier; le code insrer sera le suivant:
<div id="footer"> <p>Copyright &#169; <?php print(date(Y)); ?> <?php bloginfo('name'); ?> <br /> Blog propuls par <a href="http://wordpress.org/">WordPress</a> et con&ccedil;u par <a href="http://www.fran6art.com">Fran6art</a> </p> </div>

Ici, vous avez cr tout dabord le bloc qui va envelopper lensemble du pied de page grce la balise footer. Cest un id, il est donc unique. Ensuite, vous avez cr un paragraphe (balise p) dans lequel vous avez insr les informations de copyright, que vous avez associes lanne en cours via un simple appel la fonction PHP date(), et au nom du blog par le biais du marqueur de modle bloginfo() que vous avez vu plusieurs fois dj auparavant. Enfin, vous avez ajout une ligne avec quelques informations montrant que vous utilisez WordPress. Enregistrez votre fichier en le nommant footer.php. Maintenant, vous allez devoir insrer le marqueur de modle pour le pied de page dans le fichier index.php. Directement sous le marqueur pour la colonne latrale, vous allez insrer le code suivant:
<?php get_footer(); ?>

Enregistrez votre fichier et rafrachissez votre navigateur. Vous avez maintenant un pied de page qui affiche les informations que vous venez dinsrer (voir Figure6.34).
Figure6.34
Affichage du pied de page.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

212

WordPress ct dveloppeur: concevoir un thme


Pour terminer, vous allez placer le crochet (hook) pour les extensions directement sous le code insr prcdemment et avant la fermeture de la div footer:
</p> <?php wp_footer(); ?> </div>

Cration des fichiers pour les diffrents types de pages


Pour le moment, vous navez quun type de page, index.php. Cest donc elle qui est utilise pour afficher toutes les pages du blog: accueil, article seul, page statique seule Conformment la hirarchie des modles WordPress, vous allez maintenant concevoir dautres fichiers pour les diffrents types de pages. Vous ne crerez pas tous les fichiers proposs par la hirarchie, mais uniquement les pages qui sont incontournables, savoir: la page darticle (single.php); les pages statiques (page.php); la page darchives, de catgories et de mots-clefs (archive.php); la page affichant les rsultats de recherche (search.php). Cration de la page d'article Si vous vous rendez sur la page daccueil de votre blog et cliquez sur le titre dun de vos articles, vous arrivez sur larticle seul, qui reprend le contenu du fichier index.php. Vous avez donc len-tte, le contenu de larticle, la colonne latrale et le pied de page. Il vous manque quelque chose de trs important: les commentaires. Vous allez crer un fichier que vous appellerez single.php, et vous y copierez le contenu du fichier index.php. Ici, il y a une seule diffrence entre laffichage sur la page daccueil et celle-ci: le nombre de commentaires napparat plus dans les mtadonnes de larticle. En effet, ce marqueur de modle nest pas fonctionnel sur la page darticle. Qui plus est, tant donn que vous tes dj sur la page darticle, cette notion na plus grand intrt. Vous allez donc retirer le code, ainsi que llment sparateur qui le prcde, du fichier single.php, savoir:
| <?php comments_popup_link('Pas de commentaires', '1 Commentaire', '% Commentaires'); ?>

Insertion des commentaires dans la page d'article Nous avons vu dans les paramtrages des commentaires quil existe deux manires de les afficher: sous forme de liste linaire, sans hirarchie et uniquement dans le sens antchronologique; sous forme de conversation hirarchique o il est possible de rpondre un commentaire en particulier, selon le nombre de niveaux dfinis. Cette notion de conversation hirarchise est apparue avec la version 2.7 de WordPress. Avant, seule la premire fonction tait disponible.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Crer son propre thme WordPress

213

Mais attention, la conversation hirarchise est propose partir de la version2.7 de WordPress mais elle nest pas active par dfaut. Nous en avons dj parl prcdemment mais cela reste une option. Vous pouvez trs bien afficher vos commentaires sous forme de liste ordonne, sans niveau, comme ctait le cas auparavant. Avec larrive de cette fonctionnalit, le code des commentaires de WordPress a t modifi. Ainsi, de nombreux thmes ont t crs avec lancien code, et dautres plus rcents ont t crs avec le nouveau code. Ici, nous allons construire notre thme avec le nouveau code des commentaires, qui permet une gestion hirarchique de la conversation, mais nous verrons galement comment crer la partie "commentaires" avec lancien code. En effet, si vous utilisez une version de WordPress antrieure la 2.7, le nouveau code ne fonctionnera pas. Vous aurez donc besoin de lancien. Qui plus est, de nombreux thmes ont t crs avant la sortie de la version2.7 de WordPress et utilisent donc lancien code. Par consquent, que vous souhaitiez crer un thme pour une version de WordPress antrieure la 2.7 ou que vous souhaitiez simplement comprendre comment fonctionnent les commentaires sur des thmes conus pour les versions prcdentes de WordPress, il est important de dtailler le code et de vous permettre de lutiliser. Cration du fichier comments.php permettant les commentaires hirarchiss (WordPress2.7 et suprieures) Les commentaires vont apparatre sur la page darticle de notre thme. Le fichier concern est single.php. Vous allez donc ouvrir ce fichier et y insrer un marqueur de modle pour appeler le fichier des commentaires, comments.php. En effet, comme nous lavons vu au chapitre prcdent, les commentaires font partie dun fichier spar de celui de larticle. Le modle utilis sera comments_template(), et le code insrer dans le fichier single. php est le suivant:
<div class="comments-template"> <?php comments_template(); ?> </div> <?php endwhile; ?>

Vous lajoutez directement au-dessus de la commande endwhile. Nous utilisons une balise avec une classe que nous appelons comments-template et le modle comments_template() pour afficher les commentaires sur la page darticle. Crez maintenant un nouveau fichier, que vous appellerez comments.php. Dans ce fichier, vous ajouterez toutes les informations qui permettront dafficher les commentaires mais aussi le formulaire de rponse. Commencez par insrer le code suivant:
<?php // Do not delete these lines if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_ SERVER['SCRIPT_FILENAME']))

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

214

WordPress ct dveloppeur: concevoir un thme


die ('Merci de ne pas lancer cette page directement.'); if ( post_password_required() ) { ?> <p class="nocomments">Cet article est protg par un mot de passe. Entrez ce mot de passe pour lire les commentaires.</p> <?php return; } ?>

Ces premires lignes sont utilises pour la gestion des articles par mot de passe. Si un article est protg par un mot de passe, les commentaires ne safficheront pas et le message suivant apparatra la place: "Cet article est protg par un mot de passe. Entrez ce mot de passe pour lire les commentaires." Ensuite, ajoutez la boucle des commentaires sous WordPress:
<!-- You can start editing here. --> <?php if ($comments) : ?> <h3 id="comments"><?php comments_number('Aucun commentaire', 'Un commentaire', '% commentaires' );?> pour &#8220;<?php the_title();?> &#8221;</h3> <ol class="commentlist"> <?php wp_list_comments(); ?> </ol> <div class="navigation"> <div class="alignleft"><?php previous_comments_link() ?></div> <div class="alignright"><?php next_comments_link() ?></div> </div> <?php else : // this is displayed if there are no comments so far ?> <?php if ('open' == $post->comment_status) : ?> <!-- If comments are open, but there are no comments. --> <?php else : // comments are closed ?> <!-- If comments are closed. --> <p class="nocomments">Les commentaires sont ferm&eacute;s.</p> <?php endif; ?> <?php endif; ?>

Voyons dans le dtail le contenu de ces quelques lignes de code. La structure de la boucle des commentaires a la forme suivante:
<?php if ($comments) : ?>

Sil y a des commentaires, nous allons les afficher. Mais tout dabord nous afficherons le nombre de commentaires pour larticle en question:
<h3 id="comments"><?php comments_number('Aucun commentaire', 'Un commentaire', '% commentaires' );?> pour &#8220;<?php the_title(); ?>&#8221;</h3>

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Crer son propre thme WordPress

215

Ensuite, nous afficherons les commentaires par le biais du marqueur de modle wp_list_ comments() apparu avec la version2.7 de WordPress:
<ol class="commentlist"> <?php wp_list_comments(); ?> </ol>

Ce marqueur englobe toute une srie dinformations comme: lavatar du commentateur; le nom du commentateur; la date de commentaire; le contenu du commentaire; un lien pour rpondre au commentaire si loption a t active (voir Chapitre3). WordPress, depuis sa version2.7, permet galement de choisir le nombre de commentaires afficher par page. Ici, nous allons insrer des liens permettant de naviguer sur les diffrentes pages de commentaires:
<div class="navigation"> <div class="alignleft"><?php previous_comments_link() ?></div> <div class="alignright"><?php next_comments_link() ?></div> </div>

Ensuite, nous ajouterons le contenu dans le cas o il ny aurait pas de commentaires ou que ceux-ci seraient ferms:
<?php else : // this is displayed if there are no comments so far ?> <?php if ('open' == $post->comment_status) : ?> <!-- If comments are open, but there are no comments. --> <?php else : // comments are closed ?> <!-- If comments are closed. --> <p class="nocomments">Les commentaires sont ferm&eacute;s.</p> <?php endif; ?> <?php endif; ?>

Sil ny a pas de commentaires, rien ne saffiche, et si les commentaires sont ferms, alors la phrase suivante apparat: "Les commentaires sont ferms." Maintenant que la boucle des commentaires est insre, nous allons nous intresser au formulaire qui permettra au visiteur de laisser son propre commentaire. Tout dabord, vous allez ajouter les lignes suivantes, directement sous la boucle:
<?php if ('open' == $post->comment_status) : ?> <div id="respond"> <h3><?php comment_form_title( 'Laisser un commentaire', 'Laisser un commentaire &agrave; %s' ); ?></h3>

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

216

WordPress ct dveloppeur: concevoir un thme

<div class="cancel-comment-reply"> <small><?php cancel_comment_reply_link(); ?></small> </div>

La premire ligne indique que, si les commentaires sont ouverts, nous allons afficher le formulaire et donc insrer ce qui suit. Tout dabord, vous ouvrez la balise respond qui va englober toute la partie "rponse" des commentaires, cest--dire principalement le formulaire. Comme ici, vous pourrez laisser une rponse un commentaire prcis. Vous avez deux possibilits pour prsenter le formulaire. "Laisser un commentaire" saffiche si vous rpondez la suite dun commentaire, mais sans le faire directement. Et "Laisser un commentaire " apparat si vous rpondez directement un commentaire en particulier. Ensuite, vous affichez le marqueur de modle cancel_comment_reply_link() qui permettra de refermer le formulaire de contact prvu pour rpondre un commentaire prcis. Visuellement, lorsque vous rpondez un commentaire prcis, un formulaire de contact souvre directement sous ce commentaire (voir Figure6.35). Cette possibilit est offerte par JavaScript.
Figure6.35
Affichage du formulaire de rponse directement sous le commentaire.

Et, ce niveau-l, un lien vous permet de refermer le formulaire de rponse au commentaire. Ensuite, vous allez insrer quelques lignes de code qui seront utiles pour les blogs qui doivent obligatoirement tre connects pour laisser un commentaire:
<?php if ( get_option('comment_registration') && !$user_ID ) : ?> <p>Vous devez &ecirc;tre <a href="<?php echo get_option('siteurl'); ?>/wplogin.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">connect&eacute;</a> pour publier un commentaire.</p> <?php else : ?>

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Crer son propre thme WordPress

217

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform"> <?php if ( $user_ID ) : ?> <p>Connect&eacute; en tant que <a href="<?php echo get_option('siteurl'); ?>/ wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Log out of this account">Se d&eacute;connecter &raquo;</a></p>

En fait, ici, il y a une condition qui dit: "Si lenregistrement est obligatoire pour laisser un commentaire, alors le visiteur doit se connecter, sinon on affiche directement le formulaire de commentaire." Si lutilisateur est connect, diffrentes informations vont apparatre. Il aura notamment la possibilit de se dconnecter. Sil nest pas connect, nous allons afficher le formulaire complet de rponse. Pour cela, vous allez ajouter le code suivant:
<?php else : ?> <p><input type="text" name="author" id="author" value="<?php echo $comment_ author; ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> /> <label for="author"><small>Nom <?php if ($req) echo "(required)"; ?></small> </label></p> <p><input type="text" name="email" id="email" value="<?php echo $comment_ author_email; ?>" size="22" tabindex="2" <?php if ($req) echo "ariarequired='true'"; ?> /> <label for="email"><small>Adresse e-mail (ne sera pas publi&eacute;e) <?php if ($req) echo "(required)"; ?></small></label></p> <p><input type="text" name="url" id="url" value="<?php echo $comment_author_ url; ?>" size="22" tabindex="3" /> <label for="url"><small>Site Web</small></label></p> <?php endif; ?> <!--<p><small><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags(); ?></code></small></p>--> <p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"> </textarea></p> <p><input name="submit" type="submit" id="submit" tabindex="5" value="Dites-le !" /> <?php comment_id_fields(); ?> </p> <?php do_action('comment_form', $post->ID); ?> </form> </div>

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

218

WordPress ct dveloppeur: concevoir un thme


<?php endif; // If registration required and not logged in ?> <?php endif; // if you delete this the sky will fall on your head ?>

Comme pour la boucle des commentaires, nous allons prendre ici le temps de dtailler ces quelques lignes. Nous allons tout dabord afficher les diffrentes lignes du formulaire reprenant le nom, ladresse e-mail et le site web, tout en leur donnant une taille:
<?php else : ?> <p><input type="text" name="author" id="author" value="<?php echo $comment_ author; ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> /> <label for="author"><small>Nom <?php if ($req) echo "(required)"; ?></small> </label></p> <p><input type="text" name="email" id="email" value="<?php echo $comment_ author_email; ?>" size="22" tabindex="2" <?php if ($req) echo "ariarequired='true'"; ?> /> <label for="email"><small>Adresse e-mail (ne sera pas publi&eacute;e) <?php if ($req) echo "(required)"; ?></small></label></p> <p><input type="text" name="url" id="url" value="<?php echo $comment_author_ url; ?>" size="22" tabindex="3" /> <label for="url"><small>Site Web</small></label></p> <?php endif; ?>

Ensuite, nous avons la possibilit dinsrer une ligne qui permettra au commentateur de savoir quels marqueurs il peut utiliser dans le formulaire (voir Figure6.36).
<!--<p><small><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags(); ?></code></small></p>-->

Figure6.36
Marqueurs utilisables dans le formulaire de commentaire.

Cependant, cette fonctionnalit nest pas active puisquelle est prsente comme commentaire. Pour lactiver, il suffit de retirer les <!-- et --> situs avant et aprs le code. Enfin, nous affichons la zone de saisie du texte, ainsi que le bouton pour valider son commentaire, et nous refermons lensemble du formulaire, ainsi que les diffrentes conditions que nous avons ouvertes prcdemment.
<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"> </textarea></p> <p><input name="submit" type="submit" id="submit" tabindex="5" value="Ditesle!" /> <?php comment_id_fields(); ?>

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Crer son propre thme WordPress


</p> <?php do_action('comment_form', $post->ID); ?> </form> </div> <?php endif; // If registration required and not logged in ?> <?php endif; // if you delete this the sky will fall on your head ?>

219

Nous avons vu un peu plus haut que le formulaire de rponse directe allait se positionner directement sous le commentaire en utilisant du JavaScript. Cette option ne sera effective que si vous ajoutez un morceau de code dans votre fichier header.php, juste au-dessus du hook wp_head():
if ( is_singular() ) wp_enqueue_script( 'comment-reply' );

Une fois que vous avez insr ce code, enregistrez et fermez votre fichier header.php. Faites de mme pour votre fichier comments.php. Ouvrez alors votre navigateur et allez sur la page de votre blog. La zone rserve aux commentaires apparat dsormais sous le contenu de vos articles (voir Figure6.37).
Figure6.37
Affichage des commentaires, liste hirarchise.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

220

WordPress ct dveloppeur: concevoir un thme


Cration du fichier comments.php pour la version2.6 de WordPress et infrieures Ici, pas de commentaires hirarchiss, nous allons simplement crer une liste ordonne de commentaires. Le principe est quasi le mme que pour la version2.7 du fichier comments.php, mais quelques diffrences prs qui ont leur importance. Voici donc en dtail le contenu de ce fichier pour la version2.6 de WordPress ainsi que les versions prcdentes. Tout dabord, insrez les lignes de code suivantes:
<?php // Do not delete these lines if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename ($_SERVER['SCRIPT_FILENAME'])) die ('Merci de ne pas lancer cette page directement.'); if (!empty($post->post_password)) { // if there's a password if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) { // and it doesn't match the cookie ?> <p class="nocomments">Cet article est protg par un mot de passe. Entrez ce mot de passe pour lire les commentaires.</p> ?php return; } } /* This variable is for alternating comment background */ $oddcomment = 'class="alt" '; ?>

Ces quelques lignes vont nous renseigner sur: le fait que ce fichier nest pas lanc directement, mais bien aussi dune autre page; la vrification du mot de passe pour les articles protgs; la mise en place dune variable contenant la classe CSS qui nous permettra au besoin de styler diffremment les commentaires pairs et impairs. Ensuite, insrez le code suivant:
<?php if ($comments) : ?>

Cette ligne stipule que sil y a des commentaires, il faut dclencher le code contenu dans le bloc de cette condition. Voici le contenu de ce bloc:
<h3 id="comments"><?php comments_number('Aucun commentaire', 'Un commentaire', '% commentaires' );?> pour &#8220;<?php the_title(); ?>&#8221;</h3>

Vous affichez un titre en h3, qui va prcder lensemble des commentaires et qui va dire combien il y a de commentaires marqueur de modle comments_number() pour larticle en question marqueur de modle the_title(). Maintenant nous allons afficher la liste complte de ces commentaires:
<ol class="commentlist"> <?php foreach ($comments as $comment) : ?> <?php $comment_type = get_comment_type(); ?>

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Crer son propre thme WordPress

221

<?php if($comment_type == 'comment') { ?> <li <?php echo $oddcomment; ?>id="comment-<?php comment_ID() ?>"> <div class="comment_author"><?php echo get_avatar( $comment, 32 ); ?> <div class="comment_info"><cite><?php comment_author_link() ?></cite> <?php if ($comment->comment_approved == '0') : ?> <em>Votre commentaire est en attente de mod&eacute;ration.</em> <?php endif; ?> <br /> <small class="commentmetadata"><a href="#comment-<?php comment_ID() ?> " title=""><?php comment_date('j F Y') ?> <?php comment_time() ?></a> <?php edit_comment_link('Editer','-- ',''); ?></small> <?php comment_text() ?> </li> <?php /* Changes every other comment to a different class */ $oddcomment = ( empty( $oddcomment ) ) ? 'class="alt" ' : ''; ?> <?php } /* End of is_comment statement */ ?> <?php endforeach; /* end for each comment */ ?> </ol>

Ces commentaires apparaissent sous forme de liste ordonne (balise ol), et pour chacun deux, WordPress affichera: Lidentifiant du commentaire, comment_ID(). Lavatar du commentateur, cest--dire une image lie son adresse e-mail, get_avatar(). Le nom de lauteur du commentaire, avec un lien vers son blog si celui-ci a t prcis, comment_author_link(). Un test pour voir si le commentaire na pas encore t approuv par le propritaire du blog ($comment->comment_approved == '0'). Si cest effectivement le cas, alors le texte suivant saffichera: "Votre commentaire est en attente de modration." Les donnes suivantes: sa date de publication, comment_date(); un lien direct pour le modifier, edit_comment_link(); enfin, le commentaire lui-mme, comment_text(). Chacune de ces informations est proprement balise avec des classes explicites, afin de pouvoir facilement toutes les styler via CSS. Ensuite, nous insrons un code qui va nous permettre de sparer les commentaires des rtroliens:
<ol class="trackbacks-layout"> <?php foreach ($comments as $comment) : ?> <?php $comment_type = get_comment_type(); ?> <?php if($comment_type != 'comment') { ?> <li><?php comment_author_link() ?></li> <?php } ?> <?php endforeach; ?> </ol>

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

222

WordPress ct dveloppeur: concevoir un thme


Il sagit l dune seconde boucle qui parcourt cette fois uniquement les commentaires de types autres (donc rtroliens et pings) pour leur donner un traitement particulier. Ceux-ci ne verront affich que le nom du blog do ils proviennent (le nom de lauteur dans ce contexte). Sil ny a pas de commentaires, alors WordPress naffiche rien; dans le cas o les commentaires sont ferms, il affiche le texte "Les commentaires sont ferms".
<?php else : // this is displayed if there are no comments so far ?> <?php if ('open' == $post->comment_status) : ?> <!-- If comments are open, but there are no comments. --> <?php else : // comments are closed ?> <!-- If comments are closed. --> <p class="nocomments">Les commentaires sont ferm&eacute;s. </p> <?php endif; ?> <?php endif; ?>

Il faut ensuite afficher le formulaire pour laisser un commentaire. Ici, le fichier prend en compte les blogs sur lesquels un visiteur ne peut laisser un commentaire que sil est connect et inscrit comme utilisateur du blog, ou alors tout simplement sil est le rdacteur du blog. Ainsi, si lauteur du blog a dcid de laisser ses commentaires ouverts tous ou seulement aux membres inscrits, votre thme pourra prendre son choix en compte.
<?php if ('open' == $post->comment_status) : ?> <h3 id="respond">Laisser un commentaire</h3> <?php if ( get_option('comment_registration') && !$user_ID ) : ?> <p>Vous devez tre <a href="<?php echo get_option('siteurl'); ?>/wp-login. php?redirect_to=<?php echo urlencode(get_permalink()); ?>">connect&eacute;</a> pour publier un commentaire.</p> <?php else : ?> <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">

Si lutilisateur est connect, il verra ses informations de connexion affiches: son identifiant public, avec lequel il va signer son commentaire, et ladresse de son site si elle existe. Ilpourra aussi choisir de se dconnecter.
<?php if ( $user_ID ) : ?> <p>Connect&eacute; en tant que <a href="<?php echo get_option('siteurl'); ?>/ wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Se dconnecter du site.">Se d&eacute;connecter &raquo;</a></p>

Sil nest pas connect, il pourra saisir son nom, son adresse e-mail et ladresse de son site web:
<?php else : ?> <p><input type="text" name="author" id="author" value="<?php echo $comment_ author; ?>" size="22" tabindex="1" /> <label for="author"><small>Nom <?php if ($req) echo "(obligatoire)"; ?></ small></label></p> <p><input type="text" name="email" id="email" value="<?php echo $comment_ author_email; ?>" size="22" tabindex="2" /> <label for="email"><small>Adresse e-mail (ne sera pas publi) <?php if ($req) echo "(obligatoire)"; ?></small></label></p>

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Crer son propre thme WordPress

223

<p><input type="text" name="url" id="url" value="<?php echo $comment_ author_url; ?>" size="22" tabindex="3" /> <label for="url"><small>Site Web</small></label></p> <?php endif; ?>

Vous avez la possibilit dafficher une liste de balises XHTML qui seront autorises dans la rdaction du commentaire. Vous retrouvez ensuite la zone de saisie du commentaire et, enfin, le bouton de validation du commentaire:
<!--<p><small><strong>XHTML:</strong> Vous pouvez utiliser ces tags: <code><?php echo allowed_tags(); ?></code></small></p>--> <p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"> </textarea></p> <p><input name="submit" type="submit" id="submit" tabindex="5" value="Dites-le !" /> <input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" /></p> <?php do_action('comment_form', $post->ID); ?> </form> <?php endif; // If registration required and not logged in ?> <?php endif; // if you delete this the sky will fall on your head ?>

Une fois le fichier comments.php du thme default copi dans le dossier de votre propre thme, rafrachissez la fentre de votre navigateur. La partie consacre aux commentaires apparat effectivement sous votre article et avant le contenu de la colonne latrale. Si vous avez dj quelques commentaires, vous pouvez les voir apparatre (voir Figure6.38).
Figure6.38
Affichage des commentaires, liste ordonne.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

224

WordPress ct dveloppeur: concevoir un thme


Cration de la page d'archives, de catgories et de mots-clefs Le fichier archive.php va non seulement permettre dafficher une page darchives, mais il sera galement utilis pour les pages des catgories et des mots-clefs. Pour cela, nous allons prendre la hirarchie WordPress rebours et utiliser une version adapte du fichier index.php. Vous allez reprendre le contenu du fichier index.php, mais vous le modifierez lgrement pour ne faire apparatre que le dbut de larticle. Vous allez donc crer un nouveau fichier, archive.php, et y coller tout le contenu du fichier index.php. Ensuite, vous chercherez la boucle WordPress et dans celle-ci vous remplacerez:
<?php the_content(); ?>

par
<?php the_excerpt(); ?>

Ici, tout le contenu de larticle, the_content(), sera remplac par ses 55premiers mots, the_excerpt(). Enregistrez le fichier et allez sur la page daccueil de votre blog. Cliquez sur une des catgories prsentes dans la colonne latrale: vous voyez dsormais une page avec les premires lignes des articles et non plus leur contenu en entier (voir Figure6.39).
Figure6.39
Affichage de la page d'archives.

Cration de la page d'affichage des rsultats de recherche Vous allez crer un nouveau fichier, search.php, et copier son contenu au-dessus, savoir dans archive.php lui-mme dj adapt de index.php. Ceux-ci ne sont pas lis dans la

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Crer son propre thme WordPress

225

hirarchie des fichiers WordPress. De ce fait, si vous ne crez pas de fichier search.php, cest index.php qui sera utilis. Cration du fichier pour afficher les pages statiques du blog Ici, une fois de plus, vous allez utiliser le contenu du fichier index.php, tout en retirant quelques informations qui ne sont pas trs utiles pour ce type de page, savoir les mtadonnes pour la page. Crez donc le fichier page.php et copiez-y le contenu de lindex. Ensuite, enlevez les mtadonnes:
<p class="postmetadata"> <?php the_time('j F Y'); ?> par <?php the_author(); ?> | Cat&eacute;gorie: <?php the_category(', '); ?> | <?php comments_popup_link('Pas de commentaires', '1 Commentaire', '% Commentaires'); ?> <?php edit_post_link('Editer', ' &#124; ', ''); ?> </p>

Enfin, sous le php endwhile, et avant le php endif, insrez le code suivant:
<?php edit_post_link('Modifier cette page', '<p>', '</p>'); ?>

Ce code va ajouter une ligne, sous larticle, qui vous permettra de modifier son contenu directement, comme la fonction "edit", au niveau de chaque article. Enregistrez le fichier, et rafrachissez le navigateur. Maintenant, les autres pages de votre blog apparaissent sans les mtadonnes (voir Figure6.40).
Figure6.40
Affichage d'une page statique.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

226

WordPress ct dveloppeur: concevoir un thme


Cration de la page 404 La page 404 saffiche lorsque la requte du visiteur ne mne rien soit que larticle demand a t effac/ferm, soit que ladresse saisie nexiste tout simplement pas. Le visiteur reoit alors un message linformant que ce quil cherche nexiste pas. Dans cette page, vous allez insrer la structure du blog, savoir len-tte, la colonne latrale et le pied de page, et vous remplacerez le contenu par une petite phrase simple du style "Dsol, mais vous cherchez quelque chose qui ne se trouve pas ici", accompagne dun formulaire de recherche pour aider le visiteur trouver ce quil cherche sur votre blog. Commencez par crer un fichier 404.php. Dans ce fichier, copiez le fichier index.php, puis retirez le contenu de la balise content, cest--dire la boucle WordPress:
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?> <div class="post" id="post-<?php the_ID(); ?>"> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"> <?php the_title(); ?></a></h2> <p class="postmetadata"> <?php the_time('j F Y'); ?> par <?php the_author(); ?> | Cat&eacute;gorie: <?php the_category(','); ?> | <?php comments_popup_link('Pas de commentaires', '1 Commentaire', '% Commentaires'); ?><?php edit_post_link('Editer', ' &#124; ', ''); ?> </p> <div class="post_content"> <?php the_content(); ?> </div> <p class="tags"><?php the_tags(); ?></p> </div> <?php endwhile; ?> <?php else : ?> <h2 class="center">Introuvable</h2> <p class="center">D&eacute;sol&eacute;, mais vous cherchez quelque chose qui ne se trouve pas ici .</p> <div id="searchno"><?php include (TEMPLATEPATH . "/searchform.php"); ?></div> <?php endif; ?>

Et remplacez toute cette section par le code suivant, qui comprend une phrase courte expliquant que WordPress na rien trouv en rapport avec la demande du visiteur, ainsi que notre formulaire de recherche:
<p>Dsol, mais vous cherchez quelque chose qui ne se trouve pas ici .</p> <?php include (TEMPLATEPATH . "/searchform.php"); ?>

Ouvrez maintenant votre navigateur et tapez lURL de votre blog avec quelques lettres alatoires la fin, par exemple www.monblog.com/fgrggreg. Normalement, WordPress ne va rien trouver et affichera le contenu de la page404 (voir Figure6.41).

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Crer son propre thme WordPress


Figure6.41
Affichage de la page 404.

227

Navigation entre les pages de rsultats Il est toujours important de proposer un visiteur qui arrive sur la page daccueil, ou sur une page de catgories, par exemple, un lien en bas de chaque page lui permettant daller voir le reste des articles ou des rsultats. Vous allez donc insrer un morceau de code qui permettra de naviguer de page en page. Ce code devra tre plac sur les fichiers suivants: index.php; archive.php; search.php. Ce code est insrer aprs la fin de laffichage des articles dans la boucle, savoir <?php
endwhile; ?>:
<div class="navigation"> <div class="alignleft"><?php next_posts_link('&laquo; Articles plus anciens') ?></div> <div class="alignright"><?php previous_posts_link('Articles plus rcents &raquo;') ?></div> </div>

Validation XHTML du thme


Votre thme est dsormais termin pour ce qui concerne le code XHTML et PHP. Avant de passer la personnalisation du thme et sa mise en forme, vous allez devoir valider votre thme auprs du W3C (www.w3.org), qui est en quelque sorte lorganisme charg de promouvoir les standards du Web. Si vous travaillez en local, vous devez rcuprer le code source pour effectuer la validation. Chaque navigateur est cens proposer le code source dans un de ses onglets. Par exemple, sous Firefox, cela se passe sous longlet Affichage, puis Code source de la page. Rendez-vous donc sur la page web de votre blog et rcuprez le code source. Vous le copierez puis irez sur le site de validation du W3C, ladresse http://validator.w3.org. Si votre blog est dj en ligne, vous naurez qu soumettre son URL la mme adresse (voir Figure6.42).

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

228
Figure6.42

WordPress ct dveloppeur: concevoir un thme

Soumission du blog la validation du W3C.

Sur le site, vous avez trois manires diffrentes de soumettre votre blog: soit par lURL si votre thme est en ligne, soit en joignant un fichier, soit en soumettant le code source directement. Choisissez la mthode la plus approprie votre situation et soumettez votre code validation en appuyant sur le bouton Check. Si vous avez bien suivi lensemble de ce chapitre, la fentre suivante apparat (voir Figure6.43).
Figure6.43
Validation XHTML de votre blog.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

CRER SON PROPRE THME WORDPRESS

229

Le code est donc valide et vous tes maintenant prt vous attaquer la mise en forme de votre blog. Dans le cas contraire, rcuprez directement sur http://apprendre-wordpress. fr/livre les diffrents fichiers du thme creation_theme.

Fonctions et options avances de WordPress


WordPress regorge de fonctionnalits et de possibilits. Cest dailleurs pour cela que beaucoup de webdesigners adorent la plate-forme. Dans cette section, vous allez dcouvrir quelques fonctions dites "avances" de WordPress, dont certaines ont dj t voques plus tt. Elles vous permettront de pousser encore un peu plus loin la personnalisation de votre blog et de votre thme. Celles-ci ne sont quun chantillon des possibilits de WordPress et la plupart restent en relation directe avec la cration dun article ou dune page.

Fonction "more"
Le but de la fonction "more" est de permettre un affichage partiel de larticle sur la page daccueil de votre blog (voir Figure6.44). Il vous suffit dutiliser le bouton prvu cet effet dans les diteurs visuels et HTML, de lappliquer lendroit o vous souhaitez "couper" larticle sur la page et de ninsrer quune partie du texte sur la page daccueil.
Figure6.44
Exemple de fonction "more".

Paramtrage du thme pour utiliser la fonction "more" Si la fonction est utilisable sans paramtrages avec le thme par dfaut, il risque den tre autrement avec un certain nombre dautres thmes. Il est donc important de savoir comment fonctionne cette option. Nous partons du principe que nous utilisons le thme default de WordPress. Nous allons donc chercher le fichier qui va tre employ ici pour faire apparatre les articles "tronqus" sur la page daccueil du blog. Il sagit bien du fichier index.php.

230

WordPress ct dveloppeur: concevoir un thme


Rendez-vous sur votre hbergement et sous le dossier themes, ouvrez celui qui sappelle default et trouvez-y le fichier index.php que vous allez afficher dans votre diteur de texte. Vous allez y chercher le code suivant:
<div class="entry"> <?php the_content('Lire le reste de cet article &raquo;'); ?> </div>

Dans ce code, nous retrouvons le marqueur php the_content, qui a pour objectif, comme son nom lindique, dafficher le contenu. Derrire, entre parenthses, nous avons le texte qui va safficher ds que nous utiliserons la fonction "more". Vous savez dornavant o modifier le texte qui saffichera en bas de vos articles "tronqus" sur la page daccueil de votre blog. Ensuite, la fonction "more" ne sera effective que si votre thme emploie le marqueur php the_content. Certains thmes utilisent le marqueur php the_excerpt. Celui-ci ressemble beaucoup la fonction "more" puisquil va, lui aussi, proposer un article tronqu en page daccueil. Cependant, dans ce cas prcis, vous ne pourrez pas choisir o vous souhaitez couper le texte. WordPress le fera automatiquement au 55emot. Par consquent, si vous souhaitez utiliser la fonction "more", vrifiez bien au pralable que votre thme est correctement paramtr. Notez galement que la fonction "more" peut tre utilise sur tous les fichiers sauf sur les permaliens du blog, cest--dire les pages darticles.

Afficher un extrait d'article


Le concept ici est quelque peu semblable lutilisation de la fonction "more". Sur la page de rdaction dun article, vous avez, dans les options avances, un champ qui vous permet dajouter un "extrait" (voir Figure6.45).
Figure6.45
Champ pour insrer un extrait d'article.

Dans ce champ, vous pouvez rdiger un petit rsum de votre article, quelques phrases qui vont synthtiser le contenu ou alors le prsenter. Et cest ce texte qui saffichera notamment sur la page daccueil la place de larticle entier ou tronqu. Cependant, contrairement la fonction "more", lutilisation de cette option nest possible quavec le marqueur php the_excerpt. Pensez donc bien modifier votre thme de la mme manire que pour la fonction "more", pour utiliser lextrait.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Crer son propre thme WordPress

231

Insertion de vignettes dans votre thme...


Depuis quelques annes, la notion de blog a beaucoup volu. Le fameux journal des dbuts a progressivement laiss place des thmes plus complexes, notamment avec les thmes magazines. Ce type de thme a apport notamment une fonction intressante qui consiste afficher une image associe un article sur la page daccueil du site. Un exemple typique de ce genre de blog se trouve la Figure6.46.
Figure 6.46
Exemple de blog avec vignette associe un article.

Dans cette partie, nous allons voir comment insrer ce type dimage dans votre thme. Au chapitre suivant, nous verrons comment le mettre en forme et lintgrer visuellement dans le thme. ... via la fonction interne WordPress Depuis la version 2.9, WordPress a une fonction de base qui permet dinsrer des vignettes dans les articles. Cette fonction reste trs simple comprendre et mettre en place. Tout dabord, il va falloir activer cette fonction en ajoutant une ligne de code dans le thme. Cette ligne de code est la suivante:
add_theme_support( 'post-thumbnails' );

Ensuite, vous allez insrer le code correspondant dans le thme pour pouvoir afficher cette vignette. Ce code est:
<?php the_post_thumbnail('thumbnail'); ?>

Nous allons placer ce code entre le titre et le contenu de larticle:


<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a><div id="home-comments"><?php comments_popup_link(' (0)', ' (1)', ' (%)'); ?></div><?php edit_post_link('Editer', ' &#124; ', ''); ?></h2>

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

232

WordPress ct dveloppeur: concevoir un thme


<?php the_post_thumbnail('thumbnail'); ?> <div class="post_content"> <?php the_content(); ?> </div>

Pour vrifier que votre code fonctionne comme il faut, vous allez insrer une vignette dans un de vos articles. Comme nous lavons dj vu au Chapitre3, pour insrer une vignette il vous faut cliquer sur le bloc Image la une en bas gauche de la page de rdaction dun article (voir Figure6.47).
Figure6.47
Insrer une "image la une".

Une fois la photo insre, validez le tout et allez voir sur votre blog si tout fonctionne comme il faut. Votre image apparat bien entre le titre et le contenu de larticle que vous venez de modifier. Maintenant, il vous faut choisir une taille pour cette vignette. Pour ce faire, allez dans longlet Rglages, puis dans le sous-menu Mdias. On vous propose ici de donner une taille pour les miniatures utiliser. Nous allons mettre 150pixels (voir Figure6.48).
Figure6.48
Ajuster la taille des vignettes 150 pixels.

Validez le tout. Le problme avec cette nouvelle fonction est quelle ne permet pas encore de rgnrer les vignettes dj cres pour le site. Ici, on a dj gnr des vignettes de tailles diffrentes, et WordPress ne sait pas rgnrer une nouvelle vignette avec les nouvelles dimensions affiches. Plusieurs possibilits se prsentent alors: vous chargez une nouvelle fois la photo dans votre article, en supprimant au pralable la prcdente; mais vous pouvez trs bien utiliser une extension, Regenerate Thumbnails (http://www.viper007bond.com/wordpress-plugins/ regenerate-thumbnails/), qui va rgnrer toutes les vignettes du site dans les nouvelles tailles. Cette seconde alternative devrait tre disponible par dfaut dans une prochaine version de WordPress. Une fois les modifications faites, retournez sur votre blog, et vous pouvez voir que la vignette a chang de taille et fait maintenant 150pixels. Maintenant, peut-tre souhaitez-vous galement avoir cette image sur la page de votre article? Rien de plus simple pour cela, vous allez insrer la mme fonction the_post_thumbnail mais en lui donnant cette fois-ci un attribut pour que WordPress utilise non plus la "taille des miniatures" des images que vous importez, mais la "taille moyenne" (onglet Rglages, sous-menu Mdias).

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Crer son propre thme WordPress


Le code insrer dans le fichier single.php sera le suivant:
<?php the_post_thumbnail('medium'); ?>

233

Il sera placer toujours entre le titre et le contenu de larticle. ... via l'utilisation des champs personnaliss Cette utilisation, assez spcifique, nest pas aussi flexible que celle prsente ci-dessus. Cela dit, elle est toujours dactualit sur diffrents sites et, surtout, elle vous permettra de comprendre lutilisation des champs personnaliss, qui sont une des fonctions puissantes deWordPress. Tout comme lextrait, les champs personnaliss sont une option avance de la rdaction darticle sur WordPress (voir Figure6.49).
Figure6.49
Champs personnaliss.

Un champ personnalis est compos de deux donnes: une cl; une valeur. Ces deux variables vont toujours de pair et ne fonctionnent quensemble. La cl est le nom de la donne mta. Elle figure dans le code du template et va permettre laffichage de la valeur. Par exemple, si vous souhaitez afficher une image dans les articles de votre page daccueil, la cl pourra sappeler par exemple vignette_home et la valeur sera lURL de limage afficher. Comment les paramtrer? Pour utiliser les champs personnaliss sur votre blog, il va falloir les paramtrer dans votre thme WordPress. Le marqueur de base employ pour les champs personnaliss est:
<?php the_meta();?>

Il faut imprativement que ce marqueur soit plac lintrieur de votre boucle WordPress pour tre actif.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

234

WordPress ct dveloppeur: concevoir un thme


Pour crer des vignettes laide des champs personnaliss, nous allons tout dabord insrer la structure HTML qui nous permettra dafficher une image. Cette structure est:
<a href= "URL du lien"><img src= "URL de l'image" /></a>

Limage sera associe un lien qui pointera vers larticle en question. Nous devons tout dabord utiliser un marqueur WordPress nous permettant de rcuprer lURL de larticle automatiquement. Ce marqueur est:
<?php the_permalink();?>

Nous allons lintgrer la structure de base HTML. Nous obtenons alors:


<a href= "<? php the_permalink(); ?>" > <img src= "URL de l'image" /></a>

Maintenant, il va falloir insrer lURL de limage. Nous allons faire appel un marqueur spcifique aux champs personnaliss pour rcuprer lURL de nos images. Nous nutiliserons pas le marqueur prsent plus haut pour linsertion des images, mais un autre, plus complet et plus appropri ce genre dusage. Ce marqueur est:
<?php get_post_custom_values($key);?>

Ce marqueur va nous permettre de paramtrer la cl et donc dutiliser les champs personnaliss de manire trs souple. Ici, nous pourrons employer autant de marqueurs que nous voudrons avec chacun une cl diffrente. Dans notre exemple, nous appelons cette cl vignette_home pour obtenir le code suivant:
<?php get_post_custom_values("vignette_home");?>

Cependant, ce code ne va pas suffire pour rcuprer la valeur du champ personnalis. Il faut justement lui ajouter la notion de "valeur":
<?php $values = get_post_custom_values("vignette_home"); echo $values[ 0];?>" id= "vignette_home" />

Ici, WordPress ira chercher et affichera toutes les valeurs ayant comme cl vignette_home. Ensuite, pour ce qui concerne linsertion de lURL de limage, nous pourrions trs bien la saisir entirement dans le champ personnalis, mais ce serait un peu long. Nous pourrions galement saisir directement lURL du blog dans le code insrer plutt que dutiliser un marqueur WordPress. Mais cette solution ne serait pas optimale car elle ne serait pas rutilisable sur un autre domaine. Nous allons employer un marqueur WordPress pour rcuprer lURL du blog. Ainsi, vous pourrez utiliser votre thme sur un autre blog et donc sur un autre nom de domaine tout en gardant cette fonctionnalit. La partie saisir dans le champ personnalis sera lURL de limage partir du dossier wp_content. Le marqueur que nous allons utiliser pour rcuprer lURL du blog est:
<?php echo get_option('Home'); ?>

Avec ce marqueur et le morceau de code prcdent, nous avons lURL complte de notre image. Il va nous falloir maintenant lintgrer dans la structure HTML de limage:

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Crer son propre thme WordPress

235

<img src= ""< ?php echo get_option('Home'); ?><? php $values = get_post_custom_ values("Image"); echo $values[ 0]; ?>" id= "vignette_home" />

En intgrant ce code dans le reste de la fonction, nous obtenons la structure globale suivante:
<a href="<? php the_permalink(); ?>"> <img src= "<? php echo get_option('Home'); ?><?php $values = get_post_custom_values("vignette_home"); echo $values[ 0]; ?>" id= "vignette_home" /></a>

Comme nous souhaitons utiliser cette fonction au niveau de la page daccueil, nous devons insrer ce code dans le fichier index.php, et plus prcisment dans la boucle WordPress. Vous allez donc ouvrir ce fichier avec votre diteur de texte et y insrer le code pour afficher les vignettes lendroit o vous voulez les voir apparatre sur votre page web. Enregistrez les modifications et rdigez un article pour tester la fonctionnalit. Au niveau des champs personnaliss, vous allez entrer les informations suivantes (voir Figure6.50): Cl: vignette_home. Valeur: wp-content/uploads/2008/11/image.jpg (insrez ici lURL de limage partir de wp-content).
Figure6.50
Insertion d'un champ personnalis.

Enregistrez le champ cr et publiez votre article. Rendez-vous sur la page daccueil de votre blog; limage que vous avez ajoute dans le champ personnalis apparat maintenant ct de votre article, en fonction de lendroit o vous avez insr votre code (voir Figure6.51).
Figure6.51
Insertion d'une vignette sur la page d'accueil.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

236

WordPress ct dveloppeur: concevoir un thme


vous ensuite de positionner et de dimensionner limage en fonction de vos besoins au moment de la cration du style de votre blog. Vous pouvez dcider davoir une petite vignette gauche du contenu, ou une plus grosse au-dessus du titre des articles. Voici quelques exemples qui vous aideront mieux choisir (voir Figures6.52 6.54).

Figure6.52
Affichage de vignette 1.

Figure6.53
Affichage de vignette 2.

Figure6.54
Affichage de vignette 3.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Crer son propre thme WordPress

237

Cration d'un modle de page


Un modle de page permet de choisir le contenu que vous allez voir apparatre sur vos pages. Par exemple, vous pouvez dcider dafficher la colonne latrale sur une page du blog mais pas sur une autre. Vous utiliserez alors deux modles de page diffrents. Leur conception est comparable celle dun fichier du thme. Vous allez y reprendre lensemble des parties du blog et y insrer le contenu que vous voulez voir apparatre. Voici par exemple le contenu du modle de page qui affichera la blogoliste pour le thme default:
<?php /* Template Name: Liens */ ?> <?php get_header(); ?> <div id="content" class="widecolumn"> <h2>Liens :</h2> <ul> <?php get_links_list(); ?> </ul> </div> <?php get_footer(); ?>

Tout dabord, vous avez la structure suivante:


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

Vous allez ici insrer le nom que vous donnez ce modle de page. Il vous permettra de distinguer les diffrents modles au moment den choisir un pour une de vos pages. Ensuite, vous retrouvez len-tte et le marqueur qui va vous permettre dafficher la blogoliste:
<?php get_links_list(); ?>

Et enfin, vous insrez le pied de page. Notez que ce modle de page naffiche pas de colonne latrale. Ce template sappelle links.php (voir Figure6.55) et est situ au mme niveau que les autres fichiers du blog. Si vous souhaitez crer un modle de page spcifique, vous devez reprendre le mme raisonnement que pour ce modle-ci. Vous pourrez insrer tous les lments que vous voulez voir safficher sur une nouvelle page de votre blog.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

238
Figure6.55
Fichier links.php.

WordPress ct dveloppeur: concevoir un thme

Lorsque le modle sera enregistr, vous pourrez crer votre nouvelle page et le choisir parmi les modles qui vous seront proposs (voir Figure6.56).
Figure6.56
Affichage des diffrents modles de page.

Cration d'un thme enfant


WordPress permet la cration de dclinaisons pour les thmes. Cest ce quon appelle un thme enfant. En fait, vous crez un thme en fonction dun autre thme qui, lui, sera appel thme parent. Prenons par exemple le thme default. Vous souhaitez le modifier pour lui donner une apparence plus personnelle. Plutt que de modifier directement les fichiers de thme, vous allez crer un thme enfant du thme default et lui apporter vos propres changements. Pour ce faire, vous allez crer un nouveau dossier, avec le nom de votre thme enfant. Dans ce dossier, vous crerez une nouvelle feuille de style. Comme pour la conception dun thme classique, vous insrerez les informations qui permettront de diffrencier ce thme des autres:
/* Theme Name: thme enfant WordPress Theme URI: http://www.fran6art.com/ Description: Thme cr de A Z avec le livre Campus WordPress. Version: 1.0 Author: Francis Chouquet

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Crer son propre thme WordPress


Template: default Author URI: http://www.fran6art.com/ Creation Theme by Francis Chouquet || http://www.fran6art.com */

239

Ici, les informations sont les mmes que pour nimporte quel thme, si ce nest que nous avons ajout une ligne template: default qui va permettre WordPress dassocier ce thme au thme parent default. Ainsi, si vous refermez maintenant la feuille de style, que vous transfrez le dossier de ce thme sur votre hbergement, sous le dossier wp-content> themes, et que vous allez sur la page de gestion des thmes sur linterface dadministration, vous verrez ce nouveau thme apparatre. Activez-le et vous constaterez quil utilise les fichiers du thme default. Word Press, en lisant les informations de la feuille de style, a compris que ctait un thme enfant de default. Maintenant, si vous rouvrez la feuille de style de votre thme enfant, vous allez pouvoir y faire toutes les modifications que vous voulez. Celles-ci seront prises en compte tout en continuant dutiliser les fichiers du thme default. Et depuis la version2.7 de WordPress, vous avez la possibilit de faire de mme avec tous les fichiers et pas uniquement avec la feuille de style. Admettons que vous souhaitiez changer len-tte du blog. Vous pouvez crer un nouveau fichier header.php, que vous allez intgrer dans le dossier de votre thme enfant. Au moment de laffichage du thme, WordPress verra quil y a un fichier header.php et lutilisera la place du fichier header.php du thme parent. Lun des principaux avantages des thmes enfants est de pouvoir modifier des thmes sans avoir besoin de corriger les fichiers. linstar des extensions, les thmes sont souvent mis jour. Si vous faites des modifications dans un thme existant, il vous sera impossible de le mettre jour par la suite. Tandis quen utilisant un thme enfant cette mise jour ne posera aucun problme.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Concevoir le design de son blog


Si le chapitre prcdent demandait quelques notions en PHP, ce chapitre va exiger que vous matrisiez quelques connaissances de base en CSS (Cascading Style Sheets).

Commencer avec un croquis


La ralisation dun design de site web, et notamment ici dun blog, se fait par tapes. En premier lieu, vous devez mettre en relief vos ides. Vous avez forcment des ides pour votre blog, et plutt que de passer directement sur un logiciel, il est important de prendre le temps de coucher ces ides sur le papier. Pas besoin ici dtre un excellent dessinateur, vous allez uniquement essayer de faire un rapide croquis de votre blog, avec les diffrents emplacements, voire des indications comme "tons clairs/ tons sombres", ou mme des tailles en pixels si vous souhaitez obtenir un croquis prcis. Pour notre exemple, vous allez raliser un thme simple partir des prrequis suivants: colonne principale large, pour laisser la place au contenu; colonne latrale droite; barre de navigation horizontale, qui laisse apparatre les sous-catgories au survol; fond original en dgrad; police Serif, telle que Georgia par exemple; titre du blog crit avec une police originale et plac dans une image. Avec ces informations, vous pouvez tablir un croquis qui donne dj un aperu simple, mais que vous pouvez facilement faire voluer. Cest le principe mme du croquis: donner une premire ide en quelques minutes, ide que lon peut faire voluer ou reprendre autant de fois que lon veut. Le croquis sur lequel nous allons baser notre feuille de style est reprsent la Figure7.01.
Figure7.01
Croquis de dpart.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

242

WordPress ct dveloppeur: concevoir un thme

Placement des diffrents lments du blog


Maintenant que vous avez la structure globale du thme, vous allez positionner les principaux lments que sont: len-tte; le contenu; la colonne latrale; le pied de page.

lments gnraux du thme


Tout dabord, vous allez mettre les premires rgles du style pour la balise body du code HTML. Cette balise contient lensemble du blog, et ces rgles seront donc applicables tous les lments HTML du blog. Cependant, ces rgles ne sont pas figes dans le marbre, elles seront modifiables ds lors que vous donnerez une indication plus prcise au niveau dune balise plus locale. Par exemple, vous allez dfinir une famille de polices pour lensemble du blog. Il se peut que par la suite vous dcidiez dutiliser un style de police diffrent pour les titres darticles. Vous dfinirez donc ce style au niveau de la balise concerne. Ce style prendra le pas sur celui dfini au dpart. Commencez par ouvrir votre feuille de style style.css et insrez le code suivant directement sous les informations du thme que vous avez intgres plus tt:
body { font-family: "Georgia", Times, Serif; font-size: 0.9em; text-align: left; background: #fff; color: #444; margin: 0; padding: 0; }

Dans ce slecteur pour la balise body, vous avez prcis la famille de polices que vous souhaitez utiliser. Ici, le choix sest port sur des polices Serif: Georgia en premire option, puis Times. Si la police Georgia nest pas installe sur lordinateur qui affiche la page web, Times sera le second choix. Et si celle-ci nest pas non plus installe, alors ce sera la police de type Serif de base. La taille du texte est pour le moment fixe 0,9em. Lavantage de lunit "em" est quelle changera de taille en fonction du zoom effectu sur la page. Par chance, aujourdhui, les derniers navigateurs prennent le changement de taille en compte, mme sur des tailles en pixels. Ensuite, vous avez positionn le texte gauche, donn un fond blanc lensemble du blog, puis vous avez choisi une couleur gris sombre pour le texte. Le noir reste la couleur la plus lisible, mais le gris sombre donne une certaine nuance au texte qui est plus esthtique.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Concevoir le design de son blog

243

Enfin, vous avez appliqu ce quon appelle un "reset CSS" trs simple. Le but de ces deux dernires lignes est de dire ds le dpart quil ny a aucune marge intrieure (padding) ni extrieure (margin) pour aucun lment. En effet, certains navigateurs appliquent une feuille de style par dfaut qui a tendance biaiser la mise en forme dun site web. Faire cette prcision ds le dpart vite les surprises par la suite pour les positionnements de certains blocs avec diffrents navigateurs. Enregistrez votre feuille de style et ouvrez votre navigateur sur la page de votre thme. Lensemble na pas encore beaucoup volu, mais il affiche dj le rsultat des rgles que vous venez dinsrer (voir Figure7.02).
Figure7.02
Insertion de la balise body dans le thme.

Vous allez maintenant attribuer quelques rgles la balise qui dispose de lID page. Cette balise englobe lensemble des diffrents lments du blog. Elle ne comprend pas toute la page web, contrairement la balise body, mais uniquement le contenu affich, ce qui est une nuance subtile mais ncessaire. Vous allez donc insrer les lignes suivantes, directement sous le style du slecteur body:
#page { margin: 0 auto 0 auto; width: 960px; }

Enregistrez les modifications et rafrachissez votre navigateur : votre blog est dsormais align au centre de la page web et possde une largeur de 960pixels (voir Figure7.03).

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

244
Figure7.03

WordPress ct dveloppeur: concevoir un thme

Alignement du thme au centre de la page web.

Cette largeur de 960pixels est choisie de faon arbitraire. Vous pouvez trs bien opter pour une autre largeur, en fonction de vos besoins.

Positionnement des diffrents lments


Vous allez maintenant dimensionner et positionner chacun des lments du blog, en commenant par donner une taille au contenu de la page et la colonne latrale. La largeur globale du contenu est de 960pixels. Nous appliquerons une marge extrieure de 20pixels de chaque ct et de 20pixels lintrieur. Pour ce thme, nous aurons une colonne latrale de 300pixels qui sera assez large pour accueillir toutes les informations ncessaires. Nous lui appliquerons galement une marge extrieure de 20pixels droite et de 20pixels gauche (voir Figure7.04).
Figure7.04
Largeur et marges du thme.

Insrez le code suivant pour votre colonne latrale, en reprenant les informations donnes ci-dessus:

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Concevoir le design de son blog


/* sidebar */ .sidebar { width: 300px; margin: 0 20px; }

245

Notez que toutes les parties du fichier style.css sont commentes pour pouvoir les dlimiter. Ces commentaires sont une nouvelle fois en anglais, dans le cas o vous souhaiteriez par la suite proposer votre thme au tlchargement. Enregistrez votre fichier style.css. Vous allez maintenant dfinir une taille pour le contenu de la colonne principale, qui sera positionne sur la gauche. Vous savez que cette colonne fait 960 pixels de large, que la colonne latrale fait 300pixels de large, avec une marge droite de 20pixels et une marge gauche de 20pixels. Noubliez pas non plus que le contenu doit galement avoir une marge gauche de 20pixels. partir de tout cela, il vous faut calculer la taille respecter pour que les blocs tiennent les uns dans les autres. Ce calcul est une simple soustraction partir des largeurs dj dfinies: 960 300 20 20 20 (appliqus gauche du contenu) = 600pixels. Vous insrerez le code suivant au-dessus des informations de la colonne latrale pour garder une cohrence par rapport la structure mme du blog:
/* home content */ #content { width: 600px; margin-left: 20px; }

Enregistrez les modifications et rafrachissez une nouvelle fois votre navigateur : votre contenu est maintenant compris dans un bloc de 620pixels, avec une marge extrieure gauche de 20px (voir Figure7.05). Vous pouvez maintenant positionner ces deux colonnes lune ct de lautre. Pour cela, vous utiliserez llment float pour placer la colonne principale gauche et la colonne latrale droite. Dans le code de chacun des blocs, vous allez ajouter le code suivant. placer dans le slecteur dID content:
float: left;

placer dans le slecteur de classe sidebar:


float: right;

Ce qui donne comme code pour ces deux lments:


/* home content */ #content {

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

246
}

WordPress ct dveloppeur: concevoir un thme


width: 600px; margin-left: 20px; float: left;

/* sidebar */ .sidebar { width: 300px; margin: 0 20px 0 20px; float: right; }

Figure7.05
Affichage du contenu.

Enregistrez les modifications et allez voir le rsultat dans le navigateur: les deux colonnes sont dsormais cte cte (voir Figure7.06).
Figure7.06
Alignement des colonnes.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Concevoir le design de son blog

247

Cependant, le pied de page (footer) est encore mal positionn, puisquil se trouve sous la colonne latrale. Vous allez devoir le placer sous le contenu (la colonne principale) et pour cela utiliser la rgle clear: both. La rgle clear annule les positionnements flottants en cours, ce qui vous permet de remettre le pied de page la suite des deux blocs qui le prcdent. Vous allez en profiter ici pour donner au pied de page les bonnes marges extrieures, savoir 20pixels gauche et droite. Insrez le code suivant directement sous le bloc sidebar:
/* footer */ #footer { clear: both; margin: 0 20px; }

Enregistrez le tout et rafrachissez le navigateur: le pied de page est maintenant positionn sous le contenu et la colonne latrale. Tous les lments sont prsent bien positionns. Mais pour garder une cohrence par rapport lalignement vertical de lensemble du blog, vous devez encore dfinir les marges extrieures gauche et droite pour len-tte. Si vous regardez sur votre navigateur, ces deux lments sont dcals de 10pixels par rapport au contenu (voir Figure7.07).
Figure7.07
Dcalage de l'en-tte.

Vous allez donc crer une ligne pour personnaliser len-tte de votre blog, ligne que vous placerez au-dessus du commentaire /* home content */ et qui contient le style suivant:
/* header style */ #header { margin: 0 10px; }

Enregistrez la feuille de style et rechargez la page dans le navigateur: tous les lments sont maintenant aligns les uns par rapport aux autres (voir Figure7.08). Vous avez termin la premire tape de la personnalisation du thme.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

248
Figure7.08

WORDPRESS CT DVELOPPEUR : CONCEVOIR UN THME

Alignement des diffrents lments.

Mise en place du design: l'en-tte et le fond du blog


Dans cette section, vous allez placer les diffrents lments graphiques de votre thme. Comme vous lavez vu au dbut de ce chapitre, vous allez intgrer un fond tout autour du blog. Ici, ce sera une image avec un motif qui se rpte. Vous ajouterez galement une image pour len-tte. Tous les fichiers pour raliser ces tapes sont fournis sur http://apprendrewordpress.fr/livre. Mais, tout dabord, vous commencerez par signaler explicitement la bordure du blog dun trait noir pais. Pour cela, vous allez insrer la ligne de code suivante dans le slecteur page:
border: 5px solid #999;

Enregistrez votre travail et rafrachissez votre navigateur : vous avez bien maintenant un cadre qui entoure votre contenu (voir Figure7.09). Vous allez prsent placer une image de fond pour toute la partie extrieure au blog, qui sintgrera comme des tuiles qui se suivent. Limage utiliser se nomme "background.jpg" sur http://apprendre-wordpress.fr/livre. Vous allez la placer dans un nouveau dossier, cr au niveau des fichiers du thme, que vous nommerez "images". Vous pointerez alors vers elle depuis le slecteur de la balise body grce la rgle CSS suivante:
background: #555 url(images/background.jpg);

Si vous allez sur votre navigateur une fois que cette rgle est mise en place, vous constatez que le fond vient se placer derrire lensemble de la page, y compris le contenu textuel de vos articles ou mme la colonne latrale (voir Figure7.10).

Concevoir le design de son blog


Figure7.09
Bordure du thme.

249

Figure7.10
Affichage du fond sur l'ensemble du blog.

Ceci est d au fait que vous navez pas encore tabli de couleur de fond pour le slecteur page, et donc que rien ne vient cacher limage de fond (voir Figure7.11). Choisissez le blanc pour cette couleur de fond:
background-color: white;

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

250
Figure7.11

WORDPRESS CT DVELOPPEUR : CONCEVOIR UN THME

Affichage du fond aprs le paramtrage de la balise page.

Vous allez par ailleurs en profiter pour dcaler le cadre du haut de la page web pour laisser apparatre un morceau du fond et ainsi mettre encore un peu plus en relief votre contenu. Vous ferez de mme pour le bas de la page. Pour raliser ces marges, vous allez modifier une partie des attributs du slecteur page. Remplacez la ligne suivante:
margin: 0px auto 0px auto;

par
margin: 30px auto 30px auto;

Ici, vous venez de placer des marges extrieures de 30pixels en haut et en bas de votre blog. Lensemble du code pour le slecteur page doit maintenant ressembler cela:
#page { margin: 30px auto; width: 960px; border: 5px solid #999; background-color: white; }

Vous allez ensuite placer une image sur le blog, qui a son importance puisquil sagit de la bannire pour len-tte. Cette image, dont le fichier est header_bg.png (disponible sur http://apprendre-wordpress.fr/livre), a pour dimensions 930x212pixels. Vous allez donc positionner cette image galement dans le dossier images du thme. Pour accueillir lensemble de limage sans casser votre design, vous devez agrandir len-tte. Mais auparavant, vous allez linsrer telle quelle pour voir pourquoi il va falloir lagrandir. Cest partir du slecteur header que vous allez insrer limage, via le code suivant:
background-image: url(images/header_bg.png);

Concevoir le design de son blog

251

Comme vous le constatez en rechargeant la page, limage ne tient pas dans len-tte. Vous devez agrandir ce dernier pour laisser apparatre lensemble de limage. La hauteur sera de 212pixels, cest--dire la taille de limage. Pour cela, ajoutez le code suivant, toujours dans le slecteur header:
height: 213px;

Vous allez galement en profiter pour centrer un peu mieux le tout en donnant des marges supplmentaires lensemble. Vous remplacerez donc le code suivant dans la balise header:
margin: 0px 10px 0px 10px;

par
margin: 10px 20px 10px 20px;

Le contenu du slecteur header doit maintenant ressembler ceci:


/* header style */ #header { margin: 10px 20px 10px 20px; background-image: url(images/header_bg.png); height: 213px; }

Rechargez la page: votre blog commence prendre forme! Le fond est plac correctement ainsi que limage de len-tte. Cependant, il faudrait faire disparatre le titre et la description du blog puisque nous allons les remplacer par limage de len-tte. Pour cacher ces informations, vous allez juste les rendre invisibles en les dplaant trs loin sur la gauche. Notez bien quil nest pas question ici de supprimer le titre et la description de len-tte, car vous rendriez leur contenu invisible pour les personnes malvoyantes comme pour Google laccessibilit profite tous Le titre du blog saffiche avec la balise h1. Cest un titre cliquable; vous allez donc le rendre invisible en ciblant la combinaison de slecteurs h1 a avec CSS. Pour la description, vous rendrez invisible la balise paragraphe (p) de len-tte, donc la combinaison de slecteurs est #header p. Le code insrer est donc:
h1 a { position: absolute; left: -5000px; top: -5000px; text-indent: -5000px; } #header p { position: absolute; left: -5000px; top: -5000px; text-indent: -5000px; }

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

252

WordPress ct dveloppeur: concevoir un thme


Vous placerez ce code directement sous la balise header. Ici, vous donnez une position absolue ces deux lments et ils seront donc constamment placs 5000pixels sur la gauche de lcran, donc invisibles. Enregistrez les modifications et rafrachissez votre navigateur: le titre et la description du blog ont disparu, vous ne voyez plus que limage den-tte (voir Figure7.12).

Figure7.12
Affichage de l'image d'en-tte.

Mise en place du design: le menu de navigation Sur le croquis, vous aviez mis la volont davoir un menu horizontal de navigation, avec des sous-catgories en format "menu droulant" qui apparaissent au passage de la souris (drop down menu). Cest ce que vous allez mettre en place ici. Pour cela, vous commencerez par insrer le code du menu dans le fichier header.php. En effet, vous allez placer la barre de navigation directement sous limage de len-tte, donc sous la balise avec lID header. Nous avons choisi dinsrer le code ici en partant du principe que le menu est encore dans la partie en-tte du blog. Ouvrez votre fichier header.php et ajoutez le code suivant tout en bas du fichier, aprs toutes les donnes dj insres:
<div id="navbar"> <ul id="nav2"><?php wp_nav_menu(); ?></ul> <?php get_search_form(); ?> </div>

Ce menu de navigation est divis en deux parties: Le menu de navigation lui-mme, avec les diffrentes catgories du blog. Un formulaire de recherche, coll sur la droite. Nous avons dj un formulaire de recherche dans la colonne latrale, mais il peut tre intressant de lavoir directement dans le menu. vous de choisir lendroit o vous souhaitez le garder.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Concevoir le design de son blog

253

Dans le code, on reprend donc tout simplement la nouvelle fonction <?php wp_nav_ menu(); ?> apparue avec WordPress3 et qui vous permettra, comme nous lavons vu au Chapitre4, de crer un menu totalement customisable. On y ajoute galement la ligne pour le formulaire de recherche. Mais, pour que cette gestion du menu soit oprationnelle, il faut crer une nouvelle ligne dans le fichier functions.php que vous aviez cr au moment de la widgetisation de la sidebar. Ce morceau de code est le suivant:
add_theme_support( 'menus' );

partir de l, vous pouvez utiliser le sous-menu Menus, sous Apparence, et crer le menu que vous souhaitez. Rechargez votre blog, vous voyez la liste des catgories safficher (voir Figure7.13).
Figure7.13
Affichage des catgories et du formulaire de recherche dans le menu.

Vous allez maintenant devoir mettre tout a en forme, car ce nest pas trs bien intgr ni trs esthtique. Pour cela, vous insrerez les lignes de code CSS suivantes directement la fin de votre fichier style.css:
/* navigation */ #navbar { display: block; float: left; background-color: #555; margin-left: 20px; margin-top: 10px; margin-right: 20px; width: 920px; }

Vous commencez ici par donner les informations lensemble du menu, cest--dire la balise avec lID "navbar". Tout dabord, vous allez lafficher en mode "block" et la faire

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

254

WordPress ct dveloppeur: concevoir un thme


flotter gauche. Ces informations sont trs importantes pour le positionnement de lensemble, notamment la valeur "block" pour la dclaration "display" qui transforme votre liste verticale en liste horizontale. Puis vous lui appliquez un fond gris sombre (#555) et ajoutez des marges de 20pixels gauche et droite, ainsi quune marge extrieure suprieure de 10pixels. Enfin, vous noubliez pas de donner une taille ce menu: ce sera 920pixels, ce qui quivaut la largeur totale de 960pixels moins les deux marges extrieures de 20pixels chacune:
#nav { font-size: 13px; background: #555; }

Ensuite, vous spcifiez quelques rgles pour le slecteur #nav, donc le menu des catgories. Vous dfinissez une taille de police de 13pixels, ainsi que le mme fond gris sombre #555:
#nav, #nav ul { list-style: none; float: left; line-height: 1.5; padding: 0; margin: 0; width: 655px; }

Dans le code ci-dessus, vous avez insr des rgles qui sappliquent la fois la balise contenant lID nav et la balise ul qui se trouve lintrieur de cette balise, avec le slecteur #nav ul. Dans une liste, par dfaut, il y a un style avec des puces attribues chaque dbut de ligne. En insrant le style list-style: none;, vous supprimez ces puces, qui auraient t peu esthtiques dans votre menu horizontal. Il faut que les catgories apparaissent gauche: vous donnez donc lensemble un flottement gauche. Ensuite, vous positionnez vos lments HTML en attribuant une hauteur de ligne de 1,5em et en enlevant toute marge extrieure et intrieure qui pourrait tre hrite dun lment suprieur (ou mme de la feuille de style par dfaut du navigateur). Enfin, vous tablissez une largeur pour ce menu, afin que lajout de catgories naille pas se superposer avec le formulaire de recherche. Tout cela est trs bien, mais il faut encore grer lactivation du menu lors de son survol par la souris. Voil le code ajouter:
#nav a ,#nav a:hover{ display: block; text-decoration: none; border: none; background-color: #555; }

Ici, vous dfinissez un style pour les liens du menu laffichage et au survol (:hover tant une pseudo-classe CSS qui permet de grer ltat o llment est survol par la souris).

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Concevoir le design de son blog

255

Tout dabord, chaque lien saffiche en block, ce qui permet de bien positionner chacun des lments. Ensuite, vous retirez tout lment de style des liens ce qui correspond leur soulignement qui nest pas trs esthtique dans un menu de navigation. Vous supprimez toute bordure qui pourrait tre hrite, et enfin vous dfinissez la couleur de fond #555, qui va crer une harmonie avec le reste du style du menu. Vous avez dfini le style global du menu, mais il est possible aussi de donner un style aux lignes du menu:
#nav li { float: left; list-style: none; border-right: 1px solid #777; }

Avec ce code, chaque ligne est positionne et aligne gauche, sans style de liste (donc pas de puce prcdant chaque ligne), et vous sparez chacune de ces lignes avec une bordure grise de 1pixel.
#nav a, #nav a:visited { display: block; color: #f5f5f4; padding: 6px 10px 6px 10px; }

Prcdemment, vous avez dfini les rgles qui sappliquaient aux liens normaux et en tat de survol. Avec le code ci-dessus, vous dfinissez les mmes rgles pour les liens et les liens visits (cest--dire dj cliqus par lutilisateur), mais avec des valeurs un peu diffrentes. Vous retrouvez donc le positionnement en "block", mais la couleur grise est plus claire (#f5f4f4), et vous positionnez le tout pour que le texte soit bien centr sur la ligne:
#nav a:hover, #nav a:active { background: #000; text-decoration: none; }

Enfin, vous dterminez ici le style commun pour les liens en survol et les catgories actives (cest--dire ltat o lutilisateur clique sur le lien). Dans le contexte dfini par ces pseudoclasses, vous choisissez un fond noir pour mettre le lien ou la catgorie en relief, et vous retirez toute dcoration du texte, telle que le soulignement. Il reste insrer le code concernant les menus droulants, que lon appelle menus "dropdowns". Ceux-ci apparaissent lorsque des sous-catgories existent, ce qui dans le code HTML est gr par PHP. Le code CSS insrer dans style.css est le suivant:
/* Dropdown Menu */ #nav li ul { position: absolute; left: -999em; height: auto; width: 152px; border-bottom: 1px solid #777; }

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

256

WordPress ct dveloppeur: concevoir un thme


Dcryptons ces lignes. Tout dabord, le slecteur CSS indique que le bloc de rgles sapplique la liste qui figure sous une ligne du menu cibl par la classe nav. Dans votre menu droulant, une ligne quivaut une catgorie, et vous allez afficher une liste des sous-catgories (si elles existent). En premier lieu, vous cachez le menu droulant lorsque vous ne le survolez pas. Vous utilisez un positionnement fixe 999em gauche et une hauteur tablie de manire automatique. Vous dfinissez ensuite une largeur de 152pixels et attribuez chaque ligne de sous-catgorie une bordure infrieure de 1pixel et de couleur grise #777, bordure qui sparera les lignes entre elles. Quelques ajouts esthtiques pour chaque ligne du sous-menu:
#nav li li { width: 150px; border-top: 1px solid #777; border-right: 1px solid #777; border-left: 1px solid #777; background: #777; }

Vous spcifiez ici quelles feront 50pixels de large, auront une bordure tout autour sauf en bas (puisque chaque bordure suprieure dune ligne correspond la bordure infrieure de la prcdente, et la dernire bordure infrieure est dj dfinie par la liste entire), et que leur fond sera de couleur grise (#777). Vient ensuite un gros morceau de code CSS, qui va vous servir grer les liens des catgories, donc chaque ligne du sous-menu, dans les diffrents tats ncessaires: normal, dj visit, en cours de survol et en cours de clic.
#nav li li a, #nav li li a:visited{ font-weight:normal; font-size:0.9em; color:#FFF; } #nav li li a:hover, #nav li li a:active{ background:#000; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, { left: auto; } a.main:hover{ background:none; }

Ces diffrentes lignes dfinissent le style pour les liens de vos sous-catgories. La taille de la police est de 0,9pixel, et sa couleur est blanche. Quand vous survolez une de ces souscatgories, le fond est noir et vous dfinissez le style pour avoir leffet "dropdown" sur vos sous-catgories. Le left: auto permet de ramener la liste droulante et de la faire apparatre au survol.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Concevoir le design de son blog

257

Ici, vous utilisez la pseudo-classe :hover pour faire rapparatre les menus droulants que vous avez placs pralablement 999em gauche de la page web. Une fois le menu des catgories positionn et rgl avec le style qui convient, vous devez vous occuper de placer le formulaire de recherche. Il sera align droite, sans marge extrieure et avec une marge intrieure de 4pixels pour le haut et le bas, et de 10pixels pour la gauche et la droite:
#navbar #searchform { float: right; text-align: right; margin: 0; padding: 4px 10px; }

Lorsque vous avez insr toutes les lignes de code que nous venons de voir, enregistrez votre fichier style.css et rafrachissez une nouvelle fois la fentre de votre navigateur. Dsormais, vous disposez dun menu de navigation qui apparat entre la bannire du blog et le contenu (voir Figure7.14). Ce menu comprend un accs la page daccueil, les catgories et souscatgories du blog, ainsi que le formulaire de recherche.
Figure7.14
Affichage du menu de navigation.

Maintenant que vos catgories apparaissent dans le menu de navigation horizontal, il nest plus utile de les garder dans la colonne latrale. Vous pouvez donc retirer le code suivant du fichier sidebar.php:
<?php wp_list_categories('sort_column=name&optioncount=1&hierarchical=0&title_ li=<h2>Catgories</h2>'); ?>

Idem pour le formulaire de recherche:


<li><?php include(TEMPLATEPATH . '/searchform.php'); ?></li>

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

258

WordPress ct dveloppeur: concevoir un thme

Dfinition du style des liens du blog


Dans les navigateurs, les liens saffichent en bleu par dfaut, et en violet quand ils ont t activs. Ici, ces couleurs ne correspondent pas avec le style affich. Vous devez donc dfinir une couleur diffrente pour chacun des tats des liens. Vous allez insrer le style suivant sous les informations concernant le menu de navigation du blog:
a { color: #579200; text-decoration: none; } a:hover { color: #555; }

Les rgles ci-dessus dfinissent un style simple pour les liens, par dfaut et lors dun survol: respectivement, un vert en accord avec la bannire du blog (#579200) et un gris sombre (#555).

Dfinition du style de la colonne latrale


Vous allez maintenant donner un style particulier votre colonne latrale, qui va mettre en relief chaque titre donn aux diffrents blocs, et retirer le style des lignes des diffrentes listes. Pour ce faire, insrez le code suivant directement aprs le slecteur ciblant la colonne latrale (.sidebar):
.sidebar a { text-decoration: none; }

Le code ci-dessus annule le soulignement de chaque lien de la colonne latrale.


.sidebar ul{ list-style-type: none; padding: 0; }

Vous retirez ensuite les puces de chacune des listes places dans la colonne, et vous mettez la marge intrieure (padding) 0, ce qui est trs utile pour obtenir un placement cohrent dans tous les navigateurs.
.sidebar ul h2{ color: white; background: #555; font-size: 13px; padding: 8px; font-weight: normal;

Enfin, vous dfinissez un style pour les titres (balise h2) de chaque bloc (balise ul) de votre colonne latrale (classe sidebar). Ce code vous donne un fond gris sombre (#555), avec

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Concevoir le design de son blog

259

un texte blanc et haut de 13pixels. Vous conservez ainsi lesprit du style du menu de navigation. Pour positionner le tout, vous insrez une marge intrieure de 8pixels et un style de police normal. Enregistrez vos modifications et rafrachissez votre navigateur pour voir le changement: votre colonne latrale est maintenant mise en forme (voir Figure7.15).
Figure7.15
Mise en forme de la colonne latrale.

Dfinition du style du pied de page


Pour le moment, votre pied de page (footer) nest pas styl ni mis en valeur. Vous allez lui donner la forme dun bloc gris qui fera en quelque sorte contrepoids avec le haut du blog. Rien de bien compliqu, vous allez ajouter le code suivant sous les lments de style dj insrs pour le pied de page (#footer):
#footer p{ padding: 20px; background-color: #999; color: white; } #footer p a{ color: #ccc; text-decoration: none; }

Tout dabord, vous donnez un gris clair (#999) comme couleur de fond lensemble du pied de page. Le texte est positionn 20pixels des bords et saffiche en blanc.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

260

WordPress ct dveloppeur: concevoir un thme


Le slecteur suivant soccupe des liens: ici ils sont mis en forme dans un autre gris, #ccc, et leur soulignage est supprim. Votre pied de page ressemble dsormais ceci (voir Figure7.16).

Figure7.16
Mise en forme du pied de page.

Dfinition du style des commentaires


Le style de votre blog est dsormais presque termin. Avant deffectuer les derniers rglages, notamment organiser correctement votre thme sur les principaux navigateurs, il vous reste une partie mettre en forme: ce sont les commentaires. Vous allez utiliser en plus un style qui permettra de sparer un auteur de son commentaire, tout en intgrant quelque chose de simple et original. Ici, nous allons prsenter deux styles diffrents. Le premier va pouvoir accueillir les conversations hirarchiques, le deuxime affichera une liste ordonne. Ces deux designs varient quelque peu, car lergonomie sera diffrente. En effet, la hirarchisation des commentaires demande un design plus sobre pour tre facilement lisible. vous de choisir en fonction du format choisi pour le fichier comments.php. Style des commentaires hirarchiss (WordPress2.7 et suprieures) Tout dabord, vous allez mettre un commentaire pour signaler le style pour les commentaires:
/* gestion des commentaires */

Ensuite, vous allez placer les diffrents lments de lensemble du bloc "commentaires", en positionnant notamment la liste ordonne, chacune de ses lignes et les paragraphes des commentaires:
.comments-template ol{ margin: 0px; padding: 0; list-style: none; }

.comments-template ol li{ margin: 10px 0 10px 0; line-height: 15px; padding: 0 0 0px; display: inline; float: left; width: 580px; } .comments-template ol li p{ margin-left: 10px;

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Concevoir le design de son blog


margin-top: 10px; clear: both; }

261

Puis vous allez dfinir le style pour les commentaires dun niveau suprieur dans le cas o vous utilisez la hirarchisation. Ici, ces niveaux sappellent depth-2, depth-3, et ainsi de suite. Comme nous avons tabli les paramtres pour nafficher que deux niveaux de rponses, nous allons dfinir que les niveaux2 et3. Notez galement que nous dfinissons une largeur de 510px pour la zone de saisie du commentaire. Ceux-ci vont tre dcals sur la droite selon le niveau et il va donc falloir une zone de saisie moins large que celle utilise pour les commentaires de premier niveau:
.comments-template ol li .depth-2 { background-color: #f5f5f4; width: 540px; } .comments-template ol li .depth-2 p textarea#comment { width: 510px; } .comments-template ol li .depth-3 { background-color: #ccc; width: 490px; }

Ensuite, vous allez dfinir les titres h2 et h3 du bloc des commentaires. Vous en profiterez galement pour positionner diffrentes donnes du commentaire, comme lavatar, le nom, les donnes de date ou encore le lien de rponse directe un commentaire:
.comments-template h2, .comments-template h3{ font-size: 1.5em; margin: 0; padding: 20px 0; } .comments-template p.nocomments{ padding: 0; } .reply { margin: 10px; } .avatar { float: left; border: 2px solid #ccc; } cite { padding: 0 0 0 15px; background-color: transparent; font-weight: bold;

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

262
}

WordPress ct dveloppeur: concevoir un thme


font-style: normal;

.commentmetadata a { padding: 0 0 0 15px; background-color: transparent; text-decoration: none; } .comment-author { margin: 10px 10px 5px; }

Enfin, vous dfinissez une largeur fixe pour la zone de saisie des commentaires lorsquils sont un niveau1 ou alors dans le cas dune liste ordonne sans gestion de la hirarchisation (voir Figure7.17):
textarea#comment { width: 580px; }

Figure7.17
Mise en forme des commentaires hirarchiss.

Style des commentaires sous forme de liste ordonne (WordPress2.6 et infrieures) Vous appliquerez ce style si vous utilisez une version de WordPress antrieure la 2.7. Sur votre feuille de style, directement sous le style attribu aux liens du blog, vous allez insrer le code suivant:
/* gestion des commentaires */ .comments-template{ margin: 0;

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Concevoir le design de son blog


} .comments-template ol{ margin: 0; padding: 0; list-style: none; }

263

Tout dabord, vous tablissez un style global pour lensemble du bloc des commentaires comments-template, ainsi que pour la liste des commentaires quil contient. Vous dterminez des marges intrieures et extrieures nulles, pour ne pas avoir de soucis avec les feuilles de style par dfaut des navigateurs, et vous retirez tout style la liste ordonne des commentaires, cest--dire sa numrotation en dbut de chaque ligne. Vous dfinissez ensuite le style pour chaque commentaire:
.comments-template ol li{ margin: 10px 0 0 0; line-height: 15px; padding: 0; display: inline; float: left; width: 580px; border: 2px #ccc solid; }

Vous spcifiez une marge extrieure gauche de 10 pixels, avec une hauteur de ligne de 15pixels. Vous tablissez une marge intrieure de 0, afin de ne pas entrer en conflit avec les feuilles de style par dfaut des diffrents navigateurs, comme nous lavons dj expliqu. Le tout est positionn en ligne (inline) et non en bloc (block), align gauche, avec une largeur de 580pixels, et entour dune bordure grise (#ccc) de 2pixels. Notre partie commentaire utilise aussi des titres h2 et h3, quil nous faut styler:
.comments-template h2, .comments-template h3{ font-size: 1.5em; margin: 0; padding: 20px 0; } .comments-template p.nocomments{ padding: 0; }

Quils soient encadrs par des balises h2 ou h3, les titres des "commentaires" prennent une taille de 1,5em et ont des marges intrieures hautes et basses de 20pixels. Cette mme marge intrieure sera de 0 dans le cas o il ny a pas de commentaires (slecteur p.nocomment). Ensuite, vous dfinissez le style pour chaque partie dun texte: lavatar de lauteur dun commentaire (limage lie ladresse e-mail), la possible citation (et le lien quelle pourrait contenir),etc.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

264

WordPress ct dveloppeur: concevoir un thme


.avatar { float: left; border: 2px solid #ccc; } cite { padding: 0 0 0 15px; background-color: transparent; font-weight: bold; font-style: normal; } cite a{ background-color: transparent; text-decoration: none; } small a { padding: 0 0 0 15px; background-color: transparent; text-decoration: none; } .comment_info { padding: 3px 0; } .comment_author { padding: 20px 0 20px 10px; float: left; width: 200px; }

Lavatar est plac gauche, avec une bordure de 2pixels de couleur grise (#ccc). Ce positionnement va mettre le reste du commentaire sur la droite. Les balises cite et small a vont donc avoir une marge intrieure gauche de 15 pixels pour ne pas coller lavatar. Lensemble fait 200pixels de large et est positionn une fois de plus gauche. Ensuite, vous attribuez un style au commentaire en tant que tel:
.comment { color: #555; padding: 20px 20px 20px 220px; } .comment p { margin: 0; padding-bottom: 10px; }

Ici, la couleur du texte sera grise (#555) et le tout sera positionn 220pixels droite du bord. Au sein mme des paragraphes des commentaires, vous ajoutez une marge infrieure en bas de 10pixels, pour bien sparer les paragraphes. Pour positionner le formulaire de commentaires sous ces mmes commentaires, il nous faut ajouter des lignes spcifiques:

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Concevoir le design de son blog


h3#respond { clear: both; } textarea#comment { width: 580px; }

265

Il faut attribuer aux balises h3 disposant dun ID respond, donc les titres des commentaires, une remise zro du flottement en cours. La zone de rdaction dun commentaire est quant elle large de 580pixels. Enfin, vous dfinissez un style pour les rtroliens, qui seront situs sous les commentaires:
ol.trackbacks-layout { clear: both; padding-bottom: 10px; } ol.trackbacks-layout li { padding: 20px; background: #ccc; width: 540px; }

Vous effectuez ici aussi une remise zro des positionnements, en leur attribuant une largeur de 540pixels et des marges intrieures de 20pixels, le tout sur fond gris #ccc. Enregistrez votre feuille de style et allez sur votre navigateur voir quoi ressemble cette mise en forme des commentaires (voir Figure7.18).
Figure7.18
Mise en forme des commentaires.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

266

WordPress ct dveloppeur: concevoir un thme

Style pour les vignettes sur la page d'accueil


Au chapitre prcdent, nous avons vu quil tait possible dafficher simplement des vignettes de vos articles qui saffichent sur la page daccueil. Nous allons ici les mettre en forme et leur donner un style simple. La balise gnre par WordPress pour les vignettes est .wp-post-image. Nous allons ici lui donner une marge de 20pixels en haut, droite et en bas pour lui donner "de lair" par rapport au texte. Ensuite, nous allons la positionner gauche pour que le texte vienne envelopper limage et, enfin, on va lui donner un petit style supplmentaire avec une bordure grise (#ccc) de 5px:
/* vignettes page d'accueil */ .wp-post-image { margin: 20px 20px 20px 0; float: left; border: 5px #ccc solid; }

On saperoit cependant que la ligne des tags vient sajouter directement sous un texte court droite de la miniature. Pour garder les tags sous la vignette, vous allez ajouter le code suivant dans la balise "tags" dj existante:
.tags { clear: both; }

Le rsultat obtenu doit tre celui de la Figure 7.19.


Figure 7.19
Style sur la vignette de larticle.

Style pour les pages ou articles non trouvs


Chaque type de page possde un bout de texte qui, pour les cas o WordPress ne trouverait rien correspondant lURL clique par le visiteur, lui indique le problme. Ce texte est le suivant:

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Concevoir le design de son blog

267

<h2 class="center">Introuvable</h2> <p class="center">D&eacute;sol&eacute;, mais vous cherchez quelque chose qui ne se trouve pas ici.</p> <div id="searchno"><?php include (TEMPLATEPATH . "/searchform.php"); ?></div>

Vous trouverez ce morceau de code dans les diffrents types de pages que sont index.php, single.php, search.php ou encore archive.php. Dans ce code, on utilise le formulaire de recherche qui sert dans le menu de navigation et qui est align droite. Donc, si un visiteur ne trouve pas ce quil cherche, il va voir le message suivant avec le formulaire de recherche positionn droite (voir Figure7.20).
Figure7.20
Positionnement droite du formulaire de recherche.

Ce nest pas un placement idal; il va donc falloir repositionner ce formulaire de recherche gauche, tout en le gardant droite dans le menu. Cest pour cela que nous avions associ ce formulaire une balise disposant de lID searchno. Nous allons ici lui donner un alignement gauche:
#searchno #searchform { float: left; }

Vous insrez ce code directement sous celui que vous avez attribu prcdemment au formulaire de recherche (#searchform), au niveau du style pour le menu de navigation. Lorsque cest fait, ce formulaire de recherche apparat gauche sur toutes les pages.

Mise en conformit sur les diffrents navigateurs


Faire du design web pour un site ou pour un blog est toujours trs intressant. Cependant, le respect des normes et des standards du Web est diffrent selon le navigateur que vous utilisez. Il arrive ainsi souvent que vous dveloppiez un design (ici, votre thme) et que celui-ci ne saffiche pas correctement sur Internet Explorer6, alors que votre code est valide: dans IE6, des lments sont mal placs ou absents, l o ils sont au bon endroit avec un navi gateur moderne comme Firefox ou Opera. Lorsque vous faites du design web, il est donc de premire importance de choisir le navigateur sur lequel vous allez le tester en premier. Aujourdhui, la plupart des professionnels testent sur Firefox, Safari ou Opera, pour ensuite faire des modifications destination dInternet Explorer6 et 7.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

268

WordPress ct dveloppeur: concevoir un thme


En effet, Internet Explorer6 est bien loin de respecter ces standards, et si Internet Explorer7 a fait un bond en avant en matire de respect des normes du Web, cette version prsente encore quelques lacunes qui ont t globalement combles avec Internet Explorer8, sorti fin 2008. Cependant, IE6 et IE7 sont utiliss par un grand nombre dinternautes, et la sortie dIE8 ne changera pas cette situation du jour au lendemain. Vous ne pouvez donc pas vous permettre de ngliger ces deux navigateurs, aussi dfectueux soient-ils. Il va falloir user dastuces pour modifier le style sur ce navigateur, sans pour autant altrer le design sur les autres navigateurs qui, eux, respectent les standards tablis. Dans le cadre de notre cration de thme, il y a peu de modifications apporter pour satisfaire la plupart des navigateurs web: le thme saffiche sans cart notable dans Firefox, Safari, Opera et Internet Explorer7. Cependant, il y a quelques petits carts de marges sur Internet Explorer 6: en effet, le navigateur a tendance interprter les marges sa manire, ce qui entrane souvent des soucis de positionnement de lensemble du design. Pour remdier ces carts, nous allons utiliser un "hack CSS", cest--dire une rgle ou un slecteur CSS qui a priori ne devrait pas fonctionner, mais qui va voir ses valeurs appliques uniquement sur IE6 et pas sur les autres navigateurs, en raison de dfauts dans leur moteur de rendu CSS. Tous les navigateurs ont ainsi certains dfauts connus au niveau de leur moteur de rendu CSS, ce qui permet de disposer dune grande varit de hacks pour tous les navigateurs, et donc de les cibler directement sans toucher les autres. Le hack qui nous intresse ici consiste ajouter un slecteur CSS, * html, au dbut du slecteur dune balise, et le contenu de ce slecteur sera alors interprt uniquement pour IE6. Ce hack est appel "star html". Prenons un exemple concret pour notre thme. Dans son en-tte, il y a un cart visible au niveau des marges. Vous allez donc ajouter une ligne spcifique IE6, grce "star html", en ajustant la bonne marge tout en laissant la premire dfinition de marge intacte, qui sera correctement exploite par les navigateurs nayant pas le dfaut de rendu CSS exploit par notre hack:
#header { margin: 10px 20px 10px 20px; height: 213px; background-image: url(images/header_bg5.png); } * html #header { margin: 20px 20px 10px 20px; }

La rgle spcifique IE6 ajoute 10pixels pour la marge suprieure de len-tte. Notez bien que le hack doit tre plac aprs le slecteur normal, pour respecter lesprit des CSS: aller du plus gnral au plus dtaill. Vous allez faire de mme pour dautres points dfectueux du thme. Ainsi, vous allez insrer les lignes de code suivantes au niveau des balises concernes.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Concevoir le design de son blog


Pour le contenu:
#content { width: 580px; margin-left: 10px; padding: 20px 20px 20px 10px; float: left; } * html #content { padding: 20px 10px 10px 5px; }

269

Pour la colonne latrale:


.sidebar { width: 300px; margin: 0 20px 0 20px; float: right; } * html .sidebar { margin: 0 10px 0 10px; }

Pour le menu de navigation:


#navbar { display: block; float: left; background-color: #555; margin-left: 20px; margin-top: 10px; margin-right: 20px; width: 920px; } * html #navbar { margin-left: 10px; margin-right: 30px; }

Chaque slecteur CSS gnral qui prsente un dfaut dans IE6 est ainsi immdiatement suivi dune correction spcifique ce navigateur, qui reprend uniquement les rgles CSS modifier, en leur donnant des valeurs qui normalisent laffichage dIE6 avec celui des navigateurs modernes. Enfin, si nous avons cr un menu de navigation avec menu droulant en nutilisant que les CSS et la pseudo-classe :hover, cette classe ne va malheureusement pas tre prise en

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

270

WordPress ct dveloppeur: concevoir un thme


compte par le navigateur de Microsoft. Nous devons donc utiliser un petit script pour avoir le mme effet sur Internet Explorer6 que sur les autres navigateurs. Ce script est le suivant:
<!--//--><![CDATA[//><!-sfHover = function() { var sfEls = document.getElementById("nav2").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); //--><!]]>

Ce script va appliquer une balise sfhover tous les lments li de la liste ul ds lors quils seront survols par la souris. Pour insrer ce script, vous allez crer un dossier .js que vous placerez au mme niveau que les autres fichiers du thme (voir Figure7.21).
Figure7.21
Insertion du dossier .js.

Dans ce dossier, vous allez crer un nouveau fichier dans lequel vous insrerez le script. Ce fichier sappellera dropdowns.js. Ensuite, vous ajouterez encore un peu de code dans len-tte de votre thme pour dire au navigateur dutiliser le script qui vient dtre inclus. Pour cela, vous ouvrirez le fichier header.php et y insrerez le code suivant directement sous la ligne qui appelle la feuille de style:
<script type="text/JavaScript" src="<?php bloginfo('template_url');?> /js/dropdowns.js"></script>

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Concevoir le design de son blog

271

Maintenant il reste mettre tout a en forme. Nous avons utilis ici une balise spcifique pour Internet Explorer6, la balise sfhover quil va falloir paramtrer pour quelle ait le mme effet que la balise:hover employe pour les autres navigateurs. Dans votre feuille de style, trouvez cette ligne:
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, { left: auto; }

Remplacez-la par la suivante, qui prend en compte la mise en forme de la balise sfhover:
#nav2 li:hover ul, #nav2 li li:hover ul, #nav2 li li li:hover ul, #nav2 li. sfhover ul, #nav2 li li.sfhover ul, #nav2 li li li.sfhover ul { left: auto; }

prsent, votre menu droulant fonctionne sur les principaux navigateurs, y compris Internet Explorer6.

Conclusion
Dans ce chapitre, vous avez appris crer un thme simple du dbut jusqu la fin. Vous avez maintenant les bases pour concevoir vous-mme le thme de vos rves. Nhsitez pas parcourir le Web la recherche de superbes blogs qui viendront nourrir votre crativit. Avec une bonne comprhension du fonctionnement de WordPress, vous pourrez dsormais crer des thmes rapidement mais aussi les faire voluer facilement au fil de vos dcouvertes. Si vous avez des questions ou des problmes, nhsitez pas aller sur le forum de WordPress Francophone (http://www.wordpress-fr.net/support/), il y aura toujours quelquun pour vous aider. Enfin, noubliez pas de regarder sur le DVD fourni avec ce livre, vous y trouverez lensemble des fichiers du thme que vous venez de concevoir avec quelques petits ajouts supplmentaires!

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Partie
WordPress ct dveloppeur: concevoir une extension
8. Dcouvrir les principes d'une extension avec Hello Dolly. .............. 275 9. Philosophie des extensions de WordPress........................................ 279 10. Les API de WordPress...................................................................... 289 11. Utiliser WordPress en tant que CMS................................................ 363 .................................................... 375 12. Construire une extension volue.

III

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Dcouvrir les principes d'une extension avec Hello Dolly


Afin de mettre directement les "mains dans le cambouis", nous allons observer le fonctionnement dune extension simple. Si vous comprenez son fonctionnement, vous tes sur la bonne voie vers le dveloppement dextensions plus complexes... Hello Dolly est une extension livre avec WordPress depuis la version1.5. Cre par Matt Mullenweg, cest un exemple trs basique dune extension WordPress, afin de montrer en trs peu de lignes les conventions de lAPI dextension de WordPress. Lunique fonctionnalit de cette extension est dafficher alatoirement une phrase de la chanson "Hello Dolly" dans linterface dadministration de WordPress (voir Figure8.01). La dconstruction de cette extension va nous permettre de voir le format den-tte des e xtensions WordPress, ainsi que dautres bonnes mthodes de dveloppement.

Prsentation de l'extension

Figure8.01
Les paroles de "Hello Dolly" dans WordPress.

Rappel sur l'emplacement des extensions


Avant de commencer la dcomposition, noubliez pas que les extensions de WordPress doivent tre contenues dans le dossier wp-content/plugins/ de votre installation. Dans le cas dune extension simple, lextension nest reprsente que par un seul fichier PHP; si cest une extension plus complexe, avec des bibliothques JavaScript, des images, etc., elle sera place dans un dossier portant gnralement son nom. Attention! WordPress ne parcourt le dossier des extensions que dun seul niveau: vitez donc les sous-dossiers...
"wp-content/plugins/mon-plugin/plugin.php" fonctionnera. "wp-content/plugins/mon-plugin/mon-plugin/plugin.php" ne fonctionnera pas.

Ici, lextension Hello Dolly est contenue dans le fichier wp-content/plugins/hello.php. Nous vous invitons la charger dans un diteur de texte tandis que vous lisez le reste de ce chapitre, afin davoir le code sous les yeux.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

276

WordPress ct dveloppeur: concevoir une extension

En-tte des extensions


Les extensions WordPress commencent TOUJOURS par le mme en-tte.
/* Plugin Name: Hello Dolly Plugin URI: http://wordpress.org/# Description: This is not just a plugin, it symbolizes the hope and enthusiasm of an entire generation summed up in two words sung most famously by Louis Armstrong: Hello, Dolly. When activated you will randomly see a lyric from <cite>Hello, Dolly</cite> in the upper right of your admin screen on every page. Author: Matt Mullenweg Version: 1.5.1 Author URI: http://ma.tt/ */

Vous y retrouvez diffrentes informations: le nom de lextension, le site web de lextension, une description fonctionnelle et courte de ce que fait lextension, le nom de lauteur de lextension, le numro de version de lextension et, pour finir, le site web de lauteur de lextension. Toutes ces informations sont reprises dans linterface dadministration de WordPress, vous avez tout intrt les renseigner correctement. Lextension Hello Dolly dispose par ailleurs dun dbut den-tte qui, lui, nest pas obligatoire:
/** * @package Hello_Dolly * @version 1.5.1 */

Sa prsence nest due qu leffort de documentation de code fait par lquipe de dveloppement. Ajouter un quivalent votre extension serait une bonne pratique, mais napporterait rien lusage.
Faites attention au choix du nom de l'extension, vrifiez qu'il n'est pas dj utilis; il doit tre clair et concis, c'est un facteur important de la russite de votre extension dans la communaut.

Il nest pas rare de trouver juste en dessous de len-tte la licence de lextension; en gnral, il sagit de lextrait suivant de la licence GPL2 (mais il peut tout aussi bien sagir dune licence compatible GPL2, comme la LGPL2 ou le domaine public):
This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Dcouvrir les principes d'une extension avec Hello Dolly

277

Dcomposition du code
Passons au code. Si en ouvrant le fichier vous tes dj perdu, nous vous recommandons fortement de vous (re)plonger dans un cours de programmation PHP, car apprendre programmer dans ce langage nest certes pas lobjectif de ce livre. Dans un premier temps, nous avons une fonction, nomme hello_dolly_get_lyric(), dans laquelle nous allons trouver une trs longue chane de caractres, correspondant aux paroles de la chanson "Hello Dolly", un standard de Broadway rendu clbre par Louis Armstrong dans les annes 1960. De la ligne17
// These are the lyrics to Hello Dolly $lyrics = "Hello, Dolly ...

la ligne44
... Dolly'll never go away again";

Ensuite, la ligne47, les chanes de caractres sont dcoupes chaque retour la ligne en un tableau, grce la fonction standard explode():
$lyrics = explode("\n", $lyrics);

la ligne55, nous choisissons alatoirement une ligne du tableau $lyrics, laide des fonctions standard count() et mt_rand(). Cette chane est filtre par la fonction wptexturize(), qui a pour but de vrifier la conformit de la ligne dun point de vue HTML savoir quelle transforme chaque caractre spcial en son entit HTML quivalente. Cette chane adapte au format HTML est ensuite renvoye au code appelant.
return wptexturize( $lyrics[ mt_rand(0, count($lyrics) - 1) ] );

Fin de cette premire fonction, dont le but est donc de gnrer la chane afficher. Reste maintenant effectivement afficher la chane. Cest le rle dune seconde fonction, beaucoup plus courte : hello_dolly(). Aprs avoir rcupr la chane dans une variable $chosen, la fonction affiche le contenu de cette variable lcran (encadr de balises HTML idoine) laide de la fonction standard echo.
function hello_dolly() { $chosen = hello_dolly_get_lyric(); echo "<p id='dolly'>$chosen</p>"; }

Jusquici, nous avons plus eu affaire du code PHP classique qu une extension WordPress. Nous allons maintenant passer aux choses srieuses. Nous allons faire appel lun des outils essentiels de lAPI dextension de WordPress: une "action". Nous verrons plus en dtail ce quest une action au chapitre suivant mais, pour

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

278

WordPress ct dveloppeur: concevoir une extension


lheure, sachez simplement quune action vous permet dtendre les fonctionnalits lies un comportement de WordPress. Hello Dolly utilise deux actions: la premire pour ajouter la phrase de la chanson dans le code HTML de linterface dadministration, lautre pour ajouter le style CSS dans len-tte de la page HTML (qui est dfini plus loin dans le fichier, dans sa propre fonction dolly_css()). Pour cela, la ligne60, nous utilisons la fonction add_action():
add_action('admin_footer', 'hello_dolly');

Cette dernire sera excute lors du dclenchement du "crochet" de lvnement admin_ footer, prsent dans le pied de page de linterface dadministration de WordPress. Ainsi, la fonction hello_dolly() sera excute lors de laffichage de ce pied de page. La notion de crochet sera explique au chapitre suivant.Notez que la fonction hello_dolly() affiche uniquement la phrase choisie, entoure de la balise HTML p avec lID dolly. Si nous en restons l, nous allons bien retrouver la phrase dans le pied de page de linterface dadministration de WordPress. Mais nous souhaitons la placer en haut droite de la page; pour cela, nous allons faire appel au CSS. Lajout de la feuille de style la page HTML se fait via sa propre fonction, hello_css(), et par le biais decho. La fonction souvre par une ligne permettant daligner le texte gauche ou droite de linterface, selon le sens de lecture de la traduction utilise. Cette information est obtenue via la fonction get_bloginfo(), une variante de la fonction bloginfo() dj dans la section sur les thmes, qui renvoie linformation plutt que lafficher directement.
$x = ( 'rtl' == get_bloginfo( 'text_direction' ) ) ? 'left' : 'right';

La valeur voulue est donc stocke dans la variable $x et implmente directement dans les valeurs de la feuille de style qui sera intgre la page dadministration:
echo " <style type='text/css'> #dolly { position: absolute; top: 4.5em; margin: 0; padding: 0; $x: 215px; font-size: 11px; } </style> ";

Nous ajoutons ensuite ces rgles CSS dans len-tte de la page dadministration de Word Press grce la seconde action:
add_action('admin_head', 'dolly_css');

Cette fonction sera appele par le crochet admin_head prsent dans len-tte de linterface dadministration de WordPress. Il excutera la fonction PHP dolly_css() affichant le code CSS, qui placera en haut droite de linterface dadministration les paroles dj affiches par la fonction hello_dolly(), via le crochet admin_footer.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Philosophie des extensions WordPress


Lune des forces de WordPress dans la jungle CMS, cest la simplicit de cration dextensions. Il y a plusieurs raisons cela. Des raisons techniques, tout dabord: WordPress est dvelopp en PHP4, sur un modle classique. Il est trs peu orient POO (programmation objet); il est donc trs simple de dbuter la programmation PHP avec WordPress. Ensuite, il y a des raisons qui lui sont propres: une documentation technique trs complte sur le wiki de WordPress, le Codex, http://codex.wordpress.org/Developer_Documentation (voir Figure9.01), et un ensemble dAPI mises disposition par les dveloppeurs de WordPress pour tendre et modifier facilement les fonctionnalits.

Le concept

Figure9.01
Le Codex est un wiki collaboratif dtaillant les entrailles de WordPress.

Notez que depuis la version2.5 du logiciel un norme travail est ralis par lquipe de WordPress pour documenter au fur et mesure le cur du logiciel. Cette documentation incluse directement dans les fichiers de WordPress par le biais de marqueurs de type "phpDoc" peut tre extraite via des logiciels tels que phpDocumentor (http://www.phpdoc.org/) et compile dans de nombreux formats (HTML, PDF...). Une version HTML de certaines versions, notamment celle en cours de dveloppement ("trunk"), est disponible sur le site officiel de WordPress: http://phpdoc.wordpress.org/.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

280

WordPress ct dveloppeur: concevoir une extension


Dautres sites proposent galement leur propre compilation HTML, mais ne sont pas toujours jour: http://phpdoc.ftwr.co.uk/ ou http://www.phpxref.com/xref/wordpress/. Trs utile pour les dveloppeurs, cette documentation phpDoc (voir Figure 9.02) dcrit chaque fonction et propose un rsum fonctionnel, lauteur, la version dajout ou dobsolescence dans WordPress, sans oublier les paramtres que la fonction peut prendre, ainsi que le type de la valeur de retour, sil y a lieu.

Figure9.02
phpDoc: la documentation du code source de WordPress au format web.

Les prrequis techniques


Crer une extension WordPress demande quelques connaissances techniques En plus de bien connatre les rouages de WordPress dun point de vue utilisateur, il est indispensable de matriser ou au moins de comprendre plusieurs langages informatiques dont: le PHP; le JavaScript; le HTML; le CSS. Autrement dit, les quatre langages utiliss pour le dveloppement de WordPress en lui-mme. Le premier dentre eux et le plus important ici est le langage PHP. PHP est un langage de script libre ; il est principalement utilis pour gnrer des pages Internet dynamiques via un serveur HTTP. Ce quil faut retenir ici, cest que WordPress

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Philosophie des extensions WordPress

281

utilise PHP de faon trs classique; cest lancienne cole, diront certains. Il nest pas question dune programmation oriente objet mais dune utilisation classique des fonctions, des variables globales et de quelques classes PHP4. Car il ne faut pas loublier, une des forces de WordPress rside galement dans une compatibilit PHP4 qui lui permet un maximum de compatibilit sur le march de lhbergement! Les trois autres langages sont communs tous les projets Internet; le JavaScript permet une meilleure approche utilisateur et une interactivit dans les fonctionnalits dun site web, tandis que le code HTML et le CSS permettent la mise en page sur les navigateurs web.

L'API des crochets


Prsentation
LAPI la plus importante de WordPress est celle des " hooks ". En franais, cette notion de hook peut tre traduite par "crochet". Cette traduction a donn lieu un dbat enflamm sur le blog de WordPress Francophone : http://www.wordpress-fr.net/blog/ comment-traduiriez-vous-hook. Dans ce livre, nous utiliserons le terme de crochet. Sachez cependant quil existe dautres traductions: marqueur, point dancrage Ces crochets sont parsems dans tout le code de WordPress par lquipe de dveloppement. Ils ne sont pas placs alatoirement, ce qui naurait aucun intrt, mais suivant une logique propre WordPress. En effet, pour chaque action, chaque vnement et chaque comportement de WordPress, les dveloppeurs ont plac stratgiquement des crochets susceptibles dtre utiliss par des dveloppeurs dextensions en y "accrochant" une fonction PHP de leur cru. Dailleurs, dans chaque fonctionnalit implmente dans WordPress, les dveloppeurs vont penser, vont structurer le code pour y placer un ou plusieurs crochets, permettant ainsi une extension de modifier ou tendre le comportement initial. Vous avez bien lu, modifier ou tendre le comportement de WordPress. En effet, il est possible de diffrencier deux familles de crochets: les actions, et les filtres. La diffrence entre les deux est subtile, mais trs importante. Les filtres vont permettre de modifier le comportement de WordPress, alors que les actions vont tendre une fonctionnalit. Paradoxalement, on peut gnralement raliser la mme chose avec les deux types de crochets Pour comprendre, voici un petit exemple. Imaginons que nous voulions crire une extension dans le but dajouter un copyright la fin du texte de chaque article WordPress. La premire mthode consiste ajouter une action lors de lenregistrement de larticle, en automatisant lajout du copyright au texte au moment de linsertion en base de donnes. La seconde mthode consiste ajouter un filtre lors de laffichage du texte de larticle sur la partie visiteur de votre site et intgrer dynamiquement le fameux copyright au contenu de larticle.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

282

WordPress ct dveloppeur: concevoir une extension


Le filtre est ici la meilleure solution, car vous pourrez modifier le texte du copyright sur chaque article la vole, chose impossible via la mthode de laction et lenregistrement du copyright "en dur" dans la base de donnes de WordPress. Nanmoins, les deux mthodes prsentent des inconvnients: ainsi, avec la technique du filtre, il sera impossible pour un auteur dditer le texte du copyright. Avec les filtres et les actions, vous disposez de deux mthodes pour tendre ou modifier le comportement de WordPress. Il vous faudra peser le pour et le contre afin de choisir la meilleure solution pour rpondre correctement et facilement votre besoin.

Les filtres
Nous allons maintenant tudier un exemple pour dcrire les diffrentes fonctions lies aux filtres; le but de cet exemple sera de supprimer un mot spcifique lors de laffichage. Grce diffrentes listes de crochets, nous allons trouver le crochet li lvnement qui nous intresse. Dans notre exemple, le crochet utilis laffichage de larticle est the_content. Nous pouvons le trouver dans WordPress2.9.2, la ligne166 du fichier wp-includes/posttemplate.php:
$content = apply_filters('the_content', $content);

Nous voyons que les dveloppeurs utilisent la fonction apply_filters() pour donner une extension la possibilit de filtrer le contenu de la variable PHP $content. Gnralement, la fonction apply_filters() ne prend que deux paramtres: le nom du crochet, suivi de la variable filtrer. Cependant, il nest pas impossible de voir trois, quatre, voire cinq paramtres permettant de mieux cibler lvnement. Pour ajouter un filtre, nous allons utiliser la fonction add_filter() dans le code de notre extension.
add_filter('the_content', 'je_filtre');

Cette fonction prend donc ici deux paramtres. Le premier est le crochet cibl (the_content, comme dfini par les dveloppeurs de WordPress via apply_filters()), le deuxime est le nom de la fonction PHP qui sera excute lors de lapplication du filtre (ici, nous avons choisi un nom banal, je_filtre()). La fonction add_filter() peut galement prendre un troisime paramtre permettant de modifier la priorit dexcution de la fonction sur le filtre donn. Par dfaut, la priorit est de 10. Dans certains cas, il peut tre intressant dexcuter une fonction PHP avant les filtres par dfaut de WordPress. Dans ce cas, il suffit de prciser une priorit infrieure 10. En effet, plus la priorit est faible, plus lexcution aura lieu tt, et inversement. Exemple:
add_filter('the_content', 'je_filtre', 1);

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Philosophie des extensions WordPress

283

Il existe un quatrime paramtre permettant de dfinir le nombre de paramtres que peut recevoir la fonction excute par le filtre, mais il est trs rarement utilis dans le dveloppement d'extension. Personnellement, nous ne l'avons jamais crois, et nous ne l'avons jamais utilis.

Revenons lexemple initial o nous souhaitons remplacer certains mots dynamiquement laffichage.
function je_filtre( $texte ) { $texte = str_replace( 'payant', 'gratuit', $texte ); return $texte; }

Notre fonction je_filtre() sera donc appele lors de lvnement the_content ; elle doit possder un paramtre pour pouvoir accepter la variable PHP $content mise disposition par le deuxime argument du crochet. Nous procdons ensuite au traitement de la variable. Ici, nous remplaons le mot "payant" par "gratuit" laide de la fonction PHP str_replace(). Il est trs important de retourner une valeur avec la fonction PHP dans le cadre dun filtre. Si aucune valeur nest retourne par la fonction, la variable filtre sera nulle. La raison est simple : apply_filters() agit comme une fonction formatant une valeur avant dtre stocke dans une variable. Pour sen convaincre, il suffit de regarder la fonction qui applique le filtre dans le code de WordPress:
$content = apply_filters('the_content', $content);

Si la fonction apply_filters() ne retourne pas de valeur, la variable $content sera nulle. Or cette fonction renvoie comme valeur celle qui est retourne par la fonction appele par le filtre: ici il sagit de je_filtre(). Donc, quand vous mettez en place un filtre, noubliez jamais de renvoyer la variable traite, avec un return final.

Les actions
Maintenant que nous avons tudi les filtres, nous allons voir les diffrences avec les actions. Pour cela, nous allons prendre un exemple relativement simple: nous allons crer une alerte e-mail survenant lors de leffacement dun article. Grce aux bases de donnes des crochets, nous allons voir le crochet li cette action. Nous pouvons trouver dans le fichier wp-includes/post.php les actions suivantes:
la ligne 1650 : do_action('delete_post', $postid); Et la ligne 1722 : do_action('deleted_post', $postid);

Deux actions pour la mme chose? Non, pas exactement: notez que les deux crochets mis en place sont diffrents, "delete" et "deleted". Le premier crochet est excut avant la suppression de larticle par WordPress, alors que le second est excut une fois que WordPress a termin son travail deffacement.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

284

WordPress ct dveloppeur: concevoir une extension


Dans notre cas, nous allons employer le premier crochet afin denvoyer le contenu de larticle dans le-mail avant sa suppression de la base de donnes. Pour cela, nous utilisons la fonction add_action() sur lvnement delete_post:
add_action('delete_post', 'mail_article_efface');

Cette fonction se comporte en tout point de la mme faon que add_filter(). Les arguments sont exactement les mmes, le nom du crochet, le nom de la fonction PHP excute, ainsi que sa priorit. Voici le dtail de notre fonction:
function mail_article_efface( $post_id ) { // Je rcupre les donnes de l'article $post = get_post( $post_id ); // Je construis le sujet de mon e-mail avec le titre de l'article $sujet = "Effacement de l'article: " . $post->post_title; // Je construis le sujet de mon e-mail avec le titre de l'article $message = "Contenu de l'article: " . $post->post_content; // J'envoie l'e-mail ! wp_mail( 'monemail@wordpress.fr', $sujet, $message ); }

Contrairement un filtre, nous navons pas besoin de retourner de valeur. Et, mme si nous en retournons une, cela naura aucun impact sur le fonctionnement de WordPress: la diffrence dun filtre, le rle dune action nest pas de traiter une variable mais de dclencher une action avec le contenu de celle-ci.

Supprimer une action ou un filtre


Nous venons de voir comment ajouter un filtre et une action dans le code dune extension WordPress; sachez quil est galement possible den supprimer. Pour cela, il existe deux fonctions, remove_action() et remove_filter(), permettant de dsactiver une fonction attache un filtre ou une action de WordPress, voire dune extension tierce. La fonction se prsente de la faon suivante:
remove_action('delete_post', 'mail_article_efface');

La fonction remove_filter() fonctionne de la mme faon. Le premier argument est le nom du crochet auquel est attache la fonction enlever, le second est le nom de la fonction enlever. Les deux paramtres doivent tre strictement corrects pour que la suppression fonctionne: assurez-vous bien que vous ne vous trompez pas de crochet ou de fonction. Ici il est trs important de comprendre le concept de priorit. En effet, si lon souhaite supprimer un filtre ou une action, il est impratif dutiliser la fonction remove_action() ou remove_filter() entre lenregistrement du crochet et son excution ni avant ni aprs, car cela provoquerait une erreur.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Philosophie des extensions WordPress

285

Enfin, si vous voulez faire table rase de tous les filtres ou actions attachs un crochet, WordPress vous donne deux fonctions plus radicales: remove_all_actions() et remove_ all_filters(). Lexemple suivant enlvera toutes les actions appliques au crochet delete_post:
remove_all_actions('delete_post');

La fonction remove_all_filters() fonctionne de la mme faon. utiliser avec prcaution!

Liste des filtres et actions disponibles par dfaut


La faon la plus simple de trouver les filtres et les actions de WordPress consiste effectuer une recherche dans le code source avec comme mots-clefs: add_filter et add_action. Cependant, depuis la version2.1 de WordPress, la plupart des filtres et actions par dfaut se trouvent dans le fichier wp-includes/default-filters.php. Vous pouvez nanmoins en trouver quelques autres dans les fichiers: wp-admin/admin-ajax.php; wp-admin/asynch-upload.php; wp-admin/admin-functions.php; wp-admin/custom-header.php; wp-admin/edit-attachment-rows.php; wp-admin/media.php; wp-admin/options-general.php; wp-admin/options-permalink.php; wp-admin/press-this.php; wp-admin/revision.php; wp-admin/user-new.php; wp-admin/widgets.php; wp-admin/import/wordpress.php; wp-admin/includes/class-wp-upgrader.php; wp-admin/includes/comment.php; wp-admin/includes/media.php; wp-admin/includes/meta-boxes.php; wp-admin/includes/ms.php; wp-admin/includes/plugin.php;

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

286

WordPress ct dveloppeur: concevoir une extension


wp-admin/includes/template.php; wp-admin/includes/update.php; wp-admin/includes/widgets.php; wp-includes/class-oembed.php; wp-includes/general-template.php; wp-includes/kses.php; wp-includes/media.php; wp-includes/ms-default-filters.php; wp-includes/ms-functions.php; wp-includes/post.php; wp-includes/plugin.php; wp-includes\script-loader.php; wp-includes/shortcodes.php; wp-includes/taxonomy.php; wp-includes/theme.php; wp-includes/user.php; ...et dautres. Une liste plus ou moins jour est galement disponible sur le Codex: http://codex.wordpress.org/Plugin_API/Filter_Reference et http://codex.wordpress.org/Plugin_API/ Action_Reference. De son ct, Adam Brown maintient une liste assez jour (en tout cas pour la version 2.9) et valable pour toutes les versions de WordPress : http://adambrown.info/p/wp_hooks/. Les statistiques quil affiche montre une progression constante du nombre de crochets, culminant 1142crochets pour la version2.9, soit 324crochets ajouts depuis la version2.7 et la premire dition du prsent livre. Vous comprendrez donc quil nous est impossible den faire une liste exhaustive dans ces pages. Heureusement, vous naurez pas connatre tous les crochets par cur pour mettre en place une extension utile; une vingtaine de crochets, utiliss rgulirement par toutes les extensions, devraient vous suffire. Nanmoins, si votre intention est de dvelopper une extension complexe et lgante, vous gagnerez largement savoir o trouver LE crochet qui vous fera travailler plus vite et plus proprement.

Les fonctions amovibles de WordPress


WordPress dispose de fonctions "pluggables" (littralement "sur lesquelles on peut se brancher"), que lon peut traduire par "amovibles". Ces fonctions sont lances aprs le chargement des extensions. De ce fait, elles peuvent tre trs facilement remplaces par une fonction dfinie dans une extension.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Philosophie des extensions WordPress

287

Techniquement, ces fonctions sont juste entoures de la condition if(), comme suit:
if ( !function_exists('wp_mail') ) : function wp_mail( ... ) { ... } endif;

Il suffit donc une extension de dfinir une fonction wp_mail() pour remplacer la fonction denvoi de-mail par dfaut de WordPress. Les fonctions amovibles sont principalement celles qui sont lies lauthentification et la gestion utilisateur de WordPress. On retrouve nanmoins, comme on le voit, la fonction denvoi de-mail de WordPress, ainsi que des fonctions de redirection HTTP. Dans le cadre de la fonction wp_mail(), cela est trs pratique si lon souhaite utiliser un serveur SMTP particulier la place de la fonction PHP mail(). Les fonctions dauthentification et de gestion dutilisateurs permettront lutilisation dune base externe WordPress, par exemple un annuaire LDAP ou une base dutilisateurs tierce. Attention : une fonction amovible ne peut tre remplace quune fois ! Si deux extensions tentent de remplacer la mme fonction amovible, une erreur se produira. Il est donc prfrable, avant de dfinir votre propre fonction, de lencadrer de la mme condition if ( !function_exists('votre_fonction') ), pour plus de sret...

Liste des fonctions amovibles disponibles par dfaut


Tout comme pour les filtres et actions, les fonctions amovibles sont principalement regroupes dans un fichier, wp-trunk/wp-includes/pluggable.php (et wp-includes/pluggable-deprecated.php pour les fonctions obsoltes), mais on en retrouve galement parpilles ici et l. Pour les trouver, lancez une recherche dans le code source avec comme mots-clefs: "if ( !function_exists('". Voici quelques-uns des fichiers o se trouvent des fonctions amovibles: wp-admin\includes\class-wp-filesystem-ssh2.php; wp-admin\includes\upgrade.php; wp-trunk\wp-admin\includes\misc.php; wp-includes\compat.php; wp-includes\rss.php. Ici encore, le Codex peut tre utile, bien que dune aide limite: http://codex.wordpress. org/Pluggable_Functions.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

10

Les API de WordPress

Avant-propos
WordPress est un CMS dont les possibilits dextensions sont trs pousses; il est possible de modifier presque totalement laspect et le comportement de ce logiciel grce ses nombreuses API. Une API, pour "Application Programming Interface" (interface de programmation), est une abstraction du fonctionnement dun logiciel ou dun service permettant den simplifier grandement lutilisation en offrant un accs facilit lensemble de ses fonctions.Le prsent chapitre na pas pour objectif dtre lannuaire des fonctions de WordPress. Pour cela, il existe une page dans la documentation anglaise : http://codex.wordpress.org/Function_Reference. Ce lien liste et documente un maximum de fonctions de WordPress. Il ne sagit pas non plus ici dune retranscription de la documentation phpDoc pour WordPress : http://phpdoc.wordpress.org/. Ce lien prsente une pseudo-documentation gnre depuis le code source de WordPress. Cest trs pratique lorsquon dveloppe, mais ce nest pas le but recherch dans ce chapitre. Ici, il est question de reprendre les API importantes de WordPress, utiles dans le dveloppement dextensions, en rappelant le contexte, le principe de fonctionnement, la mthode pour les employer, et les bonnes pratiques dutilisation. Parce que WordPress dispose dun grand nombre dAPI touchant tous les points de son fonctionnement, il sagit ici dun chapitre particulirement long et vari; mais sa lecture est rendue ncessaire par le temps que vous feront gagner toutes ces API, plutt que devoir mal rinventer la roue.

Activation et dsactivation d'une d'extension


Principe
Depuis la version1.5, WordPress permet lajout de fonctionnalits via un systme dextensions. Ces extensions, par le biais dun mcanisme doptions et de la classe de connexion la base de donnes, peuvent crer des tables et des options pour stocker des donnes et leur configuration. Malheureusement, un bon nombre dauteurs dextensions nont jamais pens effacer leurs donnes et leurs options, la dsactivation de lextension par exemple. On se retrouve alors avec une dizaine de techniques pour gnrer des options ou des tables SQL lors de lactivation. Pas facile de sy retrouver De ce fait, lquipe de dveloppement a cr deux fonctions pour grer lactivation et la dsactivation des extensions.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

290

WordPress ct dveloppeur: concevoir une extension

Activation
register_activation_hook($file, $function);

Cette fonction prend deux paramtres: le premier est le chemin du fichier PHP de lextension, et le second est le nom de la fonction utiliser. En gnral, pour avoir une fonction compltement gnrique, vous pouvez passer la constante PHP __FILE__ pour gnrer dynamiquement le chemin du fichier PHP de lextension et ainsi ne pas avoir vous soucier de son emplacement. Par exemple, la fonction dactivation fonctionnera que lextension soit dans le dossier:
wp-content/plugins/monplugin.php

ou dans:
wp-content/plugins/monplugin/monplugin.php

Pour faciliter la vie des dveloppeurs, la fonction dactivation est gnralement nomme de la faon suivante: monplugin_activate(). Par lextension simple_deezer_activate(). exemple, pour Simple Deezer, nous nommons la fonction

Dsactivation
register_deactivation_hook($file, $function);

Cette fonction suit exactement le mme fonctionnement que lactivation. Les paramtres sont les mmes. La seule diffrence, cest que vous allez appeler la fonction de dsacti vation. Elle est gnralement nomme monplugin_deactivate().

Bonnes pratiques
Dsactiver une extension ne signifie pas forcment que lon souhaite supprimer ses donnes ou sa configuration. Par exemple, lors de la mise jour de WordPress, il est fortement recommand de dsactiver toutes les extensions pour ne pas provoquer de conflits. Cela ne signifie pas pour autant que vous voulez effacer toutes les donnes et toute la configuration des extensions. Ainsi, gnralement, les extensions volues proposent une page de dsinstallation avec une case cocher (voir Figure10.01). Le cas chant, vous enregistrerez cette valeur dans une option, et lors de lexcution de la fonction de dsactivation, vous vrifierez que la case a t coche.
Figure10.01
Page de dsinstallation de l'extension Cforms.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Les API de WordPress

291

Autre point important: lors de lactivation de lextension, il faut toujours prendre soin de tester lexistence des options et des tables de donnes. Cela vite les erreurs SQL et deffacer les options de lutilisateur.

Dsinstallation d'une extension


Principe
Les dernires versions majeures de WordPress ont vu une volution notable du systme dinstallation des extensions et, rciproquement, du systme de dsinstallation. Il est en effet possible dinstaller une extension directement depuis le rfrentiel du portail WordPress.org et de dsinstaller/supprimer une extension directement depuis linterface dadministration (voir Figure10.02), l o avant la version2.6 tout devait se faire laborieusement via un client FTP.
Figure10.02
Page des extensions de WordPress.

Sil reste possible dutiliser un client FTP, la dsinstallation des extensions se fera presque uniquement depuis linterface dadministration, et on comprend mieux que les dveloppeurs de WordPress aient intgr deux nouvelles mthodes pour automatiser les fonctions lors de la dsinstallation. Nous crivions dans la section prcdente que chaque dveloppeur dextension possdait sa propre mthode pour la suppression des donnes et des options. Le but des dveloppeurs de WordPress est maintenant de dfinir une mthode commune pour viter cet parpillement. Ces mthodes seront appeles uniquement lors de la suppression dune extension, et pas pour la dsactivation, car ce sont deux actions diffrentes. On peut ainsi dsactiver une extension temporairement sans pour autant vouloir supprimer des options et des donnes alors que, quand on supprime une extension que lon ne souhaite plus utiliser, il est logique de ne pas souhaiter conserver ses donnes.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

292

WordPress ct dveloppeur: concevoir une extension

Mthode 1: utilisation du fichier uninstall.php


Cette premire mthode est recommande par les dveloppeurs de WordPress. Lors de la dsinstallation dune extension, WordPress vrifie si le fichier uninstall.php existe dans le rpertoire de lextension; si cest le cas, WordPress excute le code PHP contenu, sil nexiste pas, alors il essaie la mthode2. Afin de scuriser parfaitement ce fichier, il est ncessaire deffectuer le contrle des deux constantes ABSPATH et WP_UNINSTALL_PLUGIN avant lexcution des fonctions de dsinstallation, de la faon suivante:
if( !defined( 'ABSPATH') && !defined('WP_UNINSTALL_PLUGIN') ) exit(); // On supprime ! delete_option('mon_option');

Une fois le contrle de scurit effectu, il faut appeler les fonctions de dsinstallation. Cela consiste supprimer les options et galement les tables de contenu sil y en a.

Mthode 2: utilisation du crochet de dsinstallation


Le crochet fonctionne de manire un peu diffrente de la mthode1. Contrairement ce qui se passe avec la mthode1, si on utilise le crochet, le code de lextension sera excut une dernire fois avant sa suppression. Il faut donc sassurer que le code de lextension est bien isol et ne risque pas de gner la dsinstallation. Cette seconde mthode peut tre trs pratique pour les extensions qui ne comprennent quun seul fichier PHP; cela vite de crer inutilement un dossier pour le seul fichier uninstall.php. Pour enregistrer une fonction PHP de dsinstallation, il suffit dutiliser la fonction register_uninstall_hook(). Elle prend deux paramtres: le chemin complet du fichier et le nom de la fonction excuter. Notez que ce crochet est appel uniquement si le fichier uninstall.php nexiste pas; les deux mthodes ne peuvent pas tre additionnes.
if ( function_exists('register_uninstall_hook') ) { register_uninstall_hook(__FILE__, 'my_uninstall_hook'); } function my_uninstall_hook() { // On supprime ! delete_option('mon_option'); }

Comme vous le voyez, vous pouvez garder une compatibilit avec les anciennes versions de WordPress en utilisant la fonction function_exists() avant lappel register_uninstall_hook().

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Les API de WordPress

293

Initialisation de l'extension
Principe
Dans le processus dexcution de WordPress, ce dernier va lancer dans un premier temps toutes ses bibliothques de fonctions PHP, puis il va rcuprer la liste des extensions dans une option de la base de donnes. Il va ensuite faire une boucle dans le tableau des extensions et lancer une par une les extensions. Lorsquelles sont toutes lances, WordPress excute une action nomme plugins_ loaded. Cette action permet de dmarrer un traitement une fois que toutes les extensions sont charges en mmoire. Pour optimiser au maximum la compatibilit entre les extensions, il est fortement conseill de lancer la logique de son extension ce moment-l et non au chargement du fichier PHP. Cela permet par exemple certaines extensions de se lancer avant les autres grce au mcanisme de priorit des actions. Cest gnralement le cas des extensions qui proposent davoir un site multilingue. Nous allons voir comment cela se passe dans le code.

Le code
Dans cet exemple, nous souhaitons ajouter un copyright la fin du contenu des articles. Notre extension contient la fonction suivante:
function copyright_content( $content = '' ) { return $content . '<br />Copyright 2010 - Ma socit'; }

Cette fonction est couple lvnement the_content via la fonction:


add_filter('the_content', 'copyright_content');

Nous allons faire en sorte de lancer lextension au bon moment. Pour cela, il faut crer une fonction copyright_init() qui va contenir lenregistrement du filtre. Ainsi, la ligne add_filter est dplace dans la fonction dinitialisation:
function copyright_init() { add_filter('the_content', 'copyright_content'); }

Nous couplons alors la fonction dinitialisation avec laction plugins_loaded via la fonction add_action():
add_action('plugins_loaded', 'copyright_init');

Le code final est le suivant:


function copyright_content( $content = '' ) { return $content . '<br />Copyright 2010 - Ma socit'; }

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

294

WordPress ct dveloppeur: concevoir une extension


function copyright_init() { add_filter('the_content', 'copyright_content'); } add_action('plugins_loaded', 'copyright_init');

Les options de WordPress


Concept
WordPress dispose dune table dans la base de donnes nomme wp_options. Cette dernire contient lintgralit du paramtrage du site. Les extensions ont galement la possibilit denregistrer leur configuration dans cette table. Chaque option est compose de deux valeurs: son nom et sa valeur. Le nom doit tre une valeur unique. Deux options ne peuvent pas avoir le mme nom. Une option peut tre automatiquement charge en mmoire lors de lexcution de WordPress, ce qui est pratique lorsquon souhaite stocker une information qui saffichera toujours (le nom du site, par exemple).

Fonctions de base
WordPress propose quatre fonctions pour grer les options. Via ces fonctions, nous pouvons ajouter, mettre jour, effacer et rcuprer des options.

get_option( $name ) La fonction get_option() permet de rcuprer la valeur dune option.


Elle prend un paramtre qui est le nom unique de loption. Si loption nexiste pas, la fonction retournera la valeur boolenne false. Il est galement possible dutiliser un second paramtre pour prciser la valeur retourner (autre que false) en cas dabsence de loption voulue.

add_option( $name, $value = '', $deprecated = '', $autoload = 'yes' ) Pour ajouter une option, vous pouvez faire appel la fonction add_option(). Elle peut prendre quatre paramtres, mais seul le premier est obligatoire:
Le nom unique de loption, qui est obligatoire. La valeur de loption (par dfaut, une chane vide). Le troisime paramtre nest plus utilis car il est dprci. Le lancement automatique ou non de loption dans WordPress. Par dfaut, les options sont lances automatiquement. Si vous ne voulez pas de ce comportement, utilisez 'no'. Si loption ne contient pas de nom ou si le nom est dj utilis, la fonction retournera false et aucune modification ne sera effectue.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Les API de WordPress

295

update_option( $option_name, $newvalue ) Pour mettre jour une option, vous devez utiliser la fonction update_option(). Cette dernire prend deux paramtres:
le nom de loption qui va tre mise jour; la nouvelle valeur de loption. Si loption que vous voulez mettre jour nexiste pas, la fonction add_option() sera ppele implicitement et loption sera cre. a

delete_option( $name ) Pour effacer une option, il suffit dutiliser la fonction delete_option() et de prciser le nom de loption. Si loption existe, elle sera efface et la fonction retournera la valeur true, sinon elle retournera la valeur false.

Automatiser la cration d'une interface d'administration


Concept Afin de standardiser les pages de rglages des extensions et permettre la modification des pages de rglages incluses dans WordPress (voir Figure10.03), lquipe de dveloppement a cr quatre fonctions pour grer les sections et les champs.
Figure10.03
Mise en page de rglages dans WordPress.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

296

WordPress ct dveloppeur: concevoir une extension


Fonctions
add_settings_section($id, $title, $callback, $page)

Cette premire fonction permet dajouter une section dans la page de rglages. Les sections permettent de regrouper les diffrents champs des options dans des groupes logiques. Par exemple, vous pourrez crer une section XML-RPC et y inclure les diffrentes options dont vous disposez ce sujet (activation ou autre). La fonction prend quatre paramtres: un id unique qui sera utilis sur la balise HTML gnre, le titre de la section qui saffichera dans la page de rglages, la fonction de callback qui sera appele aprs le titre et avant les options. Via cette fonction, il sera possible dafficher une description pour la section par exemple. Le dernier paramtre est le nom de la page o saffichera la section. Par exemple, dans la page de rglages criture, le nom de la page sera writing. Autres noms de pages possibles: general, reading, media, etc.
add_settings_field($id, $title, $callback, $page, $section = 'default', $args = array())

Nous savons que nous avons la possibilit dajouter des sections pour regrouper les rglages, ce qui veut dire que nous pouvons ajouter des rglages. Pour cela, il existe une fonction add_settings_field(). Elle prend six paramtres: Un id unique, qui sera utilis sur la balise HTML gnre ; en gnral, il sagit de lidentifiant de loption. Le titre du rglage. La fonction de callback, qui permettra dafficher un contenu pour loption, par exemple un champ HTML de type input. La page o apparatra le rglage. La section laquelle appartiendra le rglage. Un tableau PHP doptions permettant ventuellement de spcifier un label sur le titre pour amliorer lergonomie.
do_settings_sections($page)

Cette fonction pourra tre utilise par les extensions pour afficher une liste de sections et de rglages. Elle prend comme seul paramtre lidentifiant de la page que vous souhaitez afficher. Dans le cadre dune extension, il conviendra de dfinir un identifiant de page unique quil faudra utiliser avec cette fonction et les fonctions denregistrement de sections et doptions.
do_settings_fields($page, $section)

Cette fonction sera rarement utilise dans les extensions. Elle permet dafficher les options depuis une page et une section donne. En pratique, elle est appele implicitement par la fonction do_settings_sections() qui affichera les options de chaque section.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Les API de WordPress

297

Dclarer les options dans WordPress


Concept Dans les prochaines versions de WordPress, il sera obligatoire de dclarer explicitement les options de ses extensions pour pouvoir les utiliser. Les dveloppeurs de WordPress ont ajout deux fonctions cet effet dans WordPress2.7,
register_setting() et unregister_setting(), pour dclarer et supprimer des options. Ces fonctions ne sont que des alias vers les fonctions add_option_update_ handler() et remove_option_update_handler() que vous pouviez trouver dans

WordPress MU. Ces fonctions ne sont pas encore obligatoires, mais il est souhaitable dutiliser toutes les fonctionnalits de WordPress afin de ne pas avoir de mauvaise surprise avec vos extensions lors dune future mise jour de WordPress. La dclaration prsente trois principaux intrts: Cration de listes saines doptions. Appel de fonctions de callback pour formater et scuriser les options. En mode multisite, les administrateurs pourront prdfinir facilement les rglages des extensions pour lensemble de la plate-forme. Fonctions
register_setting($option_group, $option_name, $sanitize_callback = '')

Cette premire fonction permet de dclarer une option. Elle peut prendre trois paramtres: le nom du groupe de loption (par exemple, il peut sagir dun identifiant commun une extension), lidentifiant de loption, et optionnellement la fonction de callback appeler pour formater la valeur. Par exemple, si nous savons que la valeur retourne doit tre un entier, nous passerons comme troisime argument la valeur intval pour appeler la fonction PHP du mme nom et ainsi scuriser la valeur.
unregister_setting($option_group, $option_name, $sanitize_callback = '')

Cette fonction permet de supprimer une dclaration. Pour cela, il faut fournir les trois mmes paramtres que la dclaration.
settings_fields($option_group)

Cette fonction est utiliser sur la page des options de lextension, dans linterface dadministration; elle permet dafficher deux champs dentre pour spcifier le groupe doptions dans lequel vous travaillez, laction que vous ralisez (mise jour) et le "nonce" de scurit pour la page (cf. la section ddie aux "nonces"). Elle prend comme seul paramtre le nom du groupe doptions.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

298

WordPress ct dveloppeur: concevoir une extension

Bonnes pratiques
En rgle gnrale, lors du dveloppement dune extension, il faut tre conome en options. Il est prfrable de stocker vos rglages dans une SEULE option, via un tableau PHP, plutt quutiliser une option par rglage. Par exemple, si votre extension contient dix paramtres, vous obtiendrez de meilleures performances en stockant les dix valeurs dans un tableau, lui-mme stock dans une option, quavec les dix valeurs dans dix options diffrentes. De plus, lutilisation des tableaux est facilite avec les fonctions vues ci-dessus. Ces dernires grent dynamiquement la srialisation et la dsrialisation du tableau pour permettre le stockage dans la base de donnes. Attention cependant ne pas stocker trop de valeurs dans un seul tableau. Il risque de consommer plus de mmoire, et le gain de performances pourrait poser problme sur les hbergements avec peu de mmoire alloue PHP. Par exemple, il nest pas interdit de stocker les rglages ncessaires uniquement ladministration dans une option, et les autres rglages dans une seconde option. Enfin, les rglages des widgets sont gnralement stocks dans une option diffrente de lextension.

Les permissions et les rles


Concept
Ladministrateur dun site WordPress peut crer dautres comptes utilisateur et leur assigner diffrents droits par le biais des rles. Ces rles dfinissent ce que lutilisateur peut faire: crire un article, modifier une page, supprimer une catgorie, installer un thme...

Principes
WordPress contient par dfaut cinq rles: administrateur; diteur; auteur; contributeur ; abonn. ces rles sajoute, depuis la version 3.0, le statut de "super-admin", qui est un privilge accessible partir du moment o WordPress fonctionne en mode multisite. Le super-admin, qui est ladministrateur du rseau de site, dispose de droits supplmentaires relatifs la gestion de lensemble du rseau.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Les API de WordPress

299

Chaque rle dispose de permissions (capabilities en anglais). Plus le rle est important, plus les permissions sont tendues. Par exemple, par dfaut, seul le rle administrateur a le droit de modifier les rglages du site, car lui seul possde la permission manage_options. Ces permissions peuvent tre visionnes et modifies via lextension Role Manager (voir Figure 10.04). Cette dernire permet de configurer totalement les permissions de chaque rle.
Figure10.04
Les permissions par rle dans l'extension Role Manager.

Vous pouvez galement crer de nouveaux rles avec les permissions souhaites via cette extension. Ces actions peuvent tre ralises aussi depuis le code de votre extension via lAPI de Rles de WordPress. Dans cette section, nous nallons pas dcortiquer lintgralit des fonctions, mais uniquement les plus utilises. Nhsitez pas lire le code source de WordPress pour dcouvrir toutes les mthodes.

Les niveaux de WordPress rappel


Avant de dtailler les fonctions de lAPI de Rles, faisons un petit rappel sur lancien fonctionnement des utilisateurs de WordPress. Avec la version 2.0, les utilisateurs ne travaillaient pas avec des permissions, mais uniquement sur des niveaux (levels en anglais). Plus le niveau tait grand, plus lutilisateur possdait de droits. Par exemple, le rle administrateur correspondait au niveau10. Ce systme, limit techniquement, empchait une configuration fine des permissions. Par exemple, une extension pouvait difficilement crer un rle et spcifier prcisment le droit pour chacune de ces fonctionnalits. Aujourdhui, il est toujours possible dutiliser les niveaux dans WordPress pour des raisons de compatibilit avec les anciennes extensions ; par exemple, les menus peuvent encore recevoir un niveau. Nanmoins, cette faon de travailler est compltement dconseille.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

300

WordPress ct dveloppeur: concevoir une extension

Classes PHP
WordPress possde trois classes pour grer les rles, permissions et utilisateurs. Vous les retrouvez ci-dessous.

WP_Roles Cette classe gre les rles dans WordPress.


Vous pouvez: ajouter un rle; supprimer un rle; rcuprer un rle; ajouter une permission un rle; supprimer une permission un rle.

WP_Role Cette classe est prsente des fins de rtrocompatibilit pour les anciennes extensions. Elle ne doit pas tre utilise par les nouvelles extensions. WP_User Cette classe gre linteraction entre les utilisateurs et les rles.
Vous pouvez: rcuprer le rle dun utilisateur; attribuer un rle un utilisateur; supprimer un rle un utilisateur; ajouter un rle un utilisateur; ajouter une permission un utilisateur; supprimer une permission un utilisateur; vrifier que lutilisateur possde une permission spcifique; traduire le niveau (level) dun utilisateur en permission.

Fonctions d'aide
Afin de simplifier la vie des dveloppeurs et leur viter de trop instancier ces classes (ce qui complexifie le code et peut faire fuir les dveloppeurs novices), quatre fonctions PHP classiques permettent de travailler avec les rles.

current_user_can($capability) Cette premire fonction permet de vrifier que lutilisateur connect possde bien la permission ou le rle indiqu.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Les API de WordPress


Cela peut tre trs utile pour amliorer la scurit dune extension.

301

Par exemple, lors de lenvoi des donnes dun formulaire HTML, vous placez gnralement le contrle et lenregistrement des donnes avant laffichage afin de pouvoir faire une redirection par exemple. Dans ce cas prcis, vous ne profitez pas du contrle de scurit de WordPress. Il faut donc scuriser manuellement votre fonction; pour cela current_user_can() est trs simple utiliser. Cette fonction prend un seul paramtre: le nom de la permission ou du rle que vous souhaitez tester sur lutilisateur connect. Elle retourne la valeur true si lutilisateur possde la permission/le rle, sinon elle retourne false.

get_role($role), add_role($role, $display_name, $capabilities = array()), remove_role($role) Ces trois fonctions sont des raccourcis pour lutilisation de la classe WP_Roles.
Elles instancient automatiquement la classe et appellent les mthodes du mme nom de la classe. Ces fonctions sont prsentes pour permettre aux dveloppeurs dbutants de ne pas avoir se soucier des concepts de classes, dobjets et dinstanciations.
get_role($role)

La fonction get_role() permet de rcuprer les permissions dun rle. Elle prend en seul paramtre le nom du rle.
add_role($role, $display_name, $capabilities = array())

La fonction add_role() ajoute un rle dans WordPress. Elle prend trois paramtres: le nom administratif du rle; le nom public du rle; le tableau des permissions associes au rle.
remove_role($role)

Enfin, la fonction remove_role() permet la suppression dun rle de WordPress ; elle prend comme seul paramtre le nom du rle.

is_super_admin($user_id = false) Cette nouvelle fonction, utile principalement en mode multisite, aide simplement dterminer si un utilisateur est super-admin ou non. Son unique paramtre permet de prciser lID de lutilisateur, mais il est optionnel: sans valeur, cest le statut de lutilisateur courant qui est vrifi.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

302

WordPress ct dveloppeur: concevoir une extension

Exemples
Nous allons voir comment ajouter une permission un rle. Ici nous souhaitons ajouter la permission gestion_monplugin au rle administrateur de WordPress. Cette permission permettra de grer les donnes dune extension de notre cration. Le code que vous avez ci-aprs ne doit pas tre excut chaque chargement de lextension. En rgle gnrale, vous le retrouvez lors de lactivation de lextension:
// On rcupre les donnes du rle administrateur $role = get_role('administrator'); // On vrifie que le rle existe et qu'il ne possde dj pas la permission if( $role != null && !$role->has_cap('gestion_monplugin') ) { // Si la permission n'existe pas, on ajoute la permission au rle. $role->add_cap('gestion_monplugin'); }

Bonnes pratiques
Aucun dveloppeur nest oblig de crer des permissions spcifiques pour son extension. Dans un certain nombre de cas, les permissions par dfaut suffisent. Pour scuriser la partie rglages de son extension, il suffit de contrler la permission manage_options. Si lextension gre un nouvel aspect des mots-clefs, la permission lie aux catgories et aux mots-clefs de WordPress manage_categories fera galement laffaire. La liste des rles et des permissions associes est prsente sur le Codex de WordPress (http://codex.wordpress.org/Roles_and_Capabilities). Cette page peut tre trs utile durant le dveloppement.

Internationalisation de WordPress
Concept
Comme vous avez pu le lire au Chapitre1, WordPress est un logiciel dvelopp en anglais. Pour permettre la plus large diffusion possible du logiciel, les dveloppeurs ont internationalis WordPress. Cela veut dire quil peut tre traduit trs facilement sans modifier les fichiers PHP. Il utilise pour cela le format de fichier de la bibliothque open-source gettext. Grce ce format, il est possible de rpertorier toutes les chanes de textes dans un fichier PO. Ce fichier PO est ditable via un diteur de texte ou des logiciels spcialiss, comme poEdit. Il contient les informations suivantes: le nom du fichier o se situe la chane, ainsi que la ligne; la chane dans la langue originale; la chane traduite.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Les API de WordPress


Cela donne:
#: wp-admin/admin-header.php:73 msgid "Visit Site" msgstr "Aller sur le site"

303

De nos jours, les fichiers PO ne sont plus modifis via des diteurs de texte. Il existe un excellent logiciel disponible sous Windows, Linux et Mac, appel poEdit (voir Figure 10.05). Comme son nom lindique, cest un diteur de fichier PO; il est libre, gratuit, disponible dans de nombreuses langues et dispose de toutes les fonctionnalits ncessaires linternationalisation via le format de fichier gettext.
Figure10.05
Fentre de l'application poEdit.

Lors de lenregistrement du fichier PO avec poEdit, le logiciel cre un fichier avec une extension .mo. Un fichier MO est un binaire; cest une compilation du fichier PO qui a pour but dtre plus lgre en taille et davoir de meilleures performances. Les fichiers MO sont les seuls fichiers lisibles par la librairie gettext. Un fichier MO nest pas ditable; gnralement, les fichiers PO et MO sont toujours diffuss ensemble, afin de faciliter la correction de la traduction.

Implmentation dans WordPress


WordPress possde une classe qui mule le fonctionnement de gettext. Cette classe provoque une baisse sensible des performances, mais elle offre plus de souplesse sur le positionnement des fichiers PO/MO dans le systme de fichiers. Dans le pack franais de WordPress, vous pouvez trouver la traduction franaise dans le dossier wp-content/languages.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

304

WordPress ct dveloppeur: concevoir une extension


Dans les versions les plus anciennes du pack, la traduction peut galement se situer dans le dossier wp-includes/languages. Cet emplacement est cependant obsolte, car rgulirement effac lors des mises jour... Pour activer une langue dans WordPress, il faut modifier le fichier de configuration wpconfig.php et diter la valeur de la constante WPLANG. Pour la langue franaise, vous utiliserez:
define ('WPLANG', 'fr_FR');

Fonctions
Au fil des versions et des besoins, les dveloppeurs de WordPress ont dvelopp un bon nombre de fonctions ddies linternationalisation du logiciel. Par un souci de concision, certaines ne seront abordes que superficiellement.

get_locale() Cette fonction retourne le code de la langue charge dans WordPress. Si vous utilisez la version franaise de WordPress, la valeur retourne sera fr_FR. get_available_languages($dir = null) Cette fonction retourne un tableau PHP contenant la liste des langages disponibles, en se fondant sur les fichiers .mo prsents dans un dossier donn (par dfaut, celui de la constante WP_LANG_DIR, soit normalement wp-content/languages). __($text, $domain = 'default') Cette fonction permet de retourner une chane de caractres traduite. Elle prend deux paramtres : le premier est la chane de caractres traduire. Gnralement, dans les projets libres, cest une chane de langue anglaise.
Le second paramtre est le domaine de traduction. Grce ce domaine, il est possible de charger un fichier MO spcifique par domaine. Si aucun domaine nest prcis, le domaine utilis sera celui par dfaut. Le fichier de traduction de WordPress traduit uniquement les chanes avec le domaine par dfaut. Dans le cadre dune extension, il est ncessaire de crer son propre domaine et, du coup, de charger le fichier MO spcifique lextension (ce qui sous-entend de crer entre les deux un fichier PO).

_e($text, $domain = 'default') Cette fonction fait exactement la mme chose que la fonction __(), la diffrence quau lieu de retourner la valeur traduite, la fonction _e() laffiche via la fonction PHP echo(). _x($text, $domain = 'default') Cette fonction est trs semblable la fonction __(). Elle supporte nanmoins la notion de contexte dans la chane de caractres traduire. En effet, pour faciliter la traduction de

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Les API de WordPress

305

certaines chanes, les dveloppeurs ont la possibilit dapporter quelques prcisions sur le contexte. Avant WordPress2.8, cette version tait appele _c(). Le contexte est spar de la chane via le caractre |. Exemple:
_c("Approved|plural");

Avec le commentaire, vous savez que la chane de caractres est utilise dans un contexte pluriel. En anglais, il ny a pas de distinction entre le singulier et le pluriel, mais dans dautres langues comme le franais, ce nest pas la mme chose. Le commentaire ne doit pas tre traduit.

_n($single, $plural, $number, $domain = 'default') Cette fonction est un peu plus complique que les prcdentes. Elle permet de grer la traduction dune chane de caractres dans un contexte singulier et pluriel. Avant WordPress2.8, cette version tait appele __ngettext().
Exemple dans le fichier PO:
#: wp-admin/edit-comments.php:80 #, php-format msgid "%s comment deleted" msgid_plural "%s comments deleted" msgstr[0] "%s commentaire supprim" msgstr[1] "%s commentaires supprims"

Cette fonction prend quatre paramtres: La chane de caractres au singulier. La chane de caractres au pluriel. Le chiffre ou le nombre de la situation. Dans lexemple ci-aprs, cest le nombre de commentaires. Le domaine de traduction. Le fichier PO gnre ici deux possibilits: singulier et pluriel.
Certaines langues ont trois possibilits: zro, un et pluriel. Ce paramtre est dfini dans l'en-tte du fichier PO.

_nx($single, $plural, $number, $context, $domain = 'default' ) Comme son nom le laisse deviner, cette fonction combine les comportements de _n() et _x() : elle permet de prciser la fois le contexte singulier et pluriel, et dindiquer le domaine auquel la traduction sapplique (si besoin est).

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

306

WordPress ct dveloppeur: concevoir une extension


esc_attr_*() et esc_html_*() Les fonctions __(), _e() et _x() disposent toutes les trois de variantes spcialises, nommes sur le mme modle:
esc_attr_e() esc_attr_x() esc_attr__() esc_html_e() esc_html_x() esc_html__() Leurs dnominations proches nous permettent de les expliquer par groupe: "esc" signifie que ces fonctions renvoient un contenu "chapp", cest--dire que certains caractres spciaux (esperluettes, guillemets, apostrophes...) ont t remplacs par des entits HTML. "attr" signifie que le contenu est chapp pour tre inclus dans un attribut de balise HTML, tandis que "html" indique que le contenu peut tre utilis tel quel au sein de code HTML. Ensemble, ces six fonctions permettent de grer les traductions au sein dun fichier HTML de manire lgante et sre, que ce soit le contenu dun attribut alt="" ou du texte normal.

load_textdomain($domain, $mofile) Cette fonction permet de charger un fichier MO en mmoire et de lassocier un domaine de traduction.
Le premier paramtre est le domaine de traduction, et le second est le chemin complet vers le fichier de traduction MO. De son ct, unload_textdomain($domain) permet de supprimer de la mmoire les traductions charges pour un domaine donn.

is_textdomain_loaded($domain, $path = false) Cette fonction compagne de la prcdente permet de vrifier si des traductions sont disponibles pour le domaine prcis, en renvoyant true si cest le cas, false le cas chant. load_plugin_textdomain($domain, $abs_rel_path = false, $plugin_rel_path = false) Cette fonction a comme objectif de simplifier le lancement de fichier MO pour les extensions. Par dfaut, la fonction tente de charger le fichier MO depuis le rpertoire wp-content/ plugins.
En voici un exemple: une extension de calendrier utilise le domaine moncalendrier et le site install est traduit en franais (code langue: fr_FR). La fonction tentera de charger le fichier wp-content/plugins/moncalendrier-fr_FR.mo.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Les API de WordPress

307

Le deuxime paramtre permet de spcifier le chemin du fichier de traduction MO. WordPress ajoute automatiquement la constante ABSPATH en prfixe la valeur passe en paramtre. Le troisime paramtre permet galement de spcifier le chemin vers la traduction; il prfixe la valeur passe en paramtre de la constante WP_PLUGIN_DIR. Pour charger la traduction contenue dans le dossier languages de lextension Mon Calendrier, nous avons cette possibilit:
load_plugin_textdomain($domain, 'wp-content/plugins/moncalendrier/languages', false);

Ou celle-l:
load_plugin_textdomain($domain, false, 'moncalendrier/languages');

La dernire mthode est recommande par les dveloppeurs de WordPress. Cette fonction dispose dun quivalent spcialis pour les extensions places dans le dossier mu-plugins: load_muplugin_textdomain($domain, $mu_plugin_rel_path = '').

load_theme_textdomain($domain, $path = false ) Cette dernire fonction permet de charger facilement les traductions dans les thmes WordPress.
Elle prend comme premier paramtre le domaine de traduction. La fonction essaiera uni quement de charger le fichier MO du thme activ. Le nom et la localisation des fichiers MO pour les thmes sont trs simples, il suffit de n ommer le fichier MO par le code de la langue et de le positionner la racine du thme. Par exemple, pour le thme K2, il faut placer la traduction franaise lemplacement suivant: wp-content/themes/k2/fr_FR.mo. Cette fonction dispose dun quivalent spcialis pour les thmes enfants: load_child_ theme_textdomain($domain, $path = false).

Bonnes pratiques
Une erreur basique revient frquemment dans linternationalisation des extensions et thmes. Cette erreur survient lorsquon travaille avec des phrases comprenant des variables susceptibles de changer. Lerreur est la suivante:
__('Replace ').$a.__(' with ').$b;

Ici, vous voyez que la phrase contient deux variables susceptibles de changer: $a et $b. Le problme, cest que le dcoupage fonctionne dans la langue anglaise. Mais fonctionne-t-il avec toutes les langues?

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

308

WordPress ct dveloppeur: concevoir une extension


Dans certaines langues, il est probable que la valeur du $b doive tre positionne avant le $a. Pour simplifier la traduction et la rendre la plus compatible possible, il est intressant dutiliser les chanes formates de PHP. Vous remplacez ainsi la chane de lexemple prcdent par:
sprintf(__('Replace %1$s with %2$s'), $a, $b);

Ainsi, vous pouvez traduire comme bon vous semble la phrase, avec la possibilit de mettre la variable $b avant la variable $a. Notez quen rgle gnrale la construction des phrases en anglais et en franais est sensiblement la mme. Cette erreur nest donc pas dramatique pour la traduction franaise; il nempche quune meilleure internationalisation de votre extension ou thme ne pourra quaugmenter sa d iffusion lchelle mondiale.

WP_Http: l'API HTTP


Concept
Au fil des volutions, WordPress est amen de plus en plus souvent effectuer des appels HTTP pour obtenir des donnes et des informations sur des sites extrieurs. Nous retrouvons ces appels pour diffrentes fonctionnalits: le contrle de version de WordPress et des extensions; la mise jour de WordPress et des extensions; les pings effectus par les extensions tierces comme Google Sitemap Generator,etc. Malheureusement, jusqu la version2.7 de WordPress, il nexistait pas dAPI pour standardiser les appels HTTP de WordPress et ses extensions. De ce fait, il tait possible de trouver dans WordPress diffrentes mthodes pour effectuer ces appels. Afin de standardiser ces appels et par la mme occasion amliorer la compatibilit et les performances de WordPress, lquipe de WordPress a dvelopp une nouvelle classe HTTP. Notez quil existe une classe PHP nomme Snoopy, prsente dans WordPress depuis la version1.5. Elle a pour but dmuler un navigateur web; de ce fait elle pourrait rpondre au besoin des appels HTTP. Malheureusement, cette classe est trs ancienne, et elle ne correspond pas au besoin damlioration des performances et des compatibilits, dautant plus quelle ne supporte que deux technologies sur les cinq existantes (elles seront dtailles ci-aprs).

Rappel: les diffrents types de requtes HTTP


Il existe diffrents types de requtes HTTP; ces types sont dfinis par une norme RFC qui en est sa version1.1. Les serveurs HTTP implmentent au mieux ses fonctionnalits en natif ou via des extensions.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Les API de WordPress

309

Ici, nous prsenterons uniquement les trois types de requtes les plus utilises; de ce fait elles sont gres nativement dans tous les serveurs HTTP modernes que vous trouvez sur le march. Vous trouverez plus dinformations sur la norme HTTP 1.0 et 1.1 sur Wikipdia: http:// fr.wikipedia.org/wiki/Hypertext_Transfer_Protocol. GET. Cest la mthode la plus courante pour demander une ressource. Une requte GET est sans effet sur la ressource, il doit tre possible de rpter la requte sans effet. HEAD. Cette mthode ne veut que des informations sur la ressource, sans demander la ressource elle-mme. POST. Cette mthode doit tre utilise pour ajouter une nouvelle ressource (un message sur un forum ou un article dans un site). Nanmoins, en pratique, il nest pas rare de devoir effectuer un appel de type POST pour simplement demander une ressource sans pour autant la modifier.

Technologies
Il existe cinq technologies diffrentes dans PHP pour faire des appels sur des ressources externes. Le but ici nest certainement pas de comparer les plus et les moins de chaque te chnologie, mais dexpliquer le mode de fonctionnement de la classe. La classe WP_Http est capable dutiliser ces cinq technologies. Le choix de la technologie sera dfini par ordre de performances. On essaiera dutiliser la technologie la plus performante avant de passer la suivante, ce qui donne cet ordre-ci: HTTP (classe propre PHP 5.2); cURL; Streams; Fopen; Fsockopen. Si la technologie nest pas disponible, parce que la version de PHP est plus ancienne ou parce que lhbergeur la dsactive explicitement, WordPress passera automatiquement la suivante. En thorie, cette classe est compatible avec la quasi-totalit des hbergeurs et garantit les meilleures performances possibles pour votre site.

Fonctions
_wp_HTTP_get_object() Cette fonction permet de retourner un objet qui reprsente une instanciation de la classe WP_Http de WordPress. Avec cet objet, il sera possible dutiliser les mthodes de la classe.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

310

WordPress ct dveloppeur: concevoir une extension


wp_remote_request($url, $args = array()) Cette fonction permet de faire une requte HTTP complexe. Le premier paramtre est ladresse de la ressource, et le second paramtre est un tableau PHP assez complexe contenant les informations de len-tte HTTP; vous pouvez ainsi dfinir la mthode, le dlai avant expiration, le suivi ou non des redirections, la version du protocole HTTP, lagent utilisateur employ Le tableau complet est disponible depuis le fichier wp-includes/HTTP.php contenant la classe WP_Http. wp_remote_get($url, $args = array()) Cette fonction est un alias vers la fonction wp_remote_request(). Elle spcifie juste que la mthode employe sera GET. Les deux paramtres sont donc les mmes, sauf que la mthode HTTP ne peut pas tre modifie depuis le second paramtre. wp_remote_post($url, $args = array()) Cette fonction est semblable wp_remote_get(), la diffrence que la mthode employe sera POST. wp_remote_head($url, $args = array()) Cette fonction est semblable wp_remote_post(), la diffrence que la mthode employe sera HEAD. wp_remote_retrieve_headers(&$response) Cette fonction permet de rcuprer le tableau de len-tte HTTP. Elle prend comme seul paramtre la rponse HTTP que lon aura rcupre via une des fonctions prsentes auparavant. wp_remote_retrieve_header(&$response, $header) Cette fonction est un peu plus prcise que wp_remote_retrieve_headers() ; elle permet de rcuprer une valeur prcise de len-tte HTTP. Pour cela, il faut passer en plus du premier paramtre (la rponse HTTP) le champ de len-tte rcuprer, par exemple code, pour retrouver le code HTTP de la ressource. wp_remote_retrieve_response_code(&$response) Cette fonction permet de retourner le code HTTP de rponse de la requte. Elle utilise en fait la fonction wp_remote_retrieve_header() et prcise comme second paramtre lidentifiant pour le code HTTP, cest--dire code. wp_remote_retrieve_response_message(&$response) Tout comme wp_remote_retrieve_response_code(), cette fonction est un alias de wp_ remote_retrieve_header(). Le deuxime paramtre pass sera message. Il permet de rcuprer cette information de la rponse HTTP. wp_remote_retrieve_body(&$response) Enfin, cette dernire fonction permet de rcuprer le contenu de la rponse HTTP. Elle prend comme seul paramtre la rponse HTTP.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Les API de WordPress

311

Par exemple, si vous appelez une page comme http://google.fr, vous rcuprerez une longue chane de caractres contenant tout le code HTML de la page daccueil de Google.

L'API shortcode
Concept
Une des nouveauts de WordPress2.5 est lajout de galeries photo dans le logiciel. Pour permettre une insertion facile des galeries (voir Figure10.06) et standardiser le remplacement des marqueurs de type BBcode dans le contenu des articles, les dveloppeurs ont cr une API appele shortcode.
Figure10.06
Un marqueur shortcode dans l'diteur visuel.

Avant cette API, chaque dveloppeur remplaait les marqueurs avec sa propre mthode, et cela pouvait provoquer des bogues et des problmes de performances. Cest le cas, par exemple, des extensions de formulaires de contact et dinsertion de lecteur vido. Cette API permet le remplacement de marqueur de type BBcode, comme [gallery], par un code HTML spcifique. Ainsi, cette API permet aux dveloppeurs de ne plus se compliquer lexistence avec les expressions rgulires.

Utilisation
Lexemple le plus basique est celui de linsertion des galeries. Il suffit dajouter le shortcode
[gallery]

dans le contenu de larticle pour quil soit remplac par la galerie dimages WordPress. Vous pouvez galement spcifier des attributs dans le marqueur shortcode, comme ceci:
[gallery id="123" size="medium"]

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

312

WordPress ct dveloppeur: concevoir une extension

Fonctions
Nous avons une srie de fonctions notre disposition, dont trois pour lenregistrement et la suppression des shortcodes, et une dernire pour lextraction des valeurs des attributs. Les shortcodes fonctionnent sur le mme principe que les filtres. En ralit, un shortcode nest quun filtre plus volu et subordonn une tche spcifique. Comme les filtres, ils doivent tre enregistrs afin dtre excuts au bon moment par Word Press. Et, comme les filtres, un shortcode peut tre ajout ou supprim.

add_shortcode($tag, $func) Cette premire fonction permet denregistrer un nouveau shortcode. Elle prend deux paramtres: le premier est le nom du marqueur du shortcode, le second est le nom de la fonction excuter pour remplacer le marqueur par le code HTML voulu.
Par exemple, si nous souhaitons crer le marqueur suivant:
[deezer id="123"]

Le nom du marqueur est Deezer ; nous allons coupler ce marqueur avec la fonction deezer_shortcode(). Lappel de la fonction add_shortcode() sera:
add_shortcode('deezer', 'deezer_shortcode');

remove_shortcode($tag) Comme son nom lindique, cette deuxime fonction permet de supprimer un shortcode dans WordPress.
Par exemple, si vous ne souhaitez pas utiliser le shortcode des galeries de WordPress mais employer votre ancienne extension qui fonctionne avec le mme shortcode, il vous suffira de choisir la fonction remove_shortcode(); cette fonction prend comme seul paramtre le nom du marqueur. Pour supprimer les galeries de WordPress, excutez la fonction:
remove_shortcode('gallery');

remove_all_shortcodes() Dans certains cas, il peut tre ncessaire de supprimer tous les shortcodes enregistrs dans WordPress. Pour cela, il existe la fonction remove_all_shortcodes().
Elle ne prend aucun paramtre; il suffit de lexcuter lors de laction init de WordPress pour supprimer tous les shortcodes enregistrs par WordPress et les extensions.

shortcode_atts($pairs, $atts) Contrairement aux fonctions prcdentes, shortcode_atts() sutilise uniquement dans la fonction appele par le shortcode le deuxime paramtre de la fonction add_shortcode().

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Les API de WordPress

313

Cette fonction permet dextraire les valeurs des attributs de votre shortcode. Par exemple pour le shortcode:
[deezer id="123"]

...vous pourrez rcuprer la valeur 123 de lattribut id. Le premier paramtre de la fonction doit tre un tableau deux dimensions contenant le nom de lattribut et sa valeur par dfaut si elle existe. Le second paramtre est le tableau des attributs au format brut et donc peu exploitable. Gnralement, la fonction shortcode_atts() est couple avec la fonction PHP extract(). Voir lexemple ci-aprs.

Exemple
Nous allons permettre le remplacement dun shortcode par deux chanes de texte, mais le code HTML de remplacement ne dpend que de vous Vous pouvez trs bien mettre un lecteur Flash par exemple. Le shortcode utilisable depuis le contenu des articles est:
[deezer id="123" title="Texte alternatif"]

Voici le code de lextension (noubliez pas de lire les commentaires pour comprendre la suite des vnements):
// On enregistre le shortcode dans WordPress. add_shortcode('deezer', 'deezer_player'); // Ci-aprs la fonction appele par le shortcode pour remplacer function deezer_player( $atts = '' ) { // On rcupre les valeurs autorises par mon shortcode. extract(shortcode_atts(array('id' => '','title' => ''), $atts)); // Je vrifie que la valeur du shortcode est bien un entier. // Si a n'est pas le cas, je retourne une chane vide. $id = (int) $id; if ( $id == 0 ) { return ''; } // On remplace le shortcode par du texte. // En pratique, cela peut tre remplac par un lecteur flash... $output = 'Vido ID : '. $id; // On peut faire de mme avec le titre. $output .= 'Vido Title : '. $title; // On n'oublie pas de renvoyer la valeur de remplacement return $output; }

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

314

WordPress ct dveloppeur: concevoir une extension

Les menus de WordPress


Concept
Linterface dadministration de WordPress a beaucoup volu entre les versions2.3 et2.6, changeant plus ou moins radicalement de style par deux fois en un an: WordPress2.5 tentera de consolider ladministration en place depuis la version1.0, tandis que WordPress2.7 se verra offrir une toute nouvelle interface, beaucoup plus mme de suivre les volutions venir du CMS. Cest cette dernire volution qui est toujours en place aujourdhui. Malgr ces nombreuses incarnations, cette interface a toujours t pense, ds sa conception, pour accueillir des extensions. Pour cela, lquipe de dveloppement met disposition diffrentes fonctions pour ajouter des menus dans WordPress (voir Figure10.07). Ces menus peuvent tre insrs dans toutes les rubriques de WordPress, que ce soit Tableau de bord, Articles, Mdias, Apparence, Extensions, Rglages,etc. Dsormais, la seule difficult pour le dveloppeur est de savoir dans quel menu il place la page de son extension. Nous aborderons cette question dans la section des bonnes pratiques.
Figure10.07
Le menu partir de WordPress 2.7.

Fonctions
LAPI des menus contient cinq fonctions. Les deux premires que nous allons voir sont les plus importantes, les trois dernires ntant que des fonctions simplifies exploitant directement les deux premires fonctions.

add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function = '', $icon_url = '', $position = NULL) Cette fonction permet de crer des menus de premier niveau. Le premier niveau dans WordPress, cest par exemple Articles ou Outils.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Les API de WordPress

315

add_menu_page('Titre de la page', 'Titre de la page dans le menu', 'manage_ options', 'mon-menu-de-premier-niveau', 'fonction_de_la_page');

Cette fonction prend sept paramtres: le titre de la page, celui quon retrouve dans la balise HTML title; le titre de la page que lon retrouve dans le menu; la capacit minimale de lutilisateur (capability en anglais). lidentifiant unique de ce menu, ou le chemin complet vers le fichier PHP de la page dadministration, gnr facilement avec la constante PHP __FILE__; la fonction PHP excuter pour la gnration de votre page; ladresse web de licne utiliser pour ce menu; la position de ce menu parmi les autres menus. Les deux derniers paramtres sont facultatifs. Si aucune fonction nest prcise, WordPress partira du principe que le fichier indiqu gnre automatiquement lcran dadministration.

add_submenu_page($parent_slug, $page_title, $menu_title, $capability, $menu_slug, $function = '') Cette deuxime fonction est tout aussi importante que la prcdente; elle permet de crer des sous-menus. Par exemple, la page Ajouter contenue dans le menu de premier niveau Articles est un sous-menu par dfaut de WordPress.
add_submenu_page(__FILE__, 'Titre de la page', 'Titre de la page dans le menu', 8, __FILE__, 'fonction_de_la_page');

Au niveau des paramtres, cest quasi la mme chose que add_menu_page(), sauf quil y a un argument en plus. Il est plac en premire position; ce paramtre spcifie la page parente du sous-menu. Vous avez deux possibilits: Soit vous ajoutez un sous-menu un menu existant de WordPress, auquel cas il suffit dentrer le nom du fichier PHP de WordPress. Par exemple, pour ajouter une page dans le menu Articles, il suffit de passer en paramtre edit.php. Soit, dans le cas du sous-menu dun menu ajout via une extension, il suffit de passer le chemin entier vers le fichier PHP de lextension (avec la constante PHP __FILE__ par exemple). Depuis WordPress 2.8, il est galement possible dutiliser lidentifiant (ou "slug") du menu suprieur, plutt que son nom de fichier.

add_options_page($page_title, $menu_title, $capability, $menu_slug, $function = '') Cette fonction est un raccourci pour ajouter un sous-menu du menu Rglages. Elle se contente de prciser le fichier parent la fonction add_submenu_page().
add_options_page(page_title, menu_title, capability, file, [function]);

Les paramtres sont les mmes que la fonction add_menu_page().

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

316

WordPress ct dveloppeur: concevoir une extension


add_management_page($page_title, $menu_title, $capability, $menu_slug, $function = '') Cette fonction permet dajouter un sous-menu dans le menu Outils.
add_management_page(page_title, menu_title, capability, file, [function]);

Elle dispose des mmes caractristiques que add_options_page().

add_theme_page($page_title, $menu_title, $capability, $menu_slug, $function = '') Cette fonction permet dajouter un sous-menu dans le menu Apparence.
add_theme_page( page_title, menu_title, capability, file, [function]);

Elle dispose des mmes caractristiques que add_options_page().

Bonnes pratiques
Depuis la version 2.7, WordPress dispose dune interface dont le menu se trouve gauche de lcran, plutt quen haut de celui-ci comme ctait le cas depuis le dbut. Ce changement fondamental dinterface a permis, entre autres choses, de ne plus voir les menus de ladministration rendus inutilisables par un trop-plein de pages dextensions. En effet, il suffisait dune dizaine dextensions pour que les menus "explosent" en largeur et cassent la mise en page de linterface. Grce la nouvelle disposition horizontale, il est dsormais possible davoir un grand nombre dextensions avec leurs pages, sans amener de la confusion dans linterface. Il est mme possible pour une extension de crer son propre menu de premier niveau. Lobjectif premier est de ne pas surcharger linterface de sous-menus, afin de garder lensemble lisible pour lutilisateur. La simplicit veut que les extensions placent leurs pages dans le menu Rglages (Options en anglais) avec toujours la possibilit de placer une page dans un autre menu (par exemple Articles) si cela se justifie. Lutilisation dun menu de premier niveau est rserver aux extensions qui introduisent des concepts totalement nouveaux dans linterface de WordPress, concept qui ne peut tre logiquement pris en compte dans les menus existants. Une autre solution existe par ailleurs : crer une page principale pour son extension, et mettre le menu de lextension directement sur cette page, plutt que charger le menu principal ou crer son propre menu. Nous verrons cette approche au chapitre prsentant la cration dune extension du dbut la fin.

Le mcanisme de scurit nonce


Concept
WordPress possde diffrents mcanismes pour scuriser les traitements de donnes dans le site. Les nonces sont une scurit dite "de provenance".

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Les API de WordPress


Cela veut dire que WordPress va vrifier diffrents points: Lauthentification. Est-ce que lutilisateur est bien connect? Lintention. Faut-il protger lutilisateur de lui-mme? La provenance. Do vient lutilisateur?

317

Ainsi, WordPress contrle la validit des donnes via une cl unique, alatoire et temporaire. Cest lorigine du mot "nonce": number used only once, soit "un nombre utilis une seule fois". Prenons comme exemple leffacement dun article. Lutilisateur doit cliquer sur le lien Mettre la Corbeille; ce lien va contenir une cl unique et alatoire pour cette action. Lors du clic, le navigateur va envoyer une requte au serveur de votre site; ce dernier va vrifier la prsence de cette cl avant de supprimer larticle. Si la cl nest pas trouve, il retournera un message derreur. La cl gnre tant unique et limite dans le temps, si vous copiez-collez le lien deffacement dun article et essayez ce lien 24heures plus tard, leffacement ne fonctionnera pas. Le mcanisme permet ainsi de lutter contre les attaques de hackers, mais galement contre les mauvaises manipulations du logiciel. Ce mcanisme a t introduit la version2.0.3 de WordPress. Depuis il scurise toutes les fonctionnalits du logiciel. Enfin, les nonces fonctionnent aussi bien avec les formulaires de donnes que les liens HTML (les donnes HTTP POST et GET).

Fonctions
LAPI nonce comprend cinq fonctions. Vous retrouvez deux fonctions gnriques wp_create_nonce() et wp_verify_nonce(), deux fonctions ddies la gnration du nonce, wp_nonce_field() et wp_nonce_url(), scurisant respectivement les donnes POST et GET, et enfin une dernire fonction check_ admin_referer() grant le contrle de validit du nonce.

wp_create_nonce($action = -1) Cette fonction permet de gnrer la valeur unique du nonce. Elle prend comme seul paramtre le nom de laction du nonce, ce qui donne un contexte la cl gnre.
Par exemple, pour leffacement dun article, le nom du nonce pourrait tre delete_post. Cette fonction ne fait que retourner la valeur du nonce.

wp_verify_nonce($nonce, $action = -1) Cette fonction permet de vrifier la validit dun nonce. Elle prend deux paramtres : le premier est la valeur du nonce, le second est le nom du nonce que lon souhaite vrifier (ou son contexte).

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

318

WordPress ct dveloppeur: concevoir une extension


Si nous voulons valider le nonce lors de leffacement dun article, nous passerons comme second paramtre delete_post, soit la mme action que la cration. La valeur du nonce est rcupre manuellement via une variable $_GET ou $_POST.

wp_nonce_field( $action = -1, $name = "_wpnonce", $referer = true, $echo = true ) Contrairement aux deux premires fonctions, wp_nonce_field() est ddie un usage spcifique: gnrer un nonce dans un formulaire de donnes POST. La fonction va automatiser la cration dun champ input de type hidden, il suffit juste de prciser le nom de laction.
Cette fonction possde cependant quatre paramtres: Le nom de laction scuriser. Le nom utilis par le champ HTML input. Lajout ou non dun champ input de type hidden contenant le rfrent de la page. Lcriture ou non du code HTML. On a le choix dafficher le code HTML avec la fonction PHP echo() ou bien de retourner la valeur. Gnralement, les paramtres par dfaut suffisent, et on ne complte que le premier paramtre.

wp_nonce_url( $actionurl, $action = -1 ) Cette fonction permet de scuriser les donnes envoyes avec une requte HTTP GET. A utrement dit, cela permet de scuriser les liens dans WordPress.
Elle ne prend que deux paramtres: le premier est ladresse HTTP scuriser, le second paramtre est le nom de laction quon va attribuer au nonce. Cette fonction retourne toujours comme valeur ladresse scurise.

check_admin_referer($action = -1, $query_arg = '_wpnonce') Pour vrifier la validit dun nonce, nous avons vu quil existe la fonction wp_verify_ nonce(). La fonction check_admin_referer() est l pour simplifier les contrles et normaliser les messages derreur.
Elle prend comme paramtres le nom de laction et optionnellement le nom de la valeur rcuprer dans les donnes POST ou GET. Ce second paramtre nest modifi que dans de trs rares cas. Cette fonction se place gnralement avant laffichage de WordPress, souvent lors de laction init ou admin_init. Elle contrle la prsence et la validit du nonce; le cas chant, elle coupe le script PHP avec la fonction wp_die() et affiche un message derreur.

Exemples
Ajout du nonce dans un formulaire HTML:
<form method="POST" action="">

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Les API de WordPress

319

... <p class="submit"> <?php wp_nonce_field('options_monplugin'); ?> <input type="submit" name="update_options_monplugin" value="Enregistrer les modifications" /> </p> </form>

Ajout du nonce dans une adresse Internet:


<?php $lien = 'adresse-du-plugin.php'; $lien = wp_nonce_url($lien, 'lienaction_monplugin'); ?> <a href="<?php echo $lien; ?>">Lien scuris</a>

Contrle du nonce avec check_admin_url(), qui correspond au premier exemple avec le formulaire POST:
// On contrle les donnes avant l'affichage de WordPress add_action('admin_init', 'check_data_plugin'); function check_data_plugin() { // On vrifie que les donnes du formulaire ont t envoyes if ( isset($_POST['update_options_monplugin']) ) { // Si oui // Contrle de scurit check_admin_referer('options_monplugin'); // Suite de l'extension ... } }

Bonnes pratiques
Pour ajouter la compatibilit avec les versions antrieures WordPress2.0.3, il faut utiliser la fonction PHP function_exists(). Lutilisation des nonces dans les extensions est indispensable de nos jours, dautant plus dans un contexte de dveloppement pour professionnels. La scurit est lune des principales problmatiques de notre temps

L'API des widgets


Concept
Les widgets ont fait leur apparition dans WordPress 2.2. Avant cette version, ils existaient sous la forme dune extension. Lorsque lon travaille avec les widgets de WordPress, le terme sidebar revient de faon rcurrente. Par exemple, la colonne latrale place droite du thme par dfaut est une sidebar.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

320

WordPress ct dveloppeur: concevoir une extension


Dans la logique des widgets, une sidebar nest pas forcment une colonne latrale, cest plus gnralement un lieu spcifique dans le thme o lon pourra ajouter et supprimer la vole des blocs de contenus depuis linterface dadministration (voir Figure10.08). Ainsi, on peut retrouver les widgets galement dans les colonnes en pied de page, ou dans le menu den-tte.

Figure10.08
Les widgets vus depuis l'interface d'administration de WordPress.

Un widget dans WordPress comprend deux parties: un composant utilisateur et un composant administration. Le premier gre laffichage de la fonctionnalit sur le thme, et le second permet de grer un contrle dans ladministration des widgets avec la configuration ventuelle doptions.

Fonctions
LAPI de widgets propose de nombreuses fonctions, parmi lesquelles cinq sont indispensables pour la cration des widgets.

register_sidebar( [ mixed args ] ) Cette premire fonction permet denregistrer une sidebar dans le thme de WordPress. Elle prend comme seul paramtre un tableau PHP contenant diffrentes informations telles que:
name, le nom de la sidebar dans linterface dadministration; id, le nom de lID HTML de la sidebar; description, un descriptif de la sidebar ; before_widget, le code HTML qui prcde chaque widget; after_widget, le code HTML qui suit chaque widget; before_title, le code HTML qui prcde chaque titre de widget; after_title, le code HTML qui suit chaque titre de widget.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Les API de WordPress


Dun point de vue PHP, lordre dutilisation des valeurs est le suivant:

321

echo $before_widget; // Dbut du widget echo $before_title . 'Titre du widget' . $after_title; // Le titre entour des variables before et after // Contenu du widget echo $after_widget; // Fin du widget

Notez que les informations name et id peuvent contenir un marqueur %d; ce dernier sera remplac par le numro de la sidebar. Ce numro est automatiquement incrment de 1 pour chaque nouvelle sidebar. Cette fonction est utiliser dans le fichier functions.php du thme.

register_sidebars($number = 1, $args = array()) Cette deuxime fonction permet denregistrer plusieurs sidebars en une fois. Le premier paramtre est le nombre de sidebars, et le second paramtre correspond au tableau de donnes pass la fonction register_sidebar().
Il est important pour cette fonction de ne pas oublier lutilisation des marqueurs %d dans le nom de la sidebar et lID, pour diffrencier correctement les sidebars. Par exemple:
register_sidebars(2, array('name'=>'Zone %d'));

... permet de crer deux sidebars, nommes Zone 1 et Zone 2. De fait, cette fonction est viter dans le cas o vous voulez donner un nom unique chaque sidebar, auquel cas plusieurs appels register_sidebar() sont prfrables. Cette fonction est utiliser dans le fichier functions.php du thme.

dynamic_sidebar($index = 1) Cette fonction permet dimprimer le contenu dune sidebar. Elle est place directement dans le thme, lendroit o on dsire insrer les widgets.
Par exemple, dans le thme par dfaut de WordPress, vous retrouvez cette fonction dans le fichier sidebar.php. Elle prend comme seul paramtre le numro ou le nom de la sidebar. Cette fonction est gnralement utilise sous forme de condition. Si la fonction existe et si la sidebar contient des widgets, alors on laffiche. Sinon on affiche un code HTML contenu dans le thme. Cela donne le code suivant:
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?> ... Si la fonction n'existe pas ou qu'il n'y a pas de widget dans la sidebar, on affiche un code HTML ... <?php endif; ?>

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

322

WordPress ct dveloppeur: concevoir une extension


wp_register_sidebar_widget($id, $name, $output_callback, $options = array()) Cette fonction permet denregistrer un widget dans WordPress. Elle est spcifique la partie utilisateur du widget, et elle permet de spcifier la fonction excuter lors de laffichage de la sidebar.
Elle prend quatre paramtres: Un ID unique pour chaque widget. Cest indispensable pour permettre les effets JavaScript de linterface dadministration. Si lID existe dj, seul le dernier enregistrement de widget sera conserv. Le nom du widget. La fonction utilise par le widget pour laffichage ct utilisateur. Un tableau PHP pour spcifier des options dont: le classname permettant de changer le nom de la classe HTML lors de laffichage du widget; la description affiche dans linterface dadministration de WordPress proximit du nom du widget.

wp_register_widget_control($id, $name, $control_callback, $options = array()) Cette dernire fonction va de pair avec wp_register_sidebar_widget() ; elle permet denregistrer dans WordPress le contrle du widget dans linterface dadministration.
Elle prend comme paramtres le mme ID et le mme nom utiliss dans la fonction prcdente. Le troisime paramtre est le nom de la fonction excuter dans le contrle du widget. Enfin elle peut prendre un tableau doptions permettant la spcification de la largeur du contrle dans linterface dadministration. Le quatrime paramtre est trs peu utilis.

La classe WP_Widget
LAPI de widgets a fortement volu lors de la version 2.8, en cherchant simplifier le dveloppement de widgets par lutilisation de la classe PHP WP_Widget. Dsormais, pour crer un widget, il suffit dtendre cette classe et ses fonctions.
class MonWidget extends WP_Widget { function MonWidget() { // les fonctionnalits spcifiques de votre widget } function form($instance) { // le code qui affichera le formulaire d'administration. } function update($new_instance, $old_instance) { // le code qui s'assure que les options sont enregistres

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Les API de WordPress


// lors d'une modification. } function widget($args, $instance) { // le code qui affichera la partie publique du widget } } register_widget('MonWidget');

323

Nous verrons un exemple pratique dans un prochain chapitre.

Bonnes pratiques
Les trois premires fonctions vues ci-dessus sont gnralement utilises dans les thmes, tandis que les deux dernires servent dans les extensions. Cependant, vous pouvez utiliser les fonctions dans les deux parties sans aucun problme, cest juste une question dlgance dans le code. La dclaration des widgets se positionne logiquement dans la partie extensions et interface dadministration de WordPress, tandis que le thme dclare les fonctions spcifiques aux besoins de sa structure HTML. Enfin, la mthode register_sidebars() est rarement utilise car avec cette fonction vous ne pouvez nommer explicitement chaque sidebar. Vous vous retrouvez obligatoirement avec des noms incrments comme colonne1, colonne2 Il est impossible alors de spcifier colonne de gauche, colonne de droite,etc. Cest pour cela quon utilise et dclare gnralement plusieurs fois la fonction register_sidebar().

Ressources
LAPI des widgets est documente dans le Codex anglais de WordPress: http://codex.wordpress.org/Widgets_API. Vous pouvez galement trouver un modle de widget accompagn dun tutoriel complet ladresse suivante: http://justintadlock.com/archives/2009/05/26/the-complete-guide-to-creating-widgetsin-wordpress-28.

Classe d'accs la base de donnes WPDB


Concept
WordPress est un logiciel open-source dvelopp en PHP et fonctionnant avec la base de donnes libre MySQL. Cette base de donnes est le lieu de stockage de toutes les donnes de

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

324

WordPress ct dveloppeur: concevoir une extension


votre site; cest pour cette raison qu chaque mise jour de WordPress, il est recommand de faire une sauvegarde de la base de donnes, afin de prserver le contenu de votre site. Mis part les mdias que vous publiez sur votre site (photos, sons, vidos), tout le reste est stock en un lieu central, la base de donnes MySQL. Pour travailler avec cette base de donnes, WordPress possde une classe de connexion MySQL, inspire des travaux de Justin Vincent sur ezSQL. Cette classe est instancie une seule fois dans WordPress. Il nest pas ncessaire dinstancier une connexion par requte SQL. De ce fait, pour effectuer une requte SQL, il faut travailler avec la variable globale $wpdb. Cette variable est une instanciation de la classe WPDB. Elle donne accs diffrentes mthodes pour rcuprer du contenu depuis la base SQL. Nous allons voir en dtail ces fonctions.

Fonctions
Dans un premier temps, nous allons voir les cinq mthodes prsentes historiquement dans WordPress. Puis nous verrons les nouvelles mthodes et ce quelles apportent. Rappel SQL. On peut comparer une table de base de donnes SQL un tableau (voir Figure 10.09) ; ce tableau contient des lignes, des colonnes et des cellules. Pour sen convaincre, le plus simple est dutiliser le logiciel phpMyAdmin et de naviguer dans le contenu des tables de la base.
Figure10.09
Aperu de donnes stockes dans MySQL avec l'outil phpMyAdmin.

get_var($query=null, $x = 0, $y = 0) Cette fonction permet de rcuprer une information prcise de la base de donnes, autrement dit la valeur dune cellule spcifique.
En gnral, cette mthode est utilise pour retourner une information spcifique; dailleurs le type de retour est une chane de caractres, par exemple la valeur dune option de WordPress. Le premier paramtre est la requte SQL effectuer. Si cette dernire retourne plus dune ligne ou plus dune colonne, il est possible de spcifier le numro de lignes et de colonnes respectivement avec les deuxime et troisime paramtres.

get_row($query = null, $output = OBJECT, $y = 0) Cette fonction permet de rcuprer une ligne prcise de la base de donnes, par exemple retrouver les donnes dun article spcifique.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Les API de WordPress

325

Cette mthode prend trois paramtres: le premier est la requte SQL effectuer. Le deuxime est le type de sortie quon souhaite obtenir. Nous dtaillons les diffrents types de retour dans la section suivante. Si le rsultat de la requte retourne plusieurs lignes, il est possible de choisir la ligne quon souhaite utiliser avec le troisime paramtre.

get_col($query = null, $x = 0) Cette fonction permet de rcuprer les donnes dune colonne. Par exemple, lorsque nous souhaitons obtenir la liste complte des ID darticles uniquement de notre base de donnes.
La mthode prend deux paramtres: le premier est la requte SQL effectuer, le second est le numro de la colonne utiliser dans le cas o la requte SQL retourne plusieurs colonnes.

get_results($query = null, $output = OBJECT) Cette fonction permet de rcuprer un ensemble de rsultats, autrement dit plusieurs lignes et plusieurs colonnes de donnes.
Par exemple, lorsquon souhaite rcuprer les donnes des cinq derniers articles, on rcupre les cinq dernires lignes qui correspondent aux cinq articles et toutes les colonnes qui correspondent toutes les informations des articles. Le premier paramtre est la requte SQL effectuer, le second paramtre est le type de retour que lon souhaite obtenir.

query($query) Contrairement aux fonctions prcdentes, la mthode query() ne permet pas de rcuprer de rsultats.
Elle est utilise uniquement pour effectuer des modifications sur la base de donnes SQL, autrement dit un ordre SQL diffrent de SELECT. Ainsi, on retrouve des requtes SQL du type UPDATE, INSERT, DELETE, ALTER,etc.

escape($string|$array) Cette mthode permet de scuriser une chane de caractres ou un tableau PHP avant son insertion en base de donnes. En ralit, la mthode escape ne fait quutiliser la fonction PHP addslashes().
Les dveloppeurs voudraient remplacer cette fonction gnrique par une fonction spcifique la scurit contre les injections SQL, mais la fonction mysql_real_escape_string() de PHP pose de srieux problmes de compatibilit chez les hbergeurs. Cette mthode dispose par ailleurs dun alias depuis WordPress 2.8: esc_sql().

prepare($query=null [, $args, $args, ...]) Cette mthode permet dautomatiser la scurisation des donnes avant la requte SQL. Cette fonction utilise la mthode escape() pour la scurisation.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

326

WordPress ct dveloppeur: concevoir une extension


Pour comprendre lintrt de cette mthode, rien ne vaut un exemple. Avant prepare(), pour scuriser une fonction, on faisait:
function jajoute( $valeur1, global $wpdb; $valeur2 ){

// On scurise $valeur1 = $wpdb->escape($valeur1); $valeur2 = $wpdb->escape($valeur2); // On excute la requte $wpdb->query("INSERT INTO ma_table ( 'champ1', 'champ2' ) VALUES ( '$valeur1', '$valeur2' )"); }

Avec la mthode prepare(), cela donne:


function jajoute( $valeur1, global $wpdb; $valeur2 ){

// On scurise et on excute la requte $wpdb->query( $wpdb->prepare("INSERT INTO ma_table ( 'champ1', 'champ2' ) VALUES ( %s, %s )", $valeur1, $valeur2 ) ); }

Les deux fonctions font la mme chose, mais on voit tout de suite que la mthode prepare() permet un gain de temps lors du dveloppement et amliore la lisibilit du code de votre extension.

insert($table, $data, $format = null) Cette fonction automatise encore un peu plus linsertion de donnes dans la base SQL.
Plutt que dcrire et scuriser la requte SQL dinsertion, il est possible dutiliser la fonction insert() qui se charge de toute cette partie. Cette fonction prend deux paramtres: le premier est le nom de la table dans laquelle on souhaite ajouter les donnes, le second paramtre doit tre le tableau associatif contenant les valeurs ajouter. Par exemple, nous disposons dune table appele wp_monplugin. Elle possde trois informations: id, name et active (ID, le nom et son tat). Vous utiliserez insert() de la faon suivante:
insert( 'wp_monplugin', array('id' => 123, 'name' => 'Le nom', 'active' => true) )

Ainsi, vous tes capable dinsrer une ligne de contenu sans crire un mot de SQL. Le dernier argument prcise le format des donnes, choisir entre '%d' (un nombre dcimal) et '%s' (une chane). Par dfaut, les donnes sont traites comme des chanes.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Les API de WordPress

327

update($table, $data, $where, $format = null, $where_format = null) La fonction update() est trs semblable la fonction insert(), la diffrence prs quelle ralise un ordre SQL UPDATE et non INSERT. Cela sous-entend un paramtre en plus. En effet, contrairement un ordre INSERT, un ordre UPDATE peut tre filtr via la condition WHERE.
Vous retrouvez donc une fonction avec trois arguments: le nom de la table, les donnes mettre jour, et enfin les conditions dans le WHERE. Petit exemple, nous souhaitons mettre jour les donnes de la ligne ayant lID3 de la table
wp_monplugin:
update( 'wp_monplugin', array('name' => 'Nom modifi', 'active' => false), array('id' => 3) )

L encore, vous tes capable deffectuer un ordre UPDATE sans crire la moindre ligne de SQL. Largument optionnel $format fonctionne de la mme manire que pour la mthode insert. De son ct, $where_format est un quivalent de $format, mais cette fois pour les valeurs de $where plutt que de $data.

replace($table, $data, $format = null) Nouveaut de WordPress 3.0, la mthode replace ne surprendra pas les habitus de MySQL: elle insre une ligne dans la table vise (comme insert) mais, si une ligne existante de la table a la mme valeur de cl primaire ou dindex, la ligne existante est efface avant linsertion de la nouvelle ligne.
replace( 'wp_monplugin', array( 'column' => 'lapin', 'field' => 'malin' ) )

tables($scope = all, $prefix = false, $blog_id = 0) Autre nouveaut de la version 3.0, cette mthode permet de rcuprer le contenu des tables de WordPress (ou dune partie de celles-ci) dans un tableau PHP, afin de les traiter votre manire. Par dfaut, la mthode sans argument renvoie un tableau avec lintgralit des tables de WordPress.
Largument $scope permet de cibler plus prcisment des tables: 'blog' renvoie les tables lies au site courant (en cas dutilisation multisite). 'global' renvoie les tables de tous les sites du rseau (en cas dutilisation multisite). 'old' renvoie les tables obsoltes. 'all' renvoie lensemble des tables actuelles: site courant, reste du rseau (par dfaut).
$prefix prcise si lon souhaite rcuprer le prfixe du site.

Enfin, $blog_id prcise lID du site prfixer. Par dfaut, il sagit du site principal.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

328

WordPress ct dveloppeur: concevoir une extension

Les diffrents types de retour


La classe WPDB possde trois constantes prdfinies pour choisir le type de retour des rsultats SQL.

OBJECT (par dfaut) Les rsultats se prsenteront sous la forme dun tableau dobjets.
Exemple:
$result->name

ARRAY_A Les rsultats se prsenteront sous la forme dun tableau associatif.


Exemple:
$result['name']

ARRAY_N Les rsultats safficheront sous la forme dun tableau numrot classique.
$result[2]

2 tant la position du champ name dans le tableau. Gnralement, le type object convient tous les usages. Cependant, dans des cas particuliers, il peut tre pratique dobtenir les rsultats dans un tableau associatif (pour fusionner des tableaux, les ordonner,etc.). Enfin, la troisime constante ARRAY_N est trs peu employe ; il ny a dailleurs aucune fonction dans WordPress qui lutilise.

Crer une table dans WordPress


Avec des extensions assez complexes, il peut arriver de devoir crer une table dans la base de donnes pour stocker des informations spcifiques lextension. Larrive des taxinomies personnalises et des types de contenu personnalis dans la version3.0 limite dsormais le besoin de recourir de nouvelles tables chaque besoin spcifique, mais la possibilit reste non ngligeable. La cration de table dans WordPress a gnralement lieu lors de lactivation de lextension. La mthodologie classique consiste tester lexistence de la table, et si elle nexiste pas, la requte de cration est effectue. Il existe une autre faon de procder, cette fois-ci avec les options. Lextension stocke en base de donnes le numro de version de la base de donnes. chaque modification de la base de donnes, lors des volutions de lextension, le dveloppeur incrmente le numro de version. Lextension se charge ensuite de comparer chaque fois les deux numros de version et ventuellement de lancer la fonction de cration.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Les API de WordPress

329

Pour y parvenir, nous allons utiliser la fonction dbDelta(). Cette dernire permet de scuriser et de vrifier la conformit de la requte de cration de table. Exemple:
// Fonction lancer lors de l'activation de l'extension function create_table_wp () { global $wpdb; // On construit le nom de la table avec le prfixe de WordPress $table_name = $wpdb->prefix . "monplugin"; // On teste la prsence de la table if($wpdb->get_var("show tables like '$table_name'") != $table_name) { // On construit la requte SQL avec le nom de la table $sql = " CREATE TABLE " . $table_name . " ( id INT(9) NOT NULL AUTO_INCREMENT, name VARCHAR(255) NOT NULL, active INT(1) NOT NULL, UNIQUE KEY id (id) ); "; // On inclut une librairie de WordPress contenant la fonction dbDelta. La librairie n'est pas lance depuis la partie client, raison pour laquelle on prend cette prcaution. require_once(ABSPATH . 'wp-admin/includes/upgrade.php'); // On excute la requte SQL. dbDelta($sql); } }

Faites attention de ne pas entourer le nom de la table de simple quote (apostrophe), cela fausserait la requte SQL.
moins que vous ne connaissiez bien le langage SQL, crire le code SQL de cration de table est un exercice assez difficile. rserver donc aux initis... et vitez de recopier du code sans savoir exactement ce qu'il fait.

Pour vous aider, nous vous suggrons de crer votre table depuis loutil phpMyAdmin (voir Figure 10.10). Vous pourrez ainsi facilement construire votre table en choisissant visuellement les types, noms, valeurs par dfaut, cls primaires, index et autres options dincrmentation.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

330
Figure10.10

WordPress ct dveloppeur: concevoir une extension

Cration d'une table MySQL depuis l'outil phpMyAdmin.

Une fois que votre table est prte, il suffit dexporter sa structure, toujours depuis phpMy Admin, pour obtenir le code SQL.

Bonnes pratiques
Nous avons vu quil existe diffrentes mthodes pour accder aux donnes; lobjectif de cette diversit est de faciliter les appels SQL dans le code. Alors bien sr, il est possible dutiliser la mthode get_results() pour tous les types de SELECT, mais un bon dveloppeur cherchera toujours employer la bonne mthode selon le rsultat attendu de la requte SQL. Cela vitera lutilisation hasardeuse des paramtresX etY. Nous pouvons galement nous interroger sur lutilit des mthodes prepare() et escape(), tant donn que les fonctions insert() et update() sont plus simples dutilisation En ralit, ces mthodes sont utiles dans de nombreux cas. Une requte SQL nest pas toujours contenue dans une chane de caractres, parfois elle peut tre construite la vole via diffrentes conditions. Cest par exemple le cas de la requte de la classe WP_Query de WordPress. tant donn que la requte SQL des articles diffre selon la page o lon se trouve, il est ncessaire de scuriser les donnes diffremment, avec la mthode escape() par exemple!

Le cache de WordPress
Concept
WordPress possde une classe de cache. Cette dernire ne propose pas un cache comme on lentend le plus souvent. Il ne sagit pas de crer une copie HTML dune page de WordPress et de lafficher aux visiteurs ceci tant le mode de fonctionnement dextensions comme WP-Cache et WP Super Cache (http://wordpress.org/extend/plugins/wp-super-cache/). Le cache de WordPress est un cache objet. Au lieu de mettre en cache le rsultat final du traitement PHP en stockant une page HTML, le cache objet de WordPress va stocker les rsultats provenant de la base de donnes. En effet, les problmatiques de monte en charge ont toujours comme cause une utilisation excessive des requtes SQL. Il nest pas rare de trouver des sites gnrant plus de 100requtes pour afficher une simple page PHP.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Les API de WordPress

331

Ces requtes proviennent gnralement dune extension ou dun thme mal dvelopps. Il se peut aussi quavec un nombre raisonnable de requtes (20 30) un site avec une trs forte frquentation ait du mal tenir la charge. Pour amliorer les performances, les dveloppeurs souhaitent donc limiter les accs en base de donnes via un cache. Lavantage de ce type de cache, contrairement un cache complet HTML, cest quon conserve les fonctionnalits avances de type notation, compteur de vues, sondage, gestion de membres Les dveloppeurs auraient pu imposer un mcanisme de stockage du cache, dans des fichiers par exemple, mais il nen est rien. La classe de cache peut tre trs facilement remplace par une solution alternative. Cela permet de choisir le type de cache voulu. Il existe ainsi des classes de cache pour travailler avec: lextension PHP APC; lextension PHP XCache; lextension PHP eAccelerator; lextension PHP MemCache avec le logiciel MemCached. Cette liste nest pas exhaustive, il vous est possible de stocker les donnes o bon vous semble. Rien nempche de crer une classe de cache pour stocker le cache dans des fichiers situs sur un serveur optimis pour ce type daccs. Par dfaut, WordPress stocke les donnes directement dans la mmoire de PHP, cela vite de faire plusieurs fois la mme requte SQL dans le traitement dune page PHP. Cest trs pratique pour les performances des options. Ces dernires sont en effet utilises un peu nimporte comment par un grand nombre dextensions et de thmes. Cependant, cette implmentation se veut minimaliste, car les donnes stockes dans la mmoire de PHP ne sont conserves que durant lexcution de la page. Autrement dit, par dfaut, le cache de WordPress ne sert pas grand-chose car il nest pas commun tous les utilisateurs. Do lutilit de le remplacer par une des solutions alternatives prsentes ci-dessus.

Activation du cache
Depuis les dernires versions de WordPress, le cache est activ automatiquement. Sur les anciennes versions, pour activer le cache, il fallait diter le fichier de configuration de WordPress, wp-config.php, et y ajouter la ligne:
define('ENABLE_CACHE', true);

Attention, la constante WP_CACHE, rajoute par les extensions WP-Cache, WP Super Cache, ne doit pas tre dfinie.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

332

WordPress ct dveloppeur: concevoir une extension

Remplacer l'implmentation du cache de WordPress par une alternative


Comme nous lavons expliqu ci-dessus, limplmentation initiale du cache de WordPress est peu intressante. Pour remplacer la classe de cache de WordPress par la vtre, il suffit de placer le fichier PHP de votre classe de cache dans le dossier wp-content et de le nommer object-cache.php.

Fonctions
La plupart des fonctions de la classe de cache prennent les arguments suivants: $key ou $id: la cl unique dune valeur dans le cache. $data: la valeur des donnes stocker. $flag: ce paramtre est optionnel, il permet de dfinir un groupe pour les donnes que vous stockez. Cela permet de structurer le cache. Par exemple, si vous enregistrez des donnes relatives aux articles, vous utiliserez le groupe posts. $expire: la dure de vie en secondes du cache (par dfaut 900). Ci-aprs, vous trouverez les fonctions disponibles via lAPI de cache de WordPress.

wp_cache_add($key, $data, $flag = '', $expire = 0) Cette premire fonction permet dajouter des donnes dans le cache. Elle teste cependant la prsence de la cl dans le cache. Si la cl nexiste pas, alors la valeur est enregistre dans le cache, sinon la fonction ne fait rien et retourne la valeur false. Il est possible de spcifier le groupe et la dure avec expiration. wp_cache_delete($id, $flag = '') Cette fonction permet deffacer une entre du cache. Elle prend en paramtres lidentifiant effacer et son groupe. wp_cache_get($id, $flag = '') Cette fonction retourne la valeur de lentre du cache. Elle prend comme paramtres lidentifiant et son groupe. Si lentre nexiste pas, ou si elle a expir, la fonction renvoie false. wp_cache_replace($key, $data, $flag = '', $expire = 0) Cette fonction permet de remplacer la valeur dune entre existante du cache par une nouvelle valeur. Si la valeur nexiste pas, la fonction retourne false. wp_cache_set($key, $data, $flag = '', $expire = 0) Cette fonction permet de dfinir la valeur dune entre du cache. Si la valeur existe dj, elle est crase par la nouvelle, et si lentre nexiste pas, elle est cre.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Les API de WordPress

333

wp_cache_init() Cette fonction permet dinitialiser un nouvel objet pour la classe de cache. Elle est automatiquement appele par WordPress si le cache est activ dans le fichier de configuration. wp_cache_flush() Cette fonction permet deffacer le contenu du cache. wp_cache_close() Cette fonction ne ralise rien. Elle est prsente des fins de rtrocompatibilit avec les anciennes extensions.

Utiliser le cache dans son extension


Il est possible de mettre en cache le rsultat dune requte SQL, mais il est galement possible de mettre en cache une page HTML que lon a rcupre dun site distant. Par exemple, vous allez rcuprer le code HTML de la page http://www.herewithme.fr:
// On essaie de rcuprer la valeur du cache. $actus = wp_cache_get('actus', 'groupe-ext'); // Si la valeur n'existe pas, on entre dans la condition if( $actus == false ) { // On rcupre la page HTML avec la classe Snoopy. // Prcision, l'objectif n'est pas de savoir ce que fait Snoopy $snoopy = new Snoopy; $snoopy->fetch('http://www.herewithme.fr/'); $actus = $snoopy->results; // Stocke le rsultat en cache wp_cache_set('actus', $actus, 'groupe-ext');

Le processus se droule en deux tapes: Vous essayez de rcuprer la valeur depuis le cache. Si elle nexiste pas, vous effectuez le traitement gourmand en performances et vous stockez le rsultat dans le cache.

Bonnes pratiques
Il ne faut pas utiliser le cache de WordPress toutes les sauces. Par exemple, cela ne sert rien de mettre en cache le rsultat de fonctions propres WordPress. Ces dernires sont gnralement dj dveloppes de faon utiliser correctement le cache de WordPress. Le cache doit principalement tre employ dans deux cas: le stockage des rsultats SQL dune requte crite dans une extension; le stockage de donnes provenant dun site tiers.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

334

WordPress ct dveloppeur: concevoir une extension

Ressources
Nous allons faire un petit tour des principales classes alternatives de cache, avec les points forts de chaque technologie. XCache http://dougal.gunters.org/blog/2008/08/29/xcache-object-cache-plugin-for-wordpress-25 XCache est une extension pour PHP. Cest un cache OPcode optimisant les traitements PHP. Il fait lobjet dun dveloppement soutenu; cest lun des projets les plus rcents dans ce domaine. Memcached http://wordpress.org/extend/plugins/memcached/ MemCache est une extension PHP. Elle permet de travailler avec le logiciel MemCached. Cest un logiciel permettant de grer un cache, mais de faon beaucoup plus gnrique quune extension PHP. MemCache noptimise pas par exemple le code PHP. Lintrt de MemCache, compar au cache OPcode, cest quil peut tre rparti sur diffrents serveurs via du load balancing. Cela permet une meilleure rpartition de la charge. APC http://www.lazybrain.de/wordpress-apc-object-cache-modifiziert.html APC ressemble XCache. Cest une extension pour PHP qui joue le rle de cache et doptimisation OPcode. APC sera vraisemblablement intgr en natif dans la prochaine version de PHP. Il a lavantage de pouvoir filtrer les fichiers passant par loptimisation OPcode. Cela permet de filtrer le fichier kses.php de WordPress, ce dernier gnrant rgulirement des erreurs fatales aux processus PHP sur les sites haute frquentation.

La taxinomie dans WordPress


C'est quoi la taxinomie?
La taxinomie, taxonomy en anglais, dsigne une mthode de classification des informations dans une architecture structure de manire volutive. Le terme est couramment employ pour des systmes de gestion de contenu (CMS), dont WordPress fait partie. Source: Wikipedia.fr.
Il y a deux critures pour ce terme en franais: taxinomie et taxonomie. Nous utiliserons de prfrence le mot taxinomie dans ce livre, cependant rien ne vous empche d'employer l'autre criture. Pour plus d'informations, allez voir cette adresse: http://blogokat.canalblog.com/archives/2005/11/07/968967.html.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Les API de WordPress

335

Implmentation dans WordPress


Jusqu la version2.3, WordPress disposait dune vision limite de la taxinomie. Pour sen convaincre, il suffit de visionner la base de donnes de WordPress de lpoque. Cette dernire grait distinctement les catgories des articles de celles des liens, et les tags ntaient pas prsents par dfaut dans WordPress. Tout cela a bien chang Depuis WordPress 2.3, la base de donnes a volu vers un schma de taxinomie plus volu et surtout compltement gnrique. Les tables de catgories des articles, des liens et des liaisons, ont t supprimes au profit de trois tables compltement gnriques. Ces trois tables sont les suivantes: wp_terms; wp_term_relationships; wp_term_taxonomy. Elles seront dtailles dans la section suivante. Une dernire chose concernant la taxinomie dans WordPress: par dfaut il en existe trois; ce sont les catgories darticles, les catgories de liens et les tags darticles. WordPress met disposition une API pour tendre les taxinomies qui permet lajout, la modification, la suppression,etc. La table wp_terms Cette table contient la totalit des termes de WordPress. Lorsque vous ajoutez une catgorie dans WordPress, en ralit vous ajoutez un terme dans la base de donnes et vous prcisez le contexte. Par exemple, si vous ajoutez une catgorie WordPress et un tag WordPress, vous obtiendrez dans la base de donnes un seul terme WordPress, bien quil soit utilis dans deux contextes diffrents. Cette table contient comme informations: lID du terme; le nom du terme; le slug ou identifiant du terme, utilis lors de la construction des URL; le groupe du terme (optionnel). Cette table est en relation avec la table wp_term_taxonomy. La table wp_term_taxonomy Comme nous le prcisions ci-dessus, un terme nest ni une catgorie ni un tag. Un terme, cest gnrique. Cest la table wp_term_taxonomy qui va spcifier le contexte du terme. Le contexte, cest par exemple un tag, une catgorie darticles ou une catgorie de liens!

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

336

WordPress ct dveloppeur: concevoir une extension


Cette table contient diffrentes informations: LID du contexte entre le terme et la taxinomie. LID du terme que lon associe. Lidentifiant de la taxinomie. Une description. Utilise par exemple par les catgories dans WordPress. LID dun contexte parent. Utilis galement par les catgories, pour grer la hirarchie. Le compteur dutilisation. Employ par les tags et les catgories. Cest le nombre dobjets associs au contexte dutilisation du terme. En dautres termes, pour les catgories darticles de WordPress, il sagit du nombre darticles classs dans la catgorie. Cette table est en relation avec les tables wp_terms et wp_term_relationships. La table wp_term_relationships Cette dernire table permet de faire le lien entre les objets (lien, page, article) et le contexte dutilisation du terme. Elle comprend les informations suivantes: lID de lobjet; lID du contexte dutilisation. Cette table est en relation avec la table wp_term_taxonomy.

Exemple
Pour bien comprendre, un exemple est ncessaire Voil la situation. Nous allons attribuer larticle ayant lID9 dans la catgorie WordPress. Le terme WordPress est dj utilis dans la taxinomie tags de WordPress et possde lID86. Pour raliser cette mise en relation, deux insertions en base de donnes sont ncessaires. La premire tape va consister crer le contexte de taxinomie Catgorie pour le terme WordPress. Pour cela, il faut insrer une entre dans la table wp_term_taxonomy, prcisant la taxinomie category, vu quil sagit dune catgorie darticles, et indiquer lID du terme (86). Cette insertion dans la table de donnes va attribuer un ID unique ce contexte. Ici lID sera 12. La seconde insertion aura lieu dans la table de relation wp_term_relationships. Nous allons joindre le contexte dutilisation lobjet, dans ce cas larticle. Linsertion aura donc comme valeur9 pour lobjet et 12 pour le contexte. Et voil, la mise en relation est termine. Rassurez-vous Toutes ces tapes sont dj prprogrammes dans lAPI de taxinomie mise disposition dans WordPress!

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Les API de WordPress

337

Fonctions
Notez que le fichier wp-includes/taxonomy.php contenant lAPI de taxinomie de WordPress est compltement document dans le code. Nhsitez pas le consulter pour connatre lintgralit des options et fonctions disponibles.

get_taxonomies($args = array(), $output = 'names', $operator = 'and') Nouveaut de la version 3.0, cette fonction renvoie une liste des taxinomies enregistres, sous forme dun tableau PHP. Ce tableau peut contenir simplement les noms des taxinomies, mais, si le deuxime argument est autre chose que la chane 'names', le tableau contiendra des reprsentations de ces taxinomies sous forme dobjets PHP.
$taxonomies = get_taxonomies( '','names' ); foreach ( $taxonomies as $taxonomy ) { echo '<p>'. $taxonomy. '</p>'; }

get_object_taxonomies($object, $output = 'names') Cette fonction permet de rcuprer la liste des taxinomies utilises par un type dobjet (article, lien,etc.).
Par dfaut, dans WordPress, si vous passez post comme paramtre cette fonction, vous obtiendrez un tableau PHP contenant les taxinomies category et post_tag. Vous pouvez rcuprer la liste sous forme dobjets PHP plutt que de nom en prcisant 'objects' pour le second paramtre.taxonomy_exists( $taxonomy ) Cette fonction permet de tester lexistence dune taxinomie. Elle prend comme seul paramtre le nom de la taxinomie tester. Si la taxinomie existe, la fonction retourne true, sinon cest false. Depuis la version 3.0, cette fonction remplace is_taxonomy().

register_taxonomy( $taxonomy, $object_type, $args = array() ) Cette fonction permet dajouter une nouvelle taxinomie dans WordPress. Elle ne doit pas tre utilise avant lvnement init.
Elle prend trois paramtres: Le nom de la taxinomie. Le type dobjet que cible la taxinomie. Vous pouvez passer soit une chane de caractres, soit un tableau contenant plusieurs types dobjets. Un tableau doptions permettant de prciser diffrentes informations sur la taxinomie: la hirarchie ou non dans la taxinomie; la fonction de callback pour le compteur;

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

338

WordPress ct dveloppeur: concevoir une extension


la rcriture ou non des URL dans WordPress; lajout ou non du mot-clef dans la classe WP_Query de WordPress.

register_taxonomy_for_object_type( $tax, $object_type ) Cette fonction ajoute une taxinomie existante un type de contenu, classique ou person nalis. Ainsi, aprs avoir cr une taxinomie particulire pour les articles, on pourra lappliquer directement un autre type avec cette fonction. is_object_in_taxnonomy( $objet_type, $taxonomy ) Dtermine si un type de contenu est associ une taxinomie donne. get_taxonomy_labels( $taxonomy ) Cette fonction renvoie un objet PHP contenant tous les textes (ou labels) de la taxinomie nomme. Le tableau est associatif: il lie le nom dun label (name, singular_name, parent_item_colon, choose_from_most_used, etc.) avec la chane correspondante de cette taxinomie. get_objects_in_term( $term_ids, $taxonomies, $args = array() ) Cette fonction permet de rcuprer un tableau dobjets, uniquement les ID, depuis trois critres:
Un tableau PHP dID ou un ID de terme. Un tableau PHP de taxinomies ou une taxinomie. Un tableau PHP doptions. La seule prsente ici est lordre des rsultats: ascendant ou descendant.

get_term($term, $taxonomy, $output = OBJECT, $filter = 'raw') Cette fonction permet de rcuprer les donnes dun terme. Elle prend quatre paramtres:
LID du terme. La taxinomie. Le type de retour. Ce sont les mmes que pour la classe WPDB. Permet de dfinir les filtres activer selon lutilisation (db, raw, display).

get_term_by($field, $value, $taxonomy, $output = OBJECT, $filter = 'raw') Cette fonction permet de rcuprer les donnes dun terme, mais compare la fonction get_term(), il est possible de rcuprer un terme depuis son slug ou le champ souhait.
Ainsi, au lieu davoir un paramtre ID du terme, vous obtenez deux autres paramtres que sont: le champ utilis pour rcuprer le terme, le slug (identifiant) par exemple; la valeur du champ.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Les API de WordPress

339

get_terms($taxonomies, $args = '') Cette fonction permet de rcuprer un tableau de termes. Elle est principalement utilise pour gnrer les listes de catgories et les nuages de tags.
Il est possible de spcifier la ou les taxinomies dans lesquelles vous souhaitez rcuprer des termes. Vous pouvez galement passer un tableau PHP en deuxime paramtre pour spcifier un grand nombre doptions, par exemple lordre, le sens des rsultats. Vous pouvez exclure, inclure certains termes,etc. Consultez le code source de la fonction pour voir les possibilits des options. term_exists($term, $taxonomy = '', $parent = 0) Cette fonction permet de tester la prsence dun terme dans WordPress. Pour cela, il faut prciser le nom ou lID du terme, ainsi que la taxinomie dans laquelle vous voulez tester sa prsence. Vous pouvez galement prciser le nom ou lID du terme parent, afin de limiter la recherche. Si le terme existe, la fonction retourne son index de dfinition, sinon elle retourne la valeur 0 ou false. Remplace is_term() depuis WordPress3.0.

wp_delete_object_term_relationships( $object_id, $taxonomies ) Cette fonction permet deffacer les relations entre un objet et les contextes de taxinomie.
Elle prend deux paramtres: lID de lobjet et la taxinomie associe.

wp_delete_term( $term, $taxonomy, $args = array() ) Cette fonction permet deffacer un terme dans WordPress. Elle est intelligente car si le terme nest utilis que dans une seule taxinomie et quon le supprime, WordPress efface le contexte, les relations et le terme. Alors que si le terme est utilis dans une autre taxinomie, WordPress nefface que le contexte et les relations. Le terme est conserv pour lautre taxinomie. La fonction prend en arguments: LID du terme. La taxinomie. Un tableau PHP doptions. Aucune option nest disponible pour la version 2.7 de WordPress. wp_get_object_terms($object_ids, $taxonomies, $args = array()) Cette fonction permet de rcuprer un tableau PHP de termes depuis lID dun objet ou depuis un tableau dobjets. Elle peut prendre trois arguments: lID dun objet ou un tableau PHP;

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

340

WordPress ct dveloppeur: concevoir une extension


la taxinomie que lon cible; un tableau doptions permettant de modifier lordre et le sens des rsultats, ainsi que les champs quon souhaite rcuprer (les ID, les noms ou toutes les donnes).

wp_set_object_terms($object_id, $terms, $taxonomy, $append = false) Cette dernire fonction permet dattribuer des termes un objet dans une taxinomie dfinie, par exemple classer des catgories un article.
Elle prend quatre paramtres: LID de lobjet. Le tableau des ID des termes ajouter. La taxinomie sur laquelle on travaille. Ce dernier paramtre permet de dfinir si on ajoute les termes ceux qui existent, ou si on remplace les termes existants.

L'URL rewriting de WordPress WP_Rewrite


C'est quoi le rewriting?
LURL rewriting ou rcriture dadresse Internet est une technique utilise pour optimiser le rfrencement des sites dynamiques, autrement dit des gestionnaires de contenu (CMS) dont WordPress fait partie. Les CMS ont longtemps t caractriss par des URL complexes, comprenant en gnral un point dinterrogation, ventuellement le caractre &, ainsi que des noms de variables et des valeurs. Exemple: http://monsite.fr/article.php?id=12&category=5&tag=3. Le problme ici est que la plupart des moteurs de recherche nindexent pas ce type dadresse. Google, par exemple, nindexe en gnral que les pages ayant au maximum deux paramtres dans lURL: il nindexe donc pas une page comme celle de notre exemple. La technique dURL rewriting va consister rcrire ces adresses complexes en des adresses plus lisibles pour les humains et pleinement compatibles avec les moteurs de recherche. Le rsultat attendu sera de cet acabit: http://monsite.fr/article-sur-la-politique. Le processus de rcriture est gnralement effectu au niveau du serveur web via les fichiers .htaccess.

Implmentation dans WordPress


Ces fichiers .htaccess permettent de travailler sur les fonctionnalits du serveur web Apache2. Lune de ces fonctionnalits est la rcriture des URL. Pour cela Apache2 dispose dun module : mod_rewrite.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Les API de WordPress

341

Une petite recherche dans Google avec les termes mod_rewrite vous donnera toutes les ressources ncessaires ce sujet. Dans la plupart des CMS, la rcriture des URL se fait de faon compltement transparente dans le fichier .htaccess via des structures conditionnelles et un dcoupage des adresses. Cela donne ce genre de rsultat:
RewriteEngine on RewriteRule ^index.html$ index.php [L] RewriteRule ^forum-([0-9]+)-([0-9]+).html$ viewforum.php?id=$1&p=$2 [L] RewriteRule ^forum-([0-9]+)(.*)$ viewforum.php?id=$1 [L] RewriteRule ^sujet-([0-9]+)-([0-9]+).html$ viewtopic.php?id=$1&p=$2 [L] RewriteRule ^sujet-([0-9]+)(.*)$ viewtopic.php?id=$1 [L] RewriteRule ^message-([0-9]+)(.*)$ viewtopic.php?pid=$1 [L] RewriteRule ^profil-([0-9]+)(.*)$ profile.php?id=$1 [L]

Autrement dit, des rgles assez imbuvables, mais surtout un systme o il est impossible de rajouter des rgles sans diter ce fichier. Imaginez que toutes les extensions de WordPress qui ont des besoins spcifiques rajoutent leur propre rcriture. On ne sy retrouverait pas WordPress fonctionne diffremment. Au lieu de rcrire les adresses directement depuis les fichiers .htaccess, il redirige toutes les requtes sur le fichier index.php. Lanalyse des URL est donc faite directement depuis le code de WordPress. Cest un peu plus coteux en performances, mais cest beaucoup plus souple. De ce fait, il est trs facile de changer la forme des permaliens depuis linterface dadministration et il est facile dtendre la rcriture via les extensions.

Le fichier .htaccess de WordPress


Le fichier .htaccess par dfaut de WordPress ressemble ceci:
# BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php </IfModule> # END WordPress

Il peut tre un peu diffrent si WordPress est install dans un sous-rpertoire. Cela se passe de la faon suivante: On vrifie la prsence du module rewrite dApache2.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

342

WordPress ct dveloppeur: concevoir une extension


On active le moteur de rewriting. On dfinit la base du site: / pour un site WordPress install la racine du domaine. On vrifie que la requte HTTP ne porte pas sur un fichier qui existe rellement. Sil nexiste pas, aucune rgle nest applique, sinon on redirige sur le fichier index.php. Les fichiers .htaccess ne sont valables que pour les serveurs HTTP tels quApache version1 et 2 ou le serveur alternatif LiteSpeed. Si vous utilisez un serveur HTTP de nouvelle gnration comme Lighttpd ou Nginx, la logique de rcriture est la mme, la diffrence que les rgles sont ajouter directement dans le VHOST du fichier de configuration du serveur. Depuis la version 2.8 de WordPress, la rcriture dURL fonctionne galement sur le serveur IIS de Microsoft.

Fonctions
add_rewrite_rule($regex, $redirect, $after = 'bottom') Cette premire fonction permet dajouter une rcriture dURL dans WordPress. Pour bien comprendre le fonctionnement, nous allons prendre comme exemple une extension de calendrier.
Lobjectif est de rcrire des adresses de la forme: http://monsite.fr/moncalendrier/2008/06. Pour cela, la fonction add_rewrite_rule() prend trois paramtres: Lexpression rgulire qui va cibler les donnes rcuprer dans lURL. Ladresse sur laquelle nous allons rediriger les donnes, cette dernire tant utilise uniquement en interne dans WordPress. Le dernier paramtre permet de spcifier si la rgle est excute avant les rgles de Word Press ou aprs. Ce dernier paramtre nest utile que dans de trs rares cas. Ici nous allons utiliser la fonction avec les paramtres suivants:
add_rewrite_rule('(moncalendrier)/[/]?([0-9]*)[/]?([0-9]*)$', 'index.php?pagename=$matches[1]&var1=$matches[2]&var2=$matches[3]');

Le premier paramtre permet de cibler les deux parties de la date: 2008 et 06. Le deuxime paramtre construit ladresse relle, la variable $matches contient les donnes rcupres par lexpression rgulire. $matches[1] contient moncalendrier. $matches[2] contient 2008. $matches[3] contient 06. Petite prcision, il nest pas obligatoire de rediriger la requte sur une page en particulier. Vous pouvez trs bien garder la page index.php, passer uniquement les deux paramtres lis la date, tout en sachant que vous pourrez grer le fichier du thme afficher dans le code de lextension (tout cela est dcortiqu au Chapitre11).

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Les API de WordPress

343

add_rewrite_tag($tagname, $regex) Cette fonction permet de rajouter des marqueurs dans les permaliens tant au format personnalis de WordPress. Les marqueurs que vous pouvez ajouter sont semblables ceux que vous trouvez dans la page permaliens de linterface dadministration, comme %postname%, lidentifiant de larticle.
La liste complte des marqueurs prsents par dfaut est disponible ladresse suivante : http://codex.wordpress.org/Using_Permalinks#Structure_Tags. La fonction prend deux paramtres: le premier est le nom du tag entour du caractre %, et le second paramtre est une expression rgulire pour dfinir quels sont les caractres autoriss dans le tag. Par exemple, pour conserver les chiffres et les lettres, vous utiliserez le mta caractre (.+).
Cette fonction doit tre utilise avant ou durant l'action init pour tre prise en compte par WordPress.

add_feed($feedname, $function) Cette fonction permet dajouter un type de flux de donnes. Par dfaut, WordPress peut afficher des flux de donnes au format RSS1, RSS2 et Atom.
Rien ne vous empche de crer votre propre format pour vos besoins personnels. Voici les adresses des flux de donnes dun site WordPress: RSS2 (dfaut): http://monsite.fr/feed/ ou http://monsite.fr/feed/rss2/; RSS1: http://monsite.fr/feed/rss1/; Atom: http://monsite.fr/feed/atom/. Cette fonction prend comme premier paramtre le nom du flux de donnes (rss3 par exemple), tandis que le second paramtre peut recevoir le nom de la fonction excuter ou le chemin dun fichier PHP excuter.

add_rewrite_endpoint($name, $places) Cette fonction permet dajouter un mot-clef en fin dadresse. Par exemple, par dfaut dans WordPress, les articles possdent un endpoint pour lutilisation des trackbacks.
Cela permet de crer une adresse spcifique, par exemple: adresse de dpart: http://monsite.fr/monarticle/; adresse avec le endpoint: http://monsite.fr/monarticle/trackback/. Le premier paramtre est le nom du mot-clef de fin; le second argument est un tableau PHP contenant les constantes prdfinies de WordPress. Ces constantes reprsentent certains types de vues. Il faut passer en paramtre le type de vue o lon souhaite utiliser le mot-clef de fin.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

344

WordPress ct dveloppeur: concevoir une extension


Cette liste de constantes PHP est disponible dans le code source du fichier wp-includes/ rewrite.php.

url_to_postid($url) Cette fonction ne permet pas de modifier ou dtendre le rewriting de WordPress. Elle permet simplement de rcuprer lID dun article depuis son URL.
Elle prend comme seul paramtre ladresse Internet et vous retourne lID de larticle sil existe ou le chiffre0 sil nexiste pas.

Gestion des JavaScripts WP_Scripts


Concept
WordPress est agrment de diffrentes bibliothques JavaScript. Ces dernires permettent les traitements Ajax de linterface dadministration ou encore lditeur visuel de WordPress. Pour grer les JavaScript, les dveloppeurs de WordPress ne placent pas manuellement les balises HTML des scripts sur chaque page selon les besoins. Ils ont mis en place un mcanisme de dpendance, denregistrement et de traduction des bibliothques JavaScript. Ce mcanisme fonctionne via la classe WP_Scripts. Par exemple, la page de rdaction de WordPress a besoin dune dizaine de fonctions et de quatre bibliothques JavaScript que sont Prototype, jQuery, Scriptaculous et TinyMCE. Lordre dcriture de ces scripts, vitant les conflits et autres problmes, est gr dynami quement par la classe WP_Scripts.

Fonctions
wp_print_scripts( $handles = false ) Cette fonction est automatiquement appele dans len-tte HTML de WordPress, que ce soit dans linterface dadministration ou dans le thme du site.
Elle se charge dcrire le code HTML des JavaScript chargs dans WordPress, de faon quil ny ait pas derreurs de dpendance. Depuis WordPress 2.8, cette fonction dispose des quivalents spcifiques suivants: print_head_scripts(): pour len-tte de ladministration; print_footer_scripts(): pour le pied de page de ladministration; wp_print_head_scripts(): pour len-tte du thme; wp_print_footer_scripts(): pour le pied de page du thme.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Les API de WordPress

345

wp_enqueue_script( $handle, $src = false, $deps = array(), $ver = false, $in_ footer = false ) Cette fonction permet de charger un script dans WordPress. Elle est utilise gnralement pour inclure un script dj prsent de WordPress.
Par exemple, WordPress contient la librairie jQuery. Pour appeler jQuery uniquement sur la vue dtaille dun article, nous placerons le code suivant:
if ( is_single() ) { wp_enqueue_script('jquery'); }

Il est possible de complter les autres paramtres de la fonction, mais la fonction wp_register_script() sert gnralement pour un usage plus pouss.

wp_register_script( $handle, $src, $deps = array(), $ver = false, $in_footer = false ) Tout comme wp_enqueue_script(), cette fonction permet de charger un script dans WordPress.
Cependant, cette fonction est toujours utilise pour charger un script tiers WordPress, car le paramtre $src est obligatoire. Par exemple, pour charger une extension jQuery permettant de remplacer les sons de votre contenu par un lecteur MP3, vous utiliserez le code suivant:
wp_register_script( 'jquery-sons', 'http://monsite.fr/wp-content/jqueryplugins/son.js', array('jquery'), '1.0' );

La fonction prend quatre paramtres: Lidentifiant du JavaScript. Il doit tre unique; sil existe dj, WordPress nenregistrera pas votre script. Ladresse du fichier JavaScript. Elle sera utilise par lattribut SRC dans le code HTML. Le tableau des dpendances. Par exemple, ici nous utilisons une extension jQuery; cela veut dire que jQuery est ncessaire au bon fonctionnement. Nous ajoutons donc lidentifiant jquery dans le tableau des dpendances. WordPress se chargera automatiquement de lancer jQuery si cela est ncessaire. Le numro de version. Utile pour mettre jour le JavaScript et viter par la mme occasion les problmes de cache. Il suffit de mettre le numro de version du script que vous utilisez et le tour est jou.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

346

WordPress ct dveloppeur: concevoir une extension


wp_deregister_script( $handle ) Cette dernire fonction permet de dcharger un JavaScript dans WordPress. Ce qui peut tre le cas si vous souhaitez lancer une version diffrente que les librairies incluses dans WordPress.
Elle prend comme seul paramtre lidentifiant du JavaScript dsactiver.

Bonnes pratiques
Pour connatre la liste des librairies incluses et leur identifiant, vous pouvez consulter la page du Codex de la fonction wp_enqueue_script() : http://codex.wordpress.org/ Function_Reference/wp_enqueue_script#Parameters. Les principales librairies sont: Prototype; Scriptaculous; jQuery et jQuery UI; SWFObject ; ThickBox ; TinyMCE. Notez que lobjectif des dveloppeurs de WordPress est de conserver terme uniquement le framework jQuery, pour des raisons videntes de performances et de cohrence dans le code. Pour insrer du JavaScript dans linterface dadministration sans passer par la classe WP_Scripts, il suffit dajouter une action sur lvnement admin_print_scripts. Enfin, les fonctions de WP_Scripts doivent tre utilises au plus tard lors de lvnement template_redirect, lidal tant init ou admin_init selon le cas.

La classe cron de WordPress WP_Cron


C'est quoi un cron?
Avant de parler du concept dans WordPress et des fonctions, voici un petit rappel de ce quest un cron. cron est le nom dun programme qui permet aux utilisateurs des systmes Unix, principalement Linux et MacOS X, dexcuter automatiquement une action spcifique une date et une heure prcises lavance, ou selon un cycle dfini lavance. Il sagit dune fonctionnalit trs utile pour des tches routinires dadministration systme, mais elle peut trs bien tre exploite pour tout autre chose. Par exemple, vous pouvez demander cron de jouer tel fichier MP3 tous les jours 7 heures sauf le samedi et le dimanche, afin de vous rveiller en musique. Source: http://fr.wikipedia.org/wiki/Cron.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Les API de WordPress

347

Implmentation dans WordPress


Malheureusement, cron est un outil accessible uniquement via SSH. De ce fait, il nest pas accessible dans les hbergements mutualiss. Pour permettre dautomatiser des actions quel que soit le type dhbergement de WordPress, lquipe de dveloppeurs a intgr dans WordPress une classe PHP qui reproduit les fonctionnalits du logiciel cron, mais qui est compltement indpendante vis--vis du systme. Cette classe est dabord apparue sous la forme dune extension, avant dtre intgre dans le cur de WordPress 2.1. Un usage courant de WP_Cron est la sauvegarde automatique et lenvoi par e-mail de la base de donnes MySQL. Cette fonctionnalit est possible via diffrentes extensions.

Fonctions
wp_schedule_single_event( $timestamp, $hook, $args = array()) Cette fonction permet de programmer une action qui sexcutera une seule fois dans le temps.
Elle prend trois arguments: la date dexcution de laction (au format Timestamp Unix); la fonction PHP excuter lors de laction; un tableau PHP contenant les paramtres passs la fonction excute.

wp_schedule_event( $timestamp, $recurrence, $hook, $args = array()) Cette fonction permet de programmer une action qui se rptera indfiniment dans le temps.
Elle prend un paramtre en plus que la fonction wp_schedule_single_event() ; il est positionn en deuxime position et il permet de choisir le format de rcurrence. Par dfaut, ce paramtre accepte les rcurrences suivantes: hourly, soit toutes les heures; daily, soit tous les jours. Il est possible dajouter des rcurrences via des extensions WordPress. Le premier paramtre, $timestamp, permettra de prciser cette fois-ci la date de premire excution de lvnement.

wp_unschedule_event( $timestamp, $hook, $args = array() ) Cette fonction permet de supprimer la programmation dune action dans WordPress. Pour pouvoir lutiliser, il est ncessaire de connatre la date de prochaine excution de lvnement, la fonction appele et les arguments que prend la fonction.
Ces informations sont passer dans les trois paramtres que prend la fonction.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

348

WordPress ct dveloppeur: concevoir une extension


wp_clear_scheduled_hook( $hook, $args = array() ) Cette fonction permet de supprimer toutes les programmations depuis le hook pass en paramtre. Cela veut dire que si deux programmations excutent la mme fonction (hook) des intervalles diffrents, les deux seront supprimes. wp_next_scheduled( $hook, $args = array() ) Enfin, cette dernire mthode permet de retourner la date de prochaine excution dune action. Pour cela, il est ncessaire de passer deux paramtres:
la fonction utilise par laction (hook); les arguments que prend la fonction excute.

Bonnes pratiques
La classe WP_Cron peut tre trs utile pour des programmations basiques nayant pas besoin de prcision dans lheure dexcution. En effet, imaginez que vous programmiez une action tous les jours 17 heures. Si pendant une journe aucun visiteur ne consulte votre site, aucune excution PHP du logiciel WordPress na lieu. De ce fait, aucune excution ne sera faite 17heures. Autre diffrence notable avec une programmation cron classique, cest la faon dont est excut le PHP. Gnralement, lenvoi dune newsletter est automatis sur un serveur des heures matinales (4-5heures du matin). Cela veut dire que cron va excuter un processus CLI de PHP, sans passer par un serveur web. Sans entrer plus dans les dtails, disons que lutilisation dun processus CLI permet une excution directe de PHP, ce qui amliore les performances et rsout pas mal de problmatiques, surtout lors de traitements processeur massifs et intensifs, comme lenvoi multiple de-mails. Bref, il est important de faire attention lusage que vous faites de WP_Cron.

Fonctions de formatage
Concept
WordPress possde diffrentes fonctions de formatage. Elles permettent de formater, corriger, scuriser les chanes de caractres selon le contexte et le comportement attendu. Il existe une cinquantaine de fonctions propres au formatage des donnes dans WordPress; nous ne prsenterons que les plus utilises.

Les fonctions esc_*()


Dans la section de ce chapitre consacre aux fonctions dinternationalisation de WordPress, nous avons plusieurs fonctions de type esc_*(). Il en existe dautres, plus gnralistes.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Les API de WordPress

349

Leur principe reste le mme que celui de la fonction PHP specialchars() : convertir (ou chapper) les caractres spciaux dune chane pour les rendre valide dans le contexte donn. lorigine, les dveloppeurs de WordPress avaient conu wp_specialchars() pour cet usage, mais elle a t rendue obsolte depuis la version 2.8, et son fonctionnement a t prcis au sein des fonctions suivantes, avec des noms normaliss: esc_html($text): utilisation au sein dun bloc HTML. Remplace wp_specialchars(); esc_attr($text) :
attribute_escape();

utilisation

au

sein

dun

attribut

HTML.

Remplace

esc_js($text): utilisation au sein dun affichage JavaScript. Remplace js_escape(); esc_sql($sql) : une utilisation au sein dune requte SQL (quivalent de $wpdb->escape()); esc_url($url, $protocols = null): vrifie et nettoie une adresse web. Remplace clean_url(); esc_url_raw($url, $protocols = null): idem, mais destination de la base de donnes. Remplace sanitize_url().

wp_specialchars_decode( $string, $quote_style = ENT_NOQUOTES) Cette fonction fait linverse de esc_html() (et donc de lancienne fonction wp_specialchars()): elle transforme une entit HTML en son caractre spcial correspondant. Elle sert surtout pour les caractres &, <, >, " et . wptexturize($text) Cette fonction permet de convertir une liste de mots et de caractres en leur entit HTML. Ces modifications sont trs lgres et affectent peu de mots de la langue franaise.
Par exemple, deux tirets la suite seront remplacs par lentit HTML &#8212;. Le seul paramtre est la chane de caractres filtrer.

wpautop( $pee, $br = 1 ) Cette fonction permet de remplacer les doubles retours la ligne de la chane de caractres par des paragraphes HTML (<p></p>).
WordPress utilise cette fonction pour formater le contenu des articles ainsi que leur extrait. La fonction prend deux paramtres: le premier est la chane de caractres filtrer, le second prend un boolen, qui prserve ou non les retours la ligne <br /> dans le code HTML.

force_balance_tags( $text ) Cette fonction permet de contrler la conformit du code HTML. Pour cela, la fonction vrifie que chaque balise HTML est bien ouverte et bien ferme.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

350

WordPress ct dveloppeur: concevoir une extension


Cette fonction transformera le code HTML malform suivant:
<p><a href="">mon lien</p>

en un code valide:
<p><a href="#">mon lien</a></p>

is_email($user_email) Cette fonction permet de tester si la chane passe en paramtre correspond ou non une adresse e-mail.
Si cest une adresse e-mail valide, la valeur de retour sera true, sinon ce sera false.

sanitize_email($email) Cette fonction permet de nettoyer une adresse e-mail. Pour cela, elle se contente de supprimer tous les caractres non autoriss par le format des adresses e-mail. make_clickable($ret) Cette fonction permet de remplacer les adresses Internet dun texte par des liens. Par exemple, quand un utilisateur tape http://google.fr dans un commentaire, un lien vers Google sera automatiquement ajout sur ce texte! remove_accents($string) Cette fonction permet de supprimer les accents dune chane de caractres. Elle prend comme seul paramtre la chane de caractres filtrer. sanitize_title($title, $fallback_title = '') Cette fonction permet de nettoyer les chanes de caractres des caractres spciaux. Elle transforme toute la chane en minuscules et ne garde que les caractres de lalphabet et les chiffres, autrement dit les caractres compatibles dune adresse Internet. Enfin les espaces sont remplacs par des tirets.
Ce qui donne: Chane de dpart. Et voil un super titre pour cet dito! Nest-ce pas? Chane nettoye. et-voila-un-super-titre-pour-cet-edito-nest-ce-pas Cette fonction est utilise pour construire les slugs dans WordPress, ou identifiants de larticle en franais. Cette information est ncessaire la construction des adresses Internet des articles.

sanitize_user( $username, $strict = false ) Cette fonction permet de formater les identifiants des utilisateurs de WordPress lors de leur cration. Cela vite les caractres spciaux et autres entits HTML.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Les API de WordPress

351

Elle prend deux paramtres: le premier est la chane de caractres du nom dutilisateur, le second paramtre permet de filtrer un peu plus lidentifiant, en limitant les caractres autoriss aux caractres ASCII pour un maximum de compatibilit.

sanitize_file_name( $name ) Cette fonction fait la mme chose que la fonction sanitize_title() la diffrence quelle conserve les points dans la chane de caractres.
Elle est utilise pour formater les noms de fichiers lors de lenvoi dun mdia dans WordPress.

sanitize_html_class( $class, $fallback = '') Cette fonction permet de sassurer quun nom de classe HTML ne comprend que des caractres valides. Le second argument permet de prciser quelle chane renvoyer sil se trouve que la chane nettoye soit vide... sanitize_text_field( $string ) Cette fonction permet de nettoyer les chanes en provenance de lutilisateur ou de la base de donnes. Elle vrifie que les caractres sont tous en UTF-8, convertit les caractres spciaux en entits, enlve les balises HTML, les retours la ligne, les tabulations et les espace en trop, et enfin enlve les octets indsirables. wp_strip_all_tags( $string, $remove_breaks = false ) Cette fonction enlve toutes les balises HTML de la chane, notamment <script> et <style>. wp_check_invalid_utf8( $string, $strip = false) Cette fonction vrifie que tous les caractres dune chane sont bien encods en UTF-8. Le second argument prcise sil faut tenter de supprimer les caractres non valides ou non. translate_smiley( $smiley ) Cette fonction permet de transformer un smiley en limage quivalente, dans une balise <img>. shortcode_unautop( $content ) Cette fonction sassure que les shortcodes ne sont pas encadrs de balises <p>...</p>. capital_P_dangit( $text ) Cette fonction est plus un clin dil quautre chose : elle repre les chanes contenant " Wordpress" crit avec un P minuscule et passe celui-ci en majuscule afin quil soit crit correctement: "WordPress".

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

352

WordPress ct dveloppeur: concevoir une extension

KSES le filtre HTML de WordPress


Les critiques concernant le filtre HTML de WordPress sont nombreuses. En effet, il nest pas rare de voir une balise ou un attribut HTML effac automatiquement par WordPress. Le responsable, cest la bibliothque de filtre KSES. Cette bibliothque permet de dfinir les balises HTML ainsi que leurs attributs autoriss par WordPress. Vous pouvez visionner ce tableau dans le fichier wp-includes/kses.php de WordPress. Ce fichier contient deux tableaux de filtre: un premier assez complet destin aux articles de WordPress, et un second plus basique destin aux commentaires. Les tableaux se prsentent sous la forme suivante:
$allowedposttags = array( 'a' => array( 'class' => array (), 'href' => array (), 'id' => array (), 'title' => array (), 'rel' => array (), 'rev' => array (), 'name' => array (), 'target' => array()),

Nous pouvons conclure que ce tableau autorise la balise HTML a, permettant de crer des liens. WordPress autorise les attributs class, href, id, title, rel, rev, name et target. Si vous essayez un autre attribut, comme lang, il sera automatiquement supprim par WordPress. Enfin, il faut savoir que le contenu des articles de WordPress est filtr par Kses via un filtre appliqu sur the_content.

wp_kses($string, $allowed_html, $allowed_protocols) Cette fonction permet dexcuter le filtre Kses sur une chane de caractres. Elle prend trois paramtres: la chane de caractres filtrer, le tableau des lments HTML autoriss (comme nous lavons vu ci-dessus) et le tableau des protocoles autoriss.
Pour le deuxime paramtre, il est possible dutiliser le tableau par dfaut des articles de WordPress via la variable globale $allowedposttags. Le tableau par dfaut des protocoles autoriss est: HTTP, HTTPs, ftp, mailto, news, irc, gopher, nntp, feed et telnet.

Fonctions de date
Principe
Les dates sont toujours stockes de la mme faon dans WordPress. Lquipe des dveloppeurs a choisi dutiliser le format DATETIME de la base de donnes MySQL. Ce format se prsente sous la forme suivante:

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Les API de WordPress


YYYY-MM-DD HH:MM:SS

353

Par exemple, la date 22 juin 2008 16h42 et 13 secondes donnera 2008-06-22 16:42:13.

Fonctions
mysql2date( $dateformatstring, $mysqlstring, $translate = true ) Cette premire fonction permet de passer une date du format SQL DATETIME au format que vous souhaitez. Elle fonctionne de la mme faon que la fonction date() de PHP pour dfinir le format de la date. Nhsitez pas consulter la documentation de PHP, http://fr2.php. net/date, pour connatre les possibilits.
Elle prend trois paramtres: le format date dsir; la date convertir au format SQL; un boolen pour autoriser ou non la traduction de la date.

date_i18n( $dateformatstring, $unixtimestamp ) Cette fonction retourne une date traduite dans la langue du site WordPress. Le format de sortie est dfini par le premier paramtre. Celui-ci prend les mmes valeurs que la fonction date() de PHP.
Le second paramtre est le TIMESTAMP Unix de dpart que lon souhaite transformer.

current_time( $type, $gmt = 0 ) Cette dernire fonction permet de gnrer la date courante. Elle prend deux paramtres: le format de la date, et la prise en compte ou non du fuseau horaire lors de la gnration de la date.
Le premier paramtre accepte deux valeurs: mysql gnre une date au format DATETIME. timestamp gnre une date au format Unix TIMESTAMP.

wp_timezone_supported() Cette fonction renvoie les zones horaires reconnues par PHP.

Fonctions diverses
Les fonctions dcrites ci-aprs sont difficiles classer, car elles ne font pas partie dune API particulire. Cependant, tant donn quon les retrouve trs souvent dans le code de W ordPress, leur description se justifie pleinement ici.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

354

WordPress ct dveloppeur: concevoir une extension

wp_die( $message, $title = '' )


Cette fonction est un driv de la fonction die() de PHP. Son objectif est de couper un script PHP avec un message derreur plus esthtique que la fonction classique de PHP. Elle est gnralement utilise lorsquune condition de scurit nest pas remplie ou lors dune mauvaise action dans linterface dadministration de WordPress. La fonction prend deux paramtres: le premier est le message afficher dans le corps de la page et le second est le titre HTML de la page (la balise title de len-tte HTML).

wp_mail( $to, $subject, $message, $headers = '', $attachments = array() )


Cette fonction permet denvoyer un e-mail. WordPress propose sa propre fonction pour lenvoi, qui nutilise pas directement la fonction mail() de PHP, mais qui exploite la classe PHPMailer. Cette fonction est pluggable; cela veut dire quelle peut tre remplace par une fonction portant le mme nom dans une extension. Elle prend cinq paramtres: Ladresse e-mail du destinataire. Le sujet de le-mail. Le contenu de le-mail. Les deux derniers paramtres sont optionnels; on peut y modifier len-tte de le-mail, et prciser les fichiers joindre au message. Cette fonction contient de nombreux filtres pour modifier son comportement.

wp_redirect($location, $status = 302)


Cette fonction permet de grer correctement les redirections dans WordPress. Au lieu dutiliser la fonction header() de PHP plusieurs fois la suite, WordPress propose une fonction aboutie pour grer correctement les redirections quel que soit le type de serveur HTTP. Le serveur IIS de Microsoft ne gre pas les mmes redirections que les serveurs HTTP prsents sous Linux. La fonction prend deux paramtres: ladresse de destination et le code HTTP.

paginate_links( $args = '' )


Cette fonction permet de crer une pagination trs rapidement. Elle est utilise dans linterface dadministration pour grer la pagination du contenu. Elle prend comme seul paramtre un tableau de donnes qui contient les informations suivantes:

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Les API de WordPress


la base des URL construire; le format de la pagination qui correspond au mot-clef utilis dans ladresse; le nombre total de pages; la page courante,etc.

355

API Post Meta Les mtadonnes des articles


Concept
LAPI des Post Meta, ou mtadonnes des articles, met en place un systme de stockage compltement gnrique pour stocker des donnes lies aux articles, aux pages et aux attachements de WordPress (via le gestionnaire de mdias). Cette API est trs apprcie des dveloppeurs dextensions, car on peut y stocker tout type de contenu li aux articles comme un compteur de vue, la notation des articles, etc. et cela de faon trs simple, tout en profitant des fonctionnalits natives de cache de WordPress. Nanmoins, il faut faire attention lusage de cette API. Le fait que la structure de la table soit compltement gnrique peut poser des problmes de performance pour les extensions stockant un nombre important dinformations et ralisant beaucoup dappels. Dans de tels cas, la cration dune table spcifique lextension peut tre une excellente alternative, bien quelle demande un peu plus de dveloppement.

Fonctions
add_post_meta($post_id, $meta_key, $meta_value, $unique) Cette fonction permet dajouter une mtadonne un article. Elle prend quatre paramtres:
LID de larticle. Lidentifiant de la donne stocker. La valeur stocker. Un quatrime paramtre qui permet de prciser si la valeur stocker est unique, ou bien si elle est multiple; dans ce dernier cas, on enregistre un tableau srialis dans la base de donnes.

update_post_meta($post_id, $meta_key, $meta_value, $prev_value) Cette fonction permet de mettre jour une mtadonne. Pour cela, la fonction prend quatre paramtres:
LID de larticle. Lidentifiant de la valeur stocker. La nouvelle valeur.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

356

WordPress ct dveloppeur: concevoir une extension


Un dernier paramtre, optionnel, qui permet ventuellement de prciser lancienne valeur. Pour que la mtadonne soit mise jour, il faudra que lancienne valeur corresponde bien la base de donnes.

delete_post_meta($post_id, $key, $value) Cette fonction permet de supprimer une mtadonne de la base de donnes. La fonction prend trois paramtres:
LID de larticle. Lidentifiant de la mtadonne supprimer. ventuellement, la valeur actuelle de la mtadonne. Si le dernier paramtre est fourni, la valeur de la mtadonne sera galement vrifie avant de procder la suppression.

get_post_meta($post_id, $key, $single) Cette fonction permet de rcuprer la valeur dune mtadonne. Elle prend trois paramtres, dont les deux premiers sont obligatoires:
LID de larticle. Lidentifiant de la mtadonne. Un troisime paramtre qui permet de prciser par un boolen (true ou false) si la valeur est unique ou non. Si elle lest, la valeur sera retourne directement; sinon, la fonction retournera un tableau de valeurs.

get_post_custom($post_id) Cette fonction retourne un tableau associatif avec lensemble des identifiants et des valeurs des mtadonnes. Elle prend comme seul paramtre lID de larticle.
Si le paramtre nest pas spcifi et que lon se trouve dans la boucle de WordPress, la fonction tentera de rcuprer lID de larticle. Si aucun ID nest trouv, la fonction retournera un boolen false.

get_post_custom_keys($post_id) Cette fonction, tout comme get_post_custom(), prend comme seul paramtre lID de larticle. Ce dernier est optionnel et fonctionne de la mme faon que la fonction prcdemment note. Elle permet de retourner le tableau des identifiants de mtadonnes existants pour larticle. get_post_custom_values($key, $post_id) Cette dernire fonction permet de retourner le tableau des valeurs pour un identifiant de mtadonne donn. Elle retourne donc un tableau classique. Elle prend deux paramtres:
lidentifiant de la mtadonne; lID de larticle (optionnel). Si aucun identifiant darticle nest fourni, la fonction se comportera comme get_post_
custom() et elle essayera de rcuprer lID de larticle depuis la boucle.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Les API de WordPress

357

API WP_Query Requtage de la base de donnes WordPress


Concept
Pour rcuprer les articles et pages de la base de donnes, WordPress possde une API de requtage trs puissante. Cette API, nomme WP_Query, permet deffectuer des requtes sur la base de donnes de votre blog. Lorsque lon consulte une page de catgorie, la classe WP_Query va rcuprer deux informations: le prfixe category; le nom de la catgorie. Grce ces deux informations, la classe va connatre le contexte dans lequel on se situe et construire la requte SQL ncessaire la rcupration des articles. Ainsi, on obtient une classe compltement gnrique capable de rcuprer des articles dune catgorie, dun tag ou encore dune date. Cette classe apparat trs peu dans la partie thme de WordPress. On retrouve gnralement les fonctions query_posts() ou get_posts() pour crer des boucles de contenus personnaliss. Il faut savoir que ces deux fonctions utilisent la classe WP_Query. Historiquement, la fonction get_posts() utilisait sa propre logique et ses propres paramtres. Nanmoins, depuis la version2.6 de WordPress, la fonction get_posts() permet uniquement de faire un appel de classe WP_Query avec quelques petites diffrences tout de mme tandis que la fonction query_posts() nest quun alias permettant de simplifier lappel WP_Query en automatisant linstanciation de la classe PHP. Les informations concernant linstanciation WP_Query interne WordPress (celle qui gre le passage des URL une requte SQL) sont accessibles via la variable globale PHP $wp_query. La cration de la requte SQL est ralise juste aprs le marqueur init. Il est intressant de noter que cest cette classe qui permet les conditionnal tags, ou "marqueurs de thme conditionnels", avec lesquels vous crez des conditions dans vos thmes. Par exemple, pour vrifier que lon se trouve sur la page daccueil de son blog, on utilisera la fonction PHP is_home(). Enfin, cette classe fournit galement les fonctions propres la boucle WordPress (have_ posts(), the_post(), etc.). Ces fonctions sont des alias vers les mthodes de la classe WP_Query.
Pour davantage d'informations sur la classe WP_Query : http://codex.wordpress.org/ Function_Reference/WP_Query (en anglais).

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

358

WordPress ct dveloppeur: concevoir une extension

Fonctions
is_*() On retrouve un trs grand nombre de fonctions commenant par is_. Ces fonctions permettent de tester un contexte ou la prsence dun objet. Par exemple, pour savoir si lon se trouve sur la page dune catgorie, il suffit dutiliser la fonction is_category().
Ce type de fonction retournera toujours la valeur true si la condition est remplie et false dans le cas contraire.

get_posts() et query_posts() Ces deux fonctions possdent des nuances (que lon peut obtenir via le Codex) concernant les paramtres pris en compte, mais elles proposent toutes les deux les mmes rsultats, soit un requtage spcifique sur la base des articles de WordPress. Ces fonctions retournent gnralement un tableau dobjet, ou le boolen false si aucun rsultat nest renvoy par la base de donnes. wp_reset_query() Cette fonction permet de rinitialiser la variable global $wp_query.
Lorsquon utilise la fonction query_posts(), on crase la variable $wp_query avec les rsultats de la nouvelle requte. Pour restaurer les rsultats de la requte initiale de Word Press, il suffit dexcuter la fonction wp_reset_query().

setup_postdata() Lorsquon utilise la fonction get_posts(), on rcupre un tableau darticles.


Pour afficher le contenu de ce tableau, on utilise une boucle PHP comme foreach ou while. Pour chaque itration, on utilise alors les fonctions des thmes de WordPress, comme the_permalink() pour afficher le lien de larticle ou the_title() pour afficher le titre. Nanmoins, avec une simple boucle PHP, toutes les fonctions de thmes de WordPress ne fonctionnent pas, car toutes les donnes de larticle ne sont pas charges en mmoire. Pour y remdier, il faut charger toutes les donnes de larticle en mmoire, et pour cela utiliser la fonction setup_postdata(). Cette dernire prendra comme unique paramtre lobjet article fourni par la boucle. Ainsi, on peut utiliser lensemble des donnes de larticle.

Bonnes pratiques
La fonction conditionnelle is_home() est rgulirement utilise par les crateurs de thmes "Magazine", parfois tort. Cette fonction permet de vrifier si on se trouve sur la page daccueil. Jusque-l, rien dextraordinaire... Mais, sur la page2 de la page daccueil, la fonction is_home() sera toujours valide, car on ne sera pas dans une page darchives avec date ou catgories, mais dans une page qui suit la pagination de la page daccueil.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Les API de WordPress

359

Pour remdier ce problme, il est prfrable dutiliser la fonction is_front_page() : cette dernire nest valide que pour la page daccueil et sans pagination. Autrement dit, elle rpond parfaitement ce contexte. Une autre trs mauvaise pratique est lutilisation tout va de la fonction query_posts(). En effet, dans la cration de site avec des fonctionnalits et une apparence plus CMS que blog, il est courant de trouver des fonctions query_posts() en tte de fichiers pour rcuprer des informations diffrentes de celles prvues par WordPress. Cela peut paratre anodin mais, dans un contexte de monte en charge et de qualit de dveloppement, le fait de mettre une fonction query_posts() en tte de fichier force WordPress recrer et excuter une nouvelle requte SQL. De ce fait, sur une mme page, on retrouvera deux fois la mme fonction travaillant sur la base des articles, pour peu que ces requtes soient complexes et que votre site soit consistant en donnes. Vous aurez alors sur votre serveur web un surplus de charges qui pourra poser problme. Il faut donc veiller utiliser la fonction query_posts() bon escient, et, si lon souhaite modifier la requte de WordPress pour une catgorie spcifique, il suffit de faire appel au filtre prsent dans la classe WP_Query.

Custom Post Types API crer son propre type de contenu


De quoi s'agit-il?
Lun des grands apports de WordPress 2.9 est lajout du support de types de contenus personnaliss, apport encore amlior avec la version 3.0. WordPress peut stocker et afficher un grand nombre de types de contenus. En interne, ils sont tous stocks dans la table wp_posts, mais sont diffrencis par la colonne post_types. Par dfaut, WordPress 3.0 reconnat cinq types de contenus : les articles, les pages, les fichiers joints, les rvisions et les menus de navigation.

Fonctions
register_post_type( $post_type, $args = array() ) Cest le plus souvent la seule fonction dont vous aurez besoin pour dclarer votre type de contenu. La dclaration se fait en quelques lignes, appeles les plus souvent par une action:
add_action( 'init', 'create_post_type' ); function create_post_type() { register_post_type( 'mon_produit', array( 'labels' => array( 'name' => __( 'Produits' ), 'singular_name' => __( 'Produit' ) ), 'public' => true,

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

360
}

WordPress ct dveloppeur: concevoir une extension


) );

Le premier argument est le seul obligatoire, il indique lidentifiant du type de contenu. Le second argument est facultatif mais primordial car il permet de redfinir de nombreux aspects du type de contenu, notamment la manire dont il est prsent dans linterface dadministration.

add_post_type_support( $post_type, $feature ) Cette fonction permet dindiquer quelles sont les fonctionnalits de linterface exploitables par le type de contenu dfini. Cela permet de prciser linterface dun type de contenu dj cr. Par exemple, voici comment ajouter un champ Extrait aux Pages:
add_action('init', 'extraits_pour_pages'); function extraits_pour_pages'() { add_post_type_support( 'page', 'excerpt' ); }

Les interfaces utilisables sont : title, editor, author, thumbnail, excerpt, trackbacks, custom-fields, comments, revisions, pages-attributes. Le second argument peut tre un tableau PHP, pour ajouter plusieurs fonctionnalits dun coup.

remove_post_type_support( $post_type, $feature ) Fonction miroir de la prcdente, elle permet de retirer une fonctionnalit de ladministration. Par exemple, si lon ne souhaite pas que lutilisateur puisse ajouter un extrait son article:
add_action('init', 'articles_sans_extraits'); function articles_sans_extraits'() { remove_post_type_support( 'post', 'excerpt' ); }

Le second argument ne peut tre quune chane.

post_type_supports( $post_type, $feature ) Cette fonction vrifie quun type de contenu peut utiliser une fonctionne donne. post_type_exists( $post_type ) Cette fonction permet de vrifier que lidentifiant de type de contenu nest pas dj utilis. get_post_type( $the_post = false) Cette fonction renvoie le type du contenu en cours, ou dun contenu donn (via son ID). get_post_types( $args = array(), $output = 'names', $operator = 'and' ) Cette fonction renvoie une liste des type de contenu actuellement dfinis.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Les API de WordPress

361

Le premier argument permet de filtrer les types selon la manire dont ils ont t mis en place. Par exemple, si lon ne souhaite rcuprer que les types hirarchiss :
$args = array( 'hierarchical' => true ); $post_types = get_post_types( $args ); foreach ( $post_types as $post_type ) { echo '<p>' . $post_type . '</p>'; }

Le deuxime argument prcise si lon veut rcuprer simplement la liste des identifiants des types, ou bien direcement un objet PHP pour chaque type.

Bonnes pratiques
Il est probable que de plus en plus de thmes et extensions vont se mettre exploiter cette nouvelle possibilit de WordPress. De fait, il est important que les diffrents types de contenus ne se chevauchent pas, et cela commence avec lidentifiant utilis lors de la cration du type de contenu. La simplicit veut que le dveloppeur choisisse directement "produit" ou "annonce", mais pour peu quun autre type cherche utiliser le mme identifiant, lutilisateur final nobtiendra pas ce quil attend. Pensez donc prfixer les identifiants de vos types de contenu, par exemple avec vos initiales ou le nom de votre socit: "xb_produit", "wpfr_annonce", etc.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

11

Utiliser WordPress en tant que CMS


La communaut WordPress sest longtemps battue, et se bat encore, contre une perception errone de cet outil: WordPress ne serait bon que pour les blogueurs et, si lutilisateur veut un "vrai" site, il faut quil utilise un "vrai" CMS, comme Drupal, Joomla ou SPIP. Vous laurez compris, lide selon laquelle WordPress ne serait bon qu faire des blogs est depuis longtemps fausse: WordPress est tout autant un vrai CMS que les autres, et peut servir pour tous les types de projets web. Fondamentalement, parler de vrai et de faux CMS (content management system, systme de gestion de contenu) est trompeur : partir du moment o un outil permet de publier sur Internet, il gre du contenu, cest donc un CMS part entire. Partant de l, il existe des CMSeffectivement spcialiss "blog": le projet libre et francophone Dotclear (http:// fr.dotclear.org/) en est un excellent exemple dailleurs, son slogan a longtemps t " Dotclear ne fait que du blog, et il le fait bien". WordPress est sorti du crneau "que pour les blogs" en 2005, avec la version 1.5 et lintroduction du concept de "pages", du contenu hirarchis ne dpendant pas de la chronologie du blog. Cette premire tape permet dj beaucoup de choses, mais WordPress continue sur cette lance et, en 2007, la version2.3 introduit la capacit de crer des taxinomies personnalises, cest--dire en gros de crer son propre jeu de catgories pour un type de contenu. Enfin, la2.9 introduit une importante fonctionnalit: le support des types de contenu personnaliss. Ce sont ces trois aspects qui seront abords dans ce chapitre. Dautres aspects relatifs la gestion avance de contenu sont galement mentionner: les champs personnaliss (1.2, 2004), un diteur WYS/WYG (2.0, 2005), la sauvegarde automatique (version 2.1, 2007), le gestionnaire de fichiers mdia (2.1 galement), le correcteur orthographique (2.1 encore), la possibilit de configurer une page statique en page daccueil plutt que les derniers articles du blog (2.1 toujours), la sauvegarde des versions/rvisions (2.6, 2008), le gestionnaire de menus (3.0, 2010)... et tant dautres fonctionnalits dont le but final est de simplifier la vie de lutilisateur. En dfinitive, cest le thme dun site qui dfinit si ce site est un blog, un site de rencontre, une galerie de photos ou encore une base de donnes de livres sur la chirurgie obsttricienne plastique du bulbe rachidien. Tout ce qui se passe en coulisse tient de la gestion de contenu, et nimporte quel CMS, mme fortement orient blog, doit tre considr comme un "vrai CMS" pour peu que les dveloppeurs de thmes aient les coudes franches...

Introduction

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

364

WordPress ct dveloppeur: concevoir une extension

Les pages statiques


Lajout du support des pages statiques dans la version 1.5 a t le premier pas de WordPress en dehors du "pur blog". Auparavant, WordPress ne pouvait grer que des articles, lis la chronologie du blog. Il fallait fortement bidouiller le fonctionnement de WordPress pour en tirer autre chose. Une fois les pages apparues, il devenait possible de grer du contenu dans un nouveau contexte: non seulement ce contenu tait totalement extrieur la chronologie du blog, mais elles pouvaient par ailleurs tre lies entre elles! Il devenait possible de grer des pages ou sous-pages, et partant de l des sites entiers. Mieux encore, personne ntait oblig dutiliser les articles: il tait tout fait possible de ne se servir de WordPress que pour grer des pages statiques, et de profiter ainsi dun CMS prouv et simple dusage, ainsi que de tous ses apports communautaires (thmes, extensions, support...). Rapidement, de nombreux dveloppeurs ont profit de cet apport pour ne plus proposer que des sites propulss par WordPress, quils aient besoin dun blog ou non!

Comment en crer
Votre installation de WordPress dispose dj, par dfaut, dun article et de son commentaire, et dune page propos. Si vous savez crer des articles, vous pouvez aussi facilement crer des pages, et lier les pages entre revient assigner une page parente toute nouvelle page cre. En bref, crer et grer des pages dans WordPress, et les lier entre elles, est lenfance de lart. Et, si vous navez jamais essay, nous vous enjoignons le faire: ce nest pas plus cher.

Comment les afficher


Cest ici que lon constate que la diffrence entre un blog et un site "rgulier" ne tient rellement qu son thme, son habillage, quel que soit le CMS utilis. Tout dpend, somme toute, de lemphase que met la feuille de style sur le contenu "non blog". Prenons le thme par dfaut de WordPress. Celui-ci fait la part blog laspect blog: les articles sont clairement mis en avant, tandis que les pages sont relgues dans le menu (voir Figure11.01). Vous aurez beau crer de nouvelles pages, celles-ci ne seront indiques que dans le menu de navigation, et bien sr ladresse de chacune. Pour inverser la tendance, il faut, au choix ou combin: aller dans la page Rglages > Lecture et faire que la page daccueil affiche une page statique plutt que les derniers articles; modifier le thme; modifier le menu de navigation pour quil naffiche que les pages voulues.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Utiliser WordPress en tant que CMS


Figure 11.01
Twenty Ten, le thme par dfaut de WordPress 3.0.

365

Comme vous lavez vu aux chapitres traitant de la cration dun thme, laffichage des articles se fait partir de la Boucle (The Loop). partir du moment o votre page daccueil affiche une page statique plutt que les articles, un premier pas est fait, la Boucle prend la suite. Le menu de navigation se charge ensuite de guider le visiteur au travers de pages du site. Pour votre propre thme, le menu de navigation est la meilleure chose que vous puissiez ajouter si vous partez sur lide de faire un site plutt quun blog. Le code placer dans lentte est trs simple, tout en tant fortement personnalisable. Au plus simple, il suffit dun appel de fonction qui produira la liste HTML ncessaire:
wp_nav_menu();

Partant de l, vous pouvez exploiter les diverses fonctions de wp_nav_menu() pour prciser vos besoins: dclarer la balise du contenant ainsi que sa classe et/ou son id, dfinir la profondeur des pages maximales, etc. Toutes ces options sont documentes sur le Codex: http://codex.wordpress.org/Function_Reference/wp_nav_menu. Si vous souhaitez utiliser non pas le menu de navigation mais simplement les pages telles que vous les avez ordonnes dans ladministration de WordPress, vous pouvez faire appel une autre fonction tout aussi puissante, et prsente depuis la version1.5:
wp_list_pages();

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

366

WordPress ct dveloppeur: concevoir une extension


Tout comme pour wp_nav-menu(), vous pouvez dclarer un tableau qui redfinira le code HTML gnr afin de ladapter vos besoins: profondeur, pages exclure, affichage des sous-pages ou non, etc. Le Codex, en plus dexpliquer toutes ces options, offre de nombreux exemples pratiques pouvant servir dinspiration : afficher les pages par date de cration, ne lister que les sous-pages dune page en particulier, etc.: http://codex.wordpress.org/ Function_Reference/wp_list_pages. Dans tous les cas, vous obtiendrez une liste de liens vers les contenus de votre site. Aprs, il ne tient qu vous de transformer ce code HTML en un menu votre convenance, laide des CSS, voire de JavaScript...

Les taxinomies personnalises


Qu'est-ce qu'une taxinomie?
Le sujet des taxinomies a dj t abord au chapitre prcdent, sous langle purement dveloppeur: prsentation des faits, explication du contenu des tables, listage des fonctions de lAPI. Lobjectif de cette section est de vous faire comprendre limportance de cette API, et en quoi elle va vous aider raliser tous types de sites. Revenons sur la dfinition de base: une taxinomie est une mthode de classification des informations. De fait, disposer dune API de taxinomie signifie autoriser lutilisateur (ou, du moins, le dveloppeur dextensions ou de thmes) crer ses propres classifications. Avant sa version 2.3, WordPress ne disposait que dune taxinomie: les catgories. Celles-ci sappliquaient uniquement aux articles et aux liens. Ctait dj utile, car on pouvait crer des sous-catgories (on appelle cela une taxinomie hirarchise). Avec larrive des mots-clefs dans la version2.3, lintgralit de la gestion des taxinomies a t rendue gnrique. Dsormais, les articles pouvaient accder une taxinomie hirarchise, les catgories, et galement faire appel une taxinomie non hirarchise, les mots-clefs. Chacune de ces taxinomies correspond un usage prcis, les catgories permettant un classement trs gnral des articles sur site, tandis que les mots-clefs servaient aux petits dtails qui ne sappliquent pas forcment aux autres articles. Ce nest quavec la version 2.8 que lAPI a volu: en quelques lignes de code, il devenait possible dajouter ses propres taxinomies, WordPress prenant en charge la mise en place de linterface sur la page dcriture de larticle, ainsi que lajout automatique du menu ddi. Mais les taxinomies ne fonctionnaient que pour les articles, et linterface ne fonctionnait pas pour les taxinomies hirarchises. WordPress 3.0 gnralise rellement lusage des taxinomies: On peut crer une taxinomie pour nimporte quel type de contenu (articles, pages, mais aussi les contenus personnaliss, comme nous le verrons dans la section suivante). Linterface dadministration fonctionne pour nimporte quel type de taxinomie (hirarchique ou non).

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Utiliser WordPress en tant que CMS

367

La gestion des taxinomies est grandement simplifie (cration, modification, suppression...). Il devient possible de prciser le texte des labels de linterface, afin de mieux intgrer la taxinomie.

Ce que cela apporte


Vous pouvez donc mettre en place votre propre type de catgorisation. Concrtement, cela signifie que vous pouvez avoir des groupements plus propres votre contenu que "catgorie" ou "mot-clef". Par exemple, si vous ne publiez sur votre site que des recettes de cuisine, peut-tre voudriezvous avoir, en plus des catgories et mots-clefs, un groupe nomm "ingrdients", un autre nomm "dure" et un dernier nomm "budget". Toutes ces choses sont ralisables avec les catgories et mots-clefs, mais seront beaucoup mieux intgres votre processus de travail (et votre interface) si vous utilisez les taxinomies de base pour ce quelles sont, sans surcharger les catgories avec des centaines de termes qui nont aucun rapport entre eux (voir Figure11.02).
Figure 11.02
Avant: toutes les classifications sont mlanges dans les catgories.

En crant vos propres taxinomies, non seulement vous simplifiez la classification de votre contenu, mais vous faites un usage correct de WordPress, sans vous limiter ses fonctionnalits de blog.

Comment en crer
Lajout dune nouvelle taxinomie ne requiert vraiment que lutilisation de la fonction register_taxinomy(), dj dcrite succinctement au chapitre prcdent.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

368

WordPress ct dveloppeur: concevoir une extension


Voici le code le plus simple pour ajouter une taxinomie dingrdients vos articles:
register_taxonomy( 'recipes_ingredients', 'post', array( 'hierarchical' => true, 'label' => __('Ingredients'), ) );

Ce code est placer soit dans une extension, soit dans le fichier functions.php de votre thme, selon le contexte de votre utilisation. La fonction est appele via une action WordPress. Dans lordre, nous dfinissons: Lidentifiant de la taxinomie. Nous la prfixons car une autre extension pourrait dfinir sa propre taxinomie, comme "ingrdient" dans un contexte de boissons. Le type de contenu. Notre taxinomie ne sapplique ici quaux articles. Si lon voulait lappliquer aux articles, aux pages et au contenu personnalis "Recettes", on pourrait utiliser un tableau: array( 'post', 'pages', 'recipes' ),. Un tableau PHP dfinissant diffrentes options. Ce tableau peut contenir de nombreuses options, mais dans cette version trs simplifie nous nen utilisons que deux: hierarchical. Prcise si la taxinomie est hirarchise (comme les catgories) ou non (comme les mots-clefs). label. Le nom qui saffichera dans linterface. Notez que nous utilisons la fonction dinternationalisation __(): nous faisons en sorte que notre code soit comprhensible du plus grand nombre, donc nous crivons tous les textes en anglais (mme lidentifiant), puis les rendons traduisibles (sauf, euh, lidentifiant). propos de texte et de comprhension: telle quelle est code, notre taxinomie fonctionnera, mais linterface prsentera de nombreux dfauts textuels. En effet, elle utilisera les mmes chanes que pour linterface des catgories, comme Add New Category ou All Categories bref, les valeurs par dfaut des taxinomies de WordPress. Pour rsoudre ce problme, il nous faut reprendre entirement les chanes lies la taxinomie. Cest le rle de loption labels, qui prend un tableau PHP:
register_taxonomy( 'recipes_ingredients', 'post', array( 'hierarchical' 'label' 'labels' 'name' 'singular_name' 'search_items' 'popular_items' 'all_items' 'parent_item' 'parent_item_colon'

=> => => => => => => => => =>

true, __('Ingredients'), array( __('Ingredients'), __('Ingredient'), __('Search Ingredients'), __('Popular Ingredients'), __('All Ingredients'), __('Parent Ingredient'), __('Parent Ingredient:'),

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Utiliser WordPress en tant que CMS

369

'edit_item' => __('Edit Ingredient'), 'update_item' => __('Update Ingredient'), 'add_new_item' => __('Add New Ingredient'), 'new_item_name' => __('New Ingredient Name'), 'separate_items_with_commas' => __('Separate ingredients with commas'), 'add_or_remove_items' => __('Add or remove ingredients'), 'choose_from_most_used' => __('Choose from the must used ingredients') ) ) );

Les trois dernires options ne sont vraiment utiles que pour les taxinomies non hirarchises.

Ici encore, nous avons internationalis toutes les chanes avec __(), pour garantir une diffusion globale de notre code. Les chanes seront ensuite rcupres dans un fichier PO et traduites en franais dans un fichier MO (notez que, par souci de place, nous avons omis le dernier argument, dfinissant le domaine de la traduction). Bien entendu, vous pouvez choisir dutiliser directement des chanes en franais... Une fois les chanes bien en place, votre taxinomie sintgre parfaitement au processus rdactionnel de votre article: WordPress prend en charge la cration des pages de gestion (voir Figure11.03), ainsi que les blocs dans la page de rdaction du type de contenu choisi (voir Figure 11.04). Il ne vous reste plus qu remplir chaque taxinomie avec les termes adquats.
Figure 11.03
L'interface gnre pour la taxinomie "Ingrdients".

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

370
Figure 11.04

WordPress ct dveloppeur: concevoir une extension

Les interfaces autognres des trois taxinomies.

Bien dautres options sont disponibles, mais pour commencer vous pouvez fonctionner avec leurs valeurs par dfaut. Pour en savoir plus, comme toujours, il y a le Codex: http://codex. wordpress.org/Function_Reference/register_taxonomy. Notez que cette page du Codex indique galement la liste des identifiants rservs, cest-dire les termes que vous ne pouvez pas utiliser pour qualifier vos taxinomies.

Comment les afficher


Maintenant que vous avez vos taxinomies, vous pouvez aller toujours plus loin dans la compartimentation de votre contenu. Mais il reste le rendre exploitable par les visiteurs de votre site, sinon cela na vraiment dintrt que pour vous... Nous allons voir deux manires dy parvenir: le listage de termes, et le nuage de termes. Vous pouvez lister les termes dune taxinomie de larticle en cours simplement en utilisant la fonction get_the_term_list():
<?php echo get_the_term_list( $post->ID, 'recipes_ingredients', 'Les ingrdients de cette recette&nbsp;', ', ', ''); ?>

Dans le cas dune taxinomie hirarchise, vous pouvez exploiter la fonction wp_tag_ cloud(), simplement en modifiant la taxinomie prise en compte:
<?php wp_tag_cloud( array( 'taxonomy' => 'recipes_ingredients' ) ); ?>

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Utiliser WordPress en tant que CMS

371

Les types de contenu personnaliss


Qu'est-ce qu'un type de contenu?
Un type de contenu est une appellation gnrique pour la manire dont sont stockes et gres vos donnes par WordPress. Cela peut prendre nimporte quelle forme, et WordPress en reconnat cinq par dfaut: les articles ; les pages statiques ; les fichiers joints ; les rvisions ; les menus de navigation (depuis la version 3.0). Depuis le dbut, les utilisateurs de WordPress nont pas pu sortir de cette smantique: sils voulaient mettre en place du contenu, il fallait lenregistrer en tant quarticle ou que page. Ces deux types sont suffisamment gnriques et dissocis pour rpondre la plupart des demandes mais, dans le cas de contenus spcifiques, le risque tait grand de mlanger torchons et serviettes, pour ainsi dire. Lajout des custom post types, cest--dire la possibilit de crer ses propres types de contenu, date de WordPress2.9, mais limplmentation est alors trop brute pour tre vraiment utile: le dveloppeur souhaitant crer ses propres types de contenu devait galement bidouiller WordPress pour que celui-ci affiche une page dadministration ou prenne en compte les rgles de rcriture. Les dveloppeurs ont bien compris cela, et la version3.0 automatise tous les processus laborieux, pour rendre la cration de types de contenu trs rapide. Les types de contenu personnaliss (TCP) sont la pierre finale: ils font entrer WordPress dans la cour des grands CMS.

Ce que cela apporte


Vous tes trs heureux avec votre blog: des articles pour vos contenus quotidiens, des pages statiques pour votre contenu fixe ( propos et compagnie). Soit! Vous navez alors pas besoin des TCP. Mais lusage des TCP transcende celui des blogs: avec eux, il sagit rellement de grer des contenus autres que des articles chronologiques ou des pages gnriques. Reprenons lexemple de notre site de recette. Vous pouvez mettre les recettes dans des articles et votre contenu fixe dans des pages. Mais, si vous voulez galement grer un blog, o mettre vos articles? Les mlanger avec les recettes? Inversement, si vous utilisez les articles pour votre blog et les pages pour vos recettes, les pages sont-elles le meilleur endroit pour stocker galement vos recettes. Non. Idalement, il faudrait un troisime type de contenu: les recettes. Cest exactement ce quil est possible de faire depuis WordPress3.0: le CMS souvre toutes les formes de publication.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

372

WordPress ct dveloppeur: concevoir une extension


Qui plus est, WordPress prend tout en charge ds que le nouveau type est cr: interface dadministration, intgration tous les niveaux, rcriture dURL... Et vous pouvez crer autant de types de contenu que vous avez de contenus diffrents: recettes, critiques de livres de recettes, grands cuisiniers, critiques de restaurants... Tout cela en plus des articles et pages, qui conservent leur usage premier: la gestion du blog et des contenus fixes.

Comment en crer
Tout comme les taxinomies, lajout du nouveau type de contenu revient ajouter une ligne dans une extension ou dans le fichier functions.php du thme:
register_post-type( 'recipes' );

Cest tout. Cest le code le plus simple pour obtenir un nouveau type de contenu: indiquer simplement lidentifiant. Bien sr, de nombreuses options existent, et il est mme primordial de les utiliser, comme celles rcrivant les textes de tous les labels lis ladministration de ce type de contenu:
register_post_type( 'recipes', array( 'label' => 'labels' => 'name' => 'singular_name' => 'add_new' => 'add_new_item' => 'edit_item' => 'view_item' => 'search_items' => 'not_found' => 'not_found_in_trash'=> ), 'public' => 'hierarchical' => 'menu_position' => 'supports' => ); );

_x('Recipes', 'General name for "Ad" post type'), array( _x('Recipes', 'Plural name for "Recipes" post type'), _x('Recipe', 'Singular name for "Recipes" post type'), __('Add New'), __('Add New Recipe'), __('Edit Recipe'), __('View Recipe'), __('Search Recipes'), __('No recipes found'), __('No recipes found in trash') true, true, 20, array( 'title', 'editor', 'comment' )

Ici encore, nous avons crit les diffrents labels en anglais puis les avons internationaliss, laide de __() mais galement de _x(), histoire dintroduire un peu de varit (lapport de cette fonction est de pouvoir donner des indications aux traducteurs). Le domaine a de nouveau t omis par souci de place... Toutes les options dfinies dans le tableau PHP sont facultatives, mais, les valeurs par dfaut naidant pas lintgration au sein de ladministration, il nous faut tre exhaustif. Voici le sens de celles que nous avons choisi de redfinir: La chane label et le tableau labels. Mme utilit que pour les taxinomies, savoir faire en sorte que linterface soit toujours adapte au nom de notre nouveau type de contenu.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Utiliser WordPress en tant que CMS

373

public. Par dfaut, le TCP ne saffiche pas et nest pas exploitable. Cela peut tre utile en phase de test, mais dans notre cas nous voulons voir linterface, lancer des recherches, etc. De fait, true. hierarchical. Le contenu peut tre hirarchis si nous le souhaitons, pour avoir des pages et sous-pages dans linterface. Sans cela, le contenu est "plat", et les pages ne peuvent pas tre lies entre elles. menu_position. O veut-on voir loption du menu apparatre? Sous Articles? Sous Mdias? Sous Pages? Ces options sont identifies de cinq en cinq (Articles = 5, Mdias = 10, Pages = 15...), donc il faut dfinir le nombre qui nous correspond. Si lon souhaite que ce contenu soit en premire position, on indique 0. Sil peut sans problme se caler en fin de menu, alors, on le laisse tel quel. Ici, nous souhaitons quil apparaisse sous les Pages, donc 20. supports. Par dfaut, les nouveaux types ne donnent au rdacteur quune interface de cration minimale: titre et diteur. Vous pouvez demander y ajouter le gestionnaire de commentaire, comme nous lavons fait, ou encore les rvisions, lextrait, les rtroliens, etc. Ds lactivation de lextension ou du thme contenu dans cette ligne, linterface de WordPress sera modifie pour donner accs une nouvelle option de menu pointant vers les pages, vous permettant de lister lensemble des recettes et den ajouter une nouvelle (voir Figure 11.05).
Figure 11.05
L'interface gnre automatiquement par WordPress pour grer le type de contenu.

Notez que ce nouveau type de contenu ne dispose pas de catgories ou de mots-clefs... Il vous est bien entendu parfaitement possible dajouter quelques taxinomies (hirarchises ou non) uniquement pour ce type de contenu! Vous pouvez crer autant de types de contenu et de taxinomies que ncessaire: pourquoi en rester aux seuls btes mots-clefs et catgories? Comme dhabitude, le Codex dtient toutes les informations sur les options disponibles: http://codex.wordpress.org/Function_Reference/register_post_type.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

12

Construire une extension volue

Objectif de l'extension
Dans ce chapitre, nous allons crer une extension "volue", autrement dit une extension ajoutant plusieurs fonctionnalits et faisant appel diffrentes API de WordPress. Ici, nous allons mettre au point une extension permettant de grer une liste de petites annonces. Cette extension, nomme Simple Classifieds (en anglais, "petite annonce" scrit classified ads), gre diffrentes fonctionnalits que nous dtaillerons dans la section suivante. Cest typiquement le genre dextension qui pourra tre utilise dans le cadre dun service en ligne gratuit, par exemple. Une orientation qui tend plus vers le CMS que loutil de blog

Quelles fonctionnalits?
Avant dcrire ce code, il est impratif que vous vous posiez quelques questions. Ces questions vont permettre de regrouper les fonctionnalits de votre extension dans diffrents groupes, selon le type de fonctions sur lesquelles vous travaillerez, mais elles doivent galement rappeler les diffrentes pages de lextension. Voici une liste non exhaustive des questions qui peuvent tre importantes: Quelles sont les fonctionnalits? Quelles sont les pages indispensables de linterface dadministration? Quels utilisateurs de WP vont pouvoir modifier les rglages de votre extension? Quels utilisateurs de WP vont pouvoir utiliser lextension? Comment saffichera le contenu de lextension dans le thme? Quelle stratgie vis--vis du rfrencement? O stocker les donnes? Quelles fonctionnalits seront disponibles depuis la page de rdaction?Etc. Cette liste est un simple exemple. Avec lexprience que vous allez acqurir, vous ajouterez probablement de nouvelles questions au fur et mesure de vos dveloppements. Revenons notre exemple, Simple Classifieds, et rpondons aux questions suivantes.
Quelles sont les fonctionnalits?

Lextension doit pouvoir grer lajout, ldition et la suppression des annonces. Lextension contiendra galement un widget pour afficher les dernires annonces et un shortcode permettant dimplmenter un formulaire dajout public dans la page de notre choix.
Quelles sont les pages indispensables de linterface dadministration?

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

376

WordPress ct dveloppeur: concevoir une extension


Trois pages sont prvoir: une page de gestion listant les vnements, une page contenant le formulaire dajout et ddition des vnements et une page pour les rglages de lextension. Le listage, lajout et ldition des annonces seront directement grs par WordPress.
Quels utilisateurs de WP vont pouvoir modifier les rglages de votre extension?

Seul le rle administrateur aura la possibilit de modifier les rglages de lextension.


Quels utilisateurs de WP vont pouvoir utiliser lextension?

Les rles administrateur et diteur auront la possibilit dutiliser lextension, soit ajouter, effacer et modifier les vnements.
Comment saffichera le contenu de lextension dans le thme?

Pour afficher les annonces dans le thme de lutilisateur, vous disposez de diffrents moyens. Tout dabord, lextension se chargera de modifier la Boucle de la page daccueil pour y afficher les annonces plutt que les articles de linstallation WordPress. Par ailleurs, vous avez un widget qui affiche les dernires annonces ajoutes.
Quelle stratgie vis--vis du rfrencement?

Lextension doit tre capable de sadapter la forme des liens de WordPress. Si les permaliens sont actifs, lextension doit gnrer de belles adresses, sinon elle produira des adresses classiques avec des paramtres.
O stocker les donnes?

Les annonces seront stockes dans les tables standard de WordPress, grce lutilisation dun type de donnes personnalis. Sans cela, il nous aurait fallu crer nos propres tables de base de donnes...
Quelles fonctionnalits seront disponibles depuis la page de rdaction?

Il y a deux zones possibles de rdaction: la page interne de WordPress, et le formulaire gnr par le shortcode de lextension. Dans les deux cas, lutilisateur ne pourra saisir quun titre et un contenu textuel.
L'exemple que nous utilisons se base sur les types de contenus personnaliss, ce qui simplifie grandement l'extension, tant du point de vue de l'accs la base que de la mise en place des pages d'administration, qui sont quasi totalement pris en charge par WordPress. Si vous souhaitez dcouvrir une extension qui vous explique comment manipuler la base ou mettre en place vos propres pages d'administration, le CD de ce livre contient la premire dition du prsent chapitre, qui comprend une extension de gestion d'vnements, Simple Events. Notez que Simple Events a t crit pour WordPress 2.7 et ne profite donc pas des nombreuses amliorations des versions suivantes...

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Construire une extension volue

377

Regroupement des fonctionnalits


Une fois que vous avez rpondu ces diffrentes questions, vous devez regrouper les donnes par entit logique de WordPress. Une entit logique correspond en fait un groupement de fonctionnalits selon les bibliothques de fonctions utilises; par exemple, si lon devait accder la base de donnes, il faudrait passer par lAPI WPDB. Administration Ajout des menus dans WordPress. Cration des nouvelles permissions et attributions aux rles. Cration du contenu des trois pages de lextension. Mise en place dun shortcode permettant de placer un formulaire dajout une page arbitraire. Accs en base de donnes Totalement pris en charge par WordPress grce aux types de contenu personnaliss. Rcriture d'adresse Internet Rewriting Totalement pris en charge par WordPress. Fonction du thme Modification la vole de la Boucle de la page daccueil. Widget Cration de loption permettant dactiver ou non le widget. Cration du widget. Taxinomie Enregistrement de deux taxinomies pour notre type de contenu personnalis: catgories et mots-clefs.

Architecture de l'extension
Fichier ou dossier?
Pour architecturer une extension WordPress, deux cas de figure se prsentent. Le premier cas, cest celui dune extension simple comme Hello Dolly, que vous pouvez retrouver par dfaut dans WordPress. Comme vous avez pu le constater, cette extension ne fait pas grand-chose, de ce fait placer toutes les fonctions dans un seul et mme fichier est largement comprhensible.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

378

WordPress ct dveloppeur: concevoir une extension


Le second cas, linstar de notre exemple ici, est celui dune extension volue, susceptible de contenir diffrents fichiers pour la traduction, un widget, une documentation ou encore des modles de templates. Pour cette raison, il est ncessaire de crer un dossier pour ce type dextension.

Un gros fichier? Ou plusieurs petits fichiers?


Dans le cadre dune extension assez complexe, il y a deux faons de rpartir le code. Soit vous placez tout le code dans un seul fichier PHP, soit vous dcoupez lextension par entit logique pour crer un fichier PHP par entit. Les deux techniques ont leurs avantages et leurs dfauts. Par exemple, si vous choisissez de placer toutes les fonctions dans un seul et mme fichier, il sera difficile de trouver rapidement une fonction. Une extension un tant soit peu complexe atteindra trs rapidement les 1000, voire 2000lignes, pour peu que vous ayez des besoins qui ne soient pas pris en charge par les API de WordPress. Dun autre ct, mme avec un grand nombre de fonctions, si ces dernires sont rparties dans diffrents fichiers thmatiques, il sera assez facile de trouver celles qui vous intressent. Nanmoins, il nest pas toujours possible de dcouper toutes les fonctions dans diffrents fichiers, pour la simple et bonne raison quun dveloppeur peut travailler avec des classes PHP, et ces dernires ne peuvent pas tre rparties sur plusieurs fichiers. Dans ce cas prcis, la rpartition pourra tre la suivante: une classe cliente lance tout le temps, et une classe admin ne dmarrant que les fonctions spcifiques linterface dadministration seulement lorsque vous vous y trouvez.

Architecture de Simple Classifieds


Ici, pour simplifier le code, lextension sera principalement dveloppe via des fonctions classiques; seul le widget sera conu sous la forme dune classe. De ce fait, lextension sera architecture de la faon suivante:
simple-classifieds/ simple-classifieds.php readme.txt languages/ simpleclassifiedsfr_FR.mo simpleclassifieds-fr_FR.po simpleclassifieds.pot inc/ classifieds.init.php classifieds.options.php classifieds.shortcodes.php classifieds.widgets.php

Toute lextension est contenue dans le dossier simple-classifieds. Ce dernier possde deux dossiers et un fichier PHP.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Construire une extension volue

379

Le fichier PHP simple-classifieds.php contient len-tte spcifique aux extensions WordPress. Cest lui qui gre linclusion des autres bibliothques, autrement dit cest le cur de lextension. Les deux dossiers sont languages et inc. Ils contiennent respectivement les fichiers de traduction de lextension et les bibliothques de fonctions ncessaires lextension, qui sont au nombre de quatre.

Dveloppement de l'extension
Les bases de l'extension
L'en-tte de WordPress Comme dans toute extension, il est ncessaire davoir len-tte des extensions WordPress. Nous dbuterons le fichier simple-classifiedss.php avec ce code:
/* Plugin Name: Simple Classifieds Plugin URI: http://wordpress.org/extend/plugins/simple-classifieds/ Description: Run your own classifieds website using WordPress. Version: 1.0 Author: Xavier Borderie Author URI: http://www.wordpress-fr.net License: GPL2 Text Domain: simpleclassifieds */

Cet en-tte peut tre suivi de la licence de lextension et dune notice de copyright. Inclusion des diffrents fichiers Pour permettre linclusion des fonctions contenues dans les diffrents fichiers, vous devez ajouter les appels PHP des fichiers aprs len-tte de WordPress:
require( dirname(__FILE__) . '/inc/classifieds.init.php' ); require( dirname(__FILE__) . '/inc/classifieds.shortcodes.php' );

Seuls sont appels ici les fichiers qui doivent forcment tre chargs en mme temps que lextension. Dautres fichiers ne sont chargs quen cas de besoin... Remarquez que nous ne prcisons pas le chemin complet des fichiers PHP, nous utilisons la place la fonction PHP dirname() qui retourne le chemin complet du dossier contenant le fichier que nous passons en paramtre. Ici nous passons en paramtre la constante PHP __FILE__; cette constante a comme valeur le chemin complet du fichier o la constante est appele.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

380

WordPress ct dveloppeur: concevoir une extension

Activation de l'extension
Lors de lactivation de lextension dans WordPress, nous allons devoir effectuer deux actions : crer le type de contenu et les taxinomies utilises par nos petites annonces, et initialiser des permissions spcifiques notre extension. Les fonctions crant le type de contenu et les taxinomies sont dclenches par le crochet init:
add_action( 'init', 'xb_classifieds_build_post_type' ); add_action( 'init', 'xb_classifieds_build_taxonomies' );

Ainsi, ces deux fonctions seront lances tant que lextension sera active. Pour lancer une fonction PHP uniquement lors de son activation (et donc viter les multiples appels alors que le code est dj en place), nous utiliserons la fonction register_activation_hook(), qui appellera automatiquement la fonction xb_classifieds_build_permissions() lors de lactivation de lextension. Ajoutez cette ligne:
register_activation_hook( __FILE__, 'xb_classifieds_build_permissions' );

Cette fonction doit tre place aprs lajout des fichiers PHP. Initialisation des permissions Lextension disposera de deux permissions diffrentes: une premire permettant de grer les donnes de lextension et lautre permettant de modifier les rglages de lextension. Ici, la permission de gestion sera nomme use_classifieds et elle sera attribue aux rles diteur et administrateur, tandis que la permission admin_classifieds sera attribue uniquement ladministrateur, lui permettant de modifier les rglages:
// Ajout des permissions function xb_classifieds_build_permissions() { if ( function_exists('get_role') ) { // Je rcupre l'objet "Rle administrateur" $role = get_role('administrator'); // Si la permission "use_classifieds" n'existe pas, on l'ajoute. if( $role != null && !$role->has_cap('use_classifieds') ) { $role->add_cap('use_classifieds'); } // Pareil pour la permission "admin_classifieds" if( $role != null && !$role->has_cap('admin_classifieds') ) { $role->add_cap('admin_classifieds'); } // On supprime la variable de notre fonction. unset($role); // On procde de la mme faon pour le rle "Editeur" sauf qu'on lui ajoute uniquement la permission "user_classifieds" $role = get_role('editor'); if( $role != null && !$role->has_cap('use_classifieds') ) { $role->add_cap('use_classifieds'); }

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Construire une extension volue


// On supprime la variable de notre fonction. unset($role);

381

Ces permissions vont permettre de scuriser les actions de lextension et les menus. Word Press naffichera que les menus dont lutilisateur possde la permission. De ce fait, un diteur ne verra pas le menu Rglages de lextension.

Initialisation de l'extension
Pour lancer les diffrentes fonctionnalits de lextension, il faut initialiser les diffrents filtres et actions. Pour cela, vous allez regrouper ces appels dans une seule et unique fonction xb_classifieds_init() que vous placerez dans le fichier simple-classifieds.php. Cest la seule fonction que contiendra ce fichier et elle sera place la fin du fichier.
// Fonction d'initialisation de l'extension add_action('plugins_loaded', 'xb_classifieds_init'); function xb_classifieds_init() { // }

Vous ajouterez du code lintrieur de la fonction au fur et mesure du dveloppement. Notez que la fonction sera lance lors de laction plugins_loaded, pas avant!

Mise en place du type de contenu


Nos petites annonces seront stockes non pas au sein darticles ou de pages, mais dans un nouveau type de contenu cr pour loccasion et nomm "classifieds" (petite annonce en anglais, voir Figure12.01).
Figure 12.01
Le menu gnr par WordPress, avec les taxinomies.

La cration dun type de contenu se fait trs rapidement : il suffit dappeler la fonction register_post_type(), et le type de contenu est pris en compte par WordPress, qui

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

382

WordPress ct dveloppeur: concevoir une extension


gnre automatiquement les menus de linterface dadministration, ainsi que toute la logique interne ncessaire au bon fonctionnement de ce type de contenu. Parce que nous sommes attentifs aux dtails, nous allons faire en sorte dintgrer au mieux le type de linterface. Cela signifie non seulement reprendre tous les labels par dfaut pour les remplacer par des labels adapts notre type, mais galement internationaliser les chanes, afin de permettre la traduction de notre extension. Voici notre dclaration complte de type de contenu:
$labels = array( 'name' => __('Classifieds', 'simpleclassifieds'), 'singular_name' => __('Classified', 'simpleclassifieds'), 'add_new' => __('Add new', 'simpleclassifieds'), 'add_new_item' => __('Add New Classified', 'simpleclassifieds'), 'edit_item' => __('Edit Classified', 'simpleclassifieds'), 'new_item' => __('New Classified', 'simpleclassifieds'), 'view_item' => __('View Classified', 'simpleclassifieds'), 'search_items' => __('Search Classifieds', 'simpleclassifieds'), 'not_found' => __('No classifieds found', 'simpleclassifieds'), 'not_found_in_trash' => __('No classifieds found in trash', 'simpleclassifieds') ); $args = array( 'label' => __('Classifieds', 'simpleclassifieds'), 'labels' => $labels, 'public' => true, 'menu_position' => 20, 'supports' => array( 'title', 'editor', 'author' ), 'show_in_nav_menus' => false ); register_post_type( 'classified', $args );

Notre type est donc identifi sous le nom interne "classified". Notez que nous navons modifi que les options dont le rglage par dfaut ne nous arrangeait pas. Par exemple, par dfaut un type de contenu nest pas public, afin de pouvoir le dvelopper sans pour autant troubler le fonctionnement de linterface. Grce menu_position, nous plaons le menu de gestion des petites annonces aprs celui de gestion des pages. Lcran dajout/modification dune annonce ne contiendra que le titre, lditeur de texte et la slection dauteur. Enfin, les annonces ne safficheront pas dans le menu de navigation. De nombreuses autres options sont disponibles, mais leurs valeurs par dfaut nous suffisent pour le moment. Pour assurer la traduction de toutes nos chanes, nous les avons places au sein de la fonction __(), en prcisant le text-domain de notre extension en second argument: "simpleclassifieds".

Mise en place des taxinomies


Notre type de donnes est personnalis, mais nous souhaitons tout de mme que celui-ci puisse profiter des catgories et mots-clefs. Nous allons devoir recrer ces taxinomies pour le type "classified", ce qui nest gure plus difficile que crer le type de contenu lui-mme.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Construire une extension volue

383

La fonction utiliser cette fois est register_taxonomy() et, tout comme register_ post_type(), elle suffit pour mettre en place une interface et une logique complexes mais dispose de nombre doptions. Voici le code complet mettant en place les catgories de petites annonces, et les mots-clefs de petites annonces:
register_taxonomy( 'classifieds_categories', 'classified', array( 'hierarchical' => true, 'label' => 'labels' => 'name' => 'singular_name => 'search_items => 'popular_items => 'all_items' => 'parent_item' => 'parent_item_colon' => 'edit_item' => 'update_item' => 'add_new_item' => ), 'query_var' => 'rewrite' => ) );

__('Categories', 'simpleclassifieds'), array( __('Categories', 'simpleclassifieds'), __('Category', 'simpleclassifieds'), __('Search Categories', 'simpleclassifieds'), __('Popular Categories', 'simpleclassifieds'), __('All Categories', 'simpleclassifieds'), __('Parent Category', 'simpleclassifieds'), __('Parent Category:', 'simpleclassifieds'), __('Edit Category', 'simpleclassifieds'), __('Update Category', 'simpleclassifieds'), __('Add New Category', 'simpleclassifieds') true, true

register_taxonomy( 'classifieds_tags', 'classified', array( 'hierarchical' => false, 'label' => __('Tags', 'simpleclassifieds'), 'labels' => array( 'name' => __('Tags', 'simpleclassifieds'), 'singular_name' => __('Tag', 'simpleclassifieds'), 'search_items' => __('Search Tags', 'simpleclassifieds'), 'popular_items' => __('Popular Tags', 'simpleclassifieds'), 'all_items' => __('All Tags', 'simpleclassifieds'), 'parent_item' => __('Parent Tag', 'simpleclassifieds'), 'parent_item_colon' => __('Parent Tag:', 'simpleclassifieds'), 'edit_item' => _(_'Edit Tag', 'simpleclassifieds'), 'update_item' => __('Update Tag', 'simpleclassifieds'), 'add_new_item' => _('Add New Tag', 'simpleclassifieds'), 'separate_items_with_commas' => __('Separate tags with commas', 'simpleclassifieds'), 'add_or_remove_items' => __('Add or remove tags', 'simpleclassifieds'), 'choose_from_most_used' => __('Choose from must used tags', 'simpleclassifieds'), ), 'query_var' => true, 'rewrite' => true ) );

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

384

WordPress ct dveloppeur: concevoir une extension


Ici encore, nous rcrivons lensemble des labels de chaque taxinomie, mais ne modifions que les options dont les valeurs par dfaut ne nous conviennent pas. Seule exception, loption hierarchical : celle-ci est par dfaut false mais, pour simplifier la diffrenciation de chaque taxinomie la lecture du code, nous indiquons explicitement sa valeur. Notez par ailleurs que la taxinomie non hirarchise (les mots-clefs) dispose de trois labels supplmentaires rcrire. Comme il se doit, nos deux taxinomies sont, par leur deuxime argument, assignes au type de nos petites annonces, "classified".

Partie Administration
Menu de WordPress Grce la "magie" de la gestion par WordPress des types de contenu personnaliss et des taxinomies personnalises, le plus gros du travail est fait ct administration: ds la mise en place de ces derniers, WordPress a gnr lensemble des menus ncessaires, ainsi que la logique qui intgre lensemble WordPress. Il nous reste nanmoins un menu mettre en place: celui qui permettra de grer quelques rglages de notre extension. Pour ajouter ce menu dans WordPress, vous allez lier une fonction laction admin_init, qui dfinira nos options et les sections o elles saffichent, et une autre fonction laction admin_menu, qui insrera le menu. Donc, dans un premier temps, il nous faut ajouter ces actions dans la fonction dinitialisation xb_classifieds_init(), mais qui seront lances uniquement dans linterface dadministration:
// Initialisation Admin if ( is_admin() ) { require( dirname(__FILE__) . '/inc/classifieds.options.php' ); add_action( 'admin_init', 'xb_classifieds_options_init' ); add_action('admin_menu', 'xb_classifieds_options_add_page'); }

Nous verrons le contenu de la fonction xb_classifieds_options_init() dans la section suivante. Voyons tout dabord celui de la fonction xb_classifieds_options_add_page(), qui ajoute le menu:
function xb_classifieds_options_add_page() add_options_page( __('Classifieds'), // __('Classifieds'), // 'admin_classifieds', // 'classifieds_options', // 'xb_classifieds_options_build_page' // ); } { Titre de la page Titre du menu de la page Capacit ncessaire pour y accder Identifiant/URL de la page Fonction construisant la page

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Construire une extension volue


Cette fonction est place dans le fichier classifieds.options.php.

385

La fonction appele ncessite la permission admin_classifieds, que seul le rle administrateur possde. Rglages Options des petite annonces Dans cette extension, la page des options se veut assez sommaire (voir Figure12.02). En effet, elle ne prsente que deux cases cocher: laffichage ou non des petites annonces sur la page daccueil du site, lactivation ou non du widget. Les rglages seront stocks sur la table des options de WordPress, grce lAPI des options (Settings API).
Figure12.02
Rendu de la page de rglages de l'extension.

Enregistrer les options dans la base de donnes

Occupons-nous de notre fonction xb_classifieds_options_init(), exploitant la Settings API de WordPress, qui simplifie grandement la mise en place des formulaires doptions. Pour cela, nous allons commencer par enregistrer les rglages de notre extension:
register_setting( 'classifieds_options', 'classifieds_options', 'xb_classifieds_options_sanitize' );

Lenregistrement requiert au moins deux arguments : le groupe doptions que nous dfinissons, la variable de loption, et la fonction qui validera le contenu de loption. Dans notre cas, notre variable sera un tableau PHP, ce qui nous permet de stocker de nombreuses valeurs sans pour autant trop remplir la base de donnes. Nous verrons plus loin le contenu de la fonction de validation des donnes...

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

386

WordPress ct dveloppeur: concevoir une extension


Dfinir le contenu de la page doptions

laide des fonctions de la Settings API, nous allons dfinir totalement le contenu de notre page, qui sera ensuite gnre par WordPress, ce dernier prenant en charge les aspects les plus laborieux du formulaire. Voici donc comment nous mettons en place deux sections pour notre page, avec une option dans chaque section:
add_settings_section( 'classifieds_general_settings', __('General Settings', 'simpleclassifieds'), 'xb_classified_general_settings_text', 'classifieds_section' ); add_settings_field( 'classified_adsInHome_setting', __('Display the ads on the homepage?', 'simpleclassifieds'), 'xb_classifieds_displayAdsInHome_setting', 'classifieds_section', 'classifieds_general_settings' ); add_settings_section( 'classifieds_widgets_settings', __('Widget Settings', 'simpleclassifieds'), 'xb_classified_widets_settings_text', 'classifieds_section' ); add_settings_field( 'classified_latestWidget_setting', __('Activate "Latest Classifieds" widget?', 'simpleclassifieds'), 'xb_classifieds_displaylatestWidget_setting', 'classifieds_section', 'classifieds_widgets_settings' );

La fonction de mise en place dune section prend quatre arguments: un identifiant unique, le titre de la section (qui sera affich dans la page), une fonction qui permettra dafficher du contenu pour la section, et enfin le nom de la page laquelle sapplique cette fonction. De son ct, la fonction de mise en place dune option (dun "champ") prend cinq arguments: un identifiant unique (qui sera galement appliqu aux balises HTML de cette option), le label de loption, une fonction qui affichera le code HTML de notre balise INPUT, et enfin lidentifiant de la section de page dans laquelle cette option sera affiche. Comme vous le constatez, nous plaons loption daffichage des annonces en page daccueil dans une section "General", et loption dactivation du widget dans une autre section, "Widget".
Remplir la page doptions

Pour notre exemple, les fonctions affichant du contenu pour les sections ne feront que sortir un court descriptif. Mais rien nempche de rajouter dautres choses : images, liens, etc. Voici comment nous nous y prenons:

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Construire une extension volue


function xb_classified_widgets_settings_text() { echo '<p>' . __('These settings apply to the extension\'s widgets.', 'simpleclassifieds') . '</p>'; } function xb_classified_general_settings_text() { echo '<p>' . __('These settings apply to the extension in general.', 'simpleclassifieds') . '</p>'; }

387

Les options de notre formulaire, elles, doivent explicitement tre codes:


function xb_classifieds_displaylatestWidget_setting() { $options = get_option('classifieds_options'); if ( !isset($options['latest_widget']) ) { $options['latest_widget'] = 0; } ?> <input id='classified_latestWidget_setting' name="classifieds_options[latest_ widget]" type="checkbox" value="1" <?php checked('1', $options['latest_ widget']); ?> /> <?php } function xb_classifieds_displayAdsInHome_setting() { $options = get_option('classifieds_options'); if ( !isset($options['ads_in_home']) ) { $options['ads_in_home'] = 0; } ?> <input id='classified_adsInHome_setting' name="classifieds_options[ads_in_ home]" type="checkbox" value="1" <?php checked('1', $options['ads_in_home']); ?> /> <?php }

Ces deux fonctions seront appeles lors de la gnration de la page entire, que nous allons bientt voir. Chacune est dfinie dans la fonction add_settings_field() de loption, et elles suivent le mme cheminement: Rcupration du tableau des rglages de notre extension, nomm "classifieds_options" (comme nous lavons dj vu). Vrification de lexistence dune valeur pour notre option. Sil ny en a pas, nous linitialisons. Affichage du code HTML du champ (dans notre cas, une case cocher). Notez que lattribut ID de la balise INPUT doit correspondre lidentifiant du champ de loption, tel que dfini en premier argument de la fonction add_settings_field(). Par ailleurs, afin de rcuprer un tableau de valeurs plutt que deux valeurs spares, lattribut. NAME de la balise prend une forme particulire : nom_du_tableau_d'options[nom_ de_l'option].

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

388

WordPress ct dveloppeur: concevoir une extension


Enfin, nous faisons usage de la fonction checked() de WordPress, qui prend en charge la logique daffichage de lattribut CHECKED ou non, selon que le premier argument est gal au second.
Vrifier les valeurs donnes par lutilisateur

Tels quils sont conus, nos deux champs renvoient une chane contenant la valeur 1 ou 0. Pour notre exemple, nous prfrons un entier plutt quune chane. Il nous faut donc convertir la valeur avant lenregistrement dans la base de donnes. Cest ici quentre en jeu la fonction de nettoyage/validation, que nous avons dfinie en quatrime argument de la fonction register_setting() ! Voici le code que nous lui donnons:
function xb_classifieds_options_sanitize($input) { // $input est un tableau contenant toutes nos options. // Il nous faut appliquer une vrification toutes les options qui en ont besoin. if ( isset($input['latest_widget']) ) { $input['latest_widget'] = ( $input['latest_widget'] == 1 ? 1 : 0 ); } if ( isset($input['ads_in_home']) ) { $input['ads_in_home'] = ( $input['ads_in_home'] == 1 ? 1 : 0 ); } return $input; }

La mme conversion est applique aux deux valeurs, mais tout peut se faire. Par exemple, dans le cadre dun champ texte o lon demande une adresse e-mail, il est possible dutiliser une expression rgulire afin de vrifier quil sagit bien dune adresse valide.
Afficher la page doptions

Toute cette prparation aboutit enfin la gnration du code de notre page doptions, notamment son formulaire. Cela peut sembler laborieux, mais le gain de temps est certain : l oauparavant le dveloppeur devait grer la main les annonces et le contenu de la variable $_POST pour traiter correctement le formulaire, dsormais WordPress prend en charge toutes ces tapes, laissant le dveloppeur se concentrer sur son code. Voici le code de gnration du formulaire de la page, appel par add_options_page():
function xb_classifieds_options_build_page() { ?> <div class="wrap"> <div class="icon32" id="icon-options-general"><br /></div> <h2><?php _e( 'Classifieds Options', 'simpleclassifieds' );?></h2> <?php _e( 'Options for the Simple Classifieds extension.', 'simpleclassifieds' );?> <form method="post" action="options.php"> <?php settings_fields('classifieds_options'); do_settings_sections('classifieds_section'); ?> <p class="submit"> <input type="submit" class="button-primary" value="<?php _e('Update Settings') ?>" /> </p>

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Construire une extension volue


</form> </div> <?php }

389

Certes, il reste des balises FORM et quelques attributs mettre en place. Malgr cela, toutes les tapes de prparation aboutissent aux deux fonctions au cur du formulaire: settings_field() se charge de mettre en place le code HTML des annonces et autres champs ncessaires au bon fonctionnement du formulaire. do_settings_sections() affiche les diffrentes sections et leurs champs, dans lordre que nous avons dfini, et ici encore avec les bonnes valeurs mises en place. Le gain de temps est assez phnomnal, et dans le cadre de page doptions rallonge il est dautant plus apprciable de pouvoir dlguer la prise en charge des tches laborieuses au CMS, plutt que tout grer la main. Les options sont sauvegardes et rcupres, les valeurs des balises sont mises jour, WordPress vous notifie cette mise jour... La Settings API est extrmement puissante.
Exploiter les options

Une fois la page doptions mise en place, il reste appliquer les choix de lutilisateur dans le code. Dans notre exemple, nous le faisons directement depuis la fonction xb_classifieds_init(). Voici la procdure:
$options = get_option( 'classifieds_options' ); if ( isset($options['latest_widget']) && $options['latest_widget'] === 1 ) { add_action( 'widgets_init', create_function('', 'return register_ widget("Classifieds_Latest_Widget");') ); } if ( isset($options['ads_in_home']) && $options['ads_in_home'] === 1 ) { add_action( 'pre_get_posts', 'change_home_loop' ); }

Dans les deux cas, nous vrifions que la valeur cherche est bien dfinie, puis quelle correspond ce que lon attend. Les fonctions voulues sont alors dclenches, ici par une action pour chaque option: la premire enregistre le widget de notre extension, la seconde modifie la Boucle de la page daccueil, grce la fonction change_home_loop(), que voici:
function change_home_loop( $current_query ) { if ( $current_query->is_home() ) { $current_query->query_posts( array( 'post_type' => 'classified' ) ); } }

Nous utilisons les actions les plus proches de nos besoins: widgets_init se dclenche lors de la mise en place des widgets, et pre_get_posts se dclenche lors de laffichage de lentte du thme... noter galement que pre_get_posts a lavantage de passer en rfrence la requte en cours, que lon peut donc exploiter loisir et proprement.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

390

WordPress ct dveloppeur: concevoir une extension

Partie Widget
Lancement du widget Par dfaut, le fichier PHP du widget classifieds.widget.php nest pas charg par lextension. Les fonctions propres aux widgets doivent tre charges lors de lvnement widgets_init. Vous chargerez le fichier PHP depuis la fonction xb_classifieds__init() uniquement si loption de lextension est active. Ajoutez ceci dans la fonction event_init():
$options = get_option( 'classifieds_options' ); if ( isset($options['latest_widget']) && $options['latest_widget'] === 1 ) { include( dirname(__FILE__) . '/inc/classifieds.widgets.php' ); add_action( 'widgets_init', create_function('', 'return register_ widget("Classifieds_Latest_Widget");') ); }

Notre action doit appeler une fonction mais, vu que nous voulons simplement enregistrer notre widget, nous passons par une fonction lambda (une fonction sans nom/anonyme), cre pour loccasion par create_function(). Celle-ci se charge dappeler son tour register_widget(). Il nest pas obligatoire de passer par une fonction lambda, mais cela nous vite simplement de devoir crer plus de code que ncessaire... Cration du widget Un widget dans WordPress se dcompose en deux parties: une partie cliente qui affiche le widget sur le thme et une partie admin qui gre les options et laffichage dans linterface dadministration. Le code des widgets est exclusivement situ dans le fichier classifieds. widgets.php (voir Figure12.03).
Figure12.03
Rendu du widget ct thme.

LAPI de widgets de WordPress ncessite de passer par une classe PHP qui tend lobjet WP_Widget de WordPress. Cette classe soit contenir quatre mthodes standard: la mthode de construction (du mme nom que la classe), puis form() pour le formulaire doption, update() pour les actions lancer lors de la mise jour du widget, et widget() pour le contenu du widget lui-mme.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Construire une extension volue


Mthode de construction

391

Linstanciation de notre classe dclenche automatiquement la fonction ponyme de la classe:


class Classifieds_Latest_widget extends WP_Widget { function Classifieds_Latest_widget() { $this->WP_Widget( 'classifieds', __('Latest classifieds', 'simpleclassifieds'), array( 'classname' => 'widget-classifieds', 'description' => __( 'Displays the latest classifieds from Simple Classifieds', 'simpleclassifieds' ) ) ); } // suite du code }

Celle-ci se charge de prciser certains attributs de notre widget: un identifiant unique, le nom qui sera affich dans la page de configuration, et un premier tableau darguments contenant le nom de lattribut CLASS appliqu au widget, et sa description telle quaffiche sur la page de configuration. Il est possible dajouter en quatrime argument un second tableau contenant la largeur en pixels ('width', ncessaire si elle doit dpasser les 250pixels) et la hauteur ('height', inutilis lheure actuelle).
Les champs du widget

Nous allons ds prsent dfinir les donnes qui pourront tre modifies par le widget au sein dune mthode part afin de les rendre accessibles aux diffrentes autres mthodes de la classe. Elles seront contenues par un tableau associatif. Nous souhaitons que lutilisateur puisse modifier deux aspects du widget: le nombre dannonces affiches, et le titre utilis dans la barre latrale. Pour chaque variable, nous offrons une valeur par dfaut.
function getFields() { return array( 'title' => __( 'Latest classifieds', 'simpleclassifieds'), 'max' => 10, ); }

Administration du widget

Le widget que manipulera ladministrateur (voir Figure 12.05) du site nest gure plus quun formulaire : il reste parfaitement classique dans son utilisation de la logique PHP et des balises HTML:

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

392

WordPress ct dveloppeur: concevoir une extension


function form( $instance ) { $instance = wp_parse_args( (array) $instance, $this->getFields() ); foreach ( (array) $this->getFields() as $field => $field_value ) { ${$field} = esc_attr( $instance[$field] ); } ?> <p><?php _e('Empty field will use default value.', 'simpleclassifieds'); ?></p> <p> <label for="<?php echo $this->get_field_id('title'); ?>"> <?php _e('Title:', 'simpleclassifieds'); ?> <input class="widefat" type="text" id="<?php echo $this->get_field_ id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" value="<?php echo $title; ?>" /> </label> </p> <p> <label for="<?php echo $this->get_field_id('max'); ?>"> <?php _e('Number of classifieds:', 'simpletags'); ?> <select id="<?php echo $this->get_field_id('max'); ?>" name="<?php echo $this->get_field_name('max'); ?>"> <option <?php selected($max, 2); ?> value="2">2</option> <option <?php selected($max, 4); ?> value="4">4</option> <option <?php selected($max, 6); ?> value="6">6</option> <option <?php selected($max, 8); ?> value="8">8</option> <option <?php selected($max, 10); ?> value="10">10</option> </select> </label> </p> <?php }

La mthode form() rcupre automatiquement une instance de lobjet en premier argument. En utilisant la fonction wp_parse_args() de WordPress, nous pouvons remplacer les valeurs par dfaut avec celles dfinies dans linstance. Ce faisant, nous crons une boucle crant la vole une variable pour chaque variable manipulable et lui assignant la dernire valeur. Ceci fait, nous pouvons construire le formulaire lui-mme. Nous avons donc deux options mettre en place. Chacune est encadre dune balise LABEL afin de lier le titre (traduisible) aux balises daction: dans un cas, un champ textuel, dans lautre, un slecteur. Dans chaque cas, nous utilisons la fonction get_field_id() de WordPress, permettant dobtenir un ID propre et conforme pour la balise partir du nom initial de loption, et get_ field_name() pour obtenir la mme chose pour le champ NAME. Notez que les variables de nos options reprennent le nom de celles-ci, grce la boucle foreach() au dbut de la mthode. Le champ texte reprend donc la valeur courante du titre.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Construire une extension volue

393

Pour la slection doption, rien de bien nouveau pour qui sait coder en HTML et PHP, mis part lutilisation de la fonction selected(), qui renvoie lattribut SELECTED dans le cas o ses deux arguments sont gaux.
Mise jour des variables

Le formulaire du widget est en place, et WordPress se charge de le placer dans des balises FORM, avec un bouton Enregistrer, comme pour les autres widgets. Au clic sur ce bouton Enregistrer, WordPress va dclencher la mthode update() de la classe de ce widget. La voici, dans toute sa mirifique splendeur:
function update($new_instance, $old_instance) { $instance = $old_instance; foreach ( (array) $this->getFields() as $field => $field_value ) { $instance[$field] = strip_tags($new_instance[$field]); } return $instance; }

WordPress donne cette mthode deux valeurs pour ses arguments: le premier reoit la nouvelle instance des variables telles que choisies par lutilisateur, la seconde conserve lancienne instance de ces variables, avec les valeurs initiales. Cela nous permet de manipuler lensemble de manire prcise, en versant le contenu de lun dans lautre, avec potentiel lement une vrification des donnes si besoin est. Une fois tous les champs correctement transvass dune instance lautre, nous renvoyons linstance finale.
Partie publique du widget

Voyons voir maintenant laspect que prendra notre widget une fois dans la barre latrale. Tout ce que nous souhaitons, cest que le widget affiche les X dernires annonces. Lorsque le thme affiche les widgets, il appelle leur mthode widget(). Voici la ntre:
function widget( $args, $instance ) { extract( $args ); foreach ( (array) $this->getFields() as $field => $field_value ) { ${$field} = trim( $instance[$field] ); } echo $before_widget; echo $before_title . apply_filters( 'widget_title', $title ) . $after_title; $classifieds_query = new WP_Query( array( 'post_type' => 'classified', 'posts_per_page' => $max ) ); echo '<ul>'; if ( $classifieds_query->have_posts() ) : while ( $classifieds_query->have_posts() ) : $classifieds_query->the_post(); echo '<li><a href="' . get_permalink() .'">' . get_the_title() . '</a></li>';

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

394

WordPress ct dveloppeur: concevoir une extension


endwhile; else: echo '<li>' . __('There is no spoon.', 'simpleclassifieds') . '</li>'; endif; echo '</ul>'; wp_reset_query(); echo $after_widget; }

Les deux arguments de la mthode sont ici encore pris en charge par WordPress: $args contient diffrentes variables dfinies par la barre latrale, comme $before_widget, qui doit ouvrir tout widget afin de mieux sintgrer et que nous rcuprons grce la fonction PHP extract(); et $instance contient notre instance des rglages. Ici encore, une boucle foreach nous permet de rcuprer des variables exploitables part de notre instance de rglages. Lide principale est donc dafficher la liste des X dernires annonces. Pour ce faire, nous instancions lobjet WP_Query avec deux modifications par rapport une requte normale: on ne cible que le type "classified", et on limite le nombre dannonces via la variable $max. Ceci fait, nous pouvons afficher la liste des titres dannonces comme pour nimporte quelle Boucle sans oublier de prendre en compte le cas o il ny aura pas dannonce... La Boucle termine, nous remettons zro la requte afin de ne pas marcher sur les plates-bandes dune autre...
Figure12.04
Rendu du widget ct administration.

Partie Shortcode
Nous souhaitons donc proposer ladministrateur du site un shortcode afin quil puisse facilement crer une page contenant un formulaire simple dajout dannonce, pour peu quil soit connect... Ce shortcode prendrait la forme suivante : [classified_submit_form]. laffichage de la page, WordPress comprendra automatiquement quil faut remplacer ce shortcode par du contenu plus complexe... pour peu quon lui indique comment faire.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Construire une extension volue

395

Notre shortcode est entirement stock dans le fichier classifieds.shortcodes.php et se dclenche ds le chargement de ce dernier grce la mthode add_shortcode():
add_shortcode('classified_submit_form', 'classified_submit_form');

Le premier argument dfinit le shortcode lui-mme, tandis que le second pointe vers la fonction qui produira le contenu gnr par le shortcode. Que voici, justement:
function classified_submit_form() { $form = ''; if ( is_user_logged_in() ) { $form .= '<form id="new_post" name="new_post" method="post" action="' . site_url() . '/">'; $form .= ' <label for="post_title">' . __( 'Classified\'s title', 'simpleclassifieds' ) . '</label>'; $form .= ' <input name="post_title" type="text" velue="' . __('The title for your classified', 'simpleclassifieds') . '" />'; $form .= ' <br />'; $form .= ' <label for="post_text">' . __( 'Classified\'s main text', 'simpleclassifieds' ) . '</label>'; $form .= ' <textarea name="post_text" style="width:100%;height:7em"> </textarea>'; $form .= ' <input id="submit" type="submit" value="' . __( 'Publish your classified', 'simpleclassifieds' ) . '" />'; $form .= ' <input type="hidden" name="action" value="post" />'; $form .= wp_nonce_field( 'new-post' ); $form .= '</form>'; } else { $form = '<p class="xb-error">' . __('Only logged-in users can post new classified ads.', 'simpleclassifieds') . '</p>'; } return $form; }

Somme toute, un formulaire tout ce quil y a de plus classique. Nous vrifions avant toute chose que lutilisateur est effectivement connect, puis nous crons les champs ncessaires: titre et contenu, soit balise INPUT et balise TEXTAREA. Il ne faut pas oublier de gnrer le champ nonce avec wp_nonce_field(), sans quoi le formulaire ne sera pas pris en compte par WordPress. Parfait, notre page contient un formulaire, mais maintenant il faut que WordPress traite les donnes envoyes via celui-ci. Pour ce faire, nous mettons en place une fonction qui sera dclenche par laction "template_redirect". Cette action se dclenche juste la fin du fichier modle en cours. Elle est gnralement utilise pour mettre en place une redirection...
add_action( 'template_redirect', 'classified_submit_code' );

Laction appelle une fonction qui prendra en charge le traitement des donnes envoyes via le formulaire de notre shortcode:

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

396

WordPress ct dveloppeur: concevoir une extension


function classified_submit_code() { if( 'POST' != $_SERVER['REQUEST_METHOD'] || empty( $_POST['action'] ) || $_POST['action'] != 'new_post' ) { if ( is_user_logged_in() ) { if ( isset($_POST['post_title']) && isset($_POST['post_text']) ) { $user = wp_get_current_user(); $user_id = $user->ID; $title = stripslashes($_POST['post_title']); $post_content = stripslashes($_POST['post_text']); if ( empty( $title ) || __('The title for your classified', 'simpleclassifieds') == $title ) // For empty or placeholder text, create a nice title based on content $post_title = title_from_content( $post_content ); else $post_title = $title; $the_post_array = array( 'post_author' => $user_id, 'post_title' => $post_title, 'post_content' => $post_content, 'post_type' => 'classified', 'post_status' => 'publish' ); $post_id = wp_insert_post( $the_post_array ); if ( $post_id != 0 && is_wp_error( $post_id ) ) { // Post correctly inserted ! // Optionnaly make a redirection on success page ! } else { // Post not inserted, check error // Optionnaly make a redirection on error page ! // var_dump($post_id); } } } } }

Comme il se doit quand il sagit de traiter les donnes dun formulaire, il faut commencer par vrifier si la page a bien t appele par la mthode POST de HTTP, et si les actions de notre formulaire sont bien en place. Ceci fait, et aprs avoir vrifi que lutilisateur est bien connect, vient le moment de rcuprer les donnes du formulaire afin de les introduire dans la base de donnes. Un contenu WordPress, de nimporte quel type, ncessite trois informations pour tre valide: un iden tifiant dauteur, un titre et un contenu, le reste tant gr par dfaut par WordPress. Pour rcuprer lidentifiant de lutilisateur courant, il suffit de faire appel la fonction wp_get_current_user(), puis dappeler la variable ID de lobjet rcupr. Le titre et le contenu, quant eux, sont directement fournis par le formulaire. Dans le cas o lauteur aurait omis le titre, nous en crons un partir des premiers mots du contenu, laide dune fonction title_from_content() que nous dcrirons plus loin.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Construire une extension volue

397

Nous avons toutes nos donnes, il reste crer le tableau PHP ncessaire linsertion dun nouveau contenu dans la base de WordPress. Nous prcisons dans ce tableau le type du contenu (classified) et son tat (published). Enfin, nous pouvons insrer le contenu dans la base, laide de la fonction wp_insert_ post(), qui prend la suite en charge. Celle-ci renvoie lID du nouveau contenu, ce qui nous permet de raliser quelques vrifications finales, voire de rediriger le navigateur vers une page en cas de succs ou dchec, avec par exemple la fonction PHP header(). Reste une petite fonction expliquer, celle qui cre un titre partir du contenu. Notre fonction est reprise de celle utilise dans le thme open-source P2 (http://p2theme.com/):
function title_from_content( $content ) { static $strlen = null; if ( !$strlen ) { $strlen = function_exists('mb_strlen') ? 'mb_strlen' : 'strlen'; } $max_len = 40; $title = $strlen( $content ) > $max_len? wp_html_excerpt( $content, $max_len ) . '...' : $content; $title = trim( strip_tags( $title ) ); $title = str_replace( "\n", " ", $title ); return $title; }

Simplement, les quarante premiers caractres du contenu sont repris pour en faire un titre, termin par un point de suspension au besoin. Le tout utilise la fonction wp_html_excerpt(), cre pour ce type doccasion.

Partie Internationalisation
Une extension qui nest pas internationalise ne peut pas avoir de succs; linternationalisation est indispensable de nos jours. Deux mthodes sont disponibles pour charger la traduction de votre extension. Ces mthodes sont placer dans la fonction xb_classifieds_init() de votre extension. La premire mthode est compltement gnrique, bien quun peu complexe:
$locale = get_locale(); // fr_FR if ( !empty( $locale ) ) { $mofile = dirname(__FILE__) . '/languages/simpleclassifieds-'.$locale.'.mo'; // simpleclassifieds-fr_FR.mo load_textdomain('simpleclassifieds', $mofile); }

Ici, vous rcuprez vous-mme le code de la langue utilise et vous chargez le fichier MO en prcisant son chemin absolu. Lintrt de cette mthode, cest une parfaite compatibilit quels que soient lemplacement de lextension et la version de WordPress employe. Lautre mthode, plus simple mais moins souple et implmente plus rcemment dans Word Press, consiste utiliser la fonction load_plugin_textdomain().

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

398

WordPress ct dveloppeur: concevoir une extension


Vous obtenez alors:
load_plugin_textdomain('simpleclassifieds', false, 'simple-classifieds/ languages');

Il vous reste utiliser un outil comme poEdit (http://www.poedit.net/) pour extraire les chanes marques avec les fonctions __() et _e() afin de les cataloguer au sein dun fichier POT que vous stockerez dans le dossier /languages de votre extension. Les traducteurs nauront plus qu enregistrer leur fichier binaire traduit (MO) sur le modle simpleclassifieds-fr_FR.mo pour obtenir une extension traduite dans la langue de lutilisateur.

Conclusion
Dbuter le dveloppement dextensions sous WordPress est quelque chose de relativement accessible. Ici, il nest que trs peu question de dveloppement orient objet, il sagit principalement de fonctions PHP couples un mcanisme dactions et de filtres. Bien entendu, il est ncessaire de bien connatre le PHP pour parvenir vos fins Il nempche quavec la base dextensions existantes vous pouvez facilement, mme en tant que dveloppeur occasionnel, modifier une extension pour vos besoins. Et cest au fur et mesure que vous modifierez des extensions et que vous vous familiariserez avec WordPress que vous serez capable de vous lancer dans le dveloppement dune extension deA Z!

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Partie
WordPress en mode multisite
13. Le mode multisite de WordPress...................................................... 401 14. Crer un rseau de sites avec WordPress. ......................................... 407 15. Spcificits du dveloppement en mode multisite........................... 421

IV

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

13

Le mode multisite de WordPress

Prsentation
Les utilisateurs avancs (ou intrpides) de WordPress peuvent configurer leur installation pour passer en mode multisite. Cette possibilit nest arrive que trs rcemment, avec Word Press3.0. Auparavant existaient deux ditions de WordPress: ldition normale, utilisable par tous pour grer un blog, et ldition MU, pour ceux souhaitant grer plusieurs sites WordPress partir dune mme installation, au lieu dinstaller (et de mettre jour) plusieurs installations distinctes. WordPress MU, ou WordPress, tait donc la version multi-utilisateur de la fameuse application de blogging WordPress. Aujourdhui totalement intgre WordPress, cette dclinaison spcifique na plus lieu dtre: on ne parle donc plus de WordPress MU, mais juste de WordPress, en prcisant que le logiciel est en mode multisite le cas chant. Ce mode multisite est loutil idal pour les personnes souhaitant mettre en place un grand rseau de blogs: il permet chaque utilisateur inscrit de crer son propre site. Chacun son propre blog, cela signifie chacun son propre thme, chacun ses extensions, chacun ses utilisateurs, avec les mmes rles que WordPress! Concrtement, il est possible de crer depuis une installation de WordPress autant de sites WordPress que lon souhaite (voir Figure13.01). Ainsi, on retrouve le logiciel WordPress en mode multisite derrire des services de blogs tout compris, tels que WordPress.com ou LeMonde.fr.
Figure13.01
WordPress.com, une des plates-formes de blogs les plus populaires.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

402

WordPress en mode multisite

Historique et numrotation des versions


WordPress MU a t lanc le 4 octobre 2004 par Donncha OCaoimh. La version0.1 tait lpoque un fork pur et dur du logiciel WordPress; il grait deux fonctionnalits en plus de WordPress, dont le multiblog et lutilisation du moteur de template Smarty pour le rendu des thmes. Alors que WordPress MU continuait voluer, Donncha a intgr lquipe de dveloppement dAutomattic, et WordPress MU sest fortement rapproch de WordPress et a calqu des fonctionnalits du logiciel. Ce qui a provoqu la disparition du moteur de template Smarty. Aprs plusieurs versions bta, la premire version stable de WordPress MU a t publie le 23octobre 2006. Depuis cette premire version1.0, WordPress MU ne cesse dvoluer au fil des mises jour de WordPress. En effet, les deux logiciels partagent un code trs semblable, la sortie de WPMU est gnralement dcale dune trois semaines aprs celle de WordPress. Word Press MU profite ainsi de toutes les fonctionnalits de WordPress. Jusqu la version2.6 de WordPress, WordPress MU tait numrot de la mme faon, la diffrence que le premier chiffre tait un 1 et non un 2. Par exemple, lquivalent de WordPress2.5 tait WordPress MU1.5. Depuis la version2.6, WordPress MU reprend la mme numrotation, soit WordPress MU2.6. Ce changement a t dcid pour amliorer la lisibilit de WordPress MU vis--vis de WordPress. Beaucoup de personnes pensaient en effet quil tait la trane par rapport Word Press. Il nen est rien, car WordPress MU profite de toutes les innovations de WordPress. Cest devenu dautant plus vrai partir de WordPress 3.0. Ds mai 2009 et la version 2.8 de WordPress, Matt Mullenweg (leader du projet WordPress) annonait que WordPress et WPMU allaient fusionner et indiquait que cela arriverait probablement pour la version3.0. Depuis juin 2010, cest dsormais chose faite: une petite modification de la configuration de WordPress, et linstallation peut grer un nombre illimit de sites. Bien sr, cela nest recommand que pour ceux qui matrisent parfaitement les tenants et aboutissants dun tel projet...

Quels usages?
On recense principalement deux usages de WordPress en mode multisite: plate-forme de sites publique, rseaux thmatiques de sites et gros blogueurs.

Plate-forme de sites publique


Que linscription la plate-forme soit payante, gratuite, ou sur invitation, WordPress permet la cration de plate-forme de sites publique. Les plates-formes les plus connues en France sont WordPress.com, LeMonde.fr et unblog.fr. Elles offrent leurs visiteurs la possibilit de crer un blog pour sexprimer sur le sujet de leur choix.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le mode multisite de WordPress

403

Chaque plate-forme tente de dvelopper des fonctionnalits exclusives pour attirer les visiteurs. Lobjectif dune telle plate-forme est multiple: visibilit sur Internet, notorit, gnration de revenus via des publicits ou des abonnements,etc. Une petite prcision toutefois: sachez que le march des plates-formes de blogs est extrmement concurrentiel. Lancer une plate-forme de blogs sans innovations majeures ou sans appuis dune communaut est vou lchec.

Rseaux thmatiques de sites et gros blogueurs


Le second usage rcurrent est lutilisation de WordPress dans un cadre de rseaux de blogs ou de blogueurs plusieurs blogs. Par exemple, si un groupe scientifique international se lance dans le monde du blog, il aura tout intrt utiliser WordPress en mode multisite, pour permettre chaque antenne de disposer de son propre blog. Il suffit ensuite de crer un portail principal qui recense lactivit de tous les blogs, et on obtient dune part un portail trs dynamique, et on allge dautre part ladministration et la maintenance des blogs. Cette problmatique fonctionne galement pour les gros blogueurs. En effet, si vous disposez par exemple de trois blogs WordPress, chaque mise jour de WordPress ou dune extension, il est ncessaire de dupliquer laction trois fois. Avec WordPress en mode multisite, une fois suffira pour mettre jour lintgralit de vos blogs.

qui s'adresse le mode multisite de WordPress?


Mme aprs fusion avec WP.org, le mode multisite de WordPress est et reste destin un public de connaisseurs, voire de professionnels. Si vous ne vous sentez pas laise avec WordPress en mode monosite, nimaginez mme pas travailler avec le mode multisite! Concrtement, pour utiliser WordPress en mode multisite, il faut: savoir manier un diteur de texte; savoir se servir dun client FTP; savoir modifier une extension, donc connatre des rudiments de PHP et de programmation WordPress; parler la langue de Shakespeare, les principales ressources tant en anglais; connatre les bases dun serveur web Linux, SSH, DNS, HTTP; tre au fait des problmes lis la "scalabilit" et lvolution des besoins et ressources (espace serveur, bande passante, processeur, serveur ddi, etc.) ; trs bien connatre WordPress.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

404

WordPress en mode multisite


Si ces connaissances vous manquent ou sont incompltes, il ne vous reste plus qu faire preuve de patience et apprendre, pourquoi pas, en autodidacte. Sinon le plus simple et le plus rapide est de vous tourner vers linstallation de plusieurs instances de WordPress. Si vraiment vous tenez utiliser WordPress en mode multisite, faites appel un professionnel; il se chargera de la configuration de votre serveur et de linstallation de WordPress.

Les formats d'adresse


Le mode multisite permet de crer des sites selon deux formats dadresse: les sous-domaines et les sous-rpertoires. Le choix du format est faire lors de la mise en place du mode multisite; il sera trs compliqu de le modifier en cours de route, do lintrt de bien y rflchir Par exemple, si nous crons et nommons un site site1 depuis WordPress, nous obtiendrons: soit http://site1.monsite.fr/ pour les sous-domaines; soit http://monsite.fr/site1/ pour les sous-rpertoires. Le type sous-domaine est le plus utilis, pour une raison principalement: le rfrencement. Un sous-domaine est considr par les moteurs de recherche comme un site diffrent du domaine principal. On retrouve ce format sur les plates-formes publiques de blogs (type WordPress.com). Dans le cas o vous utilisez WordPress pour un rseau de sites, il est prfrable dopter pour le type sous-rpertoire pour faire profiter la globalit du domaine du rfrencement des sites.

Quand utiliser le mode multisite?


Pour rpondre cette question, nous aurions pu crer un arbre dcisionnel. Mais nous pouvons galement dtailler notre rponse par le biais dune srie de questions plus simples que voici.

Un ou plusieurs blogs?
Il nest pas interdit dutiliser le mode multisite pour un seul et unique blog mais, honntement, quels avantages en tirerez-vous? Ce mode est un peu plus gourmand en requtes SQL et en ressources mmoires que le mode monosite. Pas de doute possible, si vous navez quun blog, utilisez de prfrence WordPress tel quel.

Petite ou grande frquentation?


Vous possdez plusieurs blogs ? Des blogs connus ? Des blogs mdiatiques ? Des blogs gnrant beaucoup de trafic? Regrouper vos blogs sur une seule installation de WordPress nest peut-tre pas une bonne solution. Si vous avez par exemple trois blogs qui sont hbergs chez trois hbergeurs distincts, ou tout au moins trois comptes diffrents, la charge est

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Le mode multisite de WordPress

405

rpartie directement chez vos hbergeurs sans que vous ayez vous en soucier. Migrer vos trois blogs sur une seule installation de WordPress signifie que toute la charge sera centralise sur un seul compte, une seule base de donnes Autrement dit, votre hbergeur peut ne pas apprcier et vous demander par la mme occasion daller voir ailleurs. Or un hbergement haut de gamme juste pour centraliser vos installations peut vous coter bien plus cher que trois comptes distincts

Quel hbergeur?
Tous les hbergeurs ne sont pas compatibles avec le mode multisite. Un hbergeur comme Infomaniak, bien que rput, ne gre quun seul domaine par compte. Ce mode nest donc pas compatible avec ce type dhbergeur. Gnralement, le plus simple pour travailler est de prendre un hbergement virtualis, voire un serveur ddi pour des gros besoins, ce qui implique des connaissances en administration serveur Linux et des frais supplmentaires...

Quel niveau technique?


Linstallation et la configuration de WordPress sont trs accessibles. Lajout du mapping de domaines sur les blogs dune installation WordPress demande dj un peu plus de comptences avec lutilisation de sunrise, les modifications DNS, les vhost du serveur HTTP. Enfin, la principale difficult que lon rencontre avec le mode multisite de WordPress vient des extensions non compatibles 100%. Par exemple, lextension de gnration de sitemap pour les moteurs de recherche, Google Sitemap Generator, nest pas encore compatible avec ce mode lheure o nous crivons ces lignes Lintgration de ce mode dans WordPress est encore rcente, et il faudra un temps dadaptation pour que toutes les extensions prennent totalement en compte lensemble des fonctionnalits de ce nouveau mode. De fait, si vous avez des besoins par rapport une extension en particulier, il vous faudra raliser quelques modifications dans le code PHP ou, pire, utiliser une extension alternative si elle existe!

Conclusion
Utiliser le mode multisite de WordPress peut tre pertinent lorsquon possde plusieurs blogs mais, avant de tout passer dans ce mode, il est indispensable de bien peser le pour et le contre et surtout dtre prt consacrer un peu plus de temps la mise en place de la plate-forme. Car, une fois install et configur, ce mode simplifie grandement la vie Une seule plateforme mettre jour, une connexion pour administrer ses diffrents blogs, une base de donnes, un compte hbergeur, tout cela fait gagner du temps WordPress en mode multisite est donc un bon choix si vous avez les comptences t echniques pour administrer la plate-forme!

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

14

Crer un rseau de sites avec WordPress


Serveur mutualis ou serveur ddi?
En fait, la question ne se pose pas vraiment. Lidal pour le mode multisite est de disposer dun serveur ddi, ou tout du moins virtualis (VPS). Il y a en effet des prrequis assez contraignants mettre en place pour ce mode; de ce fait, lidal est davoir un accs complet sur le serveur. Nanmoins, il est possible de faire fonctionner WordPress en mode multisite sur un hbergement ddi, si ce dernier rpond aux prrequis dtaills dans la prochaine section. Avec les hbergeurs mutualiss les plus connus OVH, 1&1, Amen, il sera possible dutiliser ce mode sans restriction, mais avec le format dadresse sous-rpertoire. Pour le format sous-domaine, vous serez oblig de crer manuellement chaque sous-domaine dans linterface dadministration de votre hbergement.

Configuration logicielle ncessaire

Prrequis
En mode normal comme en mode multisite, WordPress a besoin dau moins PHP 4.3 et MySQL4.1.2. Cependant, de nombreuses extensions pour le mode multisite ncessitent les versions PHP5 et MySQL5. Par consquent, essayez dinstaller les versions les plus rcentes de ces logiciels. Pour la plupart des prrequis, les manipulations sont effectuer depuis une console SSH; cela ncessite une connaissance assez pousse des systmes dexploitation Linux. Il est galement possible de faire ces modifications depuis les interfaces dadministration de serveur telles que Webmin. Les rsultats sont alors plus alatoires. Il ny aura aucune commande excuter dans ce chapitre, pour la simple et bonne raison que les commandes diffrent selon la famille Linux (Debian, Red Hat, Gentoo,etc.) de votre serveur web. Si vous avez un responsable serveur, le plus simple sera encore de lui demander de rendre le serveur web conforme avec les prrequis suivants.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

408

WordPress en mode multisite

Rcriture des URL WordPress (serveur HTTP)


Si vous utilisez Apache, il est impratif dactiver le module rewrite; le mode multisite ne fonctionnera pas sans. Si vous utilisez des serveurs HTTP nouvelle gnration tels que Lighttpd ou Nginx, il y a des rgles pour WordPress MU placer directement dans les fichiers de configuration. Vous pouvez les trouver sur le Codex : http://codex.wordpress.org/ Installing_WPMU#Rewriting_Rules_for_others_HTTP_Server.

Gestion dynamique des sous-domaines (serveur HTTP , serveur DNS)


Cette modification est effectuer uniquement pour le format dadresse sous-domaine. Pour permettre la cration des sous-domaines sans avoir besoin de modifier la configuration serveur, il est ncessaire dajouter un wilcard sur le domaine de WordPress. Un wildcard correspond en franais la carte joker. Ce dernier va permettre tous les sous-domaines dtre reconnus. Dans notre exemple, le domaine de WordPress est http://monsite.fr et ladresse IP de notre serveur ddi est 66.77.88.99. Nous allons ajouter la ligne suivante dans la zone DNS de notre domaine. Gnralement, les zones DNS sont contenues dans le dossier de configuration du serveur DNS Bind.
*.monsite.fr. IN A 66.77.88.99

Faites attention, le point la fin de votre domaine est indispensable! Si vous loubliez, votre configuration DNS sera corrompue. Une fois la modification faite, mettez jour le numro de version de la zone DNS et relancez votre serveur DNS. Grce cette modification, tous les sous-domaines vont pointer sur ladresse IP de serveur web. Noubliez pas non plus de modifier la configuration de serveur HTTP pour que ce dernier accepte tous les sous-domaines sur le vhost de WordPress. Prenons le cas dApache. Gnralement, le fichier httpd.conf contient les enregistrements suivants:
ServerName monsite.fr ServerAlias www.monsite.fr

Nous allons modifier la directive ServerAlias et lui ajouter un wildcard. Le rsultat attendu est:
ServerAlias www.monsite.fr *.monsite.fr

Grce ces modifications, tous les sous-domaines pointeront sur linstallation de WordPress.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

Crer un rseau de sites avec WordPress

409

Certains hbergeurs ont le wildard mis en place par dfaut ct serveur, donc il ne vous reste qu modifier les DNS. Au contraire, certains hbergeurs (notamment les mutualiss) refusent ce type de modification... Configuration et mise jourInstallation de WordPress Linstallation de WordPress ne varie pas dun iota : suivez les instructions donnes au Chapitre2. Cest l lun des grands apports de lintgration de WPMU dans WordPress... noter quune fois les fichiers de WordPress en ligne vous pouvez soit installer le logiciel tel quel, lutiliser en mode monosite pendant quelque temps, puis configurer le mode multisite; soit modifier directement le fichier wp-config.php pour activer le mode multisite ds linstallation. Une fois le mode multisite en place, il est fortement dconseill de revenir en arrire...

Configuration
Lactivation du mode multisite requiert quelques tapes, dont la premire est on ne peut plus simple: elle ne requiert que lajout dune ligne dans le fichier wp-config.php:
define('WP_ALLOW_MULTISITE', true);

Placez cette ligne la fin du fichier (juste avant le commentaire vous dconseillant de modifier les lignes qui le suivent, voir Figure14.01), puis rechargez WordPress (ou installez-le, selon o vous en tes du processus), et voil: vous tes en mode multisite. Les dveloppeurs ont pris soin de rendre cette premire tape simple afin de rester cohrents avec lesprit de WordPress. Par chance, ils nont pas pris la dcision de le rendre trop simple, comme laurait t la prsence dun bouton Activer le rseau de sites dans linterface dadministration le danger aurait t grand que les utilisateurs les moins aguerris cliquent dessus "pour voir" et se retrouvent devoir grer un rseau dont ils ne comprennent pas forcment les implications...
Figure14.01
La ligne d'activation dans le fichier wp-config.php.

Attention, ce nest pas termin! La constante que vous venez de placer dans wp-config.php ne fait quautoriser laccs au mode multisite, il reste encore le configurer! Et cela se fait dans linterface dadministration.

customer 27921 at Fri Mar 11 19:29:26 +0100 2011

Proprit de Albiri Sigue <tag.tog@gmail.com>

410

WordPress en mode multisite


Quand la constante WP_ALLOW_MULTISITE est en place, rien ne change dans linterface, premire vue. La seule diffrence, cest lapparition dune page Rseau dans le menu Outils. Cette page, qui prsente le titre "Crer un rseau de sites WordPress", prvient demble: il vous faut dabord dsactiver toutes vos extensions avant de pouvoir mettre en place le rseau (voir Figure14.02). Cette mesure prventive ne saffiche que si vous avez effectivement des extensions actives...

Figure 14.02
Les extensions peuvent facilement perturber la mise en place du rseau.

Une fois les extensions dsactives, WordPress vous prsente le formulaire de cration du rseau (voir Figure14.03). Celui-ci est trs simple, et certains champs seront probablement dj remplis en fonction de votre installation. Le premier champ vous demande le format dadresse des sites du rseau: Sous-domaine. Les adresses seront de la forme site1.exemple.fr, site2.exemple. fr, etc. Sous-dossier. Les adresses seront de la forme exemple.fr/site1, exemple.fr/ site2, etc. Si vous avez le choix, slectionnez celui qui vous convient le mieux, mais