¿Que son los shortcodes?

Los shortcodes como su nombre indica son tags que podemos añadir enmedio del contenido de nuestro sitio WordPress que nos facilitaran la maquetación o incorporaran algunas mejoras, seguramente habréis visto alguno de los plugins que utilizamos.

En este tutorial vamos a crear un sencillo shortcode que nos permitirá crear dos columnas una al lado de la otra.

Vamos a ello!

Declarar el shortcode

Cómo casi siempre todo empieza en el functions.php de nuestra theme, añadios el siguiente código:

function bloque_func( $atts, $content = null ) {
	extract( shortcode_atts( array(
		'posicion' => 'izquierda',
	), $atts ) );

	return '<div class="'.$posicion.'">'.$content.'</div>';
}
add_shortcode( 'bloque', 'bloque_func' );

Con este sencillo código hemos declarado un shortcode llamado bloque con el atributo «posicion» que por defecto tendrá el valor izquierda, la variable $content es el contenido que podremos dentro del shortcode, y vemos que lo que realmente hacemos es devolver un div con una clase.

De este modo si ponemos en cualquier página o post

[bloque]Este texto está flotante a la izquierda[/bloque]

[bloque posicion=»derecha»]Este texto está flotante a la derecha[/bloque]

Lo que realmente pintará WordPress es:

<div class="izquierda">Este texto está flotante a la izquierda</div>
<div class="derecha">Este texto está flotante a la derecha</div>

Un poco de estilos…

Que con un poco de CSS.. ya tendremos nuestras columnas

.izquierda { float:left; width:49%; }
.derecha { float:right; width:49%; }

Todo listo! De esta sencilla manera podemos crear shortcodes utiles cómo el de crear un blockquote, botones, estilos de tabla, etc

De momento lo dejamos aquí, proto veremos algún ejemplo de Shortcode más avanzado, hasta la próxima!

Deja una respuesta

catorce + dieciocho =