J’ai écrit plusieurs articles concernant les shortcodes.
Dans le premier nous avons vu comment en créer un, et dans le second, comment simplifier son utilisation.

Mais aujourd’hui nous allons voir comment faire pour que l’utilisateur n’ai plus besoin de les taper directement.

Il est vrai que dans le deuxième article, nous avons tenté de simplifier leur utilisation en créant plusieurs shortcodes afin de réduire leur taille à l’écriture.

Mais finalement, les shortcodes peuvent être pratiques, mais il ne sont pas spécialement intuitifs pour l’utilisateur.

Tom Mc Farlin l’explique très bien dans son article « A Case Against WordPress Shortcodes » (que vous pouvez retrouver ici: http://tommcfarlin.com/wordpress-shortcodes/).

Tom Mc Farlin avance que, malgré les nombreux avantages qu’apportent les shortcodes, ils restent simplement des éléments de balisage un peu plus évolués.

Pour illustrer ses propos, il utilise un exemple assez claire en disant que:

<input type="text" name="gallery" value="123" />

n’est pas si différent de

[photo-gallery id='123'][/photo-gallery]

En effet, si l’utilisateur ne parvient pas à comprendre la première balise, il ne comprendra pas forcément plus la seconde…
Il faut aider l’utilisateur à comprendre ce qu’il fait.

Quelques pistes sont avancées dans cet article; ajouter un bouton dans le wysiwyg est le minimum. Cela permet à l’utilisateur de ne pas avoir à taper le shortcode.
C’est ce que nous allons faire ici.
Dans un second temps, nous verrons comment remplacer le shortcode affiché dans le wysiwyg par une image; ceci dans le but de se rapprocher le plus possible du sens d’un wysiwyg (What you see is what you get).

Nous allons reprendre notre exemple des précédent articles (l’ajout d’une vidéo).
Pour aller plus vite, nous implémenterons seulement les vidéos youtube.

Ce que nous allons faire :
– créer un shortcode
– ajouter un bouton pour l’utiliser
– ajouter une modal prompt pour rentrer les paramètres
– afficher une image dans le wysiwyg

Le shortcode

function video_embed( $atts, $content = null) {
    extract( shortcode_atts(  array(
        'id' => '',
    ), $atts ) );
    if ( $id != '' ){
        return '<iframe src="//www.youtube.com/embed/'. $id .'" width="480" height="270"></iframe>';
    }
    return;
}
add_shortcode( 'video', 'video_embed' );

L’ajout du bouton

Dans un premier temps, nous avons quelques fonctions à ajouter dans le fichier functions.php de votre thème.

//on ajoute notre bouton aux boutons déjà existant
function register_button( $buttons ) {
   array_push( $buttons, "|", "video" );
   return $buttons;
}
//on ajoute notre plugin js
function add_plugin( $plugin_array ) {
   $plugin_array['video'] = get_template_directory_uri() . '/js/sc_video.js';
   return $plugin_array;
}
//puis on ajoute le tout dans le wysiwyg
function video_button() {
   if ( get_user_option('rich_editing') == 'true' ) {
      add_filter( 'mce_external_plugins', 'add_plugin' );
      add_filter( 'mce_buttons', 'register_button' );
   }
}
add_action('init', 'video_button');

Il faut, dans un second temps, créer un fichier js, que nous appèlerons « sc_video.js » par exemple.
Nous placerons ensuite ce js dans le dossier /js de notre thème.
Voici son contenu :

(function() {
    tinymce.create('tinymce.plugins.video', {
      init : function(ed, url) {
          var t = this;
          
          //on ajoute le bouton ainsi que son picto
          ed.addButton('video', {
            title : 'Ajouter un vidéo youtube',
            image : url + '/mon_picto.png',
            onclick : function() {
               var ytId = prompt('Id de la vidéo youtube', '');
                  if (ytId != null && ytId != '')
                     ed.execCommand('mceInsertContent', false, '

');
            }
          });
          
      },

      getInfo : function() {
         return {
            longname : 'Ajouter une vidéo youtube',
            author : 'Adfab',
            authorurl : '',
            infourl : '',
            version : '0.1'
         };
      }
   });
   tinymce.PluginManager.add('video', tinymce.plugins.video);
})();

A ce stade, au click sur le picto, on affiche une modal pour ajouter l’id de la vidéo, puis nous ajoutons le shortcode dans le wysiwyg.

Remplacement par une image

Nous allons modifier le script pour pouvoir remplacer le shortcode par une image.
Ce qui nous donne :

(function() {
    tinymce.create('tinymce.plugins.video', {
      init : function(ed, url) {
          var t = this;
          
          //on ajoute le bouton ainsi que son picto
          ed.addButton('video', {
            title : 'Ajouter une vidéo youtube',
            image : url + '/mon_picto.png',
            onclick : function() {
               var ytId = prompt('Id de la vidéo youtube', '');
                  if (ytId != null && ytId != '')
                     ed.execCommand('mceInsertContent', false, '

');
            }
          });
          
          //on remplace le shortcode par le placeholder à l'ouverture de la page
          ed.onBeforeSetContent.add(function(ed, o) {
              o.content = t._do_video(o.content);
          });
          
          //on remplace le shortcode par le placeholder à l'ajout
          ed.onExecCommand.add(function(ed, cmd) {
              if (cmd ==='mceInsertContent'){
                tinyMCE.activeEditor.setContent( t._do_video(tinyMCE.activeEditor.getContent()) );
              }
          });
          
          //on remplace l'image par le shortcode à la sauvegarde
          ed.onPostProcess.add(function(ed, o) {
              if (o.get)
                o.content = t._get_video(o.content);
          });
      },
      
      //on ajoute l'image de remplacement
      _do_video : function(co) {
          return co.replace(/\

]*)\]/g, function(a,b){
              /*
               * remplacement par une image
               * on se sert de la classe video et du title pour recréer le shortcode à la sauvegarde
               * @see _get_video()
               */
              return '<img src="/chemin/vers/mon_placeholder.png" class="video mceItem" title="video'+tinymce.DOM.encode(b)+'" />';
              
          });
      },
      
      
      _get_video : function(co) {
          function getAttr(s, n) {
                n = new RegExp(n + '=\"([^\"]+)\"', 'g').exec(s);
                return n ? tinymce.DOM.decode(n[1]) : '';
          };
          
          return co.replace(/(?:<p[^>]*>)*(<img[^>]+>)(?:<\/p>)*/g, function(a,im) {
              var cls = getAttr(im, 'class');
              //on recrée le shortcode grâce au title
              if ( cls.indexOf('video') != -1 )
                return '<p>['+tinymce.trim(getAttr(im, 'title'))+']</p>';
    
                return a;
            });
      },
      

      getInfo : function() {
         return {
            longname : 'Ajouter une vidéo youtube',
            author : 'Adfab',
            authorurl : '',
            infourl : '',
            version : '0.1'
         };
      }
   });
   tinymce.PluginManager.add('video', tinymce.plugins.video);
})();

Le résultat :

Conclusion

Nous avons vu comment mettre en place un shortcode à disposition de l’utilisateur sans qu’il n’y ai besoin de le taper.
Mais avant tout, nous lui avons proposer un « rendu » de ce qui sera restitué en front.

Un utilisateur qui comprend ce qu’il fait, c’est un utilisateur satisfait 😉