Shortcodes para WordPress

Comparte este artículo

Los shortocodes para WordPress se introdujeron en la versión 2.5 y desde entonces han demostrado ser una de las características más útiles de la plataforma. El usuario medio que actúa como editor tiene la capacidad de publicar contenido dinámico utilizando macros, sin la necesidad de conocimientos de programación.

Cuando se inserta un shortcode en una publicación o página de WordPress, se reemplaza con otro contenido. En otras palabras, le pedimos a WordPress que busque la macro que está entre corchetes ([]) y la reemplace con el contenido dinámico apropiado, que es producido por una función de PHP.

Qué son los shortcodes para WordPress

En pocas palabras, un shortcode es un atajo. Son bloques de código específicos de WordPress que te permiten ahorrar tiempo y hacer cosas que de otro modo requerirían conocimientos técnicos más complejos y específicos y posiblemente grandes cantidades de código. Al añadir códigos cortos a tus temas o complementos, harás que el uso sea mucho más fácil e intuitivo.

[bctt tweet=»⭐⭐⭐⭐⭐ #ShortCodes, buenos, bonitos y rápidos para dar color a tu web!!» username=»hostingyvps ‏»]

Por ejemplo, podrías disponer de un shortcode que fuera [most_popular_post] y que, cuando se escribe exactamente así, mostraría la publicación más popular de tu blog en el lugar exacto en el que lo hayas escrito.

Si quisieras hacer esto manualmente, tendrías que escribir algo de código HTML, así como cambiarlo, también manualmente, cuando la popularidad de las publicaciones cambiara. Un shortcode elimina la necesidad de tanto trabajo y te simplifica mucho las cosas.

En resumen, un shortcode es un código específico de WordPress que te da la posibilidad hacer cosas ingeniosas con poco esfuerzo. Los shortcodes para WordPress pueden insertar un archivo o crear objetos que normalmente requerirían un montón de código complicado y lioso, en una sola línea.

Mejores plugin para Shortcodes

WordPress nos da la facilidad de incluir un Shorcode de forma rápida y sencilla, a través de plugins, sin necesidad de programar ni conocer la sintaxis. Solo buscamos el Shortcode que queremos usar para hacer X función, y listo.

Nuestra selección de estos plugins son:

Shortcodes ultimate

Este es mi complemento favorito en cuanto a plugins de Shortcodes para WordPress. Con este plugin pondremos crear de forma muy sencilla muchos tipos diferentes de Shortcodes desde el propio editor de WordPress.

Además viene con dos versiones una gratuita y otra de pago. Con la versión gratuita es bastante completa pero siempre tendrás la opción de tener la de pago.

Shortcodes Pro

Shortcodes PRO es otro fantástico plugin que permite la creación rápida y sencilla de pequeños codes en nuestro WordPress.

Podemos usarlo desde el propio editor de WordPress, por lo que es un perfecto sustituto de Shortcode Ultimate

All in one Shortcodes

Este es nuestro tercer plugin ganador, de nuestros plugins de Shortcode para WordPress. Este viene de la mano de All In One, con este plugin podremos añadir diversos Shorts con infinidad de colores y tamaños.

Además claro está, todo compatible con WordPress.

Creación de shortcodes

La manera de crear shortcodes es utilizar la API dedicada de WordPress. Funcionan en gran medida del mismo modo que los filtros de WordPress. Debes definir una función de controlador que analiza el shortcode y devuelve algunos resultados. Después se registra el shortcode utilizando la función add_shortcut (). Una función de manejador de accesos directos acepta hasta tres argumentos:

  1. $atts: matriz de atributos de shortcode
  2. $content: cualquier contenido albergado por el shortcode
  3. $code: el nombre del shortcode (Por lo general se usa cuando el mismo controlador controla varios shortcodes)

Como esto puede resultar un poco confuso si no eres una persona familiarizada con este tipo de lenguaje, incluimos algunos ejemplos para identificar los tres tipos de argumentos mencionados. En los ejemplos los wputs son hipotéticos.

[wptuts]

$atts = array()

$content = null

1

[wptuts]Lorem ipsum dolor sit amet[/wptuts]

$atts = array()

$content = Lorem ipsum dolor sit amet

1

[wptuts id=’555′ name=’some name’]

$atts = array(‘id’ => ‘555’, ‘name’ => ‘some name’)

$content = null

1

[wptuts id=’555′]Lorem ipsum dolor sit amet[/wptuts]

$atts = array(‘id’ => ‘555’)

$content = Lorem ipsum dolor sit amet

Esto debería darte una ligera idea de cómo los argumentos se trasladan al controlador de shortcodes.

Recuerda que los shortcodes para WordPress son cerrados. Así que [wptuts] es lo mismo que [/wptuts]. Solo necesitas añadir estas etiquetas cuando hay contenido entre ambas.

La API de shortcodes

La API de shortcodes para WordPress es un conjunto simple de funciones que te ayuda a crear atajos de WordPress para su uso en publicaciones y páginas. Por ejemplo, el siguiente shortcode colocado en el cuerpo de una publicación o página, agregaría una galería de fotos con imágenes adjuntas a esa publicación o página:

La API, además, permite a los desarrolladores de plugins crear tipos especiales de contenido que los usuarios pueden adjuntar a ciertas páginas al añadir el shortcode correspondiente en el texto de la página.

Sintaxis formal de los shortcodes para WordPress

Los shortcodes para WordPress no emplean caracteres especiales de la mima manera que el lenguaje HTML. Puede que los corchetes te parezcan algo parecido, pero en realidad no forman parte de ningún idioma.

Por ejemplo

[ gallery ] 

La API de shortcodes reconoce el shortcode galery como símbolo especial porque es, de hecho, un shortcode registrado. Por otra parte, cuando los corchetes albergan un shortcode no registrado, la API directamente los ignora.

Por ejemplo [randomthing]

El símbolo randomthing con sus corchetes incluidos serán ignorados por la API porque no forman parte de ningún shortcode registrado.

En un mundo perfecto, la API podría manejar cualquier símbolo [*]. Pero la realidad nos obliga a tener en cuenta considerar los siguientes desafíos:

  • Se aceptan corchetes en HTML y no siempre son códigos cortos
  • Se permiten llaves angulares dentro de códigos cortos solo en situaciones limitadas
  • Además, todo el código debe ejecutarse a través de múltiples capas de filtros y analizadores personalizables antes de la salida.

La sintaxis de shortcode suele tener este aspecto:

[nombre atributos cierre]

[nombre atributos]Cualquier HTML o shortcode puede ir aquí.[/nombre]

Nombres

Los nombres de los shortcodes para WordPress no deben contener, jamás, los siguientes caracteres

  • Corchetes: [ ]
  • Corchetes angulares: < >
  • Ampersand: &
  • Barra: /
  • Espacio en blanco: marcado por la barra espaciadora o por la tecla tab. No se admite ninguno
  • Caracteres no imprimibles: \x00 – \x20
  • Comillas simples o dobles: ‘ «

Atributos

Los atributos son opcionales. Hace falta introducir un espcio entre el nombre del shortcode y el atributo. Cuando se usa más de un atributo, los mismos también deben estar separados por al menos un espacio.

Cada atributo debería corresponderse con uno de estos formatos:

  • attribute_name = ‘valor’
  • attribute_name = «valor»
  • attribute_name = valor
  • «valor»
  • valor

 

Los nombres de los atributos son opcionales y, para garantizar su compatibilidad con todas las plataformas, solo deberían contener los siguientes caracteres:

  • Letras de la A la Z en mayúscula o minúscula.
  • Dígitos del 0 al 9
  • Guión bajo: _
  • Guión: – (no permitido antes de la versión 4.3.0)

 

Los nombres de los atributos no permiten la presencia de espacios. Aunque se pueden usar espacios, de manera opcional, entre el nomre y el signo igual (=). También entre el signo igual y el valor.

Los valores de los atributos nunca deben contener los siguientes caracteres:

  • Corchetes: [ ]
  • Comillas: » ‘

Los valores tampoco deben contener espacios.

Funcionamiento de los shortcodes para WordPress

Todos los temas de WordPress tienen un archivo functions.php- Esto es lo que debes editar para crear un shortcode de manera manual. Y debes hacerlo siguiendo dos pasos básicos:

  1. Crear una función PHP primaria
  2. Crear el conector add_shortcode para unir la función PHP primaria a WordPress

Por ejemplo:

function test_shortcode() {

return ‘<b>Esto es un test de shortcode</b>’

}

add_shortcode( ‘test’, ‘test_shortcode’ );

function test_shortcode() {

return ‘<b>Esto es un test de shortcode</b>’

}

add_shortcode( ‘test’, ‘test_shortcode’ );

mediante este código creamos un código muy simple. Al insertarlo en tu editor con el nombre entre corchetes : [test], hará que el texto “Esto es un test de shortcode” aparezca en tu post de manera automática.

Por supuesto, esto es un ejemplo muy simple que puede complicarse hasta el infinito. Y personalizarse. La cuestión es que cuando creas shortcodes para WordPress, tu blog te devuelve el resultado que quieras, tan complejo como lo quieras. Pero tú solo tienes que escribir una palabra.

Si no te fías de tu destreza y prefieres no tocar el archivo functions.php puedes usar el plugin Code Snippets. Se trata de un widget que hace más fácil la edición del archivo. Y no se usa solo para shortcodes, sino para cualquier función que se te ocurra añadir al blog. Además, si usas el Code Snippets, no perderás las actualizaciones aunque cambies de tema.

Pongamos otro ejemplo:

Digamos que queremos mostrar las publicaciones más recientes en una publicación determinada. Podríamos usar algo como esto:

[recent-posts]

Para un shortocode más avanzado, podríamos establecer la cantidad de publicaciones que se mostrarán al establecer un parámetro dado, por ejemplo:



[recent-posts posts=»5″]

Y, si vamos un paso más allá. También podemos establecer un encabezado para lista de posts más recientes:

[recent-posts posts=»5″]Posts Heading[/recent-posts]

Shortcodes para WordPress simples

Como hemos visto un poco más arriba, crear un shortcode para que tu blog muestre los posts más recientes en una entrada es muy sencillo y no requiere ningún conocimiento de PHP. Los pasos básicos son:

  1. Crear la función a la que WordPress acudirá cuando encuentre un shortcode detrminado.
  2. Registre el shorcode dándole un nombre único.
  3. Unir la función de registro a una acción de WordPress.

Todos los códigos que aparecen en este tutorial se pueden colocar en functions.php o en un archivo PHP separado que se incluirá en functions.php.

1.- Crear la función callback

Cuando WordPress encuentra un shortcode, lo reemplaza por un fragmento de código, que es la función de devolución de llamada o callback. Para que nuestro shortcode de muestra de posts recientes funcione, hay que crear una función que recupera las publicaciones recientes de la base de datos.

function recent_posts_function() {

query_posts(array(‘orderby’ => ‘date’, ‘order’ => ‘DESC’ , ‘showposts’ => 1));

if (have_posts()) :

while (have_posts()) : the_post();

$return_string = ‘<a href=»‘.get_permalink().'»>’.get_the_title().'</a>’;

endwhile;

endif;

wp_reset_query();

return $return_string;

}

Como se muestra en el ejemplo anterior, estamos consultando la base de datos para obtener la última publicación y devolver una cadena con un enlace a ella. Vale la pena señalar que la función de callback no imprime nada, sino que devuelve una cadena.

2.- Registrar el shortcode

Ahora, hay que decirle a WordPress que la función anterior es en realidad un shortcode:

function register_shortcodes(){

add_shortcode(‘recent-posts’, ‘recent_posts_function’);

}Copy

Si WordPress encuentra en un post el shortcode [recent-posts], entonces la función recent posts () se pone en funcionamiento automáticamente. Para evitar conflictos es necesario asegurarse de que el nombre del shortcode es único.

3.- Unir la función a una acción de WordPress

Para que nuestra función asignada a un shortcode se ejecute al usar ese shortcode, debemos unirla a una acción de inicialización de WordPress.

add_action( ‘init’, ‘register_shortcodes’);Copy

4.- Probar el shiortcode

Nuestro shortcode simple debería estar listo, así que el siguiente paso es probar que funciona correctamente. Para hacerlo puedes crear una nueva prublicación en tu blog o usar una ya existente. Lo único que tienes que hacer es colocar la siguiente línea en algún lugar del post:

[recent-posts]Copy

Publica el post y accede a él a través del buscador. Deberías ver, dentro del post, un enlace a los posts más recientes.

Shortcodes para WordPress avanzados

Los parámetros de los shortcodes

Los shortcodes para WordPress son flexibles porque nos permiten agregar parámetros personalizados para hacerlos más funcionales. Digamos que queremos mostrar un cierto número de publicaciones recientes. Para hacer esto, necesitamos añadir una opción adicional a nuestro código corto que especifique cuántas publicaciones recientes se mostrarán.

Tenemos que usar dos funciones. La primera es la función shortcode_atts () incorporada de WordPress, que combina los atributos de shortcode del usuario con atributos nativos y completa los valores predeterminados donde sea necesario. La segunda función es la función de extracción () PHP, que hace lo que su nombre sugiere: extrae los atributos de código corto.

Ampliando nuestra función de callback, agregamos un argumento, que es una matriz de atributos de la que extraemos el parámetro para el número de publicaciones. Luego consultamos la base de datos para obtener el número deseado de publicaciones y creamos una lista HTML para mostrarlas. Algo así:

function recent_posts_function($atts){

extract(shortcode_atts(array(

‘posts’ => 1,

), $atts));

$return_string = ‘<ul>’;

query_posts(array(‘orderby’ => ‘date’, ‘order’ => ‘DESC’ , ‘showposts’ => $posts));

if (have_posts()) :

while (have_posts()) : the_post();

$return_string .= ‘<li><a href=»‘.get_permalink().'»>’.get_the_title().'</a></li>’;

endwhile;

endif;

$return_string .= ‘</ul>’;

wp_reset_query();

return $return_string;

}Si omitimos escoger una opción, 1 es el valor predeterminado. De la misma manera, podemos agregar más atributos, permitiendo que los códigos cortos acepten múltiples parámetros. Gracias a esta función mejorada, podemos establecer cuántas publicaciones mostrar:

[recent-posts posts=»5″]

Contenido de los shortcodes para WordPress

Podemos llevar nuestro shortcode un paso más allá y agregar la capacidad de pasar algún contenido como argumento, que en este caso será un encabezado de la lista de publicaciones recientes. Para hacer esto, usamos un segundo parámetro, $ contenido en la función de callback y lo agregamos como un encabezado h3 antes de la lista. La nueva función es la siguiente:

function recent_posts_function($atts, $content = null) {

extract(shortcode_atts(array(

‘posts’ => 1,

), $atts));

$return_string = ‘<h3>’.$content.'</h3>’;

$return_string .= ‘<ul>’;

query_posts(array(‘orderby’ => ‘date’, ‘order’ => ‘DESC’ , ‘showposts’ => $posts));

if (have_posts()) :

while (have_posts()) : the_post();

$return_string .= ‘<li><a href=»‘.get_permalink().'»>’.get_the_title().'</a></li>’;

endwhile;

endif;

$return_string .= ‘</ul>’;

wp_reset_query();

return $return_string;

} 



Este tipo de código abreviado es similar a una etiqueta HTML. Adjuntamos el contenido en un shortcode de apertura y cierre:

[recent-posts posts=»5″]This is the list heading[/recent-posts]Copy

The result is the same that in the last example, except for the new heading for the list of posts:

Usar shortcodes para WordPress en Widgets

Los shortcodes se ignoran en los widgets de la barra lateral de WordPress por defecto.

Aunque la plataforma nos da la posibilidad de habilitar esta funcionalidad con una sola línea de código. Para poder agregar códigos cortos en los widgets, hay que añadir lo siguiente:

add_filter(‘widget_text’, ‘do_shortcode’);Copy

Ahora, sin tener que cambiar nada más, el shortcode se mostrará correctamente en los widgets:

Del mismo modo, podemos habilitar códigos cortos en los comentarios:

add_filter( ‘comment_text’, ‘do_shortcode’ );Copy

Cómo añadir shortcodes para WordPress sin conocer la sintaxis necesaria

Es cierto que los shortcodes para WordPress son una forma útil de añadir contenido dinámico a las publicaciones. Pero crearlos desde cero puede ser un poco confuso para el usuario medio. Sobre todo el caso de los shortcodes más avanzados que incluyen varios parámetros. La mayoría de los usuarios no están familiarizados con la sintaxis, que se parece mucho al lenguaje HTML. Pero, lamentablemente, para trabajar con shortcodes es necesario emplear la sintaxis exacta y los atributos adecuados. De hecho, el más mínimo error de sintaxis hará que el código no funcione en absoluto o que funcione mal.

Para resolver esto, podemos agregar un botón a la interfaz del editor de TinyMCE, permitiendo al usuario crear un shortcode con un simple clic. Hay dos pasos básicos para crear este botón:

  • Crear el archivo JavaScript para el botón.
  • Registrar el botón y el archivo JavaScript

Crear un archivo de JavaScript para el botón

El archivo JavaScript se utiliza para registrar el plugin TinyMCE a través de la API TinyMCE. Creamos un nuevo archivo llamado recent-posts.js en el directorio js de nuestro tema, y luego escribimos el siguiente fragmento de código:

(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 : «Recent Posts»,

author : ‘Konstantinos Kouratoras’,

authorurl : ‘http://www.kouratoras.gr’,

infourl : ’,

version : «1.0»

};

}

});

tinymce.PluginManager.add(‘recentposts’, tinymce.plugins.recentposts);

})();

De esta manera, creamos un nuevo complemento al que asignamos el nombre del plugin y sus atributos mediante el método tinymce.create (). La parte más importante de este código es la función init (), donde definimos un nombre, un archivo para el icono y un controlador para el botón que usa la función onclick ().

En las dos primeras líneas de la función onclick (), se le solicita al usuario que ingrese los parámetros para el número de publicaciones y el encabezado de la lista del código corto. Luego, dependiendo de los valores de estos parámetros, se inserta en el editor el formulario de shortcode apropiado.

Finalmente, nuestro complemento TinyMCE se agrega al PluginManager mediante la función add (). Así, hemos integrado con éxito el shortcode [posts recientes] en un tema de WordPress.

Registrar el botón y el plugin TinyMCE

Después de crear el archivo JavaScript, necesitamos registrarlo junto con el botón de shortcode. Por lo tanto, creamos dos funciones y las vinculamos a los filtros de WordPress correspondientes.

La primera función se llama register_button () y coloca el shortcode en la barra de botones, agregando un divisor entre el nuevo botón y los existentes:

function register_button( $buttons ) {

array_push( $buttons, «|», «recentposts» );

return $buttons;

}

The second function, add_plugin(), is related to the path and name of the JavaScript file:

function add_plugin( $plugin_array ) {

$plugin_array[‘recentposts’] = get_template_directory_uri() . ‘/js/recent-posts.js’;

return $plugin_array;

}

El siguiente paso es agregar un filtro con las funciones anteriores. La función register_button () está vinculada al filtro mce_buttons, que se ejecuta cuando el editor carga los complementos, y add_plugin () está vinculada al filtro mce_external_plugins, que se ejecuta cuando los botones están a punto de cargarse:

function my_recent_posts_button() {

if ( ! current_user_can(‘edit_posts’) && ! current_user_can(‘edit_pages’) ) {

return;

}

if ( get_user_option(‘rich_editing’) == ‘true’ ) {

add_filter( ‘mce_external_plugins’, ‘add_plugin’ );

add_filter( ‘mce_buttons’, ‘register_button’ );

}

}

La función anterior no lleva a cabo ninguna acción si el usuario no tiene permiso para editar publicaciones o páginas o si el usuario no está en modo de editor visual.

Finalmente, enganchamos la función en la acción de inicialización de WordPress para que se ejecute cuando se carga una página:

add_action(‘init’, ‘my_recent_posts_button’);Copy

Cómo usar el botón

Para comprobar que el botón desde el que crearás los shorcodes para WordPress funciona correctamente, hay que crear una nueva publicación o editar una existente. Al hacerlo, debería aparecer un nuevo botón, con el ícono que establecimos antes, a la izquierda de la primera línea de los botones de TinyMCE.

Si hacemos clic en ese botón, aparecerá un cuadro de diálogo que nos solicita que escribamos el parámetro para el número de publicaciones que necesita nuestro shortcode. En otras palabras, si queremos que aparezcan cinco publicaciones, escribiremos un 5 en ese cuadro de diálogo.

Después de insertar el número de publicaciones, aparece un segundo cuadro de diálogo que nos solicita que escribamos en el encabezado de la lista.

No pasa nada si no escribimos nada en esos espacios. Si los dejamos en blanco, Si cualquier parámetro se deja en blanco, no aparecerán en el resultado devuelto por el shortcode. Recuerda que, si no ponemos nada en “número de publicaciones”, aparecerá una sola por defecto.

Algunos shortcodes que pueden resultarte útiles

A partir de aquí encontrarás los códigos para algunos shortcodes para WordPress que llevarán tu blog un paso más allá.

Botón de enlaces

function linkbutton_function( $atts, $content = null ) {

return ‘<button type=»button»>’.do_shortcode($content).'</button>’;

}

add_shortcode(‘linkbutton’, ‘linkbutton_function’);Copy

Use this shortcode as follows:

[linkbutton]Click Me![/linkbutton]Copy

Menú de WordPress

Es más complicado, pero puedes copiarlo directamente desde aquí.

function menu_function($atts, $content = null) {

extract(

shortcode_atts(

array( ‘name’ => null, ),

$atts

)

);

return wp_nav_menu(

array(

‘menu’ => $name,

‘echo’ => false

)

);

}

add_shortcode(‘menu’, ‘menu_function’);Copy

Cuando ejecutes este shorcode debes añadir el nombre del menú que quieres usar. Y aparecerá en el contenido que escojas (posts, widgets o comentarios, como vimos más arriba.

[menu name=»main-menu»]

Google Maps

Es verdaderamente útil disponer de un shortcode para Google Maps, porque podemos insertar un mapa sin necesidad de editar el código fuente.

function googlemap_function($atts, $content = null) {

extract(shortcode_atts(array(

«width» => ‘640’,

«height» => ‘480’,

«src» => ’

), $atts));

return ‘<iframe width=»‘.$width.'» height=»‘.$height.'» src=»‘.$src.’&output=embed» ></iframe>’;

}

add_shortcode(«googlemap», «googlemap_function»);

Cuando escribas este código, recuerda que debes usar el ancho, el alto y el link de Google Maps como parámetros:

[googlemap width=»600″ height=»300″ src=»http://maps.google.com/maps?q=Heraklion,+Greece&hl=en&ll=35.327451,25.140495&spn=0.233326,0.445976& sll=37.0625,-95.677068&sspn=57.161276,114.169922& oq=Heraklion&hnear=Heraklion,+Greece&t=h&z=12″]Copy

El link del ejemplo existe y es el que se encuentra dentro del último par de comillas.

Google Charts

Google Charts (gráficos de Google) es un servicio muy útil porque permite un alto grado de personalización. A continuación te dejamos un ejemplo de shortcode con múltiples atributos:

function chart_function( $atts ) {

extract(shortcode_atts(array(

‘data’ => ’,

‘chart_type’ => ‘pie’,

‘title’ => ‘Chart’,

‘labels’ => ’,

‘size’ => ‘640×480’,

‘background_color’ => ‘FFFFFF’,

‘colors’ => ’,

), $atts));

switch ($chart_type) {

case ‘line’ :

$chart_type = ‘lc’;

break;

case ‘pie’ :

$chart_type = ‘p3’;

break;

default :

break;

}

$attributes = ’;

$attributes .= ‘&chd=t:’.$data.’;

$attributes .= ‘&chtt=’.$title.’;

$attributes .= ‘&chl=’.$labels.’;

$attributes .= ‘&chs=’.$size.’;

$attributes .= ‘&chf=’.$background_color.’;

$attributes .= ‘&chco=’.$colors.’;

return ‘<img title=»‘.$title.'» src=»http://chart.apis.google.com/chart?cht=’.$chart_type.’.$attributes.'» alt=»‘.$title.'» />’;

}

add_shortcode(‘chart’, ‘chart_function’);

Para crear un gráfico de quesitos con cuatro tipos de datos insertaremos la siguiente línea:

[chart type=»pie» title=»Example Pie Chart» data=»41.12,32.35,21.52,5.01″ labels=»First+Label|Second+Label|Third+Label|Fourth+Label» background_color=»FFFFFF» colors=»D73030,329E4A,415FB4,DFD32F» size=»450×180″]Copy

Incrustar un PDF

Se puede usar el visor de PDF de Google Documents para incrustar un PDF en neustro sitio web de WordPress mediante un shortcode. En concreto, mediente el siguiente:

function pdf_function($attr, $url) {

extract(shortcode_atts(array(

‘width’ => ‘640’,

‘height’ => ‘480’

), $attr));

return ‘<iframe src=»http://docs.google.com/viewer?url=’ . $url . ‘&embedded=true» style=»width:’ .$width. ‘; height:’ .$height. ‘;»>Your browser does not support iframes</iframe>’;

}

add_shortcode(‘pdf’, ‘pdf_function’);Copy

To embed a PDF, in this situation type the shortcode [pdf], and pass in the URL as the content argument:

[pdf width=»520px» height=»700px»]http://static.fsf.org/common/what-is-fs-new.pdf[/pdf]Copy

Plugins de Shortcodes para WordPress

Gracias a los plugins de WordPress, agregar un shortcode a un sitio web no requiere la edición del código fuente. Si echas un vistazo al directorio de complementos de WordPress, verás una gran cantidad de plugins o widgets de este tipo con los que podrás diseñar publicaciones y páginas.

Aquí te recomendaremos algunos de los mejores widgets de shortcode, sobre todo gratuitos, para satisfacer todas tus necesidades.

Shortcodes ultimate

Sin lugar a dudas, este es el mejor plugin de shortcode que existe. Te permite crear fácilmente botones, pestañas, cuadros, controles deslizantes, información sobre herramientas y muchos más elementos.

J Shortcodes

El plugin J Shortcodes es similar a Shortcodes Ultimate en cuanto que ofrece una colección de elementos útiles para diseñar un sitio web, incluidos botones, cuadros, pestañas y acordeones. J Shortcodes te permite establecer atributos personalizados en elementos, como color, tamaño y forma, y definir diseños de columna personalizados en cualquier página o publicación.

Shortcode Exec PHP

Permite ejecutar código arbitrario y lo hace mediante la reutilización de PHP tanto en posts como en comentarios o páginas. Su uso es sencillo y seguro.

Shortcodes UI

Mediante este plugin se añade una nueva interfaz de usuario a tu wordpress que te permite crear shortcodes sin necesidad de conocer el código necesario y sin necesidad de editar.

Ventajas y desventajas de los shortcodes

Como hemos visto, el beneficio más evidente de los shortcodes para WordPress es que ofrecen un amplísimo abanico de posibilidades. Gracias a ellos, y cuando aprendas a manejarlos a tu antojo, podrás personalizar tu sitio web sin dificultad.

Al fin y al cabo, se trata de crear un pequeño código. Pequeño en cuento a elementos, aunque las combinaciones de los mismos pueden ser casi infinitas. Unas pocas líneas te permiten insertar botones, cajas con información relevante, formularios…

Y el hecho es que no necesitas un conocimiento exhaustivo de lenguaje de programación. Sobre todo si usas plugins de shortcodes o, directamente, temas de WordPress que ya los incluyen por defecto.

Como contrapartida, existen dos desventajas. La primera es que la curva de aprendizaje para aprender a crear shortcodes para WordPress desde cero es muy empinada. Al principio, so no estás familiarizado con ningún tipo de lenguaje de programación, es posible que te pierdas y te desesperes. Por eso es mejor empezar con la creación de shortcodes simples e ir complicándolos a medida que te sientas seguro.

La segunda desventaja es que, en el momento en que le cojas el tranquillo, crear shortcodes para WordPress te solucionará tantas cosas que probablemente llenes tu web de ellos. Y si luego quieres quitarlos, esta tarea puede ser un tanto engorrosa.

En cualquier caso, esperamos que esta guía te haya ayudado a comprender los shortcodes para WordPress y a empezar a usarlos.


Comparte este artículo
Scroll al inicio