Professional Documents
Culture Documents
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>
WordPress 3
Toutes les cls pour crer, maintenir et faire voluer votre site web
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.
WordPress 3
Toutes les cls pour crer, maintenir et faire voluer votre site web
Xavier Borderie, Francis Chouquet et Amaury Balmer
VI
WordPress 3
Partie I
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
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
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
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
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
WordPress 3
Partie III
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
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
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
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
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
399 401 401 402 402 402 403 403 404 404 404 404 405 405 405
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
XVI
WordPress 3
Partie V
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........................................................................................
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.
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
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.
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
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.
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.
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
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!
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".
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
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...
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.
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"
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.
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
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
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.
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
16
WordPress 3
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.
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.
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.
20
Figure 1.03
WordPress 3
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
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.
22
WordPress 3
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.
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.
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).
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
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.
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
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.
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
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.
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).
32
Figure 1.15
WordPress 3
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...
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!
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.
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.
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
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.
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.
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.
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
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
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.
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
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.
46
WordPress ct utilisateur
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.
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).
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);
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.
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.
Installer WordPress
Figure2.01
FileZilla.
51
Figure2.02
Cyberduck.
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!
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.
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.
54
WordPress ct utilisateur
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 .
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.
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:
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 .
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).
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!
60
Figure2.14
cran blog WP .
WordPress ct utilisateur
Le quotidien du blogueur
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).
62
Figure3.02
WordPress ct utilisateur
Si vous tes dj connect, vous pouvez accder directement cet cran en utilisant lURL suivante: http://www.exemple.fr/wp-admin.
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.
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.
Le quotidien du blogueur
65
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 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
Permet de mettre en relief une citation (le thme doit avoir pris en compte la balise blockquote). Aligne le texte gauche.
Centre le texte.
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.
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.
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.
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.
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).
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.
ul ol li code
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.
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.
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.
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,
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".
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
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.
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.
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.
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.
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
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.
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.
Le quotidien du blogueur
83
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.
84
Figure3.37
WordPress ct utilisateur
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.
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.
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.
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.
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.
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.
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).
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.
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.
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.
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.
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.
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).
96
Figure3.60
WordPress ct utilisateur
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.
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.
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
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.
Le quotidien du blogueur
Figure3.63
Liste de liens WordPress.
99
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).
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.
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.
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.
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.
104
Figure3.69
WordPress ct utilisateur
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.
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.
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).
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.
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.
Le quotidien du blogueur
109
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.
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.
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.
Options gnrales
Titre et description du blog
Figure3.79
Titre et description du blog.
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.
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
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.
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).
116
Figure3.87
WordPress ct utilisateur
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.
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
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
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
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.
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).
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.
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.
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.
Le quotidien du blogueur
123
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
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.
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
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.
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.
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.
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.
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
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/.
Le quotidien du blogueur
Figure 3.100
Mettre en place la cl secrte dans wp-config.
131
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
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 .
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.
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.
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
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 quotidien du blogueur
137
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.
141
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.
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.
143
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).
144
Figure4.02
WordPress ct utilisateur
Figure 4.03
Activer le thme choisi.
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.
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.
147
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).
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.
149
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).
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.
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.
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.
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.
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.
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.
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.
156
Figure4.17
WordPress ct utilisateur
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.
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.
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.
158
Figure4.21
WordPress ct utilisateur
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.
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
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
162
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.
163
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.
164
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:
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.
166
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()
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.
167
168
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.
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.
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.
170
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.
171
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 »'); ?> </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"); ?>
172
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 »');?>
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.
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.
176
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.
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 .
178
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.
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 .
180
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.
181
182
183
184
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).
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:
186
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.
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() ) : ?> » <?php _e('Not Found'); ?> <?php elseif ( is_home() ) : ?> » <?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'); ?>" />
188
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'); ?>
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>
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.
190
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.
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:
192
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(); ?>
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.
194
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.
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
196
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 : ?>
197
<h2 class="center">Introuvable</h2> <p class="center">Désolé, 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égorie : <?php the_category(', '); ?> | <?php comments_popup_link('Pas de commentaires', '1 Commentaire', '% Commentaires'); ?> <?php edit_post_link('Editer', ' | ', ''); ?> </p>
198
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().
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.
200
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(); ?>
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>
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
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>
202
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).
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).
204
Figure6.26
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).
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.
206
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.
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.
208
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() ) : ?>
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
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.
210
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.
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 © <?php print(date(Y)); ?> <?php bloginfo('name'); ?> <br /> Blog propuls par <a href="http://wordpress.org/">WordPress</a> et conç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.
212
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.
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']))
214
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 “<?php the_title();?> ”</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é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 “<?php the_title(); ?>”</h3>
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é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 à %s' ); ?></h3>
216
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 être <a href="<?php echo get_option('siteurl'); ?>/wplogin.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">connecté</a> pour publier un commentaire.</p> <?php else : ?>
217
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform"> <?php if ( $user_ID ) : ?> <p>Connecté 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éconnecter »</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é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>
218
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é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(); ?>
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.
220
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 “<?php the_title(); ?>”</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(); ?>
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é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>
222
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é</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é 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éconnecter »</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>
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.
224
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
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égorie: <?php the_category(', '); ?> | <?php comments_popup_link('Pas de commentaires', '1 Commentaire', '% Commentaires'); ?> <?php edit_post_link('Editer', ' | ', ''); ?> </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.
226
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).
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('« Articles plus anciens') ?></div> <div class="alignright"><?php previous_posts_link('Articles plus rcents »') ?></div> </div>
228
Figure6.42
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.
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.
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
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.
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.
231
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'); ?>
232
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).
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.
234
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();?>
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:
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.
236
Figure6.52
Affichage de vignette 1.
Figure6.53
Affichage de vignette 2.
Figure6.54
Affichage de vignette 3.
237
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.
238
Figure6.55
Fichier links.php.
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.
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.
242
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.
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).
244
Figure7.03
Cette largeur de 960pixels est choisie de faon arbitraire. Vous pouvez trs bien opter pour une autre largeur, en fonction de vos besoins.
Insrez le code suivant pour votre colonne latrale, en reprenant les informations donnes ci-dessus:
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;
246
}
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.
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.
248
Figure7.08
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).
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;
250
Figure7.11
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);
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;
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; }
252
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.
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
254
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).
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; }
256
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.
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>'); ?>
258
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).
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
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.
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.
260
Figure7.16
Mise en forme du pied de page.
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;
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;
262
}
.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;
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.
264
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:
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.
266
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; }
267
<h2 class="center">Introuvable</h2> <p class="center">Désolé, 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.
268
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.
269
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
270
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>
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!
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
Prsentation de l'extension
Figure8.01
Les paroles de "Hello Dolly" dans WordPress.
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.
276
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.
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
278
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.
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/.
280
Figure9.02
phpDoc: la documentation du code source de WordPress au format web.
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.
282
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);
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.
284
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.
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.
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');
286
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...
10
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.
290
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.
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.
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.
292
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.
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().
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'; }
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');
294
Fonctions de base
WordPress propose quatre fonctions pour grer les options. Via ces fonctions, nous pouvons ajouter, mettre jour, effacer et rcuprer des options.
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.
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.
296
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.
297
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.
298
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.
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.
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.
300
Classes PHP
WordPress possde trois classes pour grer les rles, permissions et utilisateurs. Vous les retrouvez ci-dessous.
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.
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.
302
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.
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.
304
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
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).
306
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.
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?
308
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.
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.
310
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"]
312
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().
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; }
314
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.
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]);
316
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]);
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.
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).
318
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="">
319
... <p class="submit"> <?php wp_nonce_field('options_monplugin'); ?> <input type="submit" name="update_options_monplugin" value="Enregistrer les modifications" /> </p> </form>
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
320
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.
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; ?>
322
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
323
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.
324
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.
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.
326
// 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' )"); }
// 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.
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.
328
OBJECT (par dfaut) Les rsultats se prsenteront sous la forme dun tableau dobjets.
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.
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.
330
Figure10.10
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.
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.
332
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.
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.
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.
334
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.
335
336
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!
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;
338
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.
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;
340
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.
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.
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.
342
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).
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.
344
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.
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.
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.
346
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.
347
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.
348
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.
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 —. 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.
350
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.
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".
352
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:
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.
354
355
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.
356
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.
357
358
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().
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.
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.
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,
360
}
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' ); }
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.
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.
11
Introduction
364
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.
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();
366
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.
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.
368
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:'),
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".
370
Figure 11.04
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.
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' ) ); ?>
371
372
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.
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.
12
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?
376
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...
377
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.
378
Toute lextension est contenue dans le dossier simple-classifieds. Ce dernier possde deux dossiers et un fichier PHP.
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.
380
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'); }
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!
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
382
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".
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 ) );
384
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
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.
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...
386
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:
387
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].
388
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>
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.
390
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.
391
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:
392
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.
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>';
394
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.
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:
396
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.
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().
398
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!
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
13
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.
402
Quels usages?
On recense principalement deux usages de WordPress en mode multisite: plate-forme de sites publique, rseaux thmatiques de sites et gros blogueurs.
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.
404
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.
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...
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!
14
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.
408
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.
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.
410
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 restez conscient que vous ne pourrez pas revenir en arrire sans une rinstallation complte. Notez que chaque option implique des consquences techniques : les sous-domaines requirent un wildcard dans les champs DNS et la configuration Apache, tandis que les sous-dossiers ncessitent la prsence de lextension Apache mod_rewrite (dj ncessaire pour avoir de beaux permaliens). Viennent ensuite les dtails du rseau: Adresse du serveur. En fait ladresse web de votre rseau, tout simplement. Vous navez pas vraiment le choix, cest celui o est install WordPress. Nom du rseau. Cest le nom de baptme de votre rseau, qui sera prsent sur toutes les correspondances aux membres du rseau. De fait, soyez concis. Adresse de contact de ladministrateur. Les courriers envoys lquipe du rseau seront envoys cette adresse. Nindiquez donc pas forcment votre adresse personnelle... Tous les champs sont remplis votre convenance? Validez le formulaire! Si la configuration est incorrecte message derreur ou page blanche , le plus simple est de supprimer le fichier wp-config.php ainsi que les tables MySQL du site et de reprendre linstallation zro. Si lactivation sest bien droule, la page Rseau prsente dsormais une tout autre interface (voir Figure14.04), prsentant les dernires tapes de lactivation de votre rseau. Il vous faut les suivre scrupuleusement une une commencer par une sauvegarde de vos fichiers wp-config.php et .htaccess (si ce dernier existe).
411
Sans recopier le contenu de cette page, ces trois dernires actions sont les suivantes: Crer un dossier /blogs.dir dans le dossier /wp-content de votre installation de WordPress. Cest lendroit o sont stockes les donnes des sites crs sur le rseau. Ajouter quelques lignes dans votre fichier wp-config.php. Les premires valident la mise en place de votre rseau, les secondes amliorent la scurit de votre installation. Vous pouvez dsormais effacer la ligne define('WP_ALLOW_MULTISITE', true);. Ajouter quelques lignes dans votre fichier .htaccess (quil faudra crer le cas chant). Cela ajoute les rgles de redirection ncessaires au bon fonctionnement des adresses web de votre rseau. Ne modifiez pas ces chanes, et noubliez pas une ligne, car chaque ligne compte. Si vous effacez par mgarde le contenu de wp-config.php ou de votre .htaccess, cette page rseau conservera toujours ces informations. Les lignes ajoutes wp-config.php pour amliorer la scurit de votre rseau vous obligent crer un nouveau cookie de connexion: reconnectez-vous linterface dadministration, avec les mmes identifiant et mot de passe quavant. En vous reconnectant, vous noterez un nouvel lment du menu de WordPress : "Super Admin". Cest dici que vous allez grer votre rseau. Flicitations: le super admin, cest vous!
412
Figure 14.04
413
Pas de www?
Par dfaut, WordPress supprime toujours la chane www depuis les adresses des sites utilisant votre site. Il sera toujours possible de visiter le site WordPress avec le prfixe www (par exemple www.exemple.fr), mais aucun lien contenu dans le site naura le prfixe www. Ils seront tous sous la forme http://exemple.fr. Ce choix sexplique tout simplement: en fait, les plates-formes de sites prfrent ne pas utiliser le prfixe www pour disposer dune adresse plus courte et plus simple. Cela vite les adresses du type www.site1.exemple.fr. Si vous voulez obtenir davantage dinformations sur les raisons pour lesquelles "www." nest plus utile, vous pouvez consulter le site no-www.org (en anglais).
Le fichier de configuration
La constante WPLANG nest pas trs utile pour le mode multisite. En effet, la langue active provient soit de la configuration de WordPress, soit de celle du blog. Outre les constantes que loutil de mise en place du rseau vous a demand de placer dans ce fichier, deux constantes propres au mode multisite sont galement disponibles en cas de besoin (voir Tableau14.01). Tableau14.01: Constantes de configuration spcifiques WordPress multisite
Nom de la constante
SUNRISE
Description Si cette constante est dfinie, WordPress tentera alors de charger le fichier wp-content/ sunrise.php. L'utilit principale de cette constante est de remplacer la logique du fichier wp-settings.php par une version personnalise permettant par exemple le mapping de domaine. Par dfaut, lorsquon se trompe dans ladresse dun site de rseau WordPress, ce dernier ne redirige pas vers la page de cration de blogs. Si on utilise WordPress multisite pour un rseau de blogs, ce nest pas trs pratique. Il suffit de dfinir une adresse dans cette constante pour changer la destination de la redirection.
NOBLOGREDIRECT
Tableau de bord
Une fois que vous tes connect WordPress en mode multisite, vous arrivez directement sur le tableau de bord du blog numro1.
414
Figure14.05
Le menu Super Admin, spcifique au mode multisite de WordPress.
Pour rsumer, il y a deux types dadministrateurs: administrateur du site donnant les mmes possibilits que le rle WordPress; administrateur du site permettant de paramtrer le mode multisite. Ce menu contient six pages que nous allons dtailler un peu plus loin dans ce chapitre. Le dernier changement par rapport WordPress est lajout dune notion de quota pour chaque site. Ainsi dans le cadre Aujourdhui, nous retrouvons lespace disque disponible pour le site et lespace disque utilis ainsi que son pourcentage. Le mode multisite de Word Press permet en effet de grer des quotas pour chaque site. Une valeur par dfaut est dfinie pour la totalit de la plate-forme, mais il est possible de fixer cette valeur indpendamment pour chaque site. Nous allons maintenant dcortiquer le menu Super Admin.
Par dfaut, WordPress vous indiquera en tte de page une notification: "Attention! Le thme actuel accepte les images mises en avant (via miniatures). Vous devez activer l'envoi d'images depuis la page d'options pour que cela fonctionne." La page d'options tant bien longue, vous trouverez la case cocher en question tout en bas, dans la section Rglages d'envoi des fichiers. Cochez la case Images et la notification disparatra.
415
Super Admin
La page daccueil du Super Admin est minimaliste (voir Figure14.06). Elle affiche le nombre total de sites et dutilisateurs prsents sur votre installation, ainsi que deux formulaires pour chercher un utilisateur ou un site. Les deux liens sont des raccourcis vers dautres crans du mode multisite...
Figure14.06
Page d'accueil du mode multisite.
Les rsultats peuvent tre tris daprs diffrents critres; pour cela il suffit de cliquer sur lintitul de la colonne du tableau de rsultats. Pour inverser lordre de tri, il faut simplement cliquer une deuxime fois sur lintitul de la colonne.
416
417
Le deuxime bloc de la colonne de gauche affiche pour sa part la liste entire des options du site. Ce sont les options de la configuration du site WordPress, celles quon retrouve dans longlet Rglages. Elles comprennent gnralement lensemble des paramtrages des extensions. Il est dconseill dy toucher sans savoir exactement ce que vous faites... La colonne de droite propose trois blocs. Le premier permet de grer individuellement les utilisateurs du site. Le deuxime permet de grer lajout dutilisateurs sur le site, ainsi que lattribution des rles WordPress (il faut que lutilisateur existe dj pour que cela fonctionne). Le troisime bloc concerne le quota du site; il est ainsi possible de dfinir le quota pour un site en particulier.
Vous disposez ici des mmes possibilits de tri des rsultats, cest le mme mode de fonctionnement que la page Sites vue ci-dessus. Vous avez ainsi la possibilit dappliquer une action sur plusieurs utilisateurs; vous pouvez alors supprimer par lots, marquer plusieurs utilisateurs comme indsirables ou lgitimes, en un seul clic! Enfin, un peu comme sur la page Sites, vous avez un formulaire dajout dutilisateurs. Il suffit dentrer lidentifiant et ladresse e-mail, un mot de passe sera automatiquement envoy ladresse de contact spcifie.
418
Si vous souhaitez mettre disposition un thme uniquement pour un site en particulier, il vous suffit de laisser le thme sur ltat non actif. Rectifiez ensuite les dtails du site via laction Modifier de la page Sites. Vous avez ainsi la possibilit dactiver manuellement les thmes inactifs.
419
Les restrictions, avec les noms de sites bannis, les domaines dadresses e-mail autoriss et interdits. Les options lies au quota des sites, la quantit despace disque alloue par site, les types de fichiers accepts, la taille maximale des fichiers envoys. Le flux RSS qui saffichera dans le tableau de bord de chaque site. Cest trs pratique pour communiquer avec vos utilisateurs sur lactualit du service par exemple. Les types de fichiers autoriss en envoi.
Figure14.10
La page de configuration du mode multisite.
Vous pouvez galement dfinir la liste des administrateurs du site et la langue par dfaut des sites crs. Enfin, vous avez la possibilit dactiver ou non la page dextensions de WordPress dans linterface dadministration des sites de WordPress.
420
Rglages Gnral
Les deux champs Adresse du site et Adresse du WordPress disparaissent de la page; ils ne sont plus utiles tant donn que ladresse du site est dfinie la cration de celui-ci. Un slecteur permet de choisir parmi les langues disponibles. Sur la version franaise, vous retrouvez donc deux langues: anglais et franais.
Tout cela est possible depuis cette page. Le processus deffacement se droule en deux temps: dans un premier temps, vous devez cocher la case assurant que vous tes conscient quil sera impossible de restaurer le site une fois quil sera supprim, puis dans un deuxime temps vous devez valider le formulaire. WordPress envoie alors un e-mail de confirmation, qui contient le lien validant la suppression. Une fois le site supprim, mme ladministrateur nest plus en mesure de le restaurer: les donnes de la base sont effaces ainsi que les fichiers du site.
15
422
423
Enfin, WordPress MU contient un dossier mu-plugins en plus du classique plugin. Les diffrences entre les deux seront abordes ultrieurement dans ce chapitre.
Architecture
La question de larchitecture de la base de donnes a souvent donn lieu des dbats enflamms dans la blogosphre lpoque de WordPress MU. En effet, le mode multisite a la particularit de crer pour chaque site neuf tables dans la base de donnes MySQL. Faites le calcul: vous obtenez 9000tables pour un rseau de 1000 sites. Pourquoi alors ne pas avoir attribu lID du blog pour chaque type de contenu? Nous nous serions retrouvs avec neuf tables pour 1000sites. Continuons dans cette hypothse et disons que chaque blog possde en moyenne 100articles. La table Articles compterait un total de 100000 articles. Vertigineux non?
Le cas Lyceum
Ce choix monolithique de tables, cest le chemin qua privilgi le crateur du projet Lyceum. Un fork bas sur WordPress MU de lpoque, gr par Fred Stutzman et John Joseph Bachir, privilgiant le nombre de tables au nombre dentres par table. Quoi quon en dise, ce choix darchitecture est mauvais, cela pour plusieurs raisons.
424
425
Contient les informations principales de chaque site: l'ID, l'adresse du site, la date de cration et de dernire mise jour et le statut (public, spam, archive). Table dprcie. Contient l'historique des inscriptions sur le rseau, aussi bien les sites que les utilisateurs. Elle conserve les donnes vie, mme aprs l'effacement du blog. Table de donnes temporaires qui stocke les inscriptions de sites non valids. L'inscription publique se passe en deux temps avec une validation. Contient la liste de site renfermant des informations: ID, domaine et chemin (path). Cette table porte mal son nom depuis WordPress2.3; elle comprend l'intgralit des termes utiliss dans les sites. Cette table est mise disposition des extensions; elle ne propose aucune administration par dfaut. Contient le paramtrage du rseau, ce qu'on retrouve dans les options du menu Super Admin. Cette table existe par dfaut, mais le mode multisite ajoute deux champs pour chaque utilisateur.
wp_sitemeta wp_users
wp-signup.php
wp-includes/ms-settings. Vritable cur du mode multisite, ce fichier dcortique l'adresse de votre navigateur pour dterminer le site et le site sur lesquels vous naviguez. Il charge php ainsi la bonne configuration de la base de donnes du site que vous visitez. wp-admin/ms-admin.php wp-admin/ms-edit.php Interface d'administration. Tableau de bord du mode multisite. C'est ici qu'ont lieu toutes les actions des pages du mode multisite. C'est une page dcortiquer dans le cadre d'un dveloppement des extensions interagissant avec l'administration du rseau, pour bien comprendre leur fonctionnement. Interface d'administration. Options du rseau. Interface d'administration. Liste des sites. Interface d'administration. Liste des thmes actifs ou non. Interface d'administration. Mise jour de tous les sites.
426
wp-admin/includes/ms.php Ce fichier contient les fonctions PHP relatives au mode multisite. Elles ne sont utilises et disponibles que depuis l'interface d'administration. wp-admin/includes/msdeprecated.php Ce fichier sert de cimetire aux fonctions obsoltes de WordPress MU, en cas de besoin. Elles seront terme dfinitivement enleves.
wp-includes/ms-blogs.php Contient les fonctions permettant au site d'interagir avec ses tables et ses donnes. wp-includes/ms-defaultconstants.php wp-includes/ms-defaultfilters.php wp-includes/msdeprecated.php wp-includes/ms-files.php Dfinit les constantes et variables globales du mode multisite. Elles peuvent tre remplaces par les valeurs dfinies dans wp-config.php. Dfinit la plupart des filtres et crochets relatifs au mode multisite. Un autre cimetire fonctions obsoltes... Autorise les fichiers envoys depuis le gestionnaire de mdias de WordPress. Prenons l'exemple de l'envoi d'une image et son insertion dans un article. Contrairement WordPress, qui va mettre l'adresse dfinitive de l'image (http:// monsite.fr/wp-content /uploads/monimage.jpg), WordPress MU va construire une adresse intermdiaire ne permettant pas de connatre l'arborescence de l'image. Cela donnera une adresse du type http://wp-mu.fr/files /monimage.jpg. Cette adresse est rewrite directement par le fichier .htaccess de WordPress. De ce fait, on ne connat pas l'emplacement exact de l'image, ce qui est pratique lorsque le stockage des fichiers n'est pas fait sur le serveur web.
wp-includes/ms-functions. Ce fichier contient la plupart des fonctions ddies au mode multisite. Ce fichier est lanc durant l'initialisation et les fonctions sont disponibles aussi bien ct php utilisateur que ct administration. wp-includes/ms-load.php Les fonctions ncessaires au lancement du mode multisite.
Un effort de documentation a t fait sur le Codex (http://codex.wordpress.org/WPMU_ Functions), en ce qui concerne le fichier ms-functions.php (auparavant wpmu-functions. php), pour dtailler lusage et lutilit de chaque fonction (uniquement celles qui sont spcifiques WordPress MU). La mise jour pour la version3.0 se fait attendre...
Sunrise, qusaco?
Nous avons vu prcdemment que nous pouvions dfinir une constante SUNRISE dans le fichier de configuration. Cette constante, si elle est dfinie, permet de charger le fichier wpcontent/sunrise.php. Ce fichier est lanc juste avant le fichier ms-settings.php, ce qui permet de remplacer la logique par dfaut du mode multisite par la vtre. Par exemple, il est possible de charger un fichier sunrise.php permettant le mapping de domaine. Vous pouvez galement utiliser sunrise.php dans le cadre dune rpartition des blogs sur diffrents serveurs MySQL,etc.
427
En rgle gnrale, il convient de placer les extensions indispensables la plate-forme dans le dossier mu-plugins, alors que les extensions optionnelles seront stockes dans le dossier plugins pour permettre lutilisateur de lancer ou non les plugins dont il a besoin.
La variable $table_prefix
La premire erreur consiste utiliser la variable global $table_prefix. Cette dernire est dprcie depuis la version2.1 de WordPress, mais cela nempche pas certains auteurs dextensions de lemployer, ce qui est dconseill.
428
La premire ligne ne fonctionnera pas dans les mu-plugins, alors que la deuxime ligne fonctionnera coup sr, quel que soit le dossier du plugin. Enfin, le choix des plugins pour un rseau WordPress fait entrer en jeu plus de critres quun simple site WordPress. Laspect performances est beaucoup plus important dans le mode multisite, pour permettre une monte en charge. Ce nest cependant pas le seul critre; il faut savoir que toutes les extensions WordPress monosite ne sont pas forcment intressantes pour un rseau WordPress. En fait, tout dpend de lusage du rseau. Dans le cadre dun rseau de sites personnels, il ny a pas de grandes diffrences avec une utilisation normale. Dans le cadre dune plateforme grand public, les critres de facilit dutilisation, dinternationalisation de lextension et de rponses un besoin de la communaut entrent en jeu.
429
Pour les fonctionnalits propres au mode multisite, comme les derniers articles de la plateforme, les derniers sites, ou le lien de cration de sites, il y avait un thme Home livr avec WordPress MU. Il contenait les fonctions utiliser et tait un trs bon exemple pour intgrer des fonctionnalits MU dans un thme. Malheureusement, point dquivalent dans Twenty Ten, le nouveau thme par dfaut de Word Press. Il vous faudra donc mettre la main la pte et raliser cette page vousmme. Voici un exemple que nous vous proposons, inspir de ce thme Home si utile (voir Figure15.01).
Figure15.01
Une page par dfaut pour votre rseau.
Vous avez certainement lu la partie de ce livre ddie la cration de thme et connaissez donc la hirarchie des modles de WordPress. Si vous ne lavez pas lue, faites-le imprati vement avant de modifier un thme sans vraiment savoir ce que vous faites... Le fichier index.php de Twenty Ten est donc celui qui affiche les derniers articles du site principal. Nous voulons afficher une page daccueil, donc, pour supplanter index.php, nous allons crer un fichier home.php. Mais nous voulons galement que notre fichier ne disparaisse pas la prochaine mise jour, ce qui sera le cas si nous le mettons directement dans le dossier de Twenty Ten. La solution consiste crer un thme enfant bas sur ce thme. Nous allons donc ici crer le thme "Twenty Ten with Home", qui ne fera quajouter la page home.php aux fichiers existants de Twenty Ten. Comme vous le savez srement, nous devons alors crer un nouveau dossier pour hberger nos fichiers: ce sera /wp-content/ themes/twentyten-home.
430
Enfin, crons le seul fichier qui diffrencie ce thme enfant de son original: home.php. Voici le code complet du fichier:
<?php get_header(); ?> <div class="one-column"> <div id="content"> <h2>WordPress Multisite</h2> <p>Ce rseau de sites est propuls par <a href="http://wordpress. org/">WordPress</a>.</p> <p>Vos options : <ul> <?php wp_register(); ?> <li> <?php wp_loginout(); ?></li> <li> <a href="wp-signup.php">Crer un nouveau site</a></li> <li> Modifier ce fichier (<code><?php echo __FILE__; ?></code>) avec votre diteur de texte prfr, et personnalisez cet cran !</li> </ul> </p> <h3>Les dernires nouveauts</h3> <ul> <strong>Annonces du rseau</strong> <?php query_posts( 'showposts=7' ); if ( have_posts() ) : ?><?php while ( have_posts() ) : the_post(); ?> <li> <a href="<?php the_permalink(); ?>" rel="bookmark" title="Lien permanent vers <?php the_title(); ?>"><?php the_title();?> </a> </li> <?php endwhile; ?><?php endif; ?> </ul> <?php $blogs = get_last_updated(); if ( is_array( $blogs ) ) { ?> <ul> <strong>Derniers sites crs/mis jour</strong> <?php foreach ( $blogs as $details ) { ?> <li>
431
<a href="http://<?php echo $details[ 'domain' ] . $details[ 'path' ] ?>"><?php echo get_blog_option( $details[ 'blog_id' ], 'blogname' ); ?></a> </li><?php } ?> </ul> <?php } ?> </div> </div>
Une fois les fichiers en place dans le dossier /twentyten-home, activez ce thme pour lensemble du rseau dans la page Super Admin> Thmes. Puis activez-le pour le site principal via la page Apparence> Thmes. Rechargez laccueil de votre rseau, et vous voil avec une premire page daccueil. vous de la modifier selon vos besoins.
Partie
Les autres projets de la WordPress Foundation
16. BuddyPress la face sociale de WordPress..................................... 435 17. bbPress le forum pens "WordPress"............................................ 443
16
Prsentation
Figure16.01
Le thme par dfaut de BuddyPress.
Pour cela, BuddyPress ajoute des fonctionnalits propres aux rseaux sociaux, telles quun profil utilisateur complet, une messagerie et une gestion de groupes, tout en conservant les fonctionnalits propres WordPress, commencer par la cration de blogs. BuddyPress fait passer les utilisateurs au premier plan au dtriment des blogs, ces derniers devenant une fonctionnalit parmi les autres. Beaucoup de gens considrent BuddyPress comme lavenir de WordPress.com et dans une moindre mesure de la version multisite de WordPress!
436
Historique
Le dveloppeur de BuddyPress sappelle Andy Peatling. Il a dvelopp en 2007 une premire version de BuddyPress pour lorganisation ChickSpeak, destine aux lycennes amricaines. lorigine, ChickSpeak voulait simplement un rseau de blogs, donc une installation personnalise de WordPressMU. Lquipe a ensuite demand de plus en plus de fonctionnalits communautaires Andy, qui a prfr rester sur la base WPMU+bbPress plutt que recrer la roue. Aprs avoir annonc cet exploit technique sur son blog, Andy a vite pris conscience de lengouement de la communaut pour cette orientation de WordPress MU. Il a dcid alors de lancer une version gnrique et open-source de ChickSpeak, quil baptise BuddyPress. Andy a rejoint la socit Automattic en 2008 pour travailler plein-temps sur le logiciel BuddyPress et plus globalement sur laspect social de WordPress.com. BuddyPress fait aujourdhui partie des projets GPL quAutomattic a reverss la WordPress Fundation, et lquipe de dveloppement a de grands projets notamment le fait de passer lintgralit de WordPress.org sous BuddyPress. De fait, son dveloppement est trs actif. Pour ce faire, lquipe de dveloppeurs sest toffe, avec larrive de John James Jacoby et de Marshall Sorenson.
437
Chacun des composants est indpendant des autres, ce qui simplifie le dveloppement et amliore les performances du logiciel. Vous ninstallez ainsi que les fonctionnalits qui vous intressent! La page Paramtres du menu BuddyPress vous permet dactiver/dsactiver six de ces composants. Le thme sactive sur la page des thmes, et le composant Core ne peut pas tre dsactiv.
La communaut francophone
Longtemps laisse de ct, linternationalisation de BuddyPress na t ralise qu partir de ses premires versions stables, tandis que la version 1.0 approchait. Celle-ci enfin en place, la traduction a t prise en charge par une nouvelle communaut, BuddyPress France (http://bp-fr.net/), mene par Gilbert Cattoire et Daniel Halstenbach, ainsi que Myriam Faulkner. Cette quipe propose donc une traduction ainsi quun site communautaire servant tant de point de rencontre pour les utilisateurs cherchant du support BuddyPress que de site de dmonstration de loutil: en effet, tout comme le site officiel de BuddyPress, le site de BPFR est entirement conu avec BuddyPress.
Fonctionnalits
Les profils tendus
Ce module permet ladministrateur du site de crer les champs contenus dans le profil. Autrement dit, le profil peut contenir tout type dinformations pour mieux rpondre aux besoins. Par exemple, pour le rseau social dun club de foot, on pourra ajouter un champ comme "poste du joueur sur le terrain". Les formulaires de profil peuvent tre classs dans des groupes pour amliorer la lisibilit. Par dfaut, BuddyPress cre le groupe "Base", comprenant le champ Name (en ralit, lidentifiant de lutilisateur sur le rseau). Vous pouvez (et mme devez) modifier les noms de ce premier groupe et de ce premier champ dans la page Options gnrales. Vous avez tout loisir dajouter dautres informations utiles votre rseau: prnom, nom, date de naissance, ville. Vous pouvez galement crer autant de groupes que ncessaire en plus du groupe Base: Parcours professionnel, Hobbies, Films prfrs...
438
Blog personnel
Autre fonctionnalit pas trs originale, BuddyPress permet la cration de blogs pour les utilisateurs (voir Figure16.02). Cette fonctionnalit est fournie directement par WordPress, bien videmment si WordPress est en mode multisite.
Figure16.02
Les blogs intgrs dans BuddyPress.
Les adresses des blogs diffrent un peu de celles de WordPress. Vous disposez des deux formats suivants: http://monsite.fr/nomdelutilisateur/blog/; http://nomdelutilisateur.monsite.fr/blog/. BuddyPress rajoute le mot-clef "blog" car il privilgie les profils utilisateur au blog; vous pouvez cependant modifier le thme pour inverser la situation.
Messagerie prive
Cette fonctionnalit de messagerie e-mail est interne au site (voir Figure 16.03). Les membres peuvent crire des messages des contacts de leur liste damis, avec bien sr la possibilit de rpondre au message. Chaque membre dispose de sa propre messagerie: bote de rception, bote denvoi et bote dalertes. Le membre est averti pour chaque nouveau message avec un compteur sur longlet Messagerie, ainsi que par des alertes e-mail. La messagerie peut utiliser lditeur visuel TinyMCE inclus dans WordPress pour faciliter la rdaction des messages.
439
La liste d'amis
Les membres du rseau social BuddyPress peuvent se connecter entre eux (voir Figure16.04). Pour cela, chaque membre peut solliciter la mise en relation avec un autre membre, ce dernier devant accepter la demande pour que la connexion entre les deux soit tablie. Chaque membre possde sa liste publique damis. Depuis cette liste, il est possible de naviguer sur les profils des autres membres. Les profils ne subissent aucune restriction. Toutes les informations contenues dans le profil sont visibles par les autres membres. Cest la mme chose pour les blogs utilisateur, bien que vous disposiez de la fonctionnalit Article priv ou mot de passe. BuddyPress propose la recherche de membres par identifiant, e-mail et nom complet.
Figure16.04
La gestion des amis dans BuddyPress.
440
Les groupes
Un groupe dans BuddyPress est un espace de regroupement de membres, darticles de blogs, de photos et de tout contenu propos dans WordPress. Tous les membres peuvent crer un groupe dans BuddyPress (voir Figure16.05). Le membre devient alors ladministrateur de ce groupe, ce qui signifie que cest lui qui dcide, approuve ou rejette les candidatures dautres utilisateurs voulant rejoindre le groupe. Mais il ne se rsume pas seulement cela : cest galement lui qui modre le contenu du groupe. Il peut approuver, refuser, et marquer comme spam le contenu propos par les membres du groupe.
Figure16.05
Les groupes dans BuddyPress.
Chaque membre de BuddyPress peut crire des articles sur son blog et dispose de son propre profil. Au lieu de crer un contenu additionnel directement dans les groupes, les membres peuvent taguer leur contenu avec un tag unique (tag gnr lors de la cration du groupe). Lorsque le contenu est class avec le tag du groupe, il est mis dans la liste dattente de validation de ladministrateur du groupe. Une fois quil est accept, le contenu est visible depuis la page du groupe. Des liens rapides seront probablement ajouts pour faciliter linsertion de contenu dans le blog, et simplifier la vie des utilisateurs. BuddyPress peut intgrer le forum bbPress pour chaque groupe, afin de permettre des discussions au sein du groupe. Leur installation se fait littralement en un seul clic. Les dveloppeurs peuvent facilement tendre les possibilits des groupes ou en ajouter de toutes nouvelles, grce une API dextension.
Le flux d'activits
Cette fonctionnalit donne la possibilit aux amis dun membre de publier un petit message sur son profil (voir Figure16.06), qui se prsenterait sous la forme dun texte court et qui pourrait inclure une image et quelques balises HTML de base. Dans les faits, cest lun des composants essentiels de tout rseau social, permettant de maintenir un contact entre les utilisateurs. Lditeur visuel TinyMCE peut tre utilis pour permettre une mise en page rapide.
441
Cette fonctionnalit est semblable celles du thme P2 pour WordPress (http://p2theme. com/), autrement dit un usage proche du mur que lon trouve dans le rseau Facebook. Chaque nouvelle activit dispose de son propre permalien, et les rponses peuvent tre affiches de manire hirarchique afin de simplifier le suivi des conversations entre les commentateurs dune activit. Depuis la version 1.1, le flux dactivits comprend galement les commentaires des blogs, et ceux des forums.
Le thme de BuddyPress
La premire version de BuddyPress ncessitait deux thmes: un tout fait standard dans le monde WordPress, affichant la page daccueil et les blogs du rseau, et le second ddi laffichage des pages spcifiques BuddyPress.
442
L'avenir
BuddyPress est actuellement en dveloppement intensif. La version a t publie le 30 janvier2009, aprs de nombreux mois dattente (la premire bta datant du 15dcembre, la premire RC, du 11fvrier). Alors que nous rdigeons ces lignes, la dernire version en date est la 1.2.5.2, qui rsout les problmes de compatibilit entre BP1.2 et WordPress3.0... Lavenir de BuddyPress semble prometteur. Beaucoup de socits sont trs intresses par les possibilits du logiciel, aussi bien dans le monde de lentreprise que dans celui de lducation ou encore pour les associations!
17
Prsentation
Figure17.01
bbPress: une interface diffrente
444
Historique
Avant Nol 2004, Matt et son quipe utilisaient le logiciel miniBB pour les forums de support de WordPress.org. Ils avaient vite remarqu les limites de ce logiciel et que le code ntait pas des plus optimiss pour un usage intensif. Chose qui peut paratre aberrante, puisqu lpoque miniBB comptait parmi les logiciels de forum les plus lgers et les plus rapides, cest dire Aprs un changement dhbergement et une mise jour de PHP, des problmes taient survenus sur les forums, et il tait devenu alors vident quil y avait quelque chose faire. Au lendemain de Nol 2004, Matt a dbut le dveloppement dun nouveau logiciel de forum en partant de rien, et deux jours plus tard la premire version de bbPress tait mise en production sur WordPress.org. Depuis, Michael Adams a rejoint lquipe et a repris les rennes du dveloppement en tant que chef du projet, avec la participation active de Chris Hajer, Sam Bauers et Pete Mall. Ainsi, bbPress continue de crotre paralllement au dveloppement de la communaut WordPress.org. Lvolution de bbPress restait cependant lgre pendant lensemble de lanne 2009, ce qua admis Matt Mullenweg durant son discours annuel "The State of the Word", o il a promis que le dveloppement de bbPress devrait reprendre de plus belle en 2010, potentiellement sous la forme dune extension WordPress... Le nouveau design du site officiel est une premire indication de cette reprise. Bloque depuis de nombreux mois sur la version 1.0.2, lquipe de dveloppement a annonc la sortie prochaine de la version1.1. Celle-ci devrait voir les modifications suivantes: abonnement par e-mail; possibilit de publier sans devoir tre connect; meilleure gestion des articles et des sujets; meilleures recherche et statistiques; nombreuses corrections de bugs. La version 1.1 devrait tre sortie quand vous lirez ces lignes...
Fonctionnalits
Lobjectif ici nest pas de lister la totalit des fonctionnalits de bbPress mais plutt de p rsenter celles qui apportent une relle plus-value au logiciel.
Rapide et lger
Le code source de bbPress est pens et dvelopp de faon obtenir de trs bonnes performances tout en ayant une charge serveur correcte.
445
Interface simple
Lun des principaux buts de ce projet est de crer quelque chose de simple et dintuitif utiliser. Le rve des dveloppeurs, cest de faire oublier lutilisateur quil utilise un logiciel. Dailleurs, les utilisateurs de WordPress ne seront pas dpayss, bbPress se calque sur son interface dadministration (voir Figure 17.02) ; seuls les intituls, icnes et couleurs des menus changent!
Figure17.02
bbPress et WordPress: quelques airs de ressemblance.
Thmes personnalisable
Tout comme WordPress, bbPress propose un mcanisme de modles pour personnaliser la disposition des lments. Il est un peu plus compliqu que WordPress, mais sur le concept il utilise la mme notion de fonctions PHP dans le code.
Hautement extensible
L aussi, bbPress reprend un des concepts qui font le succs de WordPress: la possibilit de personnaliser le comportement du logiciel via un systme dextensions trs puissant.
446
Flux RSS
Vous voulez vous abonner un sujet? un forum? Aux messages dun utilisateur? Dans bbPress, tout est flux RSS! Par RSS on sous-entend la syndication, plus gnralement via les formats XML, RSS, RSS2 et Atom.
La taxinomie
bbPress profite des avances de WordPress pour le mcanisme de taxinomie. Ainsi il est facile de crer sa propre taxinomie et permettre des classements diffrents par rapport aux classiques forums et sous-forums
bbPress en franais
Depuis 2004, la traduction franaise de bbPress a rgulirement chang de main. Depuis mars 2008, ce travail de traduction est men officiellement sous la conduite dAmaury Balmer. Un site ddi bbPress en franais, http://bbpress.fr (voir Figure17.03), a t lanc la mme date; il propose un blog sur lactualit du logiciel, des traductions, de la documen tation et un forum dentraide.
Figure17.03
bbPress en franais.
447
Intgration WordPress
Base d'utilisateurs commune
La premire forme dintgration entre bbPress et WordPress concerne les bases dutilisateurs. Il est possible de configurer bbPress afin quil utilise la base utilisateur, soit la table wp_users. Cette table peut tre prsente sur la mme base de donnes que WordPress, mais ce nest pas obligatoire. Dailleurs, bbPress peut galement se connecter sur une base utilisateur tierce, tout comme WordPress, pour tirer profit par exemple dune base utilisateur LDAP. Chose que lon retrouve frquemment dans les entreprises.
Identification commune
Cette deuxime forme dintgration a comme prrequis la base dutilisateurs commune aux deux logiciels. Lidentification commune des deux logiciels permet de partager les cookies didentification. Cela signifie quun utilisateur naura besoin de se connecter quune seule fois, au forum ou au blog, pour tre reli aux deux services. Dans la mise en place dune communaut, avec un site et un forum, ce type didentification est obligatoire. Notez que seules les versions 1.0 et suprieures peuvent se mettre en commun avec WordPress (versions2.6 et suprieures); cela est d au nouveau mcanisme de gnration de cookie quintgre la version2.6.
448
Partie
Annexes
A. Participer l'amlioration de WordPress. .......................................... 451 B. Description du schma de la base de donnes MSQL . de WordPress..................................................................................... 481
VI
452
FigureA.01
Annexes
Aider des utilisateurs en dtresse demande certaines qualits humaines: Il faut arriver cerner le problme qui se pose rellement, car lutilisateur peut souvent se mprendre sur lorigine de celui-ci. Il faut tre persvrant, car un problme ne se rsout pas toujours du premier coup. Il faut avoir de la suite dans les ides, car la solution peut parfois tre complexe et ncessiter un vrai travail de recherche. Il faut garder la tte froide et rester courtois face certains utilisateurs trs exigeants. Heureusement, un trs grand nombre de problmes dcoulent soit dune mconnaissance de WordPress, soit de la rticence de lutilisateur utiliser le moteur de recherche du forum pour trouver la rponse lui-mme. De fait, ces problmes peuvent le plus souvent tre rsolus avec soit un lien vers la page adquate du Codex (idalement, sa version franaise), soit un lien vers une prcdente discussion du forum sur le mme sujet celui-ci existe depuis plus de trois ans, donc le problme a certainement d tre soulev dj par un membre (ils sont plus de 8700, avec environ vingt nouveaux membres par jour) dans une des nombreuses discussions (il y en a plus de 17000, comptabilisant presque 100000 messages individuels). Dans tous les cas, certaines personnes se feront un plaisir daccompagner vos premiers pas dans lassistance aux utilisateurs. Parmi eux se trouvent les membres de lquipe WordPress Francophone (sous les pseudonymes AmO, BenKenobi, Oo, MS-DOS 1991, Damino, ramenian, Xavier et matthieu) et les modrateurs, chargs de sassurer que les forums sont utiles [Lumire de Lune (Marie-Aude Koiransky), Comme une Image (Jrme), z720 (Sbastien Erard), FiX (Franois-Xavier Manet) et claiie (Cyril Clybouw)], sans oublier des utilisateurs particulirement actifs comme Many (Manalina Rajaona), dlo, bmzoom ou Matre M (Jean-Yves Moyart), Rod (Rod Maurice), codfingers (Daniel) Tous sont bnvoles et dsintresss. Nhsitez pas leur proposer votre aide, elle sera toujours la bienvenue.
453
454
Annexes
Laspect laborieux intervient lors de la mise jour du thme/de lextension: le processus est alors revoir depuis le dbut, car il est quasiment impossible de reprendre soi-mme les modifications apportes au programme dans la traduction existante, et copier-coller toutes les chanes dun fichier lautre peut se rvler tout aussi difficile. Ce problme rcurrent nest pas unique WordPress mais concerne tous les logiciels existants, open-source ou non. Pour rsoudre ce problme de manire lgante et accessible, le monde de lOpen Source a cr le projet GNU gettext en 1994. Celui-ci a un fonctionnement assez particulier, sans compter une terminologie spcifique, ce qui mrite une explication complte
455
les autres langues, par exemple pt_PT (portugais du Portugal) diffre de pt_BR (portugais du Brsil),etc. Voici par exemple le dbut du fichier fr_FR.po, qui permet de voir les en-ttes du fichier, les fichiers o sapplique chaque chane, et le couple chane originale/chane traduite (respectivement, msgid et msgstr):
"Project-Id-Version: WordPress 3.0\n" "Report-Msgid-Bugs-To: wp-polyglots@lists.automattic.com\n" "POT-Creation-Date: 2010-06-17 16:04+0000\n" "PO-Revision-Date: 2010-06-17 18:32+0100\n" "Last-Translator: WordPress Francophone <traduction_at_wordpress-fr.net>\n" "Language-Team: WordPress Francophone <traduction@wordpress-fr.net>\n" "MIME-Version: 1.0\n" "Content-Type: text/plain; charset=UTF-8\n" "Content-Transfer-Encoding: 8bit\n" "Plural-Forms: nplurals=2; plural=n>1\n" "X-Poedit-Language: French\n" "X-Poedit-Country: France\n" "X-Poedit-SourceCharset: utf-8\n" #: wp-admin/admin-ajax.php:36 #, php-format msgid "<strong>ALERT: You are logged out!</strong> Could not save draft. <a href=\"%s\" target=\"_blank\">Please log in again.</a>" msgstr "<strong>ALERTE : vous tes dconnect(e) !</strong> Impossible d’enregistrer le brouillon. <a href=\"%s\" target=\"blank\">Veuillez vous reconnecter.</a>" #: wp-admin/admin-ajax.php:370 #: wp-admin/edit-link-categories.php:28 #: wp-admin/link-category.php:46 #, php-format msgid "Can’t delete the <strong>%s</strong> category: this is the default one" msgstr "Impossible de supprimer la catgorie <strong>%s</strong> : c’est celle par dfaut" (...)
Une fois le fichier fr_FR.po termin, il reste le compiler au format binaire utilisable par le logiciel destinataire. Cest encore un outil gettext qui sen charge et produit un fichier appel "fichier MO" (Machine Object): fr_FR.mo. Le fichier MO nest plus lisible lil nu, mais est particulirement optimis pour les logiciels internationaliss. Pour rsumer, voici les principales caractristiques des fichiers POT/PO/MO: POT(fichier texte). Contient toutes les chanes non traduites; gnr partir du code source. PO(fichier texte). Contient toutes les chanes dans divers tats de traduction; rgl pour une seule langue; produit par un outil ddi, comme poEdit. MO(fichier binaire). Contient toutes les chanes traduites; compil par un outil ddi, comme poEdit.
456
Annexes
Il ne reste plus qu mettre le fichier MO final en ligne, dans le dossier /wp-content/language, en se conformant la norme de la langue. Par exemple, pour fr_FR, le fichier devra tre nomm fr_FR.mo. Ensuite, il faudra indiquer lexistence de ce fichier WordPress dans le fichier wp-config.php, la ligne define ('WPLANG', '');, que lon modifie pour placer le code de langue pour le franais de France, ce sera "fr_FR", donc cette ligne deviendra define ('WPLANG', 'fr_FR'); (voir FigureA.02).
FigureA.02
Indiquer la langue utilise dans le fichier wp-config.php.
WordPress se chargera alors de remplacer toutes les chanes en anglais par leurs traductions franaises en provenance du fichier MO. Sil arrivait que le fichier MO ne dispose pas dune traduction (par exemple, dans le cas o la version de WordPress serait plus rcente que celle pour laquelle le fichier MO a t compil), gettext afficherait alors la chane anglaise originale, au milieu des chanes traduites. Jusquici, a priori, rien qui semble faire gagner du temps par rapport une traduction la main, bien au contraire. Mais cest lorsquune nouvelle version de WordPress sort que le systme gettext fait montre de toute sa puissance. En effet, pour chaque nouvelle version de WordPress, majeure ou mineure, un fichier POT propre cette version est produit, ce qui permet aux traducteurs de suivre lvolution de cette traduction sans devoir fouiller le code. Par ailleurs, et cest l que le gnie de gettext se dvoile, les outils gettext sont en mesure dindiquer aux traducteurs les diffrences par rapport la traduction PO prcdente: quelles chanes sont nouvelles, quelles chanes sont corriger, et quelles chanes restent inchanges. De fait, aprs le premier travail laborieux de traduction de toutes les chanes, les mises jour de la traduction ne sont plus quune correction des chanes modifies, ou de traduction dune petite dizaine de nouvelles chanes au pire. Le travail nest plus refaire intgralement, et les traducteurs peuvent se concentrer sur lamlioration de la traduction plutt que de reprendre le travail zro chaque fois.
457
458
FigureA.04
Annexes
Loin de vous inscrire une mailing-list, ces deux informations seront utilises pour "signer" les traductions que vous ferez, et donc vous en attribuer la paternit. Vous pouvez galement parcourir les autres onglets pour rgler les prfrences, par exemple celle qui cre un fichier MO chaque sauvegarde du fichier PO, mais en gnral, le nom et ladresse e-mail suffisent. Attention, il est possible que la fentre o vous pouvez choisir la langue soit cache derrire poEdit, notamment sur OSX. Nhsitez pas dplacer la fentre principale si vous ne la trouvez pas. Plutt que dexplorer les menus de poEdit de manire exhaustive, nous nous contenterons de dcrire le processus habituel du traducteur, dans diffrents contextes
Vous avez le fichier POT fourni par lauteur du thme/de lextension, mais aucun fichier PO en vue: vous devez crer ce dernier, qui se diffrenciera du POT par le fait dtre configur pour un dialecte prcis. Lancez poEdit, et dans le menu Fichier, choisissez loption Nouveau catalogue depuis un fichier POT (voir FigureA.05). Trouvez le fichier POT dans larborescence du thme/extension et chargez-le.
FigureA.05
Cration d'un nouveau catalogue.
459
La fentre Configuration souvre immdiatement et vous permet de renseigner les informations lies votre traduction, et qui feront du fichier POT un fichier PO. Prenez le temps de remplir correctement tous les champs en vous appuyant sur lexemple de la FigureA.06, qui prsente les informations de la traduction de WordPress.
FigureA.06
Fentre Configuration, onglet Info Projet.
Lavant-dernier champ, Jeu de caractre du code source, utilisera gnralement "utf-8", lencodage employ par WordPress et recommand pour tous les projets lis. Le dernier champ, Formes plurielles, prend une syntaxe particulire, spcifique chaque langage: la valeur nplural spcifie le nombre de formes, et la valeur plural spcifie partir de quand la forme est considre comme plurielle. Pour le franais, nous vous conseillons dutiliser nplurals=2; plural=n>1: deux formes (singulier et pluriel), et la forme singulire sapplique 0 et1. Validez ces informations sans vous proccuper des deux autres onglets. poEdit vous propose denregistrer le fichier PO que vous venez de crer. Voici enfin linterface principale, divise en trois sections horizontales (chacune spare en deux zones) et une barre dtat tout en bas de linterface (voir FigureA.07). La section du haut, juste sous la barre de menus, contient toutes les chanes marques dans le projet, en provenance du fichier POT: gauche les phrases originales, droite les traductions. Les lignes ne contenant pas de traduction sont en gras et en dbut de liste, tandis que celles avec traduction sont crites normalement et seront dplaces la fin de la liste lors de la prochaine sauvegarde. La section du milieu contient la chane traduire slectionne, qui peut comprendre plusieurs phrases, et sa droite une zone ddie aux possibles commentaires laisss par les dveloppeurs. Vous ne pouvez pas modifier le contenu de ces deux zones. La section du bas contient gauche la zone de traduction. Celle-ci peut proposer deux onglets dans le cas o la phrase originale est susceptible de ncessiter un pluriel auquel cas il faut traduire la chane deux fois: forme singulire dans longlet Forme0, et forme
460
Annexes
plurielle dans longlet Forme1. droite de la zone de traduction, une zone est ddie aux commentaires que vous pouvez laisser pour vous-mme ou pour les traducteurs suivants. Ces commentaires peuvent tre des messages informatifs, par exemple des suggestions, des avertissements ou des demandes de vrification en contexte
FigureA.07
L'interface principale.
Les deux zones de commentaires seront peut-tre invisibles par dfaut. Vous pouvez les afficher en passant par le menu Affichage et ses deux options Montrer la fentre de commentaires et Montrer la fentre automatique de commentaires.
Tout en bas, enfin, la barre dtat vous permet de savoir o vous en tes de la traduction. Dun coup dil, vous connatrez ainsi le pourcentage de chanes traduites, le nombre total de chanes et entre parenthses leurs diffrents types: nombre de chanes traduites approximativement (fuzzy strings en anglais, cest--dire les chanes qui ont chang depuis la dernire mise jour), nombre de chanes avec marqueurs incorrects (les marqueurs sont des symboles, comme %s, %d ou %1$s, qui permettent au code de placer des variables dans la chane sans devoir la couper en deux), et nombre de chanes restant traduire (voir FigureA.08). partir de l, la tche est simple: fournir toutes les chanes en anglais une traduction en franais. Pour acclrer ce travail, il est fortement recommand de ne pas utiliser la souris pour slectionner une nouvelle chane, mais de tout faire entirement au clavier: flche haut/ bas pour passer dune chane lautre, touche Tab pour sauter directement la zone o lon va crire la traduction, touches Shift+Tab pour revenir la liste des chanes. Par ailleurs, en faisant un clic droit sur une ligne, vous obtiendrez tous les fichiers o elle apparat ce qui peut tre utile pour dcouvrir son contexte dutilisation.
461
Une fois lintgralit du fichier traduit, rcuprez le fichier MO gnr automatiquement par poEdit et testez votre traduction et corrigez-la si ncessaire. Lorsque cest fait, il vous reste faire la promotion de votre dur labeur: envoyez-le lauteur ou rendez cette version traduite tlchargeable sur votre site
462
FigureA.09
Annexes
Le processus est ensuite classique: traduisez, corrigez, gnrez le fichier MO, et diffusez-le.
463
et se terminant par un point-virgule sont des rfrences alphanumriques des glyphes (ou caractres) spciaux. Ces rfrences peuvent prendre deux formes: » est une rfrence prdfinie pour le glyphe "", et » est une rfrence numrique pour ce mme glyphe. Dans les deux cas, ce sont des codes HTML remplacs par le caractre voulu par le navigateur. Il existe de nombreux autres glyphes, chacun disposant dune rfrence numrique, les plus populaires ayant galement une rfrence prdfinie. Ces entits doivent tre gardes telles quelles, afin de conserver lesprit donn par lauteur du script que vous traduisez. Cependant, il est toujours bon de vrifier si certains glyphes ne sont pas trop "locaux" et ne devraient pas tre adapts. Vous en trouverez une liste exhaustive sur Wikipdia: http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references. Les espaces Quand on traduit, il faut connatre certaines rgles de ponctuation et savoir les mettre en place correctement. Lun des exemples les plus courants est lespace. Par exemple, de nombreuses chanes en anglais contiendront un signe deux-points: "Pages:". Cest ici quil faut se souvenir quen franais un signe de ponctuation peut prendre des espaces avant et/ou aprs la rgle mnmotechnique tant que si le signe est double (point-virgule, deux-points, point dinterrogation, point dexclamation), il faut lui adjoindre deux espaces, un de chaque ct. Ainsi, les signes deux-points, point-virgule doivent tre entours despaces et non rester colls au mot prcdent, comme cest le cas en anglais. Donc, "Pages:" devrait tre traduit par "Pages:". Seulement le danger est grand de voir ici le deux-points renvoy la ligne, par exemple si la mise en page est trop petite. Dans ce cas, il faut bien prvoir dajouter une "espace inscable" entre le mot et le signe, en utilisant lentit " " (nbsp signifiant "non-breaking space"). Cette entit fait que le mot et sa ponctuation ne pourront pas tre spars par un ventuel retour la ligne automatique. Donc, au final, il faut traduire "Pages:" par "Pages :", et faire de mme pour toutes les chanes contenant un signe de ponctuation double ou, in extenso, pour toutes les chanes o lon prfre viter un retour la ligne intempestif Wikipdia dispose de tous les dtails en matire de placement des espaces : http:// fr.wikipedia.org/wiki/Ponctuation. Les variables Les chanes des thmes ne sont pas toutes statiques: certaines doivent contenir des informations dynamiques, comme la date, le nombre de commentaires, lheure autant dinformations qui ne peuvent pas tre crites "en dur" dans le code HTML du thme. Sans vous dtailler la mthode employe par les dveloppeurs pour placer des variables dans les chanes pour les connaisseurs, il sagit dutiliser la fonction printf(), voyons le type de chane avec variable que vous pourriez croiser: Published in %s, %1$s at %2$s, voire des combinaisons entit+variable, comme Archive for the ‘%s’ Category. Quand une chane utilise une variable, elle est marque %s; quand il y en a plusieurs, le code utilis est %x$s, "x" tant un nombre. Ainsi, sil y a trois variables dans une chane, vous aurez %1$s, %2$s et %3$s sans limite de nombre.
464
Annexes
Lide ici est de laisser le traducteur placer la variable l o cela aura du sens, en fonction de ses habitudes locales. Cela suppose cependant de deviner quoi correspond la variable. Par exemple, si le %s de Published in %s correspond a priori une catgorie (donc, la traduction serait Publi dans %s), cest plus dlicat pour %1$s at %2$s. Dans ce dernier cas, il faudra faire quelques essais avant de comprendre quil peut sagir dune variable de date pour %1$s, et dheure pour %2$s. La traduction pourrait tre %1$s, %2$s, ce afin dobtenir laffichage "lundi 26 janvier 2009, 12:45", ou mme inverser les variables, selon votre prfrence, A %2$s, le %1$s, ce qui donnerait "A 12:45, le lundi 26janvier 2009". Enfin, les combinaisons entit+variable supposent de connatre les entits existantes. Par exemple, Archive for the ‘%s’ Category donnerait "Archive for the Fruits et lgumes Category". En France, on prfrera utiliser les guillemets ouvrants et fermants, dont les codes sont respectivement « et »; guillemets que lon sparera du mot contenu par des espaces inscables au besoin. La traduction donnerait donc: Archive pour la catgorie « %s ». La traduction et la ponctuation franaise sont un art dlicat autant quune science pineuse, mais ce nest quen respectant ses contraintes de styles que lon rendra les chanes claires pour tous
465
3. Dans la fentre qui souvre, entrez le nom du thme/de lextension et les autres informations que vous jugez ncessaires. 4. Toujours dans cette fentre, allez dans longlet Chemin et cliquez sur licne Crer (deuxime en partant de la gauche, en forme de carr). Une ligne sajoute dans la zone en dessous des icnes, dans laquelle vous devez placer le chemin daccs au dossier du projet. Pour vous simplifier la tche, mettez simplement un point, et quand viendra le moment denregistrer le fichier, positionnez-le la racine du dossier du projet: de cette manire, poEdit explorera les fichiers du dossier courant. 5. Allez au troisime onglet de la fentre, nomm Mots cls. Cest ici que vous indiquerez les marqueurs chercher dans le code, en loccurrence __() et _e() (et au besoin, __ngettext() et _c()). Cliquez sur licne Crer et saisissez "__" (deux caractres souligns, ou underscores) dans la ligne qui saffiche. Recommencez la procdure pour ajouter une ligne, dans laquelle vous saisirez "_e". Vrifiez bien chaque chane: nombreuses sont les fonctions qui touchent la traduction (voir la section consacre ces fonctions), et il ne faudrait pas en rater une 6. Fermez la fentre en cliquant sur le bouton OK. poEdit vous propose denregistrer le fichier. Comme nous lavons conseill, placez-le la racine du projet do il faut extraire les chanes. Par dfaut, poEdit vous propose lextension .po, mais vous pouvez la changer en .pot si vous prfrez garder un fichier POT vierge. Validez. 7. Aussitt le fichier enregistr, poEdit va explorer les fichiers du dossier indiqu et vous afficher les chanes dcouvertes dans sa fentre Rsum de la mise jour. Cliquez sur OK, et vous voil avec un fichier POT quil vous reste traduire pour en faire un vritable fichier PO. 8. Si vous tes le crateur du thme ou de lextension, noubliez pas dinclure le fichier POT dans larchive que vous distribuez. Si vous ntes pas le crateur, vous pouvez toujours envoyer le POT ce dernier pour le pousser prendre linternationalisation au srieux. Vous avez dsormais toutes les cls pour traduire thmes et extensions tout-va, et offrir aux utilisateurs francophones une plus grande varit dans leur quotidien de blogueurs.
466
Annexes
WordPress.com), traduire autant de chanes quils le souhaitent en une seule session, et voir leur travail en place sur la plate-forme ds validation par les modrateurs.
FigureA.11
L'interface de traduction participative de GlotPress.
La premire page visible du site est http://translate.wordpress.com/projects, qui prsente les divers projets dont les traductions sont hberges sur cette installation de GlotPress, projets parmi lesquels se trouve WordPress.com. Un lien Log In en haut droite vous permet de vous connecter. Ceci fait, vous pourrez choisir le projet auquel vous voulez participer. En cliquant sur le projet, vous arrivez sur la liste des langues et dialectes disponibles. Cliquez sur la langue vers laquelle vous souhaitez traduire (French (France), ou French (Switzerland), a priori), et vous arriverez directement sur linterface principale de traduction, avec dix chanes nattendant que votre participation. L'interface de GlotPress Avant de traduire les chanes tout va, penchons-nous sur les diffrents outils qui nous sont offerts. Notez que, selon le statut de votre compte (utilisateur ou modrateur), vous verrez tout ou partie des options de GlotPress... Le haut de linterface indique le nom de lapplication, suivi du projet et de la langue choisis. Sous ces indications se trouve une suite de liens gauche, et une pagination droite. On retrouve cette pagination en bas de page. Les trois premiers liens (affubls de flches vers le bas) ouvrent chacun une interface: Bulk. Lance une action groupe sur les chanes slectionnes (au maximum, les dix de la page en cours). Par dfaut, un utilisateur ne peut que demander une traduction automatique avec Google Translate. Les modrateurs, eux, peuvent sen servir pour approuver ou rejeter un lot de traductions proposes.
467
Filter. Il sagit en quelque sorte du moteur de recherche de GlotPress. Deux champs servent indiquer le mot ou lutilisateur recherch, tandis que les slecteurs droite permettent de prciser la recherche: lancer une recherche selon son tat de traduction et de validation. Sort. Moins utilise que les autres, cette interface sert trier la liste des chanes selon certains critres. Suivent six liens qui agissent directement sur la liste de chanes affiches: All. Affiche lensemble des chanes, quel que soit leur tat. Untranslated. Naffiche que les chanes ne disposant pas dune traduction. (random). Affiche une slection de dix chanes non traduites et prises au hasard. noter que dans ce cas la liste nest pas pagine, ce qui permet sans doute de ne pas se sentir cras par le nombre de chanes restant traduire... Waiting. Affiche les chanes traduites mais pas encore valides par un modrateur. Fuzzy. Affiche les chanes dont la traduction doit tre revue. Les chanes traduites avec Google Translate reoivent automatiquement ce statut. marqueurs Warnings. Affiche les chanes ayant un problme. Le plus souvent, il sagit de qui nont pas t bien repris, ou de retours la ligne surnumraires... Traduire les chanes Passons linterface principale. Typiquement, dix chanes sont prsentes: la version originale gauche, la traduction (sil y en a une) droite. Sil ny a pas de traduction, vous pourrez lire en gris "Double clic to add", ce qui signifie "double-cliquez ici pour ajouter [une traduction]". Faites donc cela! En double-cliquant dans la zone de traduction, un formulaire se prsente: cest ici que vous saisirez et validerez votre traduction. Notez que vous pouvez galement ouvrir ce formulaire en cliquant sur le lien Details de chaque ligne. Sur la section de gauche, vous trouverez la chane originale (en gras), et un champ texte vide ou rempli avec la traduction actuelle. Suivent un lien pour recopier la chane originale dans la traduction afin de spargner un copier-coller laborieux (ce qui arrive souvent, par exemple en cas dentits PHP ou de liens HTML) et un lien pour demander une traduction automatique via Google Translate. Enfin, un bouton permettant de valider votre traduction, ou un lien pour lannuler. Sur la section de droite se trouvent les mtadonnes de la chane: son tat actuel, sa priorit, un petit lien "" offrant un permalien vers cette chane (utile pour discuter dune chane en particulier), ainsi que, le cas chant, la date dajout de la dernire traduction, et lauteur de cette traduction. Quand vous aurez valid votre chane, GlotPress ouvrira automatiquement le formulaire de la chane suivante dans la liste, jusqu la dixime. Une fois la dixime chane de lcran valide, il ne vous reste plus qu slectionner un affichage parmi les liens en haut de lcran
468
Annexes
(Untranslated, random, etc.) afin de rcuprer dix nouvelles chanes. Et ainsi de suite, jusqu puisement des chanes ou de votre temps libre.
Et WordPress.org ? La version autonome de WordPress dispose galement de son GlotPress: http://translate.wordpress. org. Ce site hberge de nombreuses traductions collaboratives de WordPress, ainsi que le projet BuddyPress, les extensions GPL de WordPress et les outils mobiles pour Android et BlackBerry. Le projet WordPress comprend les sous-projets Multisite (les chanes qui ne sont charges qu'en mode rseau) et Twenty Ten (le thme par dfaut). En franais, WordPress, Multisite et Twenty Ten sont grs directement par l'quipe de traduction de WordPress-Francophone, sans passer par cet outil. Il est donc inutile de s'en servir l'heure actuelle. Pour signaler un problme de traduction : traduction@wordpress-fr.net.
Amliorer la documentation
Prrequis: avoir un bon niveau en franais, bien connatre WordPress, connatre le fonctionnement dun wiki et du Codex, tre bilingue franais-anglais. Bien que la documentation officielle de WordPress soit lie directement depuis linterface dadministration du logiciel, tous les utilisateurs ne savent pas quelle se trouve sur le Codex (http://codex.wordpress.org pour laccueil principal, http://codex.wordpres. org/fr:Accueil pour laccueil en franais) [voir FigureA.12], un wiki mis en place par les dveloppeurs de WordPress afin de laisser nimporte qui participer llaboration des documents. Ce wiki utilise le mme moteur que Wikipdia et prne la mme philosophie: tout le monde est invit participer.
FigureA.12
L'accueil du Codex francophone.
469
Malheureusement, seule la documentation en anglais est en ralit rgulirement mise jour, notamment grce aux efforts de volontaires comme Lorelle van Fossem et Mark Riley (alias Podz). La section franaise, quant elle, a de rels soucis pour disposer de pages jour ou du moins maintenues, parfois de pages tout simplement. Il y a beaucoup moins de volontaires pour cette version franaise, et les quelques bons samaritains qui sy lancent ne tiennent jamais longtemps, tant leffort de rdaction dun wiki ncessite une saine mulation entre utilisateurs, chacun construisant son apport au tout par des ajouts ou amliorations de ce qui existe dj. crire une page du Codex reste la faon la plus accessible de participer lamlioration de WordPress, pour peu que lon sache crire un franais correct et que lon soit capable d expliquer clairement des concepts techniques. Participer leffort collectif de documentation est aussi le moyen le plus sr de se rendre utile auprs de la communaut. En effet, la plupart des utilisateurs croient que WordPress est compliqu car ils ne trouvent pas de rponse leurs questions. Disposer dune documentation complte et jour permet donc tous, utilisateurs comme dveloppeurs, de se reposer sur des textes srs et centraliss sur le Codex. Il y a deux manires de participer leffort de documentation: traduire une page en provenance de la version anglaise du Codex, ou crer une page de toutes pices. Dans tous les cas, faites savoir que vous souhaitez contribuer la documentation en vous inscrivant la mailing-list wpfr-doc (de son nom complet Traduction franaise de la documentation de WordPress). Cest l que doivent schanger les ides entre les diffrents volontaires. Son adresse: http://groups.google.com/group/wpfr-doc. Cela dit, le mieux pour vous lancer en pratique est de vous inscrire sur le Codex (qui utilise le mme moteur que Wikipdia, les habitus ne seront donc pas perdus) et de lire les quelques pages de documentation disponibles depuis la page daccueil francophone (http:// codex.wordpress.org/fr:Accueil), notamment les pages Contribuer (http://codex.wordpress.org/fr:Codex:Contribuer) et Effort de Traduction (http://codex.wordpress.org/ fr:Effort_de_Traduction).
Tester WordPress
Prrequis: matriser son hbergement web, bien connatre WordPress, tre bilingue franais-anglais, savoir tracer les origines dun problme. Voil un apport assez particulier au dveloppement de WordPress, mais trs prcieux. Il est rserver ceux qui nont pas peur dinstaller des versions non stables de WordPress (les versions bleeding edge, bta ou RC), et qui savent comment reprer et surtout signaler les bogues. Toutes les versions de WordPress, mme les mineures, respectent un processus assez suivi: dveloppement pendant plusieurs semaines/mois, priode pendant laquelle tout le monde peut rcuprer une version bleeding edge ( la pointe), linstaller et voir au jour le jour les
470
Annexes
volutions de WordPress; mise disposition dune premire version bta tester par les utilisateurs avertis, qui peut tre suivie par une deuxime voire une troisime version bta; mise disposition dune version RC (Release Candidate, candidate publication) pour un test de plus grande ampleur, cette version tant quasiment prte et ne ncessitant que des peaufinages; enfin, annonce publique de la version finale. Ces diffrentes versions de WordPress peuvent tre tlcharges par tout le monde: Versions alpha/bleeding edge/trunk. On les appelle les "nightly" car elles sont archives tous les soirs partir des dveloppements du jour coul. Le plus simple pour les rcuprer est de passer par loutil de gestion de versions, Trac, hberg sur http://trac. wordpress.org/browser: allez dans le dossier trunk pour avoir accs tous les fichiers de WordPress et cliquez sur le lien Zip Archive pour les tlcharger dun bloc. Sinon, les habitus de Subversion peuvent directement pointer leur client vers le serveur public de WordPress: http://svn.automattic.com/wordpress/trunk/. Versions bta. Toujours annonces sur la liste wp-testers (lire ci-aprs). Versions RC. Gnralement annonces sur le blog officiel de WordPress, et avec quelques jours davance sur la liste wp-testers. Les dveloppeurs de WordPress ont normment besoin de retours de "vrais" utilisateurs pendant les phases de dveloppement, car ils ne peuvent certainement pas tester toutes les conditions possibles. Si vous souhaitez faire partie de ces valeureux testeurs, inscrivez-vous sur la mailinglist wp-testers, o vous recevrez instructions et conseils, et o vous pourrez lancer des discussions sur les problmes rencontrs : http://lists.automattic.com/mailman/listinfo/ wp-testers. Certains problmes pourraient tre rsolus rapidement ou tre dj connus, mais dautres pourraient justifier la cration dun "ticket", contenant un rapport de bogue en bonne et due forme. La cration de tickets Trac est explique dans la section suivante.
471
472
Annexes
Tous les dveloppements de WordPress se font en public et sont visibles sur le Trac install ladresse http://trac.wordpress.org/. Les plus curieux pourront sintresser aux dernires modifications et suggestions dans la timeline (http://trac.wordpress.org/timeline) [voir Figure A.13], ou voir les tickets des versions venir sur la feuille de route (http://trac. wordpress.org/roadmap) [voir FigureA.14].
FigureA.13
La timeline permet de voir en direct les modifications du code et les bogues trouvs.
Pour les dveloppeurs souhaitant participer, il est indispensable dutiliser un client Subversion, qui se chargera de synchroniser les fichiers locaux avec les fichiers du serveur. Sous Windows, nous recommandons fortement le client gratuit TortoiseSVN (http://tortoisesvn.net/), qui dispose dune interface graphique rendant son usage quotidien trs ais. Sous OSX, il ny a pas encore de client qui se dmarque clairement, mais les choix srs sont svnX, SynchroSVN ou SCPlugin, tandis quune nouvelle gnration arrive avec Versions. app ou ZigVersion. Nous partons du principe que vous avez dj install une version de WordPress part, en dehors de votre installation principale, pour faire des tests en toute indpendance de thme ou dextension. En effet, les bogues lis aux thmes et extensions ne sont surtout pas r apporter sur le Trac: ce dernier est rserv au code de WordPress, et lui seul.
473
474
Annexes
accomplir pour reproduire le bogue un bogue impossible reproduire est trs dlicat corriger. Le but dun rapport de bogue est de permettre aux dveloppeurs de recrer votre problme sur leur propre installation de test. Si nous vous conseillons de bien rflchir avant de crer le rapport de bogue, cest pour viter dinonder les dveloppeurs avec des messages lapidaires et vides dinformation, comme "a ne marche pas, a marchait hier", "je narrive pas faire a" et autres remarques Par ailleurs, un rapport de bogue ne doit contenir que des certitudes. Il faut imprativement viter les suppositions et les doutes, comme "je crois que cest d la fonction Untel" ou " mon avis, vous devriez faire ceci puis cela". Si vous savez comment corriger le problme, il sera toujours temps de proposer un correctif. Vous voil fin prt crire votre rapport de bogue avec assurance et maestria. Ouvrez le site Trac ladresse http://trac.wordpress.org/, connectez-vous (lien Login) et cliquez sur le bouton New Ticket. La page illustre la FigureA.15 souvre alors.
FigureA.15
Page de cration d'un ticket Trac.
Il sagit dun formulaire assez classique, mais o chaque section a son importance et peut influer considrablement sur la rapidit de prise en compte de votre rapport. Vous devez donc bien comprendre les implications de chacune des sections! Summary. Un rsum en quelques mots du problme, avec dj un peu de dtails: ce rsum sert comme titre du bogue, et les dveloppeurs parcourent tous les jours des centaines de rsums de bogues, soyez donc le plus clair possible pas de "a marche pas!" par exemple.
475
Type. Trac permet de classer les tickets par type; donc prcisez bien si votre rapport concerne un dfaut que vous avez repr (defect), une amlioration que vous suggrez (enhancement), une fonctionnalit que vous voudriez voir apparatre (feature request), ou une tche gnrale accomplir (task, rserve aux dveloppeurs de WP). Description. Cest le rapport de bogue lui-mme. Nhsitez pas prsenter les tapes pour reproduire le problme, donner les dtails de votre hbergement si besoin est, voire faire un lien vers une page prsentant le bogue. Dtails, dtails, dtails Priority. Accessible uniquement aux dveloppeurs, il indique une estimation de lurgence du bogue: trs basse (lowest), basse (low), normale (normal), haute (high), et "trs haute mondieu onvatousmourir" (highest omg bbq). Component. Indiquez quel composant de WordPress sapplique votre ticket: il y en a 61 lheure actuelle, et de nouveaux composants peuvent tre ajouts ou enlevs en fonction des besoins du moment. Indiquez bien le composant le plus adquat votre rapport, sans quoi il se verrait assign au mauvais dveloppeur, avec la perte de temps que cela implique. Severity. Il sagit ici dindiquer la porte de votre rapport de bogue et la facilit du correctif quil implique: trs simple (trivial), facile (minor), normale (normal), demande du travail (major), trs important (critical), on ne peut pas sortir de nouvelle version de WordPress tant que ce bogue nest pas rsolu (blocker). Il vaut mieux laisser "normal", que les dveloppeurs valuent eux-mmes limportance du bogue. Assign to. Dsigne un dveloppeur responsable de la rsolution de ce bogue. Si vous savez qui est en charge de la portion de code en question, mettez son pseudonyme. Si vous voulez grer le code vous-mme, mettez le vtre. Sinon laissez le champ vide. Milestone. Accessible uniquement aux dveloppeurs, cette section indique la version de WordPress dans laquelle ce bogue devrait tre rsolu. Cela permet de prvoir le travail accomplir pour une version mais, si le bogue nest pas corrig, les dveloppeurs peuvent choisir de le reporter une version suivante. Version. La version de WordPress dans laquelle vous avez dcouvert le bogue. Idalement, vous avez test la toute dernire version stable de WordPress, ou la version en cours de dveloppement (trunk); si cest le cas, mettez le numro de version dans ce champ; sinon laissez-le vide. Keywords. Liste de mots-clefs permettant didentifier rapidement le bogue. Les motsclefs doivent tre spars par une virgule. vitez den mettre plus de deux, et restez concis. Par exemple, "posting" indique que le bogue sapplique aux fonctions relatives la mise en ligne. Les dveloppeurs sont susceptibles dajouter dautres mots-clefs, ce qui leur permet de mieux trier les tickets: reporter-feedback (besoin de plus dinformations), needs-patch (ce bogue a besoin dun correctif), has-patch (un correctif est prt), needs-testing (le correctif doit tre vrifi), 2nd-opinion (besoin dun avis supplmentaire sur le bogue ou le correctif), tested (un des correctifs a t test),etc. De fait, si vous avez un correctif proposer pour un ticket, noubliez pas dajouter le mot-clef has-patch, vous attirerez ainsi lattention dun dveloppeur
476
Annexes
Cc. Dsigne des dveloppeurs qui ne sont pas responsables du bogue, mais qui voudraient sans doute tre tenus au courant de son volution. Si vous ne souhaitez pas mettre votre pseudonyme dans le champ Assign, indiquez-le dans ce champ et vous recevrez un e-mail chaque ajout fait au ticket. I have files to attach to this ticket. Cochez cette case si vous souhaitez mettre en ligne un fichier qui aidera la rsolution du bogue que vous dcrivez: capture dcran, correctif Tous les champs sont maintenant remplis; validez le formulaire. Si vous avez coch la case en fin de formulaire, Trac vous proposera de mettre en ligne un fichier. Une fois le ticket post, vous pouvez vous fliciter davoir particip lamlioration de WordPress!
En effet, tous les tickets rpertoris dans Trac nont pas forcment de correctif ou de dveloppeur assign, et attendent quon soccupe deux. Ces tickets sont clairement regroups par Trac dans ce quon appelle des comptes rendus, accessibles depuis le bouton View Tickets (voir FigureA.16). Ces comptes rendus trient les tickets en fonction de leur tat, de leurs mots-clefs ou dautres donnes. Vous pouvez donc dun clic afficher le compte rendu des tickets actifs, assigns, bloquants, en mal de documentation
477
Les comptes rendus qui vous intressent seront principalement ceux qui listent les tickets en manque de correctifs (Needs Patch, n13) [voir FigureA.17] et ceux qui nont pas de fichier joint (Lacks Attachment, n18). De manire gnrale, vous tes libre de vous intresser tous les tickets il est possible quun correctif existant ne soit pas optimal, par exemple. Idalement, vous choisirez un ticket o vous savez quoi faire pour corriger le bogue dcrit; ne partez pas au hasard, il est prfrable de travailler avec un objectif clair en vue. Vous devez ainsi matriser le langage de programmation ncessaire (HTML, PHP, CSS ou JavaScript) et le composant en cause (API de thme, API dextension, API de commentaire, TinyMCE, jQuery,etc.). Il vous reste maintenant crer le correctif pour le bogue sur lequel vous avez jet votre dvolu.
478
Annexes
machine de dveloppement cest important, car cest Subversion qui va rcuprer le code de WordPress sur lequel vous allez travailler. Dcidez quelle version de WordPress vous allez utiliser pour corriger le bogue, en faisant en sorte quelle corresponde bien la version prendre en compte: le trunk si vous travaillez sur la version en cours de dveloppement, la bonne branche ou le bon tag si vous travaillez sur une version spcifique et dj diffuse. Pour notre exemple, nous allons partir du principe que vous travaillez sur la version en cours de dveloppement; si ce nest pas le cas, vous devrez adapter ce qui suit Vous disposez de Subversion et savez sur quelle version vous allez travailler. Vous devez maintenant dire lun de tlcharger lautre. Chaque client Subversion a son fonctionnement propre, nous nous baserons sur celui de TortoiseSVN, meilleur client SVN ce jour, et malheureusement limit Windows: 1. Crez un nouveau dossier o seront tlchargs les fichiers de WordPress. Cest dans ce dossier que se feront tous vos dveloppements WordPress. Trouvez-lui donc un emplacement prenne. 2. Lancez une rcupration SVN sur ce dossier. Avec TortoiseSVN, faites un clic droit sur le dossier et choisissez loption SVN Checkout dans le menu contextuel. 3. Indiquez ladresse du dpt Subversion (repository en anglais) partir duquel tl charger les fichiers: Si vous travaillez sur le trunk, ce sera http://svn.automattic.com/wordpress/trunk/. Si cest une branche de code, par exemple 3.0, ce sera http://svn.automattic.com/ wordpress/branches/3.0/. Si vous travaillez sur une version spcifique, par exemple la 3.0.1, ce sera http://svn. automattic.com/wordpress/tags/3.0.1/. Assurez-vous que vous prenez bien la dernire rvision du code (HEAD revision en anglais). 4. Le client Subversion rcupre les fichiers. Vous pouvez voir lvolution du tlchargement via la fentre qui saffiche. Une fois le tlchargement termin (la fentre ne dfile plus et affiche Completed avec la mention At revision XXXX), fermez la fentre en cliquant sur OK. 5. Installez WordPress localement, afin de lancer des tests. Vrifiez que vous pouvez bien utiliser WordPress localement, et surtout que vous pouvez exactement reproduire le bogue du ticket vis. 6. Corrigez le bogue directement dans le code de WordPress, et pas dans un autre dossier. Vrifiez localement que vous narrivez plus reproduire le bogue. TortoiseSVN modifie les icnes des fichiers et dossiers: sils nont pas t corrigs, ils ont une coche verte; sils ont t rectifis, ils ont un point dexclamation rouge. Cela permet de mieux sy retrouver. Si vos modifications vous dplaisent et si vous voulez revenir au code original, lancez un retour en arrire (revert en anglais): avec TortoiseSVN, slectionnez les fichiers remettre en tat, faites un clic droit, et dans le menu contextuel, choisissez loption Revert du sous-
479
menu TortoiseSVN. Une fentre apparat, vous demandant de valider les fichiers remettre en tat. Validez. Vous avez nouveau les fichiers originaux toutes vos modifications ont t perdues. Si votre correctif ncessite la cration dun nouveau fichier (ce qui est dconseiller), noubliez pas de lajouter dans la base de donnes de Subversion. Avec Subversion, il suffit de faire un clic droit sur le fichier cr et de choisir loption Add du sous-menu de TortoiseSVN. 1. Exportez le code modifi dans un fichier au format .diff. Ce format de fichier texte, propre Subversion, indique uniquement les lignes qui ont chang, et par quoi elles ont t remplaces donc, les diffrences par rapport la version originale du code. Pour exporter le .diff avec TortoiseSVN, faites un clic droit sur le dossier principal et choisissez loption Create Patch du sous-menu TortoiseSVN. Une fentre vous propose de choisir les fichiers partir desquels tirer les diffrences ce qui est ncessaire, car vous pouvez avoir plusieurs correctifs en cours qui ne sappliquent pas tous au mme ticket. Validez et enregistrez le fichier sous un nom comprhensible. Ensuite, TortoiseSVN vous affiche le contenu du fichier. 2. Joignez votre fichier correctif au ticket Trac appropri. Ouvrez la page du ticket dans votre navigateur et cliquez sur le bouton Attach File, situ sous le descriptif du bogue. Un formulaire vous est alors prsent : trouvez votre correctif via lexplorateur de fichier, ajoutez une courte description si besoin est, cochez la case si votre correctif doit remplacer le mme fichier du mme nom dj prsent sur ce ticket, et validez en cliquant sur le bouton Add Attachement (voir FigureA.18). 3. Pour parfaire la chose, une fois le correctif correctement insr, ajoutez un commentaire au ticket pour dcrire votre travail, puis saisissez le mot-clef "has-patch" dans le champ de description Keywords. 4. Cest termin ! Flicitations, et merci pour votre contribution lamlioration de WordPress!
FigureA.18
Formulaire d'ajout de correctif Trac.
480
Annexes
Grce Subversion, si votre correctif est valid par les dveloppeurs, ils pourront directement lappliquer sans mme toucher au code: cest Subversion qui se chargera de placer vos lignes de code corriges aux bons endroits, automatiquement cest l tout lintrt dutiliser un gestionnaire de version. Les fichiers .diff utilisent un format textuel norm et propre Subversion. Pour autant, ces fichiers sont parfaitement lisibles. Par exemple, mettons que votre correction consiste modifier le fichier readme.html pour changer "Matt Mullenweg" en un autre nom. Voici ce que contiendrait le fichier .patch gnr par TortoiseSVN:
Index: readme.html =================================================================== --- readme.html (revision 9125) +++ readme.html (working copy) @@ -14,7 +14,7 @@ <h1>First Things First</h1> <p>Welcome. WordPress is a very special project to me. (...) -<p style="text-align: right;">— Matt Mullenweg</p> +<p style="text-align: right;">— Xavier Borderie</p> <h1>Installation: Famous 5-minute install</h1>
<ol>
Vous pouvez voir que le nom du fichier est clairement indiqu, ainsi que la ligne qui a t modifie: loriginale est prcde dun "" pour indiquer quelle va tre supprime, et votre version de cette ligne est prcde dun "+" pour indiquer quelle remplacera dans le fichier la ligne qui vient dtre efface. Par ailleurs, le symbole @@ indique la ligne o commence le texte affich: en effet, le correctif contient galement quelques lignes non rectifies autour de la ligne modifie (gnralement trois avant et trois aprs), afin de conserver un contexte et de rendre le fichier plus lisible. Notez que si vous utilisez la ligne de commande "svn", vous pouvez directement lancer la rcupration avec la commande (une fois que vous vous trouvez dans le dossier cible) svn co http://svn.automattic.com/wordpress/trunk/ et crer le fichier .diff avec svn diff > my-patch.diff. Attention, cette commande cre un fichier .diff de toutes les modifications, sur tous les fichiers. Si vous voulez vous limiter un seul fichier, utilisez la commande svn diff dossier/nomdufichier.php > my-patch.diff. Pensez galement donner un nom significatif au fichier, idalement en ajoutant le numro de la rvision laquelle il sapplique. Cette annexe se conclut ici. Vous avez dsormais en main toutes les cls pour devenir un membre actif de la communaut WordPress. Lancez-vous sans hsiter!
Concept
482
Annexes
wp_links Cette table stocke les liens de la blogoliste. Cette table est peu exploite par les extensions, car on touche une fonctionnalit secondaire de WordPress wp_options Cette table contient lintgralit de la configuration de votre blog, elle est utilise par lAPI des options. On peut y stocker de faon trs simple la configuration de son extension ou des valeurs ncessitant peu denregistrement en base de donnes. wp_postmeta Cette table contient les mtadonnes des articles, on y retrouve des informations annexes aux articles et pages, par exemple le template utilis par une page, etc. Cette table est gnrique, ainsi elle peut tre utilise pour stocker tout type dinformations en relation avec un article ou une page. Par exemple, on peut y enregistrer la notation dun article, le compteur de vue, etc. Beaucoup dextensions travaillent avec cette table. wp_postmeta Chaque article dispose dinformations lies, nommes mtadonnes. Elles sont stockes dans cette table. Les extensions sen servent frquemment. wp_posts Cette table stocke les articles et les pages. Techniquement, on y retrouve aussi les rvisions des articles et les pices jointes un article (par exemple les images envoyes via le gestionnaire de mdias de WordPress), ainsi que les menus de navigation. Cette table peut galement tre utilise par les extensions pour stocker dautres types de donnes: en effet, chaque contenu dans la base possde comme information le post_type qui revient prciser si cest une page, un article ou autre chose. wp_terms Cette table permet de stocker les termes dans WordPress. Un terme nest pas ncessairement une catgorie ou un tag, il peut sagir des deux en mme temps (voir la section "La taxinomie dans WordPress" au Chapitre10 pour comprendre la subtilit). wp_term_relationships Cette table permet de faire la relation entre les contenus (articles, liens, pages) et un lment de taxinomie (catgorie, tags, etc.). wp_term_taxonomy Cette table permet de crer un contexte pour chaque terme. Par exemple, on pourra retrouver le contexte catgorie et le contexte tag pour un mme terme. wp_usermeta Cette table contient les informations annexes un utilisateur, soit les diffrentes informations prsentes sur la page de profil (messagerie, description) ainsi que des donnes dadministration comme le rle ou le niveau de lutilisateur.
483
wp_users Cette table contient les donnes principales sur les utilisateurs de WordPress, dont lidentifiant, le mot de passe, le nom afficher, ladresse e-mail, etc.
wp_blogs Chaque site cr est stock dans cette table. wp_blog_versions Cette table maintient une liste de ltat de la base de donnes de chaque site. Elle nest modifie que lorsque le site est mis jour. wp_registration_log Cette table contient le nom de lutilisateur/administrateur de site chaque fois quun site est cr. wp_signups Cette table garde un journal de tous les utilisateurs ayant cr un site. wp_site Cette table contient ladresse du site principal. wp_sitecatagories Dans le cas o les termes globaux sont activs pour un site, cette table contiendra ces termes. wp_sitemeta Chaque site dispose dinformations qui lui sont lies, comme le nom de son administrateur. Cest cette table qui stocke ces donnes.
Index Utilisateur
$table_prefix (mode multisite) 427 insertion vignette 231 style 266 marqueurs de modle 168 mots-clefs 199 navigation 227 page 404 226 archives 212, 224 article 171, 212 blog 203 catgories 212, 224 mots-clefs 212, 224 pied 170, 210 rsultats de recherche 212 statique 212, 225 rsultats de recherche 224 sidebar.php 200 structure 176 HTML 167 titre 189 validation XHTML du thme 227 W3C 228 Crochets 281 actions 283 filtres 282 Cron 346 inclusion des diffrents fichiers 379 initialisation 381 internationalisation 397 menu de WordPress 384 options des vnements 385 permissions 380 shortcode 394 widget 390 licence 276 philosophie 279 principes 275 traduction 306
A
Adresse de WordPress et du blog 112 Annuaire des fonctions 289 APC 334 API Custom Post Types 359 HTTP (WP_Http) 308 WordPress 289
B
Bibliothques JavaScript 344
C
Cache 330 Classe base de donnes 323 cron 346 Cration archives 204 blogoliste 205 boucle WordPress 171, 183, 235 calendrier 201 catgories 202 champs personnaliss 233 paramtrage 233 colonne latrale 170 commentaires 212 contenu des articles 195 description du blog 190 dossier du thme 182 en-tte 169 fichiers de modle 182 flux RSS 207 footer.php 170 formulaire de recherche 170 d'options 295 header.php 168, 169, 192 index.php 192 informations de connexion 206
F
Fichier config.php, cration manuelle 56 Filtre HTML 352 par dfaut 285 supprimer 284 Fonctions amovibles 286 diverses 353 pluggeables 286 Formatage 348
D
Date 352 Dsactivation, extension 289 Dsinstallation, extension 291
G
Galeries 311 gettext extraire les chanes traduire 464 fichier MO 455 PO 455 POT 455 poEdit 458
E
Extension activation 289 concept 279 dsinstallation 291 emplacement 275 en-tte 276 volue 375, 390 activation 380 administration 384 architecture 377 en-tte 379 fonctionnalits 375
H
Hbergement virtualis 48 Hello Dolly 275 dcomposition du code 277 .htaccess 341
I
Initialisation de l'extension 293
486
WordPress 3
fichiers 165 de modle 161, 162 footer.php 163 formulaire de recherche 200 functions.php 161, 162 get_header() 168 header.php 185 hirarchie 161, 166 HTML 167 index.php 163, 183 mtadonnes 197 nomenclature 163 sidebar.php 163, 170 style.css 161, 183 TEMPLATEPATH 169 titre 192 options avances 229 page 404 266 personnaliss paramtrage 233 pied de page 242, 259 reset CSS 243 ressources web 141 rtroliens 265 structure 161 style.css 242 thme enfant 238 frameworks 141 premium 140 titre du blog 251 traduction 307 Twenty Ten 157 TinyMCE 344 Trac bogue (trouver) 476 patch 477 premire approche 471 ticket 473 Types de contenus personnaliss 359
Interface d'administration blocage 135 problme 135 SECRET_KEY 130 Subversion 132 Internationalisation 302
J
JavaScripts 344 jQuery 344
K
KSES 352
L
Langages 281
M
Memcached 334 Menus 314 Mode multisite, chemins de fichiers 428
T
Table SQL, cration 328 Taxinomie 334 Thmes avatar 263, 264 catgories 253 champs personnaliss 233 colonne latrale 242, 244, 258 commentaires 260, 262, 265 hirarchiss 260 contenu 242, 246 croquis 241 CSS 241 en-tte 242, 248, 252 extrait 230 fonction 229 fonctionnement 161 fond du blog (CSS) 248 formulaire de recherche 253 gratuit/payant 140 hack CSS 268 insertion vignette 231 style 266 installation 143 Internet Explorer6 267 Internet Explorer7 268 Kubrick 161 liens du blog 258 menu de navigation 252 droulant 255 modle de page 237 modification 146 navigation 252
N
Niveaux 299 nonce 316
O
Options 294 dclaration 297
U
uninstall.php 292 URL rewriting 340
P
Permissions 298 phpDoc 289 phpMyAdmin 324 plugins_loaded 293 poEdit 303 Prrequis techniques 280 Prototype 344
W
Widgets 319 WordPress en tant que CMS afficher une page statique 364 crer taxinomie 367 type de contenu 372 WP_Cron 346 WPDB 323 WP_Http 308 WPLANG 304 wp_options 294 WP_Rewrite 340 WP_Scripts 344
S
Scurit, nonce 316 Shortcode 311 Simple Classifieds 375 Snoopy 308 Structure boucle WordPress 192, 224 colonne latrale 199 contenu des articles 194 CSS 161 dossier images 162 en-tte 191
X
XCache 334
Index Dveloppeur
A
Administrateur (mode multisite) 414 Architecture (mode multisite) 423 Constantes (mode multisite) 413 bbPress 444 BuddyPress 436 WordPress MU (multisite) 402 HTTP (mode multisite) 408 HyperBD (mode multisite) 424
D
Dveloppement (mode multisite) 421
B
Base de donnes (mode multisite) 422 bbPress 443 Correspondance des rles 447 historique 444 taxinomie 446 version franaise 446 WordPress identification commune 447 Intgration 447 Blog 46 BuddyPress 438 dfinition 3 qualits 5 style 139 suppression 416 thmatique 46 Blogosphre tat des lieux 14 historique 11 francophonie 13 origines 10 premiers pas 6 responsabilit 8 vocabulaire 36 BuddyPress 435 avenir 442 communaut francophone 437 fil 440 mises jour de statut 441 mur 441 prsentation 435
E
Extensions 149, 427 Akismet 152 commentaires 153 formulaire de contact 154 installation 149 mise jour 152 mots-clefs 154 ressources web 154 sauvegarde base de donnes 153 sitemaps 153 traduction 457
I
Installation adresse e-mail 58 BuddyPress 436 connexion FTP 52 cration base de donnes 53 blog 53 dernire version WordPress 51 donnes de connexion 50 indexation du blog 58 logiciel FTP 50 titre du blog 58 transfert des fichiers 52 Installation WordPress connexion base de donnes 181 local 176, 181 MAMP 180 XAMPP 177 Interface d'administration 61 actions 103 adresse blog 112 e-mail 113 affichage 102 auteur 103 avatar 106 bibliothque de mdias 71 catgories 88 liens 98 champ de saisie 114 taille 114 champs personnaliss 84 commentaires 103 connexion 61 contenu 66 convertir 114 catgories ou tags 122 cration catgorie 90 galerie 76
F
Fichier config.php, cration automatique 54 supplmentaire (mode multisite) 425 Fonctionnalits bbPress 444 BuddyPress 437 Forum bbPress 443
G
Gestions des menus 155 cration 155 Groupes BuddyPress 440
H
Hbergement 48 bande passante 49 capacit de stockage 49 ddi 48 mutualis 48 prestataires 49 priv 48 taille base de donnes 49 Historique
C
Catgories, insertion 88 Colonne latrale widgetisation 208 widgets 208 Commentaires 220 hirarchisation 213 Connaissances techniques 280
488
WordPress 3
d'criture 114 de l'cran 64, 88 de lecture 118 gnrales 111 outils 122 page de rdaction d'un article 65 permalien de mdia 78 modifier la structure 120 prfixe 122 prvisualisation et enregistrement (article) 86 publication distance 117 article 115, 122 rcriture 122 rfrencement 121 rtroliens et pings 83 services de mise jour 117 suppression article 96 catgories 90 lien 99 page 97 tableau de bord 62, 63 taille des images 79 titre article 65 blog 111 utilisateur 108 version, ancienne 137 vie prive 120 visibilit article 87 domaine personnalis 421 formats d'adresse 404 gestion sites 415 utilisateurs 417 hbergeur 405 HTTP 408 installation 409 interface 413 mapping de domaine 421 menu spcifique 414 mise jour 409 automatiser 419 monte en charge 424 paramtrage 418 Plate-forme de blogs 402 prrequis 407 public 403 rcriture des URL 408 rseaux de blogs 403 serveur 407 site archiver 416 crer 416 sous-domaine 404, 408 sous-rpertoire 404 tables SQL 424 usages 402 utilisation 404 Mots-clefs 91 mu-plugins (mode multisite) 427
lien 99 nouvel utilisateur 109 page 97 date horaires 113 publication d'un article 88 diteur HTML 68 visuel 66 emplacement de stockage des mdias 79 envoi d'article par e-mail 116 tat article 86 publication 86 extrait 83 file de modration 106 flux de syndication 119 gestion 80, 93 articles 95 catgories 90 de liens 99, 101 commentaires 102 liens 98 pages 96, 98 utilisateur 110 identifiant de l'article 85 image envoi 71 insertion 71 importer/exporter 122 insertion autre type de mdia 75 mdia 70, 78 mots-clefs 91 vido (diteur visuel) 81 liste noire 106 menu, navigation 64 mise jour 123 automatique 124 manuelle 127 via une extension 134 modration 105 modification article 96 catgories 90 lien 99 mdia (ou suppression) 81 page 97 mots-clefs 121 navigation 80, 95 onglet Mdias 79 Rglages 79 options 63 avances 83
N
Nom de domaine 46 extension 46
L
Langues (mode multisite) 420 Liste d'amis 439 Logiciel de forum 443 Lyceum (WordPress MU) 423
O
Options (mode multisite) 418
M
MAMP, installation 180 Menu (mode multisite) 414 Messagerie, BudyPress 438 Mise jour, (mode multisite) 419 Mode multisite 399 blog effacer 420 fermer 420 configuration 413, 419 constantes 413 logicielle 407 dveloppement 427 DNS 408
P
Prsentation bbPress 443 Mode multisite 401 Profils, BuddyPress 437
R
Requtes HTTP 308 Rseaux (mode multisite) 403
S
Sites (mode multisite) 415, 421
Index Dveloppeur
Spam, bbPress 445 Sunrise (mode multisite) 426 Systmes de blog b2evolution 17 Blogger 16 Blogspirit 16 Canalblog 16 Dotclear 17 Drupal 18 ExpressionEngine 18 Habari 18 Hautetfort 16 Joueb 16 LiveJournal 17 MySpace 17 Over-blog 16 Serendipity 18 Skyrock blog 16 TextPattern 18 TypePad 17 Typo 18 ViaBloga 16 Vox 17 Windows Live Spaces 17 WordPress 18 WordPress.com 17 Thme bbPress 445 Mode multisite 418, 428 traduction 457 Traduction extension 457 gettext 454 GlotPress 465 interface 466 traduire 467 rgles 462 thme 457 WordPress.com 465
489
WordPress Automattic (socit) 5 b2/cafelog 19 Codex, participer 468 communaut franaise 451 francophone 34 documentation, participer 468 volutions 22 forums d'entraide 451 historique 19 prrequis techniques 19 prsentation 4, 19 vocabulaire 38 WordPress.com 45 WordPress en tant que CMS 363 pages statiques 364 taxinomies personnalises 366 types de contenu personnaliss 371 WordPress.org 45 www. (mode multisite) 413
U
Utilisateurs Mode multisite 417 ajout 417 Utilisations 402
V
Versions, WordPress MU (multisite) 402
X
XAMPP dossier htdocs 181 installation 177
T
Tableau de bord (mode multisite) 415
W
Widgets 147 installation 147 options 148
Le Campus
WordPress 3
V Vous souhaitez h i crer, personnaliser li et grer f facilement il un bl blog, un site i web professionnel ou mme un rseau de sites ? WordPress est le nec plus ultra des plates-formes de publication personnelle, alliant esthtique, standards du Web et utilisabilit. Systme de gestion de contenus (CMS) gratuit et open-source, il est lun des outils de blog les plus populaires et fait tourner plusieurs millions de sites web. Ce livre, crit par trois personnalits de la communaut francophone et internationale de WordPress, est un vritable guide de rfrence. Il vous fera entrer de plain-pied dans la communaut des utilisateurs aguerris en vous livrant lensemble des informations utiles pour comprendre le logiciel et en exploiter tout le potentiel. Cette seconde dition, entirement rvise, couvre toutes les nouveauts de la version 3. Les dbutants pourront construire un blog riche et personnel, et les lecteurs plus expriments approfondiront leurs connaissances techniques pour concevoir thmes et extensions, mais aussi mettre en place un rseau de sites laide de la fonctionnalit multisite intgre. Vous dtiendrez alors toutes les cls pour prendre entirement en main votre site.
propos des auteurs
Xavier Borderie est mainteneur officiel de la traduction franaise de WordPress depuis 2004, co-fondateur de la communaut dentraide WordPress Francophone lance en 2005, et prsident de lassociation du mme nom. Francis Chouquet est webdesigner et crateur de thmes pour WordPress, ainsi que consultant web spcialis dans les blogs. Amaury Balmer est co-fondateur et responsable technique du site WordPress Francophone, et lun des mainteneurs officiels de la traduction de WordPress, ainsi que de celle de bbPress. Il a galement cr plusieurs thmes et extensions de WordPress, dont Simple Tags.
Pearson Education France 47 bis, rue des Vinaigriers 75010 Paris Tl. : 01 72 74 90 00 Fax : 01 42 05 22 17 www.pearson.fr
ISBN : 978-2-7440-4162-4
customer 27921 at Fri Mar 11 19:29:26 +0100 2011 Proprit de Albiri Sigue <tag.tog@gmail.com>