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 »

La périodicité du blog est devenue irrégulomadaire à tendance bimensuelle… Malgré tout, je tiens à partager avec vous les fruits de la veille. Dans le panier : des trucs sympas et pratiques pour WordPress ; un plugin pour splitter du contenu avec jQuery ; des formulaires HTML plus efficaces ; une astuce toute simple pour connaitre personnellement vos visiteurs via Google Analytics, quelques liens pour compresser et organiser vos CSS et tout un tas d’autres choses dont l’énumération serait longue et fastidieuse.

Liens WordPress

WordPress Theme Generator

WP Generator Blog est assez bluffant : votre thème pour WordPress est plié en quelques clics, sans connaissance préalable en HTML, JS, PHP ou même CSS ! Changez les couleurs, le nombre de colonnes, etc. L’outil produit des thèmes compatibles à partir de WordPress 2.1 jusqu’à la version 2.7 au moins, et embarque le framework Yahoo! UI.

Affichez votre nombre de followers Twitter sur votre blog

Il n’y a pas que le compteur Google Feedburner pour gonfler notre égo virtuel. Le nombre de followers que l’on peut avoir sur son compte Twitter peut à lui seul vous gonfler un égo capable d’atteindre la blogosphère stratosphère ^__^ Le code fourni par wpRecipes est composée d’une partie à copier dans le fichier functions.php de votre blog et d’une autre partie à placer là où vous désirez afficher l’information.

Random « Read More »

Ces deux bouts de code dégottés sur wpguy affichent un lien « lire la suite » aléatoire pour chacun de vos articles. Le premier est à placer avant The Loop :

 
<?php 
    $more_strings = array( 
        "Read More...", 
        "Keep on Reading...", 
        "Wait! There's more...", 
        "Read the rest of the article..."
    );
?> 
<?php 
    the_content($more_strings[rand(0,count($more_strings))]); 
?> 

Liens intégration web

Organisation, compression, vos CSS vont adorer !

• cleancss — Cet outil en version française très complet propose quatre niveaux de compression et permet de personnaliser les paramètres en précisant un gabarit de formatage pour votre feuille de style, dont voici un exemple de compression maximale,
• Styleneat — Trie (ou pas) les sélecteurs ou les déclarations dans l’ordre alphabétique. Affiche les déclarations sur plusieurs lignes. Possibilité de coller la feuille de style, de saisir l’URL de la CSS ou enfin de l’uploader depuis votre poste de travail. Via roget.biz,
• dustmeselectors — Extension pour Firefox qui traque les sélecteurs CSS inutilisés dans votre page web,
• Em Calculator — Pratique pour obtenir des valeurs en em pour les éléments de votre document HTML à partir d’une taille exprimée en px,
• Construct Your CSS — Construct est un éditeur visuel basé sur Blueprint et jQuery. Ce projet est commis par Christian Montoya. Il montre que l’on peut mettre à la disposition des intégrateurs web une boite à outil, ainsi qu’un éditeur visuel pour faire des CSS et du HTML sémantique,
• pagecolumn — Générateur de maquette en plusieurs colonnes avec CSS 2.0 en utilisant les %, les px ou les em. Possibilité d’imbriquer plusieurs colonnes ou des faire des effets de menus à onglets,
• drawter — Déjà évoqué sur ce blog : drawter, dessiné, c’est gagné,
• CSS Grid Calculator — Pour visualiser rapidement une maquette à partir d’une grille : les blocs de texte et les divisions de la page en colonnes (et les goutières qu vont avec) s’affichent dans le navigateur. En prime, vous obtiendrez les déclarations des styles CSS !

Encore un effort !

• CSS Compressor,
• CSS Compressor Advanced (cssdrive),
• Cascading Style Sheets Optimization,
• Labo CSS.

Formulaires HTML efficaces en 10 étapes

Consultez l’excellent article de bbxdesign sur les 10 bonnes pratiques pour réaliser un formulaire basé sur la conférence de Luke Wrobleski de Yahoo! dont voici le sommaire :

1. Aller droit au but,
2. Alignement des labels,
3. Aide et astuces,
4. Validation,
5. Actions primaires et secondaires,
6. Actions en cours,
7. Erreurs,
8. Input inutiles,
9. Organisation du formulaire,
10. Engagement graduel.

Téléchargez la conférence audio The Value of Web Forms and Design Constraints au format mp3 (27.9 MB).

Autres ressources pour les formulaires HTML

• JotForm — Création de formulaires en ligne,
• webjackalope — 12 exemples de formulaires d’inscription pour «feignasse».

Splittez votre contenu en plusieurs parties redimensionnables avec jQuery Splitter

C’est sur Dator Blog que j’ai déniché jQuery Splitter tout droit sorti de chez Dave Methvin. Ce plugin permet d’afficher une séparation entre deux contenus de la forme :

<div id="MySplitter"> 
    <div> Left content goes here </div> 
    <div> Right content goes here </div> 
</div> 

L’appel de la fonction étant réduit au strict minimum :

$().ready(function(){ 
    $("#MySplitter").splitter(); 
});

La splitbar peut être déplacée très facilement de manière accessible en cliquant-glissant, avec une accessKey ou encore via la touche tab.

Autres ressources Javascript

• 390 ressources Javascript et jQuery — Les fruits de la veille documentée que j’effectue depuis deux ans sur le blog Javascript & Webdesign.

20 mémos utiles pour tout webdesigner

Une bonne palanquée de Cheat Sheet (à vos souhaits) pour ne plus oublier les raccourcis Photoshop, les propriétés des CSS, les éléments HTML, etc. Mention spéciale pour :

• Blueprint 0.8 (via Christian Montoya),
• récapitulatif des fontes communes (ou pas) entre les systèmes d’exploitation Windows et MacOS,
• Kit de survie du créatif oeuvrant dans les métiers du graphisme,
• Les coulisses d’un design par Douglas Bowman,
• Mémo de la maquette web par Romy Duhem-Verdière qui nous rappelle les éléments à prendre en compte et les bonnes pratiques pour la composition de vos pages, les hyperliens, les textes, les formulaires, les éléments multimédias, ainsi que les mentions o-bli-ga-toires.

Miscellannées

Google Analytics — Identifiez les lecteurs en provenance de Netvibes

Généralement, les informations aggrégées par les outils de mesure d’audience ne permettent pas de connaitre le nom (ou le pseudo) des visiteurs ! Google Analytics vous permet en seulement trois clics d’en savoir plus :

1. Cliquez sur Traffic Sources (Sources de trafic),
2. Puis sur Referring Site (Sites Référents),
3. Rendez-vous dans la liste des sites et cliquez sur Netvibes,
4. Enjoy ;)

Bref, je suis sûrement le dernier à avoir cliqué sur Netvibes pour afficher les visiteurs concernés, mais si je suis l’avant-dernier, je me dis que ça servira au moins à une personne ;)

T’es qui, toi, déjà ?

Ping.eu ou tout ce que vous avez toujours voulu savoir sur une adresse IP ou un nom de domaine sans jamais avoir osé le demander : Ping, Traceroute, DNS lookup, WHOIS, Port check, Reverse lookup, Proxy checker, Mail relaying, Bandwidth meter, Network calculator, Network mask calculator, Country by IP, Unit converter  !

Stay tuned and mind the gap!

PS : n’oubliez pas la grosse grosse liste de 1000 ressources pour webdesiger et développeurs web !

Articles sur le même sujet

• 100+ comptes Twitter pour webdesigner
• Améliorations cosmétiques et ergonomiques sur ce blog
• Le petit journal du web — WordPress, développement web, etc.
• 390 ressources Javascript & jQuery
• WordPress de A à Z — E comme Extensions (les plugins)

Dans ce petit journal du web, je vous propose quelques liens qui ont retenu mon attention ces dernières semaines. Du côté de WordPress : optimisation de la base de données, des images, du cache, du nombre de requêtes dans les templates ; quelques diapositives issues du dernier WordCamp ; des explications sur le succès de WordPress face à ses concurrents ; un retour d’expérience sur la vente de thèmes WordPress ; et des fonctions utiles pour votre fichier functions.php. Du côté du développement web et du webdesign : une documentation interactive complète sur les API’s des langages du web (CSS, HTML, JavaScript, DOM & jQuery) ; un blog de qualité sur le développement web ; un tutoriel sur jQuery et un autre sur les fondamentaux de JavaScript ; et 18 outils gratuits pour faire des maquettes d’interface graphique. Et bien d’autres liens à garder sous la molette !

WordPress

• Optimiser la base de données – Avec le temps, les performances de WordPress baissent à causes des modifications qui affectent la base de données. Pour retrouver un WordPress frais comme un gardon, sortez les gants et préparez-vous à faire le ménage.
• Performances dans WordPress — Des conseils pour optimiser les images, l’inclusion des fichiers Javascript et CSS, la gestion du cache, le nombre de requêtes dans les templates, les appels aux API externes et le fichier .htaccess.
• Vendre des thèmes WordPress — Présentation de Francis Chouquet à l’occasion de WordCamp Paris sur son retour d’expérience concernant la vente de thèmes WordPress à travers le site Peaxl.com.
• Site de presse avec WordPress ? — Retours d’expériences de Lagazette.fr, un «gros» site qui tourne sous WordPress.
• Hegemony of WordPress – Si Drupal et Joomla! n’ont (presque) rien à envier à WordPress, comment expliquer l’hégémonie de WordPress lorsqu’il s’agit du choix d’un CMS ?
• 10 Must Have Hacks For WordPress – Voici 10 fonctions à copier-coller dans votre fichier functions.php pour obtenir : des boucles personnalisées, une liste de billets en relation avec d’autres en fonction des tags qu’ils partagent, afficher les billets populaires dans la sidebar, afficher des publicités dans le flux RSS, ajouter un fil d’Ariane pour guider vos visiteurs, afficher une sidebar selon l’article affiché, etc.
• Créer un thème de A à Z — Ce tutoriel écrit par @bbx est destiné aux graphistes et aux intégrateurs qui débutent dans WordPress. Néanmoins, une connaissance du HTML et des CSS est requise. Si vous le souhaitez, allez lire [son] autre tutoriel : CSS l’Art et la Science.

Développement web

• DocHub – Recherche instantanée dans la documentation des langages CSS, HTML, JavaScript, ainsi que du DOM et de jQuery. N’oubliez pas le compte Twitter @documenthub. Via @ThierryRoget du blog éclectique roget.biz.
• Friendly Bit – Le blog du développement qui vous écoute ! Des articles de qualité sur le développement web moderne et comment bien l’utiliser.
• jQfundamentals – Tutoriel complet sur jQuery (contenant de nombreux exemples d’illustration) écrit par Rebecca Murphey avec notamment les contributions de James Padolsey (@padolsey) et Paul Irish (@paul_irish) dont voici les 11 chapitres :
  1. Welcome,
  2. JavaScript Basics,
  3. jQuery Basics,
  4. jQuery Core,
  5. Events,
  6. Effects,
  7. Ajax,
  8. Plugins,
  9. Performance Best Practices,
  10. Code Organization,
  11. Custom Events.
• Syntaxe des classes JavaScript – Tutoriel pour les développeurs PHP qui se lancent dans un projet JavaScript dépassant le simple scripting. Par Jean-Pierre Vincent (@theystolemynick).
• jQuery.Buzz() — Restez à l’écoute de jQuery avec des ressources quotidiennes en provenance de sources diverses ete variées. Le site est parfois long à répondre ; suivre le compte Twitter @jquerybuzz ou s’abonner aux flux RSS du site est peut-être préférable.
• Maquettes d’interfaces graphiques – Liste commentée de 18 outils disponibles sur MacOS, Windows et Linux pour réaliser des maquettes d’interface graphique (mockup ou prototype de site web).

C’est cadeau (ou pas)

• SMACSS (Scalable and Modular Architecture for CSS) — Guide en ligne (gratuit) ou aux formats PDF, ePub et mobi (pour $15, soit 11.58 petits euros) de Jonathan Snook pour apprendre comment structurer ses CSS pour allier souplesse et maintenance à mesure que vos projets et vos équipes grandissent. Via t37.net.
• Design Professionalism – Le guide du designer pour reprendre le contrôle de votre métier. Qu’est-ce que le métier de webdesigner ? Comment s’y forme-t-on ? Que peut-on attendre de ce métier parfois fascinant et souvent ingrat ? Andy Rutledge répond à toutes nos interrogations existentielles.

C’est fini !

Articles sur le même sujet

• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• Le Petit Journal du Web — 09/2011
• WordPress de A à Z — E comme Extensions (les plugins)
• IE6 — 3 fonctions Javascript pour lutter contre le bug des classes multiples
• 23 listes pour Webdesigners

Cette liste de liens pour le développeur web front-end et l’intégrateur HTML & CSS est issue de la veille documentée que j’effectue depuis deux ans sur le blog Javascript & Webdesign. Elle reprend les 139 ressources Javascript et jQuery déjà publiées sur ce site, auxquelles j’ai ajouté les 78 nouveaux liens publiés depuis sur js4design.com, ainsi que 73 tutoriels pour créer des diaporamas et autres Slideshows, et, last but not least, vous pourrez accéder à une dernière liste composée d’une bonne centaine de bibliothèques Javascript (Polyfills) pour émuler HTML5 dans les navigateurs qui en prennent pas les nouvelles API’s en charge. A quelques exceptions près, les  liens pointent directement sur les sources d’origine.

217 ressources commentées

Autant vous prévenir tout de suite : cette liste n’est pas classée par catégorie, et ce, pour trois raisons simples : 1) vous pouvez rechercher les articles sur js4design.com où ils sont classés par catégorie et par tag, 2) vous pouvez utiliser l’équivalent-clavier Ctrl + F pour chercher un thème précis sur cette page, et 3)  je crois très fort en la sérendipité :-)

1. jQuip – Initiative lancée par Demis Bellot pour rendre jQuery modulable : 90% des fonctions les plus utilisées de jQuery pourraient se caser dans 13% de la taille actuelle du framework !
2. Popcorn.js – Framework Javascript créé par Mozilla pour faciliter la création de vidéos interactives. Utilise les ressources visuelles, audios et vidéos disponibles sur les réseaux sociaux.
3. Blueberry – Plugin jQuery expérimental et open source pour faire défiler des images (Slider) dans un environnement fluide (Responsive Web Design).
4. Elastislide – Carousel jQuery réactif (Responsive Web design) pour que l’utilisateur profite au mieux des caractéristiques de son écran.
5. Decoding jQuery – Immersion (en anglais) dans le code source de jQuery avec des explications sur les fonctions extend(), isWindow(), parseXML(), globalEval() et toArray().
6. Codecademy – Apprendre les bases de la programmation Javascript de manière interactive et pro-active !
7. FlexSlider – Ce Slider permet de faire défiler du contenu avec le marquage HTML de votre choix, le tout utilisable au clavier.
8. jQuery Timelinr – Créer un effet de ligne temporelle verticale ou horizontale avec d’un côté, des dates et de l’autre, des événements.
9. spin.js – Afficher une icône de chargement de page animée (loader) sans utiliser d’image, grâce à CSS3.
10. jQuery reversing –  Quelques astuces jQuery pour inverser l’ordre des éléments d’une liste UL ou OL dont le très concis snippet : ul = $('ul'); ul.children().each(function(i,li){ul.prepend(li)})
11. Require.js – Ce «loader» Javascript léger (5 kb gzipé), avec gestion de cache, accélère le chargement de vos pages lorsque vous utilisez de nombreux scripts.
12. Gmap3 – Plugin jQuery créé par Jean-Baptiste Demonte pour créer des cartes Google avec les fonctions avancées de la version 3 de l’API de Google Maps.
13. nanotabs — Version allégée du plugin jQuery idTabs. Script autonome (sans jQuery ou autre framework Javascript) pour faire des menus à onglets à partir de simples listes.
14. JbhSlider – Diaporama en jQuery gérant les évènements rapprochés (pas d’effets indésirables quand vos visiteurs cliqueront dix fois de suite sur le lien «suivant» du Slider).
15. Agile Carousel – Faites défiler automatiquement ou manuellement du texte et des images. Le format de données JSON permettra à votre Slideshow de dialoguer avec les informations issues de votre CMS préféré.
16. Apprise – Dialoguer avec les utilisateurs autrement qu’à travers les boites modales alert() ou confirm() générées par le navigateur.
17. jQuery Simple Tooltip — Afficher des infobulles au survol d’un lien. Peut afficher le contenu d’une balise référencée par son identifiant.
18. jQuery Tagging Tools – Gérer les tags à la manière de Facebook, avec une petite croix pour supprimer les tags que l’on vient de saisir.
19. jQuery-Placeholder – Utiliser l’attribut de formulaire «placeholder» dans les navigateurs ne prenant pas en charge HTML5.
20. jQuery SuperBox – Lightbox jQuery pour afficher des images, du contenu chargé en Ajax ou un fragment de la page via une ancre interne.
21. yepnope.js – Chargement conditionnel de scripts pour vos « Polyfills » pour charger un script de manière asynchrone selon qu’une fonctionnalité est disponible ou non dans le navigateur.
22. Full background image slider – Afficher un diaporama sur toute toute la fenêtre du navigateur (ou le container que vous voulez).
23. Minify – Script PHP5 pour combiner et minifier les fichiers CSS ou Javascript.
24. Treesaver – Framework Javascript pour faciliter la création de maquettes de sites web de type magazine qui s’adaptent automatiquement à une large variété de périphérique de sortie.
25. Coda Slider Effect – Tutoriel pour réaliser un système de navigation par onglets accessible avec effet de Slide, en mixant plusieurs plugins tels que scrollTo, localScrolletserialScroll.
26. jQuery File Upload – Uploader des fichiers multiples en affichant une barre de progression pendant le téléchargement ainsi qu’une miniature si votre fichier est une image.
27. jQuery radioSwitch – Transformer des boutons radio HTML en superbes Sliders d’un coup de magie CSS3 et Javascript.
28. jNotify – Afficher une boite de dialogue pour informer l’utilisateur du bon ou du mauvais déroulement des opérations.
29. jQuery Apple Effect – Afficher progressivement le contenu d’une page Web autour d’une zone affichée par défaut, pour la mettre en valeur.
30. jMenu – Système de menu horizontal en jQuery etjQuery UI qui autorise un nombre illimité de sous-menus.
31. Affichage des mots de passe à la demande – Afficher ou masque le mot de passe saisi dans un champs `input` de type password uniquement en cas de besoin, à l’aide d’une case à cocher.
32. qTip – Plugin jQuery pour créer des infobulles en affichant tout types de contenus : attribut title ou attribut personnalisé tooltip, ou une image.
33. markItUp! – Moteur de balisage léger qui transforme un textarea en éditeur HTML, Textile, Wiki, Markdown, BBcode ou votre propre système de balisage.
34. Slides – Slideshow Javascript développé avec jQuery pour afficher vos images sous forme de diaporama.
35. Lightbox CSS avec tabindex et pseudo-classe :focus – Lightbox full CSS en remplaçant l’événement click par la pseudo-classe :focus et la propriététabindex pour permettre aux images d’avoir le «focus».
36. Lettering.js – Plugin jQuery pour contrôler précisément le découpage des textes afin d’afficher les caractères ou les mots qui les composent comme bon vous semble.
37. Simple Tabs w/ CSS & jQuery – Tutoriel expliquant de manière concise les différentes étapes pour réaliser un système de menu à onglets.
38. SimpleTabs – Javascript autonome pour mettre facilement en place un système de navigation à base d’onglets (tabs).
39. CSS3-MediaQueries-JS – Bibliothèque Javascript qui permet d’utiliser les Medias Queries dans IE 5+, Firefox 1+ et Safari 2.
40. Marquee jQuery – Permet de faire défiler le contenu d’une liste vers le haut, le bas, la droite, la gauche grâce à des options bien pratiques.
41. Hyphenator – Script Javascript pour la gestion des césures sur tout ou partie de votre site Web, à réserver aux articles pour des questions de performances.
42. jQuery Cycle — Ce diaporama / Slideshow propose 6 effets de transition avec pas moins de 50 paramètres.
43. Galerie d’image avec jQuery – Ce tutoriel permet d’obtenir le résultat le plus simple possible visuellement tout en tenant compte l’accessibilité dans une démarche non intrusive.
44. JQuery Slide Effect – Tutoriel concis mais complet pour réaliser un effet d’animation de texte (slide) sur une image pour faire apparaitre des informations complémentaires (titre, description, lien, etc.).
45. Easy Slider – Diaporama horizontal ou vertical avec navigation numérique qui propose un défilement doux lorsque l’on saute une ou plusieurs diapos.
46. innerShiv — Le contenu HTML5 généré par innerHTML fonctionne enfin dans IE.
47. CSS Text Wrapper – Habiller vos textes HTML avec n’importe quelle forme non-rectangulaire : courbe, zig-zag ou ce que vous voulez !
48. jCarousel – Contrôler le déplacement horizontal ou vertical d’une liste d’éléments avec ce Plugin jQuery.
49. Content Switcher – Ce Slider avec menu de navigation a la particularité de fonctionner parfaitement en l’absence de Javascript et de permettre l’utilisation du bouton retour du navigateur.
50. EverCookie — API Javascript qui permet de créer un cookie résistant à tous les mauvais traitements grâce à une solution impliquant une dizaine de mécanismes différents : HTTP Cookies, Flash Cookies, Silverlight Isolated Storage , RGB values, Web History, HTTP ETags, Web cache, window.name, Internet Explorer userData Storage, HTML5 Session Storage, HTML5 Local Storage, HTML5 Global Storage, HTML5 Database Storage via SQLite !
51. bxCarousel – Carousel en jQuery qui boucle sur lui-même et qui fonctionne avec tout type d’éléments HTML contenus dans une liste.
52. TinyFader — Slideshow poids-plume avec effet de fading. C’est la version autonome deTinySlideren (TinyFader n’a pas besoin d’un framework Javascript).
53. Jquery Looped Slider – Diaporama jQuery qui boucle sans accroc lorsque le script atteint la dernière «diapo» de votre Slider.
54. Easy List Splitter – Plugin jQuery qui affiche des listes HTML ordonnées (OL) ou non-ordonnées (UL) en colonnes.
55. Nivo Slider – Diaporama qui offre 9 transitions de très bonne facture pour ajouter un peu de peps à nos Sliders images.
56. AviaSlider – Diaporama en jQuery de 8 kb dont l’originalité est de proposer huit belles transitions entre les images.
57. Stop (Mis)Using Return False – Toutes les subtilités relatives à la gestion des événements dans jQuery.
58. Advanced Columns using the :nth-child(N) – Du rythme pour vos colonnes avec le pseudo sélecteur CSS :nth-child() et jQuery.
59. Jquery selected text sharer – Plugin jQuery astucieux qui affiche une div contenant une liste de liens avec les favicons associées une fois que l’utilisateur a sélectionné une portion de texte.
60. ChangeClass — Fonction Javascript pour changer de classe CSS à la volée.
61. CLEditor – Editeur HTML WYSIWYG de 10 ko à ajouter facilement à votre site Internet, compatible avec tous les navigateurs (IE6 inclus).
62. Sudo Slider – Plugin jQuery de 10 ko pour mettre en place un diaporama manuel (Slider) ou automatique (Slideshow) avec tout type de contenus (images, textes, vidéo en Flash, formulaire avec validation, etc.).
63. Enterprise jQuery — Passez du côté client ! Améliorer vos connaissances sur jQuery, qu’il s’agisse de bouts de codes prêts à l’emploi ou des bonnes pratiques de développement.
64. jQuery.eventManager — Améliorer la gestion d’événements avec jQuery.
65. Video JS — Player vidéo basé sur Javascript qui utilise la balise video de HTML5 lorsque le navigateur est compatible. Un fallback vers Flash est prévu pour les navigateurs ne prenant pas en charge HTML5.
66. 30 bouts de codes jQuery – en prêt-à-porter taillés dans les meilleurs tissus. Dans les rayons, vous trouverez de quoi habiller les longues soirées d’été.
67. Transformer un plugin jQuery en extension WordPress – Tutoriel permettant d’utiliser les extensions WordPress pour insérer n’importe quel plugin jQuery dans le panneau des extensions WordPress.
68. Étendre la zone cliquable d’un lien à l’élément parent avec jQuery –Quelques lignes de code Jquery pour étendre la zone cliquable d’un lien à un élément parent, généralement un <div>.
69. jQuery Hotkeys Plugin – Ajouter ou supprimer des équivalents-clavier dans votre page Web. Gère la plupart des événements en une ligne de code.
70. Columnizer — Créer des colonnes avec jQuery. Nombreuses options, dont notamment la possibilité de spécifier une largeur de colonne ou un nombre fixe de colonnes.
71. jQuery Fundamentals — Manuel de survie pour jQuery. Synthétise les éléments de syntaxe de jQuery sur une page web. Sommaire précis et structuré avec un index des exemples utilisés.
72. Retina Display — Tutoriel pour refaire chez vous l’effet loupe «Retina Display» proposé par Apple sur la version 4 de l’iPhone.
73. jqDock — Transformez une suite d’images en Dock Menu (set d’images qui s’agrandissent au passage de la souris) à la manière du dock de MacOS X.
74. Fancy Sliding Form — Affichez vos formulaires sous forme de Slideshow en autant de parties qu’ils contiennent de fieldset.
75. clueTip — Afficher des bulles d’aide complexes sur n’importe quel élément au survol de la souris (ou sur un clic, en option).
76. Smokescreen — Convertir des animations Flash simples en HTML5 et Javascript.
77. Lightbox_me — Lightbox jQuery d’un poids de 1 Kb pour afficher n’importe quel élément avec un effet Lightbox sobre et efficace.
78. jQuery-JSON — Convertir des données au format JSON via quatre nouvelles fonctions à l’object jQuery $ pour faciliter l’utilisation du format JSON.
79. SliderNav – Plugin jQuery qui permet de créer un carnet d’adresse défilant de type iPhone.
80. Sliding Panel Photo Wall Gallery — Mur d’image et Lightbox avec jQuery.
81. Griddy-Overlay – Afficher une grille par-dessus votre page web avec jQuery.
82. Scriptsrc — 10 Frameworks Javascript à emporter.
83. UI.Layout – Créer des interfaces utilisateurs avec jQuery.
84. WebProjectHelper — Générateur de structure MySQL et de classes PHP.
85. jQuery Form Plugin — Mettez de l’Ajax dans vos formulaires HTML.
86. Burst Engine — Un peu de Flash et d’After Effects dans Canvas.
87. Colorbox — une « lightbox » légère et extensible en jQuery.
88. jQuery BBQ — Utiliser les boutons Précédent et Suivant du navigateur malgré Ajax.
89. Preload CSS/JavaScript without execution – Pré-chargement des CSS et du Javascript sans exécution.
90. Table des matières avec jQuery – Bout de code pour afficher une liste ordonnée sous la forme d’une table des matières comme celles que l’on trouve dans les livres imprimés.
91. Bloc de login à la Twitter avec jQuery – Tutoriel pour faire un bloc de login dynamique sur la page d’accueil de Twitter.
92. jQuery.fn.sort — Trier des éléments avec jQuery.
93. Popeye 2.0 – Lightbox qui affiche une galerie d’images à partir d’une liste non-ordonnée dans le flux de votre texte.
94. FAT-FREE — Framework PHP léger et modulaire.
95. jQuery HTML Table Toolbox — 36 façons de «dresser la table» avec jQuery.
96. Add Events jQuery — Ajouter «cursor: pointer» sur tous les événements «click».
97. Créer une arborescence de fichier avec jQuery – Série de 8 tutoriels sur la création d’une arborescence de fichier à l’aide de jQuery.
98. simpleCart (js) – Script de moins de 20 ko pour mettre en place un caddie e-commerce en quelques minutes.
99. Modernizr — Détection des fonctionnalités CSS3 et HTML5.
100. 20 méthodes jQuery à connaitre – Bien belle liste de 20 fonctions jQuery peu connues, à connaitre !
101. IE7.js – Transformez une citrouille à base de IE5.5/6 en carrosse IE7 ou IE8 : ce n’est pas de la magie, c’est de la technologie !
102. Webform to wizard – Plugin jQuery qui découpe les formulaires longs et ennuyeux en «assistant» en suivant les contours des balises HTML fieldset.
103. DLink — Afficher le type de cible des liens avec Javascript.
104. Splash — un diaporama en pur Javascript.
105. Optimiser le chargement des AdSense – Accélérer votre blog en optimisant l’affichage des Adsense avec jQuery.
106. Custom jQuery Selectors – Créez des sélecteurs personnalisés avec jQuery.
107. TipTip — Infobulles « funky » pour afficher l’attribut HTML «title».
108. Clickoutside Event — Détectez les clics en dehors d’un élément.
109. Comment, jQuery va tuer Flash ? – Question surprenante, mais force est de constater que Javascript a fait du chemin depuis window.open() !
110. jQuery Tutorials for Designers – 13 Tutoriels jQuery pour Webdesigners.
111. Starter — Générateur de plugins jQuery.
112. Effets lightbox sans framework — L’ouverture de nouvelles fenêtrespopup a progressivement laisser la place aux effets lightbox. Voici plusieurs solutions simples à base de HTML, CSS.
113. Content Switcher — Bel exemple de mise en place d’un système permettant de passer d’un contenu à un autre via un menu en utilisant les concepts de l’amélioration progressive et du Javascript non intrusif.
114. jQuery SimpleTree Drag&Drop – Construisez des arborescences à la mode de Windows.
115. jQuery Splitter Plugin — Divisez votre page en plusieurs parties redimensionnables.
116. Slick Page Transition — Effet de transition (fading) entre les pages d’un site.
117. DataTables — Pagination et tri des données pour vos tableaux HTML.
118. jSocial – Affichez très rapidement la liste des réseaux sociaux où vous êtes présent.
119. jQuery Color Animation – Support du RGBa pour « jQuery Color Animations».
120. jQuery vs Mootools – Choisir jQuery ou Mootools en connaissance de cause.
121. 6 bouts de code pratiques pour manipuler les éléments select et input avec jQuery.
122. Plupload – Gestionnaire de « téléversement » (upload) multiple en jQuery.
123. Parallax – Technique utilisée depuis longtemps dans le cinéma, le dessin animé ou le jeu vidéo pour créer une illusion de profondeur.
124. Uniform – Ajouter du look and feel aux rugueuses cases à cocher, aux boutons radio anémiques, sans oublier les spartiates. boutons Parcourir… des sobres formulaires HTML.
125. flot — Créez des graphiques avec jQuery.
126. jQuery Source Viewer – Naviguer à l’intérieur du code source de jQuery.
127. jQAPI — Documentation alternative pour jQuery 1.4.1.
128. How to Easily Create a JavaScript Framework – Créez votre framework Javascript en 4 parties.
129. css-template-layout – Implémentation jQuery du module CSS3 Template Layout.
130. jqTransform — Stylez vos formulaires avec jQuery et CSS.
131. Google Fade – Script disponible pour Mootools et jQuery pour reproduire chez vous l’effet introduit récemment par Google sur sa page. d’accueil : certains éléments de navigation apparaissent suite au mouvement de la souris sur la page ou lorsqu’on quitte le champs de recherche.
132. Thumbnail Zoom — Effet de zoom sur une miniature accompagné de l’apparition d’une légende au survol de la souris.
133. Disable On Submit – Plugin jQuery qui désactive le bouton Submitune fois que le formulaire a été envoyé une première fois.
134. Adding Keyboard Navigation – Tutoriel sur la mise en place d’un diaporama avec utilisation du clavier (flèche droite et flèche gauche) pour passer à l’image suivante ou précédente.
135. Comment System with jQuery, Ajax and PHP – L’excellent Srinivas Tamada de9Lessons nous apprend comment mettre en place un système de commentaires Ajax avec jQuery et PHP.
136. DOMAssistant – Bibliothèque Javascript « petit mais costaud » qui pourrait facilement remplacer jQuery pour une partie des utilisateurs.
137. Dynamic tabs using jQuery – Ccréer un menu à onglets pour ajouter ou supprimer des onglets de manière dynamique.
138. Sexy.js – Améliorer l’interface Ajax de jQuery.
139. jQuery Cross Domain Ajax Guide – Guide de l’Ajax sur plusieurs domaines.
140. Page Peel Corner — Effet de page cornée avec jQuery.
141. A.P.E (Ajax Push Engine) — Le web en temps réel avec Ajax Push Engine.
142. Simple Image Viewer — Galerie d’image minimaliste.
143. jquery-compat-1.3 — Profitez de jQuery 1.4 en restant compatible avec jQuery 1.3.
144. jsfiddle – Propose un environnement pour tester et partager du code Javascript.
145. jQuery 1.4 API Cheat Sheet – Regroupe sur une page toutes les méthodes et fonctions de jQuery jusqu’à la version 1.4.
146. jARIA jQuery Plugin – Permet d’ajouter une couche ARIA dans votre site web sous forme de méthodes.
147. jQuery Quick Guide – Un guide pour avoir les fonctionnalités de jQuery sous la souris.
148. Animation avec quatre images et jQuery – Tutoriel pour réaliser une publicité ou une accroche sans passer par Flash.
149. jQuery Masonsy – Réorganise les blocs de votre page page pour réduire les espaces vides entre les éléments.
150. 40 bouts de code – facilitez vos développements en Javascript ou jQuery.
151. jQueryList — Plus de 255 plugins pour jQuery disponibles sur une seule page et classés par thèmes.
152. Link Building Pro — Ajoute automatiquement un lien vers la source, au cas où le copieur-colleur oublierait de citer l’original.
153. CSS3 animations and their jQuery equivalents – 6 effets introduits dans CSS3 et le code Javascript pour obtenir le même résultat en jQuery.
154. jTruncate – Plugin pour jQuery qui coupe un texte au bout d’un certain nombre de mots et qui ajoute un texte comme « Lire la suite » pour accéder à… la suite !
155. Hightcharts – Bibliothèque Javascript spécialisée dans la création de diagrammes, graphiques et autres camemberts pour illustrer vos données brutes.
156. jQuery Before/After – Plugin étonnant qui plaira à tous ceux qui veulent proposer la comparaison de deux états d’une photo.
157. jQSlickWrap – Plugin jQuery qui permet d’habiller une image de forme irrégulière avec le texte autour.
158. TinySlider – Diaporama Javascript autonome très léger de 1,5 ko facilement personnalisable via les CSS.
159. Mootools Forge – Une forge pour les plugins Mootools.
160. Système de notation par étoiles accessible – Samuel Le Morvan propose un tutoriel complet sur la question.
161. Menu déroulant Suckerfish – Menus déroulants et autres fantaisies avec :hover :focus :active :target pour IE6.
162. Smart Columns with CSS & jQuery – Des colonnes fixes et ajustées en largeur avec CSS et jQuery.
163. Get viewport size with javascript – Connaitre la taille du « viewport » en Javascript.
164. Ceebox – Lightbox qui afficher n’importe quel contenu dans une fenêtre modale ou non. Idéale pour les vidéos hébergées sur Google Video, Dailymotion ou Youtube.
165. Text Resizing width jQuery — Laissez les utilisateur modifier la taille du texte sur votre site web.
166. Planet jQuery – Un planet pour jQuery.
167. The Ultimate GetElementsByClassName – Sélectionner les éléments par leur classe avec getElementsByClassName.
168. Image jQuery – Quelques lignes de jQuery pour appliquer un léger effet de zoom sur une image.
169. maxWidthFixForIE6.js – Emuler la propriété max-width pour IE6.
170. iepngfix — Composant HTC qui gère la plupart des contraintes liées à l’absence de prise en charge de la transparence 24 bits par Internet Explorer 6.
171. SimpleJS — Cette petite bibliothèque Javascript développée par Christophe Lefevrepropose de faciliter l’utilisation d’Ajax.
172. jTextTranslate – Traduction de votre site en 87 langues par Google.
173. cssQuery — Interroge le DOM via les sélecteurs CSS 1, CSS 2 et une partie de CSS 3.
174. balance_columns – Équilibrer des colonnes avec Javascript.
175. DOMTab – Menu à onglets simple et efficace.
176. FlashReplace – Insérer du Flash proprement.
177. DOMAssistant – Cette bibliothèque va un peu plus loin que dLite et permet de manipuler le DOM avec plus de souplesse.
178. Styled and accessible tooltips – Infobulles stylées et accessibles avec jQuery.
179. jQuery-XML — Afficher un flux RSS avec jQuery et Ajax.
180. dLite — une librairie Javascript « petit mais costaud ».
181. Pikachoose – Plugin jQuery idéal pour afficher des galeries d’images en toute légèreté.
182. jQuery Context Menu – Menus contextuels (clic droit) personnalisable à 100% avec les CSS.
183. 22 menus déroulants passés au crible – Tyssen Design passe en revue les principauxdropdown menu.
184. Changement de design «on the fly» avec jQuery – Tutoriel clair et didactique pour permuter deux maquettes d’un simple clic.
185. Simple jQuery Text Resizer – Laissez vos visiteurs choisiront la taille qui leur convient (uncookie gardera leur préférence en mémoire).
186. Des cookies à la mode de jQuery – Ecrire, lire et effacer vos cookies pour 4,15 kb.
187. Ajax Upload — Upload multiple de fichiers sans recharger la page avec n’importe quel élément (images, liens, etc.).
188. ul2finder — un explorateur à l’image du Finder de MacOS X.
189. jQuery Image Cropper — recadrer et uploader des images.
190. jQuery UI Selectmenu — des menus « select » personnalisés à la sauce ARIA.
191. Le code CSS et Javascript au milieu du HTML c’est pas bien ! – Traduction de l’articleWhy Inline CSS And JavaScript Code Is Such A Bad Thing de Robert Nyman.
192. PHP.JS — transposer des fonctions PHP en Javascript.
193. jsbin — tester votre code Javascript et partagez vos bugs – Outil en ligne créé par Remy Sharp pour tester du code Javascript et le partager
194. Un «slider» à la manière du Playback de Google Wave – tutoriel pour afficher un historique progressif à la manière de la fonction Playback de Google Wave.
195. Un diaporama avec AnythingSlider jQuery Plugin – Chaque diapo peut être réalisé à l’aide du composé HTML de votre choix (texte, images, etc.).
196. Google Closure — les mauvaises pratiques Javascript en action ? – Google Closure a été développé par des spécialiste de Java… ça craint.
197. Sélecteur de date (Date-Picker) non-intrusif – Sélecteur de date avec mini calendrier.
198. FireFinder — interagir avec la page web – Interagir avec les éléments de la page via les sélecteurs CSS ou les expressions XPath.
199. Choisir sa bibliothèque JS avec Javascript Framework Matrix – Tableau comparatif des principaux frameworks Javascript.
200. Jquery Pagination System – Pagination côté client avec jQuery.
201. jQuery Flash Plugin – Inspiré par SWFObject, UFO et sIFR, jQuery Flash Plugin a été complètement réécrit avec jQuery pour éviter les redondances.
202. jQuery UI Multiselect – Améliore l’apparence et l’ergonomie de la balise HTMLselect.
203. jQuery Tools – Incorporer Flash, gamme étendue d’overlay, tooltips à foison, tabs, etc.
204. Tipsy — des bulles d’aide façon Facebook avec jQuery – Bulles d’aide façon bande dessinée comme celles que l’on trouve sur Facebook ouTwitter.
205. Faire un Carrousel avec jQuery – Tutoriel très didactique pour réaliser un carrousel avec HTML, CSS et jQuery.
206. Lazy loader : chargement des images à la volée – Chargez vos images que lorsqu’elles apparaissent dans la fenêtre du navigateur.
207. jQuery Magnifier Loupe – Zoom sur images avec l’attribut longdesc.
208. News déroulantes avec jQuery – Un joli bandeau de news à l’aide de liste de définition, d’une pincée de CSS et d’une bonne rasade de jQuery.
209. Cufón : des polices de caractère pour tous – Implémenter font-face dans le plus grand nombre de navigateurs.
210. jQuery — renverser l’ordre d’une liste ordonnée – les premiers seront les derniers et vice-versa. Merci à pioupiouM pour la correction du script.
211. jqModal : des fenêtres modales minimalistes – Couteau suisse des Lightbox en tout genre pour afficher des alertes, des notifications, des boites de dialogues, etc.
212. Afficher vos flux XML avec jParse – Parsing de flux XML (RSS, Atom) via Ajax pour l’afficher en HTML.
213. Javascript Framework Matrix – Tableau comparatif des principaux frameworks Javascript.
214. Augmenter la taille du texte avec jQuery – Modifier la taille du texte de votre site en choisissant une valeur dans un menu déroulant.
215. Effets jQuery accessibles WAI-RIA – Lightbox, validation de formulaires et menus à onglets accessibles prêts à l’emploi.
216. eCSStender – Sélecteurs CSS avancés compatibles IE6.
217. jCarousel Lite – Galerie d’images en jQuery.

Pour trouver l’article correspondant sur Javascript & Webdesign, il suffit de saisir l’ancre du lien dans le champs de recherche. Cette liste sera mise à jour régulièrement, n’hésitez pas à revenir !

73 tutoriels : Slideshow, Sliders & Diaporama

Voici une liste condensée de tutoriels ou scripts jQuery commentés pour apprendre à faire défiler vos contenus textes et/ou image sous forme de Slideshow, de Sliders ou de diaporamas :

1. Create an Image Rotator with Description (CSS/jQuery) — Démo
2. Sliding Boxes and Captions with jQuery — Démo
3. Animate Panning Slideshow with jQuery — Démo
4. Create Beautiful jQuery Slider Tutorial — Démo
5. Create a Fancy Image Gallery with JQuery
6. jQuery Infinite Carousel
7. Coda Slider Effect
8. Create Featured Content Slider Using jQuery UI
9. Making a Content Slider with jQuery UI
10. Creating a Slick Auto-Playing Featured Content Slider
11. Start/Stop Slider
12. ImageSwitch
13. Create Content Slider using jFlow, A Minimalist jQuery Plugin
14. jQuery Looped Slider Tutorial
15. Build a Content Slider with jQuery
16. CSS and jQuery-Crating an Image Slider
17. A Beautiful Apple-style Slideshow Gallery With CSS & jQuery
18. Making a Mosaic Slideshow With jQuery & CSS
19. Making A Slick Content Slider
20. Galleria
21. Easy Slider
22. Galleriffic
23. AD Gallery
24. Sliding Boxes and Captions
25. jQuery Virtual Tour
26. jQuery MB Gallery
27. AnythingSlider
28. GalleryView
29. jCarousel – jCarousel — un Carousel jQuery très complet
30. Easiest Tooltip and Image Preview
31. ThickBox
32. SpaceGallery
33. s3Slider
34. Simple Controls Gallery
35. Pikachoose – Pikachoose : le bon choix pour afficher vos images
36. jQuery Popeye – jQuery Popeye 2.0 — Une Lightbox inline
37. Supersized
38. imgBox
39. Pirobox
40. jQZoom
41. jQuery Superbox
42. jQuery Infinite Carousel
43. Simple jQuery Image Slide Show with Semi-Transparent Caption
44. Moving Boxes
45. LightBox
46. SliderGallery
47. FeaturedContent
48. InnerFade
49. jQuery Morphing Gallery
50. A Simple jQuery Slideshow
51. Create a Slick and Accessible Slideshow Using jQuery
52. Building a jQuery Image Scroller
53. Sliding Boxes and Captions with jQuery
54. Creating an Image Slider
55. Create Beautiful jQuery slider tutorial
56. Simple JQuery Image Slide Show with Semi-Transparent Caption
57. Create a Simple Image Slide Show using jQuery
58. Slide and hide section with jquery
59. Making a Slideshow with jQuery
60. jQuery – Creating a Slideshow
61. Simple jQuery slideshows
62. Creating a Slick Auto-Playing Featured Content Slider
63. How to add Slideshow to jQuery lightbox plugin
64. jQuery Slideshow Explained
65. Supersized jQuery Plugin
66. The Easiest jQuery Plugin For Sliding Images and Content
67. GalleryView: A jQuery Content Gallery Plugin
68. Image Flow
69. S3Slider jQuery plugin
70. EOGallery
71. Smooth Div Scroll
72. jQuery virtual tour
73. Supersized – Full Screen Background/Slideshow jQuery Plugin

100+ Polyfills et Fallbacks pour HTML5

L’article 100+ Polyfills et Fallbacks pour HTML5 présente une collection de plus de 100 bibliothèques Javascript pour implémenter les fonctionnalités HTML5 dans les navigateurs qui ne les proposent pas nativement. Cette liste étant mise à jour régulièrement, elle ne figure pas sur cette page. Elle est accessible directement à l’adresse HTML5-Cross-Browser-Polyfills.

Voilà, c’est fini !

J’espère que cette longue liste n’aura pas été trop indigeste et qu’elle vous sera aussi utile qu’à moi. N’hésitez pas à me signaler si votre script préféré manque à l’appel ou si le lien vers le script de vos rêves mène à une impasse.

Articles sur le même sujet

• 100+ Polyfills et Fallbacks pour HTML5
• WordPress de A à Z — E comme Extensions (les plugins)
• 139 ressources Javascript et jQuery
• Menu à onglets (tabs) — idTabs ou domTab ?
• Le petit journal du web : HTML5, CSS3, jQuery, WordPress, Métiers du Web, Vie quotidienne et Nostalgeek

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

Le dernier Petit journal du web paru sur CSS & Webdesign remonte à loin. Pour me faire pardonner, voici les meilleurs liens sur lesquels j’ai trébuché au mois de septembre. Au menu : thème WordPress pour démarrer vos projets de site web ; tutoriel interactif pour apprendre les bases de la programmation en général et Javascript en particulier ; coins arrondis propres pour vos images ; mise en place un Content Delivery Network (CDN) pour améliorer les performances de vos pages web ; tutoriel plein de poésie pour apprendre les CSS ; menu déroulant dédié aux smartphones iPhone, Android, etc.

• WordPress Basics — Actuellement en version 0.2.8.1, le Blank Theme Basics est accompagné du thème enfant Beyond Basics pour simplifier le thème parent, faciliter les mises à jour et vous donner une plus grande souplesse dans la mise en place du design de votre site internet.
• Codecademy – Apprennez les bases de la programmation Javascript de manière interactive et pro-active. Via roget.biz
• CSS3 Rounded Image With jQuery – Arrondir les angles des images proprement avec CSS3 et jQuery pour éviter les effets parfois disgrâcieux de border-radius appliqué directement sur la balise <img>. Voir la démo.
• CDN Media Server — Boostez les performances de vos sites avec un « media server ».
• CSS : l’Art & la Science — Un parcours initiatique à l’intégration web rempli d’humour et de poésie, par bbxdesign.
• Menu déroulant pour mobile — Tutoriel complet sur la mise en place d’un menu accessible adapté aux périphériques mobiles grâce aux Media Queries. Le tutoriel idéal à tester avec mon tout nouveau Samsung Galaxy SCL qui me change de mon Sony Ericsson old School ! Voir la démo.

Articles sur le même sujet

• WordPress de A à Z — E comme Extensions (les plugins)
• Le petit journal du web — WordPress, développement web, etc.
• 390 ressources Javascript & jQuery
• Générateur de coins arrondis avec border-radius
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur

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