Shortcodes con ejemplos basicos en WordPress


Para aquellos que no sepan que es un shortcode,  son pequeñas etiquetas que se suelen poner en post y paginas y que sirven para mostrar alguna información,  en realidad es como un alias, esa pequeña etiqueta lo que hace es llamar a una función de WordPress que devuelve una informacion. Esa informacion puede ser una galeria, una foto, un boton o cosas mas complejas listados de productos, listado de articulos ,…

Cuando insertáis una galería en realidad esta llamando al shortcode gallery con los corchetes  y se encarga de devolver  esa información.

[ gallery ids="2149,2140,2138" ]

Crear shortcodes es bastante sencillo, a medida que uno necesita mas funcionalidades la cosa se complica.

 

Características para mi de un buen shortcode.

  • Los shortcodes deben tener pocos parámetros ( esto es algo personal pero si son muchos son mas cosas que controlar).
  • Si son shortcodes con búsquedas, mostrar productos , shortcodes donde hay mucho html lo mejor es tenerlo en un template. Por limpieza y comodidad del codigo.
  • Intentar no meter un shortcode dentro de otro shortcode  ejemplo:
     [columna3][button...][/columna3]
  • Intentar siempre hacerlo lo mas sencillo posible son mas mantenibles y luego cuando quieres cambiarlos es una locura.

 

Vamos a ver varios shortcodes sencillos para que veías como usarlos.

 

Los shortcodes se registran  con el hook add_shortcode.

add_shortcode('demobasica', 'shortcode_demobasica');

Donde el primer parametro es el nombre de tu shortcode , el que vas a usar en el editor.
El segundo parametro es la funcion que devuelve la informacion.

Veamos los ejemplos:

Ejemplo 1 Shortcode sencillo

function shortcode_demobasica() {
	return '<p> Espero que os guste </p>';
}
add_shortcode('demobasica', 'shortcode_demobasica');

En este ejemplo hemos creado la funcion shortcode_demobasica y la registramos con el nombre demobasica, así que si queremos que nos muestre lo que hay en la funcion hay que poner la etiqueta “[“demobasica”]” sin comillas.

Este shortcode va mostrar solamente este mensaje.

 

 

Ejemplo 2 shortcode con texto

En este caso vamos a mostrar nuestro propio mensaje

function shortcode_demo_texto( $atts, $content = null ) {
	return '<p>' . $content . '</p>';
}
add_shortcode( 'demotexto', 'shortcode_demo_texto' );

Pasamos la variable $content que es la que vamos a mostrar

Para llamar al shortcode (demotexto) usariamos lo siguiente. Si ponemos otro mensaje lo pintara por pantalla

[demotexto] Hola esto es una prueba [/demotexto]

 

Ejemplo 3 shortcode con atributos

En este caso vamos a pasar algunos atributos al shortcode, lo que vamos a hacer es pintar una caja de texto y vamos a poder configurar color del texto y color del fondo, ademas de poner el mensaje que queramos.

Aqui ya definimos $atributos y usamos la función shortcode_atts con los parametros que queramos

function shortcode_demo_caja_colores( $atributos, $content = null ) {
	$atributos = shortcode_atts( array(
		'color'  => 'white',
		'background'   => 'blue',		
	), $atributos, 'atributes' );
	$resultado = '<div class="box" style="padding:20px;background:'. esc_attr( $atributos['background'] ) .'; color:'. esc_attr( $atributos['color'] ) . '"> hola';
	$resultado .= $content;
	$resultado .= '</div>';
	return $resultado;
}
add_shortcode('cajacolores', 'shortcode_demo_caja_colores');

 

Ejemplo 4 Shortcode con template.

Cuando queréis hacer algo mas serio como por ejemplo mostrar una lista de posts específicos,  donde hay un bucle, o mucho html lo mejor es llevar ese codigo para no llenar functions.php a un template y llamar a la función get_template_part(“nombretemplate”)

mitemplate es un fichero php que tendremos en nuestro tema y que contendra el codigo que queramos mostrar

function shortcode_template() {
  ob_start();
  get_template_part('mitemplate');
  return ob_get_clean();
}
add_shortcode( 'template', 'shortcode_template' );

En algunas pruebas que he realizado algunas veces no me lo mostraba bien asi que ponemos las funciones de php ob_start() ,… sobre todo por ejemplo si quisieramos poner y hacer un shortcode que pusiera la publicidad de google donde quisieramos.

 

 

Aviso

En el caso de usar un plugin, no podréis usar la función get_template_part  ya que esta función pertenece a la zona de temas y no la reconocería. Para usar algo parecido hay que añadir una clase de ayuda como  Gamajo-Template-Loader ,

 

Links recomendados de Shortcodes