Shortcodes en WordPress

Ya hace un tiempo bastante grande que a WordPress se le agregaron los shortcodes, pero ¿Qué son los shortcodes?, ¿Con qué shortcodes viene WordPress por defecto? ¿Cómo creo mi propio shortcode? Estas 3 preguntas son las que vamos a responder en este post.

¿Qué son los shortcodes?

Que fácil tener algo que me permita, hacer una función reiterativa en mi blog sin tener que escribir código todo el tiempo, por ejemplo si mi post posee cierto autor escribir [author name="JulioYe87"]<descripción de julio>[author] y esto me genere una tarjeta o card de julio con título julio y una descripción

Bueno de eso se trata los shortcodes de hecho en esta web se utilizan algunos como pueden ser

Es que casi todas las nomenclaturas del blog son shortcodes.

¿Con qué shortcodes viene WordPress?

Este viene con varios shortcodes por defecto y estos son:

• caption – allows you to wrap captions around content
• gallery – allows you to show image galleries
• audio – allows you to embed and play audio files
• video – allows you to embed and play video files
• playlist – allows you to display collection of audio or video files
• embed – allows you to wrap embedded items

A continuación veremos como usar estos shortcodes que vienen por defecto:

caption

A continuación veremos el comportamiento de caption, para ver este haremos lo siguiente:

esto es un texto normal y corriente

Attributos que soporta:

id(string) (optional): id que pertenezca a tu style.css. Default: None

class(string) (optional): alguna clase de tu style.css. Default: None

align(string) (optional) posibles valores. Default: alignnone

• alignnone
• aligncenter
• alignright
• alignleft

width(string) (required): la medida del with debe ser en pixeles, min value:1. Default: None

gallery

El shortcode gallery nos permite crear una galería con ciertos id de los post que poseen estas imágenes, vamos a obviar los [] para el shortcode si dentro de estos coloco gallery id=’4730′ obtendré las imágenes que hay en ese post.

Estas imágenes son imágenes que poseo dentro de mis medios en mi WordPress no funciona con imágenes externas, si entra al post verá que hay muchas más imágenes.

También podemos hacer una galería por las ids de las imágenes gallery ids=’1,2,3′

Pero saber la id de las imágenes no es fácil y es probable que termines usando esta opción por código, recomiendo usar gallery que viene en el editor.

Hay más maneras de usar el shortcode gallery, pero este shortcode no lo recomiendo. Es preferible utilizar un slider o la opción de gallery antes mencionada.

Las razones del porqué es que utilizar ids es engorroso y solo frenara tu escritura en tu post.

audio

este shortcode te permite poner audio en tu sitio web echo en wordpress.

multiple sources

Atributos:

src(string) (optional): seria donde se encuentra nuestro audio(source)

loop(string) (optional): sus posibles valores son ‘on’ y ‘off’, esto es para que se repita un audio

autoplay(string) (optional): hace que el audio corra automaticamente al igual que el atributo anterior sus posibles valores son ‘on’ y ‘off’

preload(string) (optional): este atributo indica si va a haber precarga, lo ideal seria que no, por lo general no quieres que una precarga enlentesca tu web. posibles valores «none», metadata,»auto»

Los formatos permitidos son:

• mp3
• m4a
• ogg
• wav
• wma

video

Video es muy parecido a lo que es audio, es que estos shortcodes es muy probablemente que estén hechos con HTML5 a continuación código de HTML 5, solo para comparar

<video width="600" height="338" poster="/POSTER.jpg" controls autoplay>
<!-- HTML 5 browsers will play one of these -->
<source src="/VIDEO.m4v" type="video/mp4" /></source>
<source src="/VIDEO.ogv" type="video/ogg" /></source>
You need an HTML 5-capable browser.
</video>

En caso de tener múltiples fuentes, si el browser no puede reproducir una reproducirá una de las otras

playlist

Nos mostrará una colección(lista) de audio o video que se encuentre en el post

Atributos que podemos utilizar con playlist:

‘type’(string): determina de que será la colección y sus valores posibles son («audio»,»video»)

‘order’(string):este atributo cambia el orden en que serán mostrados puede ser ascendente como descendete, sus valores posibles son «ASC» y «DESC»

‘orderby’:

‘id’: id del post que sacará los videos o audio, de no ser especificado tomara el post actual

‘ids’: ids de los attachments, sería las ids de los videos o audio en caso de usarlo úsalo de la siguiente manera

ejemplo ids=’432,4453,2232′

‘exclude’:

‘style’(string):Estilo que tendrá la colección, valores posibles «dark» o «light»

‘tracklist’(bool): Defines si quieres que muestre la lista de videos o audio, valores: true y false

‘tracknumbers’(bool):

‘images’(bool): con este atributo decidimos si mostrar un tumbnail o no, los tumbnail son imágenes por lo general pequeñas, un ejemplo sería la carátula de un disco. Los posibles valores para este atributo son true o false

‘artists’(bool): Decides si mostrar el artista o no, valores: true, false

embed

Por como describe la página de WordPress esta característica creo que se trata de un div de ciertas medidas y con cierto estilo css, lo describe para envolver(wrap) elementos que son incrustados(embeded) con una cierta altura y un cierto ángulo.

sus unicas opciones son width y height.

Cuando hablamos de elementos incrustados(embed items) no hablamos de elementos HTML puedes ver más sobre estos elementos en https://wordpress.org/support/article/embeds/

¿Como crear un shortcode?

Para crear shortcodes para tú template te recomiendo crear un archivo aparte con un nombre que puede ser myshortcodes.php dentro de la carpeta de tú template.

Además, debes de tener en cuenta de no hacer tus shortcodes sobre un tema que se vaya actualizando, si estás utilizando un tema que no sea creado por ti, es conveniente usar un child theme.

Utilizaremos functions.php de nuestro tema, incluyendo myshortcodes.php de esta manera:

<?php
 include "t_shortcodes.php";
//...
//code

Siguiendo esto, ahora deberemos crear nuestro archivo myshortcodes.php en la carpeta del tema o témplate como deses llamarlo.

¿Qué podemos crear como un shortcode??

Ya sé el Something Wrong de la página.

function something_wrong() {
    return '<div class="alert alert-info"><strong>Something wrong?</strong>If you found an error or mistake in the content you can contact me on Twitter | @tutwitter.</div>';
add_shortcode( 'SW', 'something_wrong' );

Una forma fácil de leer esto es que le estamos agregando la función something_wrong a SW, esta no tiene ningún parámetro que especifique el contenido y, por lo tanto, cuando lamemos el shortcode será [SW/]

Shortcodes con parametros en WordPress

Realicemos un shortcode con parámetros. Por ejemplo, hagamos un texto que sea como si le hubiéramos puesto un marcador, que la manera de llamar el shortcode sea:

[marcado color='red' backgroundcolor='black']Texto aqui[/marcado]

El siguiente ejemplo tiene como parámetro el contenido como también los atributos. Para simplificar no se tomó en cuenta la seguridad, pero puedes agregarle esc_html() en los $atts[] también podrías agregarle esta medida a $content

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

	// Attributes
	$atts = shortcode_atts(
		array('color'=>'',
        'backgroundcolor'=>''
		),
		$atts
	);

    return '<p><mark style="color:'.$atts['color'].';background-color:'.$atts['backgroundcolor'].'" >' . $content . '</mark></p>';

}
add_shortcode( 'marcado', 'marcar_texto' );