Shortcodes en WordPress

Este artículo te ayudará a entender que son los shortcodes en WordPress, las ventajas que ofrecen y cómo crear tus propios shortcodes.

¿Qué son los shortcodes?

Los shortcodes hacen posible ejecutar una función PHP dentro del editor de textos de los post y páginas de WordPress.

Los códigos cortos o shortcodes en WordPress son una funcionalidad de WP introducida a partir de la versión 2.5. Esta nueva funcionalidad permiten utilizar en el editor de páginas, barras laterales, templates… contenido dinámico, de una forma muy sencilla y sin conocimientos de programación.

Actualmente en las versiones de WordPress  estás trabajando con shortcodes que vienen incluidos en la descarga. Al instalar tu theme, es probable que cuentes con nuevos shortcodes que instala el tema y por supuesto muchos plugins incluyen shortcodes, así que quizá lleves un tiempo trabajando con shortcodes.

Cuando un shortcode es insertado en una página o post de WordPress éste es reemplazado con contenido dinámico que crea una función PHP a la que llama.

Shortcode y Función asociada

La función PHP

En algún archivo (functions.php, shortcode.php) se implementa una función en PHP.

function shortcode_ejemplo{
     return '<p>Mi primer Shortcode</p>';
}

Conector: Indicando a WP que está función se ejecutará mediante un shortcode

en el mismo archivo debajo de la función se añade esta línea de código que indica a WordPress que la función anterior es un shortcode:

add_shortcode('nombre_shortcode', 'shortcode_ejemplo');

El shortcode en el editor de textos

Ahora ya podemos utilizar nuestro shortcode dentro del editor de textos de los post o páginas de WordPress. Abrimos el editor de textos de una página o post y pegamos lo siguiente:

[nombre_shortcode]

También puedes llama a los shortcode desde los archivos PHP:

<?php echo do_shortcode(‘[nombre_shortcode]’); ?>

así, estamos indicando que ejecute la función que va asociada a este shortcode, en nuestro ejemplo ejecutará la función PHP «shortcode_ejemplo» y en pantalla veremos el siguiente mensaje:

Mi primer Shortcode

Como verás son códigos de texto simple tipo tag HTML que van encerrados entre corchetes []. Este ejemplo es muy sencillo, los shortcodes pueden incluir parámetros, etiquetas de cierre….

Sintaxis de un shortcode

1. nombre

[nombre_shortcode]

2. un shortcode puede tener 0, 1 o varios parámetros o atributos

[nombre_shortcode parametro="valor_parametro_1"]

si el shortcode lleva parámetros, la función PHP que se ejecutará contempla el uso de estos parámetros o atributos, observa el siguiente ejemplo:

Shortcode: [nombre atributo]

[ultimos_post posts="5"]

Función:

function devuelve_ultimos_post($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;
}
add_shortcode('ultimos_post', 'devuelve_ultimos_post');

en este ejemplo utilizamos dos nuevas funciones que son extract() y shortcode_atts() para indicar que el shortcode puede hacer uso de un atributo, en este caso post. Si empleo el shortcode con post=»5″, la función devolverá los últimos 5 post creados, y si no hago uso del atributo post al escribir el shortcode:

[ultimos_post]

la función devolverá un sólo post:

'posts' => 1,

 No te preocupes mucho si no terminas de entender la idea lo vamos a explicar paso a paso en el apartado de «Cómo crear shortcodes en WordPress»

3. Un shortcode puede llevar etiqueta de cierre

Si lleva etiqueta de cierre es porque lleva contenido ($content) en este caso el contenido es: Últimos Post. 

$content= Últimos Post

[ultimos_post posts="5"]Últimos Post[/ultimos_post]

function devuelve_ultimos_post($atts,$content = null){
     extract(shortcode_atts(array(
      'posts' => 1,
      ), $atts));
      $return_string = '<h3>'.$content.'</h3>';
      $return_string .= '<ul>';
...

¿Por qué usar shortcodes?

Para mí existen dos ventajas importantes, por un lado puedo ejecutar funciones PHP con contenido dinámico dentro del editor de páginas y post de WordPress y por otro lado hay funciones que se utilizan de forma repetitiva en los proyectos, por ejemplo mostrar post de una determinada categoría, en este caso creamos una sóla función PHP con un parámetro categoría y lo asociamos a un shortcode para utilizarlo desde todas las páginas que lo necesite.

[muetra_post_de_categoria parametro=»muestra-esta-categoria»]

También los utilizo dentro de las template php de mi tema embebido en código PHP.

AVISO: en algunos temas y plugins se utilizan shortcodes, si cambias de tema y/o plugin dejan de funcionar,  el shortcode no se borra de las secciones donde los hayas usado, a veces podrás recuperar las funciones y trasladarlas a un archivo propio pero la mayoría de las veces tendrás que ir recorriendo tus post y páginas para borrar la sintaxis de shortcodes que quedan en ellas. 

Crear shortcodes en WordPress

Paso 1 – Seleccionar el archivo que alojará a la función PHP

Opción 1 – Dentro del archivo del temaHijo functions.php

Abrimos nuestro archivo functions.php la encontrarás en wp-content/themes/tutemahijo/functions.php, debes trabajar sobre un tema hijo, si trabajas directamente en el tema padre cuando actualices el tema PERDERÁS todos los shortcodes que has creado. Si todavía no tienes instalado tu tema hijo puedes ir a este artículo que te explica como hacerlo en 5 minutos.

Opción 2 – utilizar el Plugin Code Snippets

El plugin Code Snippets abre un editor, donde implementar tus funciones PHP  (funciones de shortcodes y otras) y las guarda en el archivo functions.php de tu tema. La ventaja principal, es que puedes editar y crear cualquier función que necesites del archivo functions.php desde el administrador de WordPress y en un futuro si no quieres seguir trabajando con el plugin o vas a cambiar de tema puedes exportar y guardar todas las funciones creadas para importarlas en tu nuevo tema.

Te dejo el link al sitio oficial del plugin para que puedas conocer más a fondo sus características.

Opción 3 – Crear un archivo independiente del tema – Plugin Propio

Otra opción es crear un archivo php donde guardes todos tus shortcodes, este archivo lo puedes instalar y activar en tu WordPress como un plugin, conseguirás que sea independiente del tema, por lo tanto no perderás tu código con las actualizaciones o cambios de temas de tu página web y tendrás absoluto control sobre él.

Si optas por esta opción puedes echar un vistazo al siguiente artículo de este blog dónde te explica paso por paso como crear tu propio plugin en 5 minutos. >> Crear un plugin en WordPress en 5 minutos

Paso 2 – Implementar la función PHP 

Si ya has decidido dónde escribir la función PHP que se ejecutará con el shortcode, escribe el código dentro del archivo, puedes copiar y pegar el siguiente shortcode cuya función es mostrar los últimos 5 post de la categoría que le indicas en el atributo category-name:

//Shortcode mostrar post segun categoria
function muestra_posts_segun_categoria( $atts ){
        extract(shortcode_atts(array(
                'category'=> 'wordpress',
        ), $atts));
        query_posts(array('category_name'=>$category,'orderby'=>'date','order'=>'DESC','showposts'=>'5'));
	    $el_string = '<h3 class="widget-title">&Uacute;ltimos Post</h3>';
		$el_string .= '<ul>';
		if (have_posts()) :
      	while (have_posts()) : the_post();
        $el_string .= '<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>';
      	endwhile;
   		endif;
		$el_string .=  '</ul>';
        //Reset query
        wp_reset_query();
        return $el_string;
}
add_shortcode('muestra_post_categoria', 'muestra_posts_segun_categoria');

Este shortcode muestra los últimos 5 post de la categoría wordpress u otra si lo especificas en el parámetro.

Ejemplo: muestra los 5 últimos post categoría wordpress:

[muestra_post_categoria]

[muestra_post_categoria]

Ejemplo: muestra los 5 últimos post categoría woocommerce:

[muestra_post_categoria category="woocommerce"]

[muestra_post_categoria category=»woocommerce»]

Paso 3 – Guarda los cambios en el archivo

Guarda el archivo con las modificaciones.

Cómo utilizar los shortcodes

En el editor de post, páginas y widget texto

Escribe directamente el shortcode en el lugar que quieres que aparezca

[muestra_post_categoria category="woocommerce"]

En templates, archivos.php

<?php echo do_shortcode('[muestra_post_categoria category="woocommerce"]'); ?>

Cuidado con las comillas!

Error ejecución Shortcode

Un error muy común cuando creamos un shortcode, es que éste se ejecute al principio de la página y no en el lugar donde realizamos la llamada al mismo. Si te encuentras con este problema, la solución es muy sencilla. En siguiente artículo del blog te explico que debes hacer: https://laprogramaciondehoy.com/problema-shortcode-ejecucion-principio-pagina/

Plugin Shortcode Ultimate

Como siempre me gusta ofrecer una alternativa para usuarios que prefieran no implementar código por la causa que fuere, si es tu caso el plugin Shortcode Ultimate contiene una colección importante de shortcodes ya creados; tablas, últimos post, sliders, galerías… es un plugin extraordinario y con revisiones continuas. 

Lo encontrarás en el repositorio oficial de plugins de WordPress o siguiendo este enlace.

Shortcode API

En el API para shortcode de WordPress, encontrarás códigos cortos y consejos de buenas prácticas para crear tus propios códigos: Codex WordPress – Shortcode API