Encore une petite astuce pour WordPress aujourd’hui, elle va vous permettre de placer des nouveaux boutons pour l’éditeur de texte.

Le petit désavantage de cette astuce est que les bouton ne seront utilisable qu’en mode d’édition html et qu’il ne pourront faire que des actions « simple ». Par exemple j’ai créé un balise pour rentrer du code, la balise n’est pas compliquée (mais un peu longue) et comme je m’en sers assez souvent j’ai trouvé utile de lui offrir un petit raccourci.

bouton de l'editeur de wordpress - t0m-s -

Pour créer un bouton comme ça c’est assez simple, il va juste falloir éditer un fichier.
Connectez vous à votre FTP et éditer le fichier

wp-includes/js/quicktags.js

Si vous regardez un peu le fichier, vous pourrez voir des fonctions avec les noms des boutons déjà existants.
Imaginons que vous vouliez placer votre nouveau bouton après celui nommé « code », pour cela vous allez devoir chercher la ligne

new edButton("ed_code"

Vous tomberez donc sur le code du bouton « code », qui ressemble à cela

edButtons[edButtons.length] =
new edButton("ed_code"
,"code"
,"<code>"
,"</code>"
,"c");

Bon c’est bien on a trouvé les lignes qu’il nous fallait, on va les éditer pour qu’elles fassent ce qu’on a envie, exemple avec les balises <pre> et </pre>, qui permet d’interpréter le texte qui est écrit entre tel quel (je sais qu’elle se trouve déjà dans l’éditeur visuel, mais je n’avais pas d’autres idées ;) ).

edButtons[edButtons.length] = //On ne touche pas à ça
new edButton("ed_pre" //Ça va être le nom de votre balise
,"pre" //Ici c'est ce qui s'affiche sur le bouton
,"
<pre>"
//Ici c'est la balise d'ouverture
,"</pre>
"
//Ici, vous l'aurez deviné, la balise de fermeture
,"/pre"); //Ici c'est le texte qui s'affiche sur le bouton tant que vous n'avez pas fermé la balise

Voilà, il ne reste plus qu’à éditer ça avec vos propres paramètres et vous aurez un joli petit bouton qui vous facilitera bien la vie.

N’hésitez pas à commenter si vous avez quelque chose à ajouter

Autres sujets qui pourraient vous intéresser: