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.

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:
  • 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.

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

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

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

 

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

 

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

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