Qué es un Shortcodes y cómo crearlo en WordPress

por | Feb 8, 2021 | Aprender WordPress

Qué es un Shortcodes y cómo crearlo en WordPress

Los shortcodes de WordPress son una utilidad muy utilizada por los desarrolladores de plugins que nos ofrece la posibilidad de insertar contenidos en distintas partes de la web sin necesidad de escribirlos cada vez.

Esto ahorra mucho trabajo y permite la actualización inmediata del contenido.

A continuación voy a explicaros qué son, cómo utilizarlos y cómo crear vuestros propios shortcodes.

 

Qué es un Shortcode

Un shortcode es un código abreviado que se puede insertar directamente en el editor de texto de una entrada o página.

Este shortcode muestra un contenido específico, que puede ser texto, imágenes, código html, javascript, funciones PHP o cualquier tipo de código web que queramos.

Los shortcodes en WordPress se representan así:

[nombre_del_shortcode]

 

nombre_del_shortcode es el nombre específico del shortcode. No pueden haber 2 shortcodes con el mismo nombre.

Además estos shortcodes pueden aceptar parámetros. Los parámetros son valores que se utilizan dentro del contenido para personalizarlo.

Estos parámetros se escriben así:

[nombre_del_shortcode param1=”valor1” param2=”valor2”]

 

Si por ejemplo tenéis una tienda online con WooCommerce, este plugin dispone de shortcodes preparados para utilizar en cualquier parte de la web.

Si queremos mostrar un listado de productos rebajados pondríamos esto:

[products limit=”4″ columns=”4″ on_sale=”true”]

 

El shortcode se llama products y lo personalizamos con 3 parámetros: el número de productos a mostrar, el número de columnas y si son productos rebajados.

Ahora que sabemos cómo se estructuran vamos a ver cómo se insertan.

 

Cómo insertar un Shortcode en WordPress (Editor clásico y Gutenberg)

Muchos plugins de WordPress utilizan los shortcodes para mostrar su contenido, como Contact Form 7.

El plugin Contact Form 7 te permite crear formularios de contacto y después mostrarlos donde quieras mediante shortcodes.

Al acceder a la página del plugin podemos ver el shortcode asociado al formulario.

 

Qué es un shortcode y cómo crearlo en WordPress

 

Para insertar el shortcode en una pagína o entrada lo seleccionamos y copiamos al portapapeles.

Después accedemos a la página donde queramos insertarlo.

Si estás utilizando el Editor clásico de WordPress debes copiarlo dentro del contenido de texto. Puedes hacerlo en modo Visual o HTML.

 

Qué es un shortcode y cómo crearlo en WordPress

 

El resultado es este:

 

Qué es un shortcode y cómo crearlo en WordPress

 

Si utilizas el Editor de Gutenberg, este dispone de un bloque específica para insertar los shortcodes.

 

Qué es un shortcode y cómo crearlo en WordPress

 

Se mostrará el bloque con un campo de texto donde tenemos que introducir el shortcode completo.

 

Qué es un shortcode y cómo crearlo en WordPress

 

De este modo ya tendríamos el shortcode de WordPress insertado en nuestra página.

El uso de los shortcodes no se limita a las páginas y entradas, también pueden insertarse en widgets de textos.

En cualquier parte de la web donde haya una zona de widgets (por ejemplo la barra lateral) puede insertarse un shortcode.

 

Crear un Shortcode con un plugin

Hemos visto cómo insertar los shortcodes que nos ofrecen los plugins.

Ahora vamos a crear nuestros propios shortcodes para mostrar el contenido que queramos.

Existen muchos plugins gratuitos para crear shortcodes en WordPress. Yo recomiendo Shortcoder — Create Shortcodes for Anything, un plugin sencillo y fácil de manejar con todas las funcionalidades que hacen falta.

 

Qué es un shortcode y cómo crearlo en WordPress

 

Una vez instalado y activado vamos a su página principal y pulsamos el botón superior “Crear un Shortcode”.

 

Qué es un shortcode y cómo crearlo en WordPress

 

Lo primero que tenemos que hacer es ponerle un nombre al shortcode.

A continuación tenemos el editor donde introduciremos el contenido.

Podemos elegir entre introducirlo en modo Código, Texto o Visual.

Como aclaración este plugin no permite la introducción de código PHP. Esto podremos hacerlo de modo manual en el siguiente punto.

 

Qué es un shortcode y cómo crearlo en WordPress

 

Para el ejemplo vamos a introducir un texto y un formulario de suscripción que colocaremos al final de la entrada para animar a contactar y suscribirse.

 

Qué es un shortcode y cómo crearlo en WordPress

 

Lo rellenamos y después le damos al botón “Publicar”.

Si os fijáis debajo del nombre que hemos puesto aparece el shortcode creado. Pulsamos el botón “Copy” para copiarlo.

Ahora nos vamos al final de la entrada y lo pegamos.

 

Qué es un shortcode y cómo crearlo en WordPress

 

El aspecto final será este:

 

Qué es un shortcode y cómo crearlo en WordPress

 

Ahora que ya sabemos cómo crear el shortcode vamos a ver qué más opciones nos ofrece el plugin.

Debajo del editor tenemos un cuadro de configuración donde podemos cambiar el nombre cuando lo listamos con el resto de shortcodes creados, desactivarlo para que no funcione, ocultarlo a los administradores y elegir entre mostrarlo en todos los dispositivos, sólo en escritorio o sólo en móvil.

 

Qué es un shortcode y cómo crearlo en WordPress

 

Por último tenemos la posibilidad de insertar parámetros dentro del contenido utilizando el botón “Insert shortcode parameters”.

 

Qué es un shortcode y cómo crearlo en WordPress

 

Estos parámetros son muy variados y nos permite introducir dentro del contenido información de la entrada o página en la que estamos, la fecha actual y parámetros personalizados entre otros.

Como ejemplo voy a modificar la frase inicial para que muestre el título de la entrada y su autor. Para hacerlo coloco el curso en el editor donde quiera que aparezca el parámetro y en botón selecciono “WordPress information > Title of the post/location”.

 

Qué es un shortcode y cómo crearlo en WordPress

 

Se añadirá el parámetro $$title$$. Hacemos lo mismo con el autor $$post_author$$ y el resultado es este.

 

Qué es un shortcode y cómo crearlo en WordPress

 

Qué es un shortcode y cómo crearlo en WordPress

 

Como ves es muy sencillo hacerlo.

Ahora vamos a personalizarlo un poco más utilizando los parámetros explicados al principio del artículo.

Lo que voy a hacer es escribir un parámetro y un valor que se incluirá dentro del contenido del shortcode, de manera que se pueda modificar en cada shortcode que insertemos.

Para hacerlo vamos a utilizar la opción “Custom parameter”.

 

Qué es un shortcode y cómo crearlo en WordPress

 

Yo voy a añadir una frase extra antes del formulario de suscripción.

Como “name” poned un nombre corto y sin espacios, por ejemplo “frase”.

Default value será lo que ponga en caso de no utilizar el parámetro en el shortcode.

Yo voy a escribir: “Frase sin shortcode”.

 

Qué es un shortcode y cómo crearlo en WordPress

 

Si visualizo el shortcode directamente me muestra esto:

 

Qué es un shortcode y cómo crearlo en WordPress

 

Ahora edito el shortcode y pongo el parámetro “frase” con otra frase escrita:

[sc name=»Suscribete» frase=»Subscríbete ya a la Newsletter»]

 

El resultado ahora es:

 

Qué es un shortcode y cómo crearlo en WordPress

 

Como ves hay un montón de posibilidades de personalización de los shortcodes mediante parámetros que harán más dinámico su contenido y hará que no parezca repetitivo.

 

Crear un Shortcode sin Plugin

Si tienes conocimientos de PHP y del funcionamiento de WordPress puedes crear tus propios shortcodes de forma manual desde el fichero functions.php o creando un plugin.

WordPress dispone de una función para añadir shortcodes llamada add_shortcode.

El modo de crear un shortcode es creando una función con el código a mostrar y después añadirla como shortcode:

 

function nombre_de_la_funcion() {
return ‘

Contenido a mostrar

’;
}
add_shortcode(‘nombre_del_shortcode’, ‘nombre_de_la_funcion’);

 

El shortcode a insertar en la web sería: [nombre_del_shortcode]

Este es el funcionamiento básico para crear el shortcode.

Como ves en el ejemplo hemos utilizado “return” para mostrar el contenido.

Si vas a mostrar contenido html, javascript, etc. el modo más cómodo de hacerlo es recoger todo el código en una variable que es la que devolveremos.

Para hacerlo utilizaremos las funciones ob_start y ob_get_contents. El modo de utilizarlos sería así:

 



function nombre_de_la_funcion() {
ob_start(); ?>
// Contenido html/javascript
<?php
$output = ob_get_contents();
	ob_end_clean();
	return $output;
}


 

Si en lugar de estas funciones y return utilizamos “echo” para mostrar el contenido, el contenido puede no mostrarse correctamente, sin respetar los div contenedores.

Vamos a ver un ejemplo práctico que nos servirá para después añadir los parámetros al shortcode.

Voy a mostrar las últimas entradas del blog y quiero que sean 3 columnas (usaré Bootstrap para representarlo).

 

function cvw_home_posts() {
    $args = array(
    	'post_type' => 'post',
    	'posts_per_page' => 3
    );
    $the_query = new WP_Query( $args );
    
    ob_start();
    if ( $the_query->have_posts() ) :         
        ?>
        <div class="content-home-blog row">
        	<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
    	       <div class="col-md-4 col-sm-4 col-xs-12">
	                    <a href="<?php the_permalink() ?>" rel="bookmark" title=""><?php the_post_thumbnail('large'); ?></a>
	  	<h5><?php the_title(); ?></h5>
		<div class="entry-content">
	                        <?php the_excerpt(); ?>
	                        <a class="link-post" href="<?php the_permalink() ?>">LEER</a>
	                    </div>
		</div>
            <?php
            endwhile; ?>
        </div>
        <?php
    	wp_reset_postdata();         
    endif;
    
    $result = ob_get_contents();
    ob_end_clean();
    return $result;
}

 

En la función he creado una query para obtener todas las entradas.

Para ello le he pasado como argumentos que el tipo de post sea “post” y que el número de resultados sea 3.

Después hemos creado el bucle y añadido el html para maquetarlo. He puesto la imagen destacada, el título y el extracto.

 

Qué es un shortcode y cómo crearlo en WordPress

 

Con este shortcode como base ahora se pueden plantear parámetros que lo personalicen más.

Por ejemplo, podemos hacer que muestre entradas de una categoría concreta para hacer secciones en la página de inicio.

Para añadir parámetros lo primero que tenemos que hacer en la función es añadirle una variable que los recoja:

function cvw_home_posts( $atts ) {

 

Después dentro de la función pasaremos los valores por defecto en caso de que no se haya introducido algún parámetro.

En mi caso voy a poner un parámetro “cat” y su valor por defecto será todas las categorías:

 

$atts = shortcode_atts( array(
‘cat’ => ”,
), $atts );

 

Y por último le paso a los argumentos de la query la categoría a mostrar:

 

$args = array(
‘post_type’ => ‘post’,
‘posts_per_page’ => 3,
‘category_name’ => $atts[‘cat’]
);

 

A la hora de montar el shortcode añado el parámetro “cat” y pongo el nombre de la categoría:

[cvw_home_posts cat=»nuevos»]

 

Y ahora me muestra las entradas sólo de esa categoría:

 

Qué es un shortcode y cómo crearlo en WordPress

 

Y con esto ya tenemos completo nuestro primer shortcode de WordPress realizado de forma manual.