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