Dans WordPress, les marqueurs de modèle (tags) permettent de personnaliser le contexte en affichant le titre de l’article, l’auteur, la date de publication, la catégorie, les tags, les descriptions, etc. Toutefois, l’intégrateur WordPress a parfois besoin d’ajouter des chaines de caractères qui ne sont pas prévues dans le modèle de données. Il peut s’agir d’un en-tête de section, d’un châpo, ou de tout autre élément sorti de votre imagination.

Les solutions ne manquent pas :

• Chaines en dur dans le code,
• Champs personnalisés,
• Variables modifiables via un fichier de configuration ou une page d’administration personnalisée,
• Fonctions d’internationalisation.

Dans le cadre de WordPress Basics, c’est cette dernière solution que j’ai mise en oeuvre :

<header>
    <hgroup>
        <h1 class="section-title"><?php _e( 'Do you want to know more?', 'basics' ); ?></h1>
        <h2 class="section-description"><?php _e( 'Find here all the latest news about Basics', 'basics' ); ?></h2>
    </hgroup>
</header>

D’après l’article Avoid variables, create strings: they will return the favor paru initialement sur WordPress Basics.

Articles sur le même sujet

• WordPress de A à Z — F comme Functions.php
• Mise à jour du thème WordPress ♥ Basics avec HTML5 Boilerplate 2
• WordPress de A à Z — E comme Extensions (les plugins)
• Le petit journal du web — WordPress, Couleur, CSS, Page Speed, 404
• Soyez « ♥ Basics »

Si vous avez hâte de voir à quoi ressemble WordPress 3.3 pour découvrir les nouveautés concoctées par l’équipe qui développe notre CMS préféré, voici ma petite craduction de l’article WordPress 3.3: The 11 Most Important New Features paru sur Mashable. Parmi les nombreuses améliorations apportées par cette nouvelle version, on peut noter les éléments suivants : redesign de la barre d’administration, nouveau menu A propos, nouvelle section d’aide, Tooltips, Media Uploader en HTML5, menus déroulants pour alléger WordPress.  Je vous invite à consulter l’article original qui présente notamment les captures d’écran sous la forme d’une galerie très pratique.

Pour ceux d’entre nous qui travaillent chaque jour avec WordPress, il est étonnant de constater à quel point ce système de gestion de contenus a évolué en quelques années pour passer du statut de simple outil de blog à un système de publication complet qui n’a rien a envier aux ténors du marché.

Aujourd’hui nous allons jeter un oeil sur les nouvelles fonctionnalités de WordPress 3.3 qui, après des mois de tests en version bêta, devrait sortir sous peu.

Comparées à la sortie de WordPress 3.0 qui avait introduit des fonctionnalités majeures — comme les Custom Post Types ou le mode multi-sites –, les améliorations proposées par cette version 3.3 pourront sembler moins révolutionnaires. Toutefois, dans les faits, cette nouvelle version va impacter les utilisateurs comme aucune autre auparavant.

En effet, la plupart des améliorations sont destinées à l’expérience utilisateur pour tous les utilisateurs, et pas seulement pour celles et ceux d’entre nous qui construisent des sites web. Nos clients verront eux aussi des changements dans leur façon d’utiliser WordPress.

Voici les changements principaux qui arrivent avec WordPress 3.3 :

Barre d’administration

Ce redesign de la barre d’administration apporte des améliorations pratiques et stratégiques grâce à la suppression de nombreux éléments ; ceux qui restent sont judicieusement placés. Le champs de recherche et le menu «Apparence» disparaissent, tandis que le menu utilisateur est déplacé sur le côté droit, à l’image de ce que fait Google.

L’utilisation d’une ombre plus sombre et plus intense rend cette barre d’administration plus présente.

Nouvelle barre d'administration dans WordPress 3.3

Menu «A propos»

L’icône «W» située en haut à gauche cache un nouveau menu composé de liens «A propos» de WordPress, comme : les crédits, la licence, la documentation et le forum. Ces liens étaient auparavant cachés dans le pied de page, et donc peu visible ( NDT : ou placés dans la blogroll par défaut).

Menu A propos dans WordPress 3.3

Section d’aide améliorée

Premièrement, le lien «Aide» n’est plus relégué dans un coin de l’administration. Il est désormais bien visible, au centre de la nouvelle barre d’administration.

Ensuite, ce lien recèle une section retructurée avec une navigation sous forme d’onglets utilisables par les développeurs pour documenter leurs plugins ou leurs thèmes.

Menu d'aide dans WordPress 3.3

Bulle d’information (Tooltips)

Ces nouveaux Tooltips pourront sembler légèrement agaçants pour de nombreux utilisateurs, mais pourront être très utiles à d’autres.

Ces bulles d’informations guiderontles utilisateurs à travers les nouvelles fonctions de WordPress. Vous en verrez quelques-unes pointer vers la barre d’administration immédiatement après la mise à jour de votre installation.

Comme pour la section d’aide, les développeurs pourront utiliser les bulles d’informations pour leurs propres tours d’horizons. Les développeurs de thèmes trouveront là un moyen de présenter rapidement les fonctionnalités de leurs produits, comme l’a fait le développeur Yoast pour son plugin Yoast WordPress SEO récemment mis à jour.

Tooltips dans WordPress 3.3

Media Uploader

Nous étions nombreux à attendre une mise à jour du «Media Uploader». Les nouveautés qui touchent ce module concernent principalement : l’ajout du Drag & Drop pour glisser-déposer des images ou des documents PDF directement de votre bureau dans WordPress ; et le remplacement de Flash par HTML5 et Silverlight, pour offrir une plus large compatibilité au niveau des plateformes.

Media Uploader HTML5 dans WordPress 3.3

Menus déroulants

Les nouveaux menus déroulants vous feront économiser de nombreux clics pour accéder aux sous-menus. Cela peut sembler sans conséquence, mais si vous utilisez WordPress pendant de longues périodes, vous avez certainement déjà remarqué que le tableau de bord peut vite se transformer en usine à clics !

Les menus déroulants permettent aussi d’améliorer l’expérience visuelle, surtout lorsque vous vous connectez au site d’un client qui contient une foule de menus déroulés par défaut. Désormais, seul le menu actif est déroulé avec ses sous-menus.

Menus déroulants dans WordPress 3.3

Autres améliorations notables dans WordPress 3.3

Maintenant que nous avons fait le tour des changements les plus visibles, voyons rapidement ce qu’il y a sous le capot pour les développeurs de sites.

• Maquette adaptable : il s’agit juste de poser les bases pour WordPress 3.4, mais dans cette version 3.3 le menu gauche disparait automatiquement sur les petits écrans.
• Liens permanents : au lieu de saisir `/%postname%/` WordPress 3.3 propose un menu déroulant. Plus important, les problèmes de performances sont résolus. Ce réglage est donc désormais utilisable sans problème de performances, même sur les sites composés d’un très grand nombres d’articles ou de pages.
• jQuery 1.7.1 et jQuery UI 1.8.16 : jQuery est mis à jour et toutes les fonctionnalités de jQuery UI sont disponibles et prêtes à être «enqueued» dans WordPress 3.3.
• API de l’éditeur : les développeurs de plugins peuvent maintenant personnaliser l’éditeur de WordPress, y compris au niveau des boutons de TinyMCE. Il est même possible d’ajouter des éditeurs additionnels.

Soyez à jour !

Comme toujours, il est recommandé de mettre vos  sites web à jour avec la dernière version de WordPress dès qu’elle est disponible. Gardez donc un oeil sur la sortie de WordPress 3.3 pour commencer à découvrir ses nouvelles fonctionnalités.

Traduit d’après l’article de Brian Casel (@CasJam sur Twitter), fondateur de CasJam Media. Article original en anglais paru sur Mashable.com sous le titre WordPress 3.3: The 11 Most Important New Features.

Articles sur le même sujet

• 390 ressources Javascript & jQuery
• WordPress de A à Z — F comme Functions.php
• WordPress de A à Z — E comme Extensions (les plugins)
• WordPress de A à Z — C comme CSS & Composé HTML5
• Création de site WordPress de A à Z — B comme Basics

Dans WordPress, de nombreuses classes CSS sont impliquées dans la gestion des images. Plusieurs options sont disponibles depuis l’interface des médias, chacune ajoutant une classe CSS dans les éléments HTML img ou div (si une légende est spécifiée). Cet article propose un rapide aperçu des classes CSS permettant d’aligner les images avec les styles CSS associés, de gérer les formats d’images ainsi que les légendes. Nous verrons aussi comment, à partir des classes générées automatiquement par WordPress, utiliser les classes multiples — comme .classe1.classe2 { … } sans espace entre .classe1 et .classe2 — pour faire face à tous les cas de figure concernant les formats, les alignements ou la présence ou non de légendes.

"Ajouter une image" depuis l'interface d'administration de WordPress

Classes CSS pour aligner les images

• Aucun — .alignnone {}
• Gauche — .alignleft {}
• Centre — .aligncenter {}
• Droite — .alignright {}

Les styles associés (à titre indicatif)

img.alignnone {
    margin: 0 1em;
}
img.alignleft {
    float: left;
    margin-right: 1.5em;
}
img.aligncenter {
    display: block;
    margin: 1em auto;
}
img.alignright {
    float: right;
    margin-left: 1.5em;
}

Formats des images

Les formats (tailles) sont précisés dans Réglages → Médias.

• Miniature — .size-thumbnail {}
• Moyenne — .size-medium {}
• Large — .size-large {}
• Taille originale — .size-full {}

A ce niveau, on peut déjà s’amuser avec les classes multiples en stylant différemment les images selon leurs alignements et leurs formats :

• .size-thumbnail.alignnone {}
• .size-medium.alignleft {}
• .size-large.aligncenter {}
• .size-full.alignright {}
• Etc.

Légende (caption)

Lorsqu’on ajoute une légende, notre image est enveloppée dans une balise div ; une balise p englobe la légende. Les classes impliquées dans l’alignement de l’image sont déplacées sur cette balise div qui contient déjà une classe .wp-caption. Ce qui nous donne les combinaisons suivantes :

• .wp-caption.alignright {}
• .wp-caption.alignleft {}
• .wp-caption.alignnone {}
• .wp-caption.aligncenter {}
• .wp-caption.alignnone {}

Les classes CSS impliquées dans le format restent chevillées à la balise img. Ce qui élargit encore notre terrain de jeu :

• .wp-caption.alignright .size-thumbnail {}
• .wp-caption.alignleft .size-medium {}
• .wp-caption.alignnone .size-large {}
• .wp-caption.aligncenter .size-full {}
• etc.

(Je vous fais grâce de toutes les combinaisons dont l’intérêt est tout relatif).

Classes multiples dans IE6 ?

N’hésitez pas à lire le billet 3 fonctions Javascript pour lutter contre le bug des classes multiples dans IE6 pour utiliser les classes multiples dans IE6 : une fonction simple avec jQuery, une autre plus évoluée (toujours avec jQuery) et une dernière fonction en pur Javascript pour ne pas charger la mule !

Articles sur le même sujet

• IE6 — 3 fonctions Javascript pour lutter contre le bug des classes multiples
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• Le petit journal du web — WordPress, développement web, etc.
• Le Petit Journal du Web — 09/2011
• Mise à jour du thème WordPress ♥ Basics avec HTML5 Boilerplate 2

Voici le 7^ème article de la série WordPress de A à Z qui a débuté le 18/03/2011 avec «Créer son site web avec WordPress de A à Z… avec le Codex». «F comme Functions» propose un aperçu des fonctions disponibles dans le fichier functions.php situé à la racine de la plupart des thèmes WordPress, comme c’est le cas dans WordPress Basics, dont je vais m’inspirer dans la suite de cet article. Ce fichier se comporte comme un plugin. Il est chargé pendant la phase d’initialisation de WordPress, à la fois pour les pages internes à l’administration du site et pour les pages visibles pour l’ensemble des visiteurs.

Le fichier functions.php est chargé automatiquement par WordPress lorsqu’il est présent à la racine du thème. Il est utilisé dans plusieurs cas, parmi lesquels :

• Activation des fonctionnalités du thème prévues par WordPress (menus de navigation, miniatures, formats de billet, en-tête et fond personnalisés, etc.),
• Définition des fonctions personnalisées pour les intégrer ensuite dans vos modèles de page,
• Mise en place des options dans la partie administration du site (options de style, de couleur, ajout de menus, modification de variables, etc.)

La souplesse de ce fichier functions.php peut vite se transformer en casse-tête si l’on ne prend pas soin de l’organiser. Sans compter qu’il faut aussi penser à la possibilité de créer un thème enfant. La nouvelle version de WordPress Basics est livrée avec le Child Theme Beyond Basics.

Le fichier functions.php de ce dernier est chargé avant celui qui est présent dans Basics, le thème parent. En effet, contrairement à ce qui se passe pour la feuille de style style.css du thème parent qui est complèment ignorée au bénéfice de celle qui est présente dans le thème enfant, le cas échéant, le fichier functions.php du thème parent est chargé, lui.

Pour ajouter une fonction de votre cru à Beyond Basics, il suffit de la créer dans le fichier functions.php et elle sera chargée comme celles qui se trouvent dans le thème parent.

Pour modifier une fonction existante, il suffira de la déclarer avec le même nom dans votre fichier functions.php et voilà ! Dans WordPress Basics, je vérifie que la fonction n’existe pas déjà avant de l’utiliser grâce à la condition if ( ! function_exists( 'ma_fonction' ) ) :

if ( ! function_exists( 'ma_fonction' ) ) :
    function ma_fonction() {
        [...]
    }
endif;

functions.php

Pour des questions de modularité et pour faciliter la maintenance, le fichier functions.php ne comporte que des appels à des fichiers externes situés dans le répertoire inc/ (à partir de la version 0.2.7.1) :

<?php
require( dirname( __FILE__ ) . '/inc/functions-setup.php' );
require( dirname( __FILE__ ) . '/inc/functions-filter-action.php' );
require( dirname( __FILE__ ) . '/inc/functions-display.php' );
require( dirname( __FILE__ ) . '/inc/functions-comment.php' );
?>

functions-setup.php

Ce premier fichier initialise quelques variables (largeur pour la zone de contenu, paramètres pour la traduction du thème) et active les fonctions embarquées dans le coeur de WordPress via la fonction basics_setup(). Voici la liste des fonctionnalités disponibles dans WordPress :

• Post Thumbnails
• Navigation Menus
• Widgets
• Post Formats
• Custom Backgrounds
• Custom Headers *
• Editor Style
• Automatic Feed Links

• La fonction Custom Headers n’est pas incluse dans Basics. Elle sera intégrée plus tard, soit dans Basics, soit dans Beyond Basics, selon la préférence du plus grand nombre.

Rien que de très classique, donc, si ce n’est que j’en ai profité pour renommer le fichier editor-style.css en markup.css via la fonction :

/**
 * Add support to styles the visual editor
 * to match the front theme style
 */
add_editor_style( 'markup' );

functions-filter-action.php

Les filtres et les actions font partie de la boite à outils de l’intégrateur WordPress. Ils permettent de modifier le comportement de WordPress à différentes étapes de son lancement. S’ils sont regroupés dans le même fichier, c’est parce qu’ils appartiennent à la grande famille de la Plugins API. Ce sont des Hooks (crochets) que les développeurs de WordPress ont placé à des endroits stratégiques. Ils fonctionnement globalement de la même manière.

Les filtres

Les filtres sont des accroches (hooks) permettant de modifier les contenus avant de les insérer dans la base de données ou de les afficher dans le navigateur. Il existe de très nombreux hooks disponibles. Parmi les plus utilisés dans un site WordPress, on trouve notamment the_content ou the_excerpt mais aussi body_class qui peut s’avérer très utile.

Grâce à la fonction add_filter() on pourra modifier the_content() comme bon nous semble. L’exemple qui suit modifie la fonction the_content(). Une fois le filtre ajouté, elle affichera une icône au début de chaque article :

add_filter( 'the_content', 'my_the_content_filter', 20 );
function my_the_content_filter( $content ) {
    if ( is_single() )
        $content = sprintf(
        '<img class="post-icon" src="%s/images/post_icon.png" alt="Post icon" title=""/>%s',
        get_bloginfo( 'stylesheet_directory' ),
        $content
    );
    return $content;
}

Les actions

Comme les filtres, les actions sont des hooks disséminés dans le coeur de WordPress qui s’activent à des étapes spécifiques lors de l’affichage d’une page ou d’une action de la part de l’utilisateur connecté à l’administration du site. Ils s’utilisent comme les filtres via la fonction add_action() :

/**
 * Register widgetized area and update sidebar with default widgets
 */
add_action( 'widgets_init', 'basics_widgets_init' );
if ( ! function_exists( 'basics_widgets_init' ) ) :
function basics_widgets_init() {
    register_sidebar( array (
        'name' => __( 'One', 'basics' ),
        'id' => 'war-1',
        'description' => __( 'Widgets Area One', 'basics' ),
        'before_widget' => '<div id="%1$s" class="%2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ) );
}
endif;

Actions et filtres dans Basics

• remove_filter()  – Supprime la balise <p> dans les catégories ou les tags,
• basics_page_menu_args() — Affiche un lien vers la page d’accueil dans wp_nav_menu() ,
• basics_excerpt_length() — Limite l’extrait (the_excerpt) à 52 characters,
• basics_continue_reading_link() — Affiche un lien « Lire la suite » pour les extraits,
• basics_auto_excerpt_more() — Remplace   »[...] » par trois petits points + basics_continue_reading_link(),
• basics_custom_excerpt_more() — Personnalise le lien « Lire la suite » pour les extraits personnalisés,
• basics_widgets_init() — Enregistre les zones de widgets,
• basics_body_class() — Ajoute une classe personnalisée à la fonction body_class(),
• basics_img_caption_shortcode() — Utilise les balises <figure> et <figcaption> avec le shortcode image,
• basics_change_mce_options() — Ajoute le support pour la balise <iframe> dans l’éditeur Wysiwyg,
• basics_jquery() — Charge jQuery dans le footer,
• basics_scripts() — Charge d’autres scripts dans le footer après jQuery.

functions-display.php

C’est là que j’ai regroupé les fonctions appelées dans les différents fichiers du thème Basics :

• basics_content_nav() – Liens pages suivantes et précédentes,
• basics_title() – Optimisation du contenu de la balises <title>  (SEO),
• basics_description() – Optimisation de la balise <meta description> (SEO),
• basics_section_heading() – Titres de section personnalisés en fonction du contexte d’affichage,
• basics_posted_on() – Informations présentes dans le <header> des articles,
• basics_posted_in() – Informations présentes dans le <footer> des articles,
• basics_favicons() — Affiche les liens des favicons dans les meta tags,
• basics_extra_head() — Affiche des meta tags personnalisés,
• basics_i_love_wordpress() — Affiche l’icône du thème Basics dans le footer,
• basics_search_autofocus() — Affiche l’attribut « autofocus » dans le champs input du formulaire de recherche.

functions-comment.php

Deux fonctions sont chargées de modifier le marquage HTML par défaut pour y ajouter des morceaux entiers de sémantique HTML5 et un peu d’accessiblité avec des petits bouts d’ARIA :

1. basics_comments() — Contient le modèle pour l’affichage des commentaires et des trackbacks . Elle est utilisée en tant que fonction de rappel de la fonction wp_list_comments.
2. basics_respond() — Affiche le formulaire permettant de laissser un commentaire.

L ’idée de base étant d’obtenir un marquage HTML5 pour l’affichage des commentaires avec la balise <article>, mais aussi pour le formulaire permettant aux visiteurs de laisser un commentaire pour profiter des nouveaux champs et attributs de formulaires à la mode de HTML5.

En bref

Ce fichier functions.php s’avère donc très utile. Toutefois, avant de le remplir au maximum, on peut se demander si un ou plusieurs plugins ne serait pas plus adaptés, vu que ce fichier fonctionne grosso modo comme un plugin géant. N’hésitez pas à décortiquer le fichier functions.php de Basics et de Beyond Basics (très léger pour le moment) et à me faire part de vos remarques et suggestions pour améliorer le bouzin :-)

→ Rendez-vous sur WordPress & Webdesign pour télécharger Basics et Beyond Basics.

Articles sur le même sujet

• WordPress de A à Z — E comme Extensions (les plugins)
• 390 ressources Javascript & jQuery
• WordPress 3.3 — 10 nouvelles fonctionnalités importantes
• Mise à jour du thème WordPress ♥ Basics avec HTML5 Boilerplate 2
• HTML5 Boilerplate + Toolbox + Codex = WordPress Basics

Je commençais à m’endormir sur la version 0.2.5 de mon thème WordPress ♥ Basics quand la version 2 de HTML5 Boilerplate a fait son apparition au beau milieu du mois d’août. Cette nouvelle version de HTML5 Boilerplate apporte de nombreux changements, dont le plus important est peut-être le remplacement du reset CSS par une « simple » redéfinition des balises HTML grâce à normalize.css mis au point par  Nicolas Gallagher et Jonathan Neal.

WordPress Basics 0.2.6 tient compte des différents changements apportés par HTML5 boilerplate 2 avec la mise à jour du code HTML, des fichiers CSS et des librairies Javascript :

• Mise à jour de quelques portions de code HTML dans les fichiers header.php et footer.php.
• Inclusion de normalize.css dans les fichiers reset.css (renomé logiquement normalize.css), tools.css et author.css.
• Mise à jour des versions des bibliothèques Modernizr et jQuery. J’ai conservé DD_BelatedPNG au cas où.
• Suppression des déclarations CSS redondantes entre normalize.css et markup.css.

Par ailleurs, j’en ai profité pour apporter une mise à jour à la fonction basics_description() afin que les shortcodes n’apparaissent plus « tels quels », lorsqu’ils sont utilisés en début d’article. Merci à Thomas Patin pour m’avoir alerté sur ce sujet et fourni la ligne de code à insérer dans la fonction pour que tout fonctionne.

J’ai activé la constante WP_DEBUG pour faire le ménage dans  les variables pas ou mal définies, notamment dans la fonction basics_respond() du fichier functions.php et le fichier comments.php.

→ Téléchargez WordPress ♥ Basics

Articles sur le même sujet

• WordPress de A à Z — E comme Extensions (les plugins)
• WordPress de A à Z — C comme CSS & Composé HTML5
• Création de site WordPress de A à Z — B comme Basics
• WordPress de A à Z — A comme Allons-y ! (on s’organise)
• WordPress de A à Z — F comme Functions.php

WordPress offre un environnement de publication complet, prêt à accueillir vos textes, vos images et les commentaires des lecteurs, dès l’installation. Cet aspect «Prêt à Publier» n’empêche pas d’avoir envie d’ajouter ou d’étendre les fonctionnalités du CMS grâce aux extensions qui s’installent en deux clics depuis l’interface d’administration. Parmi les quelques 15 000 plugins disponibles, voici les 11 que j’installe le plus souvent au lancement d’un site WordPress, et ceux que j’utilise moins souvent. 

La saga «WordPress de A à Z»

1. Logo « WordPress je thème »
2. WordPress de A à Z… avec le Codex
3. A comme Allons-y !
4. B comme Basics — ♥ Basics en bref et lien de téléchargement.
5. C comme CSS & Composé HTML5
6. D comme Discussion
7. Vous lisez : E comme Extensions
8. Prochain article : F comme Function

Découvrez les meilleurs plugins pour améliorer les performances de votre site, ajouter des scripts et des CSS dans la balise head, 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’éditeur WYSIWYG TinyMCE, et bien d’autres choses encore !

1. Système de cache

W3 Total Cache améliore l’expérience utilisateur en augmentant les performance de votre serveur en mettant en cache tous ce qui peut l’être pour réduire les temps de chargement et donc accélerer l’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 (Content Delivery Network) le cas échéant.

Voir aussi WP Super Cache qui rend des services similaires.

2. Ajouter du Javascript ou des CSS dans le head

Header-Footer permet d’ajouter facilement du contenu dans la balise head et/ou dans le footer de votre site, sans toucher aux templates. 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 Add to Header et General Headers & Footers.

3. Générer un sitemap

Better WordPress Google XML Sitemaps crée un plan de site au format XML normalisé par Google pour permettre aux moteurs de recherche d’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 Google Webmaster Tools à la rubrique Configuration du site → Sitemaps. Cette extension autorise le découpage de votre plan de site en plusieurs parties grâce à un fichier XML liant d’autres fichiers XML pour les pages, les billets, les catégories, les tags.

4. Abonnement aux commentaires

Subscribe To Comments Reloaded — C’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’un nouveau commentaire est publié.

5. Thème adapté aux smartphones

WPtouch — Il s’agit ni plus ni moins d’un thème spécialement conçu pour les Smartphones (iPhone, Android, etc.). Très pratique et lisible, c’est le compagnon indispensable pour que votre site fasse bonne figure sur les périphériques mobiles tactiles à petits écrans. L’utilisateur a la possibilité de désactiver WPtouch pour retrouver l’affichage d’origine en activant/désactivant un bouton au bas de la page. Voir aussi WPtap News Press.

6. Statistiques Google Analytics

Google Analytics for WordPress est un outil très utile pour tirer le maximum de Google Analytics : de l’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’utilisation de votre site internet par les visiteurs. J’utilise aussi régulièrement Header-Footer pour coller le code Google Analytics asynchrone dans le head.

7. Articles similaires mais presque

Yet Another Related Posts Plugin affiche une liste de liens en rapport avec l’article en cours de lecture. L’algorithme de YARPP est assez convaincant à partir du moment où les tags associés aux billets sont pertinents. Nombreuses options disponibles pour affiner la correspondance entre l’article et la liste de liens.

8. TinyMCE Advanced

TinyMCE Advanced transforme votre éditeur WordPress WYSIWYG en bête de course sous stéroïdes en ajoutant des boutons intéressants :

• Ajout de vidéos,
• Découpage d’article en plusieurs parties (Split Page),
• Abréviation,
• Indice et exposant
• Tableaux,
• Options de listes ordonnées ou non-ordonnées,
• Etc.

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

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

9. Gestion de la base de données

WP-DBManager 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’effectuer des requêtes SQL. Voir aussi WP-DB-Backup comme alternative pour les opérations de sauvegarde. Nécessite moins de permissions que WP-DBManager, ce qui peut être utile sur certaines configurations de serveur.

10. Plugin anti-spam

Akismet est pré-installé mais son activation dépend d’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’adresse https://akismet.com/resend

11. Formulaire de contact

Easy Contact propose un formulaire de contact minimaliste, facile à modifier. Idéal quand on a juste besoin d’un formulaire de contact sans prise de tête.

Ces 11 premières extensions sont celles que j’utilise le plus souvent. Les suivantes — que j’utilise de temps à autre –  m’ont été rappelées via Twitter 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/

• WordPress SEO — J’utilise peu (voire jamais) les plugins SEO pour WordPress : je préfère le système semi-automatique que j’ai mis en place dans le thème WordPress ♥ Basics qui est une version simplifiée de celle présentée dans Not At All In One SEO. Voir aussi SEO Ultimate.
• Contact Form 7 — 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 ;-)
• No category parents — Supprimez le terme category de vos URL’s. Voir aussi WP No Tag Base. Notez que contrairement ce ce qu’on peut lire à propos de ce terme category, il n’est pas totalement sans intérêt. Dans le cadre d’un site centré sur un seul sujet, on pourra changer le terme category par le mot sujet pour l’avoir dans l’URL une bonne fois pour toute, sans être obligé de «bourrinner» les mots-clés dans les titres :-D
• WP-Paginate — Les liens «Billets précédents» et «Billets suivants» (dont j’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 WP-PageNavi.
• Simple Tags — La gestion des tags dans WordPress est un peu cheap. 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…), d’avoir l’autocomplétion Ajax, de taguer des pages (et pas seulement les articles).

En bref

Quand je vois que je n’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.

Merci de votre attention :-)

Articles sur le même sujet

• 390 ressources Javascript & jQuery
• Le Petit Journal du Web — 09/2011
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• Le petit journal du web — WordPress, développement web, etc.
• WordPress de A à Z — F comme Functions.php

Les types d’articles personnalisés sont très pratiques. Comme l’explique très bien Jérémy Thomas dans son introdution à WordPress 3, les Custom Post Types permettent d’élargir les différents types de contenus pris en charge depuis WordPress 3.0. A côté des Pages, des Posts ou des Liens, vous pourrez ajouter le type Porfolios, Projets ou Petites Annonces. Le système mis en place fonctionne bien, mais je suis tombé dernièrement sur un problème de page d’erreur 404 lié à la  réécriture d’URL en voulant affichant un article issu d’un Custom Post Type. Avec les permaliens par défaut, tout fonctionne, tandis qu’avec une structure de permaliens personnalisés, ce n’est plus le cas.

Réécriture d’URL

Pour y remédier, ajoutez-donc une fonction de réécriture (Add Rewrite Rules for Custom Post Types) dans votre fichier functions.php :

add_filter('generate_rewrite_rules', 'customposttype_rewrites');
function customposttype_rewrites($wp_rewrite) {
    $newrules = array();
    $newrules['mycustomposttype/?$'] = 'index.php?post_type=mycustomposttype';
    $wp_rewrite->rules = $newrules + $wp_rewrite->rules;
}

Articles sur le même sujet

• Le petit journal du web — WordPress, Couleur, CSS, Page Speed, 404
• WordPress — Chaines de caractères à traduire vs. variables ?
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• Le petit journal du web — WordPress, développement web, etc.
• 390 ressources Javascript & jQuery

Le thème minimaliste WordPress ♥ Basics — initialement hébergé en sous-domaine de css4design.com –, bénéficie désormais d’un domaine et d’un blog dédiés. Pour le domaine, j’ai recyclé wp4design.com (commencé en français il y a quelques mois) dont le motto était : «WordPress je thème, le bonheur est dans le Codex». Avec le passage à l’anglais, le slogan est devenu : «Basics : A Hard Rock-solid Theme based on HTML5 Boilerplate For Those About to Rock with WordPress». J’ai traduit certains billets, tandis que d’autres ont rejoint css4design.com.

Le lancement d’un nouveau blog est à la fois excitant et angoissant. J’ai l’impression de repartir à zéro. Cet article fait le point sur les actions effectuées jusqu’ici pour faire connaitre ♥ Basics et le blog WordPress & Webdesign par la même occasion. A côté de la présentation du thème, le blog accueillera des articles courts concernant WordPress en général.

Devenez «Basics Supporter» !

Je mettrai à jour cet article régulièrement pour tenir le compte des actions futures. N’hésitez pas à parler de ♥ Basics sur votre blog. Vous apparaitrez d’une part à la fin de ce billet ; et d’autre part, je vous présenterai en tant que «Basics Supporter» dès que j’aurais pris connaissance de votre soutien :-)

Liste des actions

Mise en place du site http://wp4design.com

• Télécharger Basics 0.2.4.1 (rubrique Jump!)
• Tenir les lecteurs au courant de l’évolution du projet (rubrique News)
• Expliquer le fonctionnement du thème (rubrique Tutorial)
• Exemples de marquage HTML (rubrique Markup)

Promotion du blog sur les réseaux sociaux :

• Ouverture du compte Twitter @wpbscs pour annoncer les billets parus sur le blog et les fonctionnalités ajoutées au fur et à mesure,
• Lancement d’une discussion sur le groupe WordPress de linkedin.com,
• Lancement d’une discussion sur le hub WordPress – Système de gestion de contenu open source sur Viadeo.com,
• Publication des billets sur Scoop.it dans la thématique Webdesigner,
• Publication du flux sur le profil Facebook Dotpress,

Bookmarks et Digg-like :

• Blogmarks.net,
• Tapemoi.com,
• Scoopeo.com,
• Fuzz.fr,
• Delicious.com,
• Reddit.com,
• Digg.com,

Communiqués de presse

• http://dotpress.fr/basics-un-theme-wordpress-pour-les-createur-de-sites

Commentaires ciblés

• http://speckyboy.com/2011/04/25/10-html5-ready-blank-bare-bones-and-naked-themes-for-wordpress/
• http://coding.smashingmagazine.com/2011/02/22/using-html5-to-transform-wordpress-twentyten-theme/

Ils/elles ont cité Basics

• http://www.ilozen.net/?p=972
• http://darklg.me/2011/05/compte-rendu-du-wordcamp-paris-2011/
• http://toolinux.com/Wikio-les-meilleurs-blogs-sur-les
• http://www.le-libriste.fr/2011/06/top-blog-wikio-logiciels-libres-juin-2011/
• http://www.wordpress-fr.net/2011/04/19/lhebdo-wordpress-wordcamps-wordpress-com-android/

Ils/elles ont testé Basics

• http://www.pixeletcetera.com/

Inscription dans les annuaires de lien

• http://www.el-annuaire.com/link-22154.html

N’hésitez pas à me suggérer d’autres actions pour percer dans la blogosphère anglo-saxonne.

Articles sur le même sujet

• WordPress Basics, mode d’emploi
• 9 thèmes WordPress HTML5 pour créateurs de thèmes
• WordPress — Chaines de caractères à traduire vs. variables ?
• Le petit journal du web — WordPress, développement web, etc.
• 390 ressources Javascript & jQuery

Duster — A l’occasion de la sortie prochaine de WordPress 3.2, Automattic propose un nouveau thème par défaut pour remplacer Twenty Ten. Ce thème — déjà disponible au téléchargement — sera certainement amélioré pour tenir compte des fonctionnalités qui verront le jour avec la version 3.2. Contrairement à Twenty Ten, Duster utilise les nouvelles balises sémantiques HTML5. Pour ceux qui connaissent bien Twenty Ten et Toolbox, on peut dire que Duster est un savant mélange des deux. A tester sans tarder ! Via WordPress Francophone.

Articles sur le même sujet

• 9 thèmes WordPress HTML5 pour créateurs de thèmes
• Roots — Thème WordPress à base de HTML5 Boilerplate
• Toolbox — Thème WordPress HTML5 par Automattic
• WordPress de A à Z — A comme Allons-y ! (on s’organise)
• HTML5 Boilerplate Thematic — Un «WordPress Theme Framework» complet

Après une discussion sur Twitter avec @agence_acs04 de l’agence ACS04 sur les améliorations à apporter au thème ♥ Basics, je me suis rendu compte que j’ai fait quelques erreurs de communication que je tiens à corriger. ♥ Basics est à l’origine un blank theme (une thème minimaliste) destiné aux développeurs et aux intégrateurs web. Il n’a pas vocation à être utilisé tel quel. L’organisation des fichiers est fait de telle sorte qu’il devrait être facile pour un intégrateur HTML & CSS connaissant WordPress d’adapter ce thème à ses besoins, en mettant les mains dans le code.

Par rapport au public visé, l’absence d’options pour choisir le nombre de colonnes, leur largeur, leur position, etc. est plus une fonctionnalité qu’un défaut. D’autres thèmes très bien faits, proposent ce genre de paramètres et le font très bien !

J’ai garni le fichier author.css avec une proposition de «Webdesign vite fait mal fait» pour que chacun puisse visualiser les fonctionnalités d’une part, et pour tester ♥ Basics en situation réelle, d’autre part. Chaque version est reflétée sur WordPress & Webdesign, ce qui permet d’éviter de gérer plusieurs versions en même temps.

Pour éviter les malentendus, j’utiliserai dans un proche avenir, un thème enfant sur wp4design.com, ce qui me permettra de supprimer mes CSS «perso» du fichier author.css tout en continuant à ne gérer qu’une version de ♥ Basics. J’en profiterai également pour tester sa capacité à supporter complètement les thèmes enfants.

Avant d’aller plus loin, j’attends les avis, suggestions des développeurs et des intégrateurs web qui auraient le temps d’installer ce thème. Pour ceux qui aimerait juste jeter un coup d’oeil sur les fichiers, il y a le dépôt SVN de WordPress.org où les fichiers de la version 0.2.4.1 sont accessibles :

→ http://themes.svn.wordpress.org/basics/0.2.4.1/

Mode d’emploi «express»

Voici la traduction du fichier readme.txt qui accompagne le thème ♥ Basics :

@package WordPress
@subpackage Basics
@author Bruno Bichet <bruno.bichet@gmail.com>
@version 0.2
@since Version 0.2
For Those About to Rock. Fire!


PREMIERE BOUCLE - FEATURED POST (home)
Le premier billet qui apparait sur la page d'accueil est un billet "sticky".
Si aucun billet n'a été qualifié de "sticky", le dernier billet publié prend la place.

SECOND LOOP - NEWS(home)
La second boucle sur la page d'accueil affiche les trois derniers billets
publiéS dans une catégorie spécifique.
Basics utilise la catégorie "non-classé" que vous pouvez renommer selon vos besoins.

LOGO
N'hésitez pas à remplacer le fichier logo.png situé dans le dossier /img par le vôtre ;)

NOTE
Basics n'est pas supposé être utilisé tel quel.
J'ai rempli le fichier author.css pour donner au thème un minimum de lisibilité.
Vous devriez supprimer tout le contenu de author.css pour donner votre propre style
à votre site. Toutefois, rien ne vous interdit d'utiliser
le thème par défaut comme point de départ si vous insistez ;)

Merci d'utiliser Basics.

We Salute You ;-)

Fonctionnalités principales

• Basé sur l’organisation de HTML5 Boilerplate,
• Sémantique HTML 5 (<header>, <footer>, <aside>, <section>, <hgroup>, <time>, <mark>, etc.),
• Fichier grid.css (en option) basé sur The Blue «940» Grid Simpler (le meilleur de Blueprint, The simpler Grid et 960.gs),
• Système de CSS permettant de refléter certains styles CSS dans l’éditeurs WYSIWYG de WordPress,
• Microformats,
• Rôles ARIA,
• Prêt pour l’internationalisation (version française déjà disponible),
• Optimisations SEO,
• Prêt pour les thèmes enfants,
• Code (relativement) propre, via l’utilisation de fonctions simples, facilement modifiables,
• Travail soigné (j’attends vos pistes d’améliorations).

→ Pour connaitre le détail des fonctionnalités ajoutées au fur et à mesure, je vous invite à consulter le fichier changelog.txt.

Tester WordPress ♥ Basics

→ Télécharger Basics 0.4.2.1

→ Version française de Basics 0.4.2.1 par Wolforg

Feedbacks

En ce qui concerne les retours d’utilisation, même si l’habillage actuelle est perfectible, ce n’est pas l’essentiel (je suis quand même partant pour améliorer mon fichier author.css). Je préfère que les personnes prêtes à tester Basics se concentrent sur :

1. L’organisation interne des fichiers de WordPress,
2. La sémantique HTML 5,
3. Les fonctions présentes dans functions.php,
4. Réduire le nombre de Warnings en mode debug,
5. Répondre à la charte d’utilisation du répertoire de thème WordPress (cf. notes d’un Themes Reviewer concernant Basics).

Articles sur le même sujet

• Le petit journal du web — WordPress, développement web, etc.
• Le Petit Journal du Web — 09/2011
• Mise à jour du thème WordPress ♥ Basics avec HTML5 Boilerplate 2
• WordPress de A à Z — E comme Extensions (les plugins)
• Le petit journal du web — WordPress, Couleur, CSS, Page Speed, 404