Crear un shortcode en WordPress con parámetros

En este tutorial vamos a crear un shortcode en WordPress con parámetros. Un shortcode es una manera de llamar a una función para evitar poner código en mitad de nuestra page o de nuestra entrada, va entre corchetes [mifuncion].

Cómo crear un shortcode en WordPress

En primer lugar vamos a crear un shortcode sencillo, simplemente queremos guardar un número de productos totales que hay en la web, así, si está puesto el shortcode en varios sitios, solo tengamos que cambiarlo desde la función creada y no página por página.

Para ello, vamos a nuestro functions.php de nuestro tema y ponemos el siguiente código:

function numero_total(){
  return "150";
}
add_shortcode('n_total','numero_total');

¿Fácil verdad? Ahora ya podemos sacar ese dato en nuestros post o páginas utilizando el shortcode con el que lo hemos definido: [n_total]

Bien! Ahora vamos a probar a pasarle parámetros, imagínate que queremos sacar el total de productos, pero queremos que aparezca en un color distinto según donde publiquemos el número total de productos, por ejemplo con distinto color y tamaño.

Crear un shortcode en WordPress con parámetros

La función add_shortcode puede recibir parámetros, lo que  vamos a hacer es definir unos parámetros por defecto, que serán color negro y size 16px.

function numero_total($atts){
  $atts = shortcode_atts ( array (
    'color' => 'black',
    'size' => '16px'
    ), $atts );
  
  $numero = '<span style="color:'.$atts['color'].'; font-size:'.$atts['size'].';">150</span>';
  return $numero;
}
add_shortcode('n_total','numero_total');

Ahora si llamamos a la función usando el siguiente shortcode [n_total] nos aparecerá el número total de productos en color negro y tamaño 16px.

En cambio si le pasamos nuestros parámetros a través del shortcode, usará los que hemos pasado antes que los definidos por defecto, imaginemos que lo queremos en color rojo y en un tamaño de fuente de 25px, tendremos que usar el siguiente shortcode:

[n_total color=’red’ size=’25px’]

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *