Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Plugins
Code

Cómo Empezar a Usar Shortcodes en WordPress

by
Length:ShortLanguages:

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

Este artículo, te ofrece una explicación detallada sobre la API para los shortcodes de WordPress, a través de él aprenderás a crear un shortcode... de forma correcta. Después mostrará algunos ejemplos útiles sobre el empleo de shortcodes avanzados, ¡y cómo crear tus propias modificaciones sobre los mismos! ¿Preparado para añadir una nueva habilidad a tu paquete de trucos? ¡Empecemos!


¿Qué son los shortcodes?

Los shortcodes fueron introducidos en la versión 2.5 de WordPress. En pocas palabras, un shorcode es un atajo. Son piezas de código específicas en WordPress que permiten ahorrar tiempo y hacer ciertas cosas que de lo contrario requerirían un mayor conocimiento técnico y posiblemente escribir grandes cantidades de código. Añadiendo shortcodes a tus temas o plugins, puedes lograr que su uso sea mucho más fácil e intuitivo. Podrías, por ejemplo, tener un shortcode [most_popular_post] de forma que cuando lo escribas exactamente igual, muestre el post más popular de tu sitio WordPress. Si quisieras hacer lo mismo manualmente, tendrías que escribir algo de código HTML, y además cambiarlo manualmente conforme cambie la popularidad de tus artículos. Un shortcode te evita esta laboriosa tarea, simplificándo por tanto bastante las cosas.

Un shortcode es un código específico de WordPress que te permite hacer cosas ingeniosas con muy poco esfuerzo. Los shortcodes pueden incrustar archivos o crear objetos que normalmente requerirían introducir un montón de código complicado y desagradable en una sola línea.
Shortcode = shortcut.
-WordPress.com


¿Cómo se crean estos códigos cortos o shortcodes?

Los shortcodes se crean utilizando la API para shortcodes de WordPress. La mayoría funcionan de forma similar a como lo hacen los filtros de WordPress. Tienes que definir una función que maneje el análisis del código y que devuelva alguna salida o respuesta. Después tienes que registrar el shortcode mediante la función add_shortcut(). Una función de control de acceso que acepta hasta tres argumentos, los siguientes:

  • $atts: Un array de cualquier atributo del shortcode
  • $content: Cualquier contenido que pueda ser incluído en el shortcode
  • $code: El nombre del shortcode (se usa generalmente cuando se utiliza un mismo controlador para varios shortcodes

Me doy cuenta que esto puede parecer un poco confuso, así que aquí tienes algunos ejemplos que ilustran en qué podrían consistir estos argumentos, usando un shortcode hipotético wptuts.

  • $atts = array()
  • $content = null
  • $atts = array()
  • $content = Lorem ipsum dolor sit amet
  • $atts = array ('id' => '555', 'name' => 'some name')
  • $content = null
  • $atts = array ('id' => '555')
  • $content = Lorem ipsum dolor sit amet

Esto debería darte una idea dobre cómo son enviados los argumentos al controlador del shortcode.

Nota: Los shortcodes se cierran por sí sólos. Por tanto, [wptuts] equivale a [wptuts /]. Sólo necesitas usar etiquetas de shortcode para el inicio y el cierre del código cuando exista contenido intercalado en el medio.


Crea tu primer shortcode

Ahora que ya has aprendido los conceptos básicos sobre la API de los shortcodes, puedes avanzar y crear tu primer shortcode. Yo voy a usar el tema TwentyEleven que viene incluido en WordPress, como verás en las capturas de pantalla del tutorial, pero tú puedes usar el tema que prefieras, o incluso escribir un plugin.

Para comenzar, abre el archivo functions.php del tema y agrega esta línea de código al principio del mismo:

Tu archivo functions.php debería parecerse a esto:

A continuación, crea el archivo que acabas de referenciar, shortcodes.php. Por comodidad, todos nuestros shortcodes estarán en este archivo. Para empezar, creamos un código muy simple que generará un enlace para twittear la URL de la entrada en la que esté ubicado. Crea una función wptuts_first_shortcode() y complétala con este código:

¡Tu primer código ya puede ser usado! Puedes probarlo escribiendo [twitter] en una entrada. Aquí tienes un ejemplo de la salida:


Más Shortcodes

Ahora que has creado un shortcode básico, podemos seguir adelante y crear algunos shortcodes más que usen diferentes argumentos, por ejemplo $atts y $content.

Incrustar un vídeo de YouTube

La incrustación de un shortcode de vídeo de YouTube es muy útil, ya que la incrustación de un vídeo requiere algunos conocimientos de código; con un shortcode, el esfuerzo requerido se reduce significativamente. Además esta técnica puede aplicarse para crear shortcodes que puedan incorporar otros vídeos o incluso otro tipo de medios como puedan ser fotografías o archivos de audio. Pega el siguiente código en shortcodes.php:

Presta atención a lo que estamos haciendo aquí. El código tiene un solo atributo: el ID del vídeo (que puede tomarse de la URL del vídeo en YouTube). La función shortcode_atts() ( funciona de forma bastante parecida a como lo hace wp_parse_args(). Analiza los atributos y utiliza el array especificado como uno de los valores predeterminados. El valor devuelto es un array con todas las claves del primer array, reemplazadas con los valores correspondientes en el array $atts, en caso de que esté presente. Si el contenido entre las etiquetas del shortcode no está vacío, lo mostramos, añade un par de saltos de línea e incrusta el vídeo. ¡Pruébalo! El código que utilicé fue el siguiente:

Aquí tienes el resultado:

Muestra la entrada más reciente del blog

Otro ejemplo de un excelente shortcode es uno que sirve para mostrar el artículo más reciente de nuestro blog. La ventaja del shortcode es que cada vez que se publica una nueva entrada o artículo, no necesitamos realizar ninguna actualización manual. Aquí está el código:

Lo que hacemos es utilizar la función get_posts() para recuperar la entrada más reciente y mostrar su título, su extracto y un enlace a la misma. El shortcode no tiene atributos, pero podrías añadirlos para, por ejemplo, mostrar las entradas de una categoría concreta o mostrar una determinada cantidad de entradas recientes que indique el usuario. Puedes probar el shortcode con este código:

Aquí tienes su aspecto:


Resumiéndolo todo

Hay unas cuantas cosas más que te podrían venir bien mientras profundizas en el desarrollo de shortcodes más avanzados.

  • Eliminar shortcodes: los shortcodes se pueden eliminar con la función remove_shortcode(). Se usa de la siguiente forma remove_shortcode($shorcodename). También puedes quitar todos los shortcodes al mismo tiempo usando la función remove_all_shortcodes()
  • Aplicar un filtro para los shortcodes: Por defecto, WordPress analiza el contenido de la entrada buscando shortcodes y después los aplica. Sin embargo, hay dos casos en los que podrías desear indicarle de forma explícita a WordPress que analice los shortcodes de una cadena. Para ello, es necesaria la función do_shortcode($content). El primer caso es para shortcodes anidados - sencillamente usa do_shortcode en el $content que te ha sido enviado por ejemplo, en lugar de return $content; , usa return do_shortcode($content) . Esto asegurará que se procesen los shortcodes anidados.
    La segunda situación en la que podrías querer esto es cuando quieres escanear contenido que no pertenece a las entradas para buscar los shortcodes que contiene. Por ejemplo, si deseas que el contenido de los widgets sea analizado, puedes simplemente añadir este filtro:

    (fuente: Shortcodes In Widgets)

Espero que hayas aprendido bastante sobre los shortcodes de WordPress. Ahora podrás crear una gran variedad de shortcodes para simplificar y optimizar WordPress, además, los usuarios, tú mismo o tus clientes, ¡te estarán enormemente agradecidos!

¿Quieres Más Shortcodes?

¡Visita nuestra última "Selección de Recursos" con los mejores y más creativos shortcodes existentes en la actualidad!


Advertisement
Advertisement
Advertisement
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.