WordPress 3 Pour Le Bloggueur Efficace

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.
com) - 16 Novembre 2010 15:47
F ra n o i s -X av i e r B o i s Laurence Bois
WordPress 3
pourleblogueurefficace
Installation,personnalisation,administration. Rfrencement&marketing.Montisation. Usagenomade(iPhone/iPad,Android).
user 177 at Wed Nov 10 04:01:48 +0100 2010
Pourque linformatique soit un outil etnonun ennemi !

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47
WordPress 3
pourleblogueurefficace
Le moteur de blog professionnel simple et cratif !
WordPress 3, plate-forme et moteur de bloglibre,gratuitetextensibleloisir,est devenu sans aucun doute la solution la plus populaire pour crer et animer un blog esthtique, fonctionnel, ergonomiqueetbienrfrenc. Vritablegestionnairedecontenus(CMS) construit sur PHP et MySQL, il simpose par sa puissance, sa souplesse, son respectdesstandardsduWebetsasimplicitdutilisation,desortequeleblogueur prenne le plus de plaisir tre le plus cratifpossible!
Franois-Xavier Bois est le fondateur de KerniX Software, agence interactive spcialise dans lhbergement et le dveloppement dapplicationsweb(e-commerce,portails,gestionnairesde contenus, intranet/extranet, rseaux sociaux), o ilestnotammentenchargedelaR&Dautourdu frameworkKerniXWebObject(KWO).Ilestlauteur deplusieursouvragessurPHPetMySQL. Fondatrice de lagence de communication BuzzDistrict,Laurence Boisutiliseaussibienlesmdias traditionnels(presse,tlvision,radio)quelesnouveaux(blogs,microblogs,rseaux)pourdonnerde la visibilit ses clients. Elle est galement cratricedeScopalto.com,portailconsacrauxrevues dartetauxmagazinesculturelsfrancophones.
Russir son blog et animer sa communaut : un jeu denfant avec WordPress 3 !
Plongezdanslablogosphreetcomprenez
ouinstallezlemoteurdeblogWordPress
lesspcificitsdunblog(blogroll,permalien,fluxRSS)
CrezvotrepremierblogsurWordPress.com Publiezdesarticles,despagesouducontenumultimdia
(images,vidos,cartes,calendrier,sondage)
Modrezetexploitezlescommentaires Organisezefficacementvoscontenusencatgories
etchoisissezlesbonsmots-clefs(tags)
Bloguezennomade,pare-mailousurunsmartphone Dmarquez-vousparlegraphisme(thmespersonnaliss)
etlajoutdefonctionnalits(extensionsetwidgets)
Dveloppezvotrecommunautvialesrseauxsociaux, Optimisezlesperformancesetscurisezvotreblog Lancez-vousdansledveloppementdevospropres

extensions,thmesetwidgets
Twitteretautrestechniquesdewebmarketing,pouramliorer votrerfrencementetmontiservotreblog
qui sadresse cet ouvrage ?

tous les blogueurs, du nophyte au plus chevronn Aux professionnels de la communication web et du e-marketing Aux administrateurs et intgrateurs de blogs ou sites WordPress Aux dveloppeurs PHP chargs de crer des thmes et extensions pour WordPress
user 177 at Wed Nov 10 04:01:48 +0100 2010
Conception : Nord Compo
user 177 at Wed Nov 10 04:01:48 +0100 2010
WordPress 3
pour le blogueur efficace
Collection Accs libre

Pour que linformatique soit un outil, pas un ennemi !
Russir son blog professionnel. Image, communication et influence la porte de tous T. PARISOT. N12768, 2e dition, 2010, 312 pages. Bien rdiger pour le Web et amliorer son rfrencement naturel. I. CANIVET. N12496, 2e dition, paratre 2011, 412 pages. Lisibilit des sites web. Des choix typographiques au design dinformation. M.-V. BLOND, O. MARCELLIN, M. ZERBIB. N12426, 2009, 326 pages. Ergonomie web. Pour des sites web efficaces. A. BOUCHER. N12479, 2e dition, 2009, 458 pages. Conversion web. Amliorer ses taux de conversion web. S. ROUKINE. prface de P. KOSCIUSKO-MORIZET. N12499, 2009, 270 pages. Russir un projet de site web. N. CHU. N12742, 6e dition, 2010, 256 pages. Russir son site web avec XHTML et CSS. M. NEBRA. N12485, 3e dition, 2010, 334 pages. Premiers pas en CSS et XHTML. CSS 3 et HTML 5. F. DRAILLARD. N12724, 3e dition, 2010, 342 pages. Magento. Russir son site e-commerce. M. BLANCHARD. N12515, 2010, 352 pages. Joomla et Virtuemart. Russir sa boutique en ligne. V. ISAKSEN, T. TARDIF. N12487, 2e dition, 2009, 316 pages. Concevoir et dployer ses sites web avec Drupal 6 et 7. Y. BRAULT, prface dEdwy PLENEL. N12780, 2e dition, 2010, 420 pages. Russir un site web dassociation avec des outils libres ! A.-L. QUATRAVAUX ET D. QUATRAVAUX. N12000, 2e dition, 2007, 372 pages. SPIP 2 Premiers pas pour crer son site avec Spip 2.0.3. A.-L. QUATRAVAUX, D. QUATRAVAUX. N12502, 2009, 300 pages.
Se protger sur Internet. Conseils pour la vie en ligne. X. TANNIER. N12774, 2010, 218 pages. Boostez votre efficacit avec FreeMind, Freeplane et XMind. Bien dbuter avec le Mind Mapping. X. DELENGAIGNE, P. MONGIN. N12696, 2e dition, 2010, 332 pages. Montage vido et audio libre. Du camscope au DVD : prise de vue, montage, post-production. L. BELLEGARDE. N12148, 2010, 412 pages avec DVD-Rom. Scribus. Premires mises en page professionnelles. C. GMY. N12547, 2009, 300 pages. La 3D libre avec Blender 2.49b. O. SARAJA. N12497, 4e dition, 2010, 486 pages avec DVD-Rom. Gimp 2.6. Dbuter en retouche photo et graphisme libre. D. ROBERT. N12480, 4e dition, 2009, 352 pages. Inkscape efficace. Russir ses dessins vectoriels. C. GMY. N12425, 2009, 280 pages OpenOffice.org 3.2 efficace. S. GAUTIER, G. BIGNEBAT, C. HARDY, M. PINQUIER. N12755, 2010, 412 pages avec CD-Rom. Linux aux petits oignons. Les meilleures recettes pour bien dbuter ! K. NOVAK. N12424, 2009, 524 pages avec DVD-Rom. Ubuntu efficace. L. DRICOT, K. NOVAK. N12362, 3e dition, 2009, 360 pages avec CD-Rom. MediaWiki efficace. Installer, utiliser et administrer un wiki. D. BARRETT, adapt par S. BLONDEEL. N12466, 2009, 374 pages. Richard Stallman et la rvolution du logiciel libre. R. M. STALLMAN, S. WILLIAMS, C. MASUTTI. N12609, 2010, 300 pages. conomie du logiciel libre. F. ELIE. N12463, 2009, 195 pages.
O. Iteanu. Lidentit numrique en question. N12255, 2008, 166 pages. e. Slom. Mmento Sites web. Les bonnes pratiques. N12456, 2e dition 2009, 14 pages. a. Boucher. Mmento Ergonomie web. N12386, 2008, 14 pages. R. GOETTER. CSS 2 : pratique du design web. N12461, 3e dition, 2009, 340 pages. J.-M. DEFRANCE. Premires applications Web avec Ajax, jQuery et PHP. N12672, 2010, 474 pages. G. GETE. Mac OS X Snow Leopard efficace. N12586, 2010, 370 pages. S. BORDAGE, D. THVENON, L. DUPAQUIER, F. BROUSSE. Conduite de projet Web. N12665, 5e dition, 2010, 432 pages. V. MESSAGER ROTA. Gestion de projet agile. Avec Scrum, Lean, eXtreme Programming N12750, 2e dition, 2010, 272 pages.
Chez le mme diteur
user 177 at Wed Nov 10 04:01:48 +0100 2010
F ra n o i s -X av i e r B o i s Laurence Bois
WordPress 3
pour le blogueur efficace
Installation, personnalisation, administration. Rfrencement & marketing. Montisation. Usage nomade (iPhone/iPad, Android).
user 177 at Wed Nov 10 04:01:48 +0100 2010
DITIONS EYROLLES 61, bd Saint-Germain 75240 Paris Cedex 05 www.editions-eyrolles.com
Remerciements Alexis Younes, alias Ayo (HYPERLINK http://www.73lab.com www.73lab.com) pour son illustration de fin de chapitres et Nicolas Kovacs pour la relecture.
Le code de la proprit intellectuelle du 1er juillet 1992 interdit en effet expressment la photocopie usage collectif sans autorisation des ayants droit. Or, cette pratique sest gnralise notamment dans les tablissements denseignement, provoquant une baisse brutale des achats de livres, au point que la possibilit mme pour les auteurs de crer des uvres nouvelles et de les faire diter correctement est aujourdhui menace. En application de la loi du 11 mars 1957, il est interdit de reproduire intgralement ou partiellement le prsent ouvrage, sur quelque support que ce soit, sans autorisation de lditeur ou du Centre Franais dExploitation du Droit de Copie, 20, rue des GrandsAugustins, 75006 Paris. Groupe Eyrolles, 2011 pour la prsente dition, ISBN : 978-2-212-12829-1
user 177 at Wed Nov 10 04:01:48 +0100 2010
user 177 at Wed Nov 10 04:01:48 +0100 2010
Marie-Castille et Charles-Louis
user 177 at Wed Nov 10 04:01:48 +0100 2010
Avant-propos
WordPress nest pas un moteur de blog comme les autres ; il sagit aujourdhui de loutil le plus utilis au monde pour publier du contenu sur le Web. Ce succs nest pas uniquement d sa gratuit, sa simplicit (linstallation se fait en quelques clics) ou son volutivit extrme (des milliers dextensions et de thmes sont disponibles). Cette russite repose avant tout sur la philosophie qui anime ce projet depuis lorigine : faire en sorte que le blogueur prenne du plaisir tre le plus cratif possible. Nous sommes ici bien loin des querelles striles autour de licences ou de langages de programmation. Dans la galaxie WordPress, le logiciel en tant que tel nest pas une fin en soi, il ne sagit que dun outil. Les concepteurs cherchent avant tout simplifier la vie des blogueurs et amliorer leur efficacit. Peut-tre y a-t-il dailleurs une leon derrire cette vision. Les nouvelles technologies ne gagnent-elles pas tre portes par des typographes comme Steve Jobs, cofondateur dApple, ou des jazzmen comme Matt Mullenweg, cofondateur de WordPress ?
Pourquoi ce livre ?
Ce livre est un travail collectif quelque peu particulier. Mon coauteur, Laurence Bois, a la double spcificit dtre ma femme et de diriger, tout comme moi, une agence lie au Web. Inutile davouer que nos soires sont bien souvent loccasion dvoquer nos projets respectifs. Ce livre est prcisment issu dune discussion qui nous a fait raliser que nous utilisions tous deux WordPress, mais que nos expertises en la matire taient radicalement diffrentes. Alors que mon agence, KerniX, sintresse des sujets techniques lis au dveloppement, lhbergement et la
Groupe Eyrolles, 2009
user 177 at Wed Nov 10 04:01:48 +0100 2010
WordPress 3
scurit, Laurence sintresse, avec BuzzDistrict, aux aspects dergonomie, de design, de montisation, de visibilit et de communication. De ce constat est ne lide de cet ouvrage : proposer un livre traitant la fois des diffrentes dimensions spcifiques et techniques de WordPress, ainsi que des aspects plus gnraux lis lanimation et lexploitation dun blog. En proposant ce large panorama, notre souhait est avant tout dveiller lattention du lecteur sur la varit des problmatiques qui entourent un blog, des plus techniques (hbergement, scurit) aux plus marketing (rfrencement, rseaux sociaux). En ayant lesprit toutes ces dimensions, le lecteur est mieux quip pour crer et faire vivre son blog.
qui sadresse ce livre ?

Cet ouvrage sadresse un large public. Mis part un chapitre consacr au dveloppement, il ne ncessite aucune connaissance pralable. Un internaute nophyte pourra se familiariser avec la notion de blog, et dcouvrir comment crer son blog et publier ses premiers articles. Les utilisateurs plus avertis pourront parfaire leurs connaissances en e-marketing et dcouvrir toutes les ressources du Web qui permettent denrichir les articles dlments multimdias tels que des vidos, des musiques, des cartes, etc. Les blogueurs les plus avancs dcouvriront les diffrentes techniques permettant de protger et doptimiser leur blog. Les plus aventureux pourront mme comprendre comment dvelopper eux-mmes leurs propres thmes et extensions.
Structure du livre
Les chapitres 1 et 2 plus gnraux, dressent un large panorama de la blogosphre avant de dcrire plus spcifiquement les diffrents aspects qui font lintrt de WordPress. Le chapitre 3 dtaille les diffrents moyens de crer et dinstaller un blog. Le chapitre 4 prsente lespace administration qui permet notamment au blogueur de rdiger ses articles et de modrer les commentaires. Le chapitre 5 montre quil est tout fait possible danimer un blog avec un tlphone mobile.
VIII
user 177 at Wed Nov 10 04:01:48 +0100 2010
Le chapitre 6 prsente les diffrentes techniques qui permettent de modifier lapparence dun blog. La notion de thme y est introduite.
Le chapitre 7 prsente la notion dextensions et montre comment elles peuvent tre trs facilement ajoutes un blog. Le chapitre 8 propose diffrents modules qui peuvent venir enrichir la colonne latrale (Facebook, Twitter, etc.). Le chapitre 9 dcrit comment ajouter un contenu multimdia au sein dun article. Diffrents types de contenus (cartes, agendas, photos, musiques) sont prsents. Le chapitre 10 propose diffrentes techniques qui permettent daccrotre le trafic dun blog. Deux axes sont prsents : le rfrencement et la cration dune communaut. Le chapitre 11 fait un tour dhorizon des solutions qui permettent de gagner de largent grce un blog. Le chapitre 12 indique les diffrents moyens de protger son blog contre le spam et les attaques de pirates. Le chapitre 13 dtaille diffrentes solutions permettant damliorer les performances dun blog WordPress. Le chapitre 14 sadresse aux dveloppeurs dsireux de concevoir des extensions, des widgets ou des thmes. Enfin, un petit lexique permet de rappeler les concepts et termes techniques associs aux blogs, tandis que les quelques sites indiqus dans la webographie vous permettront daller plus loin si vous vous posez encore des questions aprs avoir lu cet ouvrage.
Remerciements
Nous avons eu la chance de pouvoir compter sur le soutien de nombreux amis durant la rdaction du prsent ouvrage. Nous tenons leur adresser nos plus vifs remerciements pour leurs remarques et conseils toujours aussi constructifs quaviss. Un grand merci donc Matre Valrie Aumage, Thomas de Barochez, Frdric-Charles Bois, Pierre-Emmanuel Bois, Maxime Kurkdjian, Danilo Ercoli, Cyril Pierre de Geyer, Ghislain Seguy, Grgoire Toulouse. Nos remerciements vont galement aux diffrents collaborateurs de la maison ddition Eyrolles, qui nous ont accompagns durant cette longue anne : Anne-Lise Banath, Julie Fassler, Sophie Hincelin, Karine Joly, Nicolas Kovacs. Un clin dil particulier Muriel Shan Sei Fan qui a accept ce projet avec un enthousiasme communicatif.
user 177 at Wed Nov 10 04:01:48 +0100 2010
IX
Avant-propos
WordPress 3
Un grand merci enfin la communaut WordPress qui fournit danne en anne un produit toujours plus innovant et performant.
propos des auteurs
Franois-Xavier Bois est fondateur de KerniX Software. Cette agence inter-
active fonde en 2001 est spcialise dans lhbergement et le dveloppement dapplications web (e-commerce, portails, gestionnaires de contenus, intranet/extranet, rseaux sociaux). Il est plus particulirement en charge de la recherche et dveloppement autour du framework de dveloppement web : KerniX Web Object (KWO). Il est galement lauteur de plusieurs ouvrages consacrs PHP et MySQL. Fondatrice de lagence de communication BuzzDistrict, Laurence Bois utilise aussi bien les mdias traditionnels (presse, tlvision, radio) que les nouveaux (blogs, microblogs, rseaux sociaux) pour donner de la visibilit ses clients. Elle est galement cratrice de scopalto.com, portail consacr aux revues dart et aux magazines culturels francophones.
X
user 177 at Wed Nov 10 04:01:48 +0100 2010
Table des matires

1. POURQUOI CHOISIR WORDPRESS ? ................................. 1 Quest-ce quun blog ? 2 Pourquoi bloguer ? 2 Bloguer pour le plaisir 3 Bloguer pour communiquer 4 Bloguer pour gagner de largent 4 Bloguer pour gagner en notorit 4 Les blogs comme relais des mdias traditionnels 5 Aspects juridiques 5 Responsabilit 5 Droit dauteur et protection des contenus 6 Anonymat et droit de rponse 6 Informatique et liberts : la Cnil 7 Hbergement sur une plate-forme trangre 8 Droit de citation et de reproduction 8 Choix du nom de domaine 8 Confidentialit 9 O trouver des blogs ? 9 Google Blogs 9 Technorati 10 Les agrgateurs : Wikio, OverBlog et PaperBlog 11 Tendances de la blogosphre 13 Profil des blogueurs 13 volutions 14 Quest-ce que WordPress ? 17 volutions majeures 17 Forces et faiblesses 18 Des qualits nombreuses et varies 18 Une plate-forme trs extensible 19 Quelques faiblesses 21 Les deux visages de WordPress 22 La plate-forme WordPress.com 22 Avantages 23 Inconvnients 24 Le moteur WordPress 25 Les concurrents de WordPress 25 Movable Type 26
user 177 at Wed Nov 10 04:01:48 +0100 2010
Blogger 26 Dotclear 26 OverBlog 28 Perspectives 28 2. ANATOMIE DUN BLOG .................................................31 Structure gnrale 32 Les articles 33 Le titre 33 Le corps 33 Les tumblelogs au royaume de la concision 34 Les vlogs pour bloguer en vido 34 Les podcasts, blogs couter 35 Les permaliens 35 Les commentaires 36 Les listes 36 La colonne latrale 37 La section propos 37 Les catgories 37 Les tags 38 Le blogroll 39 Les archives 40 La navigation 40 Navigation par pages 41 Navigation par articles 41 Filtrage par mtadonnes 41 Moteur de recherche 41 Les flux de syndication 41 Principe gnral 42 Sabonner un flux 45 Les agrgateurs de flux 45 Procdure dabonnement 48 Les formats des flux 50 RSS 51 Atom 53 Podcasts 53
XI
WordPress 3
3. CRER SON BLOG ........................................................ 57 Crer un blog sur WordPress.com 58 Installer une version autonome de WordPress 60 Technologies requises 60 Installer WordPress chez un hbergeur 60 Comment choisir son hbergeur ? 60 Informations transmises par lhbergeur 61 Vrifications concernant les permissions 61 Tlchargement des sources 62 Transfert des sources 63 Installation 65 Installation sous Windows 69 Installer WampServer 69 Modifier la configuration dApache 71 Crer la base de donnes 71 Installation sous Mac OS X 72 Dmarrer Apache 73 Installer MySQL 75 Installer phpMyAdmin 76 Installer WordPress 77 Installation sous GNU/Linux 78 4. PRENDRE EN MAIN LESPACE DADMINISTRATION ............ 83 Lorganisation gnrale 85 Len-tte 85 Le pied de page 85 Lespace central 86 Les rubriques 86 Lespace de travail 87 Le tableau de bord 88 Les articles 90 crire un article 91 Titre et contenu 91 Lditeur 92 tat et visibilit 95 Catgories et mots-clefs 97 Enregistrement automatique 99 Blocs dinformations facultatives 99 La liste des articles 101 La corbeille 103 Les diffrents mdias 104 La bibliothque 107 diter les images 109 Les pages 110 Les commentaires 111 Modration 111 Modration dans lespace dadministration 111
Modration en ligne 113 Modration depuis ladresse e-mail 113 Paramtrage 115 Raccourcis clavier 116 Les liens 117 Catgories 118 Autres proprits des liens 119 Cibles 119 Relations 119 Le gestionnaire de menus 120 Les utilisateurs 123 5. BLOGUER EN NOMADE ...............................................127 WordPress.com pour mobiles 128 Applications smartphone 129 Bloguer sur iPhone 130 Bloguer sous Google Android 134 Bloguer depuis un BlackBerry 137 Bloguer par e-mail 140 Sur une installation autonome de WordPress 140 Sur WordPress.com 141 6. MODIFIER LAPPARENCE DUN BLOG ............................145 Changer de thme 146 Quest-ce quun thme ? 146 Thme par dfaut 147 Installer un thme 149 Choisir un nouveau thme 151 Installation manuelle 153 Gnrer un thme 155 Adapter les options dun thme 157 Modifier les feuilles de style 160 Structure dune page web 160 Modifier les rgles CSS 161 Thme enfant 162 7. AJOUTER DES FONCTIONNALITS .................................167 Grer les extensions 168 Statut dune extension 169 Modification 170 Suppression 170 Configuration 171 Installer une extension 172 Installer depuis lespace dadministration 172 Installer depuis le portail 174 Cas pratiques 176 Installer un formulaire de contact 176 Ajouter un forum de discussion 182
XII
user 177 at Wed Nov 10 04:01:48 +0100 2010
8. WIDGETS ET COLONNE LATRALE ................................ 187 Grer les widgets 188 Configuration 190 Suppression et dsactivation 191 Les widgets standards 191 Archives 192 Articles rcents 192 Calendrier 192 Catgories 193 Commentaires rcents 193 Flux 193 Liens 194 Mta 194 Menu personnalis 195 Nuage de mots-clefs 195 Pages 195 Recherche 196 Texte 196 Ajouter un nouveau widget 196 Installer une extension de type widget 196 Importer un widget HTML 198 Des widgets pour afficher son statut 200 Diffuser ses derniers tweets 200 Facebook 202 Google Buzz 203 Les Google Web Elements 205 Traduction automatique du blog 206 Calendrier dvnements 207 Des widgets pour diffuser ses contenus 209 Badge Flickr 209 Videowall Dailymotion 210 9. PROPOSER DES CONTENUS MULTIMDIAS ..................... 213 Comment inclure un contenu multimdia ? 214 Utiliser des shortcodes 214 Modifier le code HTML 215 Publier des contenus multimdias via les services en ligne 217 Insrer une carte via Google Maps 217 Intgrer une vido 219 Inclure un fichier audio 222 Ajouter une galerie photo Flickr 223 Partager un PDF via Issuu 224 Intgrer un livre depuis Google Livres 226 Diffuser une prsentation via SlideShare 228 Publier un sondage via PollDaddy 231 Publier un calendrier dvnements via Google Agenda 236
10. VISIBILIT ET COMMUNAUT .....................................239 Augmenter la visibilit 240 Loptimisation du rfrencement 240 Limportance du contenu 240 Modifier le titre de page 241 Lchange de liens 243 Les liens sponsoriss 244 Conseils techniques 245 Lindexation 246 La soumission directe 246 Les services de notification 247 Le sitemap 247 Les Webmaster Tools 248 Le social bookmarking 250 Les rseaux sociaux 254 Twitter 254 Facebook 257 Le pingback 259 Dvelopper sa communaut 259 Facebook 259 La liste de diffusion (newsletter) 261 Les extensions 261 FeedBurner 262 Google Friend Connect 266 Mesurer son audience 270 Lextension WordPress.com Stats 270 Google Analytics 271 Installation 271 Tableau de bord 272 Sources de trafic 273 Visiteurs et contenu 274 11. GAGNER DE LARGENT .............................................277 La publicit 278 Afficher des liens sponsoriss 278 Devenir sa propre rgie 280 Placer de la publicit dans le flux RSS 282 Augmenter le nombre de pages vues 285 Mettre en place une pagination 285 Proposer des articles lis 287 Diviser larticle en parties 288 Laffiliation un site e-commerce 288 Devenir partenaire dAmazon 289 Gnration dun widget 289 Obtenir un lien vers un produit spcifique 292 Suivi 293 Devenir partenaire deBay 293

user 177 at Wed Nov 10 04:01:48 +0100 2010
XIII
Table des matires
WordPress 3
Autres sources de revenus 295 Articles sponsoriss 295 Recevoir des dons 296 Vendre des produits 297 12. SPAM ET SCURIT .................................................. 301 Scurit : protger son blog contre les attaques 302 Mettre jour un blog et ses extensions 302 Sauvegarder ses donnes 306 Loutil dexport WordPress 307 La sauvegarde manuelle 308 Autres pistes 310 Identifiant et mot de passe 310 Utiliser le protocole SSL 311 Lutter contre le spam 311 Paramtrage des commentaires 312 Lextension Akismet 313 Captcha 314 13. AMLIORER LES PERFORMANCES ............................... 317 Le systme de cache 318 Les sites dynamiques 319 Le principe du cache 320 Installer un gestionnaire de cache 320 La compression de donnes 322 Installer le mod_deflate 323 Contrler le bon fonctionnement de la compression 323 Les optimisations de PHP 324 Amliorer les performances de MySQL 324 Optimisation des tables 325 Mise en cache des requtes 326
Le protocole PuSH 326 14. DVELOPPER SOUS WORDPRESS ...............................329 Dvelopper une extension 330 Principe gnral 330 Utiliser un hook daction 331 Utiliser un hook de filtre 332 Crer un widget 334 laborer un thme 337 Construction dun thme 338 Les structures de thmes 344 Tester un thme 346 Exploiter les services web 347 Usage et intrt des services web 347 Protocoles 347 LEXIQUE ...................................................................351 WEBOGRAPHIE ..........................................................353 Actualits 353 En anglais 353 En franais 353 Pour les dveloppeurs 353 Extensions 353 Thmes 354 Automattic 354 Exemples de blogs WordPress 354 INDEX ......................................................................355
XIV
user 177 at Wed Nov 10 04:01:48 +0100 2010
user 177 at Wed Nov 10 04:01:48 +0100 2010
chapitre
user 177 at Wed Nov 10 04:01:48 +0100 2010
Pourquoi choisir WordPress ?
SOMMAIRE
B quoi correspond un blog ?
Malgr les bouleversements rguliers et profonds que connat le Web, les blogs, en voluant et en collant aux besoins des internautes, sont parvenus se maintenir comme une forme dexpression de rfrence sur la Toile. Voici tout dabord un panorama rapide de lunivers des blogs la blogosphre ainsi quune prsentation complte de WordPress, en insistant notamment sur les deux notions distinctes qui se cachent derrire ce nom : WordPress.org et WordPress.com.
B Les tendances
de la blogosphre
B Quest-ce que WordPress ? B Forces, faiblesses

et concurrence MOTS-CLEFS
B blog B histoire B droit B WordPress.org B WordPress.com B microblog B rseaux sociaux

user 177 at Wed Nov 10 04:01:48 +0100 2010
WordPress 3
Quest-ce quun blog ?

Un blog est un site web qui permet son auteur (le blogueur) de sexprimer sur sa vie et ses centres dintrt, de partager ses rflexions et ses expriences. Chaque texte publi sur le blog est appel un article (ou billet) et peut aussi bien proposer du contenu textuel que des lments multimdias tels que des images ou des vidos. Les blogs se diffrencient des sites perso et autres E-Zines par les caractristiques suivantes quils partagent : un blog est le plus souvent (mais pas toujours) maintenu par un seul auteur (le blogueur) autour dun thme principal ; sa structure est similaire dun blog lautre ; il dispose quasi systmatiquement dune barre de titre en haut et dune colonne troite sur le ct. Les articles sont publis rgulirement et lists de faon antchronologique (du plus rcent au plus ancien). En plus de larchivage par date, les articles sont galement associs des catgories et des mots-clefs (souvent appels tags). Cette classification multiple a pour but de faciliter laccs linformation. Dautres fonctionnalits sont communes la grande majorit des blogs. Les lecteurs ont la possibilit de ragir aux articles en laissant des commentaires. Le dbat et lchange sont deux piliers fondamentaux des blogs. Un article dispose dune adresse fixe appele permalien (permalink en anglais). Ce lien permet daccder une page o seul larticle est affich. Un mcanisme de rtrolien (pingback/trackback) permet de tisser de faon automatique un rseau entre les articles et les blogs les citant. Un blog dispose dun flux RSS donnant la possibilit aux lecteurs de sabonner et dtre tenus au courant de faon automatique ds quun article est publi sur le blog.
Pourquoi bloguer ?
La publication dun article par semaine est un rythme minimum pour fdrer une communaut de lecteurs autour dun blog. Entre llaboration dun contenu original, lcriture et la relecture, la rdaction dun article ncessite facilement une heure de travail. Il sagit donc dun investissement en temps important qui ncessite davoir clairement identifi ses motivations avant de se lancer dans laventure.
2
user 177 at Wed Nov 10 04:01:48 +0100 2010
IL TAIT UNE FOIS Naissance des blogs

Le terme anglais log signifie journal de bord . Le mot blog correspond tout simplement la fusion des mots Web et log ; un blog est donc un journal de bord en ligne . Le premier blog est quasi aussi vieux que le Web dans la mesure o le crateur du Web, Sir Tim Berners-Lee, ditait lui-mme une page o il tenait informs les premiers internautes des volutions de la Toile. Jorn Barger fut, quant lui, le premier internaute, en 1997, parler de weblog. La contraction en blog napparut que deux ans plus tard suite une erreur typographique de Peter Merholz. Les vtrans du journal en ligne concevaient lorigine leurs pages la main comme de vritables dveloppeurs web. Des moteurs firent cependant bien vite leur apparition pour faciliter la vie des internautes novices. La fin des annes 1990 vit ainsi lapparition de plates-formes de gestion de blogs en ligne telles que Open Diary, LiveJournal et Blogger.
Cela tant dit, il convient de relativiser le risque en rappelant que la cration dun blog est souvent gratuite et quil peut galement tre intressant de se lancer simplement pour voir comment ragissent les premiers lecteurs. La consultation des premires statistiques, la lecture des premiers commentaires parviennent souvent inciter le blogueur prolonger laventure.
Bloguer pour le plaisir

Le besoin de sexprimer, de partager des expriences ou des connaissances reste la motivation principale des blogueurs. Les trois quarts des blogs correspondent en effet des blogs personnels. la diffrence dun mdia traditionnel (journal, radio, tl), la cration dun blog ne cote presque rien et ne ncessite gnralement pas de retour sur investissement. Cette libert permet aux blogueurs de couvrir des milliers de sujets, des plus srieux aux plus spcialiss, voire loufoques ! La diversit culturelle propose par les blogs sinscrit dans la mtaphore de la longue trane (long tail) dcrite par Chris Anderson en 2004. En analysant les ventes dAmazon, ce rdacteur en chef du magazine Wired sest en effet aperu que la somme des faibles ventes de produits spcialiss (ou niches) tait quivalente (voire suprieure) aux ventes massives des quelques produits phares. De la mme manire, la blogosphre permet des millions de blogs de rencontrer un lectorat cibl et passionn, qui trouve plus dintrt dans ce type de contenu spcialis que dans luniformit ambiante des mdias traditionnels. En associant cela les agrgateurs de flux de syndication (RSS ou autre), le Web permet chaque internaute de se crer son propre mdia, en slectionnant exactement les sujets qui lui tiennent cur (dans le domaine du travail ou du divertissement).
user 177 at Wed Nov 10 04:01:48 +0100 2010
RETENIR Un outil rvolutionnaire

Avec les blogs, ltre humain dispose pour la premire fois dun outil lui permettant facilement, instantanment et gratuitement de sadresser au reste de lhumanit. Les problmatiques dinvestissement lourd, de diffusion complexe nexistent plus dans le cadre de ce nouveau mdia.
1 Pourquoi choisir WordPress ?
WordPress 3
Figure 11
Les millions de blogs spcialiss drainent autant de trafic que les quelques blogs les plus populaires.
Bloguer pour communiquer

Les entreprises ont assez vite peru lintrt du blog. Elles ont notamment compris limportance de communiquer elles-mmes plutt que de laisser le champ libre des blogueurs sans talent ou, pire, des dtracteurs. Elles ont galement pu constater le rejet de la publicit traditionnelle de la part de la jeune gnration et se sont bien vite rendu compte quil tait important de publier frquemment, sans trop de calcul ni de grandiloquence. Les blogs contribuent dans une certaine mesure rapprocher les marques de leurs consommateurs.
Bloguer pour gagner de largent

50 % des internautes lisent aujourdhui des blogs de faon rgulire. Ce trafic gigantesque peut par consquent tre facilement montis grce la publicit. Certains blogueurs ont bien compris la situation et ont transform leur blog en petite entreprise. 50 % des blogs contiennent aujourdhui de la publicit. Un blog disposant dun trafic de 100 000 visites par mois est en mesure de gnrer jusqu 75 000 dollars de chiffre daffaires annuel.
ATTENTION Spam
100 000 blogs de spam (splogs) se crent chaque jour. Ces blogs sont uniquement l pour crer du trafic factice vers dautres sites et augmenter le chiffre daffaires des spammeurs.
Bloguer pour gagner en notorit

En tant que mdia, un blog donne de la visibilit son auteur, qui se cre sa propre tribune. Hommes et partis politiques ont trs vite exploit cet espace de communication pour prsenter leurs ides et attirer de nouveaux sympathisants. La blogosphre prend galement une place de plus en plus importante durant les campagnes lectorales en permettant, de collecter des fonds (voir notamment la campagne de Barack Obama aux tats-Unis).
4
user 177 at Wed Nov 10 04:01:48 +0100 2010
Les blogs comme relais des mdias traditionnels

Devant le dclin aussi constant quirrmdiable des mdias traditionnels (journaux tlviss, presse quotidienne, radio), de nombreux journalistes ont trouv dans le blog un format leur permettant de partager leurs analyses et rflexions de manire souple, spontane et rgulire. Les mdias traditionnels, conscients de cette tendance, proposent tous sur leur site une rubrique regroupant les blogs de leurs journalistes.
EXEMPLES Le blog, relais des mdias

Radio :
B http://blog.rtl.fr
Presse :
B http://www.lefigaro.fr/blogs/
Tlvision :
B http://blog.france2.fr/portal.php
Figure 12
Page regroupant les blogs des journalistes de RTL
Aspects juridiques
En publiant des contenus, le blogueur se retrouve soumis un certain nombre de lois et dobligations. Avoir connaissance de ces principes permet de mieux mesurer la responsabilit induite par la possession dun blog.
Responsabilit
Le blogueur, en tant quditeur, est responsable des articles publis sur son blog. Toutefois, il nest pas responsable des commentaires et autres contenus directement posts sur son blog par des tiers, condition : quil neffectue aucun contrle a priori (cest--dire avant publication effective) sur ces contenus ; selon une jurisprudence rcente et controverse, quil ne tire aucun revenu financier, notamment publicitaire, de la publication de ces contenus ;
user 177 at Wed Nov 10 04:01:48 +0100 2010
WordPress 3
quen cas de plainte concernant les contenus posts, il agisse promp-
tement pour retirer les contenus litigieux.

Par ailleurs, le blogueur doit toujours permettre ses lecteurs de rapporter un abus.
Droit dauteur et protection des contenus

EN PRATIQUE Copyright
Les mentions de copyright nont aucune valeur constitutive en droit franais. Lapposition de ces mentions correspond un usage import des tats-Unis o cette mention dispose dune relle valeur pour tenter de freiner certaines vellits de plagiat.
Il est important de savoir quen droit franais, comme dans la plupart des pays, le droit dauteur nat sur la tte de lauteur en mme temps que la cration de son uvre. Un article est ainsi protg ds sa rdaction et ne peut par consquent tre copi dfaut dautorisation. Lexistence ou labsence dune mention de copyright au bas dun contenu ne modifie en rien cette situation. Alors quil est plus ais dans un mdia traditionnel de savoir qui est lauteur dun texte publi, cela se rvle plus compliqu sur le Web, o rgnent le copier-coller et la publication instantane. Il peut par consquent tre utile pour des blogueurs soucieux de se voir attribuer avec certitude la paternit de leurs articles (et autres contenus) de samnager la preuve de leur cration une date la plus proche possible de leur cration effective. Pour cela, le blogueur peut utilement avoir recours au dpt de ses textes et autres contenus sous enveloppes Soleau (INPI), ou se les adresser par courrier recommand avec accus de rception (courrier quil conviendra videmment de ne pas ouvrir).
SAVOIR Enveloppe Soleau

Lenveloppe Soleau est un produit de lInstitut national de la proprit industrielle (INPI), qui permet aux auteurs de dater de faon certaine la cration de leur uvre et de les identifier comme auteur.
B http://www.inpi.fr
Anonymat et droit de rponse

SAVOIR WordPress et la LCEN
En stockant, en plus du nom et de ladresse e-mail, ladresse IP de linternaute ainsi que lheure du dpt, le systme de commentaires de WordPress est en accord avec la LCEN.
La loi pour la confiance dans lconomie numrique (LCEN) prcise que le blogueur, lorsquil crit en tant que personne physique titre non professionnel, peut rester anonyme. Sa seule obligation est de fournir ses coordonnes lhbergeur, qui sera lentit vers laquelle se tourneront les plaignants, en cas de litige, pour obtenir lidentit du blogueur. linverse, sil sagit dun blog dit titre professionnel ou par une personne morale, il doit tre fait mention sur le site des lments dinformation suivants. Si le site est dit par une ou plusieurs personnes physiques : leurs nom, prnom, domicile, adresse e-mail et numro de tlphone et, si elles sont assujetties aux formalits dinscription au Registre du commerce et des socits (RCS) ou au Rpertoire des mtiers (RM), le numro de leur inscription. Si le site est dit par une personne morale : sa dnomination ou raison sociale, son sige social, son numro de tlphone et, sil sagit dune entreprise assujettie aux formalits dinscription au Registre du
6
user 177 at Wed Nov 10 04:01:48 +0100 2010
commerce et des socits ou au Rpertoire des mtiers, son numro dinscription, son capital sociale, ladresse de son sige social. Dans tous les cas : le nom du directeur de la publication (pour une personne morale, ce sera son dirigeant) et le nom, la dnomination ou raison sociale et ladresse, ainsi que le numro de tlphone de lhbergeur du site. Avec le principe de responsabilit en cascade, le blogueur passe du statut dditeur celui dhbergeur vis--vis des internautes qui laissent des commentaires sur son blog. Ainsi, il appartient au blogueur de recueillir les informations permettant didentifier les personnes physiques ayant post des contenus sur son blog. Il est par consquent recommand dobliger ces personnes renseigner leurs nom, prnom et adresse e-mail en activant le paramtre adquat dans linterface dadministration Rglages>Discussion de WordPress. Le droit de rponse est un principe qui permet toute personne cite au sein dun texte public de faire une requte lditeur afin quil puisse apporter un complment dinformation. Cette rponse doit apparatre sous larticle vis. Sil est susceptible de se retrouver dans une telle situation, le blogueur doit absolument avoir prvu un moyen dtre contact sur son blog (adresse e-mail, formulaire de contact).
ATTENTION Changements venir

La diffrenciation entre blogueurs professionnels et non professionnels tant de plus en plus difficile tablir, le Snateur Jean-Louis Masson a propos en mai 2010 une loi visant interdire lanonymat des blogueurs non professionnels.
CONSEIL Respect de la vie prive :

attention, danger !
Le fait quun contenu disparaisse du Web ne signifie pas quil nexiste plus. Sans nous prvenir, des socits sont, sans aucun doute, en train darchiver lintgralit du Web. Elles seront par lmme en mesure, dans plusieurs dizaines dannes, de ressortir tout contenu publi sur le Web un moment donn. Il est par consquent essentiel de rester vigilant et de toujours prendre en compte les risques vis--vis de la vie prive ou professionnelle. Cela est dautant plus vrai pour la jeune gnration qui semble trop souvent incapable de diffrencier vie publique et vie prive. Signe des temps, les recruteurs (emplois, coles) ont dsormais lhabitude daller fouiller sur le Web pour dcouvrir les faits darmes de leurs postulants. R Xavier Tannier, Se protger sur Internet, Eyrolles, Accs libre, 2010
Informatique et liberts : la Cnil

En collectant des informations personnelles relatives aux internautes qui dposent des commentaires, le blogueur se retrouve dans lobligation de se conformer aux dispositions de la loi informatique et liberts du 6 janvier 1978. ce titre, il doit prciser aux utilisateurs dont les donnes sont collectes : qui ces donnes sont destines, lobjet du traitement entrepris et la faon dont ces utilisateurs peuvent exercer leurs droits dopposition, daccs et de rectification concernant les donnes traites. Le blogueur doit galement se conformer aux rgles de dclaration applicables auprs des services de la Commission nationale de linformatique et des liberts (Cnil). Cette dmarche doit tre ralise par le responsable du site et peut se faire en ligne, sur le site cnil.fr. Compte tenu du dveloppement fulgurant du Web (et notamment des blogs), la Cnil a fait preuve de pragmatisme en dcidant en 2005 de dispenser de dclaration les sites web et donc les blogs diffusant ou collectant des donnes caractre personnel mis en uvre par des particuliers dans le cadre dune activit exclusivement personnelle (Dispense n 6 Dlibration n 2005-284 du 22 novembre 2005).
B http://www.cnil.fr/en-savoir-plus/
deliberations/deliberation/delib/87/

user 177 at Wed Nov 10 04:01:48 +0100 2010
WordPress 3
Hbergement sur une plate-forme trangre

WordPress.com hberge ses serveurs aux tats-Unis. Le blogueur franais ne doit surtout pas considrer quil est protg dune quelconque manire par cet tat de fait. Lemplacement des serveurs est souvent sans consquence sur le droit applicable vis--vis des utilisateurs franais.
Droit de citation et de reproduction

Le blogueur a le droit de publier une citation courte dune uvre artistique textuelle ou musicale. La taille de la citation varie cependant en fonction de luvre originale. Citer un passage dun livre est envisageable alors que lextraction dun paragraphe entier dun court article ne serait pas acceptable. La notion de courte citation nest donc pas lie un nombre de mots ! Le blogueur a en revanche lobligation de citer ses sources et de faire mention de lidentit (nom, prnom) de lauteur. Il en va tout autrement dune uvre graphique telle quune photo ou un logo. De telles uvres ne peuvent tre reproduites, mme en basse rsolution. La seule exception est la reproduction duvres tombes dans le domaine public. Si lauteur de luvre est mort depuis plus de 70 ans, le blogueur peut se permettre de proposer une reproduction de luvre, en veillant nanmoins ne pas porter atteinte aux droits moraux de lauteur, qui sont quant eux imprescriptibles. Il sagit pour lessentiel du droit la paternit (le nom de lauteur doit tre mentionn) et du droit au respect de luvre (luvre ne doit pas tre prsente dans des conditions qui lui portent prjudice).
ATTENTION Est-on autoris faire des liens ?
ternel sujet de polmiques, un blogueur est bien autoris insrer un lien vers un site. Attention cependant ne pas porter prjudice au site vers lequel pointe le lien. Par exemple, placer un lien vers le site dune marque dalcool au milieu dune page consacre lalcoolisme pourrait dans certaines conditions tre problmatique.
Choix du nom de domaine

Pour le choix des noms de domaine, il est vivement dconseill de jouer avec le nom des marques. Cela est dautant plus vrai avec des marques notoires telles que Coca Cola, Apple ou Chanel. Si, en revanche, un achat de nom de domaine est antrieur la date de cration dune marque, le blogueur est jusqu prsent, en principe, protg par la jurisprudence.
8
user 177 at Wed Nov 10 04:01:48 +0100 2010
Confidentialit
Un employ a un devoir de loyaut et de discrtion vis--vis de son entreprise. Ces devoirs imposs par la loi sont souvent doubls dengagements de confidentialit trs stricts insrs dans les contrats de travail. Il est par consquent fortement dconseill de divulguer des informations concernant son employeur sur son blog. Mme le vertueux Google na pas support que Mark Jen, un de ses employs, divulgue des informations confidentielles sur son blog personnel. La sanction ne se fit pas attendre, il fut licenci sur-le-champ !
TENDANCES Inquitude
19 % des blogueurs sont dsormais proccups de ce que leur employeur pourrait penser de leur blog.
O trouver des blogs ?

Outre les moteurs de recherche classiques, il existe des outils spcialement ddis la recherche de blogs.
Google Blogs
Le moteur de recherche le plus performant pour retrouver des articles est sans doute Google Blogs : blogsearch.google.com. Sa force rside dans la rubrique Recherche avance, qui propose de nombreux filtres : priode, langue, auteur.
B http://blogsearch.google.com
Figure 13
Interface de recherche avance de blogsearch.google.com
La page daccueil liste les sujets les plus populaires du moment sur la blogosphre, qui peuvent tre filtrs grce diffrents thmes disponibles sur la gauche. La colonne de droite propose, quant elle, les requtes les plus frquentes.

user 177 at Wed Nov 10 04:01:48 +0100 2010
WordPress 3
Figure 14
La page daccueil de Google Blogs permet de reprer les sujets chauds de la blogosphre.
Technorati
B http://technorati.com
Lautre moteur de recherche darticles de blogs incontournable est Technorati (technorati.com). Mais linverse de Google Blogs, Technorati ne propose plus depuis 2009 que des articles crits en anglais. Il dispose cependant dune fonctionnalit intressante, en permettant de rechercher soit des articles (posts), soit des blogs.
Figure 15
Page daccueil de Technorati
10
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 16
Recherche disponible par blogs ou par articles
Technorati est extrmement connu pour ses classements des blogs les plus populaires : http://technorati.com/blogs/top100. Le site propose galement des classements par thmes sur la page http://technorati.com/blogs/directory. En plus dindiquer le classement du blog, la liste propose galement lvolution du positionnement.
Figure 17
Les flches verte et rouge sur la gauche permettent de visualiser si le blog gagne ou perd en popularit.
Les agrgateurs : Wikio, OverBlog et PaperBlog

Le site wikio.fr propose des classements de blogs franais regroups suivant une trentaine de grandes thmatiques : http://www.wikio.fr/blogs/top. Ce type de site est qualifi dagrgateur dans la mesure o cest au blogueur de sinscrire pour voir ses articles indexs par Wikio.
B http://www.wikio.fr

user 177 at Wed Nov 10 04:01:48 +0100 2010
11
WordPress 3
Figure 18
Classement des Top Blogs de la catgorie High-Tech (technologies nomades)
B http://www.over-blog.com B http://www.paperblog.fr
Les sites OverBlog (over-blog.com) et PaperBlog (paperblog.fr) sont deux autres agrgateurs franais darticles. Tous deux mettent en avant sur leur page daccueil les articles les plus apprcis du moment, ainsi quune slection de la rdaction. OverBlog propose la fois un classement par rubrique et un annuaire de blogs. PaperBlog a, quant lui, la spcificit de proposer les articles en consultation intgrale. Cette situation nest dailleurs pas optimale pour le blogueur, qui risque de perdre du trafic.
12
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 19
Page daccueil dOverBlog
Tendances de la blogosphre
Technorati, en publiant chaque anne un tat de la blogosphre , permet de dtecter certaines tendances.
Profil des blogueurs

Du point de vue de la motivation, prs des trois quarts des blogueurs sont des passionns qui crivent pour le plaisir, publiant en moyenne un article par semaine. Le quart restant se divise entre les blogueurs occasionnels (15 %), qui esprent amliorer leurs fins de mois, et les blogueurs professionnels, pour lesquels les blogs sont la principale source de revenus. Ces derniers se rpartissent eux-mmes entre les indpendants, qui crivent dans le cadre de leur propre blog (9 %), et ceux qui crivent pour des blogs dont ils ne sont pas les crateurs.

user 177 at Wed Nov 10 04:01:48 +0100 2010
13
WordPress 3
TENDANCES Cocorico !
La France est au premier rang mondial en nombre de blogs par internaute.
Au niveau sociodmographique : deux tiers des blogueurs sont des hommes ; 60 % ont entre 18 et 44 ans ; la majorit a fait des tudes et dispose de revenus confortables ; la moiti nen est pas son premier blog ; 68 % bloguent depuis plus de deux ans ; plus de la moiti passe par des plates-formes de blogs gratuites en ligne ; les Amricains reprsentent peu prs la moiti des blogueurs, et les Europens, un quart. Ainsi, les blogueurs sont ceux quon appelle en anglais des early adopters ; ils aiment les nouvelles technologies et ont tendance trs vite adopter les outils qui leur sont proposs : flux RSS, commentaires, applications, smartphones. Plus de 130 millions de blogs ont t crs dans le monde. Chaque jour, sont crs 100 000 nouveaux blogs et 1,5 millions darticles publis.
volutions
Initie par les blogs, la publication de contenu grand public a largement volu ces dernires annes. Deux tendances fortes ont merg : le microblogging et les rseaux sociaux. Leur efficacit rside notamment dans leur caractre addictif . Plus de la moiti des membres de Facebook consulte sa page de faon quotidienne. Ces services profitent de la mise en commun des contenus des utilisateurs pour crer des pages qui senrichissent de faon automatique. Cette dimension est un avantage important par rapport aux blogs o, en dehors des commentaires, le blogueur est contraint de produire luimme des articles pour faire vivre son site et attirer des visiteurs. Twitter et le microblogging
TENDANCES Twitter mania
Les trois quarts des blogueurs utilisent Twitter.
Twitter est une plate-forme de microblog. Le terme micro est directement li au fait quun message Twitter (un tweet) ne peut contenir plus de 140 caractres (la taille dun SMS). De cette contrainte dcoule un usage spcifique Twitter : publication frquente (plusieurs fois par jour) et consultation en continu. Le slogan de Twitter est en quelque sorte : Que fais-je en ce moment ?
14
user 177 at Wed Nov 10 04:01:48 +0100 2010
TENDANCES Twitter en quelques chiffres

110 millions dutilisateurs. Une croissance de 1500 % sur les trois dernires annes. 55 millions de tweets par jour.
Figure 110
Ajout dun tweet
Mdia du direct par excellence, Twitter est devenu incontournable pour la propagation dactualits chaudes . Le mcanisme de retweet, qui permet de reprendre un tweet pour le diffuser son rseau, accentue la dimension virale.
Figure 111
Deux actions peuvent tre ralises sur chaque tweet : rpondre lauteur et diffuser le tweet ses abonns (ou retweeter).
Une page Twitter affiche les tweets de lauteur ainsi que ceux des personnes quil suit (followers). Dans un tweet, les caractres # et @ ont un rle particulier lorsquils sont situs au dbut dun mot : avec un # initial, le terme est qualifi de hashtag et peut sapparenter un mot-clef associ au tweet ; le caractre @ permet, quant lui, de spcifier un compte Twitter (nom dutilisateur qui sadresse ce tweet).
Figure 112
Cliquer sur le hashtag #MayDay dclenche une recherche sur le mot-clef.
Figure 113
Le lien plac sur abock est cr automatiquement, il permet daccder la page de cet utilisateur.

user 177 at Wed Nov 10 04:01:48 +0100 2010
15
WordPress 3
Le succs retentissant du microblogging na pas laiss indiffrent le gant Google. Sa rponse, Google Buzz, vient sinsrer dans linterface de Gmail en remontant lactivit du rseau damis.
Figure 114
Linterface Google Buzz est intgre Gmail.
ALTERNATIVE Identi.ca ou le microblog libre

Le site identi.ca est une alternative Twitter, qui fonctionne sur le logiciel libre et gratuit StatusNet.
B http://identi.ca B http://status.net
Figure 115 Page daccueil didenti.ca
Les rseaux sociaux Les rseaux sociaux sont aujourdhui les plus grands concurrents des blogs. Les SkyBlogs oublis, toute la gnration digital native a vite bascul sur Facebook. Ce rseau propose un grand nombre de fonctionna16
user 177 at Wed Nov 10 04:01:48 +0100 2010
lits particulirement adaptes ce public : mise en ligne rapide de contenus (texte et photos), commentaires, discussion en direct (chat), applications et jeux (comme le fameux FarmVille.com).
Avec plus de 500 millions dutilisateurs dans le monde, Facebook na pas fait succomber que les jeunes. La capacit diffuser rapidement du contenu na pas chapp aux marques, qui sont aujourdhui 1,5 millions disposer dune Page Facebook. La socit Starbucks, par exemple, ne comptabilise pas moins de 7 millions de fans sur sa Page Facebook : www.facebook.com/Starbucks. Tous ces fans sont informs ds que Starbucks souhaite diffuser un message ou une offre spciale. Aucun autre mdia ne propose une telle efficacit.
POUR ALLER PLUS LOIN

Les blogs et leur cosystme
Des conseils pour russir son blog professionnel et affirmer sa prsence en ligne grce lcosystme des mdias sociaux : R Thomas Parisot, Russir son blog professionnel, 2e dition, Eyrolles, 2010
Quest-ce que WordPress ?

WordPress est un logiciel qui permet de crer et dadministrer son blog. De tels logiciels sont appels des moteurs de blog. Lespace dadministration permet au blogueur davoir la main sur tous les aspects du blog : la rdaction des articles et des pages, la classification des contenus (mots-clefs, catgories), la modration des commentaires, la gestion des utilisateurs, linstallation dextensions et de thmes. Les diffrents contenus sont stocks dans une base de donnes MySQL. Le moteur de rendu a pour rle de transformer ces donnes brutes en pages HTML et en flux RSS.
IL TAIT UNE FOIS De b2 WordPress
WordPress est n dune mutation (fork en anglais) dun moteur plus ancien appel b2 (b2/cafelog, pour tre exact). Cette mutation eut lieu en 2003 sous limpulsion de deux dveloppeurs : Matt Mullenweg et Mike Little. En 2005, Matt Mullenweg cra Automattic, socit ditrice de la plate-forme de blogs WordPress.com. Du ct franais, Michel Valdrighi, crateur de b2 (et accessoirement lun des premiers blogueurs franais), ne semble pas envieux du succs de WordPress et y contribue dsormais rgulirement. Son blog fonctionne bien videmment sur WordPress : Bhttp://intraordinaire.com
Figure 116 Logo de WordPress
volutions majeures
Disposant dune communaut de dveloppeurs extrmement active, WordPress volue un rythme soutenu. Les changements portent principalement sur :
user 177 at Wed Nov 10 04:01:48 +0100 2010
17
WordPress 3
lajout de fonctionnalits ; la correction de dysfonctionnements ;

T XFN, OPML et Unicode
loptimisation des performances ; lamlioration de lergonomie de lespace dadministration.

Tableau 11 Versions successives de WordPress Version Nom de la version Anne Nouveauts
XHTML Friends Network (XFN) est le tout

premier microformat (cest--dire un format utilisant des balises smantiques HTML et XHTML) mis au point, destin indiquer les relations entre les personnes via les liens hypertextes tablis entre leurs sites. OPML (Outline Processor Markup Language) est un format XML de donnes structures sous forme de listes hirarchiques, destin permettre les changes de donnes entre sites web. Unicode est une norme dencodage des caractres sur un quatre octets, destin remplacer les tables traditionnelles ASCII (American Standard Code for Information Interchange) et ANSI (American National Standard Institute). Elle est cense pouvoir coder tous les caractres existant dans toutes les langues.
0.7 1.0 1.2 1.5 2.0 2.1 2.2 2.3 2.6 2.7 2.9 3.0 Miles Davis Mingus Strayhorn Duke Ella Getz Dexter Tyner Coltrane Carmen Thelonious
2003 2004 2004 2005 2005 2007 2007 2007 2008 2008 2009 2010
Premire version (succde b2 version 0.62). Respect du standard XHTML. Amlioration des permaliens, import depuis Blogger, Movable Type, support XFN. Gestion des plug-ins. Support de lUnicode. Import/ export OPML. Premire apparition du template (thme) par dfaut : Kubrick. diteur de texte riche (rich text). Auto-enregistrement des billets. Amlioration des performances. Gestion native des tags et rorganisation de la gestion des catgories. Amlioration de loutil de gestion de contenus. Mise jour complte de linterface dadministration. Corbeille (permettant la rcupration dlments supprims), retouche dimages. Gestion des menus, multisites, notion de types darticle, nouveau thme par dfaut (Twenty Ten).
Forces et faiblesses
Des qualits nombreuses et varies
Des technologies populaires et portables
RETENIR Duo de choc
PHP et MySQL sont de loin les technologies les plus populaires sur le Web. Faire le choix de WordPress permet de sassurer une certaine facilit pour recruter des dveloppeurs.
WordPress est bas sur deux des technologies les plus populaires du Web : la base de donnes MySQL et le langage de programmation PHP. Ces deux technologies ont lavantage dtre extrmement portables. Une technologie est dite portable lorsquelle peut sexcuter sur diffrents environnements. Il est ainsi possible dinstaller WordPress aussi bien sur Windows ou Mac OS X que sur GNU/Linux.
18
user 177 at Wed Nov 10 04:01:48 +0100 2010
Un logiciel libre et gratuit Le logiciel WordPress est gratuit. Il peut tre tlcharg librement sur le site wordpress.org. Les technologies ncessaires son fonctionnement (PHP et MySQL) sont galement libres et gratuites. WordPress est propos sous licence GNU GPL (GNU General Public License). Cette licence permet chacun dtudier les sources du logiciel et de les modifier librement.
RESSOURCES La licence GNU GPL
Le texte intgral de la licence GNU GPL (version 3) est disponible (en anglais) ladresse :
B http://www.gnu.org/copyleft/gpl.html
Il existe une traduction en franais de la version 2 la page :
Une plate-forme trs extensible

WordPress nest pas un logiciel monolithique et fig, mais une plateforme ouverte pouvant accueillir une multitude de contributions de la part de dveloppeurs passionns. Ce mode de fonctionnement laisse les utilisateurs profiter dune quantit gigantesque dextensions pouvant rpondre tous leurs besoins. Lextensibilit est galement prsente dans le domaine du design. Des milliers de graphistes (certes plus ou moins inspirs) partagent des thmes quil est possible de rcuprer et dinstaller en quelques clics. Enfin, en proposant des API (voir chapitre 14), WordPress permet des logiciels extrieurs dinteragir avec le contenu du blog. Ces services web permettent, par exemple, des applications mobiles daller enrichir ou modifier directement le contenu du blog, sans avoir passer par linterface dadministration. Une communaut active WordPress est aujourdhui utilis par plusieurs millions dinternautes dans le monde. Cette communaut change en permanence des ides et des conseils dans le cadre de forums, de newsletters ou de canaux IRC (discussion en direct). La communaut est prise trs au srieux par lquipe de dveloppement, qui lui propose rgulirement des sondages afin de mieux identifier les principaux besoins. Le respect des normes et standards Les dveloppeurs de WordPress sont extrmement respectueux des normes et des standards. Les pages web du blog se retrouvent ainsi parfaitement structures au niveau du code (HTML), des rgles de formatage et de typographie.
B http://www.linux-france.org/article/these/
gpl.html

user 177 at Wed Nov 10 04:01:48 +0100 2010
19
WordPress 3
La simplicit dutilisation Lespace dadministration a t pens pour tre le plus simple et le plus convivial possible. crire un article ne ncessite de renseigner que deux champs (titre, contenu) et de valider.
RESSOURCES Liste de diffusion
Les dveloppeurs de WordPress ont lhabitude dchanger dans le cadre dune liste de diffusion appele wp-hackers, dont une archive est disponible sur :
B http://lists.automattic.com/pipermail/
Une documentation complte et jour WordPress dispose dune documentation en ligne complte et jour. Cette documentation centrale porte le nom de Codex et est accessible sur codex.wordpress.org. Un forum permet galement dobtenir de laide : http://wordpress.org/support. Un logiciel disponible en plusieurs langues WordPress est disponible dans une multitude de langues. Il nest ainsi pas obligatoire de connatre langlais pour pouvoir utiliser lespace dadministration. La page http://codex.wordpress.org/WordPress_in_Your_Language prcise les diffrentes traductions disponibles. Des fonctionnalits indispensables WordPress dispose de toutes les fonctionnalits indispensables un blog : la rdaction auteurs multiples ; la rdaction sur une copie de travail ; la protection des articles (statuts protg , priv ) ; les rtroliens (pingback, trackback) ; les commentaires ; la protection contre le spam ; la mise disposition dun flux de syndication ; une interface dadministration adapte aux mobiles ; la possibilit dimporter des articles depuis une multitude dautres plates-formes de blogs (Blogger, DotClear, LiveJournal, TypePad...). Le soutien de la socit Automattic Enfin, disposer du soutien dune socit commerciale ayant les reins solides est une vritable bndiction pour un projet open source. Cela est dautant plus vrai lorsque la socit commerciale est dirige par le crateur du projet lui-mme. Automattic, avec les bnfices quelle tire de la plateforme WordPress.com, est en mesure de rmunrer de nombreux dveloppeurs pour travailler temps complet sur des volutions du moteur. Les contraintes dune socit commerciale profitent ainsi au projet en assurant une volution pragmatique, cohrente et rgulire du moteur.
wp-hackers/
20
user 177 at Wed Nov 10 04:01:48 +0100 2010
Quelques faiblesses
Une scurit renforcer
La scurit est de loin la plus grosse faiblesse de WordPress. De trs nombreuses failles ont ainsi t rvles ces dernires annes. Les dernires versions tendent nanmoins devenir beaucoup plus fiables. Des performances optimiser Sans optimisation, les performances dun blog fort trafic peuvent trs vite laisser dsirer. Cette situation dcoule directement de laspect extensible du moteur, qui doit multiplier les vrifications ncessaires lexcution des diffrents thmes et extensions. Une seule base de donnes la diffrence de ses concurrents, WordPress ne fonctionne quavec la base de donnes MySQL. Ce serveur de bases de donnes tant de loin le plus utilis et le plus plbiscit sur le Web, cette faiblesse ne drange toutefois quun nombre infime de personnes. Le code Le code source de WordPress nest pas une rfrence en matire de modlisation et de programmation. Lutilisation de la programmation procdurale plutt que celle de loriente objet, ainsi quun certain manque de sparation entre les diffrentes couches applicatives du programme (traitement de donnes/prsentation) rendent la comprhension du code quelque peu ardue. Ce manque de cloisonnement est dailleurs responsable dun grand nombre de failles de scurit qui ont lgrement terni la rputation de WordPress ces dernires annes.
COMPRENDRE Programmation procdurale versus programmation oriente objet
La programmation procdurale organise le code sous forme de variables et de fonctions. Une fonction peut tre assimile un module auquel il est possible de faire appel pour raliser une opration. Concevoir un programme avec un langage procdural consiste crire des fonctions qui font appel les unes aux autres. La programmation oriente objet manipule, quant elle, des briques logicielles de plus haut niveau : les objets. Un objet dispose la fois de proprits (les attributs) et de comptences (les mthodes). La conception dun programme consiste alors faire communiquer les objets entre eux par lintermdiaire de leurs mthodes respectives.
SUIVRE Optimisation des performances

Le chapitre 13 est consacr aux diffrentes optimisations qui permettent lamlioration des performances dun blog.

user 177 at Wed Nov 10 04:01:48 +0100 2010
21
WordPress 3
Plutt que de risquer de ralentir lvolution du moteur en cherchant obtenir un code parfait , les dveloppeurs de WordPress ont toujours prfr placer lexprience utilisateur et lextensibilit du moteur au cur de leurs proccupations. Ce choix explique certainement le fait que WordPress soit loutil de gestion de contenus (Content Management System ou CMS) le plus utilis au monde.
Les deux visages de WordPress

Un blog WordPress peut tre cr de deux faons radicalement diffrentes. La premire consiste passer par la plate-forme en ligne WordPress.com, tandis que la seconde ncessite le tlchargement des sources du moteur sur le site fr.wordpress.org et leur installation chez un hbergeur (qui peut dailleurs trs bien tre lutilisateur lui-mme). On parle alors dun blog WordPress autonome.
B http://wordpress.com
La plate-forme WordPress.com
Cre en 2005 par la socit Automattic, WordPress.com est une plateforme en ligne qui propose dhberger gratuitement des blogs WordPress. Le service repose sur la version MU (Multi-User, ou multiutilisateur) du moteur WordPress. Cette version, elle aussi open source et gratuite, peut tre tlcharge sur le site mu.wordpress.org. WordPress.com donne la possibilit de crer en quelques clics un vritable blog. Le blogueur dispose alors dun blog dont ladresse est de la forme : http://<nom_du_blog>.wordpress.com. Le financement de cette plate-forme repose dune part sur laffichage de liens publicitaires au sein des pages des blogs gratuits et, dautre part, sur la vente de fonctionnalits complmentaires telles que : la mise disposition dun espace de stockage plus important ; la libert de dfinir ses propres styles CSS ; le droit davoir plus de 35 utilisateurs ; la possibilit dassocier le nom de domaine de son choix au blog ; un service VIP pour les blogs trs fort trafic (vip.wordpress.com). WordPress.com est un cas typique de freemium. Ce type de modle conomique consiste offrir un service de base gratuit (free) avec la possibilit dacheter des options volues payantes (premium). Trs rpandu sur le Web, ce modle est notamment utilis par Flickr, LinkedIn, Google Apps, etc.
VOLUTION WordPress MU
Les versions standard et MU de WordPress ont fusionn dans le cadre de WordPress version 3.
TENDANCES Le succs !
Vritable russite, WordPress.com fait aujourdhui partie des vingt sites les plus visits au monde ! noter, Microsoft a fait le choix, en septembre 2010, de migrer sa plate-forme de blogs Windows Live Spaces vers WordPress.com. Plusieurs dizaines de millions de blogueurs ont ainsi rejoint la plante WordPress.
22
user 177 at Wed Nov 10 04:01:48 +0100 2010
Avantages
Les forces du service WordPress.com sont particulirement videntes pour des blogueurs occasionnels et nophytes. Gratuit Loffre de base est gratuite. Elle inclut la mise disposition dun espace de stockage de trois gigaoctets, ainsi que de la bande passante lie au trafic du blog. Pour des blogs fort trafic, cette offre se rvle particulirement intressante. Infrastructures solides et scalabilit WordPress.com hberge plus de 14 millions de blogs. Les infrastructures, quil sagisse du nombre de serveurs ou de la bande passante, sont la hauteur du succs rencontr. Elles permettent de supporter des pics de trafic importants qui se retrouvent dilus dans le trafic gnral. Des pics de trafic, tels que ceux qui font suite un passage tlvis, ne sont que trs rarement supports chez un hbergeur lambda, qui nalloue jamais plus dun serveur par blog. Cette capacit de la plate-forme WordPress.com rsister aux augmentations de trafic sappelle la scalabilit. Des fonctionnalits intressantes Un blog WordPress.com dispose, ds sa cration de fonctionnalits intressantes telles quun outil de statistiques, la gestion de lantispam pour les commentaires, la disponibilit dextensions de notation ou de sondage, la possibilit de crer des billets ou de rpondre des commentaires par e-mail. La prise en charge des vidos est une option payante. Cette fonctionnalit permet denvoyer des vidos qui sont automatiquement converties dans diffrents formats (dont le format HD, haute dfinition). Une fois encodes, ces vidos peuvent tre directement incluses au sein des articles. Cette option a lavantage de ne pas obliger le blogueur utiliser un service de diffusion de vido extrieur comme YouTube, DailyMotion ou Vimeo pour inclure une vido au sein dun article (voir aussi le chapitre 9).
EN PRATIQUE Pas de fausses conomies
Certains blogueurs ne font pas toujours le bon calcul en seffrayant du montant que la bande passante leur coterait sils taient hbergs chez un hbergeur classique. La bande passante ne cote cher qu partir du moment o un trs grand nombre de visiteurs consultent le site. Or, disposer dun fort trafic assure une montisation facile qui permet de financer son infrastructure.
Figure 117
Le lecteur de vidos WordPress.com Groupe Eyrolles, 2009

user 177 at Wed Nov 10 04:01:48 +0100 2010
23
WordPress 3
Simplicit dutilisation Utiliser WordPress.com vite davoir se soucier des problmatiques de sauvegarde, dinstallation et dhbergement. Ces diffrents aspects de la vie dun blog peuvent en effet devenir un vritable casse-tte pour un internaute nophyte, qui a gnralement mieux faire que dessayer de comprendre les propositions techniques dun hbergeur. Simplicit et gratuit permettent un aspirant blogueur de tester linterface WordPress pour dcouvrir la richesse de cet environnement. Scurit Les mises jour fonctionnelles et de scurit sont ralises automatiquement. Cela vite davoir grer les problmatiques de migration de versions et de veille vis--vis des failles de scurit.
T SSL
La technologie dite SSL (Secure Socket Layer) assure la scurit des changes en authentifiant les connects (machines et utilisateurs) et en chiffrant les donnes.
Dtail non ngligeable, WordPress.com propose un accs scuris de type SSL : https://wordpress.com. Un tel accs est particulirement utile lorsque la connexion Internet est ralise dans une zone non scurise telle quune borne Wi-Fi publique ou un cybercaf. La technologie SSL est le seul moyen dtre sr de ne pas se faire pirater son accs.
Inconvnients
Malgr ses nombreuses qualits, la plate-forme WordPress.com souffre de quelques dfauts, quil convient de ne pas perdre de vue lors du choix du type dinstallation. Manque de ractivit
POUR LA PETITE HISTOIRE Une panne ennuyeuse
En fvrier 2010, en raison dune panne sur la plate-forme WordPress.com, plus de 10 millions de blogs se sont retrouvs inaccessibles pendant plus dune heure.
En hbergeant son blog sur WordPress.com, le blogueur nest plus tout fait matre de la situation. Alors quun incident technique peut se rgler rapidement avec un hbergeur ractif, un dysfonctionnement de la plateforme peut savrer beaucoup plus problmatique. Choix de domaine restreint Dans sa version
<nom_du_blog>.wordpress.com
gratuite, seul un sous-domaine peut tre associ au blog.
de
type
Accs aux ressources limit Laccs aux sources PHP ainsi quaux tables de la base de donnes nest pas autoris, et seules quelques dizaines de thmes et dextensions sont proposes.
24
user 177 at Wed Nov 10 04:01:48 +0100 2010
Lenteur Le principe de WordPress.com est de mutualiser un trs grand nombre de blogs sur leurs serveurs. Un blog partage par consquent les ressources des serveurs (puissance machine, bande passante) avec des millions dautres. Inutile de dire que des ralentissements sont invitables et mme frquents. Limitation de lespace disque L encore, WordPress.com permet dacheter une mise jour pour augmenter lespace de stockage de plusieurs dizaines de gigaoctets de donnes. Lachat dun espace supplmentaire rend galement possible le chargement de fichiers musicaux (interdits dans la version basique). Publicits Dans le cadre de la version gratuite, WordPress.com se rserve le droit de placer de la publicit sur les blogs. Bien que cela soit gnralement fait avec discrtion, une telle perspective nest pas toujours acceptable.
Le moteur WordPress
Les forces de la plate-forme WordPress.com correspondent le plus souvent aux faiblesses du moteur. Installer un moteur WordPress chez un hbergeur reprsente un cot financier et ncessite gnralement davantage de temps et de comptences. Le gros avantage de la version moteur rside en revanche dans la libert totale du blogueur de faire voluer son blog comme il lentend, que ce soit en termes dinstallation dextensions, de thmes ou de modifications des sources. En se retrouvant seul matre bord, le blogueur hrite cependant de lnorme responsabilit de maintenir son blog jour, afin de corriger les dysfonctionnements (bogues) et autres failles de scurit.
Les concurrents de WordPress

Des dizaines de solutions permettent de grer un blog. Toutes proposent des fonctionnalits avances telles quune interface dadministration volue, la gestion des commentaires, la mise disposition dAPI via des Web services. La diffrence principale porte sur lergonomie et sur les possibilits dvolution en termes de thmes et dextensions.

user 177 at Wed Nov 10 04:01:48 +0100 2010
25
WordPress 3
Movable Type
B http://www.movabletype.org
Il sagit de lautre grand moteur de blog gratuitement tlchargeable. Malgr toutes ses qualits, Movable Type a un norme dfaut : celui dtre crit en langage Perl. Langage trs en vogue il y a une dizaine dannes, il est aujourdhui beaucoup moins populaire chez les dveloppeurs web. Les hbergeurs tant gnralement frileux vis--vis de ce langage, linstallation peut se rvler complexe.
Figure 118
La version 5 de Movable Type est un vritable hommage linterface dadministration de WordPress.
POUR LA PETITE HISTOIRE And the winner is...

The Huffington Post, le blog le plus consult au monde, repose sur Movable Type :
B http://www.huffingtonpost.com
B http://www.typepad.fr
Tout comme WordPress.com pour WordPress, MovableType dispose dune plate-forme en ligne associe : TypePad. Cette plate-forme ne prsente cependant que peu dintrt dans sa version gratuite.
Blogger
B https://www.blogger.com
Bien quadoss depuis 2003 au gant du Web Google, Blogger apparat aujourdhui lgrement la trane. Linterface dadministration est lourde, et lexprience utilisateur est souvent assez laborieuse. Sa force, comme pour tous les produits de Google, est cependant de disposer dAPI permettant des dveloppeurs de crer des outils qui pourront interagir directement avec la plate-forme centrale.
Dotclear
B http://fr.dotclear.org
Le logiciel Dotclear est une solution particulirement populaire en France (son crateur tant lui-mme franais). Comme WordPress, il est libre, gratuit et construit sur le langage PHP. Dotclear est une association depuis 2009.
user 177 at Wed Nov 10 04:01:48 +0100 2010
26
Figure 119
Espace dadministration de la plate-forme Blogger
POUR LA PETITE HISTOIRE Adeptes de Dotclear
Dot dune quipe de dveloppement et dune communaut plus restreintes, Dotclear manque cependant parfois de dynamisme.
France Tlvision, Gandi ou Free ont fait le choix de Dotclear pour leurs blogs.
Figure 120
Espace dadministration Dotclear

user 177 at Wed Nov 10 04:01:48 +0100 2010
27
WordPress 3
OverBlog
B http://www.over-blog.com
POUR LA PETITE HISTOIRE TF1

La chane TF1 dtient une part significative du capital de la plate-forme OverBlog.
Plate-forme trs connue en France, OverBlog tendait ces dernires annes se rapprocher de plus en plus dun agrgateur de contenus. Cette tendance sest confirme en septembre 2010 avec un rapprochement avec le groupe Wikio.
Figure 121
Espace dadministration de la plateforme OverBlog
POUR LA PETITE HISTOIRE Blog monGenie

Le site blog.monGenie.com fut la premire plateforme proposer un partage de revenus entre la plate-forme et le blogueur.
B http://blog.mongenie.com
Loriginalit dOverBlog est de proposer le partage de ses revenus issus de la publicit avec les auteurs des blogs.
Perspectives
Lavenir de WordPress semble radieux. Sa popularit est immense et ce, quel que soient la dimension du blog ou le profil du blogueur (indpendant ou grand groupe international). Un tiers des cent blogs les plus populaires au monde utilise aujourdhui WordPress, dans sa version autonome ou comme plate-forme. Selon certaines sources, WordPress serait mme loutil de gestion de contenus (CMS) le plus utilis au monde, avec plus de 200 millions dutilisateurs. La communaut augmente trs vite, et le rythme des contributions ne fait que sacclrer danne en anne. Les runions de dveloppeurs (WordCamp) ont dsormais lieu chaque anne partout dans le monde. Dans le domaine du mobile, la communaut de dveloppeurs a parfaitement su surfer sur la rvolution smartphone. Des applications sont disponibles sur toutes les plates-formes majeures : WordPress pour iPhone (qui fonctionne aussi bien avec liPhone quavec liPad), WordPress pour Android, WordPress pour BlackBerry.
28
user 177 at Wed Nov 10 04:01:48 +0100 2010
TENDANCES Quelques chiffres sur WordPress en 2010

22 millions de tlchargements des sources de WordPress ; 70 millions de tlchargements dextensions et de thmes ; 35 milliards de pages vues (blogs autonomes et plate-forme
confondus) ; 250 millions de visiteurs par mois (WordPress.com) ; 200 millions darticles publis (WordPress.com) ; 350 000 articles publis chaque jour (WordPress.com) ; 17 000 blogs crs chaque jour (WordPress.com) ; 220 dveloppeurs ayant particip au dveloppement de WordPress 3.
Dautres chiffres sont disponibles sur la page :

Bhttp://en.wordpress.com/stats/
En outre, de nouveaux services viennent rgulirement enrichir la galaxie Automattic/WordPress. BuddyPress (buddypress.org) permet de transformer WordPress en un vritable gestionnaire de rseau social. Akismet (akismet.com) aide les blogs lutter contre le spam. Gravatar (gravatar.com) centralise la gestion de son avatar. PollDaddy (polldaddy.com) permet de concevoir et dexporter des sondages. P2 (p2theme.com) rapproche WordPress du microblogging. Ping-O-Matic (pingomatic.com) propage un ping sur une multitude dagrgateurs et de moteurs de recherche de blogs. WordPress.tv (WordPress.tv) regroupe les vidos du monde WordPress. After the Deadline (afterthedeadline.com) greffe un correcteur dorthographe, de style et de grammaire lditeur de texte.
POUR LA PETITE HISTOIRE Noms de domaine
Disposant dune excellente sant financire, Automattic a fait ses emplettes auprs de Yahoo! en leur rachetant les noms de domaine wp.com et blo.gs. Figure 122
Une suggestion du correcteur After the Deadline
En plus des fonctionnalits quils apportent aux blogueurs, ces services ont galement lavantage de diversifier les sources de revenus de la socit, qui dpend ainsi dautant moins de la publicit.

user 177 at Wed Nov 10 04:01:48 +0100 2010
29
chapitre
user 177 at Wed Nov 10 04:01:48 +0100 2010
Anatomie dun blog
SOMMAIRE
B Identifier les diffrentes
Pour tre qualifi de blog, un site web doit respecter un certain nombre de caractristiques fonctionnelles et structurelles. Leur comprhension permet denvisager un blog non plus comme une simple liste darticles, mais comme un vritable systme de gestion de contenus socio-collaboratif. Ce chapitre permet de comprendre comment est organis un blog et de donner un nom aux diffrents lments qui composent sa structure.
composantes dun blog
B Naviguer au sein dun blog B Comprendre les flux

de syndication MOTS-CLEFS
B colonne latrale B widget B article B tag B catgorie B blogroll B syndication B flux RSS

user 177 at Wed Nov 10 04:01:48 +0100 2010
WordPress 3
Tag, taxonomie (catgories), syndication, maillage, commentaires, tous ces termes lis au Web social sont au cur des blogs. Passons en revue les diffrents lments du blog, depuis larticle et ses commentaires jusquaux flux de syndication, sans oublier la navigation, les tags ou les archives.
Structure gnrale
Un blog est gnralement structur de la manire suivante : un bloc den-tte ; deux colonnes et ; un pied de page .
Figure 21
Prsentation classique dun blog
Len-tte mentionne le plus souvent le titre du blog, qui est cliquable et permet daccder la page daccueil. Il accueille galement souvent la navigation principale, dautant plus depuis la version 3 de WordPress, qui propose un gestionnaire de menus de navigation. La colonne principale, souvent gauche est rserve laffichage des contenus : articles, pages, listes de rsultats, etc.
32
user 177 at Wed Nov 10 04:01:48 +0100 2010
Celle de droite , appele colonne latrale ou sidebar, est organise sous forme de sections quil est possible de grer depuis lespace dadministration.
Enfin, le pied de page accueille gnralement des liens et des lments communs tels quune mention de copyright ou une rfrence au moteur utilis pour concevoir le blog (WordPress, dans le cas prsent).
Les articles
Les articles sont lADN du blog, llment fondamental qui fera son succs ou sera responsable de son chec. Mme si le design a son rle jouer pour capter lattention dun nouveau lecteur, cest bien le fond et non la forme qui le fera revenir. La frquence de publication, la richesse du contenu, la qualit dcriture et loriginalit des thmes abords sont des caractristiques lies aux articles qui seront en grande partie responsables de lintrt des lecteurs pour le blog.
Le titre
Chaque article dispose dun titre. Il sagit de llment le plus voyant dun article. Comme dans ldition avec les titres de chapitres, les titres des articles peuvent tre considrs comme un vritable outil marketing au service de lauteur. Quoi de mieux en effet que des titres attractifs pour capter lattention de son futur lecteur ? Notre poque est plus que jamais celle de linformation. Les tlphones de dernire gnration, tels que liPhone, deviennent de vritables Webtlscripteurs personnels qui dlivrent un flot ininterrompu dinformations, quels que soient lheure et le lieu. Se dire quun lecteur, dont le temps est prcieux, fera leffort daller creuser pour connatre la merveille qui se cache derrire un titre lacunaire est une erreur fondamentale. Titrer un article consacr au dernier iPhone Un beau joujou ! est clairement une erreur. Le choix Les secrets du dernier iPhone 3GS a beaucoup plus de chance de trouver un public.
SUIVRE Rfrencement
Le chapitre 10, intitul Visibilit et communaut , prcise que le titre dun article est un des lments clefs du rfrencement. Par consquent, il convient galement de prendre en compte cette dimension au moment de la rdaction du titre, qui doit comporter lobjet de larticle.
Le corps
Un article est gnralement compos de plusieurs paragraphes, qui peuvent tre enrichis dlments multimdias tels que des images ou des vidos.

user 177 at Wed Nov 10 04:01:48 +0100 2010
33
2 Anatomie dun blog
WordPress 3
Comme tout moyen dexpression, les articles ont subi des mutations. En faisant voluer leur faon de publier, certains blogueurs ont donn naissance de nouveaux types de blogs.
Les tumblelogs au royaume de la concision

B http://project.ioni.st B http://tumblr.com B http://identi.ca B http://twitter.com
Les tumblelogs correspondent des blogs dont les articles sont trs courts. Le site Projectionist en est un bon exemple. Chaque article est fait dune seule phrase, dune image ou dune vido. La plate-forme Tumblr permet en quelques clics de crer un tumblelog. Son interface trs simple, depuis linscription jusquau tableau de bord, ainsi que la qualit de ses thmes en ont fait une des plates-formes de blogs les plus populaires du moment. Avec sa dimension sociale (boutons like, reblog...) Tumblr marche galement sur les plates-bandes de services de microblogging tels que Twitter ou Identica.
Figure 22
Le tumblelog Projectionist
Figure 23
Le tableau de bord de Tumblr, aussi simple quefficace
Les vlogs pour bloguer en vido

B http://www.rocketboom.com
Les vlogs (vidoblogs) correspondent quant eux des blogs dont les articles sont exclusivement des vidos. Rocketboom est lun des plus connus. Les nouveaux smartphones disposant de camras vido devraient remettre au got du jour cette forme dexpression.
user 177 at Wed Nov 10 04:01:48 +0100 2010
34
Figure 24
Le vlog Rocketboom
Les podcasts, blogs couter

En proposant des articles sonores et en respectant une certaine norme au niveau du flux de syndication, un blog prend lappellation de podcast. Le contenu de larticle est gnralement suivi dune zone proposant un certain nombre de mtadonnes : nombre de commentaires, nom de lauteur, date de publication, catgories et tags associs, outils de partage et permalien.
T Mtadonne
Une mtadonne peut tre assimile une donne dcrivant une donne . Dans le cadre dun livre par exemple la donne en tant que telle correspond au texte du livre alors que le numro ISBN ou lanne de publication peuvent tre considrs comme des mtadonnes.
Les permaliens
Un permalien est une URL classique permettant daccder directement la page de larticle. La spcificit de ce lien est quil est cens ne pas changer au cours du temps. En utilisant un permalien pour pointer vers un article quil souhaite citer, un blogueur ne prend pas le risque de voir son site pollu par un lien mort. Les permaliens assurent la permanence et la cohrence des citations entre diffrents blogs.
Figure 25
Un permalien WordPress
EN PRATIQUE Types de permaliens

Movable Type http://<utilisateur>.typepad.com/<utilisateur>/<anne>/<mois>/<intitul de larticle>.html Blogger http://<utilisateur>.blogspot.com/<anne>/<mois>/<intitul de larticle>.html WordPress http://<domaine>/<anne>/<mois>/<jour>/<intitul de larticle>/

user 177 at Wed Nov 10 04:01:48 +0100 2010
35
2 Anatomie dun blog
WordPress 3
Les commentaires
La plupart des auteurs de blogs autorisent leurs lecteurs commenter leurs articles. Cette dimension la fois interactive et collaborative est sans nul doute lun des facteurs du succs des blogs. Les commentaires permettent de donner un avis, douvrir un dbat et denrichir un point de vue. Cette fonctionnalit est essentielle pour toute une gnration qui ne supporte plus dtre relgue au seul statut de spectateur vis--vis de linformation. Les commentaires, qui napparaissent que dans la vue dtaille, sont lists par ordre chronologique, du plus ancien au plus rcent, linverse des articles.
Figure 26
Commentaires sur le blog engadget.com
Les listes
La page daccueil dun blog dispose les articles en liste, tris par ordre chronologique inverse, les derniers publis apparaissant en premier. Selon le paramtrage choisi par le blogueur, les listes peuvent proposer un rsum de larticle plutt que lintgralit de son contenu. Certaines mtadonnes sont affiches sous le contenu : nombre de commentaires, date de publication, nom de lauteur (lorsque le blog est multiauteur), catgories et tags associs.
Figure 27
Mtadonnes affiches sous chaque article
En cliquant sur le titre de larticle, linternaute bascule sur sa vue dtaille. Le contenu apparat alors dans son intgralit.
36
user 177 at Wed Nov 10 04:01:48 +0100 2010
La colonne latrale
La colonne latrale est un espace regroupant diffrentes mtadonnes lies au blog. Ces donnes sont organises en sections galement appeles widgets. Les sections les plus courantes sont : propos ; Catgories ; Archives ; Nuage de tags ; Blogroll ; Accs au flux RSS.
TENDANCES Social bar

Lavnement des rseaux sociaux et des widgets associs tend faire voluer la colonne latrale, qui slargit de plus en plus et se retrouve souvent divise en deux. Des blogs trs populaires tels que presse-citron.net, loiclemeur.com ou treintes digitales (http://blog.lefigaro.fr/medias/) ont adopt cette nouvelle prsentation. La sidebar senrichit ainsi dune social bar.
Figure 28
Les trois colonnes du blog treintes digitales
La section propos
Le bloc propos est situ en haut de la sidebar. Il sagit dun bon moyen dindiquer au lecteur le thme gnral du blog. Il est galement de bon ton que lauteur se prsente et insre sa photo ou un avatar.
Figure 29
Section propos du site presse-citron.net
Les catgories
Chaque article peut tre associ une ou plusieurs catgories spcifiques au blog, qui correspondent des grands thmes susceptibles de revenir
user 177 at Wed Nov 10 04:01:48 +0100 2010
37
2 Anatomie dun blog
WordPress 3
rgulirement parmi les articles du blog. Les catgories sont un excellent moyen de classer lintgralit des articles du blog. Pour maintenir une catgorisation claire, il est essentiel den limiter le nombre. Ne pas dpasser une vingtaine de catgories pourrait tre judicieux. Visuellement parlant, la section Catgories de la colonne latrale est constitue de la liste intgrale des catgories du blog.
Figure 210
Exemple de section Catgories
Les tags
Les tags, aussi appels tiquettes, correspondent des mots-clefs. Il est possible dassigner plusieurs tags un article. Comme nous lavons vu plus haut, les tags apparaissent souvent en bas de larticle. Cette technique permet de reprer rapidement le sujet gnral de larticle.
SAVOIR Pareto
Lalgorithme de Pareto est gnralement utilis pour associer un poids un tag. Cet algorithme permet de niveler les poids et dviter ainsi dafficher un nuage o seuls quelques mots-clefs se diffrencient des autres.
la diffrence des catgories, la colonne latrale ne comporte pas une liste exhaustive de tous les tags du blog. Une telle liste, potentiellement gigantesque, se rvlerait tout fait inintelligible. Une reprsentation spciale des tags les plus populaires est souvent prsente dans la colonne latrale : le nuage de tags (ou tagcloud). Au sein dun nuage, les tags les plus frquemment associs aux articles apparaissent en gras et dans un corps plus lev que les autres.
Figure 211
Exemple de nuage de tags classique
38
user 177 at Wed Nov 10 04:01:48 +0100 2010
CONSEIL Taggez au fur et mesure

Nattendez pas davoir rdig des dizaines darticles pour commencer tagger. Ralise au fur et mesure, cette tche est rapide et naturelle. Figure 212
Exemple de nuage de tags plus original sur le site du gouvernement
PERSPECTIVES Le Web smantique
Les nuages de tags sont trs populaires, car ils permettent dapprhender en un coup dil les sujets voqus dans un blog. Cest galement un moyen de naviguer au sein du blog, la slection dun tag permettant de nafficher que les articles associs ce tag. Il est vivement conseill dassocier systmatiquement des tags un article. Cet tiquetage a une relle valeur la fois pour le lecteur, pour les moteurs de recherche et pour tous les services qui sappuient sur les contenus des blogs.
Lutilisation des tags est une trs bonne chose pour lavnement du Web smantique. Associer un tag un article revient extraire un concept du contenu. Il savre que cette action, naturelle chez lhomme, se rvle difficilement ralisable par un programme informatique. Faire correspondre des articles partageant des tags est une opration infiniment plus simple que de les faire correspondre uniquement sur la base de leur contenu brut.
Le blogroll
Le blogroll (appele blogoliste par les Qubcois) correspond une section de la colonne latrale permettant lauteur du blog de lister les diffrents blogs quil apprcie. Cet espace contient aussi bien des blogs amis que des blogs traitant de sujets similaires.
Figure 213
Blogroll dtreintes digitales
Cette fonctionnalit est importante vis--vis de la philosophie mme du Web, qui tend faciliter le dplacement dun internaute dun site lautre. En proposant un blogroll, lauteur ouvre de nouvelles perspectives
user 177 at Wed Nov 10 04:01:48 +0100 2010
39
2 Anatomie dun blog
WordPress 3
son lecteur (notion de partage) et indique quelques-unes de ses sources dinformations (notion de transparence).
ASTUCE Blogroll automatique
Le site wikio.fr propose un widget permettant de crer un blogroll de faon automatique. Ce dernier est compos des blogs que vous citez le plus ou qui vous citent le plus.
<a href="http://www.wikio.fr" class="wikio-neighbours">Widget blogroll par Wikio!</a> <script type="text/javascript" src="http://widgets.wikio.fr/js/ source/neighbours?style=light&url=URL_DU_BLOG" char set="utf-8"> </script>
Les archives
Elles donnent un aperu dans le temps de la frquence de publication. Les articles sont regroups par anne et par mois. Ce calendrier est affich sous forme darborescence ou de menu droulant. Le nombre darticles publis au cours dun mois donn est souvent prcis.
Figure 214
Archive sous forme de menu droulant
Figure 215
Archive organise de manire arborescente
La navigation
Un blog peut, dune certaine manire, tre assimil un outil de gestion de contenus, galement appel CMS (Content Management System). Certains blogs contiennent plusieurs milliers darticles. Il est par consquent essentiel de permettre au lecteur de retrouver et daccder facilement un contenu spcifique. 40
user 177 at Wed Nov 10 04:01:48 +0100 2010
Un blog propose ainsi plusieurs niveaux de navigation : par pages, par articles, par filtrage des mtadonnes ou via un moteur de recherche interne.
Navigation par pages

Ce premier systme de navigation apparat en bas des listes darticles. Il permet de passer de manire chronologique dune srie darticles une autre. Les liens sont gnralement intituls Page prcdente et Page suivante.
BIZARRERIE Sens de la flche

Est-il plus logique de placer une flche vers la droite pour dire quon remonte dans le temps ? Rien nest moins sr...
Navigation par articles

En vue dtaille, un article dispose dans son pied de page des liens Article prcdent et Article suivant. Cette mthode est idale pour feuilleter les derniers articles. WordPress intgre le nom des articles dans les liens Suivants et Prcdents. Les liens peuvent aussi tre placs au-dessus de larticle afin de permettre au lecteur de passer un article sans avoir descendre jusqu la fin.
Filtrage par mtadonnes

Certaines sections de la colonne latrale permettent de filtrer les articles en fonction de : leur date de publication : section Archives ; leurs catgories associes : section Catgories ; leurs tags associs : section Nuage ou Tags.
Moteur de recherche
Le moteur de recherche intgr WordPress devrait cependant tre la mthode privilgie par les lecteurs pour retrouver un article. Les internautes, habitus utiliser les moteurs de recherche pour accder une information sur le Web, devraient de la mme manire adopter ce fonctionnement sur un blog.
Les flux de syndication

Les flux de syndication (ou fils de syndication) constituent un moyen aussi simple quefficace pour un site de partager son contenu. Lindicateur permettant de dtecter si un site dispose dun flux varie dun navigateur lautre.

user 177 at Wed Nov 10 04:01:48 +0100 2010
41
2 Anatomie dun blog
WordPress 3
Firefox et Chrome placent droite de la barre de navigation licne
orange standard des flux de syndication. Internet Explorer place cette mme icne dans la barre donglets. Licne est grise si le site ne dispose pas dun flux associ. Safari a, quant lui, ltrange dide dutiliser une icne de couleur bleue.
Figure 216
Firefox
Figure 217
Chrome
Figure 218
Internet Explorer
Figure 219
Safari
Responsables en grande partie de la popularit des flux de syndication, les blogs en proposent peu prs systmatiquement. Dimension importante dun blog, il est essentiel de sattarder sur ce vritable pilier du Web daujourdhui.
Principe gnral
PRCISION De la structure aussi en HTML
En ralit, une page HTML bien construite est elle aussi structure, mme si ses balises indiquaient lorigine surtout une mise en forme et non un statut et un type dinformation. La normalisation W3C, en ayant ensuite spar la forme du fond avec les CSS (Cascading Style Sheet), encourage dsormais lattribution dune valeur smantique aux balises, pour plus de structuration. Le flux RSS se distingue alors davantage par la slection du type dinformations retenues ainsi que par le standard qui dfinit sa structure.
En proposant un flux RSS, un site permet dventuels partenaires daccder une partie de son contenu dune faon la fois standard et automatique. la diffrence dune page HTML, o toutes les informations sont mlanges dun point de vue smantique (contenu, images, navigation, publicit), le flux RSS permet dorganiser le contenu en isolant chaque lment composant une information ; linformation se retrouve alors structure en respectant un standard. Une analogie toute simple permet de comprendre la diffrence entre un contenu brut et un contenu structur. Une bibliographie crite dans Word peut tre assimile du contenu brut. Cette mme bibliographie fournie dans un fichier Excel prend alors la forme dune information structure.
user 177 at Wed Nov 10 04:01:48 +0100 2010
42
Figure 220
Contenu non structur
Figure 221
Contenu structur
En ayant accs un contenu structur, un partenaire va pouvoir automatiser des oprations laide doutils informatiques. Un contenu brut imposera quant lui une intervention humaine, gnralement fastidieuse. Dans le cas de notre bibliographie, par exemple, lextraction de tous les auteurs est extrmement rapide et simple avec un fichier Excel ; la slection de la colonne Auteur permet dy parvenir en un seul clic. Sous Word en revanche, un passage en revue scrupuleux de tout le document devient ncessaire afin dy dtecter les zones de texte qui correspondent des auteurs et essayer ne pas en oublier. Attention, cependant, ne pas imaginer quun flux RSS correspond un cheval de Troie qui donnerait accs lintgralit du contenu du site. Le crateur du site reste toujours celui qui dcide des contenus quil dsire rendre accessibles par lintermdiaire de son flux.

user 177 at Wed Nov 10 04:01:48 +0100 2010
43
2 Anatomie dun blog
WordPress 3
Figure 222
Slection dune colonne
Le site marmiton.org propose, par exemple, un flux des dernires recettes ajoutes sa base. Lexistence de ce flux peut permettre un portail consacr la cuisine de proposer une rubrique Dernires recettes sur Marmiton. Cette page afficherait le nom des dernires recettes proposes par le site avec un lien vers la page recette associe. Le portail senrichirait ainsi dune rubrique et marmiton.org gagnerait en visibilit. Ce principe de collaboration entre sites est au cur du Web actuel.
B http://twittervision.com
Certains sites ne doivent dailleurs leur existence quaux seuls contenus quils glanent et utilisent chez des partenaires. Ces sites composs dagrgats de contenus et de technologies sont appels mashups. Twittervision en est un bel exemple : son principe est dafficher en temps rel sur une carte de Google Maps des tweets dauteurs pris au hasard dans le monde entier.
Figure 223
Twittervision affiche en temps rel des tweets du monde entier
44
user 177 at Wed Nov 10 04:01:48 +0100 2010
Le nombre dinformations contenues dans un flux est galement un lment prendre en compte pour bien comprendre le rle dun flux. Un flux nest en aucun cas l pour tre utilis en tant quarchive du contenu. Il existe plutt pour proposer la liste des contenus les plus rcents et nest ainsi gnralement compos que dune dizaine dlments.
Sabonner un flux
Le flux de syndication associ un blog contient les titres et contenus des derniers articles publis. En proposant un tel flux, le blogueur offre ses lecteurs un moyen de sabonner au blog. Ce systme modifie radicalement le rapport entre blog et lecteur. En souscrivant au flux, le lecteur est en effet averti en temps rel et de faon automatique que le blog a t mis jour et quil pourra y trouver un nouvel article. Ce mode de fonctionnement, qualifi de push, prsente le double avantage davertir le lecteur sans tre intrusif. En plus de son rle dalerte, le flux permet de consulter les articles sans se rendre sur le blog. Pour y parvenir, le lecteur doit sabonner au flux du blog laide dun outil prvu cet effet. Le grand drame des flux RSS rside justement dans le fait quaucun standard na pour linstant merg en ce qui concerne ce processus dabonnement. Les novices sont perdus parmi des dizaines de procdures diffrentes, sans le moindre effort de standardisation en vue.
PERSPECTIVES Le protocole feed
Les navigateurs web savent grer certains protocoles web par le biais des liens. En cliquant sur le lien <a href="mailto:bob@domain.com">, par exemple, un navigateur ouvre une fentre pour crire un mail bob@domain.com. En implmentant le protocole feed:, les navigateurs faciliteraient la vie de linternaute en ne lui demandant quune chose, choisir le logiciel quil souhaite utiliser pour sabonner au flux.
Les agrgateurs de flux

Sabonner un flux consiste enregistrer ladresse du flux dans un outil capable de le lire. Un lecteur de flux porte le nom dagrgateur. Les agrgateurs peuvent tre classs en quatre grandes familles. Les clients de messagerie sont dsormais tous en mesure de lire un flux RSS : les trois principaux, Microsoft Outlook, Mozilla Thunderbird et Apple Mail, disposent de cette fonctionnalit.

user 177 at Wed Nov 10 04:01:48 +0100 2010
45
2 Anatomie dun blog
WordPress 3
Figure 224
Apple Mail
Figure 225
Thunderbird
B http://netnewswireapp.com B http://feeddemon.com
Des outils spcifiques offrent pour seule fonction la souscription aux
SAVOIR Application mobile

Une application telle que Reeder permet de consulter ses flux RSS depuis son iPhone.
flux RSS et leur lecture : NetNewsWire et FeedDemon sont les deux leaders sur le march, le premier fonctionnant sous Mac OS X et le second, sous Windows.
46
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 226
NewsGator Feed Demon
Les pages daccueil personnalises, telles que iGoogle, My Yahoo!,
Pageflakes ou Netvibes, proposent un lecteur de flux parmi leurs widgets.
B http://www.google.com/ig B http://my.yahoo.com B http://pageflakes.com B http://netvibes.com
Figure 227
Netvibes
B http://google.com/reader
CONSEIL Sauvegarder ses flux

Constituer une liste de flux lis ses centres dintrt est une tche assez longue. Une sauvegarde rgulire est par consquent vivement conseille. Google Reader permet de la raliser en passant par le menu Paramtres>Importer/ Exporter>Exporter. Le format du fichier de sauvegarde est lOPML (Outline Processor Markup Language), prvu prcisment pour des changes de listes de flux.
Enfin, les agrgateurs en ligne tels que Bloglines, aujourdhui dis-
paru, ou Google Reader. Ce dernier est dailleurs ce qui se fait de mieux, toutes familles confondues. En plus de disposer dune ergonomie trs aboutie, il a lavantage, de part sa nature en ligne, dtre consultable aussi bien avec un ordinateur quavec un smartphone.

user 177 at Wed Nov 10 04:01:48 +0100 2010
47
2 Anatomie dun blog
WordPress 3
Procdure dabonnement
Google Reader va nous permettre dillustrer une phase complte de souscription un flux RSS. La premire tape consiste vous rendre sur le site dont le flux vous intresse. Si licne orange est bien prsente, cliquez dessus pour accder au flux.
Figure 228
Le site www.kernix.com dispose bien dun flux RSS.
On obtient un affichage brut du flux. Chaque navigateur affiche ce type de page sa manire.
Figure 229
Affichage brut dun flux RSS sous Firefox
48
user 177 at Wed Nov 10 04:01:48 +0100 2010
LURL dans la barre de navigation reprsente ladresse du flux. Ltape suivante consiste se rendre sur le site reader.google.com et sauthentifier. LURL du flux peut alors tre indique en cliquant sur le bouton Ajouter un abonnement.
Figure 230
Ajouter un flux RSS
Figure 231
Consultation du flux
Ce mode de fonctionnement assez laborieux a lavantage de bien sparer les diffrentes tapes. 1 Slection du site. 2 Slection du flux. 3 Ouverture de lagrgateur. 4 Ajout du flux dans lagrgateur.
ASTUCE Firefox
Le navigateur Firefox permet daller beaucoup plus vite. La page de visualisation du flux dispose en effet dun menu droulant proposant certains agrgateurs par dfaut. La slection de loption Google fait basculer sur une page permettant de slectionner le service Google souhait : Google Reader ou iGoogle.
Figure 232
Menu permettant de souscrire un flux

user 177 at Wed Nov 10 04:01:48 +0100 2010
49
2 Anatomie dun blog
WordPress 3
Figure 233
Google Reader et iGoogle permettent de sabonner un flux.
Les formats des flux

Un flux de syndication correspond un fichier XML. Reposant sur un langage de balises, le langage XML est la source de la plupart des grandes rvolutions de linformatique de ces dernires annes. Il permet de structurer linformation de manire standardise. Un fichier XML reprsentant un livre pourrait avoir la reprsentation suivante :
Exemple de fichier XML
<livre> <titre>Le Capitaine Fracasse</titre> <auteur>Thophile Gautier</auteur> <chapitres> <chapitre>Le chteau de la misre</chapitre> <chapitre>La chariot de Thespis</chapitre> </chapitres> </livre>
Chaque information est isole entre des balises qui lui sont propres. Ainsi, un logiciel peut trs facilement accder une donne particulire (par exemple, lauteur).
50
user 177 at Wed Nov 10 04:01:48 +0100 2010
Le fait de choisir les noms de balises et leur agencement dfinit un format : RSS ou Atom, principalement.
RSS
Le format de flux de syndication le plus populaire est le format RSS. Un fichier RSS est organis de la manire suivante : une balise <rss> contient une balise <channel> qui englobe, quant elle, la fois les mtadonnes et les articles (<items>). Les mtadonnes obligatoires sont au nombre de trois : le titre du flux : <title> ; la description : <description> ; lURL du site auquel est attach le flux : <link>. Chaque article <item> peut notamment disposer dun titre <titre>, dune description <description>, dun lien <link>, dune date de publication <pubDate> et dun numro identifiant unique <guid>.
Exemple de flux RSS
<?xml version="1.0"?> <rss version="2.0"> <channel> <title>Mon blog</title> <link>http://monblog.com/</link> <description>Le super blog de JP.</description> <pubDate>Fri, 10 Jul 2009 04:00:00 GMT</pubDate> <item> <title> Mon deuxime article</title> <link>http://monblog.com/2009/09/deuxieme-article</link> <description> Mon deuxime article. </description> <pubDate>Thu, 09 Jun 2000 09:39:21 GMT</pubDate> <guid>3843-00a5</guid> </item> <item> <title>Mon premier article</title> <link>http://monblog.com/2009/01/premier-article</link> <description>Dbut dans la blogosphre.</description> <pubDate>Tue, 01 Jun 2009 21:34:51 GMT</pubDate> <guid>046d-ca18</guid> </item> </channel> </rss>
VOCABULAIRE Abus de langage

Le format RSS est si populaire quil est souvent utilis de manire gnrique pour qualifier un flux de syndication. Il sagit dun abus de langage. Quant la signification du sigle RSS, elle a volu en mme temps que le format : de Rich Site Summary (RSS 0.91) et RDF Site Summary (RSS 0.90 et 1.0), elle est dsormais devenue Really Simple Syndication (RSS 2.0).
ASTUCE Afficher les sources

Les navigateurs permettent dafficher les sources dun flux RSS. Avec Firefox, cliquez sur licne dun flux et utilisez le menu Afficher>Code source de la page.

user 177 at Wed Nov 10 04:01:48 +0100 2010
51
2 Anatomie dun blog
WordPress 3
Figure 234
Source dun flux RSS
Pour indiquer quil dispose dun flux associ, un site doit ajouter une balise <link> spcifique dans son en-tte (<head>). La balise <link> dispose dau minimum trois attributs :
<link rel="alternate" type="application/rss+xml" href="/fluxrss.xml" />
Figure 235 Plusieurs flux sont proposs en
Ladresse du flux est prcise par lattribut href. Un attribut title peut galement tre prcis pour dcrire le flux. Il devient indispensable lorsque le site propose plusieurs flux. Les titres apparaissent alors au moment o on clique sur licne RSS de la barre de navigation pour slectionner le flux souhait.
cliquant sur licne orange.
Figure 236
Source HTML de len-tte de la page
52
user 177 at Wed Nov 10 04:01:48 +0100 2010
Atom
Le format RSS nest pas le seul format de flux dagrgation. Le format Atom est galement assez rpandu sur le Web. Sa structure est assez proche de celle du RSS.
Flux Atom
<?xml version="1.0" encoding="utf-8"?> <feed xmlns="http://www.w3.org/2005/Atom"> <id>http://www.example.org/myfeed</id> <title>My Simple Feed</title> <updated>2005-07-15T12:00:00Z</updated> <link href="/blog" /> <link rel="self" href="/myfeed" /> <entry> <id>http://www.example.org/entries/1</id> <title>A simple blog entry</title> <link href="/blog/2005/07/1" /> <updated>2005-07-15T12:00:00Z</updated> <summary>This is a simple blog entry</summary> </entry> <entry> <id>http://www.example.org/entries/2</id> <title /> <link href="/blog/2005/07/2" /> <updated>2005-07-15T12:00:00Z</updated> <summary>This is simple blog entry without a title</summary> </entry> </feed>
Un blog peut proposer son flux dans les deux formats (Atom et RSS), en incluant deux lments <link> dans len-tte de la page, avec des attributs type diffrents.
Mise disposition de deux flux : RSS et Atom
<link rel="alternate" type="application/rss+xml" href="/fluxrss.xml" title="Flux au format RSS" /> <link rel="alternate" type="application/atom+xml" href="/fluxatom.xml" title="Flux au format ATOM" />
Podcasts
Le langage XML rend lvolution des formats extrmement facile. Le format RSS peut ainsi tre tendu de manire ajouter un fichier son chaque lment <item>. Le flux porte alors le nom de podcast et peut tre directement lu avec le logiciel iTunes.

user 177 at Wed Nov 10 04:01:48 +0100 2010
53
2 Anatomie dun blog
WordPress 3
Podcast
<item> <title>BFM : Atelier Numrique - 01/08</title> <enclosure url="http://podcast.bfmradio.fr/channel9/ 20090801_atelier16h_bfm.mp3" length="23120005" type="audio/mpeg" /> <guid>http://podcast.bfmradio.fr/channel9/ 20090801_atelier16h_bfm.mp3</guid> <pubDate> Sat, 01 Aug 2009 12:00:00 GMT</pubDate> </item>
Toutes les radios proposent dsormais les podcasts de leurs missions sur leur site. Les auditeurs peuvent ainsi couter ou rcouter lmission quand bon leur semble.
Figure 237
Podcast Atelier Numrique
Figure 238
Ajout dun podcast dans iTunes
54
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 239
Affichage du podcast dans iTunes
Google Reader permet galement dagrger des flux de type podcast. Chaque article dispose alors dun lecteur audio pour couter lmission sans quitter le navigateur.
PERSPECTIVES Vidos et HTML 5

En utilisant un navigateur compatible HTML 5 (Firefox ou Chrome), Google Reader propose dsormais la lecture directe de vidos lies au flux.
Figure 240
Affichage dun podcast dans Google Reader

user 177 at Wed Nov 10 04:01:48 +0100 2010
55
2 Anatomie dun blog
chapitre
user 177 at Wed Nov 10 04:01:48 +0100 2010
Crer son blog
SOMMAIRE
B Crer un blog sur
Deux mthodes permettent de crer un blog WordPress : la plus simple consiste passer par la plate-forme WordPress.com, tandis que la seconde, plus souple mais plus technique, demande linstallation du moteur WordPress sur son ordinateur ou chez un hbergeur.
WordPress.com
B Installer son blog

chez un hbergeur
B Hberger un blog
sur son poste de travail MOTS-CLEFS
B PHP B base de donnes B MySQL B serveur web B Apache B hbergement B FTP

user 177 at Wed Nov 10 04:01:48 +0100 2010
WordPress 3
Crer un blog sur WordPress.com

B http://fr.wordpress.com
ATTENTION Juste un identifiant

Veillez ne pas slectionner loption Juste un identifiant, sil vous plat, vous nobtiendrez en effet aucun blog suite votre inscription !
La cration dun blog sur WordPress.com est un vritable jeu denfants et ne ncessite que quelques minutes. 1 Le bouton Inscrivez-vous prsent sur la page daccueil de fr.wordpress.com permet daccder un premier formulaire qui invite renseigner diffrentes informations sur le blogueur.
Figure 31
Formulaire dinscription WordPress.com
Le mot de passe ne doit pas tre trop simple. Linclusion dun chiffre permet gnralement de faire passer la jauge de complexit dans le vert .
Figure 32
Le mot de passe doit tre suffisamment complexe pour faire passer la jauge du rouge (bad) au vert (good).
2 Ltape suivante permet dindiquer certains renseignements sur le
futur blog.
58
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 33
Renseignements sur le blog
Le premier champ correspond au nom de domaine qui sera associ au blog, condition quil ne soit pas dj utilis. En renseignant toto, le blog aura ladresse http://toto.wordpress.com. Il est vivement conseill de nutiliser que des lettres non accentues et des chiffres afin dviter tout problme par la suite. Attention galement choisir un nom de domaine qui vous convienne vraiment. Il est en effet impossible de modifier cette valeur une fois le blog cr. La case Vie prive doit tre dcoche dans le cas o le blog doit rester priv. La dernire tape rappelle au blogueur de se rendre sur sa messagerie afin dy trouver un e-mail de confirmation douverture de compte. Celui-ci contient un lien pour confirmer que ladresse renseigne au moment de linscription est bien valide.
ASTUCE Modification de sous-domaine

Dans le cas o vous souhaiteriez absolument modifier le nom de domaine du blog, la seule solution envisageable serait la suivante : raliser un export complet du blog et importer cet export dans un nouveau blog qui disposerait du nom de domaine souhait.
ATTENTION Spam
Vrifiez la bote de spams de votre client e-mail si le message de WordPress.com nest pas arriv au bout de cinq minutes.
Figure 34
Confirmation de cration Groupe Eyrolles, 2009

user 177 at Wed Nov 10 04:01:48 +0100 2010
59
3 Crer son blog
WordPress 3
RETENIR Plate-forme multiblog

Une fois inscrit sur WordPress.com, le blogueur peut crer autant de blogs quil le souhaite. Il sagit l de la raison dtre de la version MU de WordPress. Il est donc inutile de crer de nouveaux identifiants pour obtenir un nouveau blog. Figure 35
Le blog est alors cr. Le blogueur peut sidentifier dans la barre horizontale prsente en haut de lcran et commencer rdiger ses premiers articles dans lespace dadministration.
Zone dauthentification
Installer une version autonome de WordPress

La procdure dinstallation de WordPress est la mme sur un poste de travail ou chez un hbergeur. Les environnements ont en revanche chacun leurs prrequis spcifiques quil convient davoir lesprit avant de se lancer dans linstallation.
CONSEIL Version de PHP et MySQL

Les versions de PHP et de MySQL indiques cicontre sont trs anciennes. Il est vivement conseill, dans la pratique, de travailler avec des versions de PHP et de MySQL suprieures 5. Il convient galement de noter que la future version 3.2 de WordPress, prvue en 2011, ncessitera au minimum une version 5.2 de PHP et 5.0.15 de MySQL.
Technologies requises
WordPress fonctionne au moyen des composants suivants : PHP en version suprieure ou gale 4.3 ; MySQL en version suprieure ou gale 4.1.2 ; Apache avec le module mod_rewrite.
Installer WordPress chez un hbergeur

Tout blogueur souhaitant un peu dautonomie aura intrt hberger son blog WordPress chez un hbergeur. Compare la plate-forme WordPress.com, cette solution lui assure une libert totale vis--vis de linstallation des thmes et des extensions.
Comment choisir son hbergeur ?

Un certain nombre de points doivent absolument tre valids avec lhbergeur avant de signer le contrat. Les versions dApache, PHP et MySQL doivent tre compatibles avec les prrequis technologiques lists ci-avant. La rcriture dURL (mod_rewrite dApache) et la gestion des fichiers .htaccess doivent tre acceptes. La compression de donnes via le module mod_deflate dApache doit tre disponible. 60
user 177 at Wed Nov 10 04:01:48 +0100 2010
Un accs loutil phpMyAdmin doit tre fourni. Le module PHP APC doit pouvoir tre install.
Les fichiers journaux (logs) du serveur web doivent tre conservs
pendant une priode dau moins un an pour tre en conformit avec la loi pour la confiance dans lconomie numrique (LCEN). La sauvegarde quotidienne de toutes les donnes (fichiers et bases de donnes) doit tre assure. Il peut tre galement intressant : de vrifier la qualit de la bande passante en allant surfer sur des sites hbergs par lhbergeur ; de contrler que lhbergeur a des connaissances dans les domaines de PHP et MySQL pour quil puisse, en cas de gros soucis, apporter aide et conseils.
Informations transmises par lhbergeur

Suite louverture du compte, lhbergeur envoie au client diffrentes informations ncessaires pour mener bien linstallation de WordPress, notamment des informations relatives au serveur FTP : ladresse du serveur ; lidentifiant ; le mot de passe. Les informations relatives la base de donnes sont galement ncessaires : ladresse du serveur MySQL ; lidentifiant MySQL ; le mot de passe MySQL ; le nom de la base de donnes ; lURL daccs loutil phpMyAdmin.
T FTP
FTP (File Transfer Protocol) est le protocole qui permet denvoyer des fichiers sur le serveur.
BASE DE DONNES phpMyAdmin

phpMyAdmin permet de grer en ligne tous les aspects de la base de donnes : cration de tables, insertion et suppression de donnes, etc.
SAVOIR Nom de domaine

En gnral, cest lhbergeur qui est en charge de lassociation dun domaine un blog.
SAVOIR Permissions Unix

Le systme de permission sous Unix permet de prciser les droits daccs aux fichiers. Il est ainsi possible dindiquer pour chaque fichier si ce dernier est accessible en lecture (r), en criture (w), et/ou en excution (x). Ces droits daccs peuvent tre prciss pour le propritaire du fichier (o), pour les utilisateurs faisant partie du mme groupe que le propritaire (g) et enfin pour tous les autres utilisateurs (u). Les trois chiffres reprsentant une permission correspondent une reprsentation binaire de ces droits. La permission 777 (rwxrwxrwx) signifie que tous les utilisateurs peuvent avoir accs en lecture/criture et excution.
Vrifications concernant les permissions

Linstallation de WordPress est un processus qui ne prend gnralement pas plus de cinq minutes. Les principales sources derreurs sont lies des problmatiques de permissions. De nombreuses documentations en ligne proposent des solutions radicales consistant modifier lintgralit des permissions des fichiers du rpertoire dinstallation (passage des permissions en 777). De telles pratiques sont en ralit trs dangereuses et doivent absolument tre vites.

user 177 at Wed Nov 10 04:01:48 +0100 2010
61
3 Crer son blog
WordPress 3
TECHNOLOGIES WEB Administration de serveur

Dans le cadre dun hbergement ddi, lhbergeur peut faire en sorte que les fichiers transfrs en FTP aient les mmes permissions que celles du serveur web (avec les directives User et Group dans le cadre dApache). Considr pendant longtemps comme un luxe, un hbergement ddi est dsormais tout fait accessible en termes de budget et apporte un confort dutilisation sans commune mesure avec un hbergement mutualis. Dans le cas dun hbergement mutualis (plusieurs sites partagent un serveur), lhbergeur peut utiliser des technologies telles que suPHP, la combinaison FastCGI/SuEXEC ou le module Apache mpm-itk. Ces technologies permettent dassocier un utilisateur spcifique chaque site hberg sur le serveur (via les VirtualHost).
La source des problmes vient du fait que les permissions HTTP et FTP ne sont pas compatibles. Pour schmatiser, lorsque le blogueur envoie un fichier avec un client FTP, ce fichier appartient un utilisateur U1, et lorsquun fichier est transfr en passant par linterface web de WordPress (pour envoyer une image, installer une extension ou mettre jour le fichier .htaccess), le fichier appartient un utilisateur U2. Or U2 ne peut crire sur les fichiers qui appartiennent U1, et inversement. Il convient par consquent, avant de procder linstallation de WordPress, de sassurer que lhbergeur a mis en place un environnement adquat.
Tlchargement des sources

Le moteur WordPress est disponible gratuitement sur le site fr.wordpress.org. Cette version est la mme quil sagisse dune installation chez un hbergeur ou sur un poste de travail individuel.
Figure 36
Zone de tlchargement du logiciel WordPress
IL TAIT UNE FOIS Archologie

Les anciennes versions de WordPress peuvent tre tlcharges sur la page :
B http://wordpress.org/download/release-
archive/
La plus ancienne version disponible est la 0.71.
Une fois tlcharge, larchive doit tre dcompresse pour obtenir un rpertoire nomm wordpress qui contient les sources du moteur. Le format .zip est dsormais gr de faon native sur la plupart des systmes dexploitation modernes. Sous Mac OS X, un simple double-clic sur larchive permet dextraire le rpertoire wordpress. Ce mme rpertoire peut tre obtenu sous Windows en double-cliquant sur larchive et en extrayant le rpertoire wordpress laide dun glisser-dposer, dun copier-coller ou du lien Extraire tous les fichiers situ sur la gauche.
62
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 37
Dcompression de larchive
Transfert des sources

Une fois extraits, les fichiers sources peuvent tre transfrs sur le serveur laide dun client FTP. Sous Windows, aussi bien que sous Mac OS X ou sous GNU/Linux, le client FTP FileZilla (filezilla-project.org) a le double avantage dtre libre et gratuit, et de fonctionner parfaitement. Une fois le logiciel install, la connexion au serveur est ralise en renseignant les informations transmises par lhbergeur dans les cases : Hte (serveur FTP), Identifiant et Mot de passe. Il devient alors possible de transfrer les sources sur le serveur FTP.
B http://filezilla-project.org/
Figure 38
Transfert des sources

user 177 at Wed Nov 10 04:01:48 +0100 2010
63
3 Crer son blog
WordPress 3
B cyberduck.ch
Sous Mac OS X, le client FTP de rfrence est Cyberduck. galement libre et gratuit, ce client profite dune interface extrmement conviviale. Une fois install, une connexion au serveur FTP peut tre cre en utilisant le menu Signet>Nouveau signet. Cette interface permet de renseigner : le Nom du signet, ladresse du Serveur ainsi que le Nom dutilisateur, qui correspond lidentifiant de connexion.
Figure 39
Ajout dun signet
ASTUCE Fichiers commenant par un point

Un client FTP ne liste gnralement pas les fichiers commenant par un point, comme .htaccess. FileZilla permet de les faire apparatre en cochant loption Forcer laffichage des fichiers cachs , accessible par le menu Serveur. Avec Cyberduck, ils apparaissent en utilisant le menu Prsentation>Afficher les fichiers cachs.
Le mot de passe est, quant lui, renseign dans un second temps, au moment de la premire connexion. En laissant coche la case Ajouter au trousseau, lutilisateur naura renseigner le mot de passe quune seule fois. Une fois connect au serveur, le rpertoire wordpress peut tre gliss-dpos directement dans la fentre Cyberduck.
64
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 310
Fentre Cyberduck
Installation
Si le nom de domaine associ au compte est monblog.com, il est alors possible daccder WordPress par lURL http://monblog.com/wordpress. 1 Linstallation commence par la cration du fichier de configuration (wp_config.php). Il est essentiel car il contient les diffrentes informations qui permettront aux scripts PHP de se connecter la base de donnes pour enregistrer et rcuprer les contenus du blog (articles, pages, commentaires, etc.).
Figure 311
Dbut de linstallation
2 Un avertissement pralable indique la marche suivre en cas de pro-
blmatique lie aux permissions. Cest prcisment pour viter ce genre de situation fcheuse quil convient dtre vigilant dans ce domaine (voir les conseils donns dans la section concernant la vrification des permissions, ci-aprs).

user 177 at Wed Nov 10 04:01:48 +0100 2010
65
3 Crer son blog
WordPress 3
Figure 312
Quelques rappels MySQL
3 Toutes les informations relatives la base de donnes sont celles
fournies par lhbergeur. Le prfixe de table propos wp_ est gnralement conserv.
Figure 313
Informations lies la base de donnes
66
user 177 at Wed Nov 10 04:01:48 +0100 2010
4 Une fois ces informations valides, WordPress confirme quil a pu
crer le fichier de configuration et que linstallation va pouvoir dbuter.

Figure 314
Le fichier de configuration a bien t cr.
Installation est finalement un bien grand mot dans la mesure o elle se limite un formulaire qui permet dindiquer le nom du blog ainsi que des informations relatives au blogueur (identifiant, mot de passe, e-mail).
SAVOIR Nombre de fichiers

Une installation complte de WordPress contient plus de 750 fichiers rpartis dans 80 dossiers.
SCURIT Bien choisir son mot de passe

Le choix dun mot de passe sr est essentiel. Y placer la fois des lettres et des chiffres est un minimum. Le blogueur doit vraiment faire en sorte dobtenir un indicateur vert, synonyme dune bonne qualit de mot de passe.
MARKETING Apparatre dans les moteurs de recherche ?

La case Autoriser mon site apparatre dans les moteurs de recherche peut tre laisse coche. Le chapitre 10 Visibilit et communaut entre dans les dtails des systmes de ping.
Figure 315
Informations sur le blog Groupe Eyrolles, 2009

user 177 at Wed Nov 10 04:01:48 +0100 2010
67
3 Crer son blog
WordPress 3
5 Une fois le formulaire transmis, le blogueur bascule sur une page de
confirmation linvitant sidentifier lespace dadministration et crire son premier article.

Figure 316
Le blog est dsormais cr.
6 Un e-mail contenant ladresse du blog est automatiquement envoy
ladresse indique dans le formulaire dinstallation.
Figure 317
E-mail de confirmation
7 Il est alors possible de se connecter lespace dadministration acces-
sible par lURL http://monblog.com/wordpress/wp-login.php.
68
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 318
Connexion lespace dadministration
Le blog est enfin prt recevoir ses premiers articles !
Installation sous Windows

Installer WampServer
Linstallation de WordPress sur un PC sous Windows est intressante pour exprimenter et se faire la main . La solution la plus simple pour obtenir un environnement adapt consiste utiliser WampServer, logiciel libre et gratuit. WampServer permet de transformer un ordinateur en un vritable serveur dhbergement web (lacronyme WAMP signifie : Windows/ Apache/MySQL/PHP). Une fois installe, la machine dispose dApache (serveur HTTP), de PHP (langage de programmation) et de MySQL (serveur de bases de donnes), les trois technologies sur lesquelles repose WordPress. Linstallation de WampServer est ralise en quelques clics. Seule ltape PHP mail parameters ncessite une explication. Le champ SMTP correspond au nom de votre serveur denvoi de-mails. Il convient alors de renseigner le nom du serveur SMTP transmis par votre fournisseur daccs (par exemple smtp.free.fr, smtp.wanadoo.fr, smtp.sfr.fr, etc.). Une fois WampServer install, il est possible de vrifier que le serveur web fonctionne correctement en accdant lURL http://localhost.
B http://www.wampserver.com/
ALTERNATIVES EasyPHP et XAMPP

EasyPHP et XAMPP sont dexcellentes alternatives WampServer.
B http://www.easyphp.org/ B http://www.apachefriends.org/fr/xampp.html
MFIANCE Serveur HTTP IIS

Le serveur web de Microsoft, IIS, est galement en mesure de faire tourner WordPress. Cette solution est cependant loin dtre optimale.

user 177 at Wed Nov 10 04:01:48 +0100 2010
69
3 Crer son blog
WordPress 3
Figure 319
Page daccueil
lissue de linstallation, une icne vient sintgrer la zone de notifications (en bas droite de lcran, ct de lhorloge).
Figure 320
Icne WampServer
Ce programme donne accs un menu qui permet : de redmarrer les services Apache et MySQL ; daccder aux fichiers de configuration (php.ini, httpd.conf) ; douvrir phpMyAdmin ; de consulter les diffrents fichiers de log.
my.ini,
Figure 321
Menu WampServer
70
user 177 at Wed Nov 10 04:01:48 +0100 2010
Modifier la configuration dApache

Plusieurs directives de configuration doivent alors tre modifies dans le fichier de configuration dApache pour permettre la rcriture dURL (URL rewriting). Le fichier peut tre ouvert en passant par le menu Apache>httpd.conf. 1 La premire modification consiste supprimer le caractre dise # prsent au dbut de la ligne ressemblant celle-ci :
LoadModule rewrite_module modules/mod_rewrite.so
LE SAVIEZ-VOUS ? Rcriture dURL

LURL rewriting est une fonctionnalit trs utile propose par les serveurs HTTP pour transformer une adresse virtuelle en une adresse physique . Elle permet par exemple de transformer une adresse /catalogue/mon-superproduit-112.html en une adresse de type /app/ product?id=112. Alors que linternaute utilise la premire pour accder la page, le serveur HTTP utilise, quant lui, la seconde pour identifier le script qui lui permettra de lafficher. Cette technique est particulirement utile dans le cadre du rfrencement o la structure des adresses est essentielle.
2 La valeur None doit ensuite tre remplace par All au niveau de la
directive de configuration AllowOverride, prsente dans le bloc <Directory "C:/wamp/www/">. 3 Une fois ces modifications effectues et le fichier enregistr, Apache doit tre redmarr en utilisant la commande Restart All Services du menu WampServer. 4 Ltape suivante consiste dcompresser dans le rpertoire c:\wamp\www larchive WordPress tlchargeable sur fr.wordpress.org. 5 Linstallation dbute en accdant lURL http://localhost/wordpress.
Figure 322
Dbut de linstallation de WordPress sous Windows
Crer la base de donnes

Avant de poursuivre linstallation, une base de donnes doit tre cre pour accueillir les tables du blog. Cette cration est ralise laide de loutil phpMyAdmin auquel on peut accder en utilisant le menu WampServer.

user 177 at Wed Nov 10 04:01:48 +0100 2010
71
3 Crer son blog
WordPress 3
Figure 323
Cration dune base de donnes avec phpMyAdmin
Les renseignements concernant la base de donnes sont cette fois : le nom de la base de donnes qui vient dtre cre avec phpMyAdmin ; lidentifiant : root ; le mot de passe : <vide> ; lhte : localhost.
Figure 324
Informations relatives la base de donnes
La suite est identique linstallation chez un hbergeur dcrite prcdemment.
Installation sous Mac OS X

Le systme dexploitation Mac OS X fait partie, comme son illustre cousin GNU/Linux, de la famille des systmes Unix. Mac OS dispose par dfaut dun grand nombre doutils particulirement adapts aux dveloppeurs : terminal, shell, compilateur, panoplie doutils en ligne de commande. 72
user 177 at Wed Nov 10 04:01:48 +0100 2010
Dmarrer Apache
Linterprteur PHP ainsi que le serveur web Apache sont prsents sur une installation par dfaut de Mac OS X. Deux manipulations doivent cependant tre ralises avant de pouvoir les utiliser. 1 Dmarrer Apache. 2 Autoriser linterprtation des scripts PHP. Lactivation du serveur web est ralise de la faon suivante. 1 Ouvrir les Prfrences systme en passant par le menu Pomme (en haut gauche). 2 Slectionner Partage dans la rubrique Internet et sans fil. 3 Activer la case cocher Partage web.
ALTERNATIVE Dmarrage dApache
Il est galement possible de lancer Apache depuis un terminal en invoquant la commande : sudo apachectl start
Figure 325
Interface prsentant tous les partages intgrs par dfaut dans Mac OS X
Le bon fonctionnement du serveur web peut tre contrl en accdant avec un navigateur lURL http://localhost.
Figure 326
Le serveur HTTP est bien fonctionnel.

user 177 at Wed Nov 10 04:01:48 +0100 2010
73
3 Crer son blog
WordPress 3
Le rpertoire contenant les fichiers du serveur web se situe dans larborescence Macintosh HD>Bibliothque>WebServer>Documents (ventuellement Macintosh HD>Library>WebServer>Documents).
Figure 327
Emplacement des fichiers dApache
Apache ninterprtant pas par dfaut les scripts PHP, une modification du fichier de configuration doit tre ralise. Il convient pour cela de passer par linterprteur de commandes disponible dans le rpertoire Utilitaires des Applications. Lapplication sappelle Terminal. Le terminal va permettre daller diter le fichier de configuration dApache httpd.conf, prsent dans le rpertoire /etc/apache. Les commandes invoquer sont :
cd /etc/apache2 sudo pico httpd.conf
Il convient alors de se dplacer dans le fichier laide des flches jusqu trouver la ligne Loadmodule php5_module etc. Le caractre # prsent en dbut de ligne doit tre supprim.
Figure 328
Activation de PHP
74
user 177 at Wed Nov 10 04:01:48 +0100 2010
La directive permettant WordPress de tirer parti de la rcriture dURL doit galement tre modifie. Il sagit de AllowOverride qui doit passer de la valeur None All. Cest la ligne faisant partie du bloc <Directory "/Library/WebServer/Documents">. La commande pour quitter lditeur est Ctrl+X. Lenregistrement des modifications doit tre confirm en utilisant la touche Y (yes). Les modifications ne sont prises en compte quaprs le redmarrage dApache :
sudo apachectl graceful
RCRITURE Fichier .htaccess

WordPress prcise ses rgles de rcriture dURL grce un fichier nomm .htaccess plac la racine du compte. Ce fichier, avec toutes les directives de configuration quil contient, est pris en compte par le serveur web si la directive AllowOverride lautorise.
OUTIL MAMP
MAMP, disponible sur le site mamp.info, est lquivalent de WampServer sur Mac OS X. Ce logiciel permet en quelques clics dinstaller un environnement complet utilis pour faire fonctionner WordPress.
Installer MySQL
Mac OS X ne dispose pas par dfaut du serveur de bases de donnes MySQL. La procdure dinstallation est simple. 1 Tlcharger larchive (.dmg) sur http://www.mysql.com/downloads/mysql (osx10.6-x86.dmg pour la version 10.6 de Mac OS X). 2 Double-cliquer sur larchive. 3 Installer MySQL en cliquant sur le paquet mysql-5 (avec lextension .pkg). 4 Installer MySQL.prefPane pour disposer dun nouveau module dans les Prfrences systme.
Figure 329
Contenu de larchive MySQL
Figure 330
Les Prfrences systme senrichissent dune nouvelle icne dans la rubrique Autre.

user 177 at Wed Nov 10 04:01:48 +0100 2010
75
3 Crer son blog
WordPress 3
5 Cliquer sur le bouton Start MySQL Server.
Figure 331
Le bouton Start MySQL Server permet de dmarrer MySQL.
Installer phpMyAdmin
Les sources de phpMyAdmin peuvent tre tlchargs sur le site http://www.phpmyadmin.net. Larchive .zip est conseille. Dcompressez-la, si cela na pas t fait automatiquement, et placez ensuite le rpertoire dans Macintosh HD/ Bibliothque/WebServer/Documents. Renommez le rpertoire phpMyAdmin-xxx en pma. Deux directives de configuration doivent dsormais tre modifies dans le fichier pma/Libraries/config.default.php.
Lauth_type doit passer de la valeur cookie http
$cfg['Servers'][$i]['auth_type'] = 'http';
CONSEIL Mot de passe vide

Avoir un mot de passe vide est vivement dconseill pour des problmes vidents de scurit. Cela reste toutefois acceptable dans le cadre dune installation locale qui na pas pour vocation tre accessible des personnes extrieures.
Et AllowNoPassword passe true

$cfg['Servers'][$i]['AllowNoPassword'] = true;
phpMyAdmin est accessible via lURL http://localhost/pma. Lidentifiant est root et le mot de passe doit rester vide (il sagit de la configuration par dfaut de MySQL).
76
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 332
phpMyAdmin sous Mac OS X
Installer WordPress
Larchive WordPress doit tre dcompresse dans le rpertoire dApache (au mme niveau que pma). Comme tout systme Unix, Mac OS X dispose dune politique trs fine de droits daccs aux fichiers. Il est donc recommand de modifier les droits associs au rpertoire wordpress afin de se simplifier la vie en vitant toutes les problmatiques de permissions. Ces modifications peuvent tre ralises en excutant les trois commandes suivantes dans un terminal.
Changements de permissions
cd /Library/WebServer/Documents sudo chown R _www wordpress sudo chmod R g+w wordpress
Figure 333
Changement de permissions
Une fois la base wordpress cre laide de phpMyAdmin, linstallation peut dbuter. LURL daccs est la suivante : http://localhost/wordpress. Les diffrentes tapes de linstallation sont alors les mmes que pour une installation sous Windows.

user 177 at Wed Nov 10 04:01:48 +0100 2010
77
3 Crer son blog
WordPress 3
Figure 334
WordPress est dsormais install.
Installation sous GNU/Linux

B www.ubuntu.com
Systme dexploitation de prdilection des geeks et des dveloppeurs, GNU/Linux ncessite gnralement dinstaller la main les diffrents composants qui permettent de faire fonctionner WordPress. La distribution Ubuntu propose un paquet trs pratique contenant la fois PHP et MySQL. Il peut tre install de la manire suivante (attention au caractre ^) :
sudo apt-get install lamp-server^
VOCABULAIRE Paquet
Un paquet est lquivalent dun programme dinstallation sous Windows ou dun bundle sous Mac OS X. Les monopoles ne faisant pas bon mnage avec le logiciel libre, deux types de paquets se partagent le march : les *.rpm (Redhat, Novell) et les *.deb (Debian, Ubuntu). Plutt que dimposer aux utilisateurs de devoir trouver le paquet puis linstaller, les distributions Linux disposent de gestionnaires de paquets qui permettent, avec une commande, de chercher/tlcharger et dinstaller des paquets. Le gestionnaire de Redhat est yum et celui de Ubuntu est apt.
Figure 335
La commande est excute dans un terminal.
78
user 177 at Wed Nov 10 04:01:48 +0100 2010
Linstallation du paquet permet de prciser le mot de passe de lutilisateur root de MySQL.

Figure 336
Laccs http://localhost permet de vrifier que linstallation sest bien droule.
Ubuntu propose galement un paquet pour phpMyAdmin.

sudo apt-get install phpmyadmin
Figure 337
Le serveur web reconfigurer est Apache2.

user 177 at Wed Nov 10 04:01:48 +0100 2010
79
3 Crer son blog
WordPress 3
Il convient de rpondre Non la proposition de configuration de phpMyAdmin. Le serveur HTTP doit alors tre redmarr.
sudo /etc/init.d/apache2 graceful
Figure 338
phpMyAdmin est accessible sur la page http://localhost/phpmyadmin.
Les sources de WordPress doivent enfin tre places dans le rpertoire /var/www.
sudo wget http://fr.wordpress.org/wordpress-X.X.X-fr_FR.tar.gz sudo tar zxvf wordpress-X.X.X-fr_FR.tar.gz --directory=/var/ www/
Les permissions sont initialises de la manire suivante :

sudo chown -R www-data: /var/www/wordpress/
80
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 339
Linstallation peut commencer en accdant http://localhost/wordpress
IMPORTANT Conventions pour la suite de louvrage

Nous nous placerons pour la suite de louvrage dans la situation dun blog autonome hberg sur un serveur distant o toutes les ventuelles problmatiques de permissions ont t rsolues. Nous considrons galement que le blog a t install dans un rpertoire appel wordpress et quil est accessible via ladresse suivante : http://monblog.com/wordpress/. Dans le cas o votre site serait directement accessible via lURL http://monblog.com/, il conviendrait dadapter certaines URL prsentes dans la suite de louvrage. Ladresse http://monblog.com/wordpress/xmlrpc.php deviendrait par exemple http://monblog.com/xmlrpc.php.

user 177 at Wed Nov 10 04:01:48 +0100 2010
81
3 Crer son blog
chapitre
user 177 at Wed Nov 10 04:01:48 +0100 2010
Prendre en main lespace dadministration
SOMMAIRE
B Organisation gnrale
Visuellement trs soign et trs ergonomique, lespace dadministration est sans aucun doute une des plus grandes forces de WordPress. Ce chapitre en donne un aperu gnral et dcrit plus en dtail les interfaces lies la publication de contenus.
B Composer un article B Mots-clefs et catgories B Modration et commentaires B Pages et menus B Mdias

MOTS-CLEFS
B tableau de bord B diteur B article B page B menu B lien B mdia B image B commentaire B modration

user 177 at Wed Nov 10 04:01:48 +0100 2010
WordPress 3
TECHNOLOGIES WEB Ajax

Ajax (Asynchronous JavaScript and XML, cest--dire JavaScript et XML asynchrones) dsigne une solution libre pour le dveloppement de pages dynamiques.
Dans lespace dadministration de WordPress, la technologie Ajax est largement mise contribution pour proposer des interfaces dynamiques et offrir des effets volus tels que le glisser-dposer ou laffichage de fentres incrustes. En contrepartie de cette richesse fonctionnelle, lespace dadministration ncessite de la part dun blogueur nophyte une priode dadaptation pour se familiariser avec les interfaces et trouver ses repres. Ce chapitre a pour vocation de dtailler les principales rubriques lies aux utilisateurs et la publication de contenus : articles, pages, commentaires et liens. Les autres rubriques seront dcrites au fur et mesure dans les prochains chapitres.
Figure 41 Espace dadministration de WordPress
84
user 177 at Wed Nov 10 04:01:48 +0100 2010
Lorganisation gnrale
CONSEIL Configuration du navigateur

En cas de dysfonctionnement majeur des interfaces de lespace dadministration, le blogueur doit tout dabord vrifier que son navigateur accepte bien les cookies ainsi que le JavaScript. Si le problme venait persister, un changement de navigateur vers Firefox ou Chrome dans leur dernire version serait vivement recommand.
Lespace dadministration est accessible via lURL http://monblog.com/ wordpress/wp-admin. Il comporte un espace de travail dlimit par un entte et un pied de page.
Len-tte
Len-tte peut tre assimil une barre de raccourcis. La partie gauche rappelle le nom du blog, qui est cliquable et donne accs au blog.
Figure 42 En-tte
Le menu droulant intgre les raccourcis suivants : Nouvel article et Nouvelle page, raccourcis vers Articles>Ajouter et Pages>Ajouter ; Brouillons, pour accder la liste des articles qui ne sont toujours pas en ligne (raccourci vers Articles>Modifier>Brouillon) ; Envoyer, pour dposer un fichier image ou vido (raccourci vers Mdias>Ajouter) ; Commentaires, pour accder linterface permettant de valider les commentaires (raccourci vers la rubrique Commentaires). Len-tte prcise galement lidentifiant de lutilisateur actuellement connect. Le lien associ lidentifiant est un raccourci vers la rubrique Utilisateurs>Votre profil. Le lien Se dconnecter permet de quitter lespace dadministration.
Figure 43 Menu droulant
Le pied de page
Cette zone offre un accs rapide laide en ligne disponible sur les forums dentraide et dans le Codex. Pour rappel, le Codex est la documentation officielle propose par WordPress.
DOCUMENTATION Les auteurs du Codex

Bien questampille officielle, cette documentation est crite en grande partie par des utilisateurs de WordPress. Le Codex est en ralit un wiki o chacun apporte sa pierre ldifice.
Figure 44 Pied de page
CONSEIL Indiquer la version de WordPress

Faire mention de cette version est toujours une bonne ide lorsquon demande de laide sur un forum. Les experts peuvent ainsi dtecter si la version souffre dun bogue identifi.
Sur la droite du pied de page saffiche galement la version de WordPress utilise.

user 177 at Wed Nov 10 04:01:48 +0100 2010
85
4 Prendre en main lespace dadministration
WordPress 3
Lespace central
Lespace central propose une colonne ddie la navigation sur la gauche, ainsi quun espace de travail.
Les rubriques
Les diffrentes rubriques de lespace dadministration sont rparties en trois groupes. le tableau de bord et le gestionnaire de mises jour ; les fonctionnalits lies la publication de contenus (Articles, Mdias, Liens, Pages) et la modration (Commentaires) ; les aspects de droits (Utilisateurs), de paramtrage (Rglages), de maintenance (Outils), de prsentation (Apparence), ainsi que le gestionnaire dextensions (Extensions). Chaque groupe contient des menus qui donnent accs des rubriques. Louvrage utilise la norme suivante pour faire rfrence la rubrique Y du menu X : Menu X>Rubrique Y. Les termes interface et rubrique sont utiliss indiffremment.
Figure 45
Menu Apparence>Widgets
Figure 46
Menu en prsentation rduite
86
user 177 at Wed Nov 10 04:01:48 +0100 2010
Les blocs sont spars par une flche grise pointant vers la gauche. Cliquez dessus pour rduire la colonne de gauche afin quelle naffiche plus que les icnes associes chaque rubrique (voir figure 4-6). Cette fonctionnalit est particulirement intressante pour les blogueurs ne disposant que dun petit cran.
Figure 47
Sparation des blocs de linterface
Le survol dune icne avec le curseur de la souris fait apparatre les rubriques associes.
Figure 48
Un menu de rubriques est associ chaque icne.
Lespace de travail
Chaque cran intgre un titre et un bouton daide sur la droite. Lorsque la rubrique sy prte, le titre peut tre accompagn dun raccourci permettant dajouter un nouveau contenu.
Figure 49
Titre et bouton daide
Figure 410
Titre accompagn dune action
La zone qui apparat, suite lutilisation du bouton Aide, propose une aide spcifique la rubrique en cours ainsi quun lien vers les pages correspondantes du Codex. Le bouton Aide est parfois prcd dun bouton Options de lcran utilis pour paramtrer linterface en cours dutilisation. Les options portent le plus souvent sur la disposition des colonnes ou le nombre dlments afficher dans une liste.
Figure 411
Aide et options

user 177 at Wed Nov 10 04:01:48 +0100 2010
87
WordPress 3
Figure 412 Rubrique daide dploye
Le tableau de bord
Il sagit de la page daccueil laquelle ladministrateur accde aprs stre authentifi. Elle propose diffrentes sections rparties sur deux colonnes.
Figure 413
Le tableau de bord de WordPress
88
user 177 at Wed Nov 10 04:01:48 +0100 2010
Dans sa version par dfaut, le tableau de bord permet au blogueur : dobtenir un aperu rapide de ltat du blog : nombre de commentaires, de publications, thme en cours dutilisation, etc. ; daccder rapidement aux fonctionnalits les plus courantes : modration des commentaires, cration darticles, raccourci vers les articles non publis (Brouillons rcents) ; de se tenir inform des dernires nouveauts du monde WordPress. Le tableau de bord peut tre personnalis en utilisant le bouton Options de lcran, situ sous la barre den-tte droite de lcran. Il devient possible de retirer des modules et daugmenter le nombre de colonnes.
SAVOIR volution du nombre de sections

Le nombre de sections prsentes dans le tableau de bord peut voluer en fonction des extensions installes. Lextension WordPress.com Stats ajoute par exemple une section prsentant lvolution du nombre de visites sur le blog.
CONSEIL Optimisez votre espace de travail

Le tableau de bord tant la page daccueil de lespace dadministration, il est vivement conseill de ny laisser que les widgets vraiment utiles. Cela permet de profiter dun chargement plus rapide de lcran.
Figure 414
Menu en prsentation rduite
Figure 415 Personnalisation du tableau de bord
Placer le curseur de la souris sur la barre de titre du module fait apparatre une petite flche sur la droite. Un simple clic dessus permet de replier ou de dplier le module.
Figure 416
Vue rduite de la section Aujourdhui
Comme la plupart des modules dans lespace dadministration WordPress, les sections du tableau de bord peuvent tre dplaces dune colonne lautre ou rordonnances au sein dune mme colonne laide dun simple glisser-dposer (drag-&-drop) en slectionnant la barre de titre.

user 177 at Wed Nov 10 04:01:48 +0100 2010
89
WordPress 3
Figure 417
Dplacement dune section
SCURIT Mises jour

Le menu Tableau de bord propose galement loption Mises jour. Cette fonctionnalit est dcrite dans le chapitre consacr la scurit. Figure 418
Le passage de la souris sur la barre de titre fait galement apparatre, dans certains cas, un lien qui permet de paramtrer la section.
Affichage du lien pour configurer la section
Figure 419
Paramtrage de la section Actualits
Les articles
Crer un nouvel article est la fonctionnalit centrale dun gestionnaire de blog. WordPress ne propose pas moins de quatre mthodes pour y parvenir : le bouton Nouvel article situ dans le menu droulant de la barre dentte ; la section Press-Minute prsent dans le tableau de bord ; le bouton Ajouter situ droite du titre de la rubrique Articles ; 90
user 177 at Wed Nov 10 04:01:48 +0100 2010
la rubrique Articles>Ajouter.
Figure 420
Le widget Press-Minute du tableau de bord
crire un article
Titre et contenu
Le titre et le contenu sont les deux principaux lments dun article. WordPress utilise le titre de larticle pour construire le titre de la page. Sachant que le titre de page est llment qui apparatra dans les rsultats de recherche, il est important de proposer des titres darticles aussi vocateurs que possible.
ATTENTION Caractres dconseills
Le champ Titre accepte tous les caractres. Il est cependant vivement conseill dviter les caractres < et > qui sont au cur du langage HTML et peuvent entraner des problmes daffichage.
Figure 421
Titre et contenu

user 177 at Wed Nov 10 04:01:48 +0100 2010
91
WordPress 3
ASTUCE Lien court

Le bouton Obtenir le lien court permet dobtenir une URL courte pour larticle. Ce type dURL est utile pour la rdaction dun tweet dont la taille est limite en nombre de caractres. Figure 422
Une fois larticle enregistr, linterface senrichit dun espace consacr au permalien de larticle cest--dire son URL. La structure de lURL dpend du paramtre dfini dans la rubrique Rglages>Permaliens.
Permalien associ larticle
SUIVRE Rfrencement
La notion de permalien est galement aborde dans le chapitre 10 Visibilit et communaut . Figure 423
Gnration dun lien court
Lditeur
Mode ddition visuel ou HTML
T Wysiwyg
Wysiwyg est lacronyme de la locution anglaise What You See Is What You Get, cest--dire ce que vous voyez est ce que vous obtenez , autrement dit tel affichage, tel rsultat . Une interface utilisateur Wysiwyg est une interface intuitive, qui permet de composer visuellement le rsultat voulu.
Lditeur dispose de deux modes ddition : Visuel et HTML. Le mode Visuel est un mode Wysiwyg, qui permet de contrler visuellement les modifications apportes au contenu. Dans le cadre du mode HTML, les styles napparaissent pas ; ils sont remplacs par des balises HTML. Un blogueur novice en HTML aura par consquent tout intrt utiliser le mode Visuel. Un blogueur plus expert pourra quant lui alterner les modes ddition, afin denrichir dautant plus finement le code source de son article.
Figure 424
Mise en gras du mot WordPress avec lditeur visuel
Figure 425
Le mme contenu affich dans lditeur HTML
92
user 177 at Wed Nov 10 04:01:48 +0100 2010
Fonctionnalits La barre doutils donne accs aux fonctionnalits principales suivantes : enrichissements typographiques : gras, italique, barr ; listes puces et numrote ; citation ; alignement gauche, centr et droite ; cration et suppression dun lien ; insertion de la balise More ; vrification de lorthographe ; mode plein cran ; affichage de la barre doutils secondaire.
Figure 426
Barre doutils principale
La barre doutils secondaire (qui saffiche donc au moyen du dernier bouton de la barre doutils principale) dispose des fonctionnalits suivantes : style de paragraphe (Titre 1, Titre 2, etc.) ; soulign, alignement justifi et couleur du texte ; copier-coller dun contenu intgrant des styles ou dun contenu provenant de Microsoft Word ; suppression de la mise en forme ; insertion dune animation multimdia (Flash, Quicktime, etc.) ; insertion dun caractre spcial ; dsindenter et indenter (retrait du paragraphe) ; annuler et rtablir ; aide.
Figure 427
Barre doutils secondaire
Affichage Disposer dune zone ddition suffisamment grande est important pour le confort de rdaction. Deux mthodes permettent de redimensionner la taille de lditeur : utiliser le coin en bas droite de lditeur ; modifier le paramtre Taille de saisie, accessible via la rubrique Rglages>criture.
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 428 Le coin permet de redimensionner la taille de lditeur.
93
WordPress 3
ASTUCE WordPress et les moticnes

WordPress remplace par dfaut les moticnes (smileys) par des petites icnes. Ce comportement peut tre dsactiv en utilisant la rubrique Rglages>criture.
La balise More permet de restreindre la taille du contenu qui sera affich en mode liste. Seul le contenu situ au-dessus de cette ligne apparatra.
Figure 429
Insertion dune balise More sous la premire strophe
Figure 430
Le contenu se retrouve tronqu. Le lien Lire le reste de cet article donne accs larticle dans son intgralit.
Accessibilit
TECHNOLOGIE WEB TinyMCE
WordPress utilise lditeur JavaScript TinyMCE :
B http://tinymce.moxiecode.com
Lditeur permet de produire des pages accessibles. Laccessibilit vise simplifier lutilisation et la comprhension des contenus web pour les personnes handicapes. Un des fondements de laccessibilit web est la description des lments non textuels insrs dans le contenu, comme les images. Les interfaces proposes par WordPress disposent de champs (Titre ou Texte alternatif) qui permettent de dcrire ces objets.
Figure 431
Lindication du titre aidera amliorer laccessibilit.
94
user 177 at Wed Nov 10 04:01:48 +0100 2010
tat et visibilit
la manire des outils de gestion lectronique des documents (GED), WordPress associe chaque article un tat et une visibilit. La visibilit permet de restreindre laccs certains articles publis sur le blog. Trois niveaux daccs sont proposs : Public : larticle est accessible tous (par dfaut) ; Protg par mot de passe : linternaute doit disposer du mot de passe associ larticle pour pouvoir consulter le contenu ; Priv : larticle napparat pas sur le blog ; seuls les administrateurs et les diteurs peuvent le consulter. De tels profils peuvent tre crs via la rubrique Utilisateurs>Ajouter.
ASTUCE Article pingl

Le blogueur peut dcider de mettre en avant un article en le forant rester en tte de la page daccueil. Cette option dpend de la visibilit publique .
Figure 432
Association dun tat et dune visibilit
Figure 433
Affichage dun article dont la visibilit est prive

user 177 at Wed Nov 10 04:01:48 +0100 2010
95
WordPress 3
Figure 434
Larticle mis en avant dispose dun style diffrent.
Ltat sert, quant lui, indiquer o en est larticle dans son processus de publication. Seuls les articles dont ltat est Publi apparaissent sur le blog. Les deux autres tats permettent aux rdacteurs de se souvenir quel stade ils en sont dans la rdaction de leur article. 1 Phase de rdaction (Brouillon). 2 Phase de relecture (En attente de relecture). Tant que larticle nest pas publi, linterface propose un bouton Aperu qui permet au blogueur dobtenir un affichage de larticle dans sa mise en page finale. Lorsque ltat dun article est Publi, tout enregistrement ralis avec le bouton Mettre jour rend les modifications directement visibles en ligne. Cette solution nest pas optimale lorsque le blogueur doit raliser des modifications importantes, dautant plus que mettre en ligne un contenu dans une version non aboutie est vivement dconseill. Le bouton Prvisualiser les modifications peut alors tre utilis pour contrler et valider les modifications avant de les enregistrer.
Figure 435
Article dont ltat est Brouillon
96
user 177 at Wed Nov 10 04:01:48 +0100 2010
Un quatrime tat est disponible lorsque la date de publication est initialise dans le futur. Ltat devient alors Planifi. Une fois la date de publication atteinte, larticle passe en Publi et apparat alors sur le blog. Le bouton Aperu est galement disponible dans le cadre de ltat Planifi.
ATTENTION Enregistrement/publication
Il convient de ne pas utiliser le bouton Publier pour enregistrer les modifications dun article dont ltat est Brouillon ou En attente de relecture. Les boutons Enregistrer brouillon ou Mettre relire sont prvus pour ce genre de sauvegarde. Le bouton Publier passera larticle en tat publi.
Catgories et mots-clefs
Classer et organiser les articles est une dimension importante dun blog. Le terme de taxonomie est souvent utilis pour qualifier cette dmarche de classement systmatique. WordPress permet dassocier chaque article deux types de donnes : des catgories et des mots-clefs (ou tags). Lassociation systmatique dau moins une catgorie et de plusieurs mots-clefs permet de faciliter la navigation de linternaute au sein du blog. En slectionnant une de ces informations dans la barre latrale, linternaute pourra obtenir une liste restreinte darticles lis au thme slectionn.
Figure 436
Association dune catgorie un article
Les catgories peuvent sorganiser de manire hirarchique sur plusieurs niveaux. Une catgorie devient fille dune autre catgorie en utilisant le menu Catgorie parente.
user 177 at Wed Nov 10 04:01:48 +0100 2010
97
WordPress 3
ASTUCE Dfinir la catgorie par dfaut

La rubrique Rglages>criture permet de dfinir la catgorie par dfaut associe aux nouveaux articles.
La rubrique Articles>Catgories donne un accs complet aux catgories et notamment la suppression dune catgorie.
Figure 437
Rubrique Articles>Catgories
Alors quun article nest gnralement associ qu deux ou trois catgories, il peut disposer de beaucoup plus de mots-clefs. Associer quatre mots-clefs chaque article est un bon dbut.
NOLOGISME Folksonomie
Une folksonomie dsigne un systme de classification collaborative dcentralise spontane, bas sur une indexation effectue par des non-spcialistes. Ce terme nest pas adapt dans le cadre des blogs car la tche de classification nest pas confie aux lecteurs. Seul le blogueur a la possibilit dassocier des mots-clefs larticle.
Linterface propose un lien qui permet de remonter les mots-clefs les plus frquemment utiliss. Cette fonctionnalit est intressante vis--vis des nuages de tags. tant donn que ce type de prsentation associe une police plus grande aux mots-clefs les plus frquemment utiliss, en faisant leffort de rutiliser des mots-clefs, le blogueur rendra le nuage de tags plus pertinent et permettra linternaute de dtecter en un clin dil les principaux thmes du blog.
Figure 438
Association de mots-clefs
98
user 177 at Wed Nov 10 04:01:48 +0100 2010
Enregistrement automatique
La rdaction dun article est un exercice long et parfois fastidieux. Lespace dadministration inclut une mesure de protection pour viter toute perte de donnes : lenregistrement automatique. Ds le dbut de la rdaction, WordPress enregistre automatiquement le nouvel article en tant que brouillon. En cas de dysfonctionnement du navigateur, du systme ou de la machine, le blogueur peut ainsi le retrouver dans la liste des articles et reprendre sa rdaction. Lenregistrement automatique est galement disponible dans le cadre de la rdaction dune page.
PIGE Connexion Internet

WordPress a besoin de laccs Internet pour raliser ces sauvegardes.
Figure 439
Enregistrement de larticle ds le dbut de la rdaction
Blocs dinformations facultatives

Lcran propose dautres sections qui permettent de renseigner des informations facultatives. Extrait Lorsque lextrait est renseign, il est utilis dans certaines situations la place du contenu. La rubrique Rglages>criture permet, par exemple, de spcifier si le flux RSS intgre le contenu des articles ou uniquement des extraits. Certains thmes exploitent galement cet extrait dans le cadre des listes darticles. Discussion La premire case cocher autorise les utilisateurs laisser des commentaires propos de larticle. La seconde permet de dfinir la politique adopter vis--vis des rtroliens et des pings. Ces deux technologies permettent aux blogueurs dtre avertis des citations mutuelles. En cochant cette case, la page de larticle disposera dun espace rpertoriant les blogs layant cite. Ces deux options prennent le pas sur le paramtrage gnral dfini dans la rubrique Rglages>Discussion. Historique de larticle Ce bloc permet dobtenir les dates des dernires modifications de larticle. Le nom de lutilisateur lorigine de la mise jour est galement affich dans la liste.
SUIVRE Pings
Les pings sont traits plus en dtail dans le chapitre 10 qui aborde la question du rfrencement.

user 177 at Wed Nov 10 04:01:48 +0100 2010
99
WordPress 3
Figure 440
Dernires modifications de larticle
La slection dune date donne accs une interface qui permet de restaurer une version prcdente de larticle. Cette interface est galement utilise pour comparer deux versions et de visualiser les diffrences.
Figure 441
Le lien Restaurer permet de rcuprer une version plus ancienne de larticle.
Figure 442
Comparaison de deux versions
Champs personnaliss Les champs personnaliss (custom fields) permettent dassocier des informations structures aux articles qui peuvent tre assimiles des mtadonnes libres. Chacune delles est compose dun nom (key) et dune valeur (value). Ces donnes sont le plus souvent utilises au moment de laffichage dun article. Le thme ou lextension peuvent les prendre en compte pour enrichir le contenu de larticle ou modifier la structure de la page. Le plus souvent, les sources du thme doivent tre modifis pour que les champs personnaliss soient pris en compte. 100
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 443
Association de deux champs personnaliss : auteur et anne
La liste des articles

La rubrique Articles donne accs la liste des articles, quon peut filtrer par diffrents moyens : par mot-clef, statut, date ou catgorie.
Figure 444
Modifier les articles
Figure 445
Filtrage par mot-clef

Figure 446
Filtrage par statut
Figure 447
Filtrage par date ou par catgorie

user 177 at Wed Nov 10 04:01:48 +0100 2010
101
WordPress 3
Certaines informations contenues dans la liste sont cliquables et permettent notamment de filtrer les articles : clic sur le nom dun auteur, une catgorie ou un mot-clef. La liste est compose par dfaut de six colonnes : le titre associ ltat de publication ; lauteur ; les catgories ; les mots-clefs ; le nombre de commentaires ; la date de cration. Le bouton Options de lcran, situ gauche du bouton daide, sert rduire le nombre de colonnes et prciser le nombre maximum darticles afficher dans la liste.
Figure 448
Configuration de la liste
Figure 449
Changement de prsentation
Les deux icnes situes sur la droite servent modifier la prsentation de la liste darticles. Celle la plus droite permet dobtenir un affichage plus dtaill, proposant un rsum de larticle (colonne Titre) ainsi que son heure de publication (colonne Date). De nombreux lments de la liste sont cliquables : dans la colonne Titre, le nom de larticle fait basculer en mode dition ; la colonne Auteur autorise le tri par auteur ; dans les colonnes Catgories et Mots-clefs, la slection dun mot-clef ou dune catgorie permet de filtrer sur ce mot-clef ou cette catgorie (utiliser le lien Tous pour revenir la liste complte) ; la colonne Commentaires affiche les commentaires de larticle associ. En plaant le curseur de la souris au-dessus dune ligne, des liens apparaissent pour raliser des actions sur larticle associ : Modifier ; Modification rapide ; Mettre la corbeille ; Afficher, pour ouvrir le blog sur la page associe larticle.
102
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 450
Barre dactions associes larticle
Figure 451
Interface lie laction Modification rapide
Le menu droulant prsent au-dessus et au-dessous de la liste est utilis pour raliser certaines actions sur plusieurs articles en mme temps. Les articles doivent au pralable avoir t slectionns laide de la case cocher situe en dbut de ligne. Les deux actions disponibles sont : Modifier et Dplacer dans la corbeille. Loption Modifier ouvre une interface en haut de la liste, qui permet de forcer certaines proprits des articles : catgories, mots-clefs, tat de publication, gestion des commentaires, etc.
Figure 452
Actions sur plusieurs articles
Figure 453
Interface de modification par lots
La corbeille
WordPress propose de dplacer les articles dans une corbeille plutt que de les supprimer directement. Cette politique permet de restaurer un article supprim par erreur.

user 177 at Wed Nov 10 04:01:48 +0100 2010
103
WordPress 3
ATTENTION Une corbeille unique

La corbeille centralise les pages, commentaires et articles supprims. Dans le cas des liens, en revanche, la suppression est dfinitive.
Il est possible de retrouver les articles placs dans la corbeille en cliquant sur Articles puis sur le lien Corbeille. Le passage de la souris sur une ligne fait apparatre diffrentes actions : Restaurer, pour replacer larticle dans la liste des articles en cours ; Supprimer dfinitivement, pour effacer larticle de la base de donnes. Larticle est alors dfinitivement perdu.
Figure 454
Actions associes un article plac dans la corbeille
Les diffrents mdias

Figure 455
Articles et pages peuvent tre enrichis dlments multimdias. Quatre icnes situes au-dessus de lditeur permettent dinsrer ces diffrents types de fichiers : images, vidos, sons et autres formats. Seuls les fichiers images peuvent tre visualiss directement dans le corps de larticle. Pour les autres formats, un lien vers le fichier multimdia est propos. La page affiche suite au clic peut varier en fonction du navigateur et des plug-ins installs. Lavnement du HTML 5 devrait cependant amliorer cette situation en autorisant la visualisation dune vido ou lcoute dune musique directement au sein de la page HTML.
Insertion de fichiers multimdias
SUIVRE Insertion dlments multimdias

Le chapitre 9 Proposer des contenus multimdias dcrit diffrentes mthodes pour insrer des lments multimdias (vidos, documents PDF, prsentations PowerPoint ou autres diaporamas) directement au sein du contenu des articles.
Figure 456
Slection du fichier
104
user 177 at Wed Nov 10 04:01:48 +0100 2010
Pour insrer une image dans un article, le blogueur commence par cliquer sur licne symbolisant une image. Il lui est alors possible de prciser la source de limage : le disque dur de lordinateur ; lURL dune image sur le Web ; une image dj envoye et prsente dans la bibliothque de WordPress. Dans la plupart des cas, un fichier prsent sur lordinateur est envoy. Il convient alors dutiliser le bouton Parcourir pour slectionner le fichier et lenvoyer.
LE SAVIEZ-VOUS ? Transfert multiple
Le module de tlchargement (upload) de WordPress, bas sur la technologie Flash, est en mesure de grer le transfert multiple de fichiers.
ATTENTION Formats supports

Les formats suivants doivent tre utiliss pour obtenir un maximum de compatibilit : JPEG, GIF, PNG.
Figure 457
Ajout dinformations
Une fois limage envoye, WordPress propose de prciser un certain nombre dinformations relatives limage : le titre de limage ; un texte alternatif, indispensable pour laccessibilit ; une lgende, qui apparat sous limage dans le corps de larticle ; une description ; la cible du lien : laisser le lien tel quil est permettra au visiteur daccder au fichier image dorigine (non redimensionn le cas chant) ;
user 177 at Wed Nov 10 04:01:48 +0100 2010
105
WordPress 3
lalignement par rapport au contenu de larticle ; la taille, pour insrer une version rduite de limage afin que la
prsentation du contenu de larticle soit cohrente. Les dimensions proposes pour les tailles miniature, moyenne et large peuvent tre configures avec linterface de paramtrage Rglages>Mdias.
Figure 458
Rglages lis aux images
SAVOIR Rpertoire de stockage

Les fichiers envoys sont placs par dfaut dans le rpertoire wp-content/uploads. Ce rpertoire de destination peut tre modifi en passant par linterface Rglages>Mdias, qui permet galement dindiquer si lorganisation par dfaut des fichiers (wp-content/uploads/ <annee>/<mois>) convient au blogueur.
Un clic sur une image insre dans le contenu de larticle fait apparatre deux icnes. Celle de droite, semblable un panneau de stationnement interdit, permet de retirer limage. Celle de gauche ouvre une fentre permettant dditer diffrentes proprits de limage.
Figure 459
Aperu de limage dans lditeur
106
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 460
Affichage des proprits avances
La bibliothque
Le transfert dun fichier peut tre dclench : partir de lditeur ; via linterface Mdias>Ajouter. La rubrique Mdias>Bibliothque met galement disposition le bouton Ajouter. Cette bibliothque liste tous les fichiers qui ont t envoys sur le serveur.
user 177 at Wed Nov 10 04:01:48 +0100 2010
107
WordPress 3
Figure 461
Bibliothque de mdias
Linterface intgre diffrents moyens de retrouver facilement un mdia : moteur de recherche, filtres (images, fichiers non joints, date). Le survol dun mdia fait apparatre diffrentes actions.
Figure 462
Actions associes chaque mdia
LE SAVIEZ-VOUS ? Mtadonnes
WordPress est en mesure dassocier des informations des fichiers statiques car chaque fichier, suite au transfert, dispose dun enregistrement associ dans la table wp_posts (le post_type associ est attachment).
Laction Modifier donne accs une interface qui indique diffrentes informations sur le mdia (type de fichier, date de lenvoi sur le serveur, URL). Elle permet galement dassocier un nom, une lgende et une description au mdia.
Figure 463
Interface de modification
108
user 177 at Wed Nov 10 04:01:48 +0100 2010
diter les images

WordPress permet de raliser un certain nombre doprations sur les images qui ont t transfres.
Figure 464
Le bouton Modifier limage pour accder linterface ddition
Linterface ddition permet : de recadrer limage (en slectionnant la zone sur limage et en cliquant sur la premire icne) ; de raliser des rotations (icnes 2, 3, 4 et 5) ; de modifier les dimensions (lien Modifier lchelle). Le bloc Recadrage de limage permet de modifier la slection en lui donnant une taille fixe ou en lui imposant un ratio (par exemple 16:9 ou 1:1 pour obtenir une slection carre).
BON SAVOIR Rsolution
Inutile de transmettre des images trop lourdes dans le cadre dune utilisation web. Une rsolution de 72 dpi est suffisante.
SUIVRE Galerie photo

Au-del de la simple insertion dimage dans un article, plusieurs moyens existent pour ajouter une vritable galerie photo son blog, que cela passe par une extension (voir chapitre 7, p. 173) ou lintgration dun service web extrieur (Flickr ou Picasa, voir chapitre 9).
Figure 465
Interface de modification dimage

user 177 at Wed Nov 10 04:01:48 +0100 2010
109
WordPress 3
Les pages
Les pages constituent lautre moyen pour le blogueur de publier du contenu sur son blog. Souvent dordre plus gnral, ces contenus ne sinscrivent ni dans la chronologie des articles ni dans la thmatique principal du blog. Les pages les plus couramment rencontres sont les suivantes : propos, consacr au blog et au blogueur ; Contact ; Mentions lgales ; Informations pour les annonceurs.
Figure 466
Le blog dEricsson France propose plusieurs pages dans sa barre de titre.
Certains thmes mettent les pages plus en avant que dautres. Le blog se dote alors dune vritable dimension de gestionnaire de contenus (CMS).
Figure 467
Le thme par dfaut de WordPress, Twenty Ten, place les pages directement sous la barre de titre.
Au niveau visuel, les pages ont le plus souvent la mme prsentation que les articles. Linterface dadministration lie aux pages fonctionne globalement de la mme manire que celle des articles. Une diffrence importante rside dans la possibilit de modifier lordre dapparition des pages laide du champ Ordre. Le classement par dfaut est lordre alphabtique.
110
user 177 at Wed Nov 10 04:01:48 +0100 2010
Les commentaires
Les commentaires sont une dimension essentielle dun blog. Ils permettent de faire vivre le site et de constituer, au cours du temps, une vritable communaut.
Figure 468
Interface de dpt de commentaires sur le blog
Modration
Linconvnient majeur des commentaires est le temps quils font perdre en modration. WordPress propose heureusement au blogueur trois mthodes de modration : directement sur le blog ; dans lespace dadministration ; par e-mail. Lide est de faciliter au maximum la vie du blogueur.
Modration dans lespace dadministration

Les derniers commentaires apparaissent la fois dans la section Commentaires rcents du tableau de bord et dans la rubrique Commentaires. Un indicateur apparat au niveau de la rubrique Commentaires pour prciser le nombre de commentaires qui nont pas t approuvs. Ceux en attente de validation peuvent tre reprs par leur fond jaune.
BON SAVOIR Adresse IP de lutilisateur
Dans la rubrique Commentaires, les chiffres (par exemple 65.52.22.222) qui apparaissent sous lavatar de lauteur du commentaire correspondent ladresse IP de la machine utilise pour dposer le commentaire. Cette information na pas grand intrt en tant que telle. Elle permet surtout de faire des recherches en cas dabus. En effet, un clic sur ladresse IP affiche la liste des commentaires crits depuis cette mme adresse IP.

user 177 at Wed Nov 10 04:01:48 +0100 2010
111
WordPress 3
Figure 469
Le commentaire de Bob est en attente de validation.

Figure 470
Un commentaire doit tre approuv.
Figure 471
Actions associes au commentaire
Le passage du curseur de la souris sur un commentaire fait apparatre diffrentes actions. Ces liens permettent : daccepter ou de refuser le commentaire (Approuver/Dsapprouver) ; de marquer le commentaire en tant que spam (Indsirable) ; de rpondre au commentaire (Rpondre) ; de modifier le commentaire sans changer de page (Modification rapide) ou en se rendant sur une interface spcifique (Modifier) ; de supprimer le commentaire (Corbeille). Le rglage par dfaut de WordPress autorise la publication automatique dun commentaire quand lun des commentaires de lauteur a dj t approuv. Ce rglage est modifiable dans la rubrique Rglages>Discussions. Un blogueur proccup des risques de drive peut cocher la case Un administrateur doit toujours approuver le commentaire pour passer dans un vritable mode de modration a priori.
112
user 177 at Wed Nov 10 04:01:48 +0100 2010
Modration en ligne
Laffichage des commentaires varie en fonction du rle de linternaute qui consulte le site. Lauteur dun commentaire non valid peut visualiser son commentaire agrment dun message davertissement indiquant que le commentaire est en attente de validation.
Figure 472
Seul lauteur peut voir ce commentaire.
Sil est authentifi et bnficie des permissions suffisantes, le blogueur dispose dun lien Modifier pour accder directement linterface ddition du commentaire dans lespace dadministration.
Figure 473
Le blogueur dispose dun lien direct pour corriger ou supprimer le commentaire.
Modration depuis ladresse e-mail

WordPress permet aux blogueurs de recevoir par e-mail une copie des commentaires dposs sur le blog. En plus de sa fonction davertissement, le grand intrt de cet e-mail est doffrir la possibilit au blogueur de modrer le commentaire dun simple clic ; il peut ainsi lapprouver, le supprimer ou le marquer comme indsirable.
Figure 474
E-mail reu par le blogueur ds quun nouveau commentaire est dpos

user 177 at Wed Nov 10 04:01:48 +0100 2010
113
WordPress 3
Figure 475
Interface sur laquelle arrive le blogueur en cliquant sur le lien Lapprouver
Le lien associ Whois donne accs de nombreuses informations sur lorigine de lauteur. Une recherche sur lIP 65.52.22.222 permet ainsi de savoir que cette adresse IP appartient Microsoft.
Figure 476
Informations lies ladresse IP
114
user 177 at Wed Nov 10 04:01:48 +0100 2010
Lenvoi de-mails dalerte peut tre paramtr dans la rubrique Rglages>Discussion. Deux cases cocher spcifient dans quel cas le blogueur souhaite recevoir un e-mail.
Figure 477
Administration des alertes
Paramtrage
Cette rubrique de lespace dadministration propose dautres paramtres relatifs aux commentaires.
Figure 478
Paramtrage des commentaires
Comme voqu dans le premier chapitre, il est conseill dactiver loption imposant lauteur dun commentaire de renseigner son nom et son adresse e-mail. Le blog se retrouve ainsi en rgle vis--vis de la LCEN. Ladresse e-mail ntant pas publie, les internautes nont finalement pas rellement de raison de sy opposer. La prsentation par dfaut des commentaires, du plus ancien au plus rcent, est pertinente dans la mesure o elle aide linternaute dtecter trs vite lapparition dun nouveau commentaire. Linterface dadministration permet de modifier cette prsentation de deux manires : en inversant cet ordre ; en activant le mode Discussion. Dans le cadre de ce mode de prsentation, les commentaires et les rponses se retrouvent imbriqus. Un lien Rpondre est prsent sous chaque commentaire, ce qui permet linternaute de rpondre prcisment un commentaire donn. Cette prsentation a lavantage de faciliter la lecture des changes entre internautes, mais il est plus difficile de dtecter la publication dun nouveau commentaire. Le menu droulant associ loption augmente le niveau maximal dimbrication 10.

user 177 at Wed Nov 10 04:01:48 +0100 2010
115
WordPress 3
Figure 479
Apparition du lien Rpondre
Figure 480
Les commentaires sont regroups par fils de discussion.
Raccourcis clavier
La modration peut trs vite devenir fastidieuse lorsque le blog rencontre un certain succs et que les commentaires saccumulent. Lutilisation de la souris pour ce genre de tche rptitive est loin dtre optimale. Depuis la version 2.7, les blogueurs ont la possibilit de raliser la modration en utilisant leur clavier. Ces raccourcis permettent de passer dun commentaire lautre, de changer leur statut, de les modifier, dy rpondre ou encore de les supprimer. Les raccourcis ne peuvent tre utiliss qu partir du moment o loption Activer les raccourcis clavier pour la modration de commentaires est coche dans la rubrique Utilisateurs>Votre profil. 116
user 177 at Wed Nov 10 04:01:48 +0100 2010
Les touches J et K permettent de passer dun commentaire lautre (et dune page lautre en dbut et en fin de liste). Le commentaire en cours peut tre repr par son fond bleu. Les actions suivantes sont disponibles sur le commentaire en cours : accepter le commentaire : touche A ; marquer comme spam : touche S ; supprimer : touche D ; diter : touche Q ; rpondre : touche R.
POUR ALLER PLUS LOIN Raccourcis clavier

La liste complte des raccourcis clavier, avec notamment le traitement par lots, est disponible sur la page :
B http://codex.wordpress.org/
Keyboard_Shortcuts
Figure 481
Lorsquil est slectionn, le fond du commentaire devient bleu.
Les liens
La rubrique Liens permet de grer votre blogroll. Comme nous lavons vu prcdemment, il sagit dune liste de sites que vous souhaitez faire connatre. Il peut sagir de sites damis ou de partenaires, ou tout simplement de sites de rfrence dans le secteur dactivit du blog.
Figure 482
Gestion des liens

user 177 at Wed Nov 10 04:01:48 +0100 2010
117
WordPress 3
Un lien peut tre modifi en cliquant sur son nom. Si vous cliquez sur ladresse web, vous accdez directement au site cibl par le lien.
Catgories
SAVOIR La catgorie Liens
La catgorie Liens ne peut pas tre supprime. Renommez-la plutt si elle ne convient vraiment pas.
Les liens sont prsents sous la forme dune liste dans la barre latrale. Le titre du blogroll (Liens) correspond la catgorie associe tous les liens. Il est possible de crer une nouvelle catgorie en utilisant linterface Liens>Catgories des liens. Ds quun lien est associ cette catgorie, un nouveau blogroll apparat automatiquement dans la barre latrale.
Figure 483
Exemple de blogroll
Figure 484
Ajout dun lien
118
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 485
Le passage de la souris sur le lien fait apparatre linfobulle correspondante.
Autres proprits des liens

Cibles
La cible associe un lien indique le mode douverture dun lien.
Figure 486
Cibles du lien
Les deux valeurs intressantes sont _blank et _none. Cette dernire est la valeur par dfaut ; elle signifie que le site associ au lien va remplacer le blog et que linternaute devra donc utiliser le bouton Page prcdente de son navigateur pour revenir sur le blog. Il sagit par consquent dun risque de perdre le visiteur. En slectionnant loption _blank, le site souvrira dans un nouvel onglet ou une nouvelle fentre du navigateur. En fermant longlet, le visiteur a de grandes chances de retomber directement sur le blog.
Relations
Les liens dun blogroll peuvent tre de types tout fait diffrents. Certains pointeront vers les blogs damis, dautres vers des sites partenaires ou des sites de rfrence. Le bloc Relation avec le propritaire du site li (XFN) permet dassocier une information cache aux liens pour indiquer le type de relation qui lie le propritaire du site avec lauteur du blog. Ce type dinformation nest pas essentiel et peut tout fait tre mis de ct.

user 177 at Wed Nov 10 04:01:48 +0100 2010
119
WordPress 3
Figure 487
Relation XFN
Le gestionnaire de menus
Le gestionnaire de menus est une des grandes nouveauts proposes par WordPress 3. Il rapproche encore un peu plus WordPress dun vritable outil de gestion de contenus (CMS). Les menus permettent au blogueur dorganiser de faon trs ergonomique et structure laccs aux diffrents contenus du blog. Un menu peut en effet tout aussi bien donner accs des pages, des catgories ou des liens (internes ou externes). La rubrique Apparence>Menus favorise la cration et lorganisation des menus. Linterface est compose de deux espaces : celui de droite reprsente le menu ; celui de gauche, les diffrents lments qui peuvent venir sinsrer dans le menu. Toute action ralise au niveau du menu doit tre suivie dun enregistrement laide du bouton Enregistrer le menu.
ATTENTION Compatibilit
Peu de thmes supportent pour linstant les menus de faon native. Ceux qui ne les supportent pas peuvent utiliser le widget Menu.
La hirarchisation du menu est ralise en dcalant lgrement, laide de la souris, un lment du menu sur la droite, ce qui cre automatiquement un sous-menu. Tous les lments dcals au mme niveau appartiennent au mme sous-menu.
120
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 488
Dplacement vers la droite du lien WordPress.com afin quil intgre le sous-menu WordPress.
Figure 489
Le menu WordPress dispose bien de deux lments.
Un menu peut venir sinsrer diffrents emplacements dun blog. La premire catgorie demplacements correspond ceux dfinis par le thme actif. Ces emplacements sont ceux proposs dans la section Emplacements du thme. Le thme Twenty Ten ne propose quun seul emplacement, situ sous limage den-tte. Le second type demplacements correspond aux widgets. Le widget Menu personnalis permet de placer un menu dans toutes les zones de widgets du thme.
PIGE Modification du thme

Toute modification de thme doit tre accompagne dune rassociation des menus aux emplacements spcifiques du nouveau thme.
SAVOIR Menu par dfaut

Tant quaucun lment na t ajout au menu, le thme Twenty Ten liste les diffrentes pages du blog.
Figure 490
Association du menu avec un emplacement de thme

user 177 at Wed Nov 10 04:01:48 +0100 2010
121
WordPress 3
Figure 491
Ajout dun widget proposant le Menu1 dans la zone principale de widgets
Figure 492
Apparition du menu dans la colonne latrale du blog
Figure 493
Le menu est cette fois plac dans un widget de pied de page.
Les lments placs dans le menu peuvent tre renomms. Linterface ddition est disponible en cliquant sur la petite flche situe droite de llment correspondant.
122
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 494
La page Forum a pour intitul Mon forum dans le menu.
Longlet Options de lcran permet dajouter : des types de contenus insrer dans les menus (Articles, Mots-clefs) ; des proprits aux lments des menus (Classes CSS, Cible du lien).
Figure 495 Options de lcran de la rubrique Apparence>Menus
Les utilisateurs
WordPress donne la possibilit plusieurs utilisateurs de travailler en parallle sur un mme blog. La rubrique Utilisateurs sert crer de nouveaux utilisateurs. En plus des informations standards, telles que nom, prnom, adresse e-mail, biographie etc., chaque utilisateur dispose galement dun rle associ.

user 177 at Wed Nov 10 04:01:48 +0100 2010
123
WordPress 3
Figure 496
Interface de cration dun compte utilisateur
Ce rle dfinit les droits de lutilisateur vis--vis de la publication et de la modration : ladministrateur accde toutes les fonctionnalits de paramtrage et de rdaction de lespace dadministration ; lditeur a la main sur les articles, les pages, les catgories et les commentaires ; lauteur na accs qu la rdaction et la publication de ses articles ; le contributeur peut crire un article mais ne dispose pas des droits de publication ; labonn ne peut accder qu son profil. La rubrique Rglages>Gnral dfini le rle par dfaut qui sera associ aux nouveaux utilisateurs.
124
user 177 at Wed Nov 10 04:01:48 +0100 2010
user 177 at Wed Nov 10 04:01:48 +0100 2010
chapitre
user 177 at Wed Nov 10 04:01:48 +0100 2010
Bloguer en nomade
SOMMAIRE
B WordPress.com optimis
WordPress offre aux utilisateurs nomades une multitude de moyens de grer leur blog. Les habitudes des blogueurs ont en effet beaucoup volu ces dernires annes. Les articles publis sont la fois de plus en plus courts et de plus en plus frquents. WordPress propose dsormais diffrents outils permettant de rester en liaison permanente avec un blog, notamment via des terminaux mobiles.
pour mobiles
B Applications WordPress
pour iPhone, iPad, Android, et Blackberry
B Cration darticles par e-mail

MOTS CLEFS
B smartphone B mobilit B iPhone B iPad B Android B Blackberry B e-mail

user 177 at Wed Nov 10 04:01:48 +0100 2010
WordPress 3
Quil sagisse dune version web optimise pour les mobiles, dune passerelle e-mail ou dapplications pour smartphones, plusieurs techniques visent aider le blogueur saffranchir des contraintes matrielles afin quil puisse sexprimer en toute situation.
WordPress.com pour mobiles

Le service WordPress.com est disponible dans une version spcialement adapte aux terminaux mobiles.
Figure 51
Page dauthentification de la version mobile de WordPress.com
EXTENSION WordPress optimis pour mobiles

Des extensions telles que WPhone permettent dobtenir une interface dadministration optimise pour mobiles.
Accessible sur m.wordpress.com, cette version allge na pas pour ambition de donner accs lensemble des fonctionnalits de lespace dadministration. Il sagit plutt de permettre au blogueur de rdiger des articles et de modrer les commentaires. La simplicit et la vitesse de chargement des pages sont ici les matres mots. La faiblesse apparente de cette version est en ralit sa force, dans la mesure o cette interface pure fonctionne aussi bien avec des smartphones de dernire gnration (iOS, Android) quavec des tlphones portables plus anciens sur lesquels laffichage correct dun site web relve le plus souvent du miracle.
128
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 52
Figure 53
Cration dun nouvel article
Statistiques des blogs associs au compte
Applications smartphone
Les smartphones peuvent tre assimils des tlphones mobiles enrichis dune dimension dassistant personnel. Gnralement dots dun grand cran tactile, dun accs Internet et de nombreux capteurs (GPS, acclromtre, appareil photo), ils permettent de surfer sur le Web, daccder sa messagerie et de consulter son agenda. Lavnement de ces appareils est une des rvolutions les plus importantes dans lindustrie de linformatique personnelle. Modles, habitudes et comportements sont en pleine mutation : le grand principe un ordinateur par foyer cher Bill Gates se transforme progressivement en un smartphone par individu ; accompagnant lutilisateur partout et tout le temps, le smartphone, associ une connexion Internet, le libre des contraintes de lieu et de temps ; la distribution de logiciels subit une refonte complte grce aux platesformes de distribution dapplications de type App Store (Apple), Android Market (Google), App World (Blackerry), Ovi Store (Nokia) ou App Catalog (HP/Palm). Centralises, scurises, les applications sinstallent en un clic et cotent rarement plus de quelques euros.
user 177 at Wed Nov 10 04:01:48 +0100 2010
129
5 Bloguer en nomade
WordPress 3
Ce secteur sera sans conteste le plus concurrentiel des annes venir. Les grands noms de linformatique ne sy sont pas tromps et ont tous investi massivement dans ce domaine. La situation actuelle est peu prs celle-ci : Blackberry se dmne pour protger sa part de march auprs des hommes daffaires ; Apple, lorigine dune vritable rvolution avec son iPhone, domine toujours le march ; Google et ses nombreux partenaires grignotent chaque mois un peu plus de terrain avec la plate-forme ouverte Android ; Palm espre que son rcent rachat par HP permettra de sauver son prometteur webOS ; Microsoft tente de combler son retard avec Windows Mobile 7.
Bloguer sur iPhone

Automattic, socit ditrice du service WordPress.com, est lorigine de lapplication gratuite et open source WordPress for iOS. Cette application permet au blogueur de grer ses diffrents blogs depuis un iPhone.
LOGICIEL LIBRE
Le code source de WordPress for iOS
Les sources de lapplication sont accessibles ladresse suivante :
B http://iphone.wordpress.org/development
Elle donne notamment accs aux fonctionnalits suivantes : cration de contenu : articles, pages ; modration des commentaires : suppression, rponse. Lapplication peut tre installe en quelques clics via lApp Store en recherchant le terme wordpress .
Figure 54
Icne de lapplication App Store
Figure 55
La premire application de la liste est celle qui nous intresse.
130
user 177 at Wed Nov 10 04:01:48 +0100 2010
Une fois lapplication lance, la premire tape consiste associer un blog lapplication. Les renseignements obligatoires indiquer sont ladresse (URL) du blog ainsi que lidentifiant et le mot de passe dadministration. Dans le cadre dun blog WordPress.com, la connexion est simple et sans surprise : lURL est de la forme <monblog>.wordpress.com. Avec un blog WordPress autonome, le blogueur doit au pralable se rendre dans la rubrique Rglages>criture de lespace dadministration et cocher la case Activer les protocoles XML-RPC.
Figure 56
Icne de lapplication WordPress
Figure 57
Activation des services web. Lopration doit tre ralise sur tous les blogs associer.
Une fois le blog associ, linterface donne accs trois groupes de fonctionnalits : commentaires, articles et pages. Longlet Commentaires liste les derniers commentaires. Le filtre All / Pending permet de nafficher que les commentaires en attente de validation.
Figure 58
Liste des derniers commentaires

user 177 at Wed Nov 10 04:01:48 +0100 2010
131
5 Bloguer en nomade
WordPress 3
En cliquant sur un commentaire, le blogueur peut le supprimer, le marquer comme spam ou le refuser. Il est galement possible de raliser ces oprations sur une slection de commentaires en cliquant sur le bouton Edit, disponible au-dessus de la liste. La slection dun commentaire est ralise en cliquant sur le cercle situ gauche. Longlet Posts donne accs la liste des articles du blog. En cliquant sur un article ou en en crant un nouveau (grce la petite icne reprsentant un crayon, situe en haut droite de linterface), la barre dicnes en bas de lcran est remplace par de nouvelles fonctionnalits : Rdaction, Commentaires, Photos, Prvisualisation, Paramtres.
Figure 59
Figure 510
Action sur plusieurs commentaires
dition dun article
La cible situe droite du champ Titre permet de golocaliser larticle. Le bouton Photos propose de prendre une nouvelle photo ou den slectionner une dans la bibliothque de liPhone. Lapplication WordPress for iOS est en mesure de grer plusieurs blogs. Il convient pour cela de passer par licne Blogs et dutiliser le bouton +.
132
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 511 Association dune latitude
Figure 512
Figure 513
et dune longitude larticle
Association dune photo un article
Liste des blogs associs lapplication
Le site iphone.wordpress.org propose de nombreuses informations concernant lapplication. Celle-ci est appele WordPress for iOS car elle est galement disponible pour la tablette iPad. Linterface tire avantageusement parti de lespace supplmentaire pour placer des lments de navigation dans une colonne latrale ; lergonomie se trouve ainsi largement amliore.
Figure 514
Interface WordPress for iOS sur iPad Groupe Eyrolles, 2009

user 177 at Wed Nov 10 04:01:48 +0100 2010
133
5 Bloguer en nomade
WordPress 3
Bloguer sous Google Android

WordPress for Android est galement une application dveloppe par la socit Automattic. Elle est disponible sur lAndroid Market et peut tre installe en quelques clics.
Figure 515 Recherche de wordpress
Figure 516 WordPress for Android
Figure 517
sur lAndroid Market
est une application gratuite.
Le bouton Install permet de lancer linstallation.
Dans un souci de transparence, linstallation prcise les diffrentes ressources dont elle tirera parti (voir figure 5-18). Une fois installe, lapplication peut tre excute en cliquant sur licne prsente sur le bureau (figure 5-19). Le blogueur peut alors prciser lURL du blog, son identifiant et son mot de passe. (figure 5-20) Plusieurs blogs peuvent tre associs lapplication (figure 5-21). Une fois connect, le blogueur dispose de trois onglets principaux qui donnent accs aux commentaires, aux articles et aux pages (figure 5-22). Pages et articles peuvent tre crs en cliquant sur le + situ en bas gauche de lcran (figure 5-23).
134
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 518
Figure 519
Figure 520
Lapplication ncessite laccs Internet.
Licne WordPress est disponible sur le bureau.
Association du blog lapplication
Figure 521 Lapplication WordPress
Figure 522 Onglets permettent daccder
Figure 523
for Android est multiblog.
aux commentaires, articles et pages
Liste de pages

user 177 at Wed Nov 10 04:01:48 +0100 2010
135
5 Bloguer en nomade
WordPress 3
Lditeur (figure 5-24) dispose de nombreuses fonctionnalits telles que la gestion de styles, linsertion de liens ou de photos (prises sur lappareil). Avant denregistrer larticle, le blogueur peut lui associer une catgorie et des tags et indiquer son tat de publication (figure 5-25). WordPress for Android exploite une dimension trs intressante du systme Android : les notifications. Ces dernires permettent dtre averti automatiquement ds quun commentaire est laiss sur le blog (figure 5-26). Les notifications peuvent tre actives ou dsactives dans lespace Notification Settings (figure 5-27). Un simple clic sur le commentaire permet au blogueur dy rpondre (figure 5-28 et 5-29). WordPress for Android est un projet open source extrmement dynamique. Blog, forums et sources sont disponibles sur le site android.wordpress.org.
Figure 524
Figure 525
Figure 526
Lditeur darticles
Association de diffrentes mtadonnes
Notification dun nouveau commentaire
136
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 527
Figure 528
Figure 529
Configuration des notifications
Dernires notifications sur lappareil
Rponse un commentaire
Bloguer depuis un BlackBerry

Les utilisateurs de BlackBerry disposent galement dune application WordPress. Cette dernire peut tre installe en se rendant sur le site blackberry.wordpress.org ou depuis App World.
Figure 530
Recherche de lapplication sur App World

user 177 at Wed Nov 10 04:01:48 +0100 2010
137
5 Bloguer en nomade
WordPress 3
Figure 531
Lapplication est dsormais installe.
Comme sur iOS ou Android, linstallation commence par lassociation de lapplication avec un blog.
Figure 532
Association de lapplication avec le blog
Les diffrents crans de paramtrage permettent notamment de dfinir les blogs pour lesquels des notifications doivent tre mises en cas de rception de commentaires. 138
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 533
Notification de nouveaux commentaires
De faon tout fait classique, lapplication donne accs aux articles, aux commentaires et aux pages.
Figure 534
Principales rubriques de lapplication
Fonctionnalit sympathique, WordPress for BlackBerry propose de visualiser les statistiques des blogs associs directement dans linterface. Lextension WordPress.com Stats doit cependant tre installe et active sur le blog.

user 177 at Wed Nov 10 04:01:48 +0100 2010
139
5 Bloguer en nomade
WordPress 3
Figure 535
Figure 536
Modration dun commentaire
Consultation des statistiques dun blog
Bloguer par e-mail

Le courrier lectronique a lnorme avantage dtre un outil dsormais universel, prsent sur tous les systmes et terminaux (ordinateurs, mobiles, bornes). Il est par consquent particulirement adapt un usage nomade. WordPress donne la possibilit de crer un nouvel article partir dun email. Le sujet et le corps du message deviennent respectivement le titre et le contenu de larticle. La mise en uvre de cette fonctionnalit varie entre un blog WordPress autonome et un blog WordPress.com.
DILEMME Scurit ou fonctionnalit ?
Il est prfrable de choisir un serveur POP nimposant pas de se connecter en mode scuris SSL. Certaines installations de PHP ont en effet des soucis avec le SSL.
Sur une installation autonome de WordPress

Le blogueur doit disposer dune adresse e-mail ddie la cration darticles par e-mail. La rubrique Rglages>criture permet dactiver cette fonctionnalit en renseignant les diffrents paramtres lis au compte de ladresse.
140
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 537
Activation de la cration darticles par e-mail
Une fois le compte paramtr, WordPress doit rcuprer les messages prsents sur le serveur de-mail. Cette vrification peut tre ralise en accdant la page http://monblog.com/wordpress/wp-mail.php. Cette solution a cependant linconvnient de ncessiter un accs au Web. Diffrentes techniques permettent cependant dautomatiser cette vrification : passer par des services en ligne tels que webcron.org ou setcronjob.com ; paramtrer (ou faire paramtrer) son serveur pour excuter une tche automatique (cron job) intervalles rguliers. Une commande telle que wget -N http://monblog.com/wordpress/wp-mail.php est envisageable. Elle permet dutiliser le programme wget pour tlcharger la page http://monblog.com/wordpress/wp-mail.php. Les articles provenant des messages prsents sur la bote sont crs en tant que brouillons. Lorsque le-mail est envoy au format HTML, WordPress est en mesure de rcuprer un certain nombre dlments pour construire le corps de larticle : tableaux, listes, liens et images. Il conserve galement certains styles (gras, italique). Les polices de caractres explicites et les couleurs ont en revanche plus de chance dtre ignores. Si ladresse e-mail de lauteur du message correspond celle dun administrateur du blog, larticle se retrouve automatiquement associ cet utilisateur.
DTAIL Si vos e-mails sont signs ?
WordPress est suffisamment intelligent pour supprimer automatiquement la signature des e-mails.
Sur WordPress.com
La fonctionnalit peut tre active en passant par le menu Mon Compte>Mes Blogs et en cliquant sur le bouton Activer au niveau de la colonne crire un article par e-mail. Une adresse e-mail est alors automatiquement gnre.

user 177 at Wed Nov 10 04:01:48 +0100 2010
141
5 Bloguer en nomade
WordPress 3
Figure 538 Adresse e-mail permettant la publication darticles
la diffrence de la solution prcdente, les messages transmis cette adresse deviennent instantanment des articles publis.
Figure 539
E-mail davertissement de publication darticle par e-mail
Il convient de ne jamais oublier que ladresse e-mail de publication est extrmement sensible. Une personne malintentionne qui mettrait la main sur cette adresse pourrait poster des articles sur le blog. Les dveloppeurs ont d prvoir cette situation, car un e-mail de confirmation est automatiquement envoy ladministrateur du blog ds quun article est cr depuis cette adresse. Cela permet au blogueur de dtecter tout comportement suspect. Dans une telle situation, ladresse e-mail de publication doit tre regnre le plus vite possible laide du lien prvu cet effet.
Figure 540
Lien permettant de regnrer ladresse e-mail de publication
142
user 177 at Wed Nov 10 04:01:48 +0100 2010
user 177 at Wed Nov 10 04:01:48 +0100 2010
chapitre
user 177 at Wed Nov 10 04:01:48 +0100 2010
Modifier lapparence dun blog
SOMMAIRE
B Installer un nouveau thme
Avec son systme de thmes, WordPress permet aux blogueurs de modifier trs facilement lapparence de leur blog. Malgr leur structure commune, les blogs parviennent ainsi proposer des prsentations extrmement varies, ce qui est essentiel pour vhiculer lidentit dun blog auprs de ses lecteurs.
B Modifier les options

dun thme
B Adapter une feuille de style B Faire voluer un thme

MOTS-CLEFS
B thme B CSS B installation B prsentation B habillage B personnalisation B design

user 177 at Wed Nov 10 04:01:48 +0100 2010
WordPress 3
Le design est une dimension essentielle dun blog dans la mesure o il sagit de la premire chose que remarque un nouveau visiteur. Il est par consquent crucial que ce premier ressenti soit la fois positif et fidle lidentit que souhaite vhiculer le blogueur. Se concentrer sur le fond, cest--dire les contenus, sans se proccuper de la forme est un parti pris dangereux pour un blogueur. Diffrents moyens permettent de modifier lapparence dun blog : changer de thme ; personnaliser le thme ; modifier les feuilles de style (CSS).
Changer de thme
WordPress intgre un systme trs abouti de thmes qui permet dun simple clic de modifier la prsentation complte dun blog.
Quest-ce quun thme ?

SUIVRE Structure dun thme
Le chapitre 14 Dvelopper sous WordPress dtaille la structure technique dun thme.
Un thme correspond un ensemble de scripts PHP responsables de la construction et de lhabillage des pages du blog. Dans le cadre dun thme WordPress, ces scripts sont appels des templates. Un thme construit aussi bien la structure gnrale du blog (en-tte, colonne latrale, pied de page) que les diffrentes vues : listes darticles, dtail dun article, rsultats de recherche, etc.
ATTENTION Incompatibilits
Toutes les plates-formes de blogs disposent dun systme de thmes. Un thme est cependant spcifique la plate-forme pour laquelle il a t conu. Il nest par consquent pas possible dinstaller un thme Blogger sur WordPress.
Figure 61
Blog utilisant le thme LightWord 1.9.9.7
146
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 62
Le mme blog habill par le thme Notepad
Thme par dfaut

Le thme Kubrick fut le thme par dfaut de WordPress de 2005 2010. Apprci pour sa rapidit, sa simplicit et sa clart, ce thme commenait tre dpass face aux usages et aux habitudes de la blogosphre actuelle.
Figure 63
Kubrick, le thme par dfaut pour WordPress de 2005 2010

user 177 at Wed Nov 10 04:01:48 +0100 2010
147
6 Modifier lapparence dun blog
WordPress 3
La dcision fut donc prise de proposer un nouveau thme par dfaut avec le passage de WordPress la version 3.
Figure 64
Le thme par dfaut pour WordPress 3 : Twenty Ten
LE SAVIEZ-VOUS ? Pourquoi Twenty Ten ?

Matt Mullenweg, crateur de WordPress, dcida dappeler le nouveau thme par dfaut Twenty Ten (cest--dire 2010 ) pour que celui-ci, du fait mme de son nom, ne tarde pas trop devenir obsolte. Avoir maintenu Kubrick aussi longtemps est une erreur que WordPress ne souhaite plus reproduire.
Ce nouveau thme, Twenty Ten, dispose de nombreux avantages : une compatibilit technique totale avec les fonctionnalits les plus avances de WordPress : menus, widgets, etc. ; un paramtrage tendu : fond de page (image ou couleur), image den-tte ; une colonne latrale plus large permettant daccueillir plus facilement des widgets populaires tels que Facebook ou Twitter ; un meilleur respect des styles dans lditeur de lespace dadministration ; une volutivit la fois facilite et plus importante.
148
user 177 at Wed Nov 10 04:01:48 +0100 2010
Installer un thme
WordPress rend linstallation dun nouveau thme extrmement simple. Longlet Installer des thmes disponible dans linterface Apparence> Thmes propose diffrents moyens de dcouvrir et de rechercher de nouveaux thmes : des liens : Mis en avant, Les + rcents, Mis jour rcemment ; un moteur de recherche permettant de rechercher par mot-clef ou par auteur ; un systme de filtrage permettant de ne lister que les thmes correspondant aux critres cochs.
PIGE Recherche dun thme

Le filtrage se base sur les tags que les dveloppeurs associent leurs thmes. Il est par consquent tout fait envisageable quun thme napparaisse pas dans une liste alors quil dispose bien de la caractristique recherche.
Figure 65
Interface dinstallation de thmes

user 177 at Wed Nov 10 04:01:48 +0100 2010
149
WordPress 3
Les thmes correspondant la recherche sont affichs par liste.
Figure 66
Rsultat dune recherche sur le mot notepad
Chaque thme prsent dans la liste est accompagn de trois liens qui permettent : dinstaller le thme (Installer) ; dobtenir un aperu (Prvisualiser) ; dafficher plus de dtails : auteur, version, date de dernire mise jour, nombre de tlchargements (Dtails).
Figure 67
Fentre de prvisualisation
150
user 177 at Wed Nov 10 04:01:48 +0100 2010
Le lien Installer ouvre une fentre qui permet de confirmer linstallation en cliquant sur le bouton Installer maintenant.
Figure 68
Installation du thme Notepad
Une page de confirmation est affiche une fois linstallation ralise.
Figure 69
Confirmation de linstallation du thme Notepad
Choisir un nouveau thme

Linterface Apparence>Thmes liste tous les thmes installs sur le blog. Chaque thme dispose dinformations associes : le nom ; la version ; lauteur (avec un lien vers son site) ; une description ; le rpertoire dinstallation ; les mots-clefs. Le thme actif est celui prsent dans la section Thme actuel ; vous pouvez le remplacer par un des autres thmes installs (Thmes disponibles) en cliquant sur le lien Activer.
user 177 at Wed Nov 10 04:01:48 +0100 2010
151
WordPress 3
Figure 610
Liste des thmes installs sur le blog
Trois actions sont disponibles pour chaque thme : Activer, Prvisualiser et Supprimer. la diffrence de la prvisualisation dcrite prcdemment, celle-ci est accompagne dun lien permettant dactiver le thme.
Figure 611
La fentre de prvisualisation permet dactiver le thme dj install.
152
user 177 at Wed Nov 10 04:01:48 +0100 2010
Supprimer permet deffacer le rpertoire ainsi que tous les fichiers du thme. Il est important de rappeler que cette opration naura pas de consquence sur les diffrents contenus du blog (articles, catgories, mots-clefs, pages, liens, etc.)
Figure 612
Fentre incruste donnant un aperu du thme
Installation manuelle
Des sites de design tels que Smashing Magazine proposent rgulirement des slections de thmes. Certains dentre eux, bien que gratuits, ne sont pas rfrencs sur WordPress.org. Il est alors ncessaire de procder une installation manuelle. La premire tape dune telle installation consiste se rendre sur le site du dveloppeur du thme et rcuprer larchive du thme sous forme dun fichier .zip. Selon le contenu de larchive, deux modes dinstallation sont alors envisageables. Si larchive contient des scripts PHP et un fichier style.css la racine ou dans un sous-rpertoire, le blogueur peut passer par laction Envoyer disponible dans linterface Apparence>Ajouter de nouveaux thmes.
B http://www.smashingmagazine.com

user 177 at Wed Nov 10 04:01:48 +0100 2010
153
WordPress 3
Figure 613
Le fichier .zip contient des scripts la racine.
Un formulaire permet alors de slectionner le fichier .zip et de
lenvoyer sur le serveur. Ds que le transfert est termin, la rubrique Apparence>Thmes fait rfrence au nouveau thme install, qui peut alors tre activ.
Figure 614
Installation manuelle dun thme
Figure 615
Linstallation du thme DailyNote sest bien droule.
Dans le cas o larchive contient une multitude de rpertoires, il convient
de la dcompresser et didentifier le rpertoire contenant les scripts PHP ainsi que la feuille de style (style.css). Cest ce rpertoire qui doit ensuite tre dpos sur le serveur dans le rpertoire wp-content/themes. 154
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 616 Un simple glisser-dposer laide dun client FTP tel que FileZilla ou Cyberduck permet dinstaller un nouveau thme dans le blog.
Gnrer un thme
Un gnrateur de thme est une solution particulirement adapte pour un blogueur profane qui ne parvient pas trouver un thme disposant de couleurs qui lui conviennent. Un tel outil permet de spcifier un nombre important de caractristiques (couleurs, typographie, largeur de la colonne latrale, etc.) et de tlcharger larchive du thme nouvellement cr. Generator, disponible sur le site affiche un aperu en temps rel du thme en cours dlaboration.
http://www.yvoschaap.com/wpthemegen/,
WordPress
Theme
Une fois le paramtrage termin, lutilisateur rcupre larchive du thme en utilisant le bouton Save disponible en bas gauche du site.

user 177 at Wed Nov 10 04:01:48 +0100 2010
155
WordPress 3
Figure 617 Linterface de WordPress Theme Generator
Figure 618
Page permettant de tlcharger le nouveau thme
156
user 177 at Wed Nov 10 04:01:48 +0100 2010
Le thme peut alors tre install sur le blog selon la procdure manuelle.
Figure 619
Le nouveau thme apparat bien dans la rubrique Apparence>Thmes.
Adapter les options dun thme

Le menu Apparence propose par dfaut les rubriques suivantes : Thmes ; Widgets ; Menus ; Arrire-plan ; En-tte ; diteur. Les rubriques Arrire-plan et En-tte sont spcifiques au thme par dfaut, Twenty Ten.
Figure 620 Rubrique spcifique associe
au thme Twenty Ten

user 177 at Wed Nov 10 04:01:48 +0100 2010
157
WordPress 3
Figure 621
Personnalisation de larrire-plan
Figure 622
Personnalisation de len-tte
158
user 177 at Wed Nov 10 04:01:48 +0100 2010
Un thme tel que Monochrome propose quant lui la rubrique Options du thme qui permet notamment de dfinir la largeur, limage den-tte, le type de moteur de recherche, etc.
SAVOIR Pas de conflits !

Chaque thme enregistre ses options dans un espace qui lui est propre. Vous ne risquez donc pas de modifier celles dun autre thme.
Figure 623
Options du thme Monochrome
Proposer de telles interfaces de personnalisation est une vritable plusvalue pour un thme. Ce type de personnalisation dispose de deux avantages majeurs : une grande simplicit pour le blogueur ; la conservation des personnalisations suite une mise jour du thme.

user 177 at Wed Nov 10 04:01:48 +0100 2010
159
WordPress 3
CONFIGURATION
Dfinir le nombre darticles par page
Le nombre darticles par page afficher dans les listes nest pas dfini par le thme mais par une option de la rubrique Rglages>Lecture>Les pages du site doivent afficher au plus.... Cette rubrique permet galement de proposer laffichage dune page en tant que page daccueil plutt que la liste des derniers articles.
WordPress permet de limiter la recherche de nouveaux thmes aux seuls thmes qui disposent de telles interfaces. Il convient pour cela de cocher la case Options du thme dans la section Filtre de fonctionnalits (rubrique Thmes>Installer des thmes).
Modifier les feuilles de style

Les templates qui composent un thme sont accompagns dau moins une feuille de style CSS responsable de lhabillage du blog. ce titre, ces fichiers dfinissent : les polices de caractres ; la casse (majuscule, minuscule) ; lalignement ; les couleurs ; les bordures ; les tailles et dimensions ; les alinas, etc.
Structure dune page web

Schmatiquement parlant, un site web est constitu de trois catgories de fichiers bien distinctes. La premire, la plus importante, correspond aux fichiers HTML. Ces derniers dfinissent le contenu et la structure de la page avec des balises HTML.
Figure 624
Le code HTML dune page peut tre visualis en utilisant le menu du navigateur Affichage>Code source de la page.
160
user 177 at Wed Nov 10 04:01:48 +0100 2010
La deuxime catgorie de fichiers correspond aux feuilles de style. Ces
dernires sont crites en CSS (Cascading Style Sheet, cest--dire feuille de style en cascade ) et permettent de dfinir laspect visuel du site. La dernire catgorie de fichiers correspond aux scripts JavaScript. Il sagit de programmes qui grent linteractivit des pages : les affichages dalertes et de confirmation, les dplacements dlments, les effets, les contrles, etc. Alors quil est possible de placer le CSS et le JavaScript directement au sein de la page HTML, un bon dveloppeur web prfrera sparer ces diffrents lments dans des fichiers bien distincts.
Modifier les rgles CSS

Un thme WordPress intgre la fois des fichiers PHP qui se chargent de gnrer le code HTML de la page partir des informations stockes dans la base de donnes, ainsi quune ou plusieurs feuilles de style en charge de lhabillage graphique du blog. Lespace dadministration permet dditer ces diffrents fichiers via la rubrique Apparence>diteur. La colonne de droite liste les templates dans la section Modles et les feuilles de style dans la section Style.
Figure 625 Le thme WordPress Default
comporte quatre feuilles de style.
Figure 626
dition de style.css Groupe Eyrolles, 2009

user 177 at Wed Nov 10 04:01:48 +0100 2010
161
WordPress 3
Le principe dune feuille de style consiste associer des proprits regroupes entre accolades des slecteurs qui correspondent des lments de la page (tables, cellules, paragraphes, etc.).
body { line-height: 1; border: 4px solid red; }
Le slecteur body permet de dfinir les proprits de lintgralit de la page. En y ajoutant la proprit border: 4px solid red;, la page se dote dun cadre rouge de quatre pixels dpaisseur.
Figure 627 Apparition dune bordure rouge suite la modification de la feuille de style
EN SAVOIR PLUS CSS2

R Raphal Goetter, CSS2, Pratique du design
Laccs aux CSS permet donc de modifier certains aspects visuels du blog sans ncessiter le dveloppement dun nouveau thme.
web, 2e dition, Eyrolles, mars 2007
Thme enfant
Plutt que de modifier directement le style dun thme (et de risquer de perdre ces modifications suite une mise jour du thme), WordPress, depuis la version 2.7, recommande lutilisation des thmes dits enfants. Le principe dun tel thme est de faire rfrence un thme parent et de ne redfinir que les lments qui le ncessitent (styles, templates). On dit que le thme enfant hrite des proprits de son parent.
162
user 177 at Wed Nov 10 04:01:48 +0100 2010
Dans sa version la plus basique, un thme enfant correspond un rpertoire plac dans wp-content/theme/<nom_du_theme> contenant un fichier style.css dont le contenu est structur de la faon suivante :
/* Theme Name: Twenty Ten Italic Author: Fx Template: twentyten */
Ces lignes prcisent : le nom du thme (Twenty Ten Italic) ; lidentit du crateur (Fx) ; le nom du thme parent (il sagit plus prcisment du nom du rpertoire du thme parent) ; dans le cas prsent, le thme de rfrence est Twenty Ten. Une fois le fichier style.css enregistr, le nouveau thme apparat automatiquement dans la rubrique Apparence>Thmes.
Figure 628
Le thme enfant apparat parmi les autres thmes.

user 177 at Wed Nov 10 04:01:48 +0100 2010
163
WordPress 3
Le fichier style.css peut dfinir lintgralit des rgles CSS du thme ou se contenter den modifier certaines. Pour cela, le thme enfant doit faire rfrence au thme parent, en utilisant linstruction @import url() pour inclure la feuille de style CSS correspondante.
/* Theme Name: Twenty Ten Italic Author: Fx Template: twentyten */ @import url("../twentyten/style.css"); * { font-style:italic !important; }
Figure 629 Le thme enfant Twenty Ten Italic affiche lensemble des textes en italique.
164
user 177 at Wed Nov 10 04:01:48 +0100 2010
user 177 at Wed Nov 10 04:01:48 +0100 2010
chapitre
user 177 at Wed Nov 10 04:01:48 +0100 2010
Ajouter des fonctionnalits
SOMMAIRE
B Installer, activer et dsactiver
Avec prs de 10 000 extensions, WordPress permet ses utilisateurs de trouver une solution toute une srie de problmatiques auxquelles un blogueur peut tre confront.
une extension
B Proposer un formulaire de
contact sur le blog
B Installer un forum
MOTS-CLEFS
B extension B module B formulaire de contact B forum

user 177 at Wed Nov 10 04:01:48 +0100 2010
WordPress 3
Des plates-formes web open source comme phpBB (forum), Drupal ou Joomla (gestion de contenus), Prestashop ou Magento (e-commerce) doivent une part de leur succs leur volutivit. Modules et extensions permettent aux utilisateurs denrichir fonctionnellement leur site sans effectuer de dveloppements complmentaires. Ce chapitre prsente certaines des extensions sappliquant WordPress, leur fonctionnement et leur installation. Les extensions de WordPress sont protiformes ; certaines ont des effets visibles, alors que dautres restent indcelables. Certaines apparaissent sur le blog, dautres au sein de lespace dadministration.
Grer les extensions

La rubrique Extensions centralise la gestion des extensions et permet notamment : de rechercher une extension et dobtenir plus dinformations sur elle ; de linstaller ; de lactiver ou la dsactiver ; de la paramtrer ; de la mettre jour ; de la supprimer.
Figure 71
Liste des diffrentes extensions installes sur le blog
Figure 72
La liste des filtres volue en fonction des extensions installes.
168
user 177 at Wed Nov 10 04:01:48 +0100 2010
Toutes les extensions prsentes dans la liste ont effectivement t installes sur le blog. Un certain nombre dinformations est associ chacune dentre elles : le nom de lextension ; une description ; la version ; le nom de lauteur (avec un lien vers son site personnel) ; le lien vers le site de lextension. Les actions associes chaque extension (Activer, Dsactiver, Modifier, Supprimer, Modifier) varient en fonction du statut de lextension.
CONFIGURATION Extensions prinstalles

WordPress est livr avec deux extensions prinstalles : Akismet et Hello Dolly. Akismet, qui permet damliorer la lutte contre le spam, est traite en dtail dans le chapitre consacr la scurit. Hello Dolly est anecdotique et peut tout fait tre supprime.
Statut dune extension

Une extension qui vient dtre installe dispose par dfaut du statut Dsactive. Cela signifie que lextension est prsente sans tre fonctionnelle (cest--dire active). Le blogueur peut reprer les extensions qui ont t actives leur fond blanc. Les extensions dsactives apparaissent quant elle sur fond gris.
SAVOIR
Rpertoire de stockage des extensions
Les extensions sont stockes dans le rpertoire wp-content/plugins.
Figure 73
Lextension NextGEN Gallery est active, alors que Hello Dolly est dsactive.
Lactivation dune extension est ralise en cliquant sur le lien Activer situ sous le nom de lextension. Plusieurs extensions peuvent tre actives en mme temps, en utilisant le menu Actions globales situ audessus de la liste. Ce menu permet galement de Dsactiver et de Supprimer plusieurs extensions slectionnes.
Figure 74
Traitement par lots

user 177 at Wed Nov 10 04:01:48 +0100 2010
169
7 Ajouter des fonctionnalits
WordPress 3
Modification
Le lien Modifier permet dditer les sources de lextension. Cette pratique nest pas conseille, dans la mesure o les modifications risquent dtre perdues suite une mise jour de lextension.
Figure 75
dition du script akismet.php inclus dans lextension Akismet
Dans le cas o une extension ncessite absolument une modification (correction de bogue ou ajout de fonctionnalit), deux solutions doivent tre privilgies : transmettre la demande (ou un patch) lauteur de lextension, afin quil puisse apporter la modification ; dupliquer lextension et lui donner un nouveau nom, afin de pouvoir la faire voluer sa guise.
Suppression
Seule une extension dsactive peut tre supprime. Le lien Supprimer fait basculer sur une interface de confirmation.
Figure 76
Confirmation de suppression
170
user 177 at Wed Nov 10 04:01:48 +0100 2010
Un lien donne galement la possibilit de lister les fichiers qui seront supprims.
Figure 77
ASTUCE Suppression du rpertoire

La suppression du rpertoire de lextension sur le serveur dsactive et supprime automatiquement lextension. Cela peut se rvler particulirement utile lorsque lextension est lorigine dun dysfonctionnement majeur du blog.
Seul le fichier hello.php sera supprim.
Configuration
De nombreuses extensions donnent la possibilit au blogueur de modifier certains de leurs paramtres.
Figure 78
Interface de configuration dAkismet
Laccs linterface de configuration diffre dune extension lautre. Certaines ajoutent un lien Rglages, alors que dautres incluent un lien au sein de leur description.
Figure 79
Le lien Rglages donne accs au paramtrage de lextension.
Figure 710
Ces deux descriptions disposent chacune dun lien permettant de configurer lextension : Options configuration panel et Configure.
Les interfaces de configuration des extensions peuvent venir sintgrer dans diffrents menus de lespace dadministration. On les retrouvera le plus souvent dans le menu Rglages.

user 177 at Wed Nov 10 04:01:48 +0100 2010
171
WordPress 3
Figure 711
La rubrique Rglages, enrichie de plusieurs interfaces de configuration dextensions
Installer une extension

Comme pour les thmes, WordPress a rendu linstallation dune extension aussi simple que conviviale.
Installer depuis lespace dadministration

La rubrique Extensions>Ajouter permet de rechercher une extension en prcisant un ou plusieurs termes.
Figure 712
Exemple de recherche sur le mot-clef Twitter
Chaque rsultat est accompagn dun lien Dtails qui donne accs la fiche technique complte de lextension. Cette fiche permet notamment : de consulter la description complte de lextension ; de se faire une ide de sa popularit (Moyenne des notes, Nombre de tlchargements) ;
172
user 177 at Wed Nov 10 04:01:48 +0100 2010
EXEMPLE Ajouter une galerie photo

Lextension NextGEN Gallery est sans doute lune des plus populaires pour ajouter une galerie photo son blog. Elle permet notamment de grer aisment de nombreuses images, grce un systme de galeries et dalbums, mais aussi de publier un diaporama en Flash, ou encore de marquer ses images au moyen de watermarks (tatouage numrique). Un widget est galement disponible pour prsenter sa galerie dans la colonne latrale. De nombreuses autres extensions sont couramment utilises, comme WP Photo Album Plus, Photo Galleria, Featured Content Gallery, Dynamic Content Gallery, Lightbox Gallery, GRAND Flash Album Gallery, Flickr Gallery, Lazyest Gallery, etc.
Figure 713
Fiche descriptive de lextension NextGEN Gallery
de lire des commentaires dutilisateurs ; de vrifier la compatibilit vis--vis de la version de WordPress ; de sassurer de la cadence du dveloppement (Dernire mise jour) ; de visualiser des captures dcran (Screenshots) ; de sinformer sur les dernires modifications (Changelog) ; dobtenir de laide (FAQ) et des dtails sur la procdure dinstallation
(Installation). Ces diffrentes informations permettent de se faire une ide trs prcise de la qualit et de la pertinence de lextension. Le blogueur peut alors fermer la fentre sil nest pas convaincu, ou procder linstallation en cliquant sur le lien Installer maintenant. Notez quun autre lien Installer maintenant se situe droite de la fentre Dtails.
Figure 714
Confirmation de linstallation de lextension NextGEN Gallery

user 177 at Wed Nov 10 04:01:48 +0100 2010
173
WordPress 3
SCURIT Installation sans risque

Il est important de se souvenir que linstallation nentrane pas une activation automatique ; il ny a donc aucun risque de dysfonctionnement du blog suite une simple installation.
Une fois linstallation termine, le blogueur accde une page de confirmation qui lui permet dactiver lextension sur-le-champ, sil le souhaite.
Figure 715
Confirmation dinstallation
Figure 716
Message davertissement en cas de risque dincompatibilit
ASTUCE Fichier .maintenance

Dans le cas o le blog viendrait dysfonctionner suite lactivation dune extension, il est possible de placer le code <?php $upgrading = time(); ?> dans un fichier .maintenance la racine du rpertoire dinstallation de lextension, afin dafficher le message dalerte : Indisponibilit temporaire pour cause de maintenance. Veuillez revenir dans un instant .
Installer depuis le portail

La page http://wordpress.org/extend/plugins/ inclut, en plus dun moteur de recherche dextensions, un certain nombre dinformations intressantes telles que les tags et les extensions les plus populaires, les nouvelles extensions et celles venant dtre mises jour.
Figure 717
La page consacre aux extensions sur Wordpress.org
174
user 177 at Wed Nov 10 04:01:48 +0100 2010
Les rsultats de recherche permettent daccder la fiche dtaille de chaque extension. Le bouton Installer maintenant est remplac par un bouton Download (Tlcharger). Linstallation se fait alors en deux tapes. 1 La premire tape consiste tlcharger larchive (fichier .zip) de lextension.
Figure 718
Tlchargement de lextension
2 Le blogueur passe ensuite par linterface Extension>Ajouter et le lien
ALTERNATIVE Installation manuelle

Le blogueur peut galement utiliser son client FTP pour transfrer larchive .zip dcompresse vers le rpertoire wp-content/plugins.
Envoyer (prsent sous le titre) pour transfrer le fichier .zip sur le serveur. WordPress se charge alors de dcompresser automatiquement larchive et de dplacer les fichiers dans le rpertoire adquat.
Figure 719
Interface de transfert de larchive de lextension

user 177 at Wed Nov 10 04:01:48 +0100 2010
175
WordPress 3
Cas pratiques
Prsentons maintenant linstallation de deux extensions : un formulaire de contact et un forum.
Installer un formulaire de contact

Afficher son adresse e-mail sur le Web doit absolument tre vit. Des milliers de robots parcourent en permanence la Toile la recherche dadresses e-mail qui iront enrichir les bases de donnes des spammeurs. Une alternative consiste proposer un formulaire de contact qui a lavantage de ne pas rendre publique ladresse e-mail du blogueur. Linternaute remplit les champs du formulaire, dont le contenu est automatiquement transmis par e-mail au blogueur. La cration manuelle dun tel formulaire ncessiterait des comptences en HTML, en JavaScript et en PHP. Lextension Contact Form 7 permet heureusement de concevoir un formulaire de contact en quelques clics.
Figure 720
Fiche de lextension
Une fois lextension installe et active, lespace dadministration senrichit dune nouvelle rubrique : Contact.
176
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 721
Configuration de linterface
Lextension permet de concevoir autant de formulaires que le blog en requiert. Le lien Ajouter un nouveau lance un processus de cration de formulaire. Linterface est compose de plusieurs sections. La premire donne accs au code placer dans les articles ou pages pour indiquer lemplacement du formulaire. Une page Contact peut ainsi tre cre pour proposer le formulaire de contact.
TRADUCTIONS
Et si mon blog nest pas en anglais ?
Lextension Contact Form 7 a lavantage de disposer dun trs grand nombre de traductions.

user 177 at Wed Nov 10 04:01:48 +0100 2010
177
WordPress 3
Figure 722
Cration de la page Contact
Figure 723
Affichage de la page Contact
NETIQUETTE Rpondre aux e-mails

Ltiquette du net (la netiquette) veut quun e-mail ne reste jamais sans rponse Cest par ailleurs le meilleur moyen de satisfaire vos visiteurs et de fidliser votre communaut.
Ds que le formulaire est rempli, le blogueur reoit automatiquement un e-mail intgrant les donnes des diffrents champs. La deuxime section de linterface permet de modifier la structure du formulaire. Le principe est ici de placer des marqueurs de type [text* your-name], [textarea your-message] au sein du code HTML du formulaire. Ce procd allie simplicit de conception et souplesse pour le placement des champs.
178
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 724
Message de contact
Le menu droulant Gnrer des tags sur la droite permet dinsrer des champs plus complexes tels que des menus droulants, des cases cocher, etc. Le principe dinsertion de ces champs consiste rcuprer le code et le placer dans lditeur situ sur la gauche. Chaque modification doit tre enregistre en cliquant sur le bouton Sauvegarder. Lajout dun champ au formulaire doit toujours tre accompagn de la modification du message envoy au blogueur, afin que celui-ci reoive lintgralit des informations transmises par le formulaire.
Figure 725
Liste des champs disponibles
Figure 726
Cration dun menu droulant

user 177 at Wed Nov 10 04:01:48 +0100 2010
179
WordPress 3
Figure 727
Le formulaire intgre dsormais le menu droulant.
La troisime section est prcisment conue pour le paramtrage de
ce message. La partie gauche permet de prciser les informations telles que le destinataire, lmetteur ou le sujet. Lditeur de droite donne, quant lui, la main sur le contenu du message ainsi que les donnes du formulaire qui vont y apparatre.
Figure 728
Intgration du champ Profession dans le corps du message
180
user 177 at Wed Nov 10 04:01:48 +0100 2010
Enfin, la section E-mail permet, si la case Utiliser le-mail est coche,
denvoyer un accus de rception la personne qui a rempli le formulaire. La rubrique Messages permet quant elle de modifier les diffrents messages de confirmation et derreur qui sont susceptibles dapparatre suite la transmission du formulaire. Bien que prfrable une adresse e-mail affiche sur le blog, un formulaire de contact non protg peut galement tre exploit par des outils malveillants qui seraient en mesure dautomatiser lenvoi de messages. Les sites web se protgent de ce type dattaques avec la technique des captchas. Un captcha correspond une image qui contient un groupe de caractres. Linternaute doit crire les lettres (et ventuellement les chiffres) quil visualise dans limage pour tre autoris transmettre le message.
Figure 729
Exemple de captcha
Lextension Contact Form 7 permet galement de proposer ce type de protection. Lextension Really Simple CAPTCHA doit cependant tre installe au pralable. Deux lments doivent alors tre ajouts au formulaire : lun correspondant limage et lautre au champ texte associ.
Figure 730
Ajout dun captcha au formulaire

user 177 at Wed Nov 10 04:01:48 +0100 2010
181
WordPress 3
Figure 731
Le formulaire protg par un captcha
Ajouter un forum de discussion

WP Forum Server est une extension qui permet de greffer un forum un blog. Lextension dispose de nombreuses fonctionnalits avances telles que : une organisation hirarchique des forums (Catgories>Forums) ; la modration des sujets de discussion et des commentaires sans passer par lespace dadministration ; lintgration parfaite au sein du blog. Une fois installe et active, lextension ajoute un nouveau menu lespace dadministration : Forum Server.
Figure 732
Nouvelle rubrique : Forum Server
Le blogueur utilise linterface Forum Server>Categories & Forum pour crer une premire catgorie.
182
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 733
Cration de la catgorie Gnral
Le lien Add forum permet ensuite dy associer des forums.
Figure 734
Cration du forum Vos ides
Lextension donne la possibilit dhabiller le forum en utilisant un systme spcifique de thmes : Forum Server>Skins. Lactivation dun thme est obligatoire. Lintgration du forum au blog passe par la cration, via lditeur HTML, dune page ayant pour contenu le commentaire HTML suivant : .
Figure 735
Cration de la page qui contiendra le forum Groupe Eyrolles, 2009

user 177 at Wed Nov 10 04:01:48 +0100 2010
183
WordPress 3
Figure 736
Prsentation du forum
ASTUCE Cration de compte

La case Tout le monde peut senregistrer propose dans linterface Rglages>Gnral doit tre coche si le blogueur souhaite que les utilisateurs sauthentifient pour dposer un sujet.
La configuration par dfaut nautorise pas le dpt anonyme de sujet. Cela est modifiable en dcochant la case Registration required to post de la rubrique Forum Server. Enfin, ladministrateur peut raliser la modration en ligne. Chaque sujet du forum dispose de liens associs qui permettent : de dplacer le sujet dans un autre forum (Move Topic) ; de supprimer le sujet (Delete Topic).
184
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 737
Interface permettant de dposer un sujet de discussion
Dautres utilisateurs peuvent venir complter lquipe de modration en utilisant linterface Forum Servers>Moderators.
Figure 738
Gestion des modrateurs

user 177 at Wed Nov 10 04:01:48 +0100 2010
185
chapitre
user 177 at Wed Nov 10 04:01:48 +0100 2010
Widgets et colonne latrale
SOMMAIRE
B Ajout dun widget
La colonne latrale est un des lments les plus caractristiques dun blog. Elle peut tre enrichie dune multitude dapplications appeles widgets.
B Gestion de la colonne latrale B Importation dun widget HTML

MOTS-CLEFS
B widget B colonne latrale B Twitter B Facebook B Google Web Element B Google Buzz

user 177 at Wed Nov 10 04:01:48 +0100 2010
WordPress 3
La colonne latrale est lespace privilgi pour accueillir les lments de navigation qui facilitent laccs aux diffrents contenus du blog. Elle propose gnralement un calendrier, un dtail des dernires publications, une liste des catgories et une slection des mots-clefs les plus populaires. Il sagit galement dun espace o le blogueur peut diffuser des informations personnelles comme une courte biographie, une slection de ses liens prfrs ou un aperu de ses rseaux sociaux. Les informations proposes dans la colonne latrale sont organises en sections. Elles sont, pour la plupart, gnres par des applications portant le nom de widgets.
Grer les widgets

Linterface Apparence>Widgets rend la gestion des widgets extrmement aise.
Figure 81
Gestionnaire de widgets
188
user 177 at Wed Nov 10 04:01:48 +0100 2010
Lajout dun widget sur le blog ne ncessite rien de plus que le dplacement dun des widgets prsents dans le bloc Widgets disponibles vers une des zones de widgets prsentes droite (par exemple Zone principale de widgets). Un widget ne peut tre dplac dans une zone de widgets que lorsque celle-ci est dplie, ce que lutilisateur obtient en cliquant sur la flche situe droite du nom.
Figure 82
Installation du widget Calendrier dans la colonne latrale
Les zones de widgets sont spcifiques au thme actif. La plupart des thmes ne proposent quune seule zone de widgets : la colonne latrale.
Figure 83
Colonne latrale 1 est la seule zone de widgets du thme Default.
Twenty Ten propose quant lui six de ces zones : deux dans la colonne latrale (Zone principale/secondaire de widgets) et quatre dans le pied de page (Premire/Deuxime/Troisime/Quatrime zone de pied de page).
Figure 84
ERGONOMIE Glisser-dposer un widget

Le bouton de la souris ne doit tre relch qu partir du moment o un petit rectangle noir apparat dans la zone de widgets.
Les six zones de Twenty Ten qui peuvent accueillir des widgets
Figure 85 Blog dont la colonne latrale
ne dispose que du widget Calendrier

user 177 at Wed Nov 10 04:01:48 +0100 2010
189
8 Widgets et colonne latrale
WordPress 3
ASTUCE Installation multiple

Bien que cela ne soit pas forcment pertinent, un mme widget peut tre install plusieurs fois dans la colonne latrale. Cette fonctionnalit est surtout trs utile pour le widget Text. qui permet de placer tout type de contenu HTML dans la colonne latrale.
Lordre dapparition des widgets dans une zone de widgets est modifiable par simple rorganisation avec la souris.
Figure 86
Le glisser-dposer permet de modifier la position des widgets.
SAVOIR Widgets par dfaut

Certains thmes remplacent les zones de widgets vides par des slections spcifiques de widgets par dfaut. titre dexemple, Twenty Ten place dans une Zone principale vide, les widgets suivants : Recherche, Archives et Mta.
Configuration
Chaque widget activ dispose dune interface de configuration, accessible par un simple clic sur la flche situe droite du nom du widget.
Figure 87
Configuration du widget Archives
Le titre permet de modifier lintitul associ par dfaut au widget qui apparatra sur le blog. Ne renseigner aucun titre est tout fait autoris.
Figure 88
Association du titre Mon Calendrier au widget Calendrier
190
user 177 at Wed Nov 10 04:01:48 +0100 2010
Suppression et dsactivation
Diffrentes mthodes permettent de retirer un widget de la colonne latrale (ou de toute autre zone de widgets). La premire solution consiste utiliser le lien Supprimer qui apparat lorsque le widget passe en mode dpli.
SAVOIR Fermer
Le lien Fermer permet de refermer le formulaire de configuration du widget.
Figure 89
Le lien Supprimer permet de retirer le widget de la colonne latrale.
Il est galement possible de supprimer le widget en le replaant (avec un glisser-dposer) dans la section Widgets disponibles.
Figure 810
Dsinstallation du widget Calendrier
WordPress permet galement de retirer le widget tout en conservant les rglages : on parle alors de dsactivation. Le widget doit dans ce cas tre dplac dans la section Widgets dsactivs.
Figure 811
Dsactivation du widget Commentaires rcents
Les widgets standards

WordPress est prinstall avec les diffrents widgets standards dont un blog peut avoir besoin.
user 177 at Wed Nov 10 04:01:48 +0100 2010
191
WordPress 3
Archives
Objectif : liste des mois au cours desquels des articles ont t publis. Rglages : affichage du nombre darticles publis dans le mois ; prsentation des liens sous forme de liste ou de menu droulant.
Figure 812
Widget Archives
Articles rcents
Objectif : liste des derniers articles publis. Rglages : nombre darticles afficher (valeur par dfaut : 5, maximum : 15).
Figure 813
Widget Articles rcents
Calendrier
Objectif : affichage dun calendrier mettant en avant les jours du mois qui ont vu des articles publis.
Figure 814
Widget Calendrier
192
user 177 at Wed Nov 10 04:01:48 +0100 2010
Catgories
Objectif : liste des catgories qui ont au moins un article associ.
Rglages : prsentation sous la forme dun menu droulant ; affichage du nombre darticles associs.
Figure 815
Widget Catgories prsent sous la forme dun menu droulant
Commentaires rcents
Objectif : liste des derniers commentaires dposs sur le blog. Rglages : nombre de commentaires afficher.
Figure 816
Widget Commentaires rcents
Flux
Objectif : afficher les lments dun flux (RSS ou autre) extrieur. Rglages : ladresse du flux est obligatoire. Laffichage du contenu, de lauteur et de la date sont facultatifs. Il est galement possible de prciser le nombre dlments afficher.

user 177 at Wed Nov 10 04:01:48 +0100 2010
193
WordPress 3
Figure 817
Widget Flux
Liens
Objectif : afficher une liste de liens slectionns par le blogueur. Ce widget est galement appel blogroll. Rglages : limitation une catgorie spcifique ; possibilit dafficher des lments supplmentaires : image, description, note.
Figure 818
Widget Liens
Mta
Objectif : afficher une liste de liens tels quun accs au flux RSS, un lien de dconnexion, etc. Ce widget nest que trs rarement utilis.
Figure 819
Widget Mta
194
user 177 at Wed Nov 10 04:01:48 +0100 2010
Menu personnalis
Objectif : intgrer un menu cr via Apparence>Menus.
Figure 820
Widget Menu personnalis
Nuage de mots-clefs
Objectif : prsenter les mots-clefs les plus populaires du blog. La taille du mot-clef varie en fonction de sa frquence dutilisation. Ce widget est galement appel nuage de tags.
Figure 821
Widget Nuage de mots-clefs
Pages
Objectif : afficher une liste des pages disponibles sur le blog. Chaque lment de la liste dispose dun lien associ donnant accs la page. Rglages : choix entre trois modes de tri : alphabtique, chronologique ou prise en compte du champ ordre ; possibilit dexclure certaines pages.
Figure 822
Widget Pages

user 177 at Wed Nov 10 04:01:48 +0100 2010
195
WordPress 3
Recherche
Objectif : afficher un champ de recherche qui permet de raliser une recherche dans lintgralit des contenus du blog.
Figure 823
Widget Recherche
Texte
Objectif : placer un texte libre ( propos, etc.).
Ajouter un nouveau widget

Le blogueur a tout loisir dajouter dans sa colonne latrale des widgets qui ne font pas partie de la slection standard. Ces nouveaux widgets proviennent principalement : de linstallation dextensions WordPress ; de limportation de modules HTML/JavaScript.
Installer une extension de type widget

Techniquement parlant, un widget WordPress correspond une extension. titre dexemple, lextension WP-Cumulus, qui permet dafficher un nuage de tags en 3D dans la colonne latrale, sinstalle de faon tout fait standard. 1 Recherche du terme wp-cumulus dans linterface Extensions>Ajouter. 2 Installation avec le lien Installer maintenant. 3 Activation avec le lien Activer lextension. En tant quextension de type widget, WP-Cumulus est disponible dans la rubrique Apparence>Widgets. Un simple glisser-dposer permet de lajouter la colonne latrale. WP-Cumulus dispose galement doptions de configuration.
196
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 824
Installation de WP-Cumulus dans la colonne latrale
Figure 825
Configuration du widget Groupe Eyrolles, 2009

user 177 at Wed Nov 10 04:01:48 +0100 2010
197
WordPress 3
Une fois le widget install, la colonne latrale dispose dune structure 3D anime intgrant les mots-clefs les plus importants du blog.
Figure 826
WP-Cumulus dans la colonne latrale
Importer un widget HTML

De nombreux sites permettent dincorporer une partie de leur contenu au sein de pages extrieures. Lutilisateur rcupre le plus souvent un code HTML correspondant une iFrame (inline frame, voir chapitre 9), une animation Flash ou un script JavaScript. Ces fragments de code sont souvent qualifis dembeds (embedded signifie incrust , en anglais) ou de widgets. Plutt que de placer le code HTML ou JavaScript directement dans la colonne latrale en ditant le fichier sidebar.php du thme (rubrique Apparence>diteur), la solution privilgie consiste le placer au sein du champ de saisie dun widget Text. En procdant ainsi, le blogueur ne risque pas de perdre ses modifications suite une mise jour ou un changement de thme.
CONFIGURATION Skype
Linternaute qui dcide de cliquer sur ce bouton doit disposer du logiciel Skype install sur sa machine.
Illustrons ce processus en ajoutant un bouton Skype Call me ! dans la colonne latrale. La page http://www.skype.com/intl/en-us/tell-a-friend/get-a-skypebutton/ permet dindiquer son identifiant Skype et de choisir le format du bouton. Le code HTML gnr dans lespace Copy & paste this code peut tre copi et plac dans le formulaire de saisie dun widget Text.
198
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 828 Le code HTML est plac dans le champ de saisie du widget Text.
Figure 829
Bouton Call me ! permettant dappeler le blogueur
Figure 827
Gnration dun bouton Skype Call me !

user 177 at Wed Nov 10 04:01:48 +0100 2010
199
WordPress 3
Des widgets pour afficher son statut

La grande tendance du Web de ces dernires annes rside dans lavnement des rseaux sociaux de type Facebook ou Twitter. Ces rseaux permettent de diffuser trs rapidement et au plus grand nombre son statut. Pour un adepte des rseaux sociaux, modifier son statut revient rpondre la question Que suis-je en train de faire ? . Ces outils sont un complment pour le blogueur, qui pourra crire des articles de fond dans le cadre de son blog et partager son statut, ses tats dme, ses trouvailles, ses coups de sang et ses coups de cur sur son Twitter, son Facebook ou son Buzz. Les widgets sont un excellent moyen de faire apparatre ces informations au sein du blog. Chaque service propose son widget qui peut tre intgr dans la colonne latrale laide dun simple copier-coller.
Diffuser ses derniers tweets

Chaque compte Twitter disposant dun flux RSS associ, laffichage des derniers tweets dans la colonne latrale peut tre ralis en utilisant le widget Flux (voir figure 8-32). Il est alors possible de renseigner ladresse du flux associ au compte Twitter ainsi que lintitul du widget. Le rendu visuel se rvle cependant assez pauvre.
Figure 830
Le flux RSS des tweets est situ sous la liste des abonns.
SAVOIR Flux sur WordPress.com

Reposant sur un widget standard, cette solution a lavantage de fonctionner avec la plate-forme WordPress.com qui, pour rappel, nautorise pas linstallation dextensions.
Figure 831
Paramtrage du widget Flux
Twitter met disposition un widget beaucoup plus lgant sur la page http://twitter.com/goodies/widgets (voir figure 8-33). Comme tout widget HTML, le widget Twitter peut tre plac dans la colonne latrale en utilisant le widget Text. 200
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 832
Figure 833
Tweets affichs laide du widget Flux
Colonne latrale agrmente du widget Twitter
Lintgration dun widget ncessite les tapes suivantes : 1 Slectionner longlet Mon site web. 2 Cliquer sur Widget de profil. 3 Personnaliser le widget en utilisant les rubriques disponibles sur la gauche (voir figure 8-34). Chaque modification peut tre prvisualise en cliquant sur le bouton Tester ce rglage. La rubrique Dimensions est particulirement utile pour accder loption Ajustement automatique de la largeur. En cochant cette option, le widget stendra sur toute la largeur de la colonne latrale. 4 Cliquer sur le bouton Terminer & rcuprer le code pour rcuprer le code HTML et le placer dans un widget Text.

user 177 at Wed Nov 10 04:01:48 +0100 2010
201
WordPress 3
Figure 834
Interface de personnalisation du widget Twitter
Facebook
Leader incontest des rseaux sociaux, Facebook a trs vite compris limportance douvrir sa plate-forme aux webmasters et aux dveloppeurs. Les possibilits dinteraction avec les donnes sont aujourdhui trs nombreuses : cration dapplications qui apparaissent sur le Profil ou dans longlet Encarts ; dlgation un site extrieur de lautorisation de publier en son nom sur le Mur de Facebook (Facebook Connect) ; gnration de widgets qui peuvent tre installs sur des sites extrieurs. Les diffrents widgets proposs par Facebook sont regroups sur la page http://www.facebook.com/facebook-widgets/.
Figure 835
Widgets Facebook
202
user 177 at Wed Nov 10 04:01:48 +0100 2010
Le widget Badge de profil permet de prsenter les dernires modifications de son profil Facebook. Le lien Modifier ce badge permet de slectionner les informations qui apparatront dans le badge.
Figure 836
Slection des lments intgrer au widget
Une fois les paramtres enregistrs, linterface met disposition un code JavaScript qui peut tre inclus dans la colonne latrale.
Figure 837
Code HTML du widget Facebook
Google Buzz
Google, qui occupe une position dominante sur le Web, veille ne jamais dlaisser un domaine plbiscit par les internautes. Le gigantesque march du Que suis-je en train de faire en ce moment ? , si bien trait par Facebook et Twitter, est un domaine que Google ne pouvait se permettre de ngliger. Google Buzz, lanc en fvrier 2010, fut prcisment dvelopp pour rattraper ce retard. Ce service a lavantage de pouvoir sappuyer sur des produits aussi populaires que Gmail ou Google Reader pour simposer auprs des internautes. Au sein de Google Reader, la rubrique Votre contenu>Liste de partage propose sur la droite le lien Paramtres de partage qui donne accs, en bas de la page, Ajoutez un extrait. Ce module permet dobtenir un widget qui affiche tous les lments de votre Buzz : modifications de statut, partages dhistoires.

user 177 at Wed Nov 10 04:01:48 +0100 2010
203
WordPress 3
Figure 838
Buzz dans Gmail
Figure 839
Buzz dans Google Reader
Figure 840
Configuration du widget Buzz
204
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 841
Le widget Buzz dans la colonne latrale
Les Google Web Elements

Google propose plusieurs widgets pouvant tre inclus librement dans un blog. Ces widgets sont appels des Web Elements. Chaque widget dispose dune page de configuration spcifique (voir figure 8-43) qui permet de prvisualiser le widget et de gnrer le code HTML inclure dans la colonne latrale. Parmi tous ces widgets, certains sont particulirement adapts la colonne latrale dun blog, tels la traduction automatique du blog ou laffichage dvnements Google Agenda..
B http://www.google.com/webelements/
Figure 842
Web Elements proposs par Google : calendrier, conversation, cartes et actualits Groupe Eyrolles, 2009
user 177 at Wed Nov 10 04:01:48 +0100 2010
205
WordPress 3
Figure 843
Exemple dinterface de configuration
Traduction automatique du blog

Le Web Element Translate, qui utilise le programme Google Traduction, permet de traduire dun simple clic lintgralit du contenu dune page dans plus dune cinquantaine de langues.
Figure 844
Diffrentes langues proposes par le widget
206
user 177 at Wed Nov 10 04:01:48 +0100 2010
Linstallation est simple. 1 Choisir la langue du blog : French, et laisser Display sur la valeur Always. 2 Rcuprer le code source et le coller dans le widget Text.
ATTENTION Traduction automatique

Restez conscient que la traduction fournie par le Web Element Translate est une traduction automatique, avec tout ce que cela implique. Si vous souhaitez grer un blog rellement multilingue, vous devrez effectuer la traductioin vous-mme et faire appel un module dinternationalisation comme WP_Multilingual, ZdMultiLang, Polyglot, xili-language, etc., pour grer les diffrentes versions.
Figure 845
Rsultat de la traduction en japonais par Google Traduction
Calendrier dvnements
Le Web Element Calendar donne la possibilit dafficher les prochains vnements dun agenda gr par Google Agenda (Google Calendar, en anglais). Pour pouvoir tre affich, le calendrier doit tre public. Le passage dun agenda en mode public se ralise de la manire suivante. 1 Sur http://www.google.com/calendar, accder lespace de configuration en utilisant le lien Paramtres disponible en haut gauche du navigateur. 2 Dans longlet Agendas, cliquer sur le lien Partager cet agenda. 3 Cocher la case Rendre cet agenda public. Une fois rendu public, lagenda peut tre slectionn en cliquant sur le bouton Choose a calendar.

user 177 at Wed Nov 10 04:01:48 +0100 2010
207
WordPress 3
Figure 846
Slection du calendrier
Les autres paramtres permettent de modifier les dimensions et la prsentation. Le thme du blog doit disposer dune largeur de colonne latrale suffisante pour pouvoir accueillir lagenda, qui mesure au minimum 300 pixels.
Figure 847
Figure 848
Figure 849
Prsentation en agenda
Prsentation en calendrier
Calendrier intgr la colonne latrale
208
user 177 at Wed Nov 10 04:01:48 +0100 2010
Des widgets pour diffuser ses contenus

Les principaux sites de diffusion de mdias (photos, vidos, musique) permettent dexporter des slections quil est possible dintgrer dans la colonne latrale.
Badge Flickr
Flickr donne le nom de badge ou module au widget quil exporte. Linterface de cration est disponible sur la page : http://www.flickr.com/badge.gne.
Figure 850
Interface de configuration du badge
SAVOIR Flash ou HTML ?
La cration dun badge se droule en quatre tapes. 1 Format : le format Flash a lavantage dtre esthtique et anim. 2 Slection : indiquer quelles sont les photos qui apparatront dans le badge. Il est possible de ne slectionner que les photos publiques qui disposent dun tag spcifique. Un blog consacr aux jardins pourrait ainsi afficher un badge des photos publiques ayant le tag jardin associ.
user 177 at Wed Nov 10 04:01:48 +0100 2010
Bien que trs populaire sur le Web actuel, le format Flash prsente malgr tout le risque de ne pouvoir tre lu par tous les systmes (sur liPhone, par exemple). De mme, si vous souhaitez respecter les standards d'accessibilit du Web, il vous faudra alors prfrer le HTML. Pour en savoir plus, rendez-vous au chapitre 9 sur les contenus multimdias.
209
WordPress 3
3 Prsentation : personnaliser visuellement le badge. 4 Sources : obtenir le code HTML qui pourra tre inclus dans la
colonne latrale.
Figure 851
Badge Flickr intgr la colonne latrale
Videowall Dailymotion
Dailymotion offre la possibilit ses utilisateurs de crer des listes de lecture (playlists) et dy placer leurs vidos prfres.
Figure 852
Le bouton Playlist permet dajouter une vido une playlist.
Ces playlists peuvent ensuite tre partages dans le cadre dun widget appel Vidowall. La page http://www.dailymotion.com/factory/videowall/ permet de personnaliser le widget. Pour partager une des ses playlists, lutilisateur renseigne, dans le champ URL Dailymotion, ladresse associe sa playlist (il sagit de ladresse prsente dans la barre dadresses du navigateur lorsque lutilisateur consulte sa playlist).
210
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 853
Configuration du vidowall
La taille 2 4 est bien adapte une intgration dans une colonne latrale. Une fois le paramtrage effectu, le bouton Gnrez le code vous fait rcuprer le code du widget.
Figure 854
Vidowall intgr la colonne latrale

user 177 at Wed Nov 10 04:01:48 +0100 2010
211
chapitre
user 177 at Wed Nov 10 04:01:48 +0100 2010
Proposer des contenus multimdias
SOMMAIRE
B Insrer un contenu multimdia
WordPress offre diffrentes techniques pour enrichir les articles dlments aussi divers que des vidos, de la musique, des cartes ou des calendriers.
dans un article
B Tour dhorizon de diffrents

services qui permettent dexporter leurs contenus vers des blogs MOTS-CLEFS
B vido B musique B photo B calendrier B sondage B carte/itinraire B livre B PDF B prsentation

user 177 at Wed Nov 10 04:01:48 +0100 2010
WordPress 3
TECHNOLOGIE Lavenir du Flash

Une guerre a commenc entre Apple et Adobe depuis que la firme la pomme a refus de fournir la technologie Flash sur ses iPhones et ses iPads. Plus gnralement, le Web qui a toujours prfr les standards aux technologies propritaires investit normment dans la future norme HTML 5, qui disposera de tous les lments qui faisaient la spcificit du Flash : vido, son, socket, dessin bitmap, formes vectorielles, base de donnes intgre.
Comme toute page sur le Web, un article de blog est crit dans un langage informatique appel le HTML. Parfaitement adapt aux contenus simples (textes, images), ce langage ne proposait, il y a encore peu de temps, aucun moyen dinclure de faon native des lments multimdias (vidos, morceaux musicaux...) au sein de pages web. Bien que le HTML 5 tende rattraper le retard, la technologie Flash propose par Adobe reste aujourdhui la solution la plus adapte pour concevoir et diffuser des contenus multimdias sur le Web. En sappuyant sur cette technologie, de nombreux sites dhbergement et de diffusion de contenus multimdias mettent disposition leurs contenus et permettent ainsi aux internautes denrichir leurs pages.
Comment inclure un contenu multimdia ?

Deux techniques permettent dinclure un contenu multimdia au sein dun article ou dune page : lutilisation dun shortcode ; la modification du code HTML. Plus complexe, la seconde mthode offre deux avantages : tre utilisable quelle que ce soit la situation ; ne pas ncessiter linstallation dextensions complmentaires.
Utiliser des shortcodes

Les shortcodes permettent dinsrer des contenus multimdias laide de codes textuels courts placs entre crochets.
LE SAVIEZ-VOUS ? Vimeo
Vimeo est un site web communautaire de partage de vidos qui favorise, contrairement YouTube ou Dailymotion, les vidos cratives conues par ses utilisateurs. Depuis janvier 2010, Vimeo offre de plus lavantage de permettre aux auteurs de diffuser leurs crations en licence Creative Commons.
B http://vimeo.com B http://fr.creativecommons.org
Ils sont le plus souvent structurs de la manire suivante : [nom_du_service identifiant_du_contenu]. titre dexemple, linclusion dune vido Vimeo dont lidentifiant est 123 scrit de la manire suivante : [vimeo 123]. Alors que de nombreux shortcodes sont reconnus par dfaut sur WordPress.com, il est ncessaire dinstaller des extensions complmentaires sur un blog autonome (par exemple, WordPress SlideShare pour les prsentations, ou PollDaddy Polls & Ratings pour les sondages). Le principe de fonctionnement dun shortcode est le suivant : avant dafficher un article, WordPress vrifie son contenu pour y dtecter la prsence dun shortcode quil est en mesure de traiter. Si tel est le cas, il rcupre le ou les paramtres placs entre crochets et remplace le shortcode par une portion de code HTML permettant, le plus souvent, de charger lanimation Flash du service associ.
214
user 177 at Wed Nov 10 04:01:48 +0100 2010
Les shortcodes ont lavantage de garantir une meilleure volutivit. En effet, un site pourrait tout fait changer le code de son animation Flash ou les noms des paramtres, etc. Si le site utilise des shortcodes, seule lextension associe devra tre mise jour et les contenus resteront identiques.
CONFIGURATION Gestion des shortcodes

sur WordPress.com
WordPress.com reconnait par dfaut plus dune vingtaine de shortcodes. Une liste exhaustive est disponible sur cette page :
B http://en.support.wordpress.com/shortcodes/
Modifier le code HTML

WordPress donne la possibilit daccder au code HTML dun article en utilisant le mode HTML de lditeur de contenu.
T Embed
Le terme anglais embed est rgulirement utilis pour qualifier un bloc HTML inclure dans une page HTML. Figure 91
dition dun contenu en mode HTML
Les services exportent principalement trois types dlments HTML : des iFrames, des animations Flash et des scripts JavaScript. Une iFrame permet dinclure une page au sein dune autre page. La balise associe est <iframe>. Cette technique est notamment utilise par Google pour ses plans (Google Maps) ou ses documents (Google Docs). Les animations Flash sont, quant elles, insres laide de la balise <object>.
Figure 92
En cliquant sur le bouton Embed prsent sur une vido Vimeo, le blogueur peut rcuprer le lecteur Flash.
Lintgration dun contenu multimdia dans un article ou une page consiste copier la portion de code HTML mise disposition par le service et la coller dans lditeur HTML lemplacement souhait.

user 177 at Wed Nov 10 04:01:48 +0100 2010
215
9 Proposer des contenus multimdias
WordPress 3
Figure 93
Le code HTML correspondant au lecteur Vimeo a t copi-coll dans lditeur HTML.
Dans le cas dune animation Flash, le blogueur peut raliser des allersretours entre les modes Visuel et HTML. Il peut ainsi ajouter du contenu autour de lanimation Flash (qui est reprsente, en mode Visuel, par un rectangle jaune).
Figure 94
Une animation Flash est reprsente par un bloc jaune en mode Visuel.
ASTUCE Extension spciale iFrame

Le chapitre 14, consacr la programmation, dcrit une extension qui vite la disparition de la balise iFrame.
Il en va tout autrement dans le cas dune iFrame ou dun script JavaScript. Il convient en effet, dans ce cas, de ne jamais repasser en mode Visuel, sous peine de perdre les informations insres.
216
user 177 at Wed Nov 10 04:01:48 +0100 2010
Publier des contenus multimdias via les services en ligne

Insrer une carte via Google Maps
Le service Google Maps est une des plus grandes russites de Google. Il a lavantage de proposer deux types daffichage : la carte et litinraire. Linterface Google Maps propose, au-dessus de la carte, une fonctionnalit Lien qui permet de rcuprer liFrame associe la carte.
B http://maps.google.fr/
Figure 95
Module dexport
Le code HTML associ liFrame peut tre insr tel quel au sein du code HTML de larticle. Google permet galement dadapter ce code en utilisant la fonctionnalit Personnaliser et prvisualiser la carte intgre.
Figure 96a
Personalisation de liFrame Google Map

user 177 at Wed Nov 10 04:01:48 +0100 2010
217
WordPress 3
Figure 96b
Module permettant de modifier les dimensions de liFrame et dadapter le zoom
Figure 97
Insertion de liFrame dans lditeur HTML
218
user 177 at Wed Nov 10 04:01:48 +0100 2010
Le fonctionnement est rigoureusement identique dans le cas dun itinraire.

ALTERNATIVE OpenStreetMap
Espace collaboratif par excellence, le Web a permis des volontaires rpartis travers le monde dunir leurs forces pour crer un outil de cartographie en ligne ouvert et gratuit. Le projet OpenStreetMap permet, comme Google Maps, lexportation dune carte sous la forme dune iFrame (onglet Exporter).
B http://www.openstreetmap.org
Figure 98
Affichage dun itinraire au sein dun article
LE SAVIEZ-VOUS ? Transfert de vidos
Intgrer une vido

Initis par YouTube et Dailymotion, les sites de vidos nont cess de se multiplier depuis quelques annes. Lextension Embedded Video permet, dun simple clic, dinsrer une vido dans un article. Cette extension a lavantage dtre compatible avec plus dune dizaine de services.
Figure 99
La plupart des sites de vidos permettent aux internautes de dposer leurs propres vidos. Il sagit dun moyen particulirement intressant pour diffuser une vido personnelle sur un blog : aucune problmatique lie au format, aucune dpense lie la bande passante consomme.
La barre dicne sest enrichie, sur la droite, dune icne reprsentant une tlvision.
En cliquant sur la tlvision apparue dans la barre doutils, une fentre incruste souvre, permettant de renseigner le site qui hberge la vido (Select video portal) ainsi que lidentifiant de cette dernire (Insert video ID). Cet identifiant doit tre rcupr au sein de lURL de la vido. Dans le cas de YouTube, une vido dont ladresse est http://www.youtube.com/ watch?v=QND2lFCrIGw aura pour identifiant associ QND2lFCrIGw. Dans le cadre dune vido Vimeo http://vimeo.com/10911131, lidentifiant correspond au chiffre qui se trouve derrire le nom de domaine, en loccurrence 10911131.
CONFIGURATION Paramtrer laffichage

des vidos serties
Une interface de paramtrage est accessible via la rubrique Rglages>Embedded Video.

user 177 at Wed Nov 10 04:01:48 +0100 2010
219
WordPress 3
Figure 910
Insertion dune vido YouTube
Figure 911
Aperu de larticle auquel a t associe la vido
B http://www.youtube.com B http://www.dailymotion.com/fr B http://vimeo.com B http://blip.tv B http://www.viddler.com B http://www.hulu.com B http://qik.com B http://wordpress.tv
Depuis la version 2.9, WordPress est galement en mesure de remplacer lURL dune vido par le lecteur associ. LURL doit toutefois tre isole sur une ligne. WordPress reconnat les vidos provenant des sites suivants : YouTube, Vimeo, Dailymotion, blip.tv, Viddler, Hulu, Qik et WordPress.tv. Pour profiter de cette fonctionnalit, loption Affichage automatique doit tre coche dans linterface Rglages>Mdias.
220
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 912
LURL YouTube est incluse directement dans le contenu.
Figure 913
Le lecteur YouTube remplace bien lURL.

user 177 at Wed Nov 10 04:01:48 +0100 2010
221
WordPress 3
Inclure un fichier audio

Lextension Audio Player donne la possibilit dcouter un morceau de musique ou tout autre fichier audio transfr sur le serveur directement au sein dun article. Cette extension sintgre parfaitement au processus standard dinsertion dun fichier audio. La premire tape consiste utiliser licne symbolisant une note de musique, situe au-dessus de lditeur visuel. Une fois le fichier transfr, le bouton Audio Player permet de modifier le champ Cible du lien.
Figure 914
Shortcode pour Audio Player
Audio
[audio:<chemin_du_fichier>].
des shortcodes du type Le shortcode gnr peut ensuite tre plac dans le contenu laide du bouton Insrer dans larticle.
Player
reconnat
Lapparence du lecteur est modifiable via le menu Rglages>Audio Player.
Figure 915
Un lecteur audio Flash Audio Player est la fois simple et convivial.
222
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 916
Paramtrer lapparence du lecteur
Ajouter une galerie photo Flickr

Flickr est un portail de partage de photos, avec des fonctions intressantes de gestion de photothque en ligne. Une fois le compte cr et les photos transfres, Flickr permet de consulter les photos en mode plein cran en cliquant sur licne Diaporama. Linterface propose un lien Partager qui permet de rcuprer le code HTML de lanimation Flash associe au diaporama.
Figure 917
B http://www.flickr.com
Icne permettant de passer en mode Diaporama
Figure 918
Consultation dune galerie Flickr en mode Diaporama

user 177 at Wed Nov 10 04:01:48 +0100 2010
223
WordPress 3
ALTERNATIVE Picasa
Prsent sur tous les fronts du Web, Google propose son propre gestionnaire de photos en ligne : loutil Picasa Web Albums permet notamment dexporter toute une galerie de photos sous forme de diaporama au format Flash. Une fois la galerie slectionne, linterface propose sur la droite Lien
vers cet album>Insrer un diaporama dans une page web.

B http://picasaweb.google.fr
Grand avantage de Picasa sur Flickr, Google propose, en plus de la version web, un logiciel de gestion de photos pouvant tre install aussi bien sur Windows que sur Mac OS X. Un tel outil est particulirement utile de nos jours, o tout photographe amateur doit grer plusieurs milliers de photos sur son disque dur. Il permet, entre autres, de slectionner, classer, annoter et diter ses photos, avant de les exporter dun clic sur Picasa Web Albums. Ce logiciel peut tre tlcharg sur :
B http://picasa.google.com
Figure 919 Intgration dun projecteur de photos au sein dun article
Partager un PDF via Issuu

Le site amricain Issuu.com rfrence des millions de documents PDF. La consultation dun document peut tre ralise de deux manires diffrentes : sur le site Issuu.com ; sur un site extrieur, dans un module de lecture.
B http://issuu.com
Figure 920
Le magazine Kiblind visualis sur le site Issuu.com
224
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 921
Le mme magazine visualis sur le site kiblind.com
Le site offre la possibilit de dposer gratuitement des documents via linterface http://issuu.com/user/upload. Une fois le compte cr et le fichier transfr, linternaute dispose dun espace lui permettant de grer tous ses documents.
Figure 922
Gestionnaire de PDF sur Issuu.com
Le bouton Embed permet douvrir linterface de paramtrage du lecteur de PDF. Longlet WordPress donne accs au shortcode qui sera reconnu une fois lextension WP Issuu installe et active (voir figures 9-23 et 9-24 page suivante).
ALTERNATIVE Scribd
Le site Scribd permet galement dexporter un module de consultation de PDF en ligne. Lextension Simpler iPaper doit tre installe pour faire fonctionner le shortcode.
B http://www.scribd.com

user 177 at Wed Nov 10 04:01:48 +0100 2010
225
WordPress 3
Figure 923
Paramtrage du shortcode
Figure 924
Inclusion au sein dun article
Intgrer un livre depuis Google Livres

B http://books.google.fr/
Le service Google Livres (aussi connu sous le nom de Google Books) permet de raliser des recherches dans un fonds de plusieurs millions de livres et de revues. Le moteur de recherche avanc propose de nombreux filtres, tels que la langue de louvrage, les livres tombs dans le domaine public, etc.
Figure 925
Moteur de recherche avanc de Google Livres
226
user 177 at Wed Nov 10 04:01:48 +0100 2010
Google Livres offre la possibilit de consulter les livres en ligne. la diffrence des ouvrages rcents, les livres libres de droit sont consultables dans leur intgralit. Linterface de consultation intgre des fonctionnalits de recherche et la possibilit de tlcharger louvrage (lorsquil est libre de droit).
Figure 926
Interface de consultation de Google Livres
Google permet galement dintgrer le lecteur au sein de pages web. Le lien Lier doit alors tre utilis pour rcuprer le code HTML de liFrame. Une fois intgr dans le contenu de larticle, le lecteur propose des fonctionnalits intressantes, telles que la recherche au sein du contenu du texte.
Figure 927
Le contenu de liFrame est disponible dans le champ Intgrer.

user 177 at Wed Nov 10 04:01:48 +0100 2010
227
WordPress 3
Figure 928
Livre intgr dans le contenu de larticle
Diffuser une prsentation via SlideShare

B http://www.slideshare.net
Le site SlideShare permet de partager des prsentations multimdias (de type PowerPoint) sur le Web. Une fois son compte cr, lutilisateur envoie sa premire prsentation en utilisant le formulaire disponible ladresse http://www.slideshare.net/upload/.
INTEROPRABILIT Formats reconnus

SlideShare est en mesure de grer les formats de fichier suivants : .pdf, .ppt, .pps, .pptx, .ppsx, .pot, .potx, .odp, .doc, .docx, .rtf, .xls, .odt, .ods, ainsi que Apple iWork Pages.
Figure 929
Interface de transfert
228
user 177 at Wed Nov 10 04:01:48 +0100 2010
Le transfert effectu, linterface permet dassocier des mtadonnes au fichier : catgorie, tags, description, visibilit (Privacy). Cette dernire est importante dans la mesure o elle permet de prciser si le document doit tre intgr au moteur de recherche gnral (et visible par tous) ou sil doit rester priv. Seuls les documents publics peuvent tre partags et intgrs dans dautres pages. Lutilisateur peut afficher la liste de ses documents en cliquant sur le lien View your uploads (figure 9-30). La page de dtail du document est obtenue en cliquant sur le titre du document. La prsentation est suivie dune barre proposant les diffrents exports possibles. Lexport WordPress met disposition un shortcode. Lextension WordPress SlideShare doit tre installe et active pour que le moteur reconnaisse ce shortcode.
Figure 930
Liste des documents
Figure 931
Dtail du document permettant dobtenir le shortcode WordPress Groupe Eyrolles, 2009

user 177 at Wed Nov 10 04:01:48 +0100 2010
229
WordPress 3
Figure 932
Utilisation du shortcode dans le contenu de larticle
Figure 933
Larticle intgre la prsentation PowerPoint.
Lextension dispose dune interface de configuration permettant de dfinir la largeur des prsentations dans les articles. Cette interface est accessible via la rubrique Rglages>SlideShare.
Figure 934
Configuration de linterface SlideShare
230
user 177 at Wed Nov 10 04:01:48 +0100 2010
Publier un sondage via PollDaddy

Le site PollDaddy donne la possibilit de crer en ligne un sondage qui peut tre insr dans un article. Ce site a la particularit davoir t rachet par Automattic, ce qui a permis lintgration dune interface au sein de lespace dadministration WordPress.com. Rendez-vous dans la rubrique Sondages.
B http://polldaddy.com
Figure 935
Interface de cration de sondage sur WordPress.com
Figure 936
Le bouton Create a New Poll permet de crer un nouveau sondage.
Une fois son compte cr sur PollDaddy, le blogueur peut se rendre dans son espace membre pour crer de nouveau sondages. La cration ne ncessite que quelques secondes. 1 Indiquer le titre. 2 Prciser les diffrents choix. 3 Slectionner une prsentation. 4 Choisir les options.

user 177 at Wed Nov 10 04:01:48 +0100 2010
231
WordPress 3
Figure 937
Prparation dun sondage
Une fois le sondage cr, une fentre permet de rcuprer le shortcode WordPress intgrer dans larticle.
Figure 938
Rcupration du shortcode
232
user 177 at Wed Nov 10 04:01:48 +0100 2010
Lextension PollDaddy Polls & Ratings doit tre installe pour que le shortcode soit reconnu. En renseignant les informations du compte PollDaddy, il devient possible, comme sur WordPress.com, de crer des sondages et de suivre les rsultats directement depuis lespace dadministration.
Figure 939
Figure 940
Affichage du sondage au sein dun article
Affichage de statistiques suite la slection dune rponse
La consultation des rsultats peut galement tre ralise dans lespace membre de PollDaddy ou au sein de lespace dadministration de WordPress. Les statistiques proposes sur PollDaddy sont la fois plus agrables lil et plus compltes.
Figure 941
Statistiques dans WordPress

user 177 at Wed Nov 10 04:01:48 +0100 2010
233
WordPress 3
Figure 942
Statistiques sur PollDaddy
PollDaddy permet galement de crer des formulaires complets (Surveys). Ces formulaires peuvent contenir diffrents types de champs : champ libre, cases choix multiples, etc. Chaque champ peut tre rendu obligatoire en cochant la case Mandatory. Un nouveau shortcode peut tre rcupr suite lenregistrement de lenqute.
Figure 943
Cration dune enqute
234
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 944
Lenqute saffiche dans une fentre modale.
Lespace membre de PollDaddy propose de visualiser des statistiques et de consulter les rponses individuelles (Respondents). Certaines fonctionnalits avances, telles que lexportation de donnes, ncessitent cependant de disposer dun compte payant.
Figure 945
Statistiques sur les enqutes

user 177 at Wed Nov 10 04:01:48 +0100 2010
235
WordPress 3
Publier un calendrier dvnements via Google Agenda

B http://www.google.com/calendar/
Google Agenda est une solution qui permet ses utilisateurs de grer leur agenda en ligne. Lutilisation la plus courante consiste conserver cet agenda priv ou le partager avec quelques personnes de confiance.
Figure 946
Google Agenda
Google autorise cependant rendre un agenda public au moment de sa cration, en cliquant sur loption Rendre cet agenda public, ce qui se rvle intressant pour un blogueur nomade. Plutt que dannoncer chacun de ses voyages ou confrences, le blogueur peut crer une page affichant son agenda public. Le code HTML en charge de laffichage de lagenda est rcupr en accdant aux paramtres de lagenda, dans la partie Insrez cet agenda. LiFrame peut alors tre insre en utilisant lditeur HTML.
Figure 947
Accs aux paramtres de lagenda
236
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 948
Rcupration du code HTML
Figure 949
Lagenda public intgr dans un article

user 177 at Wed Nov 10 04:01:48 +0100 2010
237
chapitre
10
user 177 at Wed Nov 10 04:01:48 +0100 2010
Visibilit et communaut
SOMMAIRE
B Augmenter son trafic
Que ce soit pour augmenter sa rentabilit ou son lectorat, tout blogueur a un intrt direct travailler son rfrencement et dvelopper son audience. Il existe diffrents outils et techniques pour y parvenir.
B Russir son rfrencement B Crer une communaut B Exploiter les rseaux sociaux
MOTS-CLEFS
B rfrencement B moteur de recherche B analyse daudience B rseaux sociaux B Google Friend Connect B Facebook B social bookmark B liste de diffusion

user 177 at Wed Nov 10 04:01:48 +0100 2010
WordPress 3
Certains principes simples permettent dobtenir un bon rfrencement. Associs diffrents outils utiliss pour crer et animer une communaut autour dun blog, ils offrent la possibilit daugmenter de manire significative son trafic.
Augmenter la visibilit
Le recrutement de nouveaux lecteurs dpend en grande partie de la visibilit du blog. Moteurs de recherche, social bookmarks et rseaux sociaux sont des outils dont le blogueur doit absolument tirer parti pour amliorer sa notorit.
Loptimisation du rfrencement
Le rfrencement consiste faire apparatre un site web dans les moteurs de recherche, ainsi qu obtenir le meilleur classement possible des pages dans les rsultats de recherche. Ce processus nest pas une science exacte : les techniques ne cessent dvoluer et les paramtres pris en compte pour valuer un site se comptent aujourdhui en milliers. Lointaine est lpoque o le seul fait de glisser Pamela Anderson dans les mots-clefs de la page suffisait lui assurer un bon positionnement. Le rfrencement est un domaine o les mythes sont nombreux et les rgles absolues, inexistantes. Un rfrenceur ne doit jamais oublier que Google, qui occupe 80 % du march de la recherche en ligne, est une socit qui emploie des milliers de gnies de linformatique et qui dispose de milliards de dollars en banque. Les petites astuces visant flouer les moteurs de recherche ne fonctionnent jamais trs longtemps et se rvlent souvent trs risques.
EN SAVOIR PLUS Rfrencement
R Olivier Andrieu, Russir son rfrencement
web, 3e dition, Eyrolles, 2011
Ces avertissements donns, il nen reste pas moins quun certain nombre de bonnes pratiques permettent damliorer de faon significative le positionnement dun blog dans les moteurs de recherche.
Limportance du contenu
Un rfrencement de qualit met en uvre des dizaines de bonnes pratiques. La plus importante consiste toujours avoir en tte quil est impossible de rfrencer un site en sappuyant sur des termes qui napparaissent pas dans son contenu. Au moment o il cre son blog, le blogueur doit identifier les rsultats de recherche dans lesquels il souhaite que celui-ci apparaisse. Son objectif sera ensuite dobtenir une frquence importante dapparition de ces termes dans les diffrents contenus du blog. 240
user 177 at Wed Nov 10 04:01:48 +0100 2010
Il est en revanche inutile et dangereux daugmenter de faon factice loccurrence dun terme dans une mme page. Il convient de faire preuve dimagination et de multiplier les supports. Un terme important peut par exemple apparatre : parmi les mots-clefs et les catgories ; dans le contenu des pages et des articles ; au sein du nom des images (appeler une image qui reprsente un iPad ipad.jpg est plus judicieux que XXSCD2134.jpg) ; dans lURL de larticle. Le dernier point ncessite de configurer WordPress de manire ce que les URL des articles intgrent les termes du titre. Pour cela, utilisez Rglages>Permaliens, en choisissant une des deux options faisant mention du titre (Date et titre ou Mois et titre).
CONFIGURATION Rcriture dadresses
Les structures autres que celle propose par dfaut ncessitent que le serveur web dispose dun module de rcriture dadresses (URL rewriting). Rendez-vous au chapitre 3 pour en savoir plus sur la configuration de ces options.
Figure 101
Choix de la structure des adresses
Figure 102
La structure dadresse propose par dfaut par WordPress nest pas propice au rfrencement.
Figure 103
Lintgration du titre de larticle dans lURL est prfrable.
Des indicateurs smantiques tels que les balises <strong> ou <b> permettent galement dinsister sur limportance dun terme. Les mots mis en gras sont considrs comme plus importants pour un moteur de recherche que le reste du texte en style courant.
Modifier le titre de page

En plus de leur frquence dapparition, lemplacement des termes au sein dune page est un aspect important prendre en compte. Plac dans le titre, un terme aura plus dimportance que sil est plac dans le corps
user 177 at Wed Nov 10 04:01:48 +0100 2010
241
10 Visibilit et communaut
WordPress 3
de larticle. WordPress ne permet pas au blogueur de spcifier le titre de la page. Il est en effet gnr automatiquement partir du nom de larticle et du titre du blog.
Figure 104
Le titre contient le nom de larticle et le titre du blog.
Le titre dune page apparat dans la barre de titre du navigateur. Il est galement utilis dans les pages de rsultats de recherche des navigateurs. Laffichage des sources permet de reprer le titre dans len-tte de la page (balise <head>).
Figure 105
La page www.scopalto.com a pour titre Revues et Magazines Culturels .
Figure 106
Le titre Revues et Magazines Culturels apparat dans la barre de titre du navigateur.
Figure 107
Le titre apparat dans len-tte <head> de la page.
Rdiger des titres de qualit est un des lments les plus importants du rfrencement. Lextension All in One SEO Pack permet au blogueur davoir la main sur toutes les informations caches dune page : le titre, les mots-clefs, la description.
242
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 108
Linterface ddition darticles et de pages senrichit dune section permettant de prciser le titre, la description et les mots-clefs associs la page.
La rubrique Rglages>All in One SEO sert dfinir le titre, la description et les mots-clefs de la page daccueil du blog. Elle permet galement de prciser comment les titres doivent tre construits. Lextension utilise par dfaut la norme suivante : titre de larticle | titre du blog.
Lchange de liens
Google fut lorigine du renouveau des moteurs de recherche la fin des annes 1990. Son succs soudain reposait en partie sur sa rapidit, sa simplicit ( loppos des pages portail de lpoque) et surtout sur la pertinence des rsultats de recherche quil proposait. Cette prcision rsultait des travaux de recherche mens Stanford par les deux fondateurs : Larry Page et Sergey Brin. Le classement (ranking), principe la fois simple et gnial, mesure limportance dun site en fonction du nombre de liens qui pointent vers lui. En tant la cible de nombreux liens, un site augmente son ranking et se retrouve mieux class dans les rsultats de recherche. Le principe est finalement trs logique et peut sapparenter au systme des citations dans le domaine de ldition : un livre souvent cit est gnralement plus pertinent quun ouvrage ignor de tous. Lorsque lon sait quel point un bon positionnement dans un moteur de recherche peut tre source de trafic, il est facile dimaginer que certains ont vite dtourn lalgorithme en mettant en place une srie de liens entrants factices, afin de faire grimper le ranking de leurs sites. Ce type de pratiques, qualifies de Google Bombing, doit tre proscrit : il peut se rvler trs dangereux et entraner un bannissement par le moteur de recherche. Avoir une dmarche proactive vis--vis de sites du mme secteur pour obtenir des citations sous forme de liens est en revanche tout fait autoris, et mme vivement conseill. Le blogroll est un emplacement particulirement adapt pour insrer des rfrences des sites extrieurs.

user 177 at Wed Nov 10 04:01:48 +0100 2010
243
WordPress 3
Les liens sponsoriss

B http://adwords.google.fr
Lachat de liens sponsoriss sur des services tels que Google Adwords reste le moyen le plus sr dobtenir des liens entrants et du trafic. Le lien apparat alors sur la colonne de droite des pages de rsultats de recherche (appeles aussi SERP, pour Search Engine Results Page) ainsi que sur les sites partenaires (voir le chapitre 11 Gagner de largent ).
Figure 109
Cette page de rsultats propose quatre liens sponsoriss sur la droite.
Pour obtenir ces liens, le blogueur doit crer une campagne (un titre, une description et un lien) quil associe des mots-clefs de recherche. Ce systme a lavantage dautoriser lapparition dun lien dans le cadre dune recherche qui na pourtant rien voir avec le contenu du blog.
Figure 1010
Cration dune campagne
Chaque clic est ensuite factur lannonceur suivant un montant qui varie en fonction de la popularit du mot-clef achet. Certains clics associs des mots-clefs trs populaires, tels que htel paris , peuvent atteindre une dizaine deuros alors quun clic lambda tourne autour dune dizaine de centimes. 244
user 177 at Wed Nov 10 04:01:48 +0100 2010
Cette solution nest cependant pas trs adapte aux blogs, dont le chiffre daffaires, lorsquil existe, ne permet gnralement pas dinvestir dans la publicit.
Conseils techniques
La stabilit du site Les moteurs de recherche napprcient pas les modifications massives et soudaines qui portent sur lintgralit dun site. Il est par consquent dconseill de multiplier : les changements de nom de domaine ; les modifications de structure des liens ; les modifications de thmes qui altrent la structure des pages. Ces rgles sont particulirement difficiles respecter pendant la phase de conception dun blog. Il est dans ce cas conseill de bloquer temporairement lindexation du blog par les moteurs de recherche en passant par la rubrique Rglages>Vie prive.
Figure 1011
Option permettant de bloquer les moteurs de recherche
La directive <meta name='robots' content='noindex,nofollow' incluse dans len-tte des pages (balise <head>). La rapidit de chargement
/>
est alors
La vitesse de chargement dune page est une dimension de plus en plus prise en compte par Google dans le calcul du PageRank. Le chapitre 13, consacr aux optimisations, prsente diffrentes techniques pour augmenter cette vitesse.
Figure 1012
Ce graphique, propos par Google dans ses Webmaster Tools, permet de visualiser la vitesse moyenne de chargement des pages.

user 177 at Wed Nov 10 04:01:48 +0100 2010
245
WordPress 3
Lindexation
Lapparition dun site web dans un moteur de recherche suit un processus trs prcis. Le moteur de recherche commence par prendre connaissance de lapparition dun nouveau site sur la Toile. Des programmes appels robots se chargent alors de rcuprer le contenu des diffrentes pages du site ; il sagit de la phase de crawl. Une fois le contenu du site transfr sur les serveurs, le moteur passe la phase dindexation en procdant un certain nombre danalyses : structure des pages, frquence des mots-clefs, origine des liens entrants, etc.
La soumission directe
Un moteur de recherche prend connaissance de lapparition dun nouveau site de diffrentes manires. Le plus souvent, un lien prsent sur un site dj index par le moteur laiguille vers le nouveau site. Il est galement possible de passer par des formulaires spcialement conus par chaque moteur pour soumettre ladresse du nouveau site : Google : http://www.google.com/addurl/ Bing : http://www.bing.com/webmaster/SubmitSitePage.aspx Yahoo : http://siteexplorer.search.yahoo.com/submit/ Wiki : http://www.wikio.fr/addsource
Figure 1013
Formulaire de soumission dune nouvelle adresse
ASTUCE Rapidit de lindexation

Plus le nombre de liens entrants est important, plus lindexation sera rapide.
Lapparition de la page daccueil du blog dans les moteurs prend ensuite quelques jours. Lindexation complte du contenu peut, quant elle, prendre jusqu quelques semaines. Dans le cas o le blog napparatrait pas dans les moteurs de recherche au bout de plusieurs semaines, il conviendrait de vrifier dans linterface Rglages>Vie Prive que loption Bloquer les moteurs de recherche nest pas coche !
246
user 177 at Wed Nov 10 04:01:48 +0100 2010
Les services de notification

Agrgateurs darticles et moteurs de recherche de blogs (Google Blogs, Technorati) sont des sources importantes de trafic. Chaque moteur dispose dun service spcifique permettant au blog de lavertir ds quun nouvel article est publi. Un avertissement, galement appel un ping, repose sur le protocole XML-RPC. WordPress peut tre paramtr pour avertir lui-mme ces sites. Le champ Services de mise jour, accessible via la rubrique Rglages>criture, intgre par dfaut le service Ping-O-Matic. Ce service, qui dpend de la Fondation WordPress, se charge de propager les annonces une vingtaine de sites.
B http://blogsearch.google.fr B http://technorati.com
B http://pingomatic.com
POUR ALLER PLUS LOIN Services de ping

Le champ Services de mise jour peut tre enrichi dautres services, dont un certain nombre sont proposs sur la page suivante :
B http://codex.wordpress.org/Update_Services
Figure 1014
Linterface web de Ping-O-Matic
Le sitemap
Un sitemap (plan dun site web) est un fichier au format XML qui peut tre assimil un plan de site. Ce fichier contient en permanence la liste des dernires pages cres sur le site, avec un lien vers chacune delles. Ce systme, totalement invisible sur le site, vite au webmaster de devoir

user 177 at Wed Nov 10 04:01:48 +0100 2010
247
WordPress 3
concevoir une page plan dont la seule utilit serait de faciliter la vie des robots en leur proposant un lien vers les diffrentes pages du site. La structure dun fichier sitemap est un standard partag par les plus grands moteurs de recherche (Google, Bing, Yahoo!). La norme est disponible sur le site sitemap.org. Lextension Google XML Sitemaps permet de gnrer automatiquement un fichier sitemap.xml la racine du site, mis jour en mme temps que le site. Une fois lextension installe et active, le blogueur accde linterface Rglages>XML-Sitemap pour gnrer le premier fichier sitemap.xml.
Figure 1015
Premire gnration manuelle
Deux fichiers apparaissent alors la racine du blog : sitemap.xml et sitemap.xml.gz. Le fichier XML contient des entres pour chaque article du blog. Lextension Google XML Sitemaps prcise dans son interface de configuration quelle est en mesure davertir les moteurs ds que le fichier sitemap.xml est mis jour.
Figure 1016
Contenu du fichier sitemap.xml

B https://www.google.com/webmasters/tools/
home B http://www.bing.com/webmaster/ WebmasterManageSitesPage.aspx B https://siteexplorer.search.yahoo.com
Les Webmaster Tools

Linterface de configuration de Google XML Sitemaps fait galement rfrence aux espaces que les diffrents moteurs de recherche mettent disposition des webmasters.
user 177 at Wed Nov 10 04:01:48 +0100 2010
248
Google Webmaster Tools ; Bing Webmaster Tools ;

Yahoo! Site Explorer.
Ces outils offrent la possibilit aux webmasters de suivre prcisment lvolution du rfrencement de leur site et permettent notamment de : soumettre un fichier sitemap ; suivre lvolution de lindexation ; surveiller les erreurs dindexation ; lister les mots-clefs pour lesquels le site apparat dans le moteur de recherche.
Figure 1017
volution de lindexation des pages du site
Linscription ces services est gratuite. Une phase de validation est cependant ncessaire pour contrler que la personne qui souhaite suivre le rfrencement du site en est bien responsable. Chaque service utilise le mme principe de validation : une clef dauthentification gnre automatiquement doit tre insre au sein du site. Cette insertion est ralise laide dun fichier plac la racine du site ou avec une balise <meta> spcifique dans len-tte de la page.
user 177 at Wed Nov 10 04:01:48 +0100 2010
249
WordPress 3
Lextension Webmaster Tools Verification permet de renseigner trs facilement les diffrentes clefs de vrification via linterface Outils>Webmaster Tools.
Figure 1018
Clefs des diffrents moteurs de recherche
Figure 1019
Laffichage des sources du blog fait bien apparatre les trois clefs.
Une fois le formulaire valid, les pages du blog intgrent bien les diffrentes clefs au sein de len-tte, ce qui permet de poursuivre le processus dinscription.
Le social bookmarking
B http://www.delicious.com B http://digg.com B https://www.google.com/bookmarks/
Tout navigateur dispose dun systme de marque-pages (bookmarks). Grce cet outil lutilisateur peut enregistrer et organiser les adresses de ses sites web prfrs. Pendant longtemps, les navigateurs ne donnaient pas lutilisateur la possibilit de synchroniser ses marque-pages entre ses diffrents ordinateurs. Cette situation fut lorigine de lmergence de sites tels que Delicious, Digg ou Google Bookmarks. Ces sites offrent leurs utilisateurs la possibilit de crer un marque-page non pas au sein du navigateur, mais en ligne, de manire pouvoir y accder depuis nimporte o.
250
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 1020
Marque-pages en ligne sur le site Delicious
ASTUCE Navigateurs et marque-pages

Les navigateurs disposent dsormais de solutions permettant de synchroniser les marquepages entre diffrentes installations. Google Chrome permet dactiver cette fonctionnalit en passant par le panneau de configuration (Options>Donnes Personnelles>Synchronisation). Sous Firefox lutilisateur peut installer lextension Firefox Sync en passant par le menu Outils>Modules Complmentaires.
En plus de cette fonction denregistrement de signets, ces services se sont trs vite dots dune dimension sociale en offrant la possibilit aux utilisateurs de partager leurs listes de sites prfrs. Le terme de social bookmarking tait n. En tant en mesure tout moment de dtecter quun site est plus bookmark quun autre, ces services sont retrouvs particulirement bien placs pour dtecter des tendances et lancer de nouveaux services. Pour ajouter un site un marque-page en ligne, linternaute peut : utiliser les formulaires proposs au sein des espaces membres des diffrents services ; installer une extension au sein du navigateur (par exemple, lextension Delicious Bookmarks pour Firefox : https://addons.mozilla.org/fr/firefox/ addon/3615) ;

user 177 at Wed Nov 10 04:01:48 +0100 2010
251
WordPress 3
Figure 1021
Digg est en mesure de faire remonter en temps rel les contenus les plus populaires du Web.
utiliser un code JavaScript plac dans la barre personnelle du naviga-
teur pour bookmarker la page en cours (ce type de script est qualifi de scriptlet) ; utiliser, sur la page bookmarker, un bouton redirigeant vers le service. Cette dernire solution, qui nimpose aucune installation de la part de linternaute, est la plus rpandue.
Figure 1022
Chaque article sur lemonde.fr est suivi dune barre utilise notamment pour partager le lien sur diffrents sites : Twitter, Facebook, Digg, etc.
B http://sharethis.com
Plutt que de proposer une icne par site de partage, le site ShareThis offre la possibilit de crer un bouton de partage gnrique. En cliquant sur ce bouton, linternaute ouvre une petite fentre incruste qui lui permet de slectionner son service de bookmarking prfr. Pour crer un tel bouton et paramtrer la fentre de partage quil souhaite proposer ses visiteurs, le webmaster utilise linterface http://sharethis.com/publishers/getbutton qui permet : de modifier lapparence du bouton et les intituls ; de slectionner les services de partage intgrer dans la fentre ; de choisir une couleur ; de prciser la plate-forme sur laquelle sera utilis le bouton (le logo WordPress est propos).
252
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 1023
Paramtrage de la fentre de partage
Figure 1024
Code JavaScript ShareThis
Lextension ShareThis doit ensuite tre installe et active. Le code gnr peut alors tre insr dans linterface Rglages>ShareThis. Une fois le code JavaScript enregistr, chaque article du blog est accompagn dune icne ShareThis.

user 177 at Wed Nov 10 04:01:48 +0100 2010
253
WordPress 3
Figure 1025
Insertion du code JavaScript
Figure 1026
Fentre ShareThis
Les rseaux sociaux

Les sites Facebook et Twitter, de par leur dimension sociovirale, sont un excellent moyen pour un blogueur dannoncer la publication dun nouvel article.
Twitter
B http://twitterfeed.com
Depuis les changements profonds oprs par Twitter au niveau de son systme dauthentification, la solution la plus simple pour publier un tweet ds quun nouvel article est mis en ligne repose sur le site Twitterfeed.
254
user 177 at Wed Nov 10 04:01:48 +0100 2010
Ce service utilise le flux RSS du blog pour dtecter les mises jour et extraire linformation qui sera ncessaire la cration du tweet. 1 Une fois authentifi, lutilisateur commence par indiquer le nom de son flux (Feed Name) ainsi que ladresse de ce dernier (RSS Feed URL). Loption Check for new posts disponible dans les options avances (Advanced Settings) peut tre passe Every 30 mins. Ce changement permet daugmenter la frquence de vrification du flux par Twitterfeed.
Figure 1027
Paramtrage dun nouveau flux
2 La seconde tape consiste slectionner le service Twitter (Available
Services) et sy authentifier en utilisant le bouton Authenticate Twitter. 3 Une fois cette authentification ralise, lutilisateur est redirig sur Twitterfeed et finalise linscription en cliquant tout dabord sur les boutons Create Service et celui All Done!.

user 177 at Wed Nov 10 04:01:48 +0100 2010
255
WordPress 3
Figure 1028
Authentification Twitter
Figure 1029
Lutilisateur renseigne son identifiant et son mot de passe sur Twitter.
Figure 1030
Linscription sest bien droule.
Figure 1031
Tweet publi par Twitterfeed
256
user 177 at Wed Nov 10 04:01:48 +0100 2010
Facebook
Avertir son rseau damis Facebook quun nouvel article a t publi sur son blog peut tre ralis via une mise jour de statut (Exprimez-vous) ou une cration darticle (par lintermdiaire de longlet Articles prsent dans la rubrique Profil).
Figure 1032
Interface de mise jour du statut
Le service Twitterfeed dcrit plus haut est un moyen simple de mettre jour son statut de faon automatique.
Figure 1033
Authentification Facebook
La cration automatique darticles repose, quant elle, sur la technique suivante : la page http://www.facebook.com/notes.php intgre sur la droite un encart invitant importer un blog (voir la procdure pages suivantes). La dernire tape consiste confirmer limportation du flux. Le rseau social du blogueur se retrouve ainsi automatiquement inform dans son fil dactualits ds quun nouvel article est publi sur le blog.

user 177 at Wed Nov 10 04:01:48 +0100 2010
257
WordPress 3
Figure 1034
Import de blog
Figure 1035
Adresse du blog
Figure 1036
Confirmation
258
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 1037
Fil dactualits
Le pingback
Le mcanisme des pingbacks sert avertir un blog A quil vient dtre cit par un blog B. Ce processus est intressant pour le blog B qui, son tour, apparatra parmi les commentaires de larticle cit dans le blog A (rtrolien). Le pingback est une fonctionnalit disponible par dfaut sur WordPress. Loption peut cependant tre dsactive en passant par linterface Rglages>Discussions, options Tenter de notifier les blogs lis cet article et Autoriser les notifications depuis les autres blogs.
COMPATIBILIT
Le pingback selon les plates-formes
Toutes les plates-formes de blog ne rpondent pas aux pingbacks. Il nest donc pas tonnant quune citation ne soit pas mentionne sur le blog cit.
UN PEU DHISTOIRE Trackback

Les trackbacks sont une autre forme de rtroliens, plus ancienne et plus sensible au spam.
Figure 1038
Sept blogs ont fait rfrence cet article du blog http://wordpress.org/development.
Dvelopper sa communaut
Disposer dune communaut est un gage de trafic rcurrent pour un blog. Diffrentes mthodes en acclrent la constitution.
Facebook
De nombreux blogs et webzines disposent dsormais dune Page Facebook associe. En plus de la visibilit quelle apporte dans un rseau social de plusieurs centaines de millions de membres, celle-ci a surtout lavantage de permettre de constituer une vritable communaut de fans.
user 177 at Wed Nov 10 04:01:48 +0100 2010
259
WordPress 3
Figure 1039
Bouton Devenir fan de la Page Facebook
B http://www.facebook.com/facebook-
widgets/
Ladresse http://www.facebook.com/pages/create.php donne la possibilit de crer une Page en quelques clics.
Figure 1040
Description de Page comportant ladresse du site associ
CONSEIL Description
Il est important dinclure lURL du blog dans la description de la page.
La page des widgets Facebook propose le widget Espace Fans qui permet dafficher une slection de fans ainsi quun bouton Devenir fan (ou Jaime). Ce bouton permet de rejoindre en un clic la communaut des fans du blog. Le bouton Other gnre le script pouvant tre inclus dans la colonne latrale. Attention, avec 300 pixels de largeur, le widget ncessite davoir choisi un thme disposant dune colonne latrale suffisamment tendue.
Figure 1041
Configuration du widget
260
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 1042
Le widget est affich dans la colonne latrale, qui doit tre suffisamment tendue.
Une fois la communaut constitue, le blogueur doit prvenir les fans ds que le blog est mis jour. Plutt que de publier un article Facebook pour signaler chaque nouvel article du blog, il peut utiliser le flux RSS du blog. Les fans sont ainsi automatiquement avertis ds quun nouvel article du blog est publi. Lassociation du flux la Page Facebook peut tre ralise de la manire suivante : une fois le premier article rdig, la rubrique Articles se dote dun lien Voir les articles plus anciens ; un lien Modifier les paramtres dimportation donne alors accs une interface permettant de renseigner ladresse du flux.
Figure 1043
LE SAVIEZ-VOUS ? Open Graph

Facebook sest vite rendu compte de la prolifration de pages associes des sites web. En installant le widget Devenir fan sur son site web, un webmaster assure Facebook une publicit la fois visible et gratuite. LOpen Graph Protocol est le moyen pour Facebook de conserver son avance dans le domaine de la gestion de communaut autour des sites web. Ce protocole simplifie la vie du webmaster en lui demandant simplement dinsrer quelques informations caches dans lentte du site et dinclure un bouton I Like (Jaime). De nombreuses extensions WordPress permettent ds prsent de rendre un blog compatible avec lOpen Graph.
Bouton I like disponible lorsquun blog rejoint lOpen Graph
La liste de diffusion (newsletter)

Une des techniques les plus anciennes pour crer une communaut autour dun site est de proposer linscription une liste de diffusion (newsletter). la diffrence de la souscription un flux RSS, linscription une liste de diffusion est simple et accessible tous.
Les extensions
Plusieurs extensions WordPress permettent de doter le blog dune newsletter : Newsletter, MailPress et MeeNews. Lextension MailPress a le double avantage dtre simple configurer et de disposer dune traduction complte en franais. Une fois active, elle enrichit lespace dadministration dun menu ddi Mails, dune rubrique MailPress situe dans la rubrique Rglages et dun widget MailPress dans Apparence>Widgets.

user 177 at Wed Nov 10 04:01:48 +0100 2010
261
WordPress 3
RACCOURCI Shortcode
MailPress offre la possibilit dutiliser le shortcode [mailpress] pour proposer le formulaire dinscription directement au sein du contenu dun article.
Avant toute utilisation, MailPress doit tre paramtre. Longlet Gnral de la rubrique Rglages>MailPress sert dfinir le nom et ladresse de lexpditeur des e-mails. Longlet SMTP doit, quant lui, indiquer ladresse dun serveur denvoi de-mail (ce type dinformation peut tre obtenu auprs de lhbergeur).
Figure 1044
Menu MailPress
En plaant le widget MailPress dans la colonne latrale, le blogueur assure une visibilit maximale au formulaire dinscription.
Figure 1045
Inscription la liste de diffusion
ASTUCE Sabonner aux commentaires

Lextension Subscribe To Comments ajoute une case cocher sous le formulaire de dpt de commentaires pour permettre lauteur du commentaire dtre mis au courant automatiquement ds quun nouveau commentaire est dpos sur larticle en cours. Il sagit dune fonctionnalit utile pour linternaute qui souhaite suivre le dbat et intressante pour le blogueur qui augmente naturellement son nombre de visites.
B feedburner.google.com
FeedBurner
FeedBurner est un service de Google qui permet denregistrer des adresses de flux de syndication, afin de disposer dune multitude de services. Une fois identifi, le blogueur peut indiquer ladresse de son flux et lui associer un nom unique.
SAVOIR Traduction
Le service FeedBurner nest pas disponible en franais.
Figure 1046
Indication du titre et du nom unique associ au flux
262
user 177 at Wed Nov 10 04:01:48 +0100 2010
En choisissant le nom blog-de-laul, ladresse de ce flux chez Feedburner devient http://feeds.feedburner.com/blog-de-laul.

Figure 1047
Les contenus des flux http://feeds.feedburner.com/blog-de-laul et http://laurence.bois.name/wordpress/feed/ sont identiques.
La slection du nom du flux sur la page daccueil de FeedBurner donne accs diffrentes fonctionnalits. FeedBurner est surtout connu pour les statistiques quil fournit sur lutilisation du flux. Celles-ci renseignent notamment sur : le nombre de personnes qui utilisent le flux ; le nombre de clics ; les agrgateurs utiliss, etc.
Figure 1048
volution du nombre dutilisateurs du flux
Autre fonctionnalit intressante, FeedBurner donne la possibilit de sabonner au flux par e-mail. Linternaute est alors automatiquement inform ds quun nouveau contenu est publi. La rubrique Publicize>Email Subscriptions, une fois active, permet de rcuprer le code HTML du formulaire de souscription qui peut tre plac dans la colonne latrale.

user 177 at Wed Nov 10 04:01:48 +0100 2010
263
WordPress 3
Figure 1049
Rcupration du code HTML du formulaire de souscription
Figure 1050
Le formulaire permet aux internautes denregistrer leur adresse e-mail pour tre avertis ds quun nouvel article est publi.
Linscription FeedBurner est de type opt-in (littralement choisir dadhrer ... ). Chaque nouvel inscrit doit cliquer sur un lien prsent au sein de le-mail de bienvenue pour confirmer son inscription. Ce mode de fonctionnement vite que des adresses e-mail de personnes qui nen ont pas fait la demande soient inscrites.
Figure 1051
E-mail permettant de confirmer linscription
264
user 177 at Wed Nov 10 04:01:48 +0100 2010
Le-mail de confirmation dinscription peut tre paramtr (adresse dorigine, sujet, contenu) dans la sous-rubrique Communication Preferences.
Le blogueur peut tout moment rcuprer les adresses des inscrits en utilisant le lien View Subscriber Details prsent en bas de la sous-rubrique Subscription Management. Le lien CSV dclenche le tlchargement dun fichier contenant les adresses e-mail des abonns.
Figure 1052
Extraction des adresses e-mail des inscrits
Le fichier tlcharg peut tre ouvert sous Excel (menu Donnes> partir du texte) ou sous le tableur OpenOffice.org Calc. Les informations de date et de statut dinscription (confirm, en attente de confirmation) sont associes chaque adresse e-mail.
Figure 1053
Liste des inscrits
La sous-rubrique Email branding permet de paramtrer le sujet et certains styles de le-mail dalerte qui est envoy lensemble des inscrits ds que le flux RSS est mis jour. Lheure de lenvoi est, quant elle, paramtrable dans la sous-rubrique Delivery Options. Il convient de modifier le fuseau horaire en fonction du lieu de rsidence (la France se trouve dans la zone GMT +1).
Figure 1054
Le-mail dalerte, sil y a lieu, est paramtr pour tre envoy entre 9 h et 11 h.

user 177 at Wed Nov 10 04:01:48 +0100 2010
265
WordPress 3
Google Friend Connect

B http://www.google.com/friendconnect/
Google Friend Connect (GFC) est une technologie propose par Google qui donne la possibilit de crer une communaut de membres autour dun blog.
Figure 1055
Page daccueil de Google Friend Connect
T Gadget
Gadget est le nom donn aux widgets Google Friend Connect.
Les forces de cette solution sont : la capacit dassocier la communaut directement au blog et non une page extrieure, comme cest le cas pour Facebook, o la communaut est associe une page ; la possibilit daccepter des membres provenant dune multitude de services (Gmail, Twitter, OpenID, etc.) ; la mise disposition de nombreux gadgets (liste de diffusion, flux de commentaires). Pour pouvoir disposer dun rseau Friend Connect, le blogueur doit commencer par associer un site son compte sur la page http:// www.google.com/friendconnect/. Ltape suivante lui permet de configurer le gadget Membres qui affiche les avatars des membres. Le code JavaScript gnr peut ensuite tre plac dans la colonne latrale. GFC permet galement de crer des sondages en slectionnant Centres dintrt dans le menu de gauche. Ce gadget peut son tour tre plac dans la colonne latrale.
266
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 1056
Cration dun nouveau site
Figure 1057
Configuration du gadget Membres

user 177 at Wed Nov 10 04:01:48 +0100 2010
267
WordPress 3
Figure 1058
Prsentation du gadget Membres
Figure 1059
Cration dun sondage
Figure 1060
Prsentation du sondage
La rubrique Lettre dinformation permet denvoyer des messages aux membres de la communaut. La force de ce module rside dans la possibilit de filtrer les destinataires en fonction des centres dintrt dcrits prcdemment (voir page 266). Dans le ca279
268
user 177 at Wed Nov 10 04:01:48 +0100 2010
s prsent, il devient possible denvoyer un message aux seuls membres disposant dun Mac.
Figure 1061
Composition du message
Ce module propose galement dobtenir un gadget spcifique pour linscription la lettre dinformation.
Figure 1062
Gadget dinscription la lettre dinformation
Mesurer son audience

Un aspect essentiel de le-marketing est la mesure daudience. Il est en effet essentiel de pouvoir dtecter quelles sont les principales sources de trafic, les pages les plus vues, les habitudes des internautes.
user 177 at Wed Nov 10 04:01:48 +0100 2010
269
WordPress 3
TENDANCES Google versus Facebook

Google et Facebook se livrent une guerre acharne autour des rseaux sociaux. Facebook a pour linstant une longueur davance et dispose du plus grand rseau social mondial. Google et ses partenaires ont trs vite ragi en unissant leurs forces autour dOpenSocial. Cette technologie permet aux sites compatibles de rendre leurs rseaux interoprables. En refusant de faire un effort douverture, Facebook ne pourra rsister indfiniment une alliance comprenant des membres aussi puissants que Google, Yahoo!, MySpace, LinkedIn, etc.
Lextension WordPress.com Stats

WordPress.com Stats est lextension de statistiques propose par dfaut sur la plate-forme WordPress.com. Cette extension a le double avantage de sintgrer parfaitement lespace dadministration et de proposer des indicateurs trs simples daccs. Lextension donne notamment accs : au nombre de visites ; lorigine du trafic : quels sites amnent des visiteurs, quels motsclefs sont saisis dans les moteurs de recherche pour arriver jusquau blog ; au classement des articles les plus vus. Les statistiques sont organises par jours, semaines et mois. Dans le cadre dun blog autonome, lextension doit tre installe et active. Lactivation ncessite une clef API (API Key) qui peut tre assimile un identifiant secret donnant le droit dutiliser diffrents services proposs par WordPress.com (WordPress.com Stats, Akismet).
Figure 1063
Message davertissement
Un compte sur WordPress.com doit tre cr pour rcuprer cette clef dans la rubrique Utilisateurs>Paramtres personnels. Une fois la clef renseigne, une dernire tape consiste associer le blog la clef API en utilisant le bouton Add to WordPress.com account.
Figure 1064
Clef API
270
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 1065
Confirmation dassociation
Les statistiques sont disponibles dans la rubrique Tableau de bord>Site Stats. Un rsum est galement visible sur la page daccueil du tableau de bord.
Figure 1066
Statistiques intgres au tableau de bord
Google Analytics
Google Analytics est la solution gratuite danalyse de trafic propose par Google. Moins facile daccs que WordPress.com Stats, ce service offre une richesse dinformations tout fait impressionnante.
B www.Google.com/Analytics
Installation
Lauthentification sur http://www.google.com/analytics/ ncessite davoir une adresse Gmail. Aprs avoir associ ladresse de son blog, lutilisateur accde une page contenant lidentifiant (ID) de site web ainsi que le code JavaScript qui se charge de transmettre Google tous les vnements qui ont lieu sur le site. Ce type de script est appel un tracker. Dans le cadre dun site lambda, lutilisateur rcupre le tracker quil place en bas de chaque page du site. Dans le cas dun blog WordPress, il doit une nouvelle fois faire appel une extension qui assurera le bon fonctionnement du tracker, quelles que soient les mises jour de moteurs ou de thmes. Lextension Google Analytics for WordPress est prcisment prvue pour insrer le tracker dans chaque page du site. Lassociation du blog avec le compte Google Analytics est ralise en passant par linterface Rglages>Google Analytics qui permet dindiquer lID de site web dans le champ Analytics Account ID.
user 177 at Wed Nov 10 04:01:48 +0100 2010
271
WordPress 3
Figure 1067
Page donnant accs au tracker
Tableau de bord
Au bout de quelques heures, les premires donnes commencent apparatre dans Google Analytics. Le tableau de bord rsume les informations importantes : un graphique prsentant lvolution du nombre de visites ; une carte avec la golocalisation des visiteurs ; un camembert reprsentant les principales sources de trafic ; les pages les plus vues.
272
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 1068
Tableau de bord de Google Analytics
Parmi les cinq rubriques proposes dans le menu de gauche, trois sont particulirement adaptes lusage du blogueur : Sources de trafic, Visiteurs et Contenu.
Sources de trafic
La rubrique Sources de trafic indique do viennent les internautes qui arrivent sur le blog. Le trafic se rpartit en trois grandes familles : Moteur de recherche : le visiteur arrive sur le blog suite une recherche sur Google, Bing ou tout autre moteur de recherche ; Sites rfrents : le visiteur passe par un autre site pour accder au blog ; Accs direct : le visiteur utilise son marque-pages ou saisit ladresse du blog directement dans la barre dadresse. La rubrique Sources de trafic>Toutes les sources de trafic donne encore plus de dtails, en prcisant galement les visites issues dun clic sur un lien sponsoris. Le support de la source est alors CPC (cot par clic). Les sous-rubriques Sites rfrents et Mots-cls indiquent les sites et les mots-clefs qui gnrent le plus de trafic.

user 177 at Wed Nov 10 04:01:48 +0100 2010
273
WordPress 3
Figure 1069
Dtail des sources de trafic
Visiteurs et contenu
La Vue densemble des visiteurs prcise des valeurs aussi essentielles que le nombre de visites et de pages vues ou le taux de rebond. Le taux de rebond indique le nombre de personnes qui accdent au blog et le quittent aussitt, sans avoir visit une page supplmentaire. Il est essentiel de minimiser ce taux, surtout si le blog cherche se rentabiliser avec laffichage de publicits. En effet, plus un internaute consulte darticles, plus le nombre de publicits affiches est important. Le dfi consiste donc pousser linternaute consulter dautres articles. La sous-rubrique Fidlit des visiteurs donne des informations importantes sur la faon dont est consult le blog, notamment la dure des visites ou le nombre de pages vues. La rubrique Contenu est surtout utile pour sa rubrique Dtail des pages par titre, qui permet de dtecter quels sont les sujets les plus plbiscits par les lecteurs. 274
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 1070
Vue densemble des visiteurs
Figure 1071
Dure des visites

user 177 at Wed Nov 10 04:01:48 +0100 2010
275
chapitre
11
user 177 at Wed Nov 10 04:01:48 +0100 2010
Gagner de largent
SOMMAIRE
B Les diffrentes sources
Gagner de largent est une motivation importante pour un grand nombre de blogueurs. Ils sont chaque anne de plus en plus nombreux parvenir en vivre. Si la publicit est la source la plus sre et la plus vidente de revenus, le Web permet toutefois de diversifier ces sources en proposant laffiliation, la vente de produits et le recours aux dons.
de revenus
B Placer de la publicit
sur son blog
B Se financer avec laffiliation

MOTS-CLEFS
B montisation B liens sponsoriss B publicit B sponsor B don B vente de produits B affiliation

user 177 at Wed Nov 10 04:01:48 +0100 2010
WordPress 3
Ce chapitre vise prsenter les diffrentes techniques qui permettent de montiser un blog, de la publicit laffiliation, en passant par les articles sponsoriss, les dons ou la vente de produits.
La publicit
La publicit est la premire mthode qui vient lesprit pour montiser un blog. Ce systme a lavantage dtre simple mettre en place.
Afficher des liens sponsoriss

B http://www.google.fr/AdWords B http://www.google.com/adsense
Google, avec ses offres AdWords et AdSense, est de loin le leader incontest de la publicit sur le Web. AdWords est un service qui permet aux annonceurs de diffuser leurs publicits sur le Web. Limites lorigine des annonces textuelles (do le nom AdWord, compos de ad, publicit , et word, mot ), les publicits peuvent tre aujourdhui au format image et vido (animations Flash). Les annonces AdWords apparaissent sur les diffrents sites de Google : le moteur de recherche Google, le webmail Gmail, le portail vido YouTube, etc.
Figure 111
Annonces AdWords places dans Gmail
B http://adsense.google.com
La grande ide de Google fut dtendre son rseau en permettant tout diteur de contenu en ligne (blog, portails, webzine) de diffuser des annonces galement au sein de son site. En plaant ces encarts publicitaires, les diteurs de sites sont rmunrs ds quun visiteur clique sur un lien sponsoris ou une publicit.
278
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 112
Annonce AdWords au sein dun article de blog
Le service qui offre aux diteurs la possibilit de diffuser les annonces AdWords sur leur site sappelle AdSense. Le processus dinscription impose de prciser ladresse du site sur lequel apparatront les annonces. Une vrification est alors ralise par Google, qui sassure que le blog est bien en conformit avec la lgislation franaise. Les sites de promotion de jeux en ligne ou de vente de mdicaments sont par exemple interdits. Une fois le site accept et le compte valid, longlet Configuration AdSense permet de prciser le format des publicits. Les annonces peuvent en effet tre textuelles ou illustres. De nombreux rglages permettent dadapter les couleurs, lorientation et la taille des annonces. lissue du paramtrage, Google gnre une portion de code JavaScript en charge de laffichage des annonces (ce script est souvent appel tracker) est gnralement insre laide dun widget Text dans la colonne latrale du blog. Une dizaine de minutes dattente sont ncessaires pour que les premires annonces saffichent.
LE SAVIEZ-VOUS ? Transparence
Le sujet a longtemps t tabou, mais nous savons dsormais que Google reverse 68 % des revenus AdWords ses partenaires AdSense.
RAPPEL WordPress.com
La diffusion dannonces AdSense nest pas autorise sur WordPress.com.
CONSEIL O placer les publicits ?

Au moment de placer le code JavaScript, il est bon de se rappeler cette rgle marketing : une publicit est dautant plus vue, et fait lobjet dun nombre plus important de clics, quelle est situe en haut et gauche de la page. Un choix doit alors tre fait entre lesthtique et la rentabilit.
Figure 113
Utilisation du widget Text pour insrer le script AdSense

user 177 at Wed Nov 10 04:01:48 +0100 2010
279
11 Gagner de largent
WordPress 3
Figure 114
Liens sponsoriss AdSense dans la colonne latrale
Devenir sa propre rgie

partir dun certain niveau de trafic, il devient envisageable pour un blogueur de proposer lui-mme des emplacements publicitaires des annonceurs prsents sur le mme secteur dactivit. Ce mode de fonctionnement permet au blogueur : de sassurer une source de revenus plus prenne ; de bnficier dun chiffre daffaires souvent plus important ; de prserver une prsentation homogne en vitant la multiplication des supports (bannires, liens sponsoriss, etc.). Le blog reste le moyen le plus sr de rechercher de nouveaux partenaires. Le blogueur a donc tout intrt placer dans la colonne latrale un bloc indiquant les emplacements publicitaires disponibles.
280
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 115
Emplacement publicitaire pour des annonceurs
Ce bloc peut tre accompagn dun lien vers une page Partenaires dtaillant les coordonnes du blogueur ainsi que certains aspects du partenariat (dure, garanties, emplacements).
Figure 116
Lien destin aux partenaires
De nombreux emplacements peuvent accueillir de la publicit sur un blog : la colonne latrale ; les articles ; len-tte ; le flux RSS ; la liste de diffusion. Le blogueur doit cependant rester vigilant et viter de transformer son blog en espace publicitaire. Il risquerait alors de dgoter le visiteur et de voir le trafic de son blog baisser, ce qui serait dsastreux tant au niveau conomique quau niveau de limage. La satisfaction du lecteur doit rester la priorit numro un du blogueur : un lecteur satisfait aura tendance pro Groupe Eyrolles, 2009
user 177 at Wed Nov 10 04:01:48 +0100 2010
CONSEIL PRATIQUE Statistiques

Il est important que les blogueurs grant euxmmes les partenariats disposent de statistiques fiables. Google Analytics ou Xiti sont des outils de mesure daudience certifis qui offrent des indications trs prcises sur le nombre de pages vues, et par consquent, sur le nombre dencarts publicitaires affichs.
B http://www.google.com/analytics/ B http://www.atinternet.com/Produits/
Solutions-XiTi.aspx
281
WordPress 3
mouvoir le blog (bouche--oreille, tweets, partage) et participer au dveloppement du trafic. En augmentant sa frquentation par tous les moyens, le blogueur sera en mesure daugmenter le prix de vente de ses encarts et pourra, petit petit, diminuer leur nombre.
Placer de la publicit dans le flux RSS

Les flux RSS allis aux agrgateurs sont des outils merveilleux pour accder aux contenus des sites et prsentent de nombreux avantages : centralisation des informations, gain en temps et en efficacit, facilit darchivage, etc. Linconvnient majeur de cette faon de consulter linformation rside dans le fait que linternaute accde directement au contenu sans se rendre sur le site dorigine. Il sagit par consquent dun vritable manque gagner pour un site dont le modle conomique repose sur la publicit.
Figure 117
Trois liens sponsoriss sont disposs en dessous du contenu.
282
user 177 at Wed Nov 10 04:01:48 +0100 2010
La premire solution ce problme consiste ne proposer dans le flux RSS quun extrait du contenu afin dinciter linternaute se rendre sur le blog pour lire la suite. Ce paramtrage est ralis via linterface Rglages>Lecture en choisissant loption Pour chaque article, fournir lextrait. La deuxime solution consiste placer de la publicit directement au sein des contenus des diffrents lments du flux. Linsertion automatique de publicits peut tre ralise simplement en utilisant FeedBurner (voir le chapitre prcdent), qui sappuie tout naturellement sur le service de publicit du groupe, AdSense. La gestion des publicits est disponible dans longlet Monetize.
Figure 118
FeedBurner sappuie tout naturellement sur Google AdSense.
Cet onglet ne correspond en ralit qu une invitation poursuivre le paramtrage sur le site AdSense (lien Sign in to AdSense). Linterface AdSense Configuration AdSense>Obtenir des annonces permet dadapter un certain nombre de paramtres lis aux publicits : format, frquence dapparition, position par rapport au contenu, etc.
Figure 119
Paramtrage des publicits qui apparatront dans les contenus du flux

user 177 at Wed Nov 10 04:01:48 +0100 2010
283
WordPress 3
La dernire tape consiste faire en sorte que le flux RSS propos nativement par le blog ne soit pas celui de WordPress, mais celui de FeedBurner. Pour y parvenir, le blogueur peut utiliser lextension FD Feedburner Plugin qui permet de prciser ladresse du flux FeedBurner dans linterface de configuration Extensions>FeedBurner Configuration.
Figure 1110
Lextension FD Feedburner Plugin remplace le flux natif de WordPress par celui de FeedBurner.
Figure 1111
Le flux est bien redirig vers celui de FeedBurner qui contient les publicits.
284
user 177 at Wed Nov 10 04:01:48 +0100 2010
Enfin, la troisime solution, plus technique, consiste ajouter les lignes suivantes au fichier .htaccess :
Configuration Apache permettant dutiliser le flux FeedBurner

<IfModule mod_rewrite.c> RewriteEngine on RewriteCond %{HTTP_USER_AGENT} !^.*(FeedBurner|FeedValidator) [NC] RewriteRule (^|/)feed http://feeds.feedburner.com/blog-de-laul [R=302,NC,L] </IfModule>
Augmenter le nombre de pages vues

Mesurer le succs dun blog son seul trafic nest pas suffisant. Le nombre de pages vues par visite est un autre indicateur trs important prendre en compte dans une analyse de performance. Un blogueur proposant de la publicit aura tout intrt pousser le visiteur consulter un maximum de pages. Sil fonctionne au CPC (Cot par clic), le nombre de clics sur une publicit dpend forcment du nombre de pages consultes. Sil est rmunr au CPM (Cot par mille), le blogueur reoit une certaine somme pour mille affichages dune publicit. Lintrt daugmenter le nombre de pages vues est dans ce cas encore plus vident. Diffrentes techniques et extensions permettent dy parvenir.
Mettre en place une pagination

La navigation par dfaut propose par WordPress repose sur les deux liens Articles plus anciens et Articles plus rcents. Une alternative, la pagination, consiste proposer des numros de pages pour naviguer parmi les rsultats.
Figure 1112
Google utilise un systme de pagination pour la consultation des rsultats de recherche.
Des tudes ayant prouv que la pagination incitait linternaute consulter plus de pages, le blogueur a tout intrt mettre ce systme en uvre. Lextension WP-Pagination est prvue pour rpondre ce besoin. Sa mise en place est hlas un peu complexe, dans la mesure o elle oblige le blogueur modifier des fichiers du thme. La rubrique Rglages>WP-Paginate sert paramtrer diffrents aspects de la pagination.

user 177 at Wed Nov 10 04:01:48 +0100 2010
285
WordPress 3
Figure 1113
Paramtrage des diffrents aspects de la pagination
La premire tape consiste trouver le template du thme responsable de laffichage des liens Articles plus anciens et Articles plus rcents, cest- dire celui qui fait appel aux fonctions previous_posts_link() et next_posts_link(). Il sagit de loop.php dans le cas du thme Twenty Ten. La seconde tape consiste modifier ce template en utilisant la rubrique Apparence>diteur et remplacer lancien systme de navigation par la fonction wp_paginate().
Version initiale de loop.php
<?php if ( $wp_query->max_num_pages > 1 ) : ?> <div id="nav-below" class="navigation"> <div class="nav-previous"><?php next_posts_link( X __( '<span class="meta-nav">←</span> Older posts', X 'twentyten' ) ); ?></div> <div class="nav-next"><?php previous_posts_link( X __( 'Newer posts <span class="meta-nav">→</span>', X 'twentyten' ) ); ?></div> </div> <?php endif; ?>
286
user 177 at Wed Nov 10 04:01:48 +0100 2010
Version modifie
<?php if ( $wp_query->max_num_pages > 1 ) : ?> <div id="nav-below" class="navigation"> <?php wp_paginate(); ?> </div> <?php endif; ?>
Figure 1114
Systme de pagination mis en uvre sur le thme Twenty Ten
Proposer des articles lis

La majorit des visiteurs dun blog ne consulte gnralement que larticle le plus rcent. Le blogueur doit, par consquent, trouver des moyens de les inciter prolonger leur visite en consultant dautres articles. La technique des articles lis est intressante : elle consiste proposer la fin dun article dautres articles du blog en rapport avec le thme abord. Une telle solution peut tre mise en place en installant lextension Yet Another Related Posts Plugin (YARPP). Une interface de configuration trs complte permet dindiquer les lments (catgories, mots-clefs, titre, contenu) prendre en compte dans lalgorithme dappariement. La prsentation ainsi que les intituls (par exemple Related posts) sont paramtrables dans cette mme interface (Rglages>Related Posts).
Figure 1115
Deux articles lis sont proposs.

user 177 at Wed Nov 10 04:01:48 +0100 2010
287
WordPress 3
Diviser larticle en parties

La division dun article en plusieurs parties est une excellente technique pour augmenter le nombre de pages vues. La mise en uvre dune telle prsentation est extrmement simple : le blogueur utilise lditeur HTML et spare chaque partie par la balise .
Figure 1116
La balise  permet de sparer les parties.
Figure 1117
Larticle est divis en quatre parties.
Laffiliation un site e-commerce

B http://www.amazon.fr
Invente par Amazon, laffiliation est une technique e-marketing ingnieuse qui repose sur le principe de lapport daffaires. Le principe est assez simple : Amazon permet des sites de devenir partenaires et de proposer eux-mmes des offres Amazon. Les internautes qui cliquent sur ces offres basculent sur le site dAmazon et peuvent ventuellement passer une commande. Amazon est alors en mesure de remonter jusqu
288
user 177 at Wed Nov 10 04:01:48 +0100 2010
laffili et de le rmunrer dun pourcentage pouvant aller jusqu 10 % du montant total de la commande.
De trs nombreux sites de vente en ligne proposent des politiques daffiliation. Rares sont en revanche ceux qui offrent des outils ergonomiques adapts aux blogueurs.
Devenir partenaire dAmazon

Linscription au programme daffiliation dAmazon peut tre ralise partir de ladresse suivante : partenaires.amazon.fr. Pour devenir partenaire, le blogueur doit disposer dun compte Amazon. Cette dmarche gratuite peut tre ralise en utilisant le lien Inscription GRATUITE !. La cration de compte ncessite de rpondre aux questions concernant le blog, son march, son trafic et ses sources de rmunration. Amazon demande galement les informations bancaires du partenaire afin de lui transmettre sa commission lorsquun certain plafond est atteint. Plusieurs mthodes sont offertes pour le rglement : les chques cadeaux, le virement et le chque. Cette troisime solution peut tre choisie ds lors que le partenaire dispose dau moins 50 euros de commissions. Cette limite ne slve qu 10 euros pour les deux premiers moyens de paiement. Une fois le compte cr, un identifiant daffili se terminant par -21 est associ au compte Amazon. Cet identifiant devra toujours tre plac dans les liens pointant vers les offres Amazon.
Gnration dun widget

Lintgration doffres Amazon au sein dun blog est simple. Amazon a dvelopp des outils pour rendre cette dmarche la plus facile possible pour ses affilis. Il sagit, la plupart du temps ,de choisir le format daffichage des offres, le nombre doffres et une catgorie de produits. Amazon propose diffrents types de widgets pour mettre en avant ses offres : carousels, playlists, etc. Chaque widget dispose dune interface de configuration associe pour modifier certains paramtres de prsentation et la catgorie des produits mis en avant. Il est essentiel de slectionner la catgorie la plus proche de lunivers du blog.

user 177 at Wed Nov 10 04:01:48 +0100 2010
289
WordPress 3
Figure 1118
Diffrents widgets proposs par Amazon
Figure 1119
Paramtrage du widget Bonnes Affaires
SOUS LE CAPOT Identifiant daffili

Tous ces widgets intgrent dans leur code une rfrence lidentifiant de laffili.
Une fois le widget paramtr, Amazon propose de gnrer un code HTML quil est possible dinsrer dans le blog, au sein dun billet ou dans la barre latrale.
user 177 at Wed Nov 10 04:01:48 +0100 2010
290
Figure 1120
La balise <OBJECT> correspond au code du widget.
Figure 1121
Widget Amazon plac dans la colonne latrale

user 177 at Wed Nov 10 04:01:48 +0100 2010
291
WordPress 3
Obtenir un lien vers un produit spcifique

Plutt que dutiliser des widgets proposant des produits sans cohrence avec le contenu du blog, le blogueur peut avec Amazon crer des liens vers des produits spcifiques. Ce mode de fonctionnement permet un blogueur de proposer systmatiquement lachat des produits qui sont voqus dans un article.
CONFIGURATION Barre doutils
La barre doutils Partenaires nest disponible que lorsque lutilisateur dispose dun compte partenaire et quil est authentifi.
Pour obtenir ces liens, le blogueur doit se rendre sur la page produit dAmazon et utiliser la barre doutils Partenaires situe en haut du navigateur.
Figure 1122
Barre doutils Partenaires
Le bouton Faire un lien vers cette page ouvre une fentre qui permet de paramtrer le lien et dobtenir le code HTML associ.
Figure 1123
Interface de paramtrage du lien
292
user 177 at Wed Nov 10 04:01:48 +0100 2010
Le code HTML peut ensuite tre intgr au contenu dun article en utilisant lditeur HTML.
Figure 1124
Le lien est directement plac dans le contenu de larticle.
Suivi
Laffiliation est impossible sans une transparence et une rigueur absolues de la part de laffilieur. Rien de plus simple en effet pour Amazon que de dire quun client X nest pas pass par le site dun affili avant dacheter. Ce genre de comportement serait cependant suicidaire de la part dAmazon qui a, au contraire, tout intrt ce que ses affilis fassent le plus de chiffre possible. Amazon propose par consquent des outils de reporting trs prcis, qui permettent laffili de savoir en permanence o en sont les commandes, les clics et les conversions. Ces informations sont prsentes sur la droite de longlet Accueil. Des rapports plus complets sont galement disponibles en cliquant sur longlet Rapports. Il devient alors possible de filtrer sur une certaine priode et de raliser des exports.
Devenir partenaire deBay

Il est possible de devenir partenaire deBay en crant un compte sur ebaypartnernetwork.com. En plus des renseignements habituels, le partenaire doit indiquer la mthode de reversement quil souhaite utiliser : compte bancaire classique ou compte PayPal. La mise disposition de cette dernire option nest pas tonnante lorsque lon sait queBay est propritaire de ce systme de paiement en ligne. Une fois linscription ralise, eBay vrifie que le nouveau partenaire est bien responsable du blog quil a indiqu. Ce contrle commence par lenvoi dun e-mail contenant un code unique qui doit ensuite tre enregistr dans un fichier portant le nom epndomain.txt, placer la racine du blog (avec un client FTP).
B http://ebay.fr B http://www.paypal.fr

user 177 at Wed Nov 10 04:01:48 +0100 2010
293
WordPress 3
La rubrique Outils>Widgets>Bannire personnalise permet de concevoir un widget qui peut tre plac dans la colonne latrale. Les rglages importants sont : la taille ; le programme (eBay FR) ; lidentifiant de la campagne ; le terme de recherche.
Figure 1125
Interface de configuration du widget eBay
Figure 1126
Le widget eBay prsente des produits en rapport avec le terme de recherche indiqu dans linterface de configuration.
294
user 177 at Wed Nov 10 04:01:48 +0100 2010
Une fois tous les champs obligatoires renseigns, la section Code gnr donne accs au code JavaScript placer dans la colonne latrale.
Autres sources de revenus

Articles sponsoriss
Sujet parfois tabou, la sponsorisation darticles est une pratique dsormais rpandue sur la blogosphre. Ayant peru limportance et linfluence de ce mdia auprs des jeunes et des cadres suprieurs, les marques ont largi le spectre de leurs relations presse en y incluant les blogs. Les blogueurs se retrouvent ainsi invits aux prsentations et reoivent les dossiers de presse. Les blogueurs peuvent alors adopter diffrentes attitudes en recevant ces offres : les ignorer ; en parler sils sont convaincus par le produit ; les critiquer sils nadhrent pas au concept ; diffuser linformation car ils y trouvent leur compte. Cette dernire possibilit, qui peut sembler choquante a priori, devient acceptable lorsquelle est ralise dans les rgles de lart. Indiquer clairement que larticle est la reprise dun communiqu de presse en utilisant le terme article sponsoris dans le titre, parmi les mots-clefs ou les catgories est une marque de transparence indispensable vis--vis dun lectorat souvent dsabus par le manque dobjectivit des mdias traditionnels. Le pourcentage darticles sponsoriss dans le flot darticles doit bien videmment rester suffisamment faible pour ne pas risquer daltrer limage du blog.
COMMUNICATION E-Relations Presse
Toutes les grandes agences de communication disposent aujourdhui dun ple spcialis dans la diffusion de communiqus (kits interactifs) auprs des blogueurs considrs comme influents.
TENDANCES Le blogueur la mode

Preuve incontestable des transferts dinfluence, les blogueurs en vue de la plante fashion (Tavi Gevinson, Bryan Boy, etc.) commencent obtenir les sacro-saintes places aux premiers rangs des dfils.
Figure 1127
Article sponsoris sur http://fr.mashable.fr

user 177 at Wed Nov 10 04:01:48 +0100 2010
295
WordPress 3
Recevoir des dons

La culture du don est un mouvement (Love money) trs ancr et rpandu sur le Web. Wikipdia prfre, par exemple, faire appel chaque anne la gnrosit de ses lecteurs plutt que de dgrader ses pages avec de la publicit. Dans le domaine du logiciel, de nombreux dveloppeurs se passent de licences commerciales en faisant le choix de solliciter une aide financire de leurs utilisateurs, comme cest le cas pour le logiciel gratuit Xming. Ce mode de fonctionnement permet dassurer une notorit et une diffusion maximales.
Figure 1128
Les utilisateurs de Xming qui ralisent une donation ont le privilge de profiter dune version plus jour.
Dans le cadre dun blog disposant dune communaut suffisamment importante, les dons peuvent reprsenter un revenu complmentaire non ngligeable.
Figure 1129
Le bouton Donate permet de faire un don lauteur du blog.
Figure 1130
Linterface PayPal permet de prciser le montant du don.
Cette solution est dautant plus intressante que le service de paiement en ligne PayPal rend sa mise en uvre extrmement simple. Une fois inscrit sur le site paypal.com, le blogueur peut accder la rubrique Dons en 296
user 177 at Wed Nov 10 04:01:48 +0100 2010
passant par longlet Solutions e-commerce. Il dispose alors dune interface pour personnaliser le don.
Figure 1131
Linterface permet, par exemple, de dfinir si le don est libre ou dun montant fixe.
Une fois le paramtrage termin, le bouton Crer le bouton permet de rcuprer le code HTML qui peut tre plac, laide du widget Text, en bas de la barre latrale.
Figure 1132
Ajout du bouton de don dans la barre latrale
Vendre des produits

De nombreuses extensions permettent de transformer un blog WordPress en une boutique e-commerce. Cette solution est particulirement intressante pour un blogueur qui souhaite mettre en vente quelques produits et qui na pas les moyens dinvestir dans le dveloppement dun site e-commerce ddi.
user 177 at Wed Nov 10 04:01:48 +0100 2010
B http://www.instinct.co.nz/e-commerce/
297
WordPress 3
Lextension la plus avance dans ce domaine est WP e-Commerce. Une fois cette extension installe et active, lespace dadministration se dote dune rubrique Products utilie pour enregistrer les produits mis en vente sur le site.
Figure 1133
Menu WP e-Commerce
Lextension tire parti de la colonne latrale en proposant de nombreux widgets. Latests products, pour mettre en avant les derniers produits ajouts la boutique ; Shopping cart, responsable de laffichage du panier ; Product categories, pour lister les diffrentes catgories associes aux produits.
Figure 1134
Le bouton Add To Cart permet dajouter larticle au panier.
298
user 177 at Wed Nov 10 04:01:48 +0100 2010
user 177 at Wed Nov 10 04:01:48 +0100 2010
chapitre
12
user 177 at Wed Nov 10 04:01:48 +0100 2010
Spam et scurit
SOMMAIRE
B Mettre jour WordPress
La scurit a longtemps t un point faible de WordPress. Il convient encore aujourdhui dtre vigilant et de mettre en uvre toutes les bonnes pratiques pour bien protger son blog.
B Se protger contre les pirates B Raliser une sauvegarde B Lutter contre le spam
MOTS-CLEFS
B scurit B spam B mot de passe B mise jour B sauvegarde B captcha B cryptographie B SSL B Akismet

user 177 at Wed Nov 10 04:01:48 +0100 2010
WordPress 3
Les virus informatiques navaient lorigine quun seul objectif : bloquer lordinateur de la victime. Depuis quelques annes, les pirates ont chang de terrain de jeux pour sattaquer au Web. Lintrt pour eux est bien suprieur, car leurs exactions sont dsormais synonymes de profits. Plutt que de dtruire les serveurs sur lesquels ils se sont introduits, les pirates du Web prfrent y installer des outils espions pour les contrler distance. Ces serveurs compromis (qualifis de zombies ) peuvent alors tre utiliss pour relayer des millions de-mails (spams) ou lancer des attaques contre des sites ou des infrastructures informatiques (attaques par dni de service).
Scurit : protger son blog contre les attaques

Les pirates nidentifient pas leurs proies de faon laborieuse en testant manuellement les serveurs les uns aprs les autres. Ils prfrent utiliser des outils capables de tester en quelques minutes des centaines de vulnrabilits sur des milliers de serveurs. Les pirates ne prtent finalement aucune attention aux serveurs et aux sites auxquels ils sattaquent. Tout serveur sur le Web peut ainsi devenir leur cible.
MISES JOUR WordPress.com
Les utilisateurs de WordPress.com nont pas se soucier des problmatiques de mise jour dans la mesure o ces dernires sont ralises automatiquement.
Esprer passivement que le blog ne sera pas la cible dune attaque est illusoire. Une attitude plus constructive consiste mettre en uvre la meilleure des protections : maintenir son installation de WordPress jour et sauvegarder rgulirement ses donnes. ce titre, il est vivement conseill deffectuer toutes les mises jour existantes, car chacune delles apporte son lot de corrections et dvolutions.
Mettre jour un blog et ses extensions

Le blogueur peut trs facilement vrifier que son blog est jour en accdant la rubrique Tableau de bord>Mises jour. Elle regroupe les mises jour du moteur ainsi que celles des extensions et des thmes. Ds quune mise jour du moteur est disponible, WordPress affiche automatiquement un message dalerte sur tous les crans de lespace dadministration. Le lien Pensez faire la mise jour amne vers lcran Tableau de bord>Mises jour.
302
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 121
Linstallation de WordPress est jour.
Figure 122
Une mise jour est disponible.
Figure 123
La section Aujourdhui indique quune mise jour est disponible.

user 177 at Wed Nov 10 04:01:48 +0100 2010
303
12 Spam et scurit
WordPress 3
Figure 124
Le moteur, deux extensions ainsi quun thme peuvent tre mis jour.
CONSEIL Migration 2.X vers 3

Une sauvegarde de donnes est dautant plus conseille dans le cas dune mise jour majeure (par exemple, lors du passage de WordPress 2.X WordPress 3).
ASTUCE Avertissements
La page suivante propose aux blogueurs deux moyens complmentaires dtre avertis de la disponibilit de nouvelles versions de WordPress : une lettre de diffusion et un flux RSS spcifiques.
B http://wordpress.org/download/
WordPress conseille trs juste titre de sauvegarder les donnes avant de procder la mise jour (les problmatiques de sauvegarde sont dtailles ci-dessous). Une fois cette sauvegarde effectue, la mise jour est ralise dun simple clic sur le bouton Mettre jour automatiquement (version fr_FR sil sagit dune version franaise de WordPress). Lopration est assez longue et ne doit surtout pas tre interrompue : il convient par consquent de ne pas changer de page et de ne pas cliquer sur les boutons Arrter ou Actualiser du navigateur. Les mises jour de thmes et dextensions sont tout aussi importantes, dans la mesure o une faille de scurit dans un thme ou une extension peut faire autant de dgts quune faille du moteur.
304
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 125
WordPress affiche un message de confirmation prsentant les oprations ralises pendant la mise jour.
Figure 126
Mise jour de plusieurs extensions
Lorsquune extension dispose dune nouvelle version, un indicateur apparat au niveau du menu Extensions. Lextension prime est accompagne dun message davertissement ainsi que de deux liens permettant de visualiser la page de lextension et de la mettre jour.
Figure 127 Sept mises jour dextensions
sont disponibles.
Figure 128
Lextension Akismet peut tre mise jour.

user 177 at Wed Nov 10 04:01:48 +0100 2010
305
12 Spam et scurit
WordPress 3
Figure 129
Longlet Changelog permet de suivre les volutions de lextension.
Sauvegarder ses donnes

Un principe essentiel de linformatique consiste raliser des sauvegardes rgulires de ses donnes. Un blog, qui reprsente une somme trs importante de travail, ne doit surtout pas droger cette rgle.
Figure 1210
Sauvegarde de lintgralit des fichiers du blog
Deux types de donnes sensibles doivent plus particulirement tre sauvegardes : le contenu de la base de donnes (articles, pages, menus, catgories, tags, etc.) ; 306
user 177 at Wed Nov 10 04:01:48 +0100 2010
les fichiers transfrs sur le serveur (images, vidos, thmes, exten-
sions, etc.).
La sauvegarde des fichiers est une opration simple. En utilisant son client FTP, le blogueur peut rcuprer sur son disque dur lintgralit des fichiers contenus dans le rpertoire dinstallation de WordPress. Il existe deux mthodes pour sauvegarder les donnes de la base.
Loutil dexport WordPress

La solution la plus simple pour sauvegarder le contenu de la base consiste passer par linterface dexport Outils>Exporter. Le bouton Tlcharger le fichier dexport dclenche le tlchargement dune archive de lintgralit des contenus : articles, pages, commentaires, catgories, mots-clefs. Des filtres permettent toutefois de restreindre ltendue de la sauvegarde.
COMPATIBILIT Format
Le fichier dexport, structur en XML, est un format spcifique WordPress.
Figure 1211
Export des donnes au format XML
Depuis la version 3 de WordPress, la restauration des donnes ncessite linstallation de lextension WordPress Importer. Une fois loption WordPress slectionne dans la rubrique Outils>Importer, un formulaire permet dimporter larchive prcdemment tlcharge.
Figure 1212
Importation dun fichier de sauvegarde WordPress Groupe Eyrolles, 2009

user 177 at Wed Nov 10 04:01:48 +0100 2010
307
12 Spam et scurit
WordPress 3
La sauvegarde manuelle
Cette solution est lgrement plus complexe mais prsente lavantage de sauvegarder absolument toute la base de donnes, quil sagisse des contenus (articles, pages, commentaires, etc.) ou des lments plus atypiques tels que les paramtres de configuration ou les comptes dutilisateurs. Une restauration du blog lidentique devient alors possible. Ce type de sauvegarde repose sur lutilisation de phpMyAdmin. Laccs cet outil en ligne fait partie des lments transmis par lhbergeur au moment de louverture du compte.
RAPPEL Quelle base de donnes ?
La base de donnes lie au blog est celle qui avait t indique au moment de linstallation de WordPress.
La colonne de gauche prsente toutes les bases de donnes auxquelles le blogueur a accs. La slection de la base lie au blog affiche sur la droite la liste des tables quelle contient.
PIGE Exporter une base de donnes

Le menu dexport de base de donnes nest prsent que si une base (et non une table) est slectionne dans le menu de gauche.
Figure 1213
Figure 1214
Ouverture de phpMyAdmin
Tables utilises par WordPress
Le menu horizontal situ au-dessus de la liste propose un onglet Exporter.
Figure 1215
Onglet Exporter
Diffrents paramtres doivent tre adapts avant de procder lexport. Toutes les tables commenant par wp_ doivent tre slectionnes. Le mode dexport privilgi est SQL. Dans lespace Options, les cases Structure, Ajouter DROP TABLE/VIEW/PROCEDURE/FUNCTION/EVENT et Donnes doivent tre coches alors que Ajouter IF NOT EXISTS doit tre dcoch. La case cocher Transmettre, dans le bloc du bas, doit galement tre coche et la compression zipp active. Loutil permet alors de rcuprer une archive complte de la base. 308
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 1216
Figure 1217
Slection des tables et du format dexport
Prcisions sur lexport
Figure 1218
La compression des donnes acclre le transfert.
Lopration dimport est beaucoup plus simple. Longlet Importer du menu horizontal donne accs au formulaire dimportation qui permet de slectionner le fichier qui avait t gnr au moment de lexport. Limportation est dclenche en cliquant sur le bouton Excuter situ en bas du formulaire.

user 177 at Wed Nov 10 04:01:48 +0100 2010
309
12 Spam et scurit
WordPress 3
Figure 1219
Tlchargement de larchive
Autres pistes
SAVOIR Clefs
Le remplacement des quatre clefs de scurit prsentes dans le fichier de configuration wp-config.php (AUTH_KEY, NONCE_KEY, SECURE_AUTH_KEY, LOGGED_IN_KEY) nest plus ncessaire depuis la version 3 de WordPress.
Dautres techniques peuvent tre mises en uvre pour renforcer la scurit du blog.
Identifiant et mot de passe

Un autre principe de scurit trs important sur le Web consiste viter les mots de passe faciles deviner. Sachez quun mot de passe ne doit jamais correspondre un terme du langage courant : mot du dictionnaire, prnom, marque, etc. Il doit idalement tre compos dau minimum huit caractres et contenir des caractres spciaux tels que des chiffres ou des signes de ponctuation. Un utilisateur a toujours la possibilit de modifier son mot de passe en accdant la rubrique Utilisateurs>Votre profil. Un indicateur visuel permet de se rendre compte de la relative sret du nouveau mot de passe. Le but est bien videmment dobtenir une jauge verte qui indique un niveau de sret lev.
LE SAVIEZ-VOUS ? Les dictionnaires des pirates

Des dictionnaires contenant des millions de combinaisons de lettres gnralement utilises comme mot de passe circulent sur Internet. Munis de tels fichiers, des pirates ralisent des attaques dites par force brute pour tenter, de faon automatique, de deviner le mot de passe de la victime.
Figure 1220
Le niveau de scurit va de Trs faible (rouge) Forte (vert).
Depuis la version 3, WordPress permet, ds linstallation, de spcifier lidentifiant de ladministrateur principal du blog. Ce changement est important, car trs peu de blogueurs prenaient auparavant le temps de modifier lidentifiant propos par dfaut : admin. En choisissant un identifiant sortant de lordinaire, le blogueur rend dautant plus difficile toute attaque visant usurper ses identifiants de connexion. 310
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 1221
Le blogueur peut choisir son identifiant ds la phase dinstallation.
Utiliser le protocole SSL

Certaines adresses de sites commencent par https:// plutt que par un traditionnel http://. Ce mode scuris repose sur lutilisation du protocole SSL (Secure Sockets Layer) pour crypter les changes entre le navigateur et le serveur web. Sans SSL, un pirate qui se trouverait sur le mme rseau que le blogueur pourrait espionner ces changes et observer lidentifiant et le mot de passe. Avec une couche SSL, le pirate se retrouve dans lincapacit de procder ce type dattaque. La mise en uvre du SSL impose : de disposer dun certificat SSL ; une modification au niveau de la configuration du serveur HTTP (Apache). Ces interventions, plutt dlicates, sont gnralement confies lhbergeur.
Figure 1222
EN PRATIQUE Acheter un certificat

Un certificat SSL est payant ; des sites, tels que ceux cits ci-aprs, proposent des certificats standards autour de 100 euros.
B http://www.verisign.com B http://www.thawte.com B http://tbs-certificats.com
Les navigateurs affichent un cadenas lorsque le site dispose du SSL.
Lutter contre le spam

Comme il est mentionn au chapitre 10, le nombre de liens pointant vers un site est extrmement important pour obtenir un bon ranking et un bon rfrencement. Lune des activits favorites des rfrenceurs spammeurs consiste chercher sur le Web tous les emplacements pouvant accueillir leurs liens. Les commentaires de blogs font partie de leurs cibles. WordPress a ragi cette drive en faisant en sorte que ces liens soient automatiquement ignors par les moteurs de recherche.
user 177 at Wed Nov 10 04:01:48 +0100 2010
LE SAVIEZ-VOUS ? nofollow
Un lien peut tre ignor par un moteur de recherche lorsquil dispose de lattribut rel="nofollow".
311
12 Spam et scurit
WordPress 3
Figure 1223
Linterface de dpt de commentaire permet lauteur dindiquer son site web.
Figure 1224
Le pseudonyme est cliquable et amne vers le site renseign dans le formulaire de commentaire.
Au-del de laspect maillage pour le rfrencement, un commentaire est galement une tribune pour un spammeur qui souhaite faire de la publicit pour une offre commerciale. Des robots informatiques sont spcialement conus pour ajouter de faon automatique un mme message sur des centaines de milliers de blogs. Le blogueur doit rester extrmement vigilant face cette menace et mettre en uvre toutes les techniques possibles pour protger son blog.
Paramtrage des commentaires

Une des techniques les plus triviales pour dtecter le caractre douteux dun contenu consiste vrifier si des termes inappropris sont utiliss. Par exemple, si le mot viagra apparat dans un commentaire, il sagit trs certainement dun spam. 312
user 177 at Wed Nov 10 04:01:48 +0100 2010
La rubrique Rglages>Discussions donne la possibilit au blogueur de renseigner deux listes de mots-clefs inappropris (blacklist). La premire passe le statut du commentaire en modrer et la seconde en Indsirable.
SAVOIR Le franais facilite

la lutte contre le spam
Vis--vis du spam, le fait dtre crit en franais est un avantage pour un blog. La plupart des messages de spam tant rdigs en anglais, il est possible dindiquer normment de termes anglais sans prendre trop de risque derreur de dtection (ou faux positifs).
Cette interface propose une seconde heuristique de dtection de spam : si au moins deux liens sont dtects dans un commentaire, celui-ci est pass en modrer. Cette valeur de deux est paramtrable. Dans le cadre dune modration a posteriori, un schma assez pertinent consiste ne publier automatiquement un commentaire que lorsque son auteur a dj vu un de ses commentaires pralablement accept. Les spams sont en effet dposs pour la plupart par des robots qui, de par leur nature, sont incapables de proposer un commentaire cohrent vis--vis de larticle.
Figure 1225
Diffrents paramtres permettant dinfluencer la lutte contre le spam
Lextension Akismet
Akismet est une extension dveloppe par Automattic qui permet de lutter trs efficacement contre le spam. Elle est incluse par dfaut dans WordPress depuis la version 2.0. Lextension ncessite une clef API pour fonctionner. Une fois active, lextension Akismet transmet automatiquement le contenu de chaque nouveau commentaire sur un serveur central, qui effectue une batterie de tests et retourne son jugement. Sil est dtect comme spam, le message est automatiquement marqu comme Indsirable. La
user 177 at Wed Nov 10 04:01:48 +0100 2010
EN PRATIQUE Un bouclier efficace

Akismet dtecte approximativement 17 millions de spams par jour.
CONSEIL Prudence
Il est prfrable dattendre un peu avant dactiver la suppression automatique des spams par Akismet. La faon de rdiger de vos lecteurs et Akismet ne font peut tre pas bon mnage.
313
12 Spam et scurit
WordPress 3
rubrique Extensions>Configuration Akismet permet de modifier ce comportement et de faire en sorte que le message soit directement supprim.
Figure 1226
Interface de configuration dAkismet
Captcha
B http://www.google.com/recaptcha
Lajout dun captcha au formulaire de dpt de commentaire est une autre technique efficace pour protger le blog contre le spam. Le service reCAPTCHA est une solution de rfrence dans ce domaine. En plus de sa grande performance, il a lavantage de disposer de deux fonctionnalits particulirement intressantes : laccessibilit pour les malvoyants grce un systme de lecture des lettres prsentes dans limage ; la possibilit dobtenir une nouvelle image lorsque cette dernire nest pas suffisamment lisible. Lextension WP-reCAPTCHA fournit la mise en uvre de ce type de protection. Une fois installe et active, lextension requiert lindication de deux clefs, qui peuvent tre obtenues gratuitement en suivant le lien free reCAPTCHA key.
TECHNOLOGIES reCAPTCHA et Google

En faisant lacquisition de reCAPTCHA en 2009, Google a pu amliorer sensiblement loutil de reconnaissance optique de caractres (OCR) utilis notamment dans le cadre des projets Google Livres et de Google Documents. Quoi de mieux en effet que lavis de millions dtres humains sur des mots non reconnus par un logiciel ?
314
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 1227
Interface de configuration de lextension reCAPTCHA
Linterface de configuration permet : de modifier la langue du captcha (Language) ; de faire en sorte que les utilisateurs authentifis (ou disposant dun rle particulier) naient pas renseigner le captcha (Comment Options).
Figure 1228
Formulaire de dpt de commentaire protg par un captcha

user 177 at Wed Nov 10 04:01:48 +0100 2010
315
12 Spam et scurit
chapitre
13
user 177 at Wed Nov 10 04:01:48 +0100 2010
Amliorer les performances
SOMMAIRE
B Politique de cache
La satisfaction dun nouveau visiteur dpend de faon non ngligeable de la vitesse de chargement des pages du blog. Or, utilis dans le cadre dun blog fort trafic, WordPress peut vite souffrir de certaines lenteurs. Voyons les diffrentes techniques qui permettent damliorer ses performances.
B Compression de donnes B Optimisation PHP et MySQL

MOTS-CLEFS
B performance B optimisation B base de donnes B compression de donnes B cache

user 177 at Wed Nov 10 04:01:48 +0100 2010
WordPress 3
EN CHIFFRES Rpercussions de la vitesse de

chargement sur le trafic
Amazon : une augmentation de

100 millisecondes provoque une baisse des ventes de 1 %. Yahoo! : une augmentation de 400 millisecondes entrane une chute de trafic de 5 9 %. Google : 500 millisecondes peuvent entraner jusqu 20 % de recherches en moins.
une poque o linstantanit est essentielle, les internautes ne supportent pas de patienter pour accder un contenu. Les statistiques cicontre permettent de constater quel point loptimisation de la vitesse daffichage peut avoir des rpercussions importantes. Le rfrencement du blog peut galement ptir dune lenteur daffichage. Cest pourquoi Google prend dsormais cet aspect en compte pour calculer la qualit dun site en termes de ractivit. Il ne sagit pas dans ce chapitre dentrer dans les dtails techniques lis ces optimisations, mais de prsenter les diffrentes techniques existantes. Ces oprations tant le plus souvent complexes, il est vivement conseill de faire appel lhbergeur pour raliser ces modifications de paramtrage.
Le systme de cache
Toute page web est crite en langage HTML. Un webmaster qui souhaite concevoir une page aura la possibilit dcrire sa page directement en HTML dans un diteur ou de passer par un logiciel de composition de pages web tel quAdobe Dreamweaver.
Figure 131
Interface de Dreamweaver
Envisageable dans le cadre de petits sites vnementiels ou personnels, la conception manuelle de pages devient tout fait inadapte pour des sites disposant de milliers de pages. 318
user 177 at Wed Nov 10 04:01:48 +0100 2010
Les sites dynamiques

Cest ce moment quintervient le couple le plus sduisant du web : MySQL et PHP. MySQL est un serveur de bases de donnes ; son rle est denregistrer et de restituer des donnes de la faon la plus rapide possible. Dans le cadre de WordPress, MySQL stocke les diffrents contenus du blog : articles, catgories, mots-clefs, etc. Chaque type dinformation est enregistr dans une table spcifique qui peut tre assimile un classeur Excel. Un classeur reprsente un type de donnes (par exemple, les articles) et les colonnes dsignent les attributs des articles : leur titre, leur contenu, leur description. Il ne sagit en aucun cas de stocker des informations lies la prsentation. Limportant est, par exemple, denregistrer le titre dun article et non pas de savoir sil apparat en italique ou en gras. Le langage de programmation PHP intervient, quant lui, pour faire la liaison entre les donnes stockes dans la base de donnes et le code HTML responsable de laffichage de la page. Pour afficher larticle dont le numro est 39, linternaute renseigne dans son navigateur lURL suivante : http://monblog.com/wordpress/?p=39. Le navigateur interroge, en utilisant le protocole HTTP, le serveur monblog.com pour lui demander de lui retourner la page /wordpress/?p=39. Un script PHP sexcute au niveau du serveur et dtecte quon lui demande dafficher un article dont lidentifiant est 39 (p=39). Il se connecte alors la base de donnes associe au blog, slectionne la table contenant les articles (wp_posts) et rcupre les diffrentes informations associes la ligne 39 (titre, contenu, auteur, etc.). Le script construit la page partir de ces informations et retourne le contenu HTML. Le navigateur reoit alors ce contenu HTML et se trouve en mesure dafficher la page. Ce modus operandi faisant intervenir des scripts et une base de donnes a lavantage de rendre les sites beaucoup plus volutifs. Un changement intgral de prsentation du site se limite ainsi la modification du script responsable de la gnration du HTML. Le nombre darticles publis na aucune incidence. Les donnes stockes dans la base restent les mmes et nont pas tre modifies. Cette faon denvisager une sparation claire entre le contenu et la prsentation est devenue un des fondements du Web moderne. On parle alors de site dynamique, par opposition au site statique.

user 177 at Wed Nov 10 04:01:48 +0100 2010
319
13 Amliorer les performances
WordPress 3
Le principe du cache
Les sites dynamiques ont linconvnient dtre beaucoup plus gourmands en ressources au niveau du serveur. Alors quavec un site statique le serveur se contente de retourner directement le contenu de la page HTML, il doit, dans le cadre dun site dynamique, se connecter la base de donnes et construire la page pour chaque requte. La mise en uvre dun systme de cache est un moyen dallger considrablement la charge du serveur. Il sagit dviter au script PHP davoir reconstruire systmatiquement les mmes pages HTML. Le principe est le suivant : lorsque le script est excut pour gnrer la page associe larticle X, il commence par regarder si un fichier de cache correspondant cet article existe : si cest le cas, le script rcupre le contenu et le retourne directement au navigateur ; dans le cas contraire, le script gnre la page et en enregistre une copie pour pouvoir lutiliser lors dun prochain appel. Ce fichier intermdiaire enregistr sur le disque est qualifi de fichier de cache . Lorsquil est prsent, lconomie est double puisque le script na pas besoin de se connecter la base de donnes et de construire une page. Ce principe est dautant plus intressant dans le cadre dun blog qui ne comporte gnralement pas plus de quelques milliers darticles avec un accs concentr sur les deux ou trois articles les plus rcents. Appliquer un systme de cache ne se limite bien videment pas la mise en cache des seuls articles. Toutes les pages du blog doivent pouvoir en profiter. Bas sur un principe simple, un systme de cache est en ralit extrmement complexe raliser. Il convient en effet de prendre en compte le fait quun article qui tait disponible peut trs bien disparatre au bout dun certains temps : il peut avoir t supprim ou sa visibilit avoir t passe en Priv. Ces changements ont lieu au niveau de la base de donnes et le systme de cache, qui vite de sy connecter, risque de continuer fournir un contenu qui ne devrait plus tre en ligne. Le systme doit par consquent tre suffisamment intelligent pour invalider les fichiers de cache afin de maintenir une cohrence entre les pages du blog et la base de donnes.
ALTERNATIVES Gestion du cache

Deux autres extensions mritent dtre mentionnes : Hyper Cache et W3 Total Cache. Cette dernire va plus loin que la seule mise en cache, en implmentant un grand nombre de techniques permettant dacclrer laffichage de pages : cache HTTP (ETag), combinaison et minimisation des fichiers JavaScript et CSS.
Installer un gestionnaire de cache

WordPress dispose dun grand nombre dextensions permettant de mettre en uvre une politique de cache. Le gestionnaire le plus plbiscit lheure actuelle est WP Super Cache.
user 177 at Wed Nov 10 04:01:48 +0100 2010
320
Une fois lextension installe, un message indique quil convient de se rendre dans la rubrique Rglages>WP Super Cache pour activer vritablement la gestion de cache.
Figure 132
Avertissement
Le statut de WP Super Cache doit tre pass On pour devenir fonctionnel. Le changement de paramtrage est pris en compte en activant le bouton Update Status. Une fois le statut mis jour, linterface propose un bouton permettant de mettre jour les rgles de rcriture (Rewrite Rules).
RCRITURE Fichier .htaccess

Les rgles de rcriture dURL ncessitent la prsence dun fichier .htaccess la racine du blog. Ce fichier est gnralement cr en procdant un enregistrement dans la rubrique Rglages>Permaliens.
Figure 133
Activation du cache
Figure 134
Mise jour des rgles de rcriture
DTAIL TECHNIQUE
Emplacement des fichiers de cache
Les fichiers de cache sont stocks dans wpcontent/cache. Ils portent des noms tels que wp-cache3f2abc8e6a099d3913f37e423e1f7b71. html et contiennent bien lintgralit du contenu HTML de la page.
Comme indiqu plus haut, la gestion du cache peut entraner des incohrences au niveau de la prsentation du blog. La rubrique Cache Contents dispose dun bouton Delete Cache pour supprimer tous les fichiers de cache afin de repartir sur une version actualise. La suppression de lextension WP Super Cache ncessite de modifier le fichier wp-content/plugins/wp-super-cache/uninstall.php. La constante UNINSTALL_WPSUPERCACHE doit contenir une valeur non vide (par exemple define( 'UNINSTALL_WPSUPERCACHE', '1' )).
UN PEU DHISTOIRE Constante ENABLE_CACHE

Avant la version 2.5, WordPress disposait dun systme intgr de cache qui pouvait tre activ en ajoutant la directive de configuration define('ENABLE_CACHE', true); dans le fichier wp-config.php prsent la racine du rpertoire WP.

user 177 at Wed Nov 10 04:01:48 +0100 2010
321
WordPress 3
Figure 135
Statistiques
La compression de donnes
Le temps de chargement dune page dpend dune quantit trs importante de facteurs : les performances de lordinateur de linternaute ; la rapidit de la liaison entre linternaute et le serveur ; la complexit de la page (structure HTML, JavaScript) ; le poids de la page ; la quantit de fichiers lis la page (images, CSS, JavaScript) ; la puissance du serveur. Le poids de la page, cest--dire la quantit dinformations transfrer entre le serveur et le client, est un lment sur lequel le blogueur peut directement influer. Pour afficher une page, le navigateur envoie une requte au serveur, qui lui rpond en lui retournant le contenu de la page. Ce contenu correspond au code HTML de la page et diffrentes informations lies au protocole HTTP : les en-ttes HTTP. Un des en-ttes peut indiquer que le contenu envoy par le serveur est compress. En recevant cet entte, le navigateur comprend quil doit par consquent dcompresser le contenu quil a reu avant de lafficher. Cette technique est particulirement intressante, car le temps de transfert des donnes entre le serveur et le navigateur reprsente un pourcentage important du temps de chargement global dune page. En transfrant moins de donnes, le temps de chargement se trouve rduit.
user 177 at Wed Nov 10 04:01:48 +0100 2010
DTAIL TECHNIQUE Compression de texte

Les donnes compresses tant textuelles, le taux de compression se retrouve particulirement lev et la quantit de donnes transfrer peut tre rduite dau moins 60 % !
322
Installer le mod_deflate
Lactivation de la compression des pages (voir chapitre 3, page 60) est gnralement de la responsabilit de lhbergeur. Sil feint de ne pas comprendre, lvocation du terme mod_deflate devrait mettre tout le monde daccord.
TECHNIQUE Activation de mod_deflate
Lutilisateur averti pourra activer le mod_deflate en plaant les directives ci-dessous dans le fichier de configuration de Apache ou dans le virtualhost associ au blog. <IfModule !mod_deflate.c> LoadModule deflate_module modules/mod_deflate.so </IfModule> <IfModule !mod_setenvif.c> LoadModule setenvif_module modules/mod_setenvif.so </IfModule> AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript BrowserMatch "MSIE [456]" gzip-only-text/html DeflateCompressionLevel 5
Contrler le bon fonctionnement de la compression

Tout le processus de compression-dcompression tant ralis de faon transparente, il est important de contrler quil est bien actif. Cette vrification peut tre ralise en utilisant lune des extensions Firefox prfres des dveloppeurs web : Firebug. Cette dernire sinstalle partir du site http://getfirebug.com. Une fois lextension installe et Firefox redmarr, Firebug peut tre activ en cliquant sur le petit insecte (bug en anglais) prsent en bas du navigateur. Un panneau souvre alors en bas du navigateur. Longlet qui nous intresse dans le cas prsent est Rseau. Il doit tre activ avant sa premire utilisation, en cliquant sur la petite flche prsente droite de lintitul. La page doit tre rafrachie afin dafficher les diffrentes requtes changes entre le navigateur et le serveur. Le bouton HTML (dans la barre horizontale prsente sous les onglets) filtre la liste et naffiche que la requte sur la page HTML elle-mme.
Figure 136
Cet insecte est le symbole de Firebug.
Figure 137
Panneau Firebug

user 177 at Wed Nov 10 04:01:48 +0100 2010
323
WordPress 3
ATTENTION Performance
Veillez fermer le panneau Firebug lissue de son utilisation car son fonctionnement ralentit de faon consquente la vitesse daffichage des pages.
Un clic sur lURL (par exemple GET numeros) fait apparatre diffrents dtails sur la requte. La compression des donnes est active partir du moment o len-tte de rponse contient Content-Encoding : gzip.
Figure 138
En-ttes de la rponse
T Interprt versus compil
Les optimisations de PHP

Le langage PHP est un langage interprt. Cela signifie que pour chaque excution dun script, linterprteur PHP doit convertir le script dans un langage bas niveau intelligible par le microprocesseur. Cette phase dite dinterprtation reprsente un pourcentage non ngligeable de la dure dune excution. Cela est dautant plus regrettable quelle est ralise des millions de fois dune faon absolument identique. Le cache dopcode est une technique volue qui permet damliorer cette situation. Le principe consiste mettre en cache la version interprte du script PHP. Lorsque le script est modifi, une nouvelle interprtation a automatiquement lieu et le nouvel opcode crase lancien. Diffrents moteurs de cache dopcode existent sur le march : XCache, eAccelerator et APC. Ce dernier est vivement conseill du fait de ses performances et de sa communaut de dveloppeurs trs active. APC peut tre paramtr pour utiliser la mmoire du serveur plutt que le disque dur pour stocker lopcode. Cela est particulirement pertinent lorsque lon sait quun accs en RAM est bien plus rapide quun accs sur le disque dur. La mise en uvre du moteur APC est ralise au niveau du serveur. Lhbergeur doit la fois installer une extension de PHP et ajouter des directives dans le fichier de configuration php.ini.
Les langages interprts (PHP, Python, Ruby) sopposent aux langages compils (C, C++). Dans le cadre dun langage compil, les sources du programme sont convertis une fois pour toutes en une reprsentation binaire qui pourra tre directement excute par le processeur. Plus performante, cette faon doprer souffre de nombreux inconvnients : lourdeur du dveloppement, non portabilit (un binaire Windows ne fonctionne pas sur Mac).
CONSEIL Limiter les extensions

Une requte est dautant plus rapide que la quantit de code interprter est faible. Il est par consquent vivement conseill de dsactiver les extensions et widgets inutiliss.
TECHNOLOGIES APC et PHP6

Autre avantage non ngligeable, APC sera inclus par dfaut dans PHP6.
CONSEIL Mise jour de PHP

Les performances samliorant de version en version, il est vivement recommand de toujours installer la dernire version de PHP.
Amliorer les performances de MySQL

Lorsque le blog ne dispose pas dun systme de cache, chaque affichage de page ncessite une requte la base de donnes. Tous les moyens sont
user 177 at Wed Nov 10 04:01:48 +0100 2010
324
bons pour faire en sorte que lexcution de ces requtes soient la plus rapide possible.
Optimisation des tables

force de modifications, dajouts et de suppressions, les tables dune base de donnes voient leurs performances diminuer. Loutil phpMyAdmin permet en quelques clics doffrir une nouvelle jeunesse toutes ces tables soumises rude preuve. Une fois authentifi phpMyAdmin, la premire tape consiste slectionner sur la gauche la base de donnes associe au blog et cocher toutes les tables WordPress (qui commencent gnralement par wp_). Loption Optimiser la table situe dans le menu Pour la slection doit tre slectionne avant dactiver le bouton Excuter.
PERFORMANCES Quelles tables ont besoin
dtre optimises ?
Le lien Dtails prsent dans longlet Structure dune table permet de vrifier si la table a besoin dtre optimise. Si lencart Espace utilis affiche une ligne avec des lments rouges, cest que la table ne se trouve pas dans un tat optimal. phpMyAdmin est suffisamment bien pens pour vous proposer directement le lien Optimiser la table.
Figure 139
Toutes les tables slectionnes seront optimises.
Figure 1310
Loptimisation sest bien droule.

user 177 at Wed Nov 10 04:01:48 +0100 2010
325
WordPress 3
Mise en cache des requtes

Le serveur de bases de donnes MySQL dispose dun mode lui permettant de mettre en cache les rsultats des requtes SQL. Cette fonctionnalit est en mesure daugmenter les performances de MySQL de faon tout fait impressionnante. Cette option, qui consomme beaucoup de mmoire, nest gnralement pas active par dfaut par les hbergeurs. Il est possible de vrifier si le serveur est paramtr de faon tirer parti de cette fonctionnalit en utilisant loutil phpMyAdmin. Longlet Variables prsent sur la page daccueil liste les diffrentes variables de configuration du serveur MySQL. Les deux variables contrler dans le cas prsent sont query_cache_type et query_cache_size.
Figure 1311
Variables MySQL dans phpMyAdmin
doit contenir la valeur ON ; doit, quant elle, avoir une valeur diffrente de 0. titre dexemple, une valeur de 32000000 signifie que 32 Mo de mmoire vive (RAM) seront utiliss pour stocker les rsultats des requtes. Ces variables doivent tre modifies par lhbergeur dans le fichier my.cnf.
query_cache_type query_cache_size
La
variable
Le protocole PuSH
Pendant longtemps, les moteurs de recherche de blog et les agrgateurs de flux ne pouvaient contrler la mise jour dun flux RSS quen se connectant au blog. Ce processus, dans le cadre duquel un consommateur fait des requtes auprs du producteur, nest absolument pas efficace dans le cas dun blog. Des milliers de requtes sont ralises, quun nouvel article soit publi ou non. Il sagit dune communication en mode Pull (ou tirer ).
326
user 177 at Wed Nov 10 04:01:48 +0100 2010
Pour des plates-formes de blogs telles que WordPress.com ou Blogger.com, cette situation est dsastreuse dans la mesure o ce sont des dizaines de millions de requtes qui sont ralises pour rien. cette chelle, le gaspillage de ressources et de bande passante est dramatique. Pour amliorer la situation, Google a travaill sur un protocole ouvert qui permet aux blogs davertir (ping) eux-mmes les lecteurs ds quun article est publi. Cette faon doprer est qualifie de mthode Push (du verbe anglais signifiant pousser ). Le protocole PubSubHubbub (galement appel PuSH) est dcrit sur le site http://code.google.com/p/pubsubhubbub/.
CONSEIL Frquence de mise jour

Les flux peuvent indiquer leur frquence de mise jour, ce qui est recommand par la Ntiquette. Nombre de consommateurs ne respectent cependant pas du tout cette indication.
Figure 1312
Logo PubSubHubbub
Lextension PuSHPress permet au blog de disposer de ce protocole. Une fois lextension installe et active, le flux RSS du blog intgre bien la balise indiquant que le blog est en mesure de grer le protocole PuSH.
TECHNOLOGIE
PuSH, une technologie encore nouvelle
Tous les consommateurs de flux ne grent pas ce protocole. Ils continueront par consquent vrifier ltat du flux comme avant.
Figure 1313
Dtail du flux RSS

user 177 at Wed Nov 10 04:01:48 +0100 2010
327
chapitre
14
user 177 at Wed Nov 10 04:01:48 +0100 2010
Dvelopper sous WordPress
SOMMAIRE
B Dvelopper une extension
WordPress est un moteur ouvert qui offre la possibilit aux dveloppeurs dajouter des fonctionnalits sous la forme dextensions, de widgets et de thmes. Sans rentrer dans les dtails avancs en dveloppement, prsentons, exemples lappui, le fonctionnement de ces diffrents types de modules.
B Crer un widget B laborer un thme B Utiliser les services web

MOTS-CLEFS
B PHP B MySQL B extension B widget B thme B structure de thmes B API B service web B XML-RPC

user 177 at Wed Nov 10 04:01:48 +0100 2010
WordPress 3
Ce chapitre dcrit, dans les grandes lignes, le fonctionnement des diffrents types de modules. Un exemple est systmatiquement propos afin dillustrer les concepts prsents. La connaissance du langage de programmation PHP est ncessaire pour pouvoir suivre les exemples.
Dvelopper une extension

T Plate-forme logicielle
Une plate-forme logicielle (un framework) est une brique logicielle dont le but est de permettre aux dveloppeurs de concevoir rapidement et efficacement des logiciels complets. WordPress est tellement ouvert quil peut tre considr dans une certaine mesure comme un framework. De nombreuses agences web utilisent dsormais WordPress pour concevoir des sites de contenus, des rseaux sociaux ou des boutiques e-commerce disposant de fonctionnalits spcifiques, mais profitant de linfrastructure gnrale de WordPress (espace dadministration, systme de mise jour, gestion des utilisateurs).
Larchitecture de WordPress a t conue de manire permettre aux dveloppeurs denrichir la plate-forme aussi bien au niveau des fonctionnalits que de la prsentation. Ces ajouts peuvent toucher le blog ou lespace dadministration. tre en mesure de dvelopper une extension est un rel avantage pour un blogueur, qui se trouve ainsi en mesure de faire voluer son blog et son environnement de travail comme il le souhaite.
Principe gnral
Dans sa version la plus simple, une extension correspond un script PHP plac dans le rpertoire wp-content/plugins/. Le nom du script doit se finir par .php. Les informations lies lextension sont places dans un bloc de commentaires situ en haut du script. Ce bloc est structur de la faon suivante :
/* nom: valeur */
WordPress reconnat les mtadonnes suivantes : Plugin Name : nom de lextension ; Plugin URI : page web de lextension ; Description : dtail de la fonctionnalit propose ; Author : identit de lauteur de lextension ; Version : numro de version ; Author URI : site web de lauteur. Le script de lextension contient des fonctions qui sont appeles grce un systme de hooks (de langlais crochet ). Ces derniers peuvent tre assimils des branchements qui vont saccrocher certains emplacements spcifiques et charnires de lexcution du moteur WordPress. Pour afficher une page, WordPress excute son code, ainsi que toutes les fonctions qui ont t rpertories grce au systme de hooks.
330
user 177 at Wed Nov 10 04:01:48 +0100 2010
WordPress met disposition deux familles de hooks : les hooks daction permettent de dclencher des oprations lors de certains vnements WordPress : enregistrement dun article, soumission dun commentaire, changement de thme, etc. ; les hooks de filtre permettent de modifier le contenu avant laffichage lcran : affichage du contenu de larticle dans le blog, dans le flux RSS, etc.
EN CHIFFRES Que de hooks !

WordPress dispose dun peu plus de 1 000 hooks.
Utiliser un hook daction

La premire extension prsente (Alerte Email) a pour objectif denvoyer un e-mail dalerte ds quun article est publi. La page http://codex.wordpress.org/ Plugin_API/Action_Reference, qui liste les diffrents hooks daction, confirme que le hook publish_post rpond au prsent besoin. La documentation prcise que la mthode excute reoit en paramtre lidentifiant du nouvel article publi. Le branchement dune fonction un hook passe par la fonction add_action(), qui prend pour premier paramtre le nom du hook et, pour deuxime paramtre, le nom de la fonction excuter. Le code de lextension doit donc contenir : un bloc de commentaires dtaillant diffrentes mtadonnes sur lextension ; la fonction responsable de lenvoi de le-mail (onemore_email()) ; lenregistrement de cette fonction en tant que hook laide de la fonction add_action().
Script onemore.php
<?php /* Plugin Name: Alerte Email Plugin URI: http://monsite.com/alert-email Description: Envoie un mail ds quun article est publi Author: Franois-Xavier Bois Version: 0.1 Author URI: http://www.kernix.com/ */ function onemore_email($post_id) { $destinataire = 'bob@mail.com'; $sujet = "Un nouvel article vient d'tre publi"; $contenu = "Rendez-vous sur le blog : http://monblog.com"; mail($destinataire, $sujet, $contenu); } add_action('publish_post', 'onemore_email'); ?>
SAVOIR Paramtres supplmentaires

Deux paramtres optionnels peuvent tre dfinis pour la fonction add_action() : une priorit dexcution et le nombre de paramtres quaccepte la fonction appele.

user 177 at Wed Nov 10 04:01:48 +0100 2010
331
14 Dvelopper sous WordPress
WordPress 3
plugins,
Une fois le script onemore.php plac dans le rpertoire wp-content/ la rubrique Extensions affiche bien la nouvelle extension.
Figure 141
Affichage des informations prsentes dans le bloc de commentaires
ATTENTION Encodage des scripts

Les scripts PHP, comme tous les fichiers textuels prsents dans larborescence WordPress, doivent tre encods en UTF-8.
Comme toute extension, Alerte Email doit tre active afin que le hook soit pris en compte par le moteur.
Figure 142
E-mail dalerte faisant suite une publication
Utiliser un hook de filtre

ATTENTION Nommage des fonctions
WordPress na pas t crit avec une vision objet. Il sagit plutt dune collection de fonctions appeles des moments prcis. Il est donc essentiel de choisir des noms de fonctions les moins gnriques possibles. Prfixer les noms de fonctions avec le nom de lextension est un principe souvent utilis par les dveloppeurs afin dviter les collisions de noms.
Lextension NbMots a pour but dafficher sous chaque article le nombre de mots quil contient. Il sagit dune modification de contenu et donc dun hook de filtre. La page http://codex.wordpress.org/Plugin_API/Filter_Reference prcise que le filtre donnant accs au contenu de larticle est the_content(). Un filtre peut tre ajout laide de la fonction add_filter(). Comme pour add_action(), le premier paramtre correspond au nom du hook et le deuxime la fonction excuter. la diffrence dun hook daction, la fonction doit ici retourner le contenu quil cre ou modifie.
Script nbmots.php
ATTENTION Espaces et retours la ligne

Il convient de veiller ne pas laisser despaces ou de retours la ligne avant la balise ouvrante <?php et aprs la balise fermante ?>.
<?php /* Plugin Name: NbMots Plugin URI: http://monsite.com/nbmots Description: Affiche le nombre de mots contenus dans larticle Author: Franois-Xavier Bois Version: 0.1 Author URI: http://www.kernix.com/ */
332
user 177 at Wed Nov 10 04:01:48 +0100 2010
function nbmots_count($contenu) { $contenu_brut = strip_tags($contenu); $n = str_word_count($contenu_brut); $contenu .= '<br />Nombre de mots <strong>'.$n.'</strong>'; return $contenu; } add_filter('the_content', 'nbmots_count'); ?>
Figure 143
Chaque article dispose dsormais dune indication sur le nombre de mots quil contient.
Les hooks de filtre ne se limitent pas au traitement des contenus du blog. Lespace dadministration dispose galement de hooks spcifiques. titre dexemple, le hook tiny_mce_before_init est appel avant laffichage de lditeur de texte pour modifier sa configuration. Lextension ci-dessous permet dindiquer lditeur de ne pas supprimer les balises IFRAME lorsque le blogueur passe de lditeur HTML lditeur visuel.
Extension Fix IFRAME
<?php /* Plugin Name: Fix IFRAME Plugin URI: http://monsite.com/fixiframe Description: Empche la disparition des IFRAMEs lors du passage lditeur Visuel Author: Franois-Xavier Bois Version: 0.1 Author URI: http://www.kernix.com/ */ function fb_change_mce_options($initArray) { $attributes = array('align', 'class', 'frameborder', 'height', 'id', 'longdesc', 'marginheight', 'marginwidth', 'name', 'scrolling', 'src', 'style', 'title', 'width'); $elt = 'iframe['.join('|', $attributes).']';

user 177 at Wed Nov 10 04:01:48 +0100 2010
333
WordPress 3
if (isset($initArray['extended_valid_elements'])) { $initArray['extended_valid_elements'] .= ',' . $elt; } else { $initArray['extended_valid_elements'] .= $elt; } return $initArray; } add_filter('tiny_mce_before_init', 'fb_change_mce_options');
Crer un widget
EN PRATIQUE Widgets par dfaut
Les widgets par dfaut sont disponibles dans le script : wordpress/wp-includes/ default-widgets.php
Techniquement parlant, un widget nest rien dautre quune extension. Le code associ au widget doit par consquent tre galement plac dans le rpertoire wp-content/plugins. Le widget dvelopp dans le cadre de cette partie porte le nom Cours Action : son objectif est dafficher dans la colonne latrale le cours dune action. Le code de laction est prcis dans lespace de configuration associ au widget dans Apparence>Widgets. Le service web finance.yahoo.com fournit le cours jour.
Figure 144
Comme toute extension, le widget Cours Action apparat au sein de la rubrique Extensions.
COMPATIBILIT Version de WordPress

Le mode de cration dun widget, qui repose sur de la programmation objet, ne fonctionne que depuis la version 2.8 de WordPress.
Le dveloppement dun widget fait intervenir la fois un hook et une classe. La premire tape consiste utiliser le hook daction widgets_init pour lui associer la fonction en charge de dclarer tous les widgets associs lextension : add_action('widgets_init', 'init_cours_action'). La dclaration dun widget est ralise laide de la fonction qui prend en paramtre le nom de la classe PHP qui va se charger de grer tous les aspects du widget : configuration, affichage.
register_widget,
La classe doit hriter de la classe WP_Widget et implmenter plusieurs mthodes : widget(), form(), update(), ainsi quune quatrime portant le nom de la classe (CoursAction() dans le cas prsent). La mthode widget() est en charge de laffichage du widget dans la colonne latrale. Elle reoit deux paramtres : $args et $instance. Le premier paramtre est un tableau associatif contenant diffrents paramtres lis au thme. Le second paramtre contient les attributs du widget.
334
user 177 at Wed Nov 10 04:01:48 +0100 2010
La mthode form() permet de crer le formulaire de configuration
lie au widget. Elle reoit un paramtre $instance. Il sagit comme pour la mthode prcdente des attributs du widget.
Figure 145
Le widget apparat bien dans la rubrique Apparence>Widgets.
Figure 146
Bote de configuration dfinie par la mthode form()
La mthode update() est responsable de lenregistrement des attributs
du widget. Elle reoit deux paramtres : le premier est un tableau associatif des attributs qui viennent dtre renseigns par le blogueur dans le formulaire de configuration ; le second correspond aux anciennes valeurs des attributs du widget. La mthode doit retourner un tableau associatif des attributs qui seront enregistrs dans la base de donnes. La dernire mthode, qui porte le nom de la classe, permet de dfinir les proprits daffichage du widget au sein de la rubrique Apparence>Widgets. Les proprits du widget peuvent tre initialises avec la mthode WP_Widget(), qui accepte quatre paramtres : le code unique du widget ; lintitul du widget ; un tableau doptions lies laffichage widget : $widget_opts ; un tableau doptions lies laffichage de la bote de configuration du widget : $control_opts. Le tableau $widget_opts peut contenir les options suivantes : classname, pour associer une classe CSS spciale au widget, et description, pour prciser lutilit du widget dans la liste des widgets. Le tableau $control_opts permet de dfinir la largeur (width) et la hauteur (height) de la zone de configuration.
user 177 at Wed Nov 10 04:01:48 +0100 2010
COMPATIBILIT PHP 4
La mthode portant le mme nom que la classe correspond son constructeur. Elle est nomme ainsi plutt que __construct() pour maintenir la compatibilit avec PHP 4.
335
WordPress 3
Script : coursaction.php
<?php
/* Plugin Name: CoursAction Plugin URI: http://monsite.com/coursaction Description: Affiche le cours dune action dans la colonne latrale Author: Franois-Xavier Bois Version: 0.1 Author URI: http://www.kernix.com/ */ add_action('widgets_init', 'init_cours_action'); function init_cours_action() { register_widget('CoursAction'); } class CoursAction extends WP_Widget { function CoursAction() { $widget_opts = array('classname' => 'cours-action', 'description' => 'Cours d\'une action en temps rel'); $control_opts = array('width' => 200, 'height' => 350); $this->WP_Widget('cours-action', 'Cours Action', $widget_opts, $control_opts); } function widget($args, $instance) { $title = $instance['title'] ? $instance['title'] : 'Action'; echo $args['before_widget']; echo $args['before_title']; echo esc_html($title); echo $args['after_title']; echo '<ul><li>'; echo '<a href="http://finance.yahoo.com/q?s='.$instance['action'].'">'; echo $instance['action'].'</a> : '; echo file_get_contents('http://finance.yahoo.com/d/quotes.csv?s='.$instance['action'].'&f=l1'); echo '</li></ul>'; echo $arsg['after_widget']; } function update($new_instance, $old_instance) { $instance = $old_instance; $instance['title'] = $new_instance['title']; $instance['action'] = $new_instance['action']; return $instance; }
336
user 177 at Wed Nov 10 04:01:48 +0100 2010
function form($instance) { $titre = '<p> <label for="'.$this->get_field_id('title').'">Titre: <input type="text" id="'.$this->get_field_id('title').'" name="'.$this->get_field_name('title').'" value="'.esc_attr($instance['title']).'" /></label> </p>'; $action = '<p> <label for="'.$this->get_field_id('action').'">Action: <input type="text" id="'.$this->get_field_id('action').'" name="'.$this->get_field_name('action').'" value="'.esc_attr($instance['action']).'" /></label> </p>'; echo $titre.$action; } } ?>
Figure 147
Le widget affiche le cours de laction Google.
laborer un thme
Compte tenu de la multitude de thmes WordPress disponibles sur le Web et de la possibilit de les faire voluer laide dun thme enfant, le dveloppement dun nouveau thme nest que trs rarement ncessaire. Certaines entreprises ou institutions auront cependant tout intrt consacrer un peu de temps ce type de ralisation, afin de se dmarquer franchement de la concurrence et de coller trs prcisment la charte graphique en vigueur.

user 177 at Wed Nov 10 04:01:48 +0100 2010
337
WordPress 3
Construction dun thme

Un thme correspond un rpertoire plac dans wp-content/themes/ <nom_du_theme>. Ce rpertoire contient diffrents types de fichiers : scripts PHP ou JavaScript, feuilles de style, images. Pour apparatre dans la rubrique Apparences>Thmes, le thme doit disposer dau moins trois fichiers : index.php, screenshot.png et style.css. Le fichier index.php est le seul script PHP obligatoire. Limage screenshot.png correspond laperu du thme qui apparat dans la liste des thmes installs ou dans les rsultats de recherche. Le style CSS remplit une double fonction : contenir les diffrentes rgles charges dhabiller le blog et stocker la description du thme au sein dun bloc commentaire plac en haut du fichier. Comme celles des extensions, les mtadonnes du thme sont dfinies de la faon suivante :
/* nom1: valeur1 nom2: valeur2 */
WordPress reconnat les mtadonnes suivantes : Theme Name : nom du thme ; Theme URI : page web du thme ; Description : courte description du thme (peut contenir du HTML) ; Version : version du thme ; Author : nom de lauteur ; Author URI : site de lauteur ; Tags : mots-clefs associs au thme.
COMMUNAUT Partager son thme

Les thmes peuvent tre partags avec la communaut WordPress. La soumission dun thme ncessite de disposer dun compte qui peut tre cr gratuitement sur la page : Bhttp://wordpress.org/extend/themes/register.php Une fois identifi, le dveloppeur envoie son thme au format .zip via le formulaire disponible sur la page : Bhttp://wordpress.org/extend/themes/upload Il est vivement conseill de vrifier la check-list disponible ladresse suivante avant denvoyer son thme : Bhttp://codex.wordpress.org/Theme_Development_Checklist Dans le cas o un thme a pour vocation tre partag en ligne, les tags prennent une vritable importance. Certains dentre eux sont en effet devenus des standards. Ainsi, en indiquant le tag two-columns, le thme pourra apparatre dans les rsultats dune recherche concernant un thme compos de deux colonnes.
338
user 177 at Wed Nov 10 04:01:48 +0100 2010
Figure 148
Les tags reconnus sont organiss en cinq familles.
Un thme doit tre en mesure dhabiller les diffrents types de pages du blog : la page daccueil ; les articles ; les pages (voire les contenus crs dans rubrique Pages) ; la page derreur ; la liste darticles : slection dune date, dun mot-clef ou dune catgorie. WordPress met disposition du dveloppeur diffrentes fonctions (marqueurs conditionnels) pour connatre le type de la page appele :
is_home() is_single() is_page() is_404() is_date() is_tag() is_search() is_category() is_archive(), qui couvre is_date(), is_tag() et is_category().
Il ne sagit cependant pas de coder lintgralit du thme dans un seul et mme script en faisant appel ces fonctions. Le systme de thmes de WordPress permet au dveloppeur de dfinir un script par type de page. Ces scripts sont appels des templates et doivent respecter la charte de nommage suivante : comments.php : commentaires ; home.php : page daccueil ;
user 177 at Wed Nov 10 04:01:48 +0100 2010
339
WordPress 3
single.php : dtail dun article ; page.php : dtail dune page ; category.php : slection dune catgorie ; tag.php : slection dun mot-clef ; date.php : slection dune date ; search.php : rsultat dune recherche ; 404.php : page derreur. NORME Charte de nommage
Cette norme permet dobtenir une courte description du template dans linterface Apparence> diteur.
Le template index.php est appel par dfaut lorsque le thme ne dispose pas du template associ au type de la page appel. titre dexemple, pour afficher la page daccueil, le moteur commence par vrifier si le thme dispose du template home.php. Sil existe, le moteur lexcute et, dans le cas contraire, il utilise index.php (la fonction is_home() devient dans ce cas particulirement utile).
Figure 149
Interface ddition des templates dans lespace dadministration
340
user 177 at Wed Nov 10 04:01:48 +0100 2010
Le script archive.php est un cas particulier dans la mesure o il est appel avant index.php si date.php, category.php, ou tag.php ne sont pas prsents. Il permet ainsi de grer de faon gnrique les diffrents types de pages proposant des listes filtres darticles. Le script functions.php, sil est prsent, est systmatiquement inclus, quelle que soit la typologie de la page. Ce script est lemplacement idal pour placer des constantes, des fonctions gnriques ou des hooks. Chaque template est responsable la fois de laffichage spcifique li son type de page et de llaboration de la structure gnrale du blog. Lide nest bien videmment pas de placer le code HTML associ len-tte, au pied de page et la colonne latrale, dans chaque template du thme. WordPress permet de factoriser ces aspects laide des mthodes get_header(), get_sidebar() et get_footer(). Lorsquelles sont utilises, ces fonctions utilisent les templates header.php, sidebar.php et footer.php. La construction automatique de la colonne latrale en fonction des widgets slectionns par le blogueur est ralise en faisant appel la fonction dynamic_sidebar(). Le fichier functions.php doit dans ce cas faire appel la fonction register_sidebar() pour indiquer au thme les widgets actifs. La construction dun thme consiste finalement faire appel des fonctions spcifiques de WordPress au sein dune architecture HTML adapte au type de template. Ces fonctions mises disposition par WordPress sont appeles template tags. Pour construire la page daccueil, le dveloppeur utilise les template tags suivants : have_posts() : indique sil y a des articles ; the_post() : passe dun article lautre ; the_title() : retourne le titre de larticle courant ; the_excerpt() : retourne lextrait de larticle courant ; the_permalink() : retourne le permalien de larticle courant. Il devient dsormais possible dlaborer un thme de base en mesure dafficher la page daccueil.
Le template responsable de laffichage de la page daccueil : home.php
<?php get_header(); ?>
COMPATIBILIT WordPress 3
Jusqu la version 3, lutilisation des fonctions get_header(), get_footer() et get_sidebar() nimposait pas la prsence des templates associs. Sils ntaient pas prsents, WordPress rcuprait les templates du thme Default. Ce comportement nest plus accept; le thme doit contenir les templates header.php, footer.php, sidebar.php, comments.php, comments-popup.php ou tre dfini comme enfant dun thme qui dispose de ces fichiers.
EN SAVOIR PLUS Template Tags

Le Codex liste les diffrentes fonctions disponibles sur la page :
B http://codex.wordpress.org/Template_Tags
CONFIGURATION
Nombre darticles sur la page daccueil
Le nombre darticles afficher sur la page daccueil est paramtrable via linterface Rglages>Lecture.

user 177 at Wed Nov 10 04:01:48 +0100 2010
341
WordPress 3
<?php while (have_posts()) : the_post(); ?> <div class="post"> <div class="post-title"><a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a></div> <div class="post-excerpt"><?php the_excerpt(); ?></div> </div> <?php endwhile; ?> <?php get_sidebar(); get_footer(); ?>
Template associ len-tte : header.php

<html> <head> <style type="text/css" media="screen"> @import url(<?php bloginfo("stylesheet_url");?>); </style></head> <body> <table id="layout"> <tbody> <tr><td colspan="2" id="header"><?php bloginfo('name'); ?> </td></tr> <tr><td id="content">
Template associ au pied de page : footer.php

<tr><td colspan="2" id="footer"> Nous suivre sur Twitter</td></tr> </tbody></table> </body> </html>
Template associ la colonne latrale : sidebar.php

</td> <td id="sidebar"> <ul> <?php dynamic_sidebar(); ?> </ul> </td> </tr>
342
user 177 at Wed Nov 10 04:01:48 +0100 2010
Template gnrique : index.php

<?php
get_header(); print("contenu par dfaut"); get_sidebar(); get_footer(); ?>
Script regroupant diffrentes fonctions utilises par le thme : functions.php

<?php register_sidebar(); ?>
Feuille de style : style.css

/* Theme Name: Super Basic Theme URI: http://kernix.com/ Description: Thme de test. Version: 0.1 Author: Fxbois Author URI: http://kernix.com/ Tags: fixed width, two columns, widgets */ * { font-family:arial; font-size:10px; margin:0; padding:0; } #layout { width:600px; margin:10px auto; } #header { border-bottom:3px solid black; } #footer { border-top:3px solid black; } #sidebar { border-left:3px solid black; padding-left:8px; } .post { margin-bottom:10px; } .post-title { font-weight:bolder; } #sidebar UL { display:block; margin-bottom:10px; list-style: none; }

user 177 at Wed Nov 10 04:01:48 +0100 2010
343
WordPress 3
Figure 1410
Le thme Super Basic dfini dans les pages prcdentes
Les structures de thmes

La cration dun thme basique se rvle finalement assez simple et rapide. Concevoir un thme professionnel et complet est, en revanche, une tche beaucoup plus complexe, dans la mesure o il convient alors de prendre en compte un trs grand nombre dlments : lintgration complte des widgets et des menus ; la scurit (par exemple, lchappement de caractres) ; lutilisation de constantes (URL, chemins) et de hooks ; linternationalisation (traductions) ; la compatibilit avec certaines extensions populaires ; la mise disposition dinterfaces de paramtrage dans lespace dadministration.
B http://themeshaper.com
ALTERNATIVES Carrington et Hybrid

Carrington et Hybrid sont deux autres structures de thmes populaires :
B http://carringtontheme.com B http://themehybrid.com
Plutt que de concevoir un nouveau thme en partant de zro, il est possible de se baser sur des structures de thmes (theme framework). Visuellement neutres, ces thmes ont vocation tre adapts dans le cadre de thmes enfants. Ladaptation repose sur le fichier style.css ainsi que sur le script functions.php qui se charge de dfinir des diffrents hooks spcifiques au thme. Dans le cadre de la structure Thematic (ThemeShaper.com), les hooks de filtres et dactions sont prfixs thematic_. Le diagramme http://bluemandala.com/thematic/thematic-structure.html permet de comprendre o sont appels les hooks spcifiques.
344
user 177 at Wed Nov 10 04:01:48 +0100 2010

Figure 1411
user 177 at Wed Nov 10 04:01:48 +0100 2010
Hooks proposs par la structure Thematic
345
WordPress 3
Tester un thme
Theme Switch and Preview est une extension trs utile qui permet aux dveloppeurs dassurer le bon fonctionnement de leur blog durant la phase de conception dun nouveau thme. Une fois lextension installe et active, la nouvelle rubrique Rglages>Theme Switch permet dautoriser (Enable) le changement de thme. Linterface propose alors une liste des diffrents thmes installs (rubrique Open theme in new window). En cliquant sur un thme, le blogueur bascule sur son blog habill avec le thme slectionn. La prise en compte du thme alternatif repose sur lutilisation dun cookie dont la dure de vie par dfaut est limite quelques minutes. Le thme initial rapparat de faon automatique une fois le cookie expir.
Figure 1412
Interface Rglages>Theme Switch
346
user 177 at Wed Nov 10 04:01:48 +0100 2010
Exploiter les services web

Proposer une API (Application Programming Interface) est un moyen pour un systme informatique douvrir ses ressources (donnes et fonctionnalits) des sites et logiciels extrieurs. Plutt technique lorigine, la notion dAPI sest dmocratise avec lavnement du Web dit 2.0. Les sites web ont alors commenc mettre disposition certaines de leurs fonctionnalits dans le cadre des API ouvertes et documentes. Les dveloppeurs ont ainsi pu les exploiter et faire merger de nouveaux usages.
T Mashups
Les mashups sont des sites reposant sur lexploitation dAPI provenant de diffrents autres sites.
Usage et intrt des services web

Il est facile de comprendre lintrt dun tel mode de fonctionnement lorsquon sait que Twitter a pendant longtemps reu plus de tweets provenant dapplications extrieures que de son propre site. En mettant disposition des API, Twitter a pu voir fleurir des dizaines de logiciels et de passerelles sur toutes les plates-formes possibles et imaginables (Windows, Mac, iPhone, Facebook, etc.). Lmergence de cet cosystme a permis Twitter dagrandir de faon trs rapide sa communaut dutilisateurs en limitant ses investissements. Le travail de communication et de recrutement de nouveaux utilisateurs tait rparti entre les diffrents diteurs dapplications. Un site met disposition ses API via des services web. Les API peuvent tre assimiles un protocole de programmation. Proposer une API consiste essentiellement documenter prcisment les fonctionnalits mises disposition. Pour chaque API, la documentation fournit le nom de lopration, les paramtres attendus, le rsultat retourn, les codes derreurs (avec leur signification), les ventuelles constantes, etc. Dans un souci de maximiser louverture et la compatibilit, les services web veillent rester indpendants des langages de programmation. Chaque dveloppeur doit pouvoir les exploiter avec son langage de prdilection.
TENDANCE Google et les API : une russite !
Les API sont en partie responsables du succs des diffrents services de Google. Le gant du Web a ds le dpart choisi douvrir ses services aux dveloppeurs. Alors que le site de cartographie Mappy interdisait lincorporation de ses cartes dans des sites extrieurs, Google Maps a, au contraire, offert aux dveloppeurs une multitude doutils extrmement puissants pour incorporer ses cartes au sein de pages web.
Protocoles
Lappel un service web repose sur un protocole. Il sagit dun support pour lacheminement de la requte et la rcupration de la rponse. Les protocoles les plus rpandus aujourdhui sont REST et XML-RPC.

user 177 at Wed Nov 10 04:01:48 +0100 2010
347
WordPress 3
REST (Representational State Transfer) est extrmement populaire,
SAVOIR API spcifiques WordPress

WordPress propose des API spcifiques dont la documentation est disponible ladresse suivante :
B http://codex.wordpress.org/XML-RPC_wp
du fait de sa simplicit de mise en uvre. Lide est ici dexploiter le Web (avec les URL, les diffrentes mthodes HTTP) pour donner accs des fonctionnalits. XML-RPC (XML Remote Procedure Call), utilis par WordPress, est un protocole dans le cadre duquel les donnes sont changes au format XML. Plutt que dadopter un protocole diffrent, WordPress sest rendu compatible avec les API proposes par dautres platesformes de blogs telles que Blogger, MetaWeblog ou Movable Type. Le script qui suit, par exemple, publie un nouvel article lorsquil est excut. LAPI utilise est celle de Blogger. Avant de pouvoir utiliser les services web dun blog WordPress, loption Activer les protocoles XML-RPC doit tre active via linterface Rglages>criture.
Figure 1413
Option pour autoriser la publication distance
EN SAVOIR PLUS Documentations en ligne

Parmi les diffrentes documentations proposes par les plates-formes de blog, celle fournie par Movable Type est la plus complte.
B http://www.sixapart.com/developers/xmlrpc/
La mthode blogger.newPost est utilise pour crer un nouvel article. Les six arguments quattend cette mthode sont : une clef dapplication (non utilise) ; lidentifiant du blog (non utilis) ; lidentifiant de ladministrateur ; son mot de passe ; le contenu de larticle ; un flag indiquant si larticle doit tre publi ou non. Cette mthode retourne lidentifiant du nouvel article en cas de succs. Le chemin daccs aux services web est le suivant : http://monblog.com/wordpress/xmlrpc.php.
movable_type_api/.
CONFIGURATION XML-RPC et WampServer

WampServer ncessite lajout de lextension php_xmlrpc. Cette extension peut tre ajoute en passant par le menu WampServer, rubrique PHP>PHP Extensions. La prise en compte de cette modification ncessite le redmarrage dApache.
Exemple dutilisation dune API

<?php $contenu = "<title>merci les API !</title>bonjour monde "; $args = array('', '', 'admin', 'azerty', $contenu, true);
348
user 177 at Wed Nov 10 04:01:48 +0100 2010
$request = xmlrpc_encode_request('blogger.newPost', $args); $options = array('http' => array('method' => 'POST', 'header' => 'Content-Type: text/xml', 'content' => $request)); $context = stream_context_create($options); $datas = file_get_contents("http://localhost/wordpress/xmlrpc.php", false, $context); $response = xmlrpc_decode($datas); if (is_array($response) && xmlrpc_is_fault($response)) { die('erreur: '.$response[faultString].' ('.$response[faultCode].')'); } print('ID du nouvel article : '.$response); ?>
Figure 1414
Larticle est bien publi.

user 177 at Wed Nov 10 04:01:48 +0100 2010
349
user 177 at Wed Nov 10 04:01:48 +0100 2010
Lexique
Agrgateur Logiciel permettant de suivre diffrents flux de syndications (RSS, Atom) en mme temps. API Ensemble de fonctionnalits proposes par un systme informatique. WordPress propose une API (Application Programming Interface) accessible via des webservices. Avatar lment graphique qui sert reprsenter un utilisateur. Les avatars sont gnralement affichs
au sein des commentaires, associ au nom de lauteur.

Blogosphre cosystme regroupant les blogs et les blogueurs. Blogroll Espace situ dans la barre latrale et proposant une liste de liens slectionns par le blogueur. Chiclet Terme utilis pour qualifier le petit bouton allong souvent prsent dans la colonne latrale pour
accder au flux RSS.

Codex Nom de la documentation gnrale de WordPress accessible sur :
http://codex.wordpress.org/fr:Accueil
Colonne latrale Colonne gnralement situe sur la droite du blog, regroupant des petits modules appels
widgets.
Extension Systme permettant denrichir les fonctionnalits dun blog (plug-in). Page Une page est un contenu li un blog qui ne correspond pas un article. Une page peut tre
utilise pour proposer une biographie du blogueur ou des mentions lgales.

Permalien URL permettant daccder directement un article et qui ne devra jamais changer au cours du
temps (permalink).
Flux de syndication Fichier li un blog qui permet un lecteur de sabonner aux articles du blog et dtre averti
automatiquement ds que le blog est mis jour. Les deux formats les plus connus sont RSS et Atom.

user 177 at Wed Nov 10 04:01:48 +0100 2010
WordPress 3
Folksonomie Taxonomie collaborative. Microblog Type de blog dont les articles sont limits 140 caractres. Twitter en est le reprsentant le plus
connu.
Ping Signal automatique envoy par un blog un agrgateur ou un moteur de recherche pour avertir
de la publication dun nouvel article.

Podcast Blog sonore. Poster Anglicisme souvent employ dans la blogosphre pour qualifier le fait de publier un article (un
post en anglais).
Rtrolien Procdure permettant un blog davertir un autre blog quil le cite au sein dun article.
Pingbacks et trackbacks sont les deux types de rtroliens les plus rpandus.
Shortcode Portion de code entoure de crochets permettant dinclure un lment multimdia au sein dun
article.
Taxonomie Action de classer des informations, que ce soit avec des catgories ou des mots-clefs. Thme Ensemble de fichiers qui permettent de dfinir lapparence dun blog. Troll Type de commentaire polmique ayant pour objectif de provoquer les autres internautes. Tumblelog Blog ayant la spcificit de proposer des articles courts. Widget Petit programme situ dans la colonne latrale du blog (par exemple Calendrier, Derniers tweets,
Nuage de mots-clefs).
WordCamp BarCamp ddi WordPress. Un BarCamp est un atelier participatif o se retrouvent les
dveloppeurs pour faire avancer le projet qui les fdre.
352
user 177 at Wed Nov 10 04:01:48 +0100 2010
Webographie
Actualits
En anglais
http://en.blog.wordpress.com http://weblogtoolscollection.com http://planet.wordpress.org http://www.wpjedi.com
En franais
http://www.wordpress-fr.net/blog http://www.fran6art.com
Pour les dveloppeurs

http://wordpress.org/news/ http://digwp.com
Extensions
http://wordpress.org/extend/plugins/

user 177 at Wed Nov 10 04:01:48 +0100 2010
WordPress 3
Thmes
http://wordpress.org/extend/themes/ http://themeshaper.com
Automattic
http://ma.tt
(blog du crateur de WordPress) (le blog du PDG de Automattic) (blogs des employs dAutomattic)
http://toni.org
http://automattic.com/about/
Exemples de blogs WordPress

http://wordpress.org/showcase/
354
user 177 at Wed Nov 10 04:01:48 +0100 2010
Index
A
abonn 124 accessibilit 94 administrateur 124 affiliation 288 agenda 236 agrgateur 45, 351 XE 351 aide 85, 87 Ajax 84 Akismet 313 Amazon 288 Android 134 anonymat 6 Apache 60, 71, 73 API (Application Programming Interface) 347, 351 API Key 270, 313 apparence 145 archive 40 widget 192 article 2, 33, 90 crire 91 li 287 liste 101 sponsoris 295 widget 192 Atom 53 audience 270 audio 222 auteur 124 avatar 351
dopcode 324 calendrier 207, 236 widget 192 captcha 181, 314 carte 217 catgorie 38, 97, 118 widget 193 chiclet 351 clef dAPI 270, 313 CMS (Content Management System) 40 Cnil (Commission nationale de linformatique et des liberts) 7 Codex 85, 351 colonne latrale 33, 37, 188, 351 commentaire 2, 36, 111 inscription 262 lutte contre le spam 312 modration 111 widget 193 communaut 259 compression 322 confidentialit 9 contributeur 124 copyright 6 corbeille 103 CPC (cot par clic) 285 CPM (cot par mille) 285 CSS (Cascading Style Sheet) 160, 161
D
Dailymotion 219 Videowall 210 Delicious 250 dveloppement 329 Digg 250 don 296 Dotclear 26 droit dauteur 6 de citation 8 de rponse 7 de reproduction 8
B
base de donnes 61, 71, 319, 325 bibliothque 107 BlackBerry 137 blog 2 cration 58 Blogger 26 blogosphre 1, 351 blogroll 39, 351 widget 194
E
eBay 293 e-commerce 297
C
cache 318, 320
diteur 124 de contenu 92 HTML 92 e-mail 140 embed 198, 215 encodage 332 enregistrement automatique 99 espace dadministration 83, 84 tat 95 export 307 extension 19, 168, 351 Akismet 313 All in One SEO Pack 242 Audio Player 222 configuration 171 Contact Form 7 176, 181 dveloppement 330 Embedded Video 219 Firefox Sync 251 gestionnaire 86 Google Analytics for WordPress 271 Google XML Sitemaps 248 Hello Dolly 169 Hyper Cache 320 installation 172 automatique 172 manuelle 174 MailPress 261 MeeNews 261 Newsletter 261 PollDaddy Polls & Ratings 233 PuSHPress 327 Really Simple CAPTCHA 181 recherche 172 ShareThis 253 Simpler iPaper 225 Subscribe To Comments 262 suppression 170 W3 Total Cache 320 Webmaster Tools Verification 250 widget 196 WordPress SlideShare 229 WordPress.com Stats 89, 139, 270 WP e-Commerce 298 WP Forum Server 182 WP Issuu 225
355
user 177 at Wed Nov 10 04:01:48 +0100 2010
WordPress 3
WP Super Cache 320 WP-Cumulus 196 WPhone 128 WP-Pagination 285 WP-reCAPTCHA 314 YARPP 287
hbergeur 60 hook 330 HTML 160, 214 code 215
Movable Type 26 multimdia 213 musique 222 MySQL 60, 75, 319
I
identi.ca 16 identifiant 310 iFrame 198, 215 image (diter) 109 import 307 indexation 246 installation 60, 65 sous Mac OS X 72 iPad 133 iPhone 130 Issuu.com 224 itinraire 217
N
navigateur (configuration) 85 navigation 40 newsletter 261 NextGEN Gallery 173 nom de domaine 8 nuage de mots-clefs 196 nuage de tags 38 widget 195
F
Facebook 202, 257, 269 page 259 FeedBurner 262 feuille de style 160, 338 fichier audio 222 multimdia 214 fil de syndication 41 Voir aussi flux de syndication Firebug 323 Firefox 49 Flash 215 Flickr 223 badge 209 flux de syndication 3, 41, 261, 262, 326, 351 agrgateur 45 publicit 282 widget 193 flux RSS 2 folksonomie 98, 351 formulaire de contact 176 forum 182 framework 330 FTP (File Transfer Protocol) 61, 63, 307
O
opcode 324 Open Graph Protocol 261 OpenStreetMap 219 OPML (Outline Processor Markup Language) 18 OverBlog 12, 28
J
JavaScript 198
L
lien 117, 311 sponsoris 278 widget 194 Linux 78 liste 36 de diffusion 261 livre 226
P
page 110, 351 widget 195 pagination 285 PaperBlog 12 paquet 78 PDF 224 performance 317 permalien 2, 35, 351 permission 61 PHP 60, 319 optimisation 324 phpMyAdmin 71, 76, 308, 325 Picasa 224 ping 247, 352 pingback 259 Ping-O-Matic 247 podcast 35, 53, 352 PollDaddy 231 post 352 prsentation 228 publicit 278 PuSH (PubSubHubbub) 327 Push/Pull 326
M
marque-pages 250 mashup 347 mdia 104 menu gestionnaire 120 widget 195 mtadonne 35, 41 microblog 14, 352 microformat 18 migration de version 304 mise jour 302 mobile 128 mod_deflate 323 modration 113 montisation 277 mot de passe 310 mot-clef 38 widget 195 moteur de blog 17 moteur de recherche 41
G
galerie photo 173, 223 Google 240, 269, 314, 347 Google AdSense 278, 279 Google AdWords 244, 278 Google Agenda 207, 236 Google Analytics 271, 281 Google Blogs 9, 247 Google Bookmarks 250 Google Buzz 203 Google Friend Connect 266 Google Livres 226 Google Maps 217 Google Traduction 206 Google Web Elements 205
R
raccourci clavier 116 reCAPTCHA 314 recherche (widget) 196
H
hbergement 60
356
user 177 at Wed Nov 10 04:01:48 +0100 2010
rcriture dURL 321 rfrencement 239, 240, 318 rseau social 16, 254 responsabilit 5 REST (Representational State Transfer) 348 rtrolien 2, 259, 352 RSS 51
S
sauvegarde 304, 306 scurit 181, 302 service web 347 ShareThis 252 shortcode 214, 352 site dynamique 319 sitemap 247 Skype 198 SlideShare 228 smartphone 129 social bookmarking 250 Socialbar 37 spam 4, 176, 311 splog 4 SSL (Secure Sockets Layer) 311 statistiques 270 statut 200 syndication (fil ou flux) 41
tag 38, 97 taxonomie 97, 352 Technorati 10, 247 template 146 thme 145, 146, 352 dveloppement 337 gnrateur 155 Kubrick 147 Twenty Ten 148, 286 trackback 259 traduction 206 troll 352 tumblelog 34, 352 Twitter 14, 200, 254 Twitterfeed 254 TypePad 26
W
WampServer 69 widget 37, 187, 188, 260, 352 Amazon 289 dveloppement 334 Text 196 Wikio 11 Windows installation 69 WordCamp 352 WordPress communaut 19 installation 60 moteur 25 tlchargement 62 versions 18 WordPress.com 22 version mobile 128 Wysiwyg 92
U
Unicode 18 URL rcriture/rewriting 71 utilisateur 123
X
XFN (XHTML Friends Network) 18 Xiti 281 XML-RPC (XML Remote Procedure Call) 348
V
vente 297 vido 219 vidoblog 34 Vimeo 214 visibilit 240 vitesse de chargement 317 vlog 34
Y
YouTube 219
T
tableau de bord 88
357
user 177 at Wed Nov 10 04:01:48 +0100 2010
Index
user 177 at Wed Nov 10 04:01:48 +0100 2010

WordPress 3 Pour Le Bloggueur Efficace

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

WordPress 3 Pour Le Bloggueur Efficace

Transféré par

Droits d'auteur :

Formats disponibles

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.

com) - 16 Novembre 2010 15:47

user 177 at Wed Nov 10 04:01:48 +0100 2010

Pourque linformatique soit un outil etnonun ennemi !

Russir son blog et animer sa communaut : un jeu denfant avec WordPress 3 !

Dveloppezvotrecommunautvialesrseauxsociaux, Optimisezlesperformancesetscurisezvotreblog Lancez-vousdansledveloppementdevospropres

qui sadresse cet ouvrage ?

user 177 at Wed Nov 10 04:01:48 +0100 2010

Conception : Nord Compo

user 177 at Wed Nov 10 04:01:48 +0100 2010

Collection Accs libre

Chez le mme diteur

user 177 at Wed Nov 10 04:01:48 +0100 2010

user 177 at Wed Nov 10 04:01:48 +0100 2010

DITIONS EYROLLES 61, bd Saint-Germain 75240 Paris Cedex 05 www.editions-eyrolles.com

user 177 at Wed Nov 10 04:01:48 +0100 2010

user 177 at Wed Nov 10 04:01:48 +0100 2010

user 177 at Wed Nov 10 04:01:48 +0100 2010

qui sadresse ce livre ?

Groupe Eyrolles, 2009

Groupe Eyrolles, 2009

Table des matires

Groupe Eyrolles, 2009

Table des matires

Groupe Eyrolles, 2009

user 177 at Wed Nov 10 04:01:48 +0100 2010

Groupe Eyrolles, 2009

user 177 at Wed Nov 10 04:01:48 +0100 2010

Pourquoi choisir WordPress ?

B quoi correspond un blog ?

B Quest-ce que WordPress ? B Forces, faiblesses

B blog B histoire B droit B WordPress.org B WordPress.com B microblog B rseaux sociaux

Groupe Eyrolles, 2009

Quest-ce quun blog ?

Groupe Eyrolles, 2009

IL TAIT UNE FOIS Naissance des blogs

Bloguer pour le plaisir

RETENIR Un outil rvolutionnaire

1 Pourquoi choisir WordPress ?

Bloguer pour communiquer

Bloguer pour gagner de largent

Bloguer pour gagner en notorit

Groupe Eyrolles, 2009

Les blogs comme relais des mdias traditionnels

EXEMPLES Le blog, relais des mdias

Page regroupant les blogs des journalistes de RTL

1 Pourquoi choisir WordPress ?

quen cas de plainte concernant les contenus posts, il agisse promp-

tement pour retirer les contenus litigieux.

Droit dauteur et protection des contenus

SAVOIR Enveloppe Soleau

Anonymat et droit de rponse

Groupe Eyrolles, 2009

ATTENTION Changements venir

CONSEIL Respect de la vie prive :

Informatique et liberts : la Cnil

Groupe Eyrolles, 2009

1 Pourquoi choisir WordPress ?

Hbergement sur une plate-forme trangre

Droit de citation et de reproduction

Choix du nom de domaine

Groupe Eyrolles, 2009

O trouver des blogs ?