Qué son los shortcodes de WordPress y cómo crearlos

Si me lees hace tiempo ya debes saber una buena cantidad de «shortcodes» para utilizar en WordPress. Su mayor virtud es que te ahorran mucho tiempo en labores habitualmente repetitivas, y solo por eso merece la pena utilizarlos, e incluso saber como crearlos.

Hay muchos temas actuales que llevan «shortcodes» incluídos, como todos los de Elegant Themes o de WooThemes, pero si tu tema no los incluye no pasa nada, puedes usar todos los shortcodes que hemos aprendido en Ayuda WordPress o, como vamos a ver ahora mismo, crear los tuyos propios, es muy fácil.

¿Qué son los shortcodes de WordPress?

Los shortcodes de WordPress son pequeños códigos que puedes añadir en el editor de WordPress. Se usan para añadir funciones al contenido de tus entradas y páginas sin tener que escribir un script cada vez que necesites hacer esa tarea.

Son como tags HTML que usan corchetes ([ ]) en vez de los símbolos de «mayor y menor qué» (< >). Vamos, algo así:

[shortcode]

Puedes añadir «shortcodes» manualmente mediante un código en tu fichero (functions.php) o plugin de funciones, desde el tema si ya los incluye o desde algunos plugins que te ofrecen «shortcodes» listos para utilizar (un buen ejemplo son los plugins para insertar vídeos, que usan shortcodes del tipo [ video=url_del_video ]

Ventajas de usar shortcodes

La principal es no tener que repetir códigos o tareas habituales en el editor de WordPress. Los shortcodes son grandes ahorradores de tiempo. También facilitan tareas habitualmente tediosas o que requiren mucho tecleo. Puedes usarlos para añadir textos repetitivos, para hacer llamadas a funciones, para aplicar clases CSS, casi para todo.

Desventajas de usar shortcodes

Los shortcodes que tu crees prácticamente no tienen desventajas, no así los que te facilitan temas y plugins. ¿El motivo?, bien sencillo, que crean una dependencia, pues si mañana cambias de tema o plugin y usaste mucho sus shortcodes tendrás que hacer limpieza de esos shortcodes que dejarán de funcionar.

Cómo crear shortcodes en WordPress

Lo primero es elegir el archivo PHP que «acogerá» las funciones de los shortcodes. La elección más habitual es el fichero functions.php del tema activo, que casi todos incluyen, y sino lo creas manualmente. También puedes crear tu propio plugin de funciones, una opción habitualmente más limpia y controlable.

Los dos pasos básicos son estos:

  1. Crea la función primaria PHP
  2. Crea el conector add_shortcode, cuya función es conectar la función primaria PHP a WordPress (creas el shortcode para la función PHP y luego lo insertas en el editor de WordPress para que active esa función)

Como he apuntado, una vez insertes el [shortcode] en tu editor, WordPress se conectará con el archivo functions.php o plugin de funciones y reemplazará de manera automática el shortcode con la función que creaste.

Una vez hayas creado las funciones, sean pocas o muchas, todo lo que tienes que hacer es insertar el shortcode único asociado a cada función cada vez que lo quieras usar en tu editor.

Abrir el archivo de funciones (functions.php) de tu tema, normalmente en /wp-content/themes/tutema/functions.php, o el plugin de funciones y crear la función

Un ejemplo sencillo sería algo así:

function shortcode_gracias() {
return '<p>¡Gracias por leer mi blog!, si te gustó suscríbete al feed RSS</p>';
}
add_shortcode('gracias', 'shortcode_gracias');

Guarda los cambios del archivo de funciones, ya estás listo para usar tu nuevo shortcode.

Pon el nuevo shortcode [gracias] en el lugar que desees de tu editor de WordPress

Una vez guardes los cambios en tu página se vería el resultado de la función «llamada» por el shortcode, viéndose algo así:

¡Gracias por leer mi blog!, si te gustó suscríbete al feed RSS

¡Ya está!, acabas de crear tu primer shortcode tu mismo. Ahora solo te queda experimentar, aprender, y hacer pruebas para personalizar tu WordPress mientras le pierdes el miedo a «tocar código».

Para crecer y aprender más aquí te dejo las referencias obligadas que no debes perderte:

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(40 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

21 comentarios en “Qué son los shortcodes de WordPress y cómo crearlos”

  1. Muy útil. Muchas gracias. Poco a poco iré creando mi propio código, o iré copiando varios plugins de shortcodes en uno solo, para aligerar la carga de la página, y evitar la desventaja que comentas por desinstalar un shortcode de terceros.
    Por cierto, sigo teniendo un problema para que se publiquen mis entradas en el foro (mi usuario es alienigena). Tengo un problema que quisiera que la comunidad me ayudara a resolver, pero no se me publica ningún post en el foro. ¿Podrías echarle un vistazo? Gracias de antemano.

  2. Muy interesane el post. Hasta ahora siempre me manejé con los shortcodes que traen los diferentes temas de WordPress.
    No suelo usar muchos, solo algunos para resaltar alguna información puntual o mejorar la estética de la página.
    Aún no sé si me atrevo a crear mis propios shortcodes.

    Saludos!

  3. Como siempre Fer me encantan tus explicaciones, yo le he puesto a mi tema pero no sabía que se llamaban shortcodes, ji,ji. Solo lo escribí como si fuera una entrada,subí una imagen y luego copié el html al código directamente, gracias y saludos

  4. Muchas gracias por el tutorial, la verdad es que como dices, los shortcodes te hacen la vida más fácil.

    Aunque no sé si lo habré hecho del todo bien. El mensaje que pones en tu ejemplo «¡Gracias por leer mi blog!, si te gustó suscríbete al feed RSS» no me coje la codificación de caracteres de mi tema «utf-8» y se me muestra el mensaje así: «�Gracias por leer mi blog!, si te gust� suscr�bete al feed RSS»

    Sustituyendo esas tildes y demás por código html tipo «&Xacute» no lo procesan los móviles y se ve tal cual está escrito.

    Es raro porque lo que incluyo en las entradas sí que me detecta las tildes y otros caracteres españoles. ¿Conoces alguna forma de que detecte esos caracteres también desde el archivo php que no sea usando «&Xacute»?

    Saludos.

  5. DUDA: Una vez he añadido un shortcode, ¿Hay manera de modificarlo? o tengo que borrarlo y reeditarlo de nuevo? EJEMPLO: inserto un shortcode «cliente» con cinco logos de empresa. Me doy cuenta que falta añadir un sexto logo. Tengo que borrar el shortcode y volver a editarlo de cero, o hay manera de editarlo desde donde lo dejé?

    Gracias!

  6. Yerko Salinas

    Hola!, me encanta tu blog, siempre entro y encuentro un mundo de soluciones por ejemplo ahora que necesitaba ayuda con los shortcode.. ahora tengo una duda si me puedes ayudar.

    tengo una funcion que me trae unos valores de la base de datos por ejemplo nombre, apellido, edad …. asociados a un ID es decir
    id 1 = juan gomez 23 años
    id 2 = ricardo hernandez 40 años

    aqui es donde me pego y no entiendo como armar el shortcode

    add_shortcode(‘ELCODIGOCORTO’,’NOMBRE DE LA FUNCION’);
    (pero y para saber cual es el id para ue me de los datos? eso debo hacerlo cuando llamo el shortcode?
    [ELCODIGOCORTO id=’1′] ?? por ejemplo?

    me ayudarías un montón… más de lo ue ya me haz ayudado

  7. Pingback: manuel.cillero.es | El tema

  8. Pingback: manuel.cillero.es | Eligiendo un tema gráfico para mi sitio

  9. Pingback: Qué son los shortcodes en WordPress y cómo usarlos

  10. Selene de Tracia

    Hola! Me estoy volviendo loca y necesito un poco de ayuda, tengo un blog wordpress instalado en un dominio y hace dos dias cambiamos el template por uno de pago. La cuestion es que teniamos el siguiente shortcode: [button size=”normal” type=”warning” value=”Ticketea” href=”https://www.ticketea.com/entradas-concierto-hardline-strangers/?a_aid=AFFPAP-metalsound&a_bid=af671476″] con el que salía un botón naranja linkeado, pero ahora el shortcode no funciona y sale tal cual en la entrada. Nos gustaria arreglarlo sin tener que cambiar el shortcode en todas las entradas ya que son muchiiiiiiisimas ¿Podriais echarnos un cable por favor? Gracias, un saludo.

  11. Pingback: 5 cosas que debes cambiar en tu web este verano - Blog Interdominios

  12. Pingback: Preservación digital: manteniendo viva la web | Ártica - Centro Cultural Online

  13. Pingback: Cómo diseñar un artículo para que sea leído... ¡entero!

  14. Si quieres crear el shortcode de una función ya existente de algun plugin instalado, puedes insertar este codigo en tu plugin de funciones:

    //Crear shortcode de una función existente en otro plugin
    if ( ! function_exists('nombre_de_funcion') )
    {
    add_shortcode('nombre_de_shortcode', 'nombre_de_funcion');
    }

Deja un comentario

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

 

Ir arriba Ir al contenido