L'éditeur de contenu de WordPress se nomme TinyMCE. Commun sur de nombreuses plateformes cet éditeur est lui aussi facilement personnalisable. Voici une astuce pour ajouter des boutons supplémentaires dans votre éditeur.
Attention, ce tutoriel n’a pas pour objectif de créer un bouton personnalisé mais bien d’ajouter des icônes supplémentaires disponibles avec TinyMCE en natif.
N.B : la plupart n’ont pas besoin d’être rajouté car les styles (couleur, police, etc.) doivent être gérés via la feuille de styles CSS de votre thème.
Sous Apparence puis Éditeur, rajoutez ces lignes dans le fichier functions.php :
function wpc_boutons_tinymce($buttons) {
$buttons[] = 'sub';
$buttons[] = 'sup';
$buttons[] = 'fontselect';
$buttons[] = 'fontsizeselect';
return $buttons;
}
add_filter("mce_buttons_2", "wpc_boutons_tinymce");Pour en ajouter d’autres, consultez la liste complète des boutons pris en charge dans TinyMCE.
Rajoutez ensuite une ligne du type :
$buttons[] = 'nom-bouton';
Personnellement, j’ai rajouté les icônes : exposant et indice.
Vous pouvez aussi choisir la ligne sur laquelle s’afficheront ces boutons supplémentaires. Dans l’exemple, il s’ajouteront sur la seconde ligne comme le détermine le mce_buttons_2. Changez le numéro par 1,2 ou 3 pour modifier l’emplacement.
Par défaut, WordPress n’affiche qu’une seule ligne d’icônes : cliquez sur le dernier bouton pour montrer la seconde.
Cette astuce vous permettra de vous passer de plugin comme TinyMCE Advanced en paramétrant finement votre back office WordPress.
Crédits photo : Kirsty Andrews
Benzaky
Article plein d’informations comme d’habitude
GeekPress
Benzaky, le spammeur des blogs WordPress Francophone =D
Aurélien Denis auteur de l’article
Ben de toute façon lien bloqué…
Chris JMC
Intéressant, mais j’ai quand même une question un peu plus personnelle
Admettons que je développe un plugin (privé) qui pourrait avoir des connections avec l’édition d’un post, y’a-t-il un site où l’on peut trouver des icônes libres de droit à utiliser (et compatibles) ?
Merci !
Aurélien Denis auteur de l’article
Aucune idée !
herisson08
Merci beaucoup!
azohar
Merci, c’est toujours bon à connaitre ces inclusions en natif. Cependant je souhaiterai savoir si j’ai bien fait la chose : J’ai collé le code en bas du fichier (functions.php), mais ce fichier est lié au thème… est-ce que ce code est à replacer en cas de mise à jour du thème, ou à chaque changement de thème ? Merci
Aurélien Denis auteur de l’article
Pour ne pas dépendre du thème, il faut créer un fichier de fonctions globales. C’est pas très compliqué.
noaneo
bonsoir,
où trouver les fichiers de traductions pour avoir le plugin en français?
sur readme.txt, il donne cet url http://tinymce.moxiecode.com/download_i18n.php mais rien, merci
Julien Campagne
Bonjour
Est-il possible de supprimer l’éditeur TinyMCE de la page d’admin ?
Je n’arrive pas à trouver quelque chose à ce sujet…
Aurélien Denis auteur de l’article
Aucun intérêt à faire cela…
noaneo
vous voulez le supprimer pour le remplacer par un autre?
l’éditeur par défaut dans WordPress est WYSIWYG
http://www.geekpress.fr/wordpress/astuce/desactiver-editeur-visuel-wordpress-660/
Julien Campagne
Bonjour
Je suis passé par le plugin Advanced Custom Fields, qui me permet de faire un admin 100% customisé et même de désactiver le champ TinyMCE correspondant à the_content() : comme ça mon code ne repose plus que sur ACF et est plus homogène.
Merci de m’avoir répondu.
Aurélien Denis auteur de l’article
ACF très bonne idée !
imen
je veux ajout les options indice exposant au titre d’un article dans la partie admin
svp aide moi
Aurélien Denis auteur de l’article
Il faut ajouter les balises HTML dans le titre même si je le déconseille. La balise
supousuben oubliant de la fermer.Akro Web
Merci pour ce super tuto.
Je souhaiterais aller un peu plus loin et enlever certains boutons pour le profil « editeur » par exemple. J’ai essayé mais j’avoue que je galère un peu.
Est ce que quelqu’un à une solution ?
Akro Web
J’ai trouvé comment enlever des boutons suivant l’utilisateur.
Ci-dessous le code si ça peut intéresser quelqu’un :
function custom_disable_mce_buttons( $opt ) {
global $current_user;
get_currentuserinfo();
if ( current_user_can(‘editor’) )
$opt[‘theme_advanced_disable’] = ‘numlist, justifyfull, strikethrough, wp_more, wp_fullscreen, wp_adv, styleselect, charmap, wp_help, outdent, indent, pasteword, pastetext’;
return $opt;
}
add_filter(‘tiny_mce_before_init’, ‘custom_disable_mce_buttons’);
Le code est à insérer dans le fichier functions.php de votre thème.
Sur la 4ème ligne vous pouvez changer l’utilisateur (administrator, editor, author…)
C’est sur la 5ème ligne que vous pouvez mettre le nom des boutons à enlever (dans mon exemple le 1er bouton est numlist).
Pour connaître le nom du bouton, identifier l’id du bouton à l’aide de Firebug.et prendre seulement le mot après le content_
Exemple pour le bouton gras : id= »content_bold »
vous devez insérer bold dans le code
liste des boutons :
http://www.tinymce.com/wiki.php/TinyMCE3x:Buttons/controls
Aurélien Denis auteur de l’article
Merci du partage !
studioHF
Intéressant !! Merci.
Et pour retirer des boutons comment faire ?
C’est intéressant pour livrer un site à des néophytes qui sont perdus plus il y a de boutons dont ils ne se servent pas
Aurélien Denis auteur de l’article
Tu as lu le commentaire du dessus ?
Alain RONK
Bonjour
Merci pour l’astuce ! Cà fait un plugin de moins !
De mon coté, je me sert de temps en temps de l’exposant mais, le bouton de s’affiche pas.
Je suis sous WP 3.9.1.
Quelqu’un a une idée ?
Par avance merci
Alain
Akro Web
Bonjour,
J’ai eu le même soucis que toi. Depuis la nouvelle version, il y a pas mal de boutons qui ont changé de nom. Pour l’exposant il s’agit de « superscript » (anciennement sup).
Pour info :
sub devient subscript
justifyleft devient alignleft
justifycenter devient aligncenter
justifyright devient alignright
justifyfull devient alignjustify
Laurent
Bonjour,
Est-il possible d’ajouter des boutons pour le formulaire de commentaires, sans utiliser de plugin (Comment Form Quicktags par exemple) ?
Merci
Aurélien Denis auteur de l’article
Je pense avoir lu ça quelque part mais je ne peut m’en souvenir…
patrick
Bonjour à tous,
voici une liste que j’ai récupéré tout ne fonctionne pas mais ça peut aider (WP 391)
bold
italic
underline
strikethrough
justifyleft
justifycenter
justifyright
justifyfull
bullist
numlist
outdent
indent
cut
copy
paste
undo
redo
link
unlink
image
cleanup
help
code
hr
removeformat
formatselect
fontselect
fontsizeselect
styleselect
sub
sup
forecolor
backcolor
forecolorpicker
backcolorpicker
charmap
visualaid
anchor
newdocument
blockquote
separator ( | is possible as separator, too)
Par contre Aurélien, ton lien chez Tiiny ne fonctionne pas.
ADIO
Aurélien Denis auteur de l’article
Super merci j’ai corrigé le lien !
Akro Web
Bonjour,
Si ça peut intéresser quelqu’un voici une autre façon d’ajouter mais aussi d’enlever des boutons à l’éditeur TinyMCE avec la nouvelle version de WordPress (3.9) :
Copier/coller le code ci-dessous dans le fichier functions.php de votre thème, et ajouter/enlever le nom des boutons que vous souhaitez :
function make_mce_awesome($in) {
$in[‘toolbar1′]=’bold,italic,underline, forecolor, alignleft, aligncenter, alignright, alignjustify, bullist,numlist,blockquote,|,link,unlink,|,pastetext, pasteword, removeformat, undo, redo, charmap, superscript, subscript’;
$in[‘toolbar2′]=’formatselect’;
$in[‘toolbar3’]= »;
$in[‘toolbar4’]= »;
return $in;
}
add_filter(‘tiny_mce_before_init’, ‘make_mce_awesome’);
La ligne [‘toolbar1’] correspond à la 1ère ligne de l’éditeur
La ligne [‘toolbar2’] correspond à la 2ème ligne de l’éditeur
…
Liste des boutons sur le site suivant: http://www.tinymce.com/wiki.php/Controls
Si vous souhaitez modifier les formats du bouton « formatselect » (paragraphe, titre1…), vous devez rajouter la ligne $in[‘block_formats’] = ‘Paragraph=p;Heading 3=h3;Heading 2=h2;Heading 3=h3’; au script
exemple :
function make_mce_awesome($in) {
$in[‘block_formats’] = ‘Paragraph=p;Heading 2=h2;Heading 3=h3’;
$in[‘toolbar1′]=’bold,italic,underline, forecolor, alignleft, aligncenter, alignright, alignjustify, bullist,numlist,blockquote,|,link,unlink,|,pastetext, pasteword, removeformat, undo, redo, charmap, superscript, subscript’;
$in[‘toolbar2′]=’formatselect’;
$in[‘toolbar3’]= »;
$in[‘toolbar4’]= »;
return $in;
}
add_filter(‘tiny_mce_before_init’, ‘make_mce_awesome’);
Aurélien Denis auteur de l’article
Super contribution !
lorembololorembolo
Salut,
Super technique, bien utile pour avoir un éditeur perso pour le client final. Ca parait simple, et pourtant je galère (comme souvent). Je me permets de vous exposer le souci :
– Je veux donner la possibilité d’accéder a des styles de mon thème au rédacteur (classe machin, titres specifiques, blocs ecadrés, ….) : je créée un fichier ‘styles-editeur.css’, je les charge avec ce code (dans functions.php) :
————————————————————–
function my_theme_add_editor_styles() {
add_editor_style( ‘style-editeur.css’ );
}
add_action( ‘init’, ‘my_theme_add_editor_styles’ );
————————————————————–
– Pour afficher la selection de style, j’ajoute à functions.php:
———————————————————————–
function wpc_boutons_tinymce($buttons) {
$buttons[] = ‘styleselect’;
return $buttons;
}
add_filter(« mce_buttons_3 », « wpc_boutons_tinymce »);
————————————————————————–
Le bouton de selection de style apparait bien, mais je ne voius aucune des classes qui sont dans le fichier css.
Quelqu’un aurait-il une diée?
Merci d’avance.
Kate
a chaque fois que je cherche un tuto wordpress je tombe sur ton site XD . En tout cas vraiment bravo , tes tuto m’aide beaucoup dans le développement de mon site
Aurélien Denis auteur de l’article
CGRD
Merci pour cet article ! mais je n’arrive pas à enlever un bouton « go » qui reste implanter en plein milieu de mon texte. Impossible de le saisir et de le retirer… j’ai voulu le déplacer et cela m’a fait un grand encadré gris et hop bloqué ! avez-vous une solution peut-être ?
Merci à vous Camille
Aurélien Denis auteur de l’article
Je n’ai pas connaissance d’un bouton GO dans l’éditeur par défaut de WordPress…
camgrd
Il s’agit en fait de « ajouter un bouton » et celui-ci est marqué d’un go sous le format Back Office
Denaize
Bonjour
Avec WP 4.3.1 est ce normal que cela ne fonctionne plus comme technique ?
J’ai ajouté le code dans function.php et ma toolbar TinyMCE ne change pas