Ahorra tiempo aprendiendo a crear shortcodes en 2 pasos

Estoy de reformas con la web para adaptarla a lo que busco, así que voy creando una cosa por aquí y otra por allá. Ayer hice una tarea que tenía pendiente y que prefería evitar hacer con plugins de terceros: el sistema de suscripción al blog. Cuando hago algo me gusta liarme y llevarlo a otro nivel, así que decidí crear un shortcode para añadir el widget de suscripción donde quisiera. Pensé que podía ser interesante hacer un tutorial, y aquí estamos.

Cómo se crea un shortcode en WordPress

En estos casos lo mejor que podemos hacer es echar un vistazo al Codex para guiarnos, generalmente está bastante bien explicado aunque trataré de hacerlo más fácil.

En primer lugar hay que tener claro qué es un shortcode. No es más que una forma de llamar a una función con el fin de evitar tener que insertar código en mitad de un post o página. Seguro que los has utilizado más de una vez, te sonarán por [ contact-form ], [ gallery ] y demás.

El ahorro de tiempo es considerable, por lo que si es algo que repetimos (por ejemplo un botón con distintos estilos) nos vendrá bien de cara a escribir nuevas entradas. También tiene su desventaja puesto que crea una dependencia y, en el caso de cambiar de template, tendrás que arrastrar el código que has generado previamente a la nueva plantilla (por ponerle alguna pega…).

Entrando en materia

Vamos a crear un shortcode muy sencillo que nos mostrará un texto determinado. Creamos la función (ya sabes, en functions.php de tu Tema Hijo) y añadimos el shortcode! Algo así:

function mi_texto(){
   return "Así es mi texto de ejemplo!";
}
add_shortcode('ejemplo','mi_texto');

Así de fácil, sí! Ahora podemos crear una entrada en nuestro blog y utilizar [ejemplo] donde queramos. ¿El resultado? Imprimirá “Así es mi texto de ejemplo!” donde tú quieras. Ya, ya sé que es muy sencillo y algo inútil, ahora vamos con algo más complicado, que sé que te gusta 😉

add_shortcode es la función que se encarga de darle nombre al shortcode. Le pasamos dos parámetros: $tag, que será la etiqueta que utilicemos para llamarle (ejemplo); $func, la función a la que llamará.

Cómo crear un shortcode con parámetros en WordPress

Pongamos, por ejemplo, que el texto que hemos añadido a la función queremos poder personalizarlo, añadiéndole color y el nombre del autor. No me enrollo, vamos con el código:

function nombre_autor($atts){
$p = shortcode_atts( array (
  'nombre' => 'Invitado',
  'color' => 'blue'
  ), $atts );
$texto = 'Este artículo ha sido creado por <span style="color:'.$p['color'].'">'.$p['nombre'].'</span>.';
return $texto;
}
add_shortcode('autor','nombre_autor');

Ya tenemos nuestro shortcode preparado para ponerlo donde queramos. ¿Qué mostrará? Depende de los parámetros que le pasemos. Si le pasamos [autor nombre=”Carlos” color=”red”] imprimirá el texto añadiendo “Carlos” en color rojo.

¿Y qué pasa si no le damos ningún valor y ponemos únicamente [autor]? Tomará los valores por defecto que hemos definido al principio del array: Invitado para nombre y blue para color. De esta manera, si sólo queremos cambiar el nombre bastará con poner [autor nombre=”Carlos”].

Es un ejemplo muy sencillo pero que servirá para que entiendas cómo funcionan y te atrevas a practicar.

Cosas a tener en cuenta

Hay una serie de puntos que debes tener en cuenta a la hora de crear un shortcode.

  • Al igual que los filtros, los shortcodes deben utilizar return, no utilices echo ni cualquier otra forma similar o puede que se te inserte al comienzo de la entrada! (o a saber dónde)
  • Si llamas al shortcode añadiendo parámetros inexistentes los ignorará
  • Ten cuidado con el nombre del shortcode, algunos plugins pueden utilizar uno igual y… ¡buf!

Para terminar, te dejo algo para que practiques

¿Y si lo que quieres es crear un shortcode en el que puedas poner contenido entre medias? Digamos… [info]Mi texto de ejemplo[/info]. Podrás dar formato a textos como cuando he definido la función add_shortcode más arriba.

¡Te animo a practicarlo por tu cuenta! Si finalmente quieres comprobar cómo se hace te dejo una miniguía con el ejercicio resuelto, un caso práctico que he hecho para mi blog. Sólo tienes que suscribirte al blog para poder descargarla.

Si te ha sido útil o tienes cualquier duda deja un comentario y te ayudaré a resolverla, se agradece cualquier feedback!

Comentarios

  • Miguel dice:

    a ver.. he visto este post, he entrado en tu web buscando informacion sobre los short codes,,
    Jajajajajja.. no se de que hablas.. primero me presento.. yo no tengo asoluta idea de informatica hasta el punto que hasta hace pocos meses ni sabia lo que es un servidor un theme o un pluggin
    tuve una idea contrate a un disenyador, me dejo tirado ,, y empeze a leer y a hacer mi web,,,www.kualify.es
    el problema vino con el woocommerce, que al subir los productos no hace distincion de categorias,, y los mezcla todos, me puse n contacto con eleganth themes.. y estos me contestan con un link de woocommerce.com .. y que instale short codes,,
    esto parece a html.. hay que saberse todos los short codes? PArece ser que te da posibilidades de modificar la web.,.pero no etoy seguro de como aprender esto,,Hay cursos cocnretos para profundicar en esto? llegue a tu web prcisamente buscando cursos.. al no saber programacion, se hace dificil. aun asi me he echo una idea con tu post de que son y para que sirven
    saludos..

    • Hola Miguel!

      Es normal que la gente de elegantthemes te redirijan hacia WooCommerce, ya que no es un tema que les corresponda solucionar a ellos.

      En cuanto a este artículo, no creo que sea lo que necesites, ya que aquí explico cómo crear shortcodes. No son más que "atajos" para hacer las cosas más fáciles. Cierto es que algunos temas incluyen lo que podríamos llamar "módulos" que se insertan mediante shortcodes, aunque generalmente se añaden con sistemas de drag&drop (para que me entiendas, de forma gráfica e intuitiva sin necesidad de escribir código).

      Para conocer los shortcodes que tiene disponible tu plantilla tendrás que consultar la documentación, en la que normalmente se explica. O quizá en la versión demo de la misma puedas ver un listado y su función.

      Creo que lo que necesitarás para trabajar en tu web es un tutorial o mini curso de WooCommerce. No te puedo recomendar ninguno en concreto pero seguro que buscando en google encontrarás un montón.

      Ya veo que tienes la web a medias, para la próxima vez asegúrate de contratar a un buen profesional 🙂

      Un saludo y gracias por pasarte a comentar!

  • babyphp_Martí dice:

    Estoy iniciándome en las entrañas de wordpress, ahora estoy con mi primer plugin (para mí). Me ha ido de perlas tu artículo para poner un formulario personalizado en varios sitios de la web sin pagar!

    Te felicito! Súper bien explicado y sobre todo resumido!!

  • marta dice:

    Si quiero pasar una taxonomia al shorcode con parametros como sería?
    Gracias

  • Dani dice:

    Me suscribo y ¿dónde está la miniguía?

Deja un comentario

¿Quieres recibir las últimas novedades en tu e-mail?

¡GRACIAS!