Shortcode para WordPress

Plugin y shortcode para wordpress:
Este mini-tutorial nos ayudará a entender los shortcodes y la forma de crear un plugin e insertarlo en nuestro editor de WordPress para su reutilización…

Como todos sabréis un shortcode son pequeños textos que se añaden en el editor de WordPress y, que normalmente van entre corchetes([ ]). Se usan para añadir funciones al contenido de las entradas y páginas sin tener que escribir un script cada vez que necesites hacer esa tarea.

Así por ejemplo, si queremos insertar una galería de fotos en nuestra entrada o página, lo normal sería usar un shortcode para indicar a wordpress que queremos insertar una galería concreta creada anteriormente:

[sourcecode language=»plain»]
[galeria id="123" size="medium"]
[/sourcecode]

Vamos a hacer un plugin para que podamos en nuestros posts o páginas generar códigos QR desde una URLs. Vamos a simplificar el desarrollo enfocándonos en lo importante. Para esto vamos a utilizar la API de Google que genera códigos QR: API de google para generar códigos QR

Shortcode para WordPress

1. Creemos una carpeta en el directorio de plugins de WordPress llamado qr-code-generator.
2. Dentro de esta carpeta, metemos un fichero llamado drappsqrcode.php. Este fichero contendrá todo el código para hacer funcionar nuestro propósito
3. Intertamos la cabecera del plugin al principio de este fichero:

4. Ahora construimos la función principal, la que convertirá un shortcode en una imagen QR por medio de la API de google:

   
   function drappsqrcode($arg) {
           $current_uri = 'http://'.$_SERVER[HTTP_HOST] . $_SERVER[REQUEST_URI].'';
   	if ($arg == ""){
   		$arg = 100;
   	}
   
   	echo 'img src="https://chart.googleapis.com/chart?chs='.$arg.'x'.$arg.'&cht=qr&chl='.$current_uri.'&chld=L|1&choe=UTF-8" width="'.$arg.'"	height="'.$arg.'" title="'.$current_uri.'" alt="'.$current_uri.'" id="drappsqrcode" />';
   }
   

5. Ahora la función que se ejecutará al insertar un shortcode en nuestros posts o páginas. Como se ve, nuestro shortcode para wordpress aceptará cuatros parámetros 'size' (tamaño del qr), 'url' (url a la que irá el qr), 'class' (clase css por si queremos estilizarlo) y 'style' (propiedades css).

   
   function drappsqrcode_shortcode($atts) {
   
        extract(shortcode_atts(array(
   	      'size' => '100',
                 'url' => 'current',
   	      'class' => 'drappsqrcode',
   	      'style' => '',
        ), $atts));
        return 'img src="https://chart.googleapis.com/chart?chs='.$size.'x'.$size.'&cht=qr&chl='.$url.'&chld=L|1&choe=UTF-8" width="'.$size.'" id="drappsqrcode" height="'.$size.'" title="'.$url.'" alt="'.$url.'" '.$class.' '.$style.' />';
   }

   Además, le "decimos" a wordpress que queremos que tenga en cuenta nuestro shortcode de la siguiente manera:

   [sourcecode language="plain"]add_shortcode('drappsqrcode', 'drappsqrcode_shortcode');[/sourcecode]

   Ya podríamos probar el shortcode haciendo un post e incluyendo

   
   [drappsqrcode size="100" url="http://google.es" class="unaClase" style=""]
   

   El resultado:

   [drappsqrcode2 size="100" url="http://google.es" class="unaClase" style=""]

Botón en tinyMCE de un Shortcode de WordPress

Ahora creemos un botón en nuestro editor tinyMCE de wordpress...

1. Insertemos una acción que se ejecute cuando wordpress carga la página...
   [sourcecode language="plain"]
   add_action('init', 'qr_add_button');
   [/sourcecode]
   La función add_button comprobará que el usuario actual tiene la posibilidad de editar una página o entrada. A continuación agrega dos filtros que se enganchan en la API subyacente disponible en TinyMCE. El primero se dispara cuando el editor cargue los plugins, y el segundo registra el botón antes de que se cargue en el editor:

   
   function qr_add_button() {
      if ( current_user_can('edit_posts') &&  current_user_can('edit_pages') )
      {
        add_filter('mce_buttons', 'drappsqrcode_add_button');
        add_filter('mce_external_plugins', 'drappsqrcodeplugin_register');
      }
   }
   

2. El método drappsqrcode_add_button agrega nuestro shortcode a la matriz de botones disponibles en el editor. Al incluir un divisor '|' como argumento, podemos agregar espacio alrededor del botón en la barra de herramientas del editor:

   
   function drappsqrcode_add_button($buttons)
   {
       array_push($buttons, "|", "drappsqrcodeplugin","|");
       return $buttons;
   }
   

3. El método drappsqrcodeplugin_register le dice a TinyMCE qué hacer con el botón. En esta función, le estamos diciendo al editor que se asigne el botón a un archivo Javascript (buttonAction.js) que se ubicará en la carpeta tinymce del mismo directorio del plugin. La ruta se genera de forma automática gracias a la variable WP_PLUGIN_URL:
4. Ya tenemos todo el código de servidor creado, ahora falta el javascript. Este se encarga de la interacción directa con la acción del botón y el shortcode. La integración con TinyMCE realmente mejora el editor.
   Este script configura el botón: le da un título (title), le da un comportamiento al hacer click, y una imagen de botón (que habrá que color a la par que este javascript) llamada qrcode.png.

   
   function drappsqrcodeplugin() {
       return '[drappsqrcode size="100" url="" class="" style=""]';
   }
   
   (function() {
       tinymce.create('tinymce.plugins.drappsqrcodeplugin', {
   
           init : function(ed, url){
               ed.addButton('drappsqrcodeplugin', {
               title : 'Insert QR Code',
                   onclick : function() {
                       ed.execCommand(
                       'mceInsertContent',
                       false,
                       drappsqrcodeplugin()
                       );
                   },
                   image: url + "/qrcode.png"
               });
           }
       });
   
       tinymce.PluginManager.add('drappsqrcodeplugin', tinymce.plugins.drappsqrcodeplugin);
   
   })();
   

Con esto terminamos nuestro shortcode para wordpress, Aquí podréis descargar todo el código de este ejemplo.

¡¡¡Disfrutad!!!