Ajouter des boutons dans l’éditeur visuel de WordPress (TinyMCE)

WordPress / Tutoriels WordPressAuteur Aurélien Denis

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.

Capture d'écran - Boutons TinyMCE sous WordPress
Les icônes indice / exposant dans TinyMCE insérés sur la seconde ligne

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

36 commentaires

  2. GeekPress

    Benzaky, le spammeur des blogs WordPress Francophone =D

    1. Aurélien Denis auteur de l’article

      Ben de toute façon lien bloqué…

  3. 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 !

  5. 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

  7. 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…

    1. Aurélien Denis auteur de l’article

      Aucun intérêt à faire cela…

      1. 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.

  8. imen

    je veux ajout les options indice exposant au titre d’un article dans la partie admin
    svp aide moi

    1. 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 sup ou sub en oubliant de la fermer.

  9. 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 ?

  10. 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

  11. 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

    1. Aurélien Denis auteur de l’article

      Tu as lu le commentaire du dessus ?

  12. 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

    1. 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

  13. Laurent

    Bonjour,

    Est-il possible d’ajouter des boutons pour le formulaire de commentaires, sans utiliser de plugin (Comment Form Quicktags par exemple) ?

    Merci

    1. Aurélien Denis auteur de l’article

      Je pense avoir lu ça quelque part mais je ne peut m’en souvenir…

  14. 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

    1. Aurélien Denis auteur de l’article

      Super merci j’ai corrigé le lien !

  15. 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’);

  16. 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.

  17. 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

  18. 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

    1. Aurélien Denis auteur de l’article

      Je n’ai pas connaissance d’un bouton GO dans l’éditeur par défaut de WordPress…

  19. camgrd

    Il s’agit en fait de « ajouter un bouton » et celui-ci est marqué d’un go sous le format Back Office

  20. 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

Les commentaires sont fermés.