Accueil > WordPress > Alternatives pour l’édition d’articles sous WordPress

Alternatives pour l’édition d’articles sous WordPress

Pour information, ce site a été réalisé à l’aide de la plateforme de blogs WordPress. Bien que cela semble n’avoir aucun rapport avec le .NET Framework et le thème du site, les deux univers se rapprochent parfois de façon assez inattendue (cherchez bien dans la suite de cet article). J’en profiterai d’ailleurs de temps en temps pour écrire quelques billets qui sortent un peu du domaine du code C# et de Visual Studio afin de présenter d’autres problématiques que l’on peut être amené à rencontrer en informatique ou en programmation.
Bon, c’est vrai, j’avoue aussi que j’ai eu quelques difficultés à bien maîtriser WordPress au départ, et je n’ai pas pu résister à l’envie de mettre tout ça par écrit.

WordPress intègre par défaut un petit éditeur proposant d’écrire ses articles soit directement en code HTML, soit via un éditeur Visuel WYSIWYG (What You See Is What You Get). Cependant, ces outils ne sont pas aussi faciles à utiliser qu’il n’y parait, en particulier si on a une idée précise du résultat final auquel on souhaite arriver : L’éditeur HTML n’a pas de coloration syntaxique, les balises <p> pour les paragraphes sont masquées, ce qui oblige souvent à passer par l’éditeur Visuel pour gérer correctement les paragraphes, et la taille du cadre d’édition est microscopique par défaut (à changer immédiatement dans les options d’écriture du blog) :

Editeur HTML Wordpress

Editeur HTML de WordPress

 
A noter aussi que sous IE 8 le curseur remonte au début du document de façon intempestive, ce qui est plutôt rageant. Personnellement, j’ai résolu ce problème en forçant l’affichage de compatibilité (icône à droite de la barre d’adresse).

L’éditeur visuel est un peu plus réussi : Il y a un mode plein écran, l’insertion des images est en général bien effectuée (attention pour la suppression à utiliser la commande prévue pour et non la touche Suppr., sous peine de laisser du code HTML inutile), mais il y a souvent des différences entre ce qui est affiché dans l’éditeur et le résultat final. Pire, certaines corrections effectuées dans l’éditeur HTML peuvent casser la mise en page du document et faire perdre un temps précieux. On remarquera aussi l’absence de certaines fonctions comme la création de tableaux.

Editeur visuel Wordpress

Editeur visuel de WordPress

 

A lire aussi, un article intéressant sur les problèmes rencontrés avec l’éditeur intégré à WordPress sur ce blog.

Bref, j’ai un peu eu la sensation de suivre un parcours du combattant pour arriver à un résultat satisfaisant lors de mes débuts avec WordPress. C’est pourquoi j’ai rapidement essayé de rechercher d’autres moyens plus efficaces pour créer mes pages et articles.

 

TinyMCE

Bon ce n’est pas vraiment un outil alternatif à celui de WordPress, puisque TinyMCE est en fait l’éditeur Visuel WYSIWYG de cette plateforme de blog. Cependant, celui intégré par défaut est en fait une version allégée du plugin officiel. Il est possible, en modifiant un peu le code et les fichiers du blog, d’activer les fonctions supplémentaires pour profiter de l’édition des tableaux par exemple, comme l’explique cet article. Je n’ai pas testé la solution proposée et l’article n’est pas très récent, mais je pense que les conseils donnés doivent être toujours valables pour ceux qui souhaitent s’y intéresser. Certaines extensions permettent aussi d’ajouter de nouvelles options, comme TinyMCE Advanced. Cependant ça ne résout pas les problèmes de base de cet éditeur, à savoir le manque de confort lors de la saisie et de la modification du texte, et le fait que l’éditeur HTML reste identique à celui d’origine.

Avantages :

  • Nombreuses fonctionnalités de l’éditeur visuel

Inconvénients :

  • Compliqué à mettre en œuvre (il faut toucher au code de WordPress)
  • Mêmes défauts d’ergonomie que l’éditeur visuel intégré à WordPress

 

Word

L’éditeur visuel de WordPress propose une fonctionnalité permettant de réaliser un copier-coller d’un texte Word. Bon, dit comme ça il n’y a rien d’extraordinaire, mais elle présente tout de même l’avantage de conserver une partie de la mise en forme du texte ainsi que les tableaux (mais pas les images). Je tiens cependant à rassurer ceux qui ont déjà tenté de créer une page HTML dans Word : la conversion en HTML est assurée par l’éditeur visuel de WordPress, il n’y aura donc pas une quantité monstrueuse de balises inutiles comme Word sait si bien les générer.
Cette solution présente l’avantage de travailler avec un vrai éditeur de texte, ce qui peut être relativement séduisant quand on a beaucoup d’articles à rédiger. Par contre il est très difficile d’éditer un article existant par l’intermédiaire de Word et de ce copier-coller sans perdre les mises en forme propres à WordPress.

Avantages :

  • Simple à effectuer
  • Permet de travailler avec un vrai éditeur de texte
  • Prise en charge des tableaux créés sous Word

Inconvénients :

  • Nécessite d’effectuer les dernières étapes de mise en forme sous WordPress
  • Différence visuelle entre l’affichage dans Word et le résultat sur le blog
  • Ne peut quasiment pas servir à modifier un article existant

 

NotePad++

NotePad++ est un des éditeurs de texte les plus connus, notamment parce qu’il remplace très avantageusement le NotePad (Bloc-notes) par défaut de Windows tout en étant gratuit et ouvert. Son principal intérêt ici est de combiner un éditeur de texte très simple avec la coloration syntaxique HTML, le tout sans être contraint par la taille de la fenêtre d’édition. Cependant, il n’y a malheureusement ni éditeur Visuel, ni aide à la syntaxe HTML.

Avantages :

  • Léger et rapide
  • Coloration syntaxique HTML

Inconvénients :

  • Pas d’éditeur visuel
  • Aucune aide à l’édition du code HTML

 

Visual Studio

On n’y pense pas forcément, mais Visual Studio intègre un éditeur HTML très intéressant. En plus de la coloration syntaxique, on a aussi une aide à la saisie, une vérification de la syntaxe et du respect des standards (XHTML et CSS par exemple), un contrôle de la validité des URLs, un formatage automatique, etc. L’éditeur Visuel est aussi très complet et pratique, parfaitement lié avec l’éditeur HTML. D’autres outils, comme le gestionnaire de styles et le sélecteur de couleurs sont particulièrement efficaces. Cependant, on est toujours obligé de passer par l’éditeur WordPress, au minimum pour faire un copier-coller du code HTML, ce qui ne donne pas toujours le résultat voulu : par défaut Visual Studio utilise le retour à la ligne automatique au sein des paragraphes (balises <p>), ce qui insère des retours chariot parasites dans l’éditeur HTML WordPress (qui supprime ces balises). Il est possible toutefois de désactiver ce comportement en allant dans les Options, puis dans Text Editor, HTML et enfin Format. Désactivez ensuite les césures automatiques suivant la longueur de la ligne (Tag wrapping). Il faut aussi penser à récupérer tous les fichiers de style CSS (ou rajouter le lien dans l’en-tête) pour les charger avec le fichier HTML de façon a avoir un aperçu plus proche du résultat final sur le site. Ce n’est donc pas tout à faire la solution idéale, car on est toujours obligé de faire quelques retouches manuelles sous WordPress avant de publier.

Visual Web Developer

Editeur HTML de Visual Studio

Avantages :

  • Accessible même avec les versions Express de Visual Studio (donc gratuit)
  • Très nombreuses aides pour l’édition du code HTML
  • Editeur Visuel complet permettant de voir les modifications HTML en temps réel

Inconvénients :

  • Retours à la ligne automatique par défaut dans les balises <p>
  • Nécessité de récupérer ou lier manuellement les fichiers de style CSS
  • Ne prend pas en charge les balises spécifiques à WordPress
  • Obligation de faire un copier-coller du code HTML sous WordPress

 

Windows Live Writer 

Windows Live Writer IconeNormalement je ne suis pas spécialement fan de tous les nouveaux outils de gestion de documents en ligne (stockage de fichiers, photos, etc.). Il faut reconnaître cependant que cela apporte une solution très intéressante pour rassembler des informations au même endroit, sans se compliquer la vie avec des systèmes de gestion de sauvegardes. C’est d’ailleurs en grande partie ce qui m’a poussé à rassembler dans un blog toutes mes recherches en informatique, qui étaient jusque là éparpillées un peu partout entre mes mails, mes disques durs et mes clés USB.

Il n’y a pas si longtemps, et en réponse à l’offensive de Google dans ce domaine, Microsoft a multiplié les applications en ligne et à créé sa propre suite nommée Windows Live. Cette suite propose à la fois des clients légers utilisables uniquement sur Internet, mais aussi des clients lourds (au design épuré très réussi) dont certains remplacent des applications bien connues de Microsoft, notamment Outlook Express et MSN Messenger. J’ai découvert cette suite au hasard d’une mise à jour via Windows Update, qui les proposait en téléchargement. En testant Windows Live Writer, je m’attendais juste à un éditeur en ligne de documents, similaire à celui de Google, mais en fait il s’agit d’un véritable éditeur d’articles pour blogs.

Au premier lancement, il faut ainsi renseigner l’adresse de son site et son compte, puis il récupère tout seul toutes les informations nécessaires (plateforme utilisée, thème, droits associés au compte, etc.) :

Compte Live Writer

Il faut aussi ne pas oublier d’activer les protocoles XML-RPC dans Réglages→Ecriture :

Publication à distance

Options de publication à distance

L’éditeur est bien conçu et offre enfin une vraie alternative « client lourd » à celui par défaut de WordPress, avec un éditeur visuel complet (gestion des tableaux, du formatage du texte, etc.), ainsi que l’accès à la plupart des fonctions utiles : gestion des catégories, des mots-clés, des brouillons, de la date de publication, etc. Le mode aperçu est très rapide à l’utilisation et assez fidèle au rendu final.  L’éditeur HTML gère cette fois la balise <p>, mais curieusement il n’y a pas de coloration syntaxique. C’est un peu incompréhensible quand on sait qu’il leur aurait simplement suffit de reprendre celui de leur propre outil de développement. Dommage, mais ce n’est pas trop grave dans la mesure où la prise en charge de la balise <p> permet cette fois de faire un copier-coller propre depuis Visual Studio si besoin, sans devoir retoucher le code. Il manque aussi l’insertion des caractères spéciaux, et un accès direct à la galerie du blog dans le choix des images à insérer, comme l’outil flash de l’éditeur WordPress. D’ailleurs il faut savoir que les vignettes générées par cette application seront aussi visibles dans la galerie une fois envoyées, contrairement à l’outil flash de base. C’est à la fois un avantage, car on peut facilement gérer les fichiers vignettes générés sans devoir passer par le FTP, mais aussi un inconvénient car ça allonge inutilement la liste des fichiers de la galerie, sans possibilité de filtrage.

Windows Live Writer

Windows Live Writer

 

Mis à part ces quelques défauts, c’est l’alternative qui répond le plus à ce que je cherchais, et qui m’a d’ailleurs incité à jeter un œil aux autres applications de la suite Windows Live. D’autant plus que ce programme offre aussi la possibilité de récupérer les articles (brouillons ou publiés) du blog pour les retravailler localement, à condition cependant de bien sauvegarder avant de re-publier le résultat, notamment si vous avez retouché directement le code HTML auparavant :

Windows Live Writer

Windows Live Writer

A noter que Windows Live Writer est une application .NET 2.0. Vous pouvez vérifier cela facilement à l’aide d’outils comme Reflector ou ILDasm. Et voilà comment lier astucieusement cet article au thème du site !

Avantages :

  • Gratuit et très simple d’emploi
  • Compatibilité avec de nombreuses plateformes de blogs
  • Éditeur visuel complet (avec l’insertion de tableaux) avec un mode aperçu
  • Possibilité de publier (articles, pages ou brouillons) directement après édition
  • Récupération des articles en ligne sur le blog pour les modifier

Inconvénients :

  • Pas de coloration syntaxique HTML. Surprenant de la part de Microsoft.
  • Pas de prise en charge de certaines balises de WordPress ([caption] par exemple)
  • Quelques différences entre l’affichage final et le mode aperçu
  • L’édition d’un article existant peut réserver quelques surprises une fois re-publié
  • Pas de travail possible avec la galerie de médias du blog
  • Les vignettes des images insérées par l’application ne sont pas masquées dans la liste

 

Conclusion

Je vais donc rester pour l’instant principalement sous Windows Live Writer pour la saisie initiale des articles, mais en continuant de gérer les images directement sous WordPress. Malgré tout, j’effectue toujours un petit copier-coller sous Word avant publication pour profiter de la vérification de la grammaire et de l’orthographe, plus avancée que celle intégrée de base dans WordPress, Windows Live Writer ou Firefox, pour corriger ensuite manuellement les fautes directement dans l’éditeur. Pour les articles comportant beaucoup d’extraits de code, je préfère utiliser directement un éditeur HTML. Si ce sujet vous intéresse, vous pouvez consulter l’article suivant : Insérer des exemples de code dans un article WordPress.

Pour la modification d’articles déjà publiés, j’ai préféré désactiver l’éditeur Visuel de WordPress pour ne plus risquer de perdre ma mise en page à la moindre sauvegarde (option du profil utilisateur), et s’il le faut, je m’aide d’un éditeur HTML externe avant de copier-coller le résultat. Ce n’est pas génial, mais ça reste pour moi la meilleure solution tant que WordPress n’aura pas intégré des outils plus fiables et plus complets. Globalement, les différents éditeurs Visuels ne sont pas trop compatibles entre eux, notamment parce qu’ils disposent chacun de leurs propres règles de formatage du code HTML et des identifiants WordPress (articles et mots-clés notamment). Pensez à bien vérifiez bien que le résultat final corresponde à ce que vous souhaitez avant d’adopter une de ces solutions.

Categories: WordPress Tags: ,
  1. Pas encore de commentaire
  1. Pas encore de trackbacks