7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Theme Development

Shortcodes en WordPress: Cómo Usarlos de Forma Correcta

Scroll to top
Read Time: 10 mins

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Una de las razones principales por las qué WordPress es el CMS más popular entre los disponibles es el alto nivel de personalización que proporciona al usuario. Hoy, vamos a repasar el proceso para integrar en nuestro tema una de sus funciones de personalización más popular, los shortcodes, y lo haremos de la forma más sencilla posible.

Tutorial now on Wptuts+Tutorial now on Wptuts+Tutorial now on Wptuts+

Curso Visual Acelerado Sobre Shortcodes


Unas Palabras del Autor

Aunque existen algunos trillones de opciones entre las que optar, WordPress se ha coronado con facilidad como rey de los CMSs y de las plataformas para blogs gracias a su increíble flexibilidad. Los shortcodes o fragmentos cortos de código son una de las características que facilitan el uso de esta plataforma.

Sin embargo, para llevar a cabo la mayoría de sus implementaciones aún tenemos que recordar el código del shortcode que deseemos introducir. Cuando has creado un tema que es una obra maestra, la usabilidad no debería ser un aspecto a descuidar. Te voy a mostrar cómo crear shortcodes e integrarlos después en el propio editor, de forma que el usuario no tenga que ir consultando continuamente la documentación de tu tema cada vez que necesite recordar la sintaxis correcta para incrustar un botón. ¿Intrigado? ¡Empecemos de inmediato!


¿Qué Es Eso Llamado Shortcodes?

Lo que llamamos shortcode forma parte de los fundamentos de WordPress desde el lanzamiento de su versión 2.5. Básicamente, son algo similar a los bbcodes en el habitual software de mensajería: código de marcado ligero utilizado para formatear el contenido.

Aquí, puedes definir códigos propios y personalizados para usar en tu tema. Sin embargo, a diferencia de los BBCodes, los shortcodes se usan principalmente para evitar que el usuario tenga que escribir código de marcado tedioso y que cometa durante su creación posibles errores. Mediante el uso de un shortcode para un botón, por ejemplo, el usuario no tendrá que recordar el complicado código que tendría que introducir para crearlo. En general, constituye una mejora en la usabilidad de tu tema.


Tipos de ShortCodes

Si no estás familiarizado con el concepto BBCode y ni por extensión con los shortcodes, aquí tienes una muestra de su versión más simple:

Si alguna vez has incorporado una galería en WordPress, ¡ya has hecho uso de un shortcode!

Existen dos variantes más, con las que también deberías estar familiarizado.

Implementaremos primero, cada una de estas variantes antes de pasar a otras cosas.

Todas y cada una de las implementaciones de un shortcode requieren de un proceso en dos pasos:

  • 1: Crear el método del controlador primario
  • 2: Enganchar el controlador en WordPress

Independientemente de la complejidad del código, los pasos básicos son los mismos.


Toma 1: Sustituir las Cadenas

Primero aprenderemos la forma de hacer que el código sea lo más simple posible. Como ejemplo, supongamos que terminas cada entrada con algún tipo de firma en forma de texto corriente. El método de copiar y pegar podría ser una solución sencilla, pero puedes acabar sintiéndote como un artesano "ludita". ¡Resolvámoslo con alguna de las habilidades intrínsecas de WP!

A menos que se indique lo contrario, todo el código que viene a continuación debe insertarse en el archivo functions.php

Paso 1: Crear la Función Principal

La función principal se encarga de establecer la base de la lógica de tu código. Tendremos que crearla en primer lugar, antes de proceder con los siguientes pasos.

Paso 2: Engancharla en WordPress

El siguiente paso, como supondrás, consiste en enganchar la función al sistema de WordPress para que asocie el shortcode con este texto. Se logra utilizando el método add_shortcode.

Sí, una sola línea es todo lo que necesitas. El primer parámetro define el shortcode que vas a utilizar en el editor, mientras que el segundo hace referencia a la función que acabamos de crear hace un momento.

Nota: El método add_shortcode siempre viene después del método del controlador.

Sólo con esto ya debería funcionar. Simplemente escribe [signoff] en tu editor y WordPress reemplazará dinámicamente el shortcode por el texto indicado dentro de la función.


Toma 2: Envolver el Contenido

A continuación, vamos a echar un vistazo a otra variante: encerrar cierto contenido dentro de código estructurado o "markup". Tendrías que hacerlo así:

Paso 1: Crear la Función Principal

La función principal tiene que modificarse aquí un poco. Observa que la función recibe dos parámetros: unos atributos a través de la variable de atts y el contenido a través de la variable content.

El siguiente paso consiste simplemente devolver el código de la estructura que contiene el texto seleccionado.

Paso 2: Engancharlo en WordPress

Este paso se mantiene igual:

Me gusta nombrar a mi shortcodes con el mismo nombre que su función primaria, a menos que ésta sea difícil de manejar. Puede que tú tengas tus propios métodos de nomenclatura, así que siéntete libre de cambiar el esquema que yo he propuesto. No existe una "mejor práctica" comúnmente aceptada.


Toma 3: Añadir los Atributos

Por último, vamos a ver también cómo añadir atributos al método de creación de shortcodes. Deberías hacerlo de la siguiente manera: 

Paso 1: Crear la Función Principal

La función principal debe modificarse para poder gestionar todas las nuevas funcionalidades que estamos incorporando. En primer lugar, fusionamos los atributos que enviamos con el shortcode y los atributos que esperamos. Puedes leer más sobre este proceso aquí.

El paso final, como siempre, consiste en devolver el código de marcado que queremos tras haberlo indicado adecuadamente. Aquí, he utilizado los datos enviados con el shortcode para rellenar el atributo href del enlace así como para introducir el contenido.

Paso 2: Engancharlo en WordPress

Este paso se mantiene igual, y sigue siendo esencial. Recuerda, sin esto, WordPress no sabrá qué hacer con el shortcode.


Resumiendo Todo de una Patada

Aquí es donde esperarías que terminase este tutorial, pero no, lo has adivinado mal. Como he mencionado anteriormente, crear shortcodes cuesta un poco, pero disponemos de algunos trucos. Por ejemplo, el usuario tendría que recordar los shortcodes que tiene a su disposición para hacer un uso significativo de los mismos.

Si solo tuvieses un par, sería válido, pero con temas cargados con múltiples funcionalidades, recordar cada uno de los shortcodes se convierte en una tarea árdua. Para solucionarlo, vamos a añadir botones directamente en la interfaz de TinyMCE, de forma que el usuario mediante un simple clic en uno pueda insertar el shortcode asociado al mismo.

Como ejemplo, voy a enseñarte a añadir la segunda variante en el editor. Espero que puedas extrapolar esto a la funcionalidad concreta que tengas en mente.


Paso 1: Engancharlo en WordPress

El primer paso del proceso es engancharlo en WordPress y añadir nuestro código de inicialización. El siguiente fragmento de código se encarga de eso. Recuerda que todo esto tiene que estar en tu archivo functions.php.

Le estamos pidiendo a WordPress que ejecute la función llamada add_button cuando la página se cargue inicialmente. add_action es nuestro hook dentro del funcionamiento interno de WordPress.


Paso 2: Crear Nuestra Función de Inicialización

Este pequeño fragmento de código se ejecutará en cuanto la página se cargue. Arriba, anteriormente, hemos comprobado si el usuario tiene la autorización necesaria para editar una página o un post antes de continuar.

Una vez hecho esto, enganchamos dos de nuestras funciones [aun por escribir] a filtros específicos. Estos dos en concreto los enganchamos en la arquitectura del front end de TinyMCE a través de WordPress. El primero se ejecuta cuando el editor carga los plugins, mientras que el segundo lo hace cuando los botones están a punto de cargarse.

En el ejemplo anterior, hemos procedido independientemente del modo en el que esté el editor. Si deseas mostrarlo sólo cuando el editor esté en modo visual, por ejemplo, necesitarás realizar una verificación rápida. Si get_user_option('rich_editing') es evaluado como true, significa que aparecerá cuando se esté en modo visual. De lo contrario, aparecerá solo cuando estés en modo HTML. Por lo general yo suelo añadir estos botones sólo en el modo visual pero siéntete libre de hacerlo aquí a tu gusto.


Paso 3: Registrar Nuestro Botón

La función simplemente añade nuestro shortcode al array de botones. También puedes añadir un separador entre tu nuevo botón y los botones anteriores insertando antes el carácter "|" (teclas opción + 1, en Mac).


Paso 4: Registrar Nuestro Plugin TinyMCE

El fragmento anterior les permite a TinyMCE y a WordPress saber cómo manejar este botón. Aquí, nosotros dirigimos nuestro shortcode 'quote' hacia un archivo JavaScript específico. Utilizamos el método get_bloginfo para obtener la ruta de la plantilla actual. En aras de una adecuada organización, yo mantengo mi plugin tinyMCE junto con mis otros archivos JS.


Paso 5: Escribir el TinyMCE Plugin

Ahora vamos a por la parte final de nuestra tarea. Recuerda, el siguiente código se inserta en un archivo denominado customcodes.js en el directorio JS de tu tema. Si pensabas que iría en el archivo functions.php como todo el código anterior, ¡no hay galletita de premio para ti!

Parece un poco complejo pero te aseguro que es todo menos eso. Vamos a descomponerlo en una sección más pequeña para que lo podamos analizar más fácilmente.

La primera tarea del día es un cierre rápido para evitar contaminar el espacio de nombres globales. Dentro, invocamos el método create para crear un nuevo plugin pasando el nombre y otros variados atributos. Por abreviar, voy a llamar a mi plugin simplemente quote.  

Una vez dentro, definimos la función init que se ejecutará en la inicialización. ed apunta a la instancia del editor mientras que url apunta a la URL del código del plugin.

La mayoría de los atributos deberían ser suficientemente auto explicativos. Ten en cuenta que la ruta de la imagen que indicas para el botón es relativa a la carpeta principal del archivo JS que contiene el código. En este caso sería el directorio del tema/js.

A continuación, creamos el controlador de eventos para este botón con la función onclick. Lo contenido en la línea esencialmente obtiene el texto seleccionado, si es que existe, y lo envuelve dentro de un shortcode. setContent y getContent son métodos auxiliares proporcionados por tinyMCE para manipular el texto seleccionado.

Por último, en la última línea, agregamos el plugin recién creado al gestor del plugin tinyMCE. Presta atención a los nombres que utilizas en cada paso. Es un paso propenso a errores si no prestas atención. ¡Y eso es todo! ¡Hemos terminado! Carga el editor y asegúrate de que tu flamante nuevo botón esté funcionando correctamente.

Tutorial ImageTutorial ImageTutorial Image

Conclusión

Y ahí lo tienes. Hemos integrado con éxito los shorcodes en un tema para WordPress de una manera muy fácil. Ójala hayas encontrado este tutorial de ayuda. No dudes en volver a utilizar este código en tus proyectos e indícanos en la sección de comentarios si necesitas cualquier ayuda.

¿Alguna duda? ¿Algo interesante a señalar? ¿Alguna observación o crítica? Dirígete a la sección de comentarios y cuéntame. ¡Disfruta creando el código y muchas gracias haber seguido la lectura!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.