Los códigos cortos de WordPress se utilizan para 1) reducir la cantidad de código que necesita escribir; 2) simplificar el uso de complementos, temas y otras funciones de WordPress. Se comportan como macros, cuando inserta un código corto, se reemplaza con un fragmento de código. Podría ser cualquier cosa.

WordPress viene con algunos códigos cortos predefinidos, como y , y también están incluidos con muchos complementos y temas populares. También puede crear sus propios códigos cortos personalizados para hacer cosas como crear columnas en su sitio web de WordPress.

En este post, te guiaremos paso a paso a través del proceso de creación y uso de tus propios códigos cortos personalizados. Le guiaremos a través de todo el proceso de creación de un nuevo código corto y le mostraremos cómo modificar y controlar los atributos y funciones del código corto.

Tenga en cuenta que esta es una publicación más avanzada que entrará en detalles sobre cómo crear códigos cortos. Si trabajar con código está más allá de su experiencia técnica, y solo desea la forma más fácil de comenzar a crear y usar códigos cortos, es posible que desee comenzar con un complemento de código corto.

Al crear sus propios códigos cortos, hay dos cosas que debe hacer:

1. Crear la función de controlador de código corto. Una función de código corto es una función que toma parámetros opcionales (atributos) y devuelve un resultado.
2. Registre la función de controlador de código corto. Utilice la función integrada de WordPress add_shortcut para registrar códigos cortos personalizados.

Preparar WordPress para códigos cortos personalizados

Aunque no es obligatorio, es una buena idea mantener tus códigos cortos personalizados en su propio archivo. Alternativamente, puede agregarlos al archivo functions.php de su tema.

Primero, cree un nuevo archivo llamado custom-shortcodes.php y guárdelo dentro de la misma carpeta que el archivo functions.php de su tema.

Luego, dentro del archivo recién creado, agregue el siguiente bloque de código:

<?php ?>

A continuación, abra el archivo functions.php y agregue la siguiente línea de código:

include('custom-shortcodes.php');

Ya está listo para comenzar a agregar sus códigos cortos personalizados.

Códigos cortos básicos

En este primer ejemplo, vamos a crear un código corto básico de WordPress que inserta el Día de la imagen de avatar Independiente a continuación.

la Creación de la Abreviado

El primer paso es crear el código abreviado de la función. Dentro del archivo custom-shortcodes.php, agregue el siguiente bloque de código:

function dotiavatar_function() { return '<img src="http://dayoftheindie.com/wp-content/uploads/avatar-simple.png" alt="doti-avatar" width="96" height="96" class="left-align" />';}

En el ejemplo de código anterior, la función dotiavatar_function devuelve una imagen predeterminada llamada avatar-simple.png.

El siguiente paso es registrar el código corto con WordPress utilizando la función incorporada add_shortcode. Aún dentro de custom-shortcodes.php, agregue la siguiente línea de código:

add_shortcode('dotiavatar', 'dotiavatar_function');

Cuando registra un código corto utilizando la función add_shortcode, pasa la etiqueta de código corto ($tag) y la función correspondiente ($func)/gancho que ejecutar siempre que se utilice el acceso directo.

En este caso, la etiqueta de acceso directo es dotiavatar y el gancho es dotiavatar_function.

Nota: Al nombrar etiquetas, use solo letras minúsculas y no use guiones bajos; se aceptan guiones bajos.

Usando el código corto

Ahora que tienes el código corto creado y registrado, ¡es hora de probarlo! Siempre que quieras que el avatar DOTI aparezca dentro del contenido de la publicación, puedes usar el código corto:

Códigos cortos con parámetros (Atributos)

En el ejemplo anterior, no había mucho espacio para cambiar las cosas. Digamos que, en lugar de empujar una sola imagen, nos gustaría poder establecer qué imagen usar usando un parámetro. Puede hacerlo agregando algunos atributos ($atts).

una Vez más, dentro de custom-shortcodes.php, agregar otra función, así:

function dotirating_function( $atts = array() ) { // set up default parameters extract(shortcode_atts(array( 'rating' => '5' ), $atts)); return "<img src=\"http://dayoftheindie.com/wp-content/uploads/$rating-star.png\" alt=\"doti-rating\" width=\"130\" height=\"188\" class=\"left-align\" />";}

La función de arriba acepta un único parámetro: rating. Si no se pasa un valor rating, utiliza un valor de cadena predeterminado de 5. Para ello, desenvuelve la matriz de atributos utilizando la función incorporada shortcode_atts y combina los valores predeterminados con los valores que pueden haberse pasado a la función.

No olvides registrar el código corto:

add_shortcode('dotirating', 'dotirating_function');

Con la función de código corto creada y el gancho agregado, el código corto ahora está listo para usarse dentro del contenido de tu publicación:

Alternativamente, puedes omitir el rating, y simplemente vaya con el valor predeterminado:

Y eso es todo! Ahora sabes cómo crear códigos cortos de cierre automático para WordPress. Pero hay otro tipo que puedes crear.

Incluir códigos cortos

Hasta ahora, hemos estado trabajando con códigos cortos de cierre automático. Pero hay otro tipo de código corto: encerrar códigos cortos.

Los códigos cortos adjuntos le permiten usar un formato de estilo BBCode. Es decir, un estilo que se vea así:

content

Los códigos cortos adjuntos son útiles para cuando necesite manipular el contenido incluido. Por ejemplo, supongamos que tiene un estilo particular de botón que usa su sitio web; puede usar el código HTML para generar ese botón/estilo cada vez que necesite usarlo, o puede configurar un código corto de cierre personalizado en su lugar.

Al usar un código corto adjunto, puedes mantener el enfoque en el contenido, en lugar de en el código.

Creando el Código corto

De nuevo, dentro del archivo custom-shortcodes.php, agregue el siguiente bloque de código:

function dotifollow_function( $atts, $content = null ) { return '<a href="https://twitter.com/DayOfTheIndie" target="blank" class="doti-follow">' . $content . '</a>';}

En el bloque de código anterior, el $content = null se utiliza para identificar esta función como un código corto adjunto. Y, dentro de esa función, está envolviendo su contenido ($content) dentro del código HTML.

bien, ahora es el momento de registrar el código corto:

add_shortcode('dotifollow', 'dotifollow_function');

Y eso es todo! Su código está listo para ser utilizado.

Usar el código corto

Usar un código corto de cierre no es muy diferente a usar uno de cierre automático. Al igual que HTML, solo necesita asegurarse de tener una instrucción de apertura y una de cierre:

Follow us on Twitter!

Por supuesto, este es solo un ejemplo básico. También puede agregar parámetros a un código corto de cierre, como lo hace con un código corto de cierre automático.

Dentro de custom-shortcodes.php, agregue una función más:

function dotibutton_function( $atts = array(), $content = null ) { // set up default parameters extract(shortcode_atts(array( 'link' => '#' ), $atts)); return '<a href="'. $link .'" target="blank" class="doti-button">' . $content . '</a>';}

Y luego registre el código corto:

add_shortcode('dotibutton', 'dotibutton_function');

Esta nueva función le permite establecer un enlace para el botón utilizando la siguiente sintaxis:

Shop Now!

Con códigos cortos adjuntos, puede hacer mucho con muy poco código.

Una palabra sobre widgets

De forma predeterminada, los códigos cortos solo se admiten en publicaciones, páginas o tipos de publicaciones personalizadas; no se admiten en widgets de barra lateral. Para agregar soporte para widgets, debe agregar el siguiente código al archivo functions.php:

add_filter( 'widget_text', 'shortcode_unautop' );add_filter( 'widget_text', 'do_shortcode' );

Una vez que lo haga, puede usar códigos cortos en widgets, al igual que en publicaciones/páginas.

Terminar las cosas

Agregar tus propios códigos cortos no requiere mucho esfuerzo, especialmente una vez que entiendes cómo se implementan. Si quieres obtener más información, echa un vistazo al códice de WordPress.