Préserver l’affichage des boutons dans TinyMCE avec la nouvelle version de WordPress

Comme prévu, les jolis boutons colorés sous forme d’icône disparaissent pour des boutons monocolores avec la nouvelle version de WordPress, actuellement en bêta. C’est à cause de TinyMCE V4 qui utilise le SVG (si vous n’avez pas lu l’article ici, allez-y pour comprendre ^^)
Comme prévu, ils sont toujours fonctionnels, présents sur la barre d’outils et cliquables, mais invisibles, ce qui peut être assez déstabilisant !
N’ayant pas l’impression que les auteurs de mes plugins préférés (entre autres TinyMCE Advanced) soient particulièrement actifs sur le sujet, et ayant quelques plugins maison qui allaient avoir le même problème, j’ai trouvé “la” solution.
Convertir le fichier en format PNG vers SVG
C’est ce qui m’a pris le plus de temps à bien faire… le SVG est un format vectoriel, le PNG un format “pixels”, la conversion automatique est donc plus difficile que dans l’autre sens. La plupart des sites en ligne que j’ai testés produisent des fichiers monocolores, une silhouette en quelque sorte et c’est tout simplement LAID.
(D’ailleurs, mais c’est purement personnel, je trouve que cette barre d’outils monocolore est moins claire que la précédente).
Utiliser un logiciel adapté pour le SVG
Il existe principalement trois logiciels gratuits qui permettent de traiter le format SVG :
- the Gimp
- Inkscape
- le module Draw de OpenOffice / LibreOffice
Je n’aime pas the Gimp, et si vous n’avez pas déjà installé la suite Open Office / Libre Office, c’est peut être beaucoup pour quelques conversions d’icones… De plus OpenOffice travaille avec des pages, et il faut nettement plus d’opérations pour préparer un petit fichier SVG de 20px * 20px (la dimension de base des icônes TinyMce).
Je vous recommande donc de télécharger et d’installer Inkscape, disponible ici en version 32 bits pour Windows, et ici en version 64 bits pour Windows.
Convertir le fichier
C’est très simple, mais je vous ai quand même fait une série de screen-shots !

Ouvrir un nouveau fichier

Lors de la sélection du fichier, la preview s’affiche sur la droite
Ici j’ai choisi l’icone d’un bouton personnalisé, pour insérer des affiliations Amazon dans l’article (je vous en parlerai plus tard).

Attention, bien choisir d’incorporer le fichier (et pas de le lier)
C’est le point essentiel, qui va ensuite permettre de faire le fichier SVG

Le fichier s’affiche en plein écran : un peu grand

Le menu affichage permet de revenir à un zoom normal
Ce n’est pas vraiment utile comme étape, c’est du confort

On va maintenant enregistrer sous
On choisit “enregistrer sous” pour changer de format

Bien choisir SVG (proposé par défaut, c’est le format natif d’Inkscape)
Et voilà ! (Il y a plusieurs fichiers .svg dans mon répertoire parce que j’ai fait des tests avec plusieurs logiciels).
Voici le fichier “résultat” : une jolie petite icône Amazon, qui ressemble comme deux gouttes d’eau au fichier .png initial. (Essayez de deviner laquelle est le PNG et laquelle est le SVG sans regarder la source du fichier !)
Bien sûr, techniquement, ce n’est pas un “vrai” SVG : si on l’aggrandit énormément, on retrouvera les pixels initiaux, ce qui ne serait pas le cas avec un fichier créé de façon vectorielle. La manipulation permet simplement de créer un “tracé” vectoriel pour nos pixels.
Mais pour l’utilisation actuelle (la barre d’outil de TinyMce), c’est largement suffisant.
Modifier le plugin pour qu’il appelle les fichiers .svg
Cela peut être fait directement dans NotePad++

Dans Notepad++ on peut rechercher une chaine dans un dossier
Il suffit de retrouver dans le fichier du plugin où se trouve l’appel du fichier .png (avec la fonction rechercher dans un dossier on y arrive très bien), et de remplacer .png par .svg
TinyMCE advanced et Ultimate TinyMCE
La mauvaise nouvelle, c’est que cette manipulation semble ne pas fonctionner sur les boutons standards de TinyMCE, en tout cas tels qu’ils sont gérés par ces plugins. TinyMCE Advanced refuse carrément d’afficher les icônes, même en SVG
Pire encore, Ultimate TinyMCE plante carrément, en appelant une fonction qui n’existe plus pour la traduction.
Il y a de fortes chances que ces plugins soient mis à jour au moment du passage à la 3.9, mais si vous les utilisez, vérifiez bien la compatibilité de ces derniers avant de faire la mise à jour WordPress !
J’ai bien WordPress 3.9 et sous TinyMCE Advanced les boutons de la barre d’outils sont toujours en gris. Aucune évolution.
Je vais tester avec votre methode voir si avec cette version de WP cela marche. Car j’avoue que je me perd un peu dans la barre (je confond certains boutons comme les puces numérotés ou nom. etc .) .
Amicalement, Yann.
Ma méthode marche pour les plugins qui n’ont pas été mis à jour. De plus, pour TinyMCE Advanced, son appel des boutons est plus complexe, et il utilise les “boutons” standards de TinyMCE, donc je doute que ça fonctionne
Re,
Ah j’ai la fâcheuse manie de mettre à jour tous mes plugin’s (à tord du coup ?).
Si ça ne fonctionne pas je me contenterais de ces boutons tout palot, je croise les doigts.
Non pas à tord, de toute façon vous n’aviez pas le choix dans ce cas là.