Como crear y usar shortcodes en publicaciones de WordPress

Agregar a las páginas imágenes, videos, texto u otros elementos usando los shortcodes que incluye WordPress o crear los propios nuestros. Ejemplos prácticos.

Los shortcodes son una de las funciones más útiles que incluye WordPress, aunque son poco conocidos y empleados por la gran mayoría.
En este articulo explico con ejemplos como usar en la práctica los que incluye WordPress y como crear los propios nuestros, para agregar contenido y personalizar las publicaciones.


¿Qué son y cómo funcionan los shortcodes de WordPress?

Un shortcode es una etiqueta que se puede insertar dentro del texto en cualquier entrada o página, usando el editor del panel de administración, de la siguiente forma:
[NombreDelShortcode]
En ese lugar exactamente, se inserta el contenido que refiere.
Podemos usar los que incluye WordPress o crear los nuestros, agregando previamente las funciones necesarias, en el archivo “functions.php” o en un plugin como explico más abajo.

Shortcodes que incluye WordPress

WordPress incluye los siguientes shortcodes:
embed – Es el que brinda más posibilidades. Permite insertar contenido externo de varios tipos y distintos formatos, en las páginas.
Solo se necesita agregar entre las etiquetas embed/embed la dirección URL del recurso.
Puede ser fotos, videos, música, perfiles o publicaciones en las redes sociales, etc.
Lee más información.
[audio] – Permite agregar archivos de audio, para reproducir en las páginas. Poco empleado actualmente porque es más fácil aun agregarlos con el shortcode anterior, aunque permite opciones como el modo de carga, para no afectar el tiempo de carga de la página.
Por ejemplo: [audio src="https://url al archivo .mp3" preload="none"]
[video] – Permite insertar videos.
[playlist] – Muestra una colección de archivos de audio y video.
[caption]– Permiten agregar descripción bajo las imágenes. Poco empleado.
[gallery] – Permite crear una galería de imágenes en una publicación.
Estas imágenes pueden estar en la misma publicación o ser independientes de ellas.
Esta galería se puede personalizar usando distintos parámetros en el shortcode como el tamaño de las miniaturas, el orden, numero de columnas, los enlaces, etc.


¿Cómo usar los Shortcodes, ejemplos?

Insertar una Galería de imágenes

La siguiente galería de fotos se inserta en esta publicación usando el siguiente shortcode:
[gallery ids="431,432,433" size="medium"]
Los números son la identidad de las imágenes subidas (se pueden ver en la barra de direcciones al subirla usando la opción Medios del panel de administración y ‘médium’ indica el tamaño de las miniaturas, aunque se pueden especificar otras medidas.


Crear shortcodes personalizados en WordPress

Para crear shortcodes propios que nos permitan insertar contenido en las publicaciones, necesitamos agregar la función necesaria en el archivo “functions.php” del Tema Child.
Si son varios estos shortcodes, se recomienda crear un plugin personal solo para esta tarea.
En ambos casos la función tiene el siguiente formato:

// Crear shortcode
function nombre_funcion() {
return 'TEXTO o HTML';
}
add_shortcode( 'nombre_shortcode', 'nombre_funcion' );

 


Ejemplos de shortcodes

En los siguientes ejemplos uso funciones comentadas en un artículo anterior, que nos permiten agregar contenido en las páginas.
1- Shortcode para mostrar un mensaje de texto en un contenedor.

// Insertar mensaje
function mensaje_texto( $atts ){
	return '<div style="background-color:#d4eefd;padding:12px;margin:-12px 0 12px 0;">Texto del mensaje a mostrar donde se inserte el shortcode</div>';}
add_shortcode( 'mensaje', 'mensaje_texto' );

Nombre del shortcode: [mensaje]

2- Shortcode para insertar un calendario del mes actual, con enlaces a las publicaciones creadas en nuestro blog en cada fecha.

// Insertar calendario
function npc__calendario() {
       ob_start();
get_calendar();
return ob_get_clean();}
add_shortcode('calendario', 'npc__calendario');

Nombre del shortcode: [calendario]

3- Shortcode para mostrar la fecha y hora actual.

// Insertar fecha y hora local
function npc__act() {
  ob_start(); 
echo '<p>'.date_i18n('F jS, Y, H:i').'</p>'; 
return ob_get_clean();}
add_shortcode( 'fechahora', 'npc__act' );

Nombre del shortcode: [fechahora]

4- Shortcode para mostrar un enlace a las redes sociales, en este caso Twitter.

// Enlace de seguir en Twitter
function seguir_twitter() {
    return '<p><a style="color: #55acee;font-size: 1.2em;" href="https://twitter.com/NorfiPC"><b>¡Sígueme en Twitter!</b></a></p>';}
add_shortcode('seguirtwitter', 'seguir_twitter');

Nombre del shortcode: [seguirtwitter]

5- Shortcode para compartir la página donde se inserte en Facebook.

//Compartir pagina en Facebook
function share_fb(){
$url = get_permalink();
return '<p><a style="color: #3b5998;font-size: 1.2em;" href="https://www.facebook.com/sharer/sharer.php?u='.$url.'" target="_blank"><b>Compartir en Facebook</b></a></p>';}
add_shortcode('compfb', 'share_fb');

Nombre del shortcode: [compfb]


¿Cómo insertar shortcodes en widgets?

En WordPress no podemos agregar contenido en la barra latera, a no ser que usemos los widgets.
Para poder habilitar el uso de shortcodes en el Widget de texto, necesitamos agregar la siguiente instrucción al archivo functions.php.

// Habilitar Shortcodes en Widget de texto
add_filter('widget_text', 'do_shortcode');

Reglas para evitar errores al crear shortcodes

– Se debe evitar el uso de las órdenes echo y print.
– El nombre del shortcode no debe contener caracteres especiales, espacios ni el carácter (-).
– Si el shortcode produce mucho HTML, se debe usar “ob_start()” para capturar la salida y convertirla en una cadena empleando “ob_get_clean()”, como se puede comprobar en el ejemplo número 2.

Estoy en: NorfiPC | Notas | WordPress | Como crear y usar shortcodes en publicaciones de WordPress



Páginas relacionadas

Buscar con Google