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 :

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 !

– Commentaires

Rejoignez la discussion !

Vous pouvez utiliser Markdown pour les liens [ancre de lien](url), la mise en *italique* et en **gras**. Enfin pour le code, vous pouvez utiliser la syntaxe `inline` et la syntaxe bloc

```
ceci est un bloc
de code
```