Shortcodes con parámetros

En algún tutorial o artículo anterior habíamos comentado ya la comodidad de utilizar shortcodes en WordPress para mostrar de una forma uniforme y cómoda contenido derivado de funciones, bloques de contenido, con HTML y CSS definido, etc…

Hoy vamos a ir un poco más allá, viendo la opción de pasar parámetros dentro del shortcode y de esta forma concretar el contenido a mostrar o aprovechar la misma función para diferentes casos o situaciones.

Si partimos de una función básica para añadir un shortcode cómo ésta:

function fn_mostrar_banner() {
  $banner = '<div class="bnn">BANNER BLACK FRIDAY</div>';
  return $banner;
}
add_shortcode ('bnn-BF','fn_mostrar_banner');

En la que una vez la tenemos lista, podemos mostrar ese contenido en cualquier sitio con el shortcode [bnn-BF].

Vamos a ver cómo podemos indicarle parámetros adicionales que modifiquen o filtren el contenido devuelto por el shortcode.

function fn_mostrar_banner($atts = '')
{
 
      $atributos = shortcode_atts([  'tipo' => 'PORDEFECTO',  ], $atts);
      if ($atributos['tipo'] == 'BLACKFRIDAY') {
      	 $banner = '<div class="bnn">BANNER BLACK FRIDAY</div>';
      }
       if ($atributos['tipo'] == 'PORDEFECTO') {
      	 $banner = '<div class="bnn">BANNER POR DEFECTO</div>';
      }
      return $banner;
  }
  add_shortcode ('bnn-BF','fn_mostrar_banner');

La función es muy parecida, simplemente le pasamos los atributos que se le añadan al shortcode y los recogemos en un array con la función shortcode_atts, dando un valor por defecto para el caso que no se añada ningún valor.

$atributos = shortcode_atts([ ‘tipo’ => ‘PORDEFECTO’, ], $atts);

En esta línea, estamos pasando a la variable $atributos, que es un array, los valores del parámetro «tipo», y en su defecto, el valor que debe coger.

En el resto de la función, simplemente revisamos que valor tiene ese parámetro y devolvemos un valor u otro según cual sea.

De esta forma, si en nuestra web añadimos [bnn-BF tipo=’BLACKFRIDAY’] nos mostrará el banner específico, sino, el estandar o por defecto.

Esta función que en este ejemplo vemos simplemente que muestra un HTML u otro según el parámetro, podemos complicarla todo lo que queramos, utilizando por ejemplo los parámetros para modificar una consulta de posts o CPTS y mostrar los registros correspondientes según lo necesitemos en cada lugar.

Shortcodes de apertura y cierre

¿Qué ocurre en el caso que necesitemos shortcodes con apertura y cierre?

En este tipo de códigos, al utilizarlos podemos indicar tanto la etiqueta de apertura como la de cierre, modificando el contenido en medio. Es típico por ejemplo en maquetadores visuales, para dar formato a la página, pero también podemos utilizarlos en otros casos.

De ser así, simplemente tenemos que tener en cuenta que el texto o contenido que va entre la apertura y cierre, corresponde al parámetro $content

Si seguimos con el ejemplo sencillo del banner:

function fn_mostrar_banner($atts = '', $content='')
{
 
      $atributos = shortcode_atts([  'tipo' => 'PORDEFECTO',  ], $atts);
      if ($atributos['tipo'] == 'BLACKFRIDAY') {
      	 $banner = '<div class="bnn">Black Friday: '.$content.'</div>';
      }
       if ($atributos['tipo'] == 'PORDEFECTO') {
      	 $banner = '<div class="bnn">Por defecto: '.$content.'</div>';
      }
      return $banner;
  }
  add_shortcode ('bnn-BF','fn_mostrar_banner');

Y para utilizarlo, le pasaremos el parámetro tipo como ya hacíamos antes, pero añadiremos el contenido y la etiqueta de cierre después:

[bnn-BF tipo=»BLACKFRIDAY»] Contentido que sea [/bnn-BF]

Sin duda es una opción a tener en cuenta si queremos mostrar un contenido con un formato en concreto, dando libertad a quien lo utiliza de poder cambiar en cualquier momento el contenido a enseñar.

Tienes más información sobre los shortcodes con parámetros en: https://developer.wordpress.org/plugins/shortcodes/shortcodes-with-parameters/