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
