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

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

37 commentaires

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

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

      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.

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

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

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

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

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

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

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

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

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

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

Laisser un commentaire