Ajouter un bouton à l’éditeur WYSIWYG de WordPress

Si vous créez vos thèmes vous-même, vous avez surement l’habitude d’ajouter des shortcodes ou des petits bouts de html qui permettent d’insérer des éléments visuels dans vos articles. Si le thème en question est pour votre propre usage, pas de problème, vous saurez quoi taper pour obtenir le résultat escompté. En revanche, si c’est pour un client, il est peut-être plus pratique qu’il n’ait plus qu’a cliquer sur un bouton pour obtenir l’élément souhaité. Pour cela, il faut créer un plugin pour ajouter un bouton à l’éditeur tinyMCE de WordPress. On y va ?

Nous allons voir comment rapidement créer un plugin pour WordPress permettant d’ajouter un bouton à l’éditeur WYSIWYG. Le bouton s’ajoutera donc quand vous êtes en mode visuel et non en mode code.

Il va falloir créer deux fichiers :

  • Un fichier php pour créer le plugin WordPress,
  • Un fichier javascript pour paramétrer tinyMCE

Le fichier PHP

Je vous mets directement le code avec les commentaires, c’est assez parlant.

<?php
// on affiche d'abord le code d'en-tête du plugin
// http://codex.wordpress.org/Writing_a_Plugin#File_Headers
/**
 * Plugin Name: TinyMCE 4 Custom Buttons
 * Description: Un plugin WordPress permettant d'ajouter un bouton à tinyMCE
 * Plugin URI:  http://buzut.fr
 * Version:     4.0.0
 * Author:      Buzut
 * Author URI:  http://buzut.fr
 */

add_action('admin_head', 'custom_add_tinymce');

function custom_add_tinymce() {
  // récupère la variable de contexte du type de post
  global $typenow;

  // on active le plugin pour les articles et les pages
  if(! in_array($typenow, array('post', 'page')))
    return ;
    
  // ce filtre permet d'ajouter du javascript arbitraire à l'éditeur de WP
  add_filter('mce_external_plugins', 'custom_add_tinymce_plugin');
    
  // On ajoute notre bouton à la première ligne de boutons
  add_filter('mce_buttons', 'custom_add_tinymce_button');
}

// inclut notre fichier javascript
function custom_add_tinymce_plugin($plugin_array) {
  // notez ici que notre fichier s'appelle <strong>plugin.js</strong>
  // et est dans le même dossier que notre fichier .php
  // si vous changez les noms, pensez à modifier cette ligne
  $plugin_array['custom_button'] = plugins_url('/plugin.js', __FILE__);
    
  return $plugin_array;
}

// Ajoute l'id du bouton pour faire la correspondance avec le JS
function custom_add_tinymce_button($buttons) {
  // nous passons ici un tableau contenant l'id du bouton
  // pour ajouter d'autres boutons, il suffit de passer les autres id
  array_push($buttons, 'add_custom_button');
    
  return $buttons;
}

Le fichier JS

Vous l’avez compris, votre fichier js doit s’appeler plugin.js, voici donc le code correspondant :

(function() {
  tinymce.PluginManager.add('custom_button', function(editor, url) {
    // ajoute un bouton à tinyMCE
    editor.addButton('add_custom_button', {

    // texte par défaut du bouton
    // on peut mettre une icône, 
    // mais il faudra que vous trouviez ça tout seul ;)
    text: 'Super Coder',
    icon: false,
    onclick: function() {
      // On ouvre une fenêtre modale
      // qui permet à l'utilisateur d'entrer ses données
      // de manière interactive
      editor.windowManager.open( {
        // titre du popup
        title: 'Entrez votre texte',
        body: [
        // on peut mettre autant de champs que l'on veut
        // textbox est un champ de type input
        // name est l'attribut, 
        // vous vous en servirez donc pour récupérer le contenu
        {
          type: 'textbox',
          name: 'title',
          label: 'Title'
        },

        // un deuxième champ
        {
          type: 'textbox',
          name: 'desc',
          label: 'Description'
        }],
        
        // l'action a effectuer lorsque l'utilisateur valide la modale
        onsubmit: function(e) {
          // On insère le contenu à l'endroit du curseur
          editor.insertContent('<span class="maSpanTitre">' 
          + e.data.title +'</span><span class="maSpanContenu">' 
          + e.data.desc +'</span>');
          }
        });
      }
    });
  });
})();

Il ne vous reste plus qu’à mettre vos deux fichiers dans un dossier au nom de votre choix. Vous pouvez nommer le .php comme bon vous semble, le .js… vous savez comment il faut l’appeler je crois ! Ensuite, vous uploadez tout ça dans wp-content/plugins, vous vous rendez dans votre interface d’admin, vous activez le plugin et le tour est joué !

Si vous voulez personnaliser un peu tout ça, il y a deux ressources bien utiles :

Et vous, vous utilisez ça pour quoi ? Il y a peut-être des usages qui méritent le détour ou qui nous faciliterons la vie. N’hésitez pas à partager vos astuces dans les commentaires !

Il y a déjà une réponse à cet article :

  • Nicolas

    dit :

    Bonjour,
    Merci pour ce tuto, et ce plugin commenter, … cela permet de mieux comprendre comment fonctionne php …
    Je souhaite crée un bouton qui rajoute un code html que j’ai préparé ; un tableau type pour présenté un produit, une fois le bouton cliquez, la tableau doit apparaitre (il contient déjà des images et certaines cellules sont colorées, d’autre fusionnées.
    Par après, je remplis le tableau avec les données qui manque, comme le nom du produit, la température…
    Mais cela je peux le faire directement dans le tableau une fois qu’il est inseré…
    Donc, en gros je souhaite modifié votre plugin, pour qu’il rajoute just un morceau de code html…
    Pouvez vous me dire qu’elle modification faire ?
    Merci d’avance

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *