Manual ShortCodes en WordPress (completísimo) III

Última parte del manual completo del manejo de los shortcodes (atajos) en wordpress, en esta parte vamos a introducir un uso amigable y sencillo de estos desde el editor de contenido tinymce.
Al fin y al cabo, lo que se pretende es que el autor de las entradas necesite saber lo mínimo posible sobre código, y si lo necesario es nada, mejor para todos.
Habrá que hacer los siguiente:

• Crear un archivo JavaScript para la creación del botón.
• Registrar el archivo y el botón.

 El archivo JS se usa para registrar el plugin con la API TinyMCE.
Creamos un archivo nuevo llamado my-short-code.js en el directorio /js/ de nuestra plantilla (si no existe, crearlo) y ponemos lo siguiente:

(function() {
   tinymce.create('tinymce.plugins.recentposts', {
      init : function(ed, url) {
         ed.addButton('recentposts', {
            title : 'Recent posts',
            image : url+'/recentpostsbutton.png',
            onclick : function() {
               var posts = prompt("Number of posts", "1");
               var text = prompt("List Heading", "This is the heading text");

               if (text != null && text != ''){
                  if (posts != null && posts != '')
                     ed.execCommand('mceInsertContent', false, '[recent-posts posts="'+posts+'"]'+text+'[/recent-posts]');
                  else
                     ed.execCommand('mceInsertContent', false, '[recent-posts]'+text+'[/recent-posts]');
               }
               else{
                  if (posts != null && posts != '')
                     ed.execCommand('mceInsertContent', false, '[recent-posts posts="'+posts+'"]');
                  else
                     ed.execCommand('mceInsertContent', false, '[recent-posts]');
               }
            }
         });
      },
      createControl : function(n, cm) {
         return null;
      },
      getInfo : function() {
         return {
            longname : "Últimos post",
            author : 'Antonio García',
            authorurl : 'http://mipasapersonal.blogspot.es',
            infourl : 'http://www.coodex.es',
            version : "1.0"
         };
      }
   });
   tinymce.PluginManager.add('recentposts', tinymce.plugins.recentposts);
})();


En el código básicamente lo que se hace es crear un nuevo plugin, se piden los dos parámetros, y según lo que introduzcamos se inserta un código en el editor, se crea un botón con una imagen y al final se añade nuestro plugin al gestor de plugins del TinyMCE.


Ya solo queda registrar el botón (lo añadimos a la lista de botones del editor):
function register_button( $buttons ) {
   array_push( $buttons, "|", "recentposts" );
   return $buttons;
}
y enlazar nuestro JS creado al ppio:
function add_plugin( $plugin_array ) {
   $plugin_array['recentposts'] = get_template_directory_uri() . '/js/mi-short-code.js';
   return $plugin_array;
}


Y aquí el enlace "fuente" de este manual (en inglés), obviamente, todo esto no me lo he inventado ni a salido de la nada :D
http://wp.smashingmagazine.com/2012/05/01/wordpress-shortcodes-complete-guide/
Al final de éste, hay unos cuantos ejemplos más de shortcodes, como para añadir un googlemaps, por ejemplo, y también unos plugins que van bien para crear shortcodes sin tener que tocar tanto código como ahora.