Vous êtes sur la page 1sur 376

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

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

WordPress 3
pour le blogueur efficace

Collection Accs libre


Pour que linformatique soit un outil, pas un ennemi !

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

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
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

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

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

Marie-Castille et Charles-Louis

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

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Le chapitre 6 prsente les diffrentes techniques qui permettent de modifier lapparence dun blog. La notion de thme y est introduite.
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.
Groupe Eyrolles, 2009
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-

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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
Groupe Eyrolles, 2009
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

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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
Groupe Eyrolles, 2009

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

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

XIII

Table des matires

WordPress 3

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

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

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

chapitre

Groupe Eyrolles, 2009

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

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

IL TAIT UNE FOIS Naissance des blogs


Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47
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).
Groupe Eyrolles, 2009
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 ?

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Les blogs comme relais des mdias traditionnels


Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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 ;
Groupe Eyrolles, 2009
user 177 at Wed Nov 10 04:01:48 +0100 2010

1 Pourquoi choisir WordPress ?

WordPress 3

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

tement pour retirer les contenus litigieux.


Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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/

Groupe Eyrolles, 2009


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

1 Pourquoi choisir WordPress ?

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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Confidentialit
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

1 Pourquoi choisir WordPress ?

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Figure 16

Recherche disponible par blogs ou par articles

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

11

1 Pourquoi choisir WordPress ?

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

13

1 Pourquoi choisir WordPress ?

WordPress 3

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

TENDANCES Twitter en quelques chiffres


Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47
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.

Groupe Eyrolles, 2009


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

15

1 Pourquoi choisir WordPress ?

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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

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).
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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 :
Groupe Eyrolles, 2009
user 177 at Wed Nov 10 04:01:48 +0100 2010

17

1 Pourquoi choisir WordPress ?

WordPress 3

lajout de fonctionnalits ; la correction de dysfonctionnements ;


T XFN, OPML et Unicode

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

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

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

19

1 Pourquoi choisir WordPress ?

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/

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Quelques faiblesses
Une scurit renforcer
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

21

1 Pourquoi choisir WordPress ?

WordPress 3

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Avantages
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

1 Pourquoi choisir WordPress ?

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

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

25

1 Pourquoi choisir WordPress ?

WordPress 3

Movable Type
B http://www.movabletype.org

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.
Groupe Eyrolles, 2009
user 177 at Wed Nov 10 04:01:48 +0100 2010

26

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

27

1 Pourquoi choisir WordPress ?

WordPress 3

OverBlog
B http://www.over-blog.com

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

TENDANCES Quelques chiffres sur WordPress en 2010


Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47
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.

Groupe Eyrolles, 2009


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

29

1 Pourquoi choisir WordPress ?

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

chapitre

Groupe Eyrolles, 2009

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

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

WordPress 3

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Celle de droite , appele colonne latrale ou sidebar, est organise sous forme de sections quil est possible de grer depuis lespace dadministration.
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.
Groupe Eyrolles, 2009
user 177 at Wed Nov 10 04:01:48 +0100 2010

34

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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>/

Groupe Eyrolles, 2009


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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

La colonne latrale
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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
Groupe Eyrolles, 2009
user 177 at Wed Nov 10 04:01:48 +0100 2010

37

2 Anatomie dun blog

WordPress 3

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

CONSEIL Taggez au fur et mesure


Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47
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
Groupe Eyrolles, 2009
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>

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Un blog propose ainsi plusieurs niveaux de navigation : par pages, par articles, par filtrage des mtadonnes ou via un moteur de recherche interne.
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.
Groupe Eyrolles, 2009
user 177 at Wed Nov 10 04:01:48 +0100 2010

42

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

43

2 Anatomie dun blog

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

45

2 Anatomie dun blog

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

49

2 Anatomie dun blog

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Le fait de choisir les noms de balises et leur agencement dfinit un format : RSS ou Atom, principalement.
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

51

2 Anatomie dun blog

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Atom
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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>

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

55

2 Anatomie dun blog

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

chapitre

Groupe Eyrolles, 2009

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

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

WordPress 3

Crer un blog sur WordPress.com


B http://fr.wordpress.com

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Un accs loutil phpMyAdmin doit tre fourni. Le module PHP APC doit pouvoir tre install.
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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).

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

63

3 Crer son blog

WordPress 3

B cyberduck.ch

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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).

Groupe Eyrolles, 2009


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

65

3 Crer son blog

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

4 Une fois ces informations valides, WordPress confirme quil a pu

crer le fichier de configuration et que linstallation va pouvoir dbuter.


Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.


Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

69

3 Crer son blog

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Modifier la configuration dApache


Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

71

3 Crer son blog

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Dmarrer Apache
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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).

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

77

3 Crer son blog

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Linstallation du paquet permet de prciser le mot de passe de lutilisateur root de MySQL.


Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

81

3 Crer son blog

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

chapitre

Groupe Eyrolles, 2009

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

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Lorganisation gnrale
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

87

4 Prendre en main lespace dadministration

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

89

4 Prendre en main lespace dadministration

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

la rubrique Articles>Ajouter.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

91

4 Prendre en main lespace dadministration

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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

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

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.
Groupe Eyrolles, 2009
user 177 at Wed Nov 10 04:01:48 +0100 2010

Figure 428 Le coin permet de redimensionner la taille de lditeur.

93

4 Prendre en main lespace dadministration

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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

tat et visibilit
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

95

4 Prendre en main lespace dadministration

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.
Groupe Eyrolles, 2009
user 177 at Wed Nov 10 04:01:48 +0100 2010

97

4 Prendre en main lespace dadministration

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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Enregistrement automatique
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

99

4 Prendre en main lespace dadministration

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

101

4 Prendre en main lespace dadministration

WordPress 3

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Figure 450

Barre dactions associes larticle

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

103

4 Prendre en main lespace dadministration

WordPress 3

ATTENTION Une corbeille unique


Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47
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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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) ;
Groupe Eyrolles, 2009
user 177 at Wed Nov 10 04:01:48 +0100 2010

105

4 Prendre en main lespace dadministration

WordPress 3

lalignement par rapport au contenu de larticle ; la taille, pour insrer une version rduite de limage afin que la

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.
Groupe Eyrolles, 2009
user 177 at Wed Nov 10 04:01:48 +0100 2010

107

4 Prendre en main lespace dadministration

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

diter les images


Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

109

4 Prendre en main lespace dadministration

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

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Les commentaires
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

111

4 Prendre en main lespace dadministration

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Modration en ligne
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

113

4 Prendre en main lespace dadministration

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

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.
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47
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.

Groupe Eyrolles, 2009


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

115

4 Prendre en main lespace dadministration

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

117

4 Prendre en main lespace dadministration

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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

119

4 Prendre en main lespace dadministration

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

121

4 Prendre en main lespace dadministration

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

123

4 Prendre en main lespace dadministration

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

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

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

chapitre

Groupe Eyrolles, 2009

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

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

WordPress 3

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.
Groupe Eyrolles, 2009
user 177 at Wed Nov 10 04:01:48 +0100 2010

129

5 Bloguer en nomade

WordPress 3

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

131

5 Bloguer en nomade

WordPress 3

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

137

5 Bloguer en nomade

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

139

5 Bloguer en nomade

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

141

5 Bloguer en nomade

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

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

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

chapitre

Groupe Eyrolles, 2009

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

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

WordPress 3

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Installer un thme
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

149

6 Modifier lapparence dun blog

WordPress 3

Les thmes correspondant la recherche sont affichs par liste.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Le lien Installer ouvre une fentre qui permet de confirmer linstallation en cliquant sur le bouton Installer maintenant.
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.
Groupe Eyrolles, 2009
user 177 at Wed Nov 10 04:01:48 +0100 2010

151

6 Modifier lapparence dun blog

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

153

6 Modifier lapparence dun blog

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

155

6 Modifier lapparence dun blog

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Le thme peut alors tre install sur le blog selon la procdure manuelle.
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

157

6 Modifier lapparence dun blog

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

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.
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

159

6 Modifier lapparence dun blog

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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

La deuxime catgorie de fichiers correspond aux feuilles de style. Ces

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

6 Modifier lapparence dun blog

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; }

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

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 :
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47
/* 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.

Groupe Eyrolles, 2009


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

163

6 Modifier lapparence dun blog

WordPress 3

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

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

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

chapitre

Groupe Eyrolles, 2009

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

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

WordPress 3

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Un lien donne galement la possibilit de lister les fichiers qui seront supprims.
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47
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.

Groupe Eyrolles, 2009


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

171

7 Ajouter des fonctionnalits

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

EXEMPLE Ajouter une galerie photo


Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47
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

Groupe Eyrolles, 2009


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

173

7 Ajouter des fonctionnalits

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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

175

7 Ajouter des fonctionnalits

WordPress 3

Cas pratiques
Prsentons maintenant linstallation de deux extensions : un formulaire de contact et un forum.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

177

7 Ajouter des fonctionnalits

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

179

7 Ajouter des fonctionnalits

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Enfin, la section E-mail permet, si la case Utiliser le-mail est coche,

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

181

7 Ajouter des fonctionnalits

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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 : <!--VASTHTML-->.

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

7 Ajouter des fonctionnalits

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

185

7 Ajouter des fonctionnalits

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

chapitre

Groupe Eyrolles, 2009

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

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

WordPress 3

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Suppression et dsactivation
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.
Groupe Eyrolles, 2009
user 177 at Wed Nov 10 04:01:48 +0100 2010

191

8 Widgets et colonne latrale

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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Catgories
Objectif : liste des catgories qui ont au moins un article associ.
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

193

8 Widgets et colonne latrale

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Menu personnalis
Objectif : intgrer un menu cr via Apparence>Menus.
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

195

8 Widgets et colonne latrale

WordPress 3

Recherche
Objectif : afficher un champ de recherche qui permet de raliser une recherche dans lintgralit des contenus du blog.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

8 Widgets et colonne latrale

WordPress 3

Une fois le widget install, la colonne latrale dispose dune structure 3D anime intgrant les mots-clefs les plus importants du blog.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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 !

Groupe Eyrolles, 2009


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

199

8 Widgets et colonne latrale

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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

201

8 Widgets et colonne latrale

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

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.
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

203

8 Widgets et colonne latrale

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

8 Widgets et colonne latrale

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

207

8 Widgets et colonne latrale

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Des widgets pour diffuser ses contenus


Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.
Groupe Eyrolles, 2009
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

8 Widgets et colonne latrale

WordPress 3

3 Prsentation : personnaliser visuellement le badge. 4 Sources : obtenir le code HTML qui pourra tre inclus dans la

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

211

8 Widgets et colonne latrale

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

chapitre

Groupe Eyrolles, 2009

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

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

WordPress 3

TECHNOLOGIE Lavenir du Flash


Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47
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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

215

9 Proposer des contenus multimdias

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

217

9 Proposer des contenus multimdias

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Le fonctionnement est rigoureusement identique dans le cas dun itinraire.


Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

219

9 Proposer des contenus multimdias

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

Figure 912

LURL YouTube est incluse directement dans le contenu.

Figure 913

Le lecteur YouTube remplace bien lURL.

Groupe Eyrolles, 2009


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

221

9 Proposer des contenus multimdias

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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

223

9 Proposer des contenus multimdias

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

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

225

9 Proposer des contenus multimdias

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

227

9 Proposer des contenus multimdias

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

9 Proposer des contenus multimdias

WordPress 3

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Publier un sondage via PollDaddy


Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

231

9 Proposer des contenus multimdias

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

233

9 Proposer des contenus multimdias

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

235

9 Proposer des contenus multimdias

WordPress 3

Publier un calendrier dvnements via Google Agenda


B http://www.google.com/calendar/

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

Figure 948

Rcupration du code HTML

Figure 949

Lagenda public intgr dans un article

Groupe Eyrolles, 2009


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

237

9 Proposer des contenus multimdias

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

chapitre

Groupe Eyrolles, 2009

10

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

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

WordPress 3

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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
Groupe Eyrolles, 2009
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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

243

10 Visibilit et communaut

WordPress 3

Les liens sponsoriss


B http://adwords.google.fr

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Cette solution nest cependant pas trs adapte aux blogs, dont le chiffre daffaires, lorsquil existe, ne permet gnralement pas dinvestir dans la publicit.
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

245

10 Visibilit et communaut

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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Les services de notification


Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

247

10 Visibilit et communaut

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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.
Groupe Eyrolles, 2009
user 177 at Wed Nov 10 04:01:48 +0100 2010

248

Google Webmaster Tools ; Bing Webmaster Tools ;


Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.
Groupe Eyrolles, 2009
user 177 at Wed Nov 10 04:01:48 +0100 2010

249

10 Visibilit et communaut

WordPress 3

Lextension Webmaster Tools Verification permet de renseigner trs facilement les diffrentes clefs de vrification via linterface Outils>Webmaster Tools.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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) ;

Groupe Eyrolles, 2009


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

251

10 Visibilit et communaut

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

253

10 Visibilit et communaut

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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!.

Groupe Eyrolles, 2009


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

255

10 Visibilit et communaut

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Facebook
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

257

10 Visibilit et communaut

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.
Groupe Eyrolles, 2009
user 177 at Wed Nov 10 04:01:48 +0100 2010

259

10 Visibilit et communaut

WordPress 3

Figure 1039

Bouton Devenir fan de la Page Facebook

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

261

10 Visibilit et communaut

WordPress 3

RACCOURCI Shortcode
MailPress offre la possibilit dutiliser le shortcode [mailpress] pour proposer le formulaire dinscription directement au sein du contenu dun article.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

En choisissant le nom blog-de-laul, ladresse de ce flux chez Feedburner devient http://feeds.feedburner.com/blog-de-laul.


Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

263

10 Visibilit et communaut

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Le-mail de confirmation dinscription peut tre paramtr (adresse dorigine, sujet, contenu) dans la sous-rubrique Communication Preferences.
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

265

10 Visibilit et communaut

WordPress 3

Google Friend Connect


B http://www.google.com/friendconnect/

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

Figure 1056

Cration dun nouveau site

Figure 1057

Configuration du gadget Membres

Groupe Eyrolles, 2009


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

267

10 Visibilit et communaut

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

s prsent, il devient possible denvoyer un message aux seuls membres disposant dun Mac.
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.
Groupe Eyrolles, 2009
user 177 at Wed Nov 10 04:01:48 +0100 2010

269

10 Visibilit et communaut

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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.
Groupe Eyrolles, 2009
user 177 at Wed Nov 10 04:01:48 +0100 2010

271

10 Visibilit et communaut

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

273

10 Visibilit et communaut

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

Figure 1070

Vue densemble des visiteurs

Figure 1071

Dure des visites

Groupe Eyrolles, 2009


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

275

10 Visibilit et communaut

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

chapitre

Groupe Eyrolles, 2009

11

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

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

279

11 Gagner de largent

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

11 Gagner de largent

WordPress 3

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

283

11 Gagner de largent

WordPress 3

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Enfin, la troisime solution, plus technique, consiste ajouter les lignes suivantes au fichier .htaccess :
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

285

11 Gagner de largent

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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">&larr;</span> Older posts', X 'twentyten' ) ); ?></div> <div class="nav-next"><?php previous_posts_link( X __( 'Newer posts <span class="meta-nav">&rarr;</span>', X 'twentyten' ) ); ?></div> </div><!-- #nav-below --> <?php endif; ?>

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

Groupe Eyrolles, 2009

Version modifie
<?php if ( $wp_query->max_num_pages > 1 ) : ?> <div id="nav-below" class="navigation"> <?php wp_paginate(); ?> </div> <?php endif; ?>

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

287

11 Gagner de largent

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 <!--nextpage-->.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

Figure 1116

La balise <!--nextpage--> 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

Groupe Eyrolles, 2009

laffili et de le rmunrer dun pourcentage pouvant aller jusqu 10 % du montant total de la commande.
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

289

11 Gagner de largent

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.
Groupe Eyrolles, 2009
user 177 at Wed Nov 10 04:01:48 +0100 2010

290

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

Figure 1120

La balise <OBJECT> correspond au code du widget.

Figure 1121

Widget Amazon plac dans la colonne latrale

Groupe Eyrolles, 2009


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

291

11 Gagner de largent

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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Le code HTML peut ensuite tre intgr au contenu dun article en utilisant lditeur HTML.
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

293

11 Gagner de largent

WordPress 3

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Une fois tous les champs obligatoires renseigns, la section Code gnr donne accs au code JavaScript placer dans la colonne latrale.
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

295

11 Gagner de largent

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

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

passant par longlet Solutions e-commerce. Il dispose alors dune interface pour personnaliser le don.
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.
Groupe Eyrolles, 2009
user 177 at Wed Nov 10 04:01:48 +0100 2010
B http://www.instinct.co.nz/e-commerce/

297

11 Gagner de largent

WordPress 3

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

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

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

chapitre

Groupe Eyrolles, 2009

12

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

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

WordPress 3

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

303

12 Spam et scurit

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

305

12 Spam et scurit

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

les fichiers transfrs sur le serveur (images, vidos, thmes, exten-

sions, etc.).
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

309

12 Spam et scurit

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.
Groupe Eyrolles, 2009
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

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

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.
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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
Groupe Eyrolles, 2009
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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

315

12 Spam et scurit

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

chapitre

Groupe Eyrolles, 2009

13

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

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

WordPress 3

EN CHIFFRES Rpercussions de la vitesse de


chargement sur le trafic

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Les sites dynamiques


Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.
Groupe Eyrolles, 2009
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.
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

321

13 Amliorer les performances

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.
Groupe Eyrolles, 2009
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
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

323

13 Amliorer les performances

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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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
Groupe Eyrolles, 2009
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.
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

325

13 Amliorer les performances

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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

327

13 Amliorer les performances

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

chapitre

Groupe Eyrolles, 2009

14

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

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009


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

WordPress 3

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

function nbmots_count($contenu) { $contenu_brut = strip_tags($contenu); $n = str_word_count($contenu_brut); $contenu .= '<br />Nombre de mots&nbsp; <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).']';

Groupe Eyrolles, 2009


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

333

14 Dvelopper sous WordPress

WordPress 3

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

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.
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47
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.
Groupe Eyrolles, 2009
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

14 Dvelopper sous WordPress

WordPress 3

Script : coursaction.php
<?php

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

/* 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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

337

14 Dvelopper sous WordPress

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 */

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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 ;
Groupe Eyrolles, 2009
user 177 at Wed Nov 10 04:01:48 +0100 2010

339

14 Dvelopper sous WordPress

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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

341

14 Dvelopper sous WordPress

WordPress 3

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

<?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

Groupe Eyrolles, 2009

Template gnrique : index.php


<?php

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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; }

Groupe Eyrolles, 2009


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

343

14 Dvelopper sous WordPress

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

Groupe Eyrolles, 2009


Figure 1411

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

Hooks proposs par la structure Thematic

345
14 Dvelopper sous WordPress

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.

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

Figure 1412

Interface Rglages>Theme Switch

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

Groupe Eyrolles, 2009

Exploiter les services web


Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

347

14 Dvelopper sous WordPress

WordPress 3

REST (Representational State Transfer) est extrmement populaire,

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

$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); ?>

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

Figure 1414

Larticle est bien publi.

Groupe Eyrolles, 2009


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

349

14 Dvelopper sous WordPress

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

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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.

Groupe Eyrolles, 2009


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

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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/

Groupe Eyrolles, 2009


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

WordPress 3

Thmes
http://wordpress.org/extend/themes/ http://themeshaper.com

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

Index
Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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
Groupe Eyrolles, 2009

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

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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
Groupe Eyrolles, 2009

H
hbergement 60

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

Ce document est la proprit exclusive de Algeria Educ (infoalimosal@gmail.com) - 16 Novembre 2010 15:47

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

Groupe Eyrolles, 2009

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

Index

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