<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>css 4 design &#187; Tag</title>
	<atom:link href="http://css4design.com/tag/tag/feed" rel="self" type="application/rss+xml" />
	<link>http://css4design.com</link>
	<description>Le blog de l&#039;intégrateur web</description>
	<lastBuildDate>Sun, 05 Feb 2012 18:10:56 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
	<atom:link rel='hub' href='http://css4design.com/?pushpress=hub'/>
		<item>
		<title>WordPress de A à Z &#8212; E comme Extensions (les plugins)</title>
		<link>http://css4design.com/wordpress-a-z-extension-plugin</link>
		<comments>http://css4design.com/wordpress-a-z-extension-plugin#comments</comments>
		<pubDate>Thu, 23 Jun 2011 19:28:39 +0000</pubDate>
		<dc:creator>Bruno Bichet</dc:creator>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[WordPress A à Z]]></category>
		<category><![CDATA[Android]]></category>
		<category><![CDATA[Base de données]]></category>
		<category><![CDATA[Basics]]></category>
		<category><![CDATA[Cache]]></category>
		<category><![CDATA[Category]]></category>
		<category><![CDATA[Commentaires]]></category>
		<category><![CDATA[Contact]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Edito]]></category>
		<category><![CDATA[Formulaire]]></category>
		<category><![CDATA[Google Analytic]]></category>
		<category><![CDATA[Google Maps]]></category>
		<category><![CDATA[Head]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[Iframe]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Pagination]]></category>
		<category><![CDATA[Performances web]]></category>
		<category><![CDATA[SEO]]></category>
		<category><![CDATA[Sitemap]]></category>
		<category><![CDATA[Smartphone]]></category>
		<category><![CDATA[SQL]]></category>
		<category><![CDATA[Tag]]></category>
		<category><![CDATA[TinyM]]></category>

		<guid isPermaLink="false">http://css4design.com/?p=10611</guid>
		<description><![CDATA[WordPress offre un environnement de publication complet, prêt à accueillir vos textes, vos images et les commentaires des lecteurs, dès l&#8217;installation. Cet aspect «Prêt à Publier» n&#8217;empêche pas d&#8217;avoir envie d&#8217;ajouter ou d&#8217;étendre les fonctionnalités du CMS grâce aux extensions qui s&#8217;installent en deux clics depuis l&#8217;interface d&#8217;administration. Parmi les quelques 15 000 plugins disponibles, voici les 11 que j&#8217;installe le plus souvent au lancement d&#8217;un site WordPress, et ceux que j&#8217;utilise moins souvent.  La saga «WordPress de A à Z» Logo « WordPress je thème » WordPress de A à Z… avec le Codex A comme Allons-y ! B comme [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 18px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fcss4design.com%2Fwordpress-a-z-extension-plugin">
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fcss4design.com%2Fwordpress-a-z-extension-plugin&amp;source=br1o&amp;style=normal&amp;service=bit.ly&amp;service_api=R_0c1ee4b64f105d1b2672690740a77d6a&amp;b=2" height="61" width="50" />
			</a>
		</div><p>WordPress offre un environnement de publication complet, prêt à accueillir vos textes, vos images et <a href="http://css4design.com/wordpress-a-z-discussion-commentaires">les commentaires</a> des lecteurs, dès l&#8217;installation. Cet aspect «Prêt à Publier» n&#8217;empêche pas d&#8217;avoir envie d&#8217;ajouter ou d&#8217;étendre les fonctionnalités du CMS grâce aux extensions qui s&#8217;installent en deux clics depuis l&#8217;interface d&#8217;administration. Parmi les quelques <a href="http://wordpress.org/extend/plugins/">15 000 plugins disponibles</a>, voici les 11 que j&#8217;installe le plus souvent au lancement d&#8217;un site WordPress, et ceux que j&#8217;utilise moins souvent. <span id="more-10611"></span></p>

<p><img title="wordpress-extension-plugin" src="http://css4design.com/wp-content/uploads/2011/06/wordpress-extension-plugin-e1308856680749.png" alt="Liste des mots dans l'article : wordpress, extension, plugin" width="633" height="277" /></p>

<h2>La saga «WordPress de A à Z»</h2>

<ol>
    <li><a rel="bookmark" href="../logo-wordpress-je-theme-creative-commons">Logo « WordPress je thème »</a></li>
    <li><a rel="bookmark" href="../creer-son-site-web-avec-wordpress-de-a-a-z-avec-le-codex">WordPress de A à Z… avec le Codex</a></li>
    <li><a rel="bookmark" href="../wordpress-a-z-allons-y">A comme Allons-y !</a></li>
    <li><a href="../creation-de-site-wordpress-de-a-a-z-b-comme-basics">B comme Basics</a> &#8212; ♥ Basics en bref et <strong><a title="Le thème Basics en action et liens de téléchargement" href="http://wp4design.com/">lien de téléchargement</a></strong>.</li>
    <li><a href="../wordpress-a-z-css">C comme CSS &amp; Composé HTML5</a></li>
    <li><a rel="bookmark" href="../wordpress-a-z-discussion-commentaires">D comme Discussion</a></li>
    <li>Vous lisez :<strong> E comme Extensions</strong></li>
    <li>Prochain article : F comme Function</li>
</ol>

<p>Découvrez les meilleurs plugins pour améliorer les performances de votre site, ajouter des scripts et des CSS dans la balise <code>head</code>, créer et gérer votre sitemap, gérer les commentaires, adapter votre site pour iPhone et Android, gérer vos statistiques avec Google Analytics, afficher les articles similaires, effectuer des opérations sur votre base de données, étendre les fonctionnalités de l&#8217;éditeur WYSIWYG TinyMCE, et bien d&#8217;autres choses encore !</p>

<h2>1. Système de cache</h2>

<p><strong><a href="http://wordpress.org/extend/plugins/w3-total-cache/">W3 Total Cache</a></strong> améliore l&#8217;expérience utilisateur en augmentant les performance de votre serveur en mettant en cache tous ce qui peut l&#8217;être pour réduire les temps de chargement et donc accélerer l&#8217;affichage des pages. Les éléments concernés par la mise en cache sont : les pages, les requêtes à la base de données. Cette extension se charge également de minifier les fichiers CSS et Javascript et gère votre CDN (<a href="http://fr.wikipedia.org/wiki/Content_Delivery_Network">Content Delivery Network</a>) le cas échéant.</p>

<p><object style="width: 633px; height: 390px;" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="633" height="390" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://www.youtube.com/v/rkmrQP8S5KY" /><embed height="390" width="633" src="http://www.youtube.com/v/rkmrQP8S5KY" style="width: 633px; height: 390px;" type="application/x-shockwave-flash"> </embed></object></p>

<p>Voir aussi <a href="http://wordpress.org/extend/plugins/wp-super-cache/">WP Super Cache</a> qui rend des services similaires.</p>

<h2>2. Ajouter du Javascript ou des CSS dans le head</h2>

<p><strong><a href="http://wordpress.org/extend/plugins/header-footer/">Header-Footer</a></strong> permet d&#8217;ajouter facilement du contenu dans la balise <code>head</code> et/ou dans le <em>footer</em> de votre site, sans toucher aux <em>templates</em>. Il suffit de copier-coller les codes dans les champs dédiés et voilà ! Pratique pour placer les nombreux scripts pour Google Analytics, Twitter et autre Widgets. Voir aussi <a href="http://wordpress.org/extend/plugins/add-to-header/">Add to Header</a> et <a href="http://wordpress.org/extend/plugins/general-headers/">General Headers &amp; Footers</a>.</p>

<h2>3. Générer un sitemap</h2>

<p><strong><a href="http://wordpress.org/extend/plugins/bwp-google-xml-sitemaps/">Better WordPress Google XML Sitemaps</a></strong> crée un plan de site au format XML normalisé par Google pour permettre aux moteurs de recherche d&#8217;avoir un instantané des liens présents sur votre site et des mises à jour à chaque article publié. Google prend votre sitemap en compte dans les <a href="https://www.google.com/webmasters/tools/">Google Webmaster Tools</a> à la rubrique <em>Configuration du site</em> → <em>Sitemaps</em>. Cette extension autorise le découpage de votre plan de site en plusieurs parties grâce à un fichier XML liant d&#8217;autres fichiers XML pour les pages, les billets, les catégories, les tags.</p>

<h2>4. Abonnement aux commentaires</h2>

<p><strong><a href="http://wordpress.org/extend/plugins/subscribe-to-comments-reloaded/">Subscribe To Comments Reloaded</a></strong> &#8212; C&#8217;est un classique trop souvent oublié qui permet à vos commentateurs de suivre les commentaires laissés sur un article en recevant un mail chaque fois qu&#8217;un nouveau commentaire est publié.</p>

<h2>5. Thème adapté aux smartphones</h2>

<p><strong><a href="http://wordpress.org/extend/plugins/wptouch/">WPtouch</a></strong> &#8212; Il s&#8217;agit ni plus ni moins d&#8217;un thème spécialement conçu pour les Smartphones (iPhone, Android, etc.). Très pratique et lisible, c&#8217;est le compagnon indispensable pour que votre site fasse bonne figure sur les périphériques mobiles tactiles à petits écrans. L&#8217;utilisateur a la possibilité de désactiver WPtouch pour retrouver l&#8217;affichage d&#8217;origine en activant/désactivant un bouton au bas de la page. Voir aussi <a href="http://wordpress.org/extend/plugins/wptap/">WPtap News Press</a>.</p>

<h2>6. Statistiques Google Analytics</h2>

<p><strong><a href="http://wordpress.org/extend/plugins/google-analytics-for-wordpress/">Google Analytics for WordPress</a></strong> est un outil très utile pour tirer le maximum de Google Analytics : de l&#8217;installation du script asynchrone au tracking des liens sortants, en passant par la mise en place de variables personnalisées pour affiner vos statistiques de fréquentation et d&#8217;utilisation de votre site internet par les visiteurs. J&#8217;utilise aussi régulièrement Header-Footer pour coller le code Google Analytics asynchrone dans le <code>head</code>.</p>

<p><object style="width: 633px; height: 390px;" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="633" height="390" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://www.youtube.com/v/tnUXzbvXxSQ" /><embed height="390" width="633" src="http://www.youtube.com/v/tnUXzbvXxSQ" style="width: 633px; height: 390px;" type="application/x-shockwave-flash"></embed></object></p>

<h2>7. Articles similaires mais presque</h2>

<p><strong><a href="http://wordpress.org/extend/plugins/yet-another-related-posts-plugin/">Yet Another Related Posts Plugin</a></strong> affiche une liste de liens en rapport avec l&#8217;article en cours de lecture. L&#8217;algorithme de <abbr title="Yet Another Related Posts Plugin" lang="fr">YARPP</abbr> est assez convaincant à partir du moment où les tags associés aux billets sont pertinents. Nombreuses options disponibles pour affiner la correspondance entre l&#8217;article et la liste de liens.</p>

<h2>8. TinyMCE Advanced</h2>

<p><strong><a href="http://wordpress.org/extend/plugins/tinymce-advanced/">TinyMCE Advanced</a></strong> transforme votre éditeur WordPress WYSIWYG en bête de course sous stéroïdes en ajoutant des boutons intéressants :</p>

<ul>
    <li>Ajout de vidéos,</li>
    <li>Découpage d&#8217;article en plusieurs parties (<em>Split Page</em>),</li>
    <li>Abréviation,</li>
    <li>Indice et exposant</li>
    <li>Tableaux,</li>
    <li>Options de listes ordonnées ou non-ordonnées,</li>
    <li>Etc.</li>
</ul>

<p><em>TinyMCE Advanced</em> autorise l&#8217;utilisation de la balise <code>iframe</code> (pratique pour insérer des plans en provenance de Google Maps) et les nouvelles balises HTML 5, sans que l&#8217;éditeur ne les supprime sans préavis. L&#8217;administration du plugin est assez intuitive : n&#8217;hésitez pas à faire glisser les boutons indésirables (couleur de texte, fond de couleur, etc.) vers le bas pour vous en débarrasser ;-)</p>

<p>J&#8217;apprécie particulièrement la possibilité d&#8217;ajouter des attributs à un élément en le sélectionnant puis en cliquant sur le bouton <em>Insérer/Modifier des attributs</em> pour ajouter un identifiant ou une classe CSS. Associé avec le bouton <em>Ancre</em>, ce bouton permet de faire des liens à l&#8217;intérieur d&#8217;un billet (note de bas de page, sommaire, etc.).</p>

<h2>9. Gestion de la base de données</h2>

<p><strong><a href="http://wordpress.org/extend/plugins/wp-dbmanager/">WP-DBManager</a></strong> est un plugin spécialisé dans la gestion de la base de données de votre  installation WordPress : réparation, sauvegardes (récurrentes ou pas),  restauration, optimisation. Permet également d&#8217;effectuer des requêtes  SQL. Voir aussi <a href="http://wordpress.org/extend/plugins/wp-db-backup/">WP-DB-Backup</a> comme alternative pour les opérations de sauvegarde. Nécessite moins de permissions que <em>WP-DBManager</em>, ce qui peut être utile sur certaines configurations de serveur.</p>

<h2>10. Plugin anti-spam</h2>

<p><strong><a href="https://akismet.com/">Akismet</a></strong> est pré-installé mais son activation dépend d&#8217;une clé que vous pouvez vous procurer plus ou moins gratuitement selon que vous êtes une entreprise avec plusieurs sites, un professionnel avec un seul site, ou bien un particulier. Ceux qui ont un compte WordPress.com peuvent se faire renvoyer leur clé Akismet en indiquant leur mail à l&#8217;adresse<a href="https://akismet.com/resend"> https://akismet.com/resend</a></p>

<h2>11. Formulaire de contact</h2>

<p><strong><a href="http://wordpress.org/extend/plugins/easy-contact/">Easy Contact</a></strong> propose un formulaire de contact minimaliste, facile à modifier. Idéal quand on a juste besoin d&#8217;un formulaire de contact sans prise de tête.</p>

<p>Ces 11 premières extensions sont celles que j&#8217;utilise le plus souvent.  Les suivantes &#8212; que j&#8217;utilise de temps à autre &#8211;  m&#8217;ont été rappelées  via <a href="http://twitter.com/br1o">Twitter</a> par @tbnv @MoOx @exootia @ID_referenceur @Nawylblog @pperistil @Delphine_D @fetard @Aether_Concept @agence_acs04 @nicofayet @nderambure @MaevaCecchi @laurentbayard @glloq8 @michaeldumontet @jverrecchia et @pixeletcetera que je remercie o/</p>

<ul>
    <li><strong><a href="http://wordpress.org/extend/plugins/wordpress-seo/">WordPress SEO</a></strong> &#8212; J&#8217;utilise peu (voire jamais) les plugins SEO pour WordPress : je préfère le système semi-automatique que j&#8217;ai mis en place dans le thème <a href="http://wp4design.com/">WordPress ♥ Basics</a> qui est une version simplifiée de celle présentée dans <a href="http://css4design.com/wordpress-une-meilleure-indexation-avec-not-at-all-in-one-seo"><strong>Not At All In One SEO</strong></a>. Voir aussi <a href="http://wordpress.org/extend/plugins/seo-ultimate/">SEO Ultimate</a>.</li>
    <li><strong><a href="http://wordpress.org/extend/plugins/contact-form-7/">Contact Form 7</a></strong> &#8212; Créez autant de formulaires que vous voulez avec les éléments dont vous avez besoin : champs text, file, boutons radio, menu `select`, etc. Une usine à gaz parfois indispensable ;-)</li>
    <li><strong><a href="http://wordpress.org/extend/plugins/no-category-parents/">No category parents</a></strong> &#8212; Supprimez le terme <em>category</em> de vos URL&#8217;s. Voir aussi <a href="http://wordpress.org/extend/plugins/wp-no-tag-base/">WP No Tag Base</a>. Notez que contrairement ce ce qu&#8217;on peut lire à propos de ce terme <em>category</em>, il n&#8217;est pas totalement sans intérêt. Dans le cadre d&#8217;un site centré sur un seul <em>sujet</em>, on pourra changer le terme <em>category</em> par le mot <em>sujet</em> pour l&#8217;avoir dans l&#8217;URL une bonne fois pour toute, sans être obligé de «bourrinner» les mots-clés dans les titres :-D</li>
    <li><strong><a href="http://wordpress.org/extend/plugins/wp-paginate/">WP-Paginate</a></strong> &#8212; Les liens «Billets précédents» et «Billets suivants» (dont j&#8217;apprécie personnellement la sobriété) peuvent cacher la richesse de votre contenu. Il est parfois préférable de montrer aux visiteurs que votre site en a sous { le talon aiguille | la santiag | le pied } grâce à ce plugin qui ajoute une pagination efficace pour naviguer entre les différents articles que vous avez publiés. Voir aussi <a href="http://wordpress.org/extend/plugins/wp-pagenavi/">WP-PageNavi</a>.</li>
    <li><strong><a href="http://wordpress.org/extend/plugins/simple-tags/">Simple Tags</a></strong> &#8212; La gestion des tags dans WordPress est un peu <em>cheap</em>. Ce plugin permet notamment : de renommer les tags par paquet, de lier automatiquement un terme dans un billet à un tag existant (un peu agaçant, mais cette fonction a trouvé son public&#8230;), d&#8217;avoir l&#8217;autocomplétion Ajax, de taguer des pages (et pas seulement les articles).</li>
</ul>

<h2>En bref</h2>

<p>Quand je vois que je n&#8217;utilise régulièrement que 0,1% des plugins disponibles, je me dis que je dois passer à côté de quelques bijoux. Je vous laisse la zone des commentaires pour compléter cette liste avec les extensions que vous installez régulièrement dans vos sites WordPress.</p>

<p>Merci de votre attention :-)</p>

<h3 class='related_post_title'>Articles sur le même sujet</h3>

<ul class='related_post'><li><a href='http://css4design.com/liens-javascript-jquery' title='390 ressources Javascript &amp; jQuery'>390 ressources Javascript &#038; jQuery</a></li><li><a href='http://css4design.com/petit-journal-du-web-septembre-2011' title='Le Petit Journal du Web &#8212; 09/2011'>Le Petit Journal du Web &#8212; 09/2011</a></li><li><a href='http://css4design.com/le-petit-journal-du-web-les-fruits-de-la-veille-ont-garde-leur-fraicheur' title='Le petit journal du web &#8212; Les fruits de la veille ont gardé toute leur fraicheur'>Le petit journal du web &#8212; Les fruits de la veille ont gardé toute leur fraicheur</a></li><li><a href='http://css4design.com/le-petit-journal-du-web-novembre-2011' title='Le petit journal du web &#8212; WordPress, développement web, etc.'>Le petit journal du web &#8212; WordPress, développement web, etc.</a></li><li><a href='http://css4design.com/wordpress-a-z-functions-php' title='WordPress de A à Z — F comme Functions.php'>WordPress de A à Z — F comme Functions.php</a></li></ul>
 <p><a href="http://css4design.com/?flattrss_redirect&amp;id=10611&amp;md5=df6fdf274a578baa88f4ab71a4632db4" title="Flattr" target="_blank"><img src="http://css4design.com/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://css4design.com/wordpress-a-z-extension-plugin/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		<atom:link rel="payment" href="http://css4design.com/?flattrss_redirect&amp;id=10611&amp;md5=df6fdf274a578baa88f4ab71a4632db4" type="text/html" />
	</item>
		<item>
		<title>Créer son site web avec WordPress de A à Z&#8230; avec le Codex</title>
		<link>http://css4design.com/creer-son-site-web-avec-wordpress-de-a-a-z-avec-le-codex</link>
		<comments>http://css4design.com/creer-son-site-web-avec-wordpress-de-a-a-z-avec-le-codex#comments</comments>
		<pubDate>Fri, 18 Mar 2011 13:49:25 +0000</pubDate>
		<dc:creator>Bruno Bichet</dc:creator>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[WordPress A à Z]]></category>
		<category><![CDATA[Codex]]></category>
		<category><![CDATA[Edito]]></category>
		<category><![CDATA[Logo]]></category>
		<category><![CDATA[Tag]]></category>
		<category><![CDATA[Template]]></category>
		<category><![CDATA[The Loop]]></category>
		<category><![CDATA[Thème]]></category>
		<category><![CDATA[Webdesign]]></category>

		<guid isPermaLink="false">http://css4design.com/?p=4405</guid>
		<description><![CDATA[La saga Créer son site web avec WordPress de A à Z&#8230; avec le Codex &#8212; et quelques ressources supplémentaires, ne boudons pas notre plaisir &#8211;, débutera avec «A, comme : Allons-y !» et se terminera avec «Z, comme Z&#8217;ai fini !». Cet article est un prologue, un galop d&#8217;essai, qui me permets de présenter rapidement les ressources essentielles concernant WordPress. Lors de la création d&#8217;un site (ou d&#8217;un blog, soyons fou !) avec WordPress, il m&#8217;arrive souvent de chercher des informations en dehors du Codex. Or, sept fois sur dix, le Codex propose la même chose, souvent en mieux. C&#8217;est une [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 18px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fcss4design.com%2Fcreer-son-site-web-avec-wordpress-de-a-a-z-avec-le-codex">
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fcss4design.com%2Fcreer-son-site-web-avec-wordpress-de-a-a-z-avec-le-codex&amp;source=br1o&amp;style=normal&amp;service=bit.ly&amp;service_api=R_0c1ee4b64f105d1b2672690740a77d6a&amp;b=2" height="61" width="50" />
			</a>
		</div><p>La saga <em>Créer son site web avec WordPress de A à Z&#8230; avec le Codex</em> &#8212; et quelques ressources supplémentaires, ne boudons pas notre plaisir &#8211;, débutera avec «A, comme : Allons-y !» et se terminera avec «Z, comme Z&#8217;ai fini !». Cet article est un prologue, un galop d&#8217;essai, qui me permets de présenter rapidement les ressources essentielles concernant WordPress. Lors de la création d&#8217;un site (ou d&#8217;un blog, soyons fou !) avec WordPress, il m&#8217;arrive souvent de chercher des informations en dehors du Codex. Or, sept fois sur dix, le Codex propose la même chose, souvent en mieux. C&#8217;est une véritable mine d&#8217;information qu&#8217;il est profitable de consulter en première intention avant d&#8217;aller voir ailleurs si le code est plus vert. A ce propos, de nombreuses ressources ne font que reprendre le Codex avec plus ou moins de bonheur, alors autant puiser la connaissance directement à la source.<span id="more-4405"></span></p>

<h2>Le bonheur est dans le Codex ?</h2>

<p>Les exemples de codes disponibles dans le <a href="http://codex.wordpress.org/Main_Page">Codex</a> répondent généralement à une majorité de besoins et il suffit souvent de les copier-coller pour obtenir un résultat satisfaisant. Pour aller plus loin, il suffira de vous rendre sur les <a href="http://wordpress.org/support/">forums de WordPress</a> pour poser vos questions. Les réponses y sont généralement très pointues si vous prenez la peine de bien poser vos questions ;-)</p>

<p><small>Les liens contenus dans ce billet pointent vers la version anglaise du Codex. Il existe néanmoins une <a href="http://codex.wordpress.org/fr:Accueil">version française</a>, plus ou moins complète et à jour (ce qui explique ma préférence pour la version originale). J&#8217;imagine aussi que la majorité des intégrateurs et des développeurs WordPress ont les compétences nécessaires dans la langue de <del>Richard Stallman</del> William Shakespeare pour se débrouiller ;-)</small></p>

<p>N&#8217;hésitez pas à vous rendre sur WordPress-fr, la <a href="http://www.wordpress-fr.net/">communauté francophone du CMS WordPress</a>. Ne ratez pas le blog qui présente les dernières <a href="http://www.wordpress-fr.net/category/blog">actualités autour de WordPress</a> et faites le tour de la planète WordPress avec une sélection des articles publiés par des <a href="http://www.wordpress-fr.net/planet/">blogueurs amoureux de WordPress</a>.</p>

<h2>Qu&#8217;est-ce qu&#8217;un thème WordPress ?</h2>

<p>Faire un site avec WordPress revient à faire un <a href="http://codex.wordpress.org/Theme_Development">thème WordPress</a>. On peut faire un thème totalement fonctionnel avec deux fichiers seulement : <code>index.php</code> et <code>style.css</code>.</p>

<p><a href="http://codex.wordpress.org/Using_Themes">→ Using Themes</a> explique rapidement ce qu&#8217;est un thème WordPress.</p>

<h3>style.css</h3>

<p>Le moteur de WordPress attend que votre feuille de style comporte deux ou trois lignes précisant quelques informations. Elles permettront de retrouver votre thème dans les options du panneau d&#8217;administration de votre site. Les tags permettent par ailleurs de qualifier votre thème dans le moteur de <a href="http://wordpress.org/extend/themes/">recherche de thème</a> en donnant des renseignements sur la couleur, le nombre de colonnes, etc., ainsi que sur les fonctionnalités intégrées :</p>

<ul>
    <li><a title="Post Thumbnails" href="http://codex.wordpress.org/Post_Thumbnails">Post Thumbnails</a> (vignettes miniatures)</li>
    <li><a title="Navigation Menus" href="http://codex.wordpress.org/Navigation_Menus">Navigation Menus</a> (menus de navigation)</li>
    <li><a title="Widgets API" href="http://codex.wordpress.org/Widgets_API">Widgets</a></li>
    <li><a title="Post Formats" href="http://codex.wordpress.org/Post_Formats">Post Formats</a> (format de billet)</li>
    <li><a title="Custom Backgrounds (page does not exist)" href="http://codex.wordpress.org/index.php?title=Custom_Backgrounds&amp;action=edit&amp;redlink=1">Custom Backgrounds</a> (fonds de page personnalisés)</li>
    <li><a title="Custom Headers" href="http://codex.wordpress.org/Custom_Headers">Custom Headers</a> (Image d&#8217;en-tête personnalisée)</li>
    <li><a title="Editor Style (page does not exist)" href="http://codex.wordpress.org/index.php?title=Editor_Style&amp;action=edit&amp;redlink=1">Editor Style</a> (style pour l&#8217;édition des billets)</li>
    <li><a title="Automatic Feed Links (page does not exist)" href="http://codex.wordpress.org/index.php?title=Automatic_Feed_Links&amp;action=edit&amp;redlink=1">Automatic Feed Links</a></li>
</ul>

<p>Voici le code permettant à votre CSS <code>style.css</code> d&#8217;être reconnue :
<pre>/*
Theme Name: WTF
Theme URI: http://css4design.com/wtf/
Description: WordPress Theme Framework
Author: Bibi
Author URI: http://css4design.com/a-propos/
Version: 0.1
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post
*/</pre>
En dehors de l&#8217;administration du site pour le choix du thème, il est possible de récupérer ces <a href="http://codex.wordpress.org/File_Header">informations d&#8217;en-tête de fichiers</a>. Pour afficher le nom de l&#8217;intégrateur et son site web, on peut utiliser la fonction <code>get_theme_data()</code> :
<pre>&lt;?php
$theme_data = get_theme_data(ABSPATH . 'wp-content/themes/default/style.css');
echo $theme_data['Title'];
echo $theme_data['Author'];
?&gt;</pre></p>

<h3>index.php</h3>

<p>Ce fichier contient les appels de fonction du moteur de WordPress et les boucles PHP permettant d&#8217;afficher les contenus. Ce seul fichier peut gérer tout les contextes d&#8217;affichage (archives, recherche, page d&#8217;erreur, etc.).  Dans la terminologie de WordPress, ces appels de fonctions s&#8217;appellent des <a href="http://codex.wordpress.org/Stepping_Into_Template_Tags">Template tags</a>, autrement dit, des marqueurs de modèles. Rien de très compliqué, il suffit de se laisser guider par le Codex.</p>

<p>Par exemple, pour afficher le nom du site et sa description, on fera appel à la fonction <a href="http://codex.wordpress.org/Template_Tags/bloginfo">bloginfo()</a> :
<pre>&lt;a href="&lt;?php bloginfo('url'); ?&gt;"&gt;
    &lt;?php bloginfo('name'); ?&gt;
&lt;/a&gt;</pre></p>

<h2>Comprendre la hiérarchie des templates</h2>

<p>Si le fichier <code>index.php</code> vu plus haut peut afficher tous les contextes d&#8217;affichage (accueil, pages, article seul, catégories, tags, etc.), il est possible de créer autant de fichiers que de contexte pour personnaliser vos templates. Ainsi, si une page.php existe, elle sera utilisée à la place de <code>index.php</code>, c&#8217;est la même chose pour <code>tag.php</code>, <code>search.php</code>, <code>category.php</code>, etc.</p>

<h6>Ce diagramme montre quel modèle de fichier est appelé pour générer une page en fonction de la hiérarchie des différents modèles.</h6>

<div id="attachment_9400" class="wp-caption alignleft" style="width: 444px"><a href="http://css4design.com/wp-content/uploads/2011/03/hierarchie-template-wordpress.png"><img class="size-large wp-image-9400" title="hierarchie-template-wordpress" src="http://css4design.com/wp-content/uploads/2011/03/hierarchie-template-wordpress-434x204.png" alt="" width="434" height="204" /></a><p class="wp-caption-text">La hiérarchie des templates dans WordPress. Cliquez pour agrandir l&#39;image.</p></div>

<p>A Chaque fichier PHP correspond une fonction permettant de tester si l&#8217;on se trouve dans un contexte d&#8217;affichage ou non. Par exemple, en utilisant uniquement le fichier <code>index.php</code>, on peut mettre un marquage HTML différent pour le contexte des catégories avec <code>is_category()</code> ; des pages avec <code>is_page()</code>, dans une page affichant l&#8217;article complet avec <code>is_single()</code>, etc.</p>

<p>→ Lire la page consacrée aux <a href="http://codex.wordpress.org/Conditional_Tags">tag conditionnels</a>.</p>

<h2>The Loop (1)</h2>

<p>Le coeur de WordPress est consitué par la boucle (<em>The Loop</em>). Il s&#8217;agit d&#8217;un ensemble de fonction qui collecte les variables nécessaires à l&#8217;affichage des informations comme le titre de l&#8217;article, la date de publication, l&#8217;auteur, le contenu du billet lui-même et tout un tas d&#8217;autres choses dont l&#8217;énumération serait bien fastidieuse.</p>

<p>Exemple minimal de boucle :
<pre>&lt;?php if (have_posts()) : ?&gt;
    &lt;?php while (have_posts()) : the_post(); ?&gt;
        &lt;!-- do stuff ... --&gt;
    &lt;?php endwhile; ?&gt;
&lt;?php endif; ?&gt;</pre>
→ Lire <a href="http://codex.wordpress.org/The_Loop">The Loop</a>.</p>

<p>(1) Les titres auxquels vous avez échappé jusque là : <em>Danse avec les loops</em> ; <em>She got the loop</em>, <em>Loop, y es tu ? T&#8217;en loop pas une&#8230;</em> ;-)</p>

<h2>Les marqueurs de modèle (Template Tags)</h2>

<p>Il s&#8217;agit des variables ramenées par la boucle. Leur utilisation est très simple : il suffit par exemple d&#8217;appeller <code>&amp;lt;?php the_title(); ?&amp;gt;</code> pour afficher le titre du billet. De nombreux marqueurs comme <code>the_title()</code> doivent être utilisés à l&#8217;intérieur de la boucle tandis que d&#8217;autres sont plus génériques et peuvent servir à afficher la barre latérale de votre site, comme <code>get_sidebar()</code> si le coeur vous en dit.</p>

<p>→ Lire <a href="http://codex.wordpress.org/Template_Tags">Template Tags</a>.</p>

<h2>WordPress &amp; Webdesign</h2>

<p>J&#8217;en profite également pour attirer votre attention sur mon petit blog <a href="http://wp4design.com">WordPress &amp; Webdesign</a> (<em>WP 4 Design</em>) où vous trouverez des nouvelles de WordPress sur le même principe que <a href="http://js4design.com">Javascript et Webdesign</a> (<em>JS 4 Design</em>) : des articles brefs mais courts.</p>

<p>Voici en avant-première une ébauche de logo pour l&#8217;en-tête de <em>WP 4 Design</em>. N&#8217;hésitez pas à me dire ce que vous en pensez. OK, c&#8217;est un peu plus qu&#8217;une ébauche, mais rien de définitif, surtout en ce qui concerne les couleurs.</p>

<div id="attachment_9409" class="wp-caption aligncenter" style="width: 625px"><a href="http://wp4design.com"><img class="size-full wp-image-9409 " title="logo-wordpress-je-theme" src="http://css4design.com/wp-content/uploads/2011/03/logo-wordpress-je-theme1.png" alt="" width="615" height="147" /></a><p class="wp-caption-text">Ebauche de logo pour WordPress &amp; Webdesign</p></div>

<p>Comme d&#8217;habitude, j&#8217;ai commencé par le commencement, c&#8217;est-à-dire le contenu avant de réfléchir à son organisation. En attendant d&#8217;avoir pris un rythme de croisière pour mettre en place un design digne de ce nom, j&#8217;ai installé <a href="http://wordpress.org/extend/themes/toolbox">Toolbox</a>. C&#8217;est un thème minimaliste HTML5 créé par Auttomatic croisé avec <a href="http://html5boilerplate.com/">HTML5 boilerplate</a>.</p>

<h3 class='related_post_title'>Articles sur le même sujet</h3>

<ul class='related_post'><li><a href='http://css4design.com/wordpress-a-z-allons-y' title='WordPress de A à Z &#8212; A comme Allons-y ! (on s&#8217;organise)'>WordPress de A à Z &#8212; A comme Allons-y ! (on s&#8217;organise)</a></li><li><a href='http://css4design.com/quel-tarif-pour-un-theme-wordpress' title='Quel tarif pour un thème WordPress ?'>Quel tarif pour un thème WordPress ?</a></li><li><a href='http://css4design.com/wordpress-a-z-extension-plugin' title='WordPress de A à Z &#8212; E comme Extensions (les plugins)'>WordPress de A à Z &#8212; E comme Extensions (les plugins)</a></li><li><a href='http://css4design.com/creation-de-site-wordpress-de-a-a-z-b-comme-basics' title='Création de site WordPress de A à Z &#8212; B comme Basics'>Création de site WordPress de A à Z &#8212; B comme Basics</a></li><li><a href='http://css4design.com/wordpress-je-theme' title='WordPress je thème'>WordPress je thème</a></li></ul>
 <p><a href="http://css4design.com/?flattrss_redirect&amp;id=4405&amp;md5=04f83f3f7ce23004e6f02d45f9dd5f2f" title="Flattr" target="_blank"><img src="http://css4design.com/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://css4design.com/creer-son-site-web-avec-wordpress-de-a-a-z-avec-le-codex/feed</wfw:commentRss>
		<slash:comments>21</slash:comments>
		<atom:link rel="payment" href="http://css4design.com/?flattrss_redirect&amp;id=4405&amp;md5=04f83f3f7ce23004e6f02d45f9dd5f2f" type="text/html" />
	</item>
		<item>
		<title>css4design vs Google &#8212; Petite histoire du positionnement sur le mot-clé CSS</title>
		<link>http://css4design.com/css4design-vs-google-petite-histoire-du-positionnement-sur-le-mot-cle-css</link>
		<comments>http://css4design.com/css4design-vs-google-petite-histoire-du-positionnement-sur-le-mot-cle-css#comments</comments>
		<pubDate>Tue, 12 Aug 2008 01:23:34 +0000</pubDate>
		<dc:creator>Bruno Bichet</dc:creator>
				<category><![CDATA[Google & Référencement]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[positionnement]]></category>
		<category><![CDATA[Quelques notes]]></category>
		<category><![CDATA[Référencement]]></category>
		<category><![CDATA[Requête]]></category>
		<category><![CDATA[Silo]]></category>
		<category><![CDATA[Siloing]]></category>
		<category><![CDATA[Tag]]></category>

		<guid isPermaLink="false">http://www.css4design.com/?p=618</guid>
		<description><![CDATA[Mes dernières notes sur le référencement ou le positionnement d&#8217;un site web sur Google ont alimenté l&#8217;article Petite Casquette&#8230; il y a un an environ. Depuis &#8212; à part des billets sur le facétieux PageRank &#8212; j&#8217;ai arrêté de scruter systématiquement le référencement de mes articles ou de vérifier le positionnement de mon blog sur les mots-clés qui me tiennent à cœur. Pour autant, je continue de noter mes idées sur la question. Je profite qu&#8217;il y ait du nouveau sur la requête CSS pour transformer un brouillon en article : Abracadabra ! Un coup d&#8217;œil dans le rétro Juin [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 18px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fcss4design.com%2Fcss4design-vs-google-petite-histoire-du-positionnement-sur-le-mot-cle-css">
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fcss4design.com%2Fcss4design-vs-google-petite-histoire-du-positionnement-sur-le-mot-cle-css&amp;source=br1o&amp;style=normal&amp;service=bit.ly&amp;service_api=R_0c1ee4b64f105d1b2672690740a77d6a&amp;b=2" height="61" width="50" />
			</a>
		</div><p>Mes dernières notes sur le référencement ou le positionnement d&#8217;un site web sur Google ont alimenté l&#8217;article <a title="Lien permanent vers Petite Casquette : j’ai référencé mon site sur plus de 400 moteurs de recherche et annuaires de liens, j’ai bon ?" rel="bookmark" href="/j-ai-reference-mon-site-sur-plus-de-400-moteurs-de-recherche-et-annuaires-j-ai-bon">Petite Casquette&#8230;</a> il y a un an environ. Depuis &#8212; à part des billets sur le <a href="http://www.css4design.com/google-le-pr-fouettard">facétieux PageRank</a> &#8212; j&#8217;ai arrêté de scruter systématiquement le référencement de mes articles ou de vérifier le positionnement de mon blog sur les mots-clés qui me tiennent à cœur. Pour autant, je continue de noter mes idées sur la question. Je profite qu&#8217;il y ait du nouveau sur la requête CSS pour transformer un brouillon en article : <em>Abracadabra !</em><span id="more-618"></span></p>

<h3>Un coup d&#8217;œil dans le rétro</h3>

<p><strong>Juin 2006 &#8211; Juillet 2007 &#8212; </strong>Un an après le lancement de mon blog sur l&#8217;intégration HTML et CSS, Google persiste à reléguer mon blog à la 100ème pages des résultats sur la requête CSS.</p>

<p><strong>Janvier 2008 &#8211;</strong> Je surprend mon blog qui se réveille entre la 50ème et la 100ème page. Je suis déçu, au point de penser qu&#8217;un blog c&#8217;est bien pour se placer sur le buzz et l&#8217;éphémère ou sur des requêtes comportant plusieurs termes, mais que ça ne vaut pas tripette pour se placer convenablement sur des requêtes renvoyant près de 430 000 000 de résultats !</p>

<p><strong>Juillet 2008</strong> &#8212; Je retourne alors près du radiateur pour <em>cancres ès SEO</em>, quand j&#8217;aperçois la page d&#8217;accueil de mon blog faire la belle à la 10ème page : je suis aux anges. Fébrile, je vérifie régulièrement ce nouveau positionnement, croyant à un bug dans la matrice. Mais non, plus les semaines passent, et plus mon blog danse la polka pour se stabiliser entre la 5ème et la 7ème page. Il se se balade aujourd&#8217;hui entre la 3ème et la 5ème page.</p>

<p>Mais ce n&#8217;est plus la page d&#8217;accueil du blog qui se pavane, mais un billet qui récapitule les <a href="http://www.css4design.com/css-toolbox">trucs et astuces CSS</a> que je garde à portée de souris. Une autre surprise m&#8217;attend : ma page d&#8217;accueil est toujours présente dans les SERP : elle surveille son rejeton depuis la 8ème page des résultats ! Que du bonheur ;)</p>

<p><strong>MAJ : 12 août 2008 :</strong> Ça évolue très vite puisque désormais la page d&#8217;accueil du blog se trouve en 3ème ou 4ème page des résultats sur la requête CSS ; la page qui recense les trucs et astuces CSS se trouve entre la 7ème et la 8ème page&#8230;</p>

<h3>Quelques pistes pour expliquer cette remontée</h3>

<p><strong>Octobre 2007 &#8211;</strong> Je passe de <a href="http://www.css4design.com/wordpress-vs-dotclear-migration-d-automne-dernier-round">Dotclear à WordPress</a> et je modifie le format des URL. Malheureusement pour moi, mon hébergement ne supporte pas l&#8217;URL Rewriting dont j&#8217;ai besoin pour mapper le bouzin. Et paf ! un référencement dans les choux qui a pesé lourd sur les visites en provenance de Google. Je découvre ensuite le plugin <a href="http://wordpress.org/extend/plugins/redirection/">Redirection</a> qui me permets de récupérer un peu de trafic en provenance des sites qui avaient fait des liens vers mes articles.</p>

<p>Les <a href="http://www.google.com/support/webmasters/bin/answer.py?hl=fr&amp;answer=93633">redirections 301</a> ont certainement permis à Google de retrouver ses petits car les visites en provenance du moteur reprennent leur vitesse de croisière. Malgré tout, le blog reste absent sur la requête CSS. Les choses évolueront tranquillement comme ça durant plusieurs mois.</p>

<h4>Changer de template pour améliorer le référencement ?</h4>

<p><strong>Mars 2008</strong> &#8212; Je me dis que les <a href="http://www.css4design.com/conception-dun-theme-magazine-de-a-a-z-a-comme-allons-y">thèmes magazine</a> sont idéals pour faire remonter des billets anciens qui en ont encore sous la botte (ou le taillon aiguille, selon votre sensibilité). Sur ce blog par exemple, l&#8217;essentiel des tutoriels <a href="http://www.css4design.com/articles/integration-web/xhtml-css">HTML et CSS</a> avec des <a href="http://www.css4design.com/exemples/">exemples grandeur nature</a> ont été rédigés pendant ma première année de <em>blogging</em>. A cette époque, les visiteurs étaient peu nombreux et il est plus que probable que quelques bons tutos aient été privés de<em> backlinks</em>.</p>

<p>Je passe une bonne partie de ma réflexion sur les thèmes magazine à tester différentes manières de faire remonter les bonnes feuilles d&#8217;un blog afin d&#8217;augmenter le nombre de pages vues et le temps passé sur le site. L&#8217;objectif étant de faire baisser un <a href="http://www.outil-webmaster.fr/taux_de_rebond_g29.html">taux de rebonds</a> qui frise parfois les 70% ! Il est très probable que Google utilise ces paramètres pour déterminer l&#8217;intérêt réel d&#8217;un site après que l&#8217;internaute a cliqué sur le lien qui lui semblait le plus pertinent.</p>

<h5>Le menu à onglets au service du SEO</h5>

<p><strong>Début juillet 2008</strong> &#8212; Je me décide enfin à transformer ce blog en blogzine : je mets en place un menu à onglets pour optimiser l&#8217;espace disponible pour afficher  :</p>

<ol>
    <li>Les catégories,</li>
    <li>Les derniers billets,</li>
    <li>Les articles les plus commentés,</li>
    <li>Les derniers commentaires avec les liens vers les sites des commentateurs et l&#8217;adresse du billet commenté à l&#8217;aide du plugins <a title="Aller sur le site de l’extension" href="http://blog.jodies.de/archiv/2004/11/13/recent-comments/">Get Recent Comments</a>,</li>
    <li>Les tags grâce à la fonction avancée de <a href="http://wordpress.org/extend/plugins/simple-tags/">Simple Tags</a>.</li>
</ol>

<p>La sidebar étant moins large sur les pages statiques et d&#8217;articles, je conserve uniquement :</p>

<ol>
    <li>Les rubriques,</li>
    <li>Les derniers billets</li>
    <li>Les articles les plus commentés,</li>
</ol>

<p>L&#8217;idée est la suivante : les visiteurs (plus de 60% du total) arrivant directement sur ces pages via Google se feront rapidement une idée sur les contenus disponibles et parcourront les pages du blog pour faire chuter le taux de rebond !</p>

<p><strong>Mi-juillet 2008 &#8211;</strong> Je remplace les articles les plus commentés par une double liste : les articles les plus lus depuis 6 mois, et les billets possédant le meilleur <a href="http://postrank.com/">PostRank</a> pour le mois en cours.</p>

<p><strong>9 août 2008 &#8211;</strong> Le nombre de pages vues a progressé. Par curiosité, je modifie à nouveau l&#8217;ordre des éléments présents dans ces 5 onglets avec dans l&#8217;ordre :</p>

<ol>
    <li>Les 50 tags les plus courants affichés par défaut avec <em>Simple Tags</em>,</li>
    <li>Les catégories,</li>
    <li>Derniers billets publiés,</li>
    <li>Liste des articles les plus lus depuis 6 mois, suivie de la liste des billets ayant le meilleur PostRank dans le mois en cours.</li>
    <li>Les derniers commentaires.</li>
</ol>

<p>L&#8217;idée est de voir si les visiteurs cliquent plus facilement sur les catégories parce qu&#8217;elles sont visibles ou s&#8217;ils iront les chercher dans l&#8217;onglet d&#8217;à côté. En même temps, je teste le pouvoir de cliquabilité des pages qui suivent un clic sur un tag par rapport à celles qui suivent un clic sur les catégories.</p>

<h5>Des résultats ?</h5>

<p>L&#8217;article sur les <em>Trucs et astuces CSS</em> (qui faisait partie des plus lus depuis les 6 derniers mois) c&#8217;est naturellement retrouvé dans le 3ème onglet ainsi que dans les SERP autour de la 5ème page sur la requête CSS. La page d&#8217;accueil déjà présente sur cette requête n&#8217;a pas disparue pour autant.</p>

<p>Ce qui est étonnant, c&#8217;est la rapidité avec laquelle Google semble avoir pris en compte cet article pour le propulser aussi haut, sachant que sur des requêtes généralistes à mot unique, Google privilégie plutôt les sites anciens avec un PR5 au moins.</p>

<p>Bon, en même temps, rien ne garantie que cette page tiendra longtemps cette position. A surveiller, donc.</p>

<h4>Les tags, c&#8217;est bon, mangez-en !</h4>

<p>Le deuxième point que je voulais partager avec vous, c&#8217;est la force des tags et la gourmandise dont fait preuve Google à leur égard. Sur ce blog, les tags n&#8217;ont pas toujours existé et j&#8217;ai pu observer que Google les indexait très rapidement en leur réservant un traitement de faveur. Pour une courte durée, certes, mais une partie des positions prises par les tags peuvent être occupées par des articles.</p>

<p>Comme si Google faisait un galop d&#8217;essai avec des URL de type <em>monblog.com/tag/montag</em> pour voir quels billets vont tirer leur épingle du jeu pour afficher ensuite une URL comme <em>monblog.com/monbillet</em> sur la même requête. Ce qui ne signifie pas pour autant que les auto-tags soient une bonne chose. Ça ralentit la lecture et c&#8217;est déceptif pour le visiteur qui s&#8217;attend à trouver une ressource unique et pertinente au lieu d&#8217;une liste de billets en plein milieu de sa lecture.</p>

<h5>Le hasard fait bien les choses, parait-il&#8230;</h5>

<p>Outre la mise en avant des tags dans le menu à onglets, j&#8217;ai utilisé les tags pour faire remonter les tutoriels toutes catégories confondues en utilisant le tag &laquo;&nbsp;Tutoriels&nbsp;&raquo; qu&#8217;ils ont en commun. Le but est d&#8217;améliorer la densité des termes liés à l&#8217;intégration HTML et CSS, à WordPress et au graphisme, qui forment le cœur de la ligne éditoriale de ce blog. Pour éviter d&#8217;encombrer la page d&#8217;accueil, je n&#8217;affiche qu&#8217;un seul article au hasard parmi ceux qui sont taggués &laquo;&nbsp;Tutoriels&nbsp;&raquo; car il n&#8217;y a pas que Google qui visite ce blog&#8230;</p>

<h3>Réorganisation de la page d&#8217;accueil &#8212; mise en silo (<em>siloing</em>)</h3>

<p>La densité <span style="text-decoration: line-through;">blogale</span> globale des mots-clés pertinents (au regard des objectifs SEO fixés), peut servir de fil conducteur pour organiser la mise en page. Pour cela, il faut analyser les thèmes abordés et les traitements éditoriaux qui leur sont réservés. Tout dépend de votre ligne éditoriale et il n&#8217;y a pas vraiment de recette toute faite. Voici cependant deux ou trois questions pour guider votre réflexion :</p>

<ul>
    <li><em>Vos billets sont ciblés et ont demandés peu ou prou le même travail rédactionnel et vous publiez régulièrement ?</em> Vous n&#8217;avez probablement pas besoin de réorganiser votre blog en profondeur.</li>
    <li><em>Vous manquez seulement de régularité ? </em>Vous pouvez vous contenter d&#8217;afficher l&#8217;intégralité de votre dernier billet sur la page d&#8217;accueil avec des liens vers vos anciens billets accompagnés d&#8217;un extrait, ou afficher les billets entiers les uns à la suite des autres (au risque de lasser vos visiteurs et de décourager la navigation pifométrique : le scrolling vertical)</li>
    <li><em>Vos billets sont composés d&#8217;articles de fond, de tutoriels, de brèves, de présentation de services, de listes de liens ? </em>Vous êtes bon pour le thème magazine ;)</li>
</ul>

<h4>Densité de mots-clés ?</h4>

<p>Pour en savoir plus sur cette fameuse densité de mots-clés, je vous invite à lire <a href="http://bababillgates.free.fr/index.php/7-facons-pour-faire-du-contenu-en-silo-seo-avance/">ce billet</a> de <a href="http://bababillgates.free.fr/">bababillgates</a> paru dernièrement à propos du <a href="http://www.outil-webmaster.fr/siloing_g58.html">siloing</a> pour améliorer le référencement d&#8217;un blog sur un certain nombre de mots-clés en fonction d&#8217;un objectif de vente.</p>

<blockquote>Le contenu en Silo ou le Siloing est une manière de structurer son blog pour permettre aux moteurs de recherche de reconnaitre que votre blog est lié à des mots clés ciblés. Cela vous permet d’être reconnu comme l’expert dans le domaine ou le sujet traité.</blockquote>

<p>Les techniques préconisées par <a href="http://bababillgates.free.fr/index.php/author/admin/">SeoMan</a> sont plus ou moins celles que j&#8217;applique sur ce blog :</p>

<ol>
<blockquote>
    <li>Les Tags,</li>
    <li>Les Catégories,</li>
    <li>Les Annuaires de produits (un peu obsolète mais utile dans ce cas),</li>
    <li><a title="plugin posts relatifs wordpress seo" href="http://blog.gonzaguedambricourt.com/2007/05/21/landingsites-encore-un-peu-amlior/" target="_blank">Plugin Posts Relatifs</a> (WordPress) / lié aux Tags,</li>
    <li>Lier uniquement à vos Landing Pages en utilisant des mots clés ciblés,</li>
    <li>Créer un sitemap pour chaque page de votre SILO,</li>
    <li><a title="plugin landing pages" href="http://www.logiste.be/hsi-landing-sites-ameliore/" target="_blank">La gestion des Landing Pages</a> (plugin  WordPress par exemple).</li>
</blockquote>
</ol>

<p>Trois remarques :</p>

<ol>
    <li>Je ne suis pas totalement convaincu par les annuaires de produits, mais j&#8217;imagine que c&#8217;est ce qui remplace la blogosphère en terme de <em>backlinks</em>&#8230;</li>
    <li>Pour profiter au mieux des plugins <em>billets en relation</em> et assimilés, il faut être rigoureux sur le <em>tagging</em> sous peine de voir apparaitre des billets à côté de la plaque. Ce qui est assez déceptif pour le visiteur et donne de surcroit une impression de bricolage nuisible à l&#8217;image du site : quelque chose semble cassé (ou alors il faut changer d&#8217;intitulé pour la liste).</li>
    <li>Bien que je ne l&#8217;utilise pas, je ne doute pas de l&#8217;efficacité du plugin <em>Landing Pages</em>. Mais je n&#8217;ai pas encore trouvé de blog qui parvenait à l&#8217;intégrer harmonieusement Landing Pages. Rien que le fait de placer la liste des billets répondant à la requête du visiteur au-dessus de l&#8217;article que Google à daigné placer devant les yeux du visiteur est une hérésie. Par ailleurs, ceux qui utilisent ce plugin ont souvent des pages surchargées et il ne fait (amha) qu&#8217;ajouter à la confusion.</li>
</ol>

<p>Grâce à <a href="http://wordpress.org/extend/plugins/simple-tags/">Simple Tags</a>, j&#8217;ai commencé un travail fastidieux : renommer certains tags, en supprimer d&#8217;autres, ajouter des tags à d&#8217;autres tags, jusqu&#8217;à obtenir des billets un peu plus en relation ! La restriction du nombre de mots-clés peut paraitre en contradiction avec la mise en silo qui demande des tags précis et nombreux. C&#8217;est une juste une question d&#8217;équilibre ;)</p>

<h3>Conclusion</h3>

<p>Ces quelques notes partent un peu dans tous les sens, mais cette impression reflète bien la réalité du référencement qui est fait des petites attentions portées à la rédaction des contenus et des micro-contenus, à l&#8217;ergonomie, aux statistiques, à la mise en page, à la promotion du blog, à la structure du site, etc. Référencer un site ou un blog, c&#8217;est être au four et au moulin tout en gardant un oeil sur l&#8217;horizon.</p>

<h3 class='related_post_title'>Articles sur le même sujet</h3>

<ul class='related_post'><li><a href='http://css4design.com/seo-optimiser-le-referencement-de-wordpress-avec-les-descriptions-de-tags' title='SEO &#8212; Optimiser le référencement de WordPress avec les descriptions de tags'>SEO &#8212; Optimiser le référencement de WordPress avec les descriptions de tags</a></li><li><a href='http://css4design.com/fonctions-metier-integrateur-web' title='Quelques notes sur les fonctions de l&#8217;intégrateur web et de l&#8217;intégratrice web'>Quelques notes sur les fonctions de l&#8217;intégrateur web et de l&#8217;intégratrice web</a></li><li><a href='http://css4design.com/quelques-notes-sur-la-balise-h1-avec-html5' title='Quelques notes sur la balise h1 avec HTML5'>Quelques notes sur la balise h1 avec HTML5</a></li><li><a href='http://css4design.com/composes-html-logo-baseline-potentiel-seo' title='8 composés HTML pour le logo et la « baseline » et leur potentiel SEO'>8 composés HTML pour le logo et la « baseline » et leur potentiel SEO</a></li><li><a href='http://css4design.com/apercu-instantane-google-webdesign-referencement-naturel' title='Aperçu instantané de Google, Webdesign et référencement naturel'>Aperçu instantané de Google, Webdesign et référencement naturel</a></li></ul>
 <p><a href="http://css4design.com/?flattrss_redirect&amp;id=618&amp;md5=9e480bbeebb18499c802cf2bdfd2208a" title="Flattr" target="_blank"><img src="http://css4design.com/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://css4design.com/css4design-vs-google-petite-histoire-du-positionnement-sur-le-mot-cle-css/feed</wfw:commentRss>
		<slash:comments>21</slash:comments>
		<atom:link rel="payment" href="http://css4design.com/?flattrss_redirect&amp;id=618&amp;md5=9e480bbeebb18499c802cf2bdfd2208a" type="text/html" />
	</item>
		<item>
		<title>WordPress 2.6 &#8212; un nouveau &quot;tag&quot; conditionnel avec has_tag()</title>
		<link>http://css4design.com/wordpress-26-un-nouveau-tag-conditionnel-avec-has_tag</link>
		<comments>http://css4design.com/wordpress-26-un-nouveau-tag-conditionnel-avec-has_tag#comments</comments>
		<pubDate>Fri, 08 Aug 2008 22:45:35 +0000</pubDate>
		<dc:creator>Bruno Bichet</dc:creator>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[Boucle]]></category>
		<category><![CDATA[has_tag()]]></category>
		<category><![CDATA[is_tag()]]></category>
		<category><![CDATA[Loop]]></category>
		<category><![CDATA[Tag]]></category>
		<category><![CDATA[Tutoriels]]></category>

		<guid isPermaLink="false">http://www.css4design.com/?p=537</guid>
		<description><![CDATA[La lecture du Codex est un exercice que je pratique régulièrement et qui réserve parfois de bonnes surprises. Aujourd&#8217;hui, c&#8217;est le cas avec has_tag(). Bien qu&#8217;absent de la liste des nouvelles fonctionnalités, ce tag conditionnel à bien fait son apparition avec WordPress 2.6. Comment et pourquoi l&#8217;utiliser ? Magnéto : Comment utiliser has_tag() ? Contrairement à is_tag() qui permet d&#8217;afficher un contenu spécifique lorsqu&#8217;une page de tags est demandée et qui peut être placé n&#8217;importe où dans votre template, has_tag(), qui est très utile pour détecter si un billet contient un ou plusieurs mots-clés, doit se situer dans la boucle [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 18px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fcss4design.com%2Fwordpress-26-un-nouveau-tag-conditionnel-avec-has_tag">
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fcss4design.com%2Fwordpress-26-un-nouveau-tag-conditionnel-avec-has_tag&amp;source=br1o&amp;style=normal&amp;service=bit.ly&amp;service_api=R_0c1ee4b64f105d1b2672690740a77d6a&amp;b=2" height="61" width="50" />
			</a>
		</div><p>La lecture du <a href="http://codex.wordpress.org">Codex</a> est un exercice que je pratique régulièrement et qui réserve parfois de bonnes surprises. Aujourd&#8217;hui, c&#8217;est le cas avec <a href="http://codex.wordpress.org/Conditional_Tags#A_Tag_Page">has_tag()</a>. Bien qu&#8217;absent de la <a href="http://codex.wordpress.org/Version_2.6">liste des nouvelles fonctionnalités</a>, ce tag conditionnel à bien fait son apparition avec <a href="http://fr.wordpress.org/">WordPress 2.6</a>. Comment et pourquoi l&#8217;utiliser ? Magnéto : <span id="more-537"></span></p>

<h3>Comment utiliser has_tag() ?</h3>

<p>Contrairement à <code>is_tag()</code> qui permet d&#8217;afficher un contenu spécifique lorsqu&#8217;une page de tags est demandée et qui peut être placé n&#8217;importe où dans votre template, <code>has_tag()</code>, qui est très utile pour détecter si un billet contient un ou plusieurs mots-clés, doit se situer dans la <a href="http://codex.wordpress.org/fr:La_Boucle">boucle WordPress</a>.</p>

<p>Pour ce faire, il suffit d&#8217;ajouter le code suivant juste après la boucle <code>while</code>&#8230;
<pre>&lt;?php while (have_posts()) : the_post(); ?&gt;
    &lt;?php if ( has_tag('News') ) continue; ?&gt;</pre>
&#8230; et les billets comportant le tag News ne s&#8217;afficheront pas.</p>

<h4>Plus d&#8217;informations</h4>

<ul>
    <li><code>has_tag()</code> repère tous les billets avec un tag quelconque,</li>
    <li><code>has_tag('News')</code> pour les billets tagués &laquo;&nbsp;News&nbsp;&raquo;,</li>
    <li><code>has_tag('News','Insolite','Humour')</code> pour isoler les billets possédant tous les tags fournis en argument.</li>
    <li><strong>MAJ :</strong> il semble que la ligne au-dessus ne fonctionne pas. Pour arriver au même résultat écrivez plutôt :
<pre>&lt;?php
    if ( has_tag('News') || has_tag('Humour') || has_tag('Insolites') ) continue;
?&gt;</pre>
</li>
</ul>

<h3>Pourquoi utiliser <code>has_tag()</code> ?</h3>

<p>Dans le cadre de la réorganisation quasi-permanente de mon blog, j&#8217;ai fusionné les catégories <em>En bref</em> et <em>News</em> avec <em>Revue de web</em> pour réduire le nombre de rubriques. Or, seul le premier billet de cette catégorie doit s&#8217;afficher en haut du blog sous l&#8217;intitulé <em>C&#8217;est vite dit&#8230;</em> ; les anciens billets de cette catégories sont affichés plus bas dans la barre latérale.</p>

<p>Par ailleurs, pour garder une certaine cohérence avec les autres rubriques du blog, j&#8217;ai reclassé les billets appartenant auparavant à <em>News</em> dans des catégories plus précises. Ainsi, une News taguée &laquo;&nbsp;News&nbsp;&raquo; concernant WordPress est désormais classée dans&#8230; <em>WordPress</em> !</p>

<p>L&#8217;effet de bord, c&#8217;est que toutes les petites News se sont affichées dans la suite des billets du blog, ce que je voulais éviter pour des raisons esthétiques et éditoriales : je ne veux pas que le lecteur de passage qui atterrit sur la Home ait le sentiment que le blog est composé uniquement de petites brèves sans grande valeur ajoutée ;)</p>

<p>Dans un cas comme ça, <code>has_tag()</code> s&#8217;avère donc indispensable pour isoler tous les billets partageant les mêmes tags sans se soucier de leurs catégories respectives. <strong>WordPress, quelle souplesse !</strong></p>

<p>Allez, <code>has_fun()</code> ^_^</p>

<h3 class='related_post_title'>Articles sur le même sujet</h3>

<ul class='related_post'><li><a href='http://css4design.com/wordpress-gerer-les-images-avec-les-champs-personnalises-customs-fields' title='WordPress &#8212; Gérer les images avec les champs personnalisés (Customs fields)'>WordPress &#8212; Gérer les images avec les champs personnalisés (Customs fields)</a></li><li><a href='http://css4design.com/wordpress-26-mes-news-carburent-a-press-this' title='WordPress 2.6 &#8212; Mes news carburent à &quot;Press This&quot; (chaine inside)'>WordPress 2.6 &#8212; Mes news carburent à &quot;Press This&quot; (chaine inside)</a></li><li><a href='http://css4design.com/danse-avec-les-loops-1-un-theme-wordpress-mis-a-nu' title='Danse avec les loops #1 : un thème WordPress mis à nu'>Danse avec les loops #1 : un thème WordPress mis à nu</a></li><li><a href='http://css4design.com/le-petit-journal-du-web-novembre-2011' title='Le petit journal du web &#8212; WordPress, développement web, etc.'>Le petit journal du web &#8212; WordPress, développement web, etc.</a></li><li><a href='http://css4design.com/wordpress-a-z-extension-plugin' title='WordPress de A à Z &#8212; E comme Extensions (les plugins)'>WordPress de A à Z &#8212; E comme Extensions (les plugins)</a></li></ul>
 <p><a href="http://css4design.com/?flattrss_redirect&amp;id=537&amp;md5=a839e3d086364407ebb1e49843d0619c" title="Flattr" target="_blank"><img src="http://css4design.com/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://css4design.com/wordpress-26-un-nouveau-tag-conditionnel-avec-has_tag/feed</wfw:commentRss>
		<slash:comments>13</slash:comments>
		<atom:link rel="payment" href="http://css4design.com/?flattrss_redirect&amp;id=537&amp;md5=a839e3d086364407ebb1e49843d0619c" type="text/html" />
	</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Page Caching using disk: enhanced (User agent is rejected)

Served from: css4design.com @ 2012-02-08 10:52:43 -->
