blog webempresa

Shortcodes WordPress, Qué es y cómo crearlo

por | Feb 13, 2023 | Aprender WordPress

Shortcodes WordPress, Qué es y cómo crearlo

Los shortcodes WordPress son una opción muy utilizada por los desarrolladores de plugins que te ofrecen 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 explicarte qué son, cómo utilizarlos y cómo crear tus propios shortcodes WordPress.

  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 puede 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 tienes una tienda online con WooCommerce, este plugin dispone de shortcodes preparados para utilizar en cualquier parte de la web.

Si quieres mostrar un listado de productos rebajados pondrías esto:

[products limit="4" columns="4" on_sale="true"]

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

Ahora que sabes cómo se estructuran veamos cómo se añaden en contenidos de WordPress.

  Cómo insertar un Shortcode con el 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 puedes ver el shortcode asociado al formulario.

Ejemplo de shortcode generado por un formulairo de WordPress

Para insertar el shortcode en una página o entrada lo seleccionas y copias al portapapeles.

Después accedes a la página donde quieras 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.

Ejemplo de shortcode generado por un formulairo de WordPress insertado en una Entrada con Gutenberg

El resultado es este:

Resultado de shortcode generado por un formulairo de WordPress insertado en una Entrada con Gutenberg

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

Bloque de shortcode en Guteneberg

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

De este modo ya tendrías el shortcode de WordPress insertado en una Entrada o Página.

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

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

Shortcode en un widget de texto

  Crear un Shortcode en WordPress con un plugin

 

Has visto cómo insertar los shortcodes que te ofrecen los plugins.

Ahora vas a crear tu propio shortcode para mostrar el contenido que quieras.

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

Plugin Shortcoder — Create Shortcodes for Anything
Gratuito
Comercial

Una vez instalado y activado, ve a Shortcoder ➜ Settings y acceder a la opción Crear un Shortcode.

Crear un shortcode con Create Shortcodes for Anything

Lo primero que tienes que hacer es ponerle un nombre al shortcode. A continuación introduce el contenido. Puedes 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.

Editor para el shortcode

Para el ejemplo puedes introducir un texto y un formulario de suscripción que añades al final de la entrada para animar a contactar y suscribirse a los visitantes.

Añadir textos al shortcode

Lo rellenas y después haces clic en Publicar.

Si observas, debajo del nombre que he puesto aparece el shortcode creado. Haz clic en el botón Copy para copiarlo.

[sc name="shortcode-lorem-1"][/sc]

Ahora ve la entrada y añade ese shortcode utilizando el bloque de código corto de Gutenberg.

Insertar el shortcode en Entrada con editor de bloques

El aspecto final será este:

Resultado de añadir el shortcode en la entrada

Ahora que ya sabes cómo crear el shortcode veamos qué más opciones te ofrece el plugin.

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

Ajustes del shortcode creado

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

Insertar los parámetros del shortcode

Estos parámetros son muy variados y te permiten introducir dentro del contenido información de la entrada o página en la que estas, 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 sitúa el cursor en el editor donde quieras que aparezca el parámetro y en botón selecciona WordPress information ➜ Title of the post/location.

Añadir title y post_author

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

Resultado de añadir title y post_author

Como ves es muy sencillo hacerlo.

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

Lo que hago 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 inserto.

Para hacerlo puedes utilizar la opción Custom parameter.

Personalizar parámetros

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

Como name puedes poner un nombre corto y sin espacios, por ejemplo frase.

Default value será lo que se añada en caso de no utilizar el parámetro en el shortcode. Voy a escribir: Frase sin shortcode.

Personalizar frase sin shortcode

Si visualizo el shortcode directamente me muestra esto:

Resultado de Frase sin shortcode

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:

Se añade el parámetro frase al shortcode

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 en WordPress 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 con una función que incluya el código a mostrar y después añadirla como shortcode:

function nombre_de_la_funcion() {
return ‘<p>Contenido a mostrar</p>’;
}
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 he 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 devolverá el mismo.

Para hacerlo puedes usar las funciones ob_start y ob_get_contents. El modo de utilizarlas sería así:

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

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

Veamos a ver un ejemplo práctico que te 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() ) :         
        ?>
        &lt;div class="content-home-blog row">
        	&lt;?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
    	       &lt;div class="col-md-4 col-sm-4 col-xs-12">
	                    &lt;a href="&lt;?php the_permalink() ?>" rel="bookmark" title="">&lt;?php the_post_thumbnail('large'); ?>&lt;/a>
	  	&lt;h5>&lt;?php the_title(); ?>&lt;/h5>
		&lt;div class="entry-content">
	                        &lt;?php the_excerpt(); ?>
	                        &lt;a class="link-post" href="&lt;?php the_permalink() ?>">LEER&lt;/a>
	                    &lt;/div>
		&lt;/div>
            &lt;?php
            endwhile; ?>
        &lt;/div>
        &lt;?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 he creado el bucle y añadido el HTML necesario para maquetarlo. He puesto la imagen destacada, el título y el extracto.

Resultado de añadir shortcode sin plugins

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

Por ejemplo, puedes 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 tienes 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 pasar 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 para 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:

Shortcode mostrando solo las entradas de una categoría

Y con esto ya tienes completo el primer shortcode de WordPress realizado de forma manual.

  Conclusiones

 

Los shortcodes en WordPress te permiten crear contenido personalizado de manera fácil y rápida para enriquecer las Entradas y Páginas de tu sitio web.

Los shortcodes son pequeñas cadenas de texto que se convierten en funciones o bloques de contenido, y son especialmente útiles para la creación de botones, formularios de contacto, galerías de imágenes e incluso para mostrar información en widgets.

Estos códigos cortos también pueden ser reutilizados en varias partes de un sitio web, lo que significa que una vez que se ha creado un shortcode, puede ser mostrado en diferentes páginas de la web.

Además, los shortcodes facilitan la actualización del contenido, ya que los cambios se aplican en todos los lugares donde se ha utilizado el shortcode.

El uso de shortcodes es una forma eficiente y fácil de crear contenido personalizado en tu web con WordPress.

¿Te ha resultado útil este artículo?

Promo febrero Hosting 70 descuento