Bientôt du neuf dans mes plugins WordPress

Le 8 février 2010, dans Le blog

Pas beaucoup d’articles, en ce moment, sur le blog. Il faut dire que j’ai un peu la tête dans le guidon, ce qui est plutôt une bonne chose, au final.

Cela dit, si tout se passe comme prévu, il devrait y avoir du neuf d’ici à la fin de la semaine. Je suis notamment en train de peaufiner un nouveau plugin WordPress. Après Editable Comments pour l’édition des commentaires, je m’attaque à la connexion externe (Facebook, Twitter…), dans le genre de ce que fait WP Facebook Connect, mais en mieux (en tout cas, à mes yeux, j’espère que ce sera également votre cas).

Vous pouvez d’ores et déjà le tester sur ce blog, où je viens d’activer une version alpha ;)

Restez connectés !

Wordpress n’est pas fait pour les développeurs !

Le 23 janvier 2010, dans Métiers du Web

Avant-hier, Palleas a lancé un coup de gueule contre les « développeurs wordpress » et contre wordpress en général (« wordpress, c’est de la merde »). Si vous n’avez pas lu l’article, je vous conseille d’aller y jeter un œil avant de continuer la lecture de celui-ci.

Ma réponse ne tiendrait pas dans un commentaire, alors je vais le faire ici.

Qu’est-ce qu’un développeur wordpress ?

Commençons par le début : un développeur wordpress, ça n’existe pas. Wordpress est un outil, pas une technologie. Développeur wordpress est donc un raccourci maladroit signifiant : je suis développeur web spécialisé dans l’utilisation de Wordpress. Comme les raccourcis, même maladroits, ont le mérite d’être courts, je vais continuer l’article en parlant de développeur wordpress, mais gardons à l’esprit la véritable définition.

Que signifie développer pour wordpress ?

Ajouter des fonctions php issues du codex dans les fichiers d’un thème, ce n’est pas être développeur. C’est être, disons, un intégrateur aux compétences élargies, c’est à dire capable de lire une documentation et d’en tirer le code dont il a besoin.

Alors à partir de quand peut-on se dire développeur wordpress ? C’est simple : quand on crée son propre code. Là, il y a deux manières. Soit vous comblez un besoin ponctuel en créant une fonction dans le fichier prévu à cet effet dans votre dossier de thème (functions.php), soit vous répondez à un besoin plus général en créant un plugin. C’est votre cas ? Bravo, vous êtes développeur wordpress !

Passons à la seconde partie, à savoir le coup de gueule contre wordpress en général.

Wordpress, une merde bien faite

C’est vrai, wordpress n’est pas superbement codé. Il n’a pas été totalement réécrit depuis… depuis… l’a-t-il déjà été ? En conséquence de quoi, il est plein de codes dépassés. Diantre, du PHP 4 ! En dehors de ça, wordpress a quelques avantages non négligeables par rapport à des concurrents mieux codés :

  • Son extensibilité : je ne connais pas de CMS aussi extensible que WordPress. Quand j’ai besoin de réaliser quelque chose que WordPress ne sait pas faire, ou fait mal à mon goût, je trouve quasiment toujours un moyen d’y parvenir sans toucher au coeur de la bête, simplement en utilisant les nombreux filtres et actions prévus pour ça.
  • Son interface d’administration : comparée à certaines dont je ne citerai pas le nom cent fois maudit, l’administration de wordpress est simple, très simple. Tout en restant efficace. C’est une qualité indéniable, déterminante quand on sait que les clients finaux, pour la grande majorité, n’ont jamais utilisé d’interface d’administration auparavant. Le seul hic, c’est que cette interface est difficilement modifiable sans toucher directement aux fichiers.
  • Son intégration : les thèmes pour wordpress sont très simples à créer, et les fonctions permettant d’accéder aux données sont en général bien faites ou, sinon, aisément contournables. Ce n’est pas le cas de bien des CMS…

Le meilleur compromis

Alors certes, Wordpress, par la qualité de son code, ne serait peut-être pas le premier choix d’un développeur. Mais c’est le meilleur compromis que je connaisse entre les différents intérêts du développeur, de l’intégrateur et du client final. Une merde, peut-être, mais une merde rudement efficace !

Créer des éléments HTML avec jQuery 1.4

Le 15 janvier 2010, dans Trucs et astuces

Si vous avez déjà essayé d’ajouter des éléments HTML avec javascript, vous le savez : c’est la croix et la bannière !  Pour faciliter cette action, la dernière version de jQuery (1.4) propose une nouvelle syntaxe appelée : Quick Element Construction. C’est d’une simplicité déconcertante :

jQuery("<div>", {
 id: "foo",
    css: {
        height: "50px",
        width: "50px",
        color: "blue",
        backgroundColor: "#ccc"
    },
    click: function() {
       $(this).css("backgroundColor", "red");
    }
}).appendTo("body");

Je suis déjà fan. La liste des fonctionnalités ajoutées à jQuery 1.4 est disponible sur le site jquery14.com.

Qui perd la guerre des navigateurs ?

Le 9 janvier 2010, dans Métiers du Web

Cet article est une réaction à un tweet de @davidwalshblog (relayé par @geekarlier) :

Who loses the browser wars? Developers.

« Qui perd la guerre des navigateurs ? Les développeurs. » J’ai trouvé la réflexion intéressante et sujette à discussion.

Qu’est-ce que la guerre des navigateurs ?

Petit rappel des faits. Il y a environ dix ans, après une âpre concurrence avec le navigateur Netscape, Internet Explorer est devenu LE navigateur incontournable, en suprématie totale sur le marché grâce à l’immense force de frappe de Microsoft et surtout à la forte imbrication du navigateur avec son système d’exploitation Windows.

EN 2001, Microsoft sort la version 6 d’Internet Explorer et décide d’arrêter là, stoppant net l’innovation du secteur après le K.O. de son principal concurrent. Mais en 2004 sort Firefox 1.0, un navigateur innovant (il est le premier à utiliser les onglets) créé par la fondation Mozilla à partir du code source complètement revu et corrigé de l’ancien Netscape. Face au succès de ce petit nouveau, Microsoft décide de remettre au travail son équipe de développement et sort IE7 fin 2006, provoquant par la même occasion une nouvelle course à l’innovation dans le secteur des navigateurs web.

En 2008, c’est au tour de Google. Le géant des moteurs de recherche sort Google Chrome, un navigateur simple et épuré basé sur le code source de Safari1, le navigateur d’Apple (alors disponible uniquement sur Mac disponible pour Windows quelques mois avant Chrome). Son succès est jusqu’ici assez mitigé mais ses parts de marché pourraient augmenter considérablement, Google ayant dernièrement mis en place une campagne de publicité impressionnante (affiches dans la rue et le métro, pleines pages dans des journaux papier, encarts sur des sites web à forts trafics, etc).

La guerre des navigateurs, c’est donc cela : une course aux parts de marché, basée sur une innovation et une promotion permanente de la part des différents protagonistes.

Qui y gagne ?

Les utilisateurs, assurément. Ils sont la cible à convaincre, les concurrents mettent donc tout en place pour améliorer leur ergonomie et proposer des outils toujours plus performants.

Qui y perd ?

D’après @davidwalshblog, les développeurs. Bien. J’imagine qu’il inclut dans ce terme les intégrateurs, bien que ce soit deux métiers différents. Je comprends son point de vue, mais je ne le partage pas complètement. Pourquoi ? Une conséquence de cette guerre d’innovations est que les navigateurs proposent des fonctionnalités différentes (ou des manières différentes de les aborder) et sortent parfois du carcan des standards pour marquer leur différence. Le problème, pour un professionnel du web, c’est que ses réalisations doivent fonctionner pareillement au moins sur les supports les plus répandus. En tant qu’intégrateur (pour l’affichage) et développeur (pour les fonctionnalités dynamiques en javascript), je n’ai pas le choix : je dois vérifier mon travail sur Firefox, Internet Explorer et Chrome. Pire, comme je l’ai déjà évoqué maintes fois dans mes articles, je dois prendre en compte les différentes versions ! Car une autre conséquence de la guerre des navigateurs est une mise à jour rapide et régulière de ces logiciels. Si tout le monde utilisait un navigateur à jour, ce ne serait pas un problème. Malheureusement, c’est loin d’être le cas.

A titre d’exemple, voici un aperçu de l’équipement des lecteurs d’apperisphere.com, le mois dernier :


Vous le voyez, ça fait beaucoup de configurations différentes à prendre en compte si l’on veut que tous puissent avoir un rendu correct.  En cela, c’est exact, les développeurs et intégrateurs perdent un temps considérable à ménager la chèvre et le chou.

Un mal nécessaire pour un progrès de civilisation

Mais pour moi, cela n’est qu’un dommage collatéral ; tout travail induit forcément une certaine pénibilité, des contraintes. Ce n’est pas pour autant que nous sommes perdants. Car, au fond, qui voudrait sérieusement revenir au web d’avant Firefox ? Quel métier terne aurions-nous ! L’innovation technologique est une des données qui fait de nos métiers des métiers de passionnés. Le web est en perpétuelle évolution. Personne ne sait précisément où il va, il n’y a personne pour diriger la barque, mais tout le monde peut participer à construire son avenir.

Depuis la voiture et le téléphone, Internet est, à mes yeux, la seule évolution technologique importante induisant un véritable progrès de notre civilisation2. Et la guerre des navigateurs en est une composante essentielle. Alors certes, les développeurs blasés y perdent peut-être, au final, mais les passionnés comme moi y gagnent beaucoup !

  1. comme le fait fort justement remarquer Florent, il utilise en réalité le moteur de rendu de Safari, à savoir Webkit [↩]
  2. en plus de l’invention du Kinder Bueno [↩]

Lunascape, le navigateur qui inclut Firefox, Chrome et Windows Explorer

Le 4 janvier 2010, dans Trucs et astuces

Mon titre n’est pas tout à fait exact : le navigateur Lunascape, développé par des japonais, inclut Gecko, Webkit et Trident, qui sont les moteurs de rendu respectifs des navigateurs sus-cités. Le principe est intéressant pour les intégrateurs. Grâce à Lunascape, on peut facilement (via une unique interface) vérifier le rendu final de notre travail sur les plus importants navigateurs du marché. Le logiciel intègre d’ailleurs des outils de deboguage assez utiles. Il est également possible de l’étendre avec des modules complémentaires… enfin, si vous comprenez le Japonais, car malheureusement, le site hébergeant les plugins est accessible uniquement dans cette langue.

Bref, Lunascape pourrait devenir l’outil ultime pour les intégrateurs de tous pays… s’il gérait les versions. Car le gros problème des intégrateurs, ce n’est pas vraiment d’afficher correctement leur travail sur les différents navigateurs. Globalement, les dernières versions respectent suffisamment les standards pour que leur rendu soit similaire. Non, le gros problème, c’est que leur travail s’affiche correctement Y COMPRIS dans les versions précédentes ! C’est-à dire au moins Firefox 2, Firefox 3, IE 6 et IE7. Et là, Lunascape n’ait d’aucune utilité puisqu’il n’inclut que les dernières versions des moteurs de rendu.

Dans l’état actuel des choses, Lunascape n’est qu’une curieuse nouveauté prometteuse. Pour la production, je reste donc fidèle à IETester et à mes différentes instances de Firefox.

Wordpress : Editez vos commentaires avec le plugin Editable Comments

Le 28 décembre 2009, dans Plugins wordpress

Il existe plusieurs plugins WordPress pour l’édition de commentaires par leur auteur. Malheureusement, à mes yeux, aucun ne convient réellement. Les deux principaux ont chacun une force et une faiblesse :

  • « Edit comment » permet de choisir avec précision comment afficher le lien de modification mais nécessite de fastidieuses adaptations de la page comments.php du thème,
  • « WP Ajax Edit Comments » est très complet et ne nécessite aucune modification de thème, malheureusement le lien de modification est généré automatiquement sans possibilité de personnalisation.

Comme on n’est jamais mieux servi que par soi-même, j’ai donc décidé de créer mon propre outil, personnalisable et accessible : le plugin Editable Comments. Vous trouverez plus d’informations sur son fonctionnement sur la page dédiée, mais sachez déjà qu’il permet de gérer l’affichage du lien grâce à l’appel d’une fonction et que le formulaire de modification est affiché soit via une fenêtre modale javascript, soit sur une page distincte. Par défaut, la fenêtre modale est activée, mais le plugin fonctionnera automatiquement en mode « page distincte » si le javascript est désactivé sur le navigateur du commentateur.

editable-comments-form

L’administration du plugin vous permet de gérer le mode d’affichage du formulaire ainsi que la durée limite pendant laquelle l’auteur d’un commentaire peut le modifier.

Voilà, on va dire que c’était mon cadeau de noël pour la communauté WordPress. Bonne utilisation !

Télécharger le plugin Editable Comments

Paris Web 2009 : les difficiles relations entre graphistes web et intégrateurs

Le 15 décembre 2009, dans Métiers du Web

Je n’ai pas pu aller à Paris Web cette année, heureusement les conférences  sont disponibles en vidéo sur Dailymotion. On y trouve notamment la très intéressante conférence de Gilles Vauvarin : « Webdesigner, l’homme qui murmurait aux oreilles des intégrateurs« .

Les relations entre graphistes web et intégrateurs ne sont pas toujours roses bien que leur travail soit totalement interdépendant. Idéalement, ces deux corps de métier devraient échanger régulièrement (et même en dehors des projets web) afin de mieux comprendre leurs préoccupations respectives et ainsi apprendre à respecter les choix et le travail de l’autre.

http://www.dailymotion.com/videoxbevhs

Plugin WordPress : External Files Optimizer

Le 7 décembre 2009, dans Plugins wordpress

wordpress-optimizerVous le savez, pour optimiser la vitesse d’affichage d’un site Web, une des astuces consiste à réduire le nombre d’appels de fichiers externes et, si possible, de les compresser. Cela concerne notamment les feuilles de styles et les fichiers JavaScript.

Le hic, avec un site WordPress, c’est que les différents plugins installés génèrent bien souvent leurs propres appels de fichiers externes. Résultat, on se retrouve très rapidement avec des dizaines de fichiers supplémentaires dans l’entête de nos pages.

Pour remédier à ce problème, deux solutions. La première est fastidieuse. Elle consiste à récupérer tous les fichiers ajoutés par ces plugins et à les combiner soi-même dans un fichier unique. Il faut ensuite modifier chacun de ces plugins pour annuler les appels… et c’est là que ça se gâte, car si vous mettez un jour l’un de ces plugins, il faut recommencer toute la manipulation !

La deuxième solution : utiliser le plugin External Files Optimizer, qui s’occupe de tout ça pour vous. Le principe est simple. Il analyse le résultat des fonctions wp_head() et wp_footer() pour en extraire tous les appels de fichiers css et js, puis il récupère leur contenu et le combine dans un fichier unique pour chacun des deux types. Enfin il compresse le tout via gzip pour diminuer le poids final.

Grâce à External Files Optimizer, vous optimisez de manière automatique la vitesse d’affichage de votre site WordPress. Prenez ce site par exemple. Grâce à l’outil Page Speed développé par Google, on peut très simplement analyser les performances d’une page. Sans l’optimiseur, ma page d’accueil fait appel à 59 ressources dont le transfert total représente 394,7kB. Une fois le plugin activé, elle passe à 44 ressources pour 189,2kB. Mieux non ?

Pour télécharger le plugin, rendez-vous sur la page External Files Optimizer.

Wordpress : comment personnaliser l’aperçu des articles

Le 3 décembre 2009, dans Trucs et astuces

wordpress-tinymceQuand vous écrivez un nouvel article ou une nouvelle page, l’éditeur de WordPress vous laisse le choix entre deux interfaces : visuelle et HTML. Si vous maîtrisez le HTML et si vous tapotez du clavier à la vitesse de la lumière, ce dernier choix est un bon choix. Néanmoins, si vous préférez avoir un aperçu plus visuel de l’article en cours de rédaction, l’intérêt de l’interface du même nom est évident.

Grâce à cette interface visuelle, vous pouvez modifier le contenu de votre article en voyant immédiatement le rendu final. Malheureusement, ce rendu n’est pas parfait, car il ne correspond pas vraiment au style de votre site web. Sachez cependant que ce rendu est personnalisable, et si cette personnalisation n’est pas proposée de base dans WordPress, nous pouvons la réaliser simplement avec quelques lignes de code.

TinyMCE, l’éditeur riche universel

L’interface visuelle utilise un éditeur riche très puissant nommé TinyMCE. Il est très personnalisable et permet la création de plugins : c’est grâce à cette extensibilité que l’on peut ajouter des boutons dans la barre d’outils aussi facilement, comme c’est le cas pour le plugin Link To Post. Cette grande malléabilité en a fait le candidat idéal pour être introduit dans bien des projets web, comme WordPress ou Joomla.

Appliquer une feuille de style

Entre autres fonctionnalités proposées par TinyMCE, celle qui nous intéresse est l’application d’une feuille de style. En effet grâce à un paramètre renseigné à l’initialisation de l’éditeur, il est possible de le forcer à utiliser une feuille de style externe de notre choix.

1. Créer la feuille de styles

Vous pouvez toujours demander à TinyMCE d’importer directement la feuille de styles de votre site, mais le résultat risque d’être… intéressant. Ou en tout cas, probablement pas celui que vous escomptez. Non le mieux est de réaliser une feuille de styles indépendante qui contiendra uniquement les styles élémentaires, à savoir couleur de fond, choix de la police, taille et couleur de chaque élément HTML. Appelez ce fichier, disons, mce.css, et chargez le dans le dossier de votre thème.

2. Expliquer à l’éditeur où la trouver

Votre thème possède très probablement un fichier nommé functions.php. Si ce n’est pas le cas, créez-en un. Editez le, et ajoutez les lignes de code suivantes :

function tinymce_perso_css($wp) {

 return $wp .= ',' . get_bloginfo('template_url') . '/mce.css';
}
add_filter( 'mce_css', 'tinymce_perso_css' );

Voilà, c’est aussi simple que ça. Votre interface visuelle d’édition utilisera les styles présents dans mce.css et le rendu sera désormais plus proche de vrai rendu final.

Sélectionner manuellement les styles à appliquer

Il est possible d’aller un peu plus loin. Imaginons que vous désiriez appliquer différents styles css à vos paragraphes : par exemple, encadrer une ligne de texte. Par défaut, le TinyMCE personnalisé par WordPress affiche une liste déroulante vous permettant de sélectionner un format : paragraphe, adresse, titre 1, titre 2, etc. Mais vous pouvez également lui demander d’afficher une liste similaire qui vous proposera différents styles à appliquer. Cette manipulation est très simple :

1. Demander l’affichage de la liste déroulante des styles

Editez à nouveau votre fichier functions.php et ajoutez le code suivant :

function tinymce_buttons($buttons){
 $style = array('styleselect');
 $buttons = array_merge($style,$buttons);
 return $buttons;
}
add_filter('mce_buttons_2', 'tinymce_buttons');

La liste s’affichera au tout début de la seconde ligne de la barre d’outils de l’éditeur. Curieusement, la liste n’apparaitra pas si vous choisissez ‘mce_buttons_1′.

2. Créer les styles personnalisés

La liste déroulante possède déjà quelques styles par défaut. Mais vous pouvez en ajouter en éditant le fichier mce.css précédemment créé et en ajoutant des classes css. Par exemple :

.cadre{ border:1px dashed #000; }

Il ne vous reste plus qu’à sélectionner le texte et à choisir le style « cadre » dans la liste déroulante.

Grâce à ces quelques modifications très simples, vous avez à présent un rendu visuel proche de votre rendu final et pourrez facilement appliquer des styles css à votre prose.

Si vous êtes sages, je parlerais à nouveau des possibilités offertes par TinyMCE dans de prochains articles. C’est une zone stratégique de WordPress qui mérite d’être éclaircie !

Plugin Wordpress : Link to Post 0.5

Le 25 novembre 2009, dans Plugins wordpress

Jusqu’à août dernier, je travaillais avec Aymeric Jacquet, pour lequel j’ai réalisé plusieurs plugins wordpress. Il m’a proposé de les reprendre à mon compte, ce que j’ai accepté avec plaisir. Voici donc une nouvelle version du plugin WordPress « Link To Post », qui permet de créer facilement des liens vers des billets ou pages existantes.

Les nouveautés :

  • ajout d’un shortcode. C’est une fonctionnalité qui a été demandée à plusieurs reprises. Les liens générés par Link To Post sont des liens en dur : si vous changez de nom de domaine ou simplement de permalien, ils ne fonctionneront plus. D’où la possibilité d’utiliser un shortcode qui se présente de la forme suivante : texte du lien.
  • suppression des premiers mots du billet dans la liste de résultats du popup. Sur chaque lien de cette liste, la balise title donnait un aperçu des billets grâce à l’affichage de leurs premiers mots. Mais c’était un nid à bugs que j’ai préféré supprimer, eu égard à son peu d’intérêt véritable.

linktopost-list

Dans la prochaine version :

  • fusion de deux boutons « link to post » et « link to page »
  • ajout d’un filtre par auteur

Si vous avez d’autres idées d’amélioration, n’hésitez pas !

Plugin Link To Post 0.5