N’ayant pas dans l’immédiat besoin d’un site multi-langues, je me suis intéressé aux fonctions qui améliorent l’expérience utilisateur (UX) et qui permettent d’avoir des liens toujours à jour avec Sticky Links malgré les changements éventuels d’URL…

En effet, en plus de permettre d’avoir un blog ou un site web en plusieurs langues, WPML est probablement le plugin qui manquait pour faire de Wordpress un CMS à part entière avec notamment des fonctions de navigation bien pensées auparavant disponibles dans le plugin CMS Navigation.

Navigation principale et secondaire (CMS Navigation reloaded)

• Menu déroulant avec pages et sous-pages facilement personnalisables en CSS via un générateur de css pour le menu déroulant). Il suffit de copier la fonction ci-dessous dans votre template : `<?php do_action(‘icl_navigation_menu’); ?>`
• Fil d’ariane (breadcrumb trail) pour permettre au visiteur de savoir où il en est dans sa navigation avec la fonction : `<?php do_action(‘icl_navigation_breadcrumb’); ?>`
• Navigation secondaire composée des sous-pages de la page parente avec mise en évidence de la page en cours. Cette fonction est également disponible sous forme de widget pour l’ajouter facilement dans la barre latérale. `<?php do_action(‘icl_navigation_sidebar’); ?>`

Sticky Links

Avec Sticky links, WPML peut conserver l’intégrité de vos liens internes (les billets qui sont liés entre eux) malgré les modifications ultérieures de l’URL d’origine. Au lieu de d’enregistrer le permalien, Sticky links stocke le numéro de la page ou du billet au lieu du permalink. Ca peut sembler inutile, mais dans la vie d’un blog, il arrive que l’on change l’URL d’une page ou d’un billet pour s’adapter à l’air du temps ou pour optimiser le référencement. Sticky links vous évitera de modifier les liens internes à votre site manuellement ou en faisant des copiés-collés dans la base de données.

Traduction des billets

Traduction par vos soins

Pour traduire un billet, sélectionnez la langue dans le champs situé sous l’édition du billet original et cliquez sur Add (pour ajouter une traduction). Ensuite, rédigez à nouveau votre billet dans la langue que vous avez choisie. Tout se passe dans le même environnement que pour la version originale de sorte que vous pourrez traduire les tags, les catégories, etc.

D’un point de vue technique, vous pourrez choisir d’avoir un répertoire par langue comme http://domain.tld/de/ pour les articles traduits en Allemand (vos permalink doivent être personnalisés) ou en query string http://domain.tld?lang=de. Le plugin propose la fonction pour insérer un menu déroulant pour permettre au visiteur de choisir la langue de son choix. Ce menu dérouland existe aussi sous forme de widget à glisser-déposer dans votre barre latérale.

Traduction par des professionnels

A l’installation, vous pourrez choisir d’activer l’option pour faire des tests ou directement pour faire appel aux services des traducteurs avec la possibilité d’entrer en contact avec votre interlocuteur. Je ne suis pas très au courant des pratiques en matière de traduction, mais avec WMPL tout est fait pour lisser le workflow. Grosso modo : il faut définir la langue par défaut à partir de laquelle les articles seront traduits par des professionnels pour la modique somme de $0,07 (env. 0,05€) par mot si vous activez le service en question qui reste optionnel.

En bref

Au départ ce billet a commencé par un tweet comme les autres, puis comme une revue de presse pour finir peu à peu comme ce qui peut ressembler à une revue complète, ce qui est loin d’être le cas.

Je vous invite à tester ce plugin très prometteur, d’autant plus que l’équipe de développement semble motivée et réactive, notamment à travers une documentation dense mais claire et un compte Twitter wpml pour assurer le Quick support for the WordPress Multilingual plugin.

Quelques liens

• http://wordpress.org/extend/plugins/sitepress-multilingual-cms/
• http://wpml.org/
• http://wordpress.org/extend/plugins/cms-navigation/
• http://www.qianqin.de/qtranslate/

Mais avant de modifier la base de données, je vous conseille d’en faire un backup. Pour cela, plusieurs solutions s’offrent à vous :

5 solutions pour sauvergarder votre BDD

1. Utiliser la fonction Export intégrée à WordPress pour obtenir un fichier XML sans les liens de votre blogroll préférée (d’ou la pauvreté de la mienne à ce jour) et sans toutes les tables ajoutées par les plugins que vous avez installés. Autant dire que cette option est à réserver lorsqu’on remet son blog à plat.
2. Installer un plugin dédié à cette tâche comme WordPress Database Backup qui va sauvegarder les tables selon votre bon vouloir. Notez que ce plugin permet de ne pas enregistrer les commentaires considérés comme du spam dans la table wp_comments et d’exclure les Post Revisions de la table wp-posts. Dans le même genre, wp-dbmanager offre un menu étoffé pour effectuer des opérations de maintenance de votre base de données sans quitter WordPress !
3. Profiter des fonctions de votre hébergeur préféré qui devrait permettre de faire des sauvegardes quotidiennes de l’ensemble de vos bases : les fichiers compressés seront probablement enregistrés à la racine de votre hébergement.
4. Trouver le lien Exporter dans phpMyAdmin puis cliquer sur Transmettre pour sauvegarder votre base sur votre poste de travail ou obtenir un joli fichier texte si vous laissez les choses en l’état. Enfin, vous pouvez cliquer sur Exécuter.
5. Enfin, pour les Jedi, il reste la ligne de commande comme mysql -h host -u user -ppass base_de_donnees > fichier_dump — Plus d’information sur aidenet.

Opération Search & Destroy avec Delete Revisions

Une fois la BDD à l’abrit, faites intervenir l’excellent Delete-Revision commis par gohsy. Ce plugin va simplement dégraisser la base de données et lui redonner une deuxième jeunesse en supprimant toutes les révisions redondantes. Comme ça, d’un seul clic. Je l’ai mis en place sur ce blog et tout à l’air de fonctionner correctement.

Le coup de la constante WP_POST_REVISIONS

Il est possible de se prémunir une fois pour toutes de ces révisions intempestives en ajoutant une constante dans le fichier wp-config.php situé à la racine du blog :

define('WP_POST_REVISIONS', false);

Et en la plaçant juste avant le commentaire :

/* That's all, stop editing! Happy blogging. */

Dans le même esprit, il est possible de ne conserver qu’un nombre définit de révisions avec la ligne (ici 3) :

define('WP_POST_REVISIONS', 3);

Le coup de la requête SQL DELETE

Si vous n’avez pas ajouté WP_POST_REVISIONS dès l’installation de votre blog, il faudra supprimer les révisions existantes. Pour cela, cette requête SQL — à copier-coller dans le champs phpMyAdmin qui va bien — est votre amie :

DELETE FROM wp_posts WHERE post_type = 'revision';

Plus d’information sur Comment désactiver le suivi des versions sous Wordpress 2.6 chez Korben et Malaiac qui nous offre une page consacrée à l’optimisation pour WordPress.

Quelques pistes pour optimiser WordPress

Supprimer les Post Revisions, c’est bien, mais pourquoi s’arrêter en si bon chemin alors que le réseau regorge de liens plus intéressants les uns que les autres ?

Profitons-en pour profiler notre outil de blog comme une voiture de course :

• Optimisation wordpress
• Alleger base de donnee db wordpress
• Petits moyens pour contenir et optimiser la base de donnees d’un blog sous wp
• Wordpress optimisez votre base de donnees en supprimant les revisions de billets

HTML

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

CSS

#MySplitter {
    height: 200px;
    width: 500px;
    border: 5px solid #aaa;
}
#MySplitter div {
    overflow: auto;
}
.vsplitbar {
    width: 5px;
    background: #aaa;
}

jQuery

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

1. @ Reply — Le plugin de Yus permet de répondre facilement à un commentaire précis à l’image du Reply to de Twitter.

   Reprend le pseudo du commentateur avec le lien vers le commentaire en question. Pratique pour éviter des saisies fastidieuses, mais surtout pour faire référence à un commentaire précis.

2. Akismet — L’anti-spam incontournable.

3. Category Order — Offre une interface pour ordonner les catégories et les sous-catégories par glissé-déposé dans l’ordre que vous désirez.

4. cforms — Le poids lourd des formulaires de contact, mais tellement souple à l’usage. Peut-être un peu trop complet pour mes besoins actuels, je cherche une alternative plus légère.

5. Chunk Urls for WordPress — Raccourcit les URL trop longues qui pourraient casser la mise en page dans les commentaires.

6. Comment Info Tip — Une façon de donner une visibilité supplémentaires aux lecteurs qui commentent en affichant une info-bulle au survol de leur nom.

   Affiche le nombre de commentaires déjà déposés (et les billets en question), ainsi qu’un extrait de leur dernier billet. Élégant et sobre, il devrait s’adapter à toutes les chartes graphiques.

7. Dean’s Permalinks Migration — Très pratique lors des changements de format d’URL : mappe l’ancienne structure sur la nouvelle. Simple et efficace.

8. DoFollow — Enlève le microformat rel= »no-follow » ajouté automatiquement par WordPress à tous les liens présents dans les commentaires.

   Une fois l’installation effectuée, profitez-en pour inscrire votre blog sur dofollow.fr ! En savoir plus sur nofollow, l’attribut scélérat ?

9. Get Recent Comments — Permet d’obtenir la liste des derniers commentaires. Plus complet que le widget présent par défaut dans WordPress, vous pourrez l’adapter facilement à vos besoins.

10. Google XML Sitemaps — Crée un plan de site au format XML à la racine de votre blog pour faciliter l’indexation de votre site par Google. Une palanquée d’options disponible.

11. LinkLift (Widgets) — Affiche automatiquement la liste des liens sponsorisés vendu par la régie LinkLift.

12. Markdown Extra — Peut remplacer avantageusement l’éditeur visuel TinyMCE de WordPress pour saisir les billets avec une syntaxe très simple mais très efficace pour produire du XHTML facilement.

    Si par défaut Markdown est actif dans la zone d’édition des billets et dans la zone des commentaires, il est possible de restreindre son utilisation à l’une ou l’autre.

    Après avoir désactivé la syntaxe Markdown pour la saisie des billets sur mon blog à cause de problèmes dans l’affichage des certains billets, j’ai décidé de la réactiver et de voir d’où viennent ces éventuels bugs. N’hésitez pas à me signaler d’éventuels dysfonctionnements.

13. Microsummary Comments Track — Tout nouveau plugin commis par Marin pour suivre les commentaires depuis la fonction Live Bookmarks de Firefox 3. Une vidéo pour la mise en route est disponible.

14. No Widows — Permet d’éviter qu’un mot présent dans un titre de niveau H2 (titre des billets dans la plupart des thèmes WordPress) se retrouve seul sur sa ligne.

    Inspiré par l’excellent article Three Quick Ways to Avoid Widows paru sur Learning jQuery

15. Ozh’ Admin Drop Down Menu — Remplace le système de menus et sous-menus de l’administration de WordPress par un menu déroulant permettant d’accéder à presque toutes les opérations en un minimum de clics. Carrément indispensable !

16. Search & Replace — Effectue des opérations de recherche et remplacement en attaquant directement la base de données de votre blog. Possibilité de restreindre les opérations à n’importe quel champs.

    Très pratique lorsqu’on modifie régulièrement la charte graphique de son blog : avec tout les changements de styles CSS que ça implique, il est parfois bien utile de pouvoir modifier les classes CSS présentes dans le code des billets. Presque indispensable lorsqu’on effectue une migration de blog !

17. Simple Tags — Permet de faire pratiquement toutes les manipulations connues ou inconnues sur les tags ! Cerise sur le gâteau, le plugin permet d’afficher la liste des billets plus ou moins en rapport compte tenu de critères sur lesquels vous avez la souris ;)

18. Subscribe To Comments — Permet à ceux qui laissent des commentaires de recevoir les réponses sur leur boite e-mail. Indispensable pour faciliter la vie de vos lecteurs les plus assidus ;)

19. Text Link Ads — Affiche automatiquement la liste des liens sponsorisés vendus par la régie du même nom.

20. Theme Test Drive — Grâce à cet excellent plugin, vous pourrez voir un thème différent des visiteurs. Il suffit d’être connecté à l’interface d’administration et de sélectionner le thème que vous voulez admirer en douce. Très utile pour finaliser un thème WordPress en situation réelle.

    Attention toutefois, à la mise en place des widgets car vos visiteurs verront les modifications en direct !

21. the_excerpt Reloaded — WordPress propose la fonction the_excerpt() pour afficher un extrait des billets mais supprime toutes les balises HTML qu’il contient.

    Ce plugin vous permettra de définir quelles balises HTML vous désirez laisser passer dans l’extrait et la taille de ce dernier. Pratique pour afficher les liens ou les images dans l’extrait.

22. WordPress Database Backup –Gère les sauvegardes de votre blog, soit sur votre disque dur, soit en envoyant un fichier à l’adresse e-mail que vous indiquez. Possibilité d’automatiser les sauvegardes selon des durées au choix.

23. WP-DBManager — Permet d’effectuer des opérations de maintenance sur la base de données de votre blog ou des sauvegardes à condition que votre hébergement le permet.

24. WP-MostCommentedPosts — Affiche la liste des billets les plus commentés. Pratique pour faire remonter quelques billets ou donner une idée des thèmes les plus populaires de votre blog.

    Attention toutefois, les billets les plus populaires ne sont pas forcément les plus représentatifs.

MAJ : Depuis la rédaction de ce billet, j’ai ajouté quelques plugins :

• Plugin Central — Permet d’installer un plugin en un clic en saisissant l’URL du fichier zip ou le nom du plugin s’il est présent sur wordpress.org/extend/plugins/.

• Simple Yearly Archive — Affiche sobrement la liste des tous les articles publiés classés par années. En remplacement de Snazzy Archives, un peu trop hype ;)

• WP-PostViews — Ce plugin permet de connaitre le nombre de fois où un article à été vu. Un widget affiche la liste des x derniers billets les plus vus.

• WP Ajax Edit Comments — Ajoute diverses fonctionnalités pour les commentaires d’un blog dont la principale : autoriser les visiteur à modifier leurs commentaires durant un laps de temps à définir. Intéressant ici dans la mesure où tout le monde ne maitrise pas la syntaxe Markdown ;)

• WP Super Cache — Chaque fois qu’un visiteur affiche une page de votre blog, ce sont des dizaines de requêtes (voire plus) à votre base de données et des traitements coûteux en ressources, au niveau PHP.

  WP Super Cache calcule vos pages à la première demande et en garde une version statique pour les requêtes suivantes pour soulager votre serveur.

• bhCalendarchives — Plugin pour WordPress permettant d’afficher vos archives sous forme de tableau mensuel, les années en ordonnées et les mois en abscisses “à la façon de ShaunInman.com“. Si vous optez pour le widget, celui-ci vient en remplacement du widget “archives” original de WordPress.

PS : Je n’active pas en permanence les plugins Theme Test Drive, WP-DBManager ou Search & Replace qui ne  sont utiles qu’à certains moment.

PS2 : Entre-temps, j’ai remplacé WP-MostCommentedPosts par le widget qui affiche les billets PostRanked de AideRSS.

burningHat s’est inspiré de la présentation des archives de Shauninman.com pour développer une fonction permettant d’obtenir un tableau mensuel avec les années en ordonnées et les mois en abscisses.

Cette fonction est désormais disponible sous forme de plugin avec une ligne à copier dans votre template ou en remplacement du widget Archives de WordPress. Vous pouvez voir Calendarchives en action sur ce blog.

Pour le moment les mois sont affichés par un chiffre (1 pour janvier, etc.). Une prochaine version du plugin devrait voir ces chiffres remplacés par la première lettre du mois (J pour janvier). En attendant, il est possible d’obtenir ce résultat en modifiant le code du plugin comme l’indique Manu dans ces commentaires.

MAJ : la nouvelle version de Calendarchives disponible sur WordPress.org propose plusieurs options pour afficher la date : chiffres, première ou trois premières lettres du mois. Toutes ces options sont accessibles simplement en faisant glisser-déposer le widget Archives dans la zone widgétisable de votre choix. Bravo Emmanuel !

En typographie, on appelle ça la gestion des veuves et des orphelines. En général ces termes s’appliquent plutôt à la première ligne d’un paragraphe qui se retrouve seule à la fin d’une page (opheline) ou la dernière ligne d’un paragraphe qui se retrouve seule en haut d’une page (veuve) cf. Wikipedia.

Le site Learning jQuery propose trois méthodes pour appliquer un espace insécable   entre les deux derniers mots d’un titre pour les solidariser sur la deuxième ligne afin d’éviter d’avoir un titre disgracieux comme celui que vous avez sous les yeux :D

Parmi les trois solutions proposées, j’ai choisi celle qui reposait sur le traitement des chaines de caractères string, mais rien ne vous empêche de choisir la méthode utilisant les tableaux (Array) ou les Expressions régulières.

$(document).ready(function() {
    var h2all, h2a, h2b;
        $('h2 a').each(function() {
        h2all = $(this).text();
        h2a = h2all.slice(0, h2all.lastIndexOf(' '));
        h2b = ' ' + h2all.slice(h2all.lastIndexOf(' ')+1);
         $(this).html(h2a + h2b);
     });
});

La fonction s’applique uniquement aux liens contenus dans la balise de titre de niveau H2 sur l’ensemble de la page.

MAJ : Pour intégrer cette fonction dans WordPress, voici un fichier .zip à décompresser et à placer dans le dossier plugins de votre thème.

Pour cette deuxième revue de web de la semaine, je vous propose : quelques plugins et astuces pour mieux utiliser WordPress ; ce qui a retenu mon attention en matière de développement web en général et quelques liens utiles ou simplement amusant glanés sur la vaste toile pour finir avec la banane ;)

WordPressing

• Générateur de shortcode — Si Wordpress 2.5 fournit une API pour faciliter la création de raccourcis au sein d’un billet pour insérer un contenu récurrent comme une signature, une image, ou carrément afficher une boucle WordPress (the loop) personnalisée, K-ny, quant à lui, nous propose, en plus de son générateur de shortcodes, des tutoriels sur la création de shortcodes avancés. Voir aussi la série des trois tutoriels sur les Shortcodes de burningHat. Comme vous pouvez le voir sur le visuel, j’en ai profité pour créer un petit shortcode bien pratique pour clearer les float à l’aide d’un retour à la ligne br et d’une déclaration CSS disponible dans ce billet.[br]
• ImageManager — Ce plugin compatible avec Wordpress 2.5 fournit une interface pour uploader des images sur votre serveur et naviger parmis elles. L’éditeur intégré autorise quelques manipulations de base sur les images comme la découpe, la rotation, l’inversion ou la mise à l’échelle. Parmis les petits détails bien vus, il est possible d’ajouter facilement une classe CSS ou un style en ligne sur les photos.[br]
• Keywords Autolink – Ce plugin pour WordPress 2.5 codé par k-ny de Webinventif vous permet de définir un mot-clé ou un groupe de mots clés ainsi que l’URL ou le groupe d’URL vers laquelle il doit pointer ! Et tout celà sans devoir éditer vos billets car la fonction détecte automatiquement les mots-clés dans vos articles et les transforme en liens !
• WordPress 2.6 et la révision des billets — A peine la 2.5 est-elle sortie qu’il faut déjà se tenir au courant des évolutions de la prochaine version de WordPress. Heureusement que burningHat veille pour nous ;)
• Thème Mimbo en détail — Très bon article paru sur Exutoire sur les paramétrages avancées du Thème Mimbo pour WordPress.
• Plugin Pagination – Envie de changer des billets précédents et billets suivants pour afficher en plus le nombre de pages restant à parcourir sur votre blog WordPress ? Ce plugin est fait pour vous. La documentation aussi ;) Ne semble pas fonctionner avec la page de recherche (search.php) ou d’archives : le nombre de pages affichées reste identique quelque soit le nombre de résultat.

Développement web

• 25 éditeurs WYSIWYG — Revue des principaux outils de création de sites web. Prenez aussi le temps de jeter un oeil sur les 30 éditeurs de code sources passés au crible ! Inspirez-vous des techniques proposées pour Améliorer la lisibilité des CSS avec ce bel article sur les différentes manière d’organiser nos feuilles de styles CSS… De toute façon, je suis sûr que vous ne ratez aucun des billets publiés sur Smashing Magazine ;)[br]
• Blog déco design — le blog d’Henri Labarre consacré au design a changé d’adresse et n’est plus un sous-domaine de 2803.com. Mettez à jour vos blogroll ![br]
• kotatsu — Générateur de tableaux HTML en ligne avec la possibilité d’ajouter des lignes et des colonnes ainsi que des classes CSS.[br]
• Performances Web — Benchmark sur le chargement des feuilles de style avec la balise link ou la règle @import
• Des variables en CSS — Dans un avenir plus ou moins lointain, les variables pourrait faire leur apparition dans une future version.
• jquery.pngFix.js — Plugin jQuery pour gérer la transparence des images au format PNG 24 bits. Voir aussi iepngfix ou le projet PNGHack de Pôle-Web.

Miscellannées

• Vatchvideo — Téléchargez les vidéos à partir de YouTube ! Il est même possible de spécifier le format de sortie comme via Xavier83.
• Re-mark — Lorsqu’on importe des bookmarks sur delicious, ils sont privés. Si comme moi vous êtes amené à rendre public plus de 2400 liens, vous serez content d’utiliser ce service. Merci Twitter, merci Gilles ! L’outil n’est pas des plus intuitif : pour rendre vos liens public, une fois que vous avez activé l’option idoine dans re-mark et copié le code, loguez-vous sur votre delicious et affichez 100 liens par page (pour allez plus vite), puis collez le code sur chaque page l’opération s’effectue en direct live.
• Albert Einstein vs Marylin Monroe — pour finir cette liste un peu ennuyeuse, voici une Illusion d’optique assez étonnante trouvée sur Koreus ;)