Cargando…
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!
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!
tu web es… se nota que no eres diseñador
Muchas gracias por tu comentario constructivo y desde el anonimato 😉
Te invito a ver la sección de proyectos donde encontrarás los más de 50 en los que he trabajado en los últimos dos años.
¡Un saludo!
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!!
Me alegro de que te haya sido de utilidad!
Gracias y perdón por contestar tan tarde pero merecía unas vacaciones 😉
Un saludo!
Si quiero pasar una taxonomia al shorcode con parametros como sería?
Gracias
Hola Marta, no entiendo a qué te refieres. Dime qué quieres decir con "pasar una taxonomía a un shortcode".
Un saludo!
pues que el shortcode me muestre por ejemplo la categoría de los productos de woocommerce o otra que yo pueda crear mas adelante, solo cambiandole el nombre del parámetro
ya lo saque gracias de todas formas
Me suscribo y ¿dónde está la miniguía?
Disculpa Dani, renové la página hace un par de semanas y dejé de lado esta parte.
Puedes descargar la guía desde este enlace:
https://goo.gl/4t36GP
Un saludo!
Excelente!!! no se porque es tan difícil encontrar sitios que pongan ejemplos a la antigua usanza como el tuyo!!! Me refiero a código y código sin enrollarse tanto que es la única forma de aprender!! Sera porque todos aquí quieren venderte su plugin
Solo un comentario.. a mi el shortcode me funciona si le hago una pequeña correccion
el tuyo es:
[autor nombre=”Carlos” color=”red”]
y no cambia los colores a menos que a red le cambie las doble comillas por comillas simple
[autor nombre=”Carlos” color=’red’]
Gracias me sirvió de mucho haber experimentado con código para poder arrancar!!!