Guía para principiantes para escribir tu propio shortcode personalizado

Los shortcodes son una característica popular incluida en muchos plugins y temas. Sin embargo, si nunca has construido tus propios shortcodes, puede que no tengas ni idea de cómo añadirlos a tus propios proyectos de WordPress.

Afortunadamente, la API de Shortcode de WordPress hace que sea bastante sencillo crear tus propios shortcodes. Hacer esto permitirá a los usuarios aprovechar las características de tu plugin o tema desde cualquier área basada en texto en su sitio de WordPress. Incluir shortcodes en tus proyectos es una forma sencilla de aprovechar las funcionalidades que ya has creado, para que obtengas el máximo beneficio por tu dinero.

En este artículo, hablaremos un poco más sobre cómo funcionan los shortcodes. Luego, te mostraremos lo sencillo que puede ser programar el tuyo propio en tres pasos. Empecemos!

Una introducción a los Shortcodes y a la API de Shortcodes

La API de Shortcodes de WordPress es una herramienta muy útil para los desarrolladores.

Los shortcodes parecen pequeños trozos de texto entre corchetes, como este: . Cada uno representa una ejecución única de código predefinido, que se activa bajo demanda. Puedes utilizarlos en casi cualquier lugar donde se pueda añadir texto en WordPress.

Aunque la mayoría de los shortcodes son añadidos por temas y plugins, el núcleo de WordPress tiene algunos shortcodes por defecto que puedes utilizar. Algunos ejemplos de estos son el audio, la galería y el pie de foto.

Por ejemplo, cuando añades una imagen con un pie de foto, WordPress genera un shortcode particular:

Cuando veas esto en el front end, verás una imagen con un pie de foto:

Afortunadamente, la API de Shortcode hace que sea relativamente sencillo crear shortcodes personalizados para tus propios proyectos de WordPress. Esto suele ser una idea inteligente porque facilita la vida de tus usuarios al permitirles utilizar funcionalidades complejas con sólo unas pocas pulsaciones.

Cómo escribir tu propio shortcode personalizado (en 3 sencillos pasos)

Ahora que entiendes cómo funcionan los shortcodes, ¡aprendamos a añadir uno a tu propio tema o plugin! Por supuesto, lo que haga tu shortcode dependerá de ti. En este ejemplo, usaremos una simple función «¡Hola mundo!» para empezar.

Escribir la función del shortcode

Primero, querrás abrir un nuevo archivo en un editor de texto. A continuación, escribe una función con un nombre único, que ejecutará el código que te gustaría que activara el shortcode:

function torque_hello_world_shortcode() { return 'Hello world!';}

Si usáramos esta función normalmente, devolvería ¡Hola mundo! como una cadena que podría ser emitida en HTML. Esta función también puede tomar parámetros personalizados. Por ejemplo, si quieres que alguien pueda hacer que diga ¡Hola Bob! en su lugar, podrías añadir un parámetro de nombre. Estos parámetros se llaman atributos, y todos ellos se manejan usando un único array predefinido como $atts por WordPress.

Aquí tienes un ejemplo de cómo usar la función $atts del shortcode para manejar adecuadamente los atributos del shortcode en WordPress. Puedes aprender más sobre cómo funciona esto para tus propias necesidades en el códice de WordPress:

function torque_hello_world_shortcode( $atts ) { $a = shortcode_atts( array( 'name' => 'world' ), $atts ); return 'Hello ' . $a . !';}

Esto pone por defecto el atributo name en world si no hay otro nombre disponible. Si se proporciona un nombre, la función lo mostrará en su lugar. Aquí hay un ejemplo de cómo se ejecutaría esto con un shortcode:

// Outputs "Hello world!" // Outputs "Hello Bob!"

Una vez que haya terminado, esto puede ser utilizado a través de cualquier área basada en texto en un sitio de WordPress donde el plugin o tema que contiene este shortcode está instalado.

Guardar el archivo y añadirlo a su proyecto

Una vez que su shortcode está listo, puede crear un nuevo archivo dentro de su tema o plugin personalizado para guardar la función. Un nombre descriptivo te ayudará a encontrar este archivo más adelante (por ejemplo: shortcode-function-hello-world.php).

Ahora, es el momento de informar al resto de tu proyecto sobre este nuevo archivo. Si estás trabajando con un tema, querrás incluirlo en el archivo functions.php. Si estás construyendo un plugin, puedes incluirlo en cualquier archivo ya cargado en el proyecto.

Aquí tienes un ejemplo de cómo cargarías el archivo en un tema usando get_stylesheet_directory(). Asegúrate de editar la ruta de tu archivo para que coincida con la estructura de carpetas dentro de tu tema:

include( get_stylesheet_directory() . 'path/to/shortcode-function-hello-world.php' );

Por otro lado, así es como se ve la carga del archivo en un plugin, usando plugin_dir_url(). De nuevo, edita la ruta de tu archivo para que coincida con la estructura de carpetas de tu plugin:

include( plugin_dir_url( __FILE__ ) . 'path/to/shortcode-function-hello-world.php' );

En este punto, ¡tu función ya está disponible para su uso! Todo lo que queda es registrar activamente el shortcode dentro de WordPress.

Registrar el Shortcode

El último paso es registrar tu nuevo shortcode con la API de Shortcode. Esto se hace con la función add_shortcode. Requiere dos argumentos:

  1. La etiqueta shortcode a utilizar dentro del editor de texto
  2. El nombre de la función que maneja la ejecución del shortcode
  3. Debajo de tu función shortcode, incluye esta línea de código y actualízala para que coincida con tus propios valores:

    add_shortcode( 'helloworld', 'torque_hello_world_shortcode' );

    El primer valor irá dentro de corchetes en el editor de texto. El segundo coincidirá con el nombre de la función que escribiste en los dos pasos anteriores. Ambos deben ser lo suficientemente únicos para que no interfieran con otros shortcodes incluidos por el núcleo de WordPress, los temas o los plugins.

    Una vez que hayas terminado, sólo queda probarlo. Entra en el administrador de WordPress y prueba a añadir tu shortcode a una entrada:

    ¡Eso es todo! Tu shortcode puede ser tan complicado o simple como quieras – ¡lo que decidas construir usando este poder depende de ti! Para situaciones avanzadas en las que te gustaría ajustar la salida para diferentes situaciones, podría valer la pena escribir una clase PHP única para manejar tu nuevo shortcode.

    Conclusión

    Añadir funcionalidad compleja a las entradas y páginas de WordPress es fácil con los shortcodes. Son sencillos de programar y añaden valor a su proyecto existente haciendo que el contenido sencillo sea dinámico.

    En este artículo, ha aprendido que sólo se necesitan tres sencillos pasos para crear un shortcode:

    1. Escribir una función regular que ejecute el código personalizado deseado.
    2. Guardar el código en su plugin o tema de WordPress.
    3. Registrar el shortcode dentro de WordPress.

    .

Deja un comentario