¿Cómo agregar un botón de shortcode al editor TinyMCE?

Para añadir nuestro botón al editor TinyMCE necesitamos hacer varias cosas:

1. Añadir nuestro botón a la barra de herramientas
2. Registrar un plugin de TinyMCE
3. Crear ese plugin de TinyMCE que le indique a TinyMCE qué hacer cuando se haga clic en nuestro botón.

Pasos #1 y #2

En estos pasos registramos nuestro plugin de TinyMCE que estará dentro de un archivo javascript en 'ruta/a/shortcode.js' (ver wpse72394_register_tinymce_plugin() abajo)

 // proceso de inicialización para registrar nuestro botón
 add_action('init', 'wpse72394_shortcode_button_init');
 function wpse72394_shortcode_button_init() {

      // Abortar temprano si el usuario nunca verá TinyMCE
      if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') && get_user_option('rich_editing') == 'true')
           return;

      // Añadir un callback para registrar nuestro plugin tinymce   
      add_filter("mce_external_plugins", "wpse72394_register_tinymce_plugin"); 

      // Añadir un callback para agregar nuestro botón a la barra de herramientas TinyMCE
      add_filter('mce_buttons', 'wpse72394_add_tinymce_button');
}


// Este callback registra nuestro plugin
function wpse72394_register_tinymce_plugin($plugin_array) {
    $plugin_array['wpse72394_button'] = 'ruta/a/shortcode.js';
    return $plugin_array;
}

// Este callback añade nuestro botón a la barra de herramientas
function wpse72394_add_tinymce_button($buttons) {
            // Añadir el ID del botón al array $buttons
    $buttons[] = "wpse72394_button";
    return $buttons;
}

Paso #3

Ahora necesitamos crear nuestro plugin de TinyMCE. Esto irá en un archivo 'ruta/a/shortcode.js' (como se especificó en los pasos anteriores).

jQuery(document).ready(function($) {

    tinymce.create('tinymce.plugins.wpse72394_plugin', {
        init : function(ed, url) {
                // Registrar comando para cuando se haga clic en el botón
                ed.addCommand('wpse72394_insert_shortcode', function() {
                    selected = tinyMCE.activeEditor.selection.getContent();

                    if( selected ){
                        // Si hay texto seleccionado cuando se hace clic en el botón
                        // Envolver el shortcode alrededor
                        content =  '[shortcode]'+selected+'[/shortcode]';
                    }else{
                        content =  '[shortcode]';
                    }

                    tinymce.execCommand('mceInsertContent', false, content);
                });

            // Registrar botones - disparar el comando anterior al hacer clic
            ed.addButton('wpse72394_button', {title : 'Insertar shortcode', cmd : 'wpse72394_insert_shortcode', image: url + '/ruta/a/imagen.png' });
        },   
    });

    // Registrar nuestro plugin TinyMCE
    // primer parámetro es el ID del botón
    // segundo parámetro debe coincidir con el primer parámetro de tinymce.create() arriba
    tinymce.PluginManager.add('wpse72394_button', tinymce.plugins.wpse72394_plugin);
});