Tutorial completo de WordPress Shortcodes: Creación, uso y personalización (con ejemplos de botones y galerías)

Utilizar códigos cortos(Shortcode), puede incrustar fácilmente funcionalidades complejas como formularios, galerías, botones y contenido dinámico sin tener que escribir montones de HTMLyCSS tal vez PHP códigos. Por eso, los códigos cortos se han convertido en una poderosa herramienta fácil de usar incluso para los principiantes.

En este artículo se detalla cómo crear, utilizar yPersonalización de WordPress Códigos cortos que le ayudarán a agilizar su flujo de trabajo y mejorar la interactividad y funcionalidad de su sitio web.

¿Qué es un shortcode de WordPress?

código cortoes un corchete ([ ]) es un breve fragmento de código que rodea el contenido de WordPress en el directorioInserción de funciones específicas. Ejemplo:

[gallery ids="1,2,3"]
[gallery ids="1,2,3"]
[gallery ids="1,2,3"]

Este shortcode le dice a WordPress que muestre una galería en el front end conteniendo imágenes con IDs 1, 2, y 3. El shortcode hace que una tarea compleja sea sencilla e intuitiva al simplificar el proceso de inserción del código.

Los códigos cortos tienen muchas ventajas, entre ellas

• sencillez: No es necesario escribir complejos HTML, CSS o JavaScript, el código corto es simple y fácil de entender.
• destrezaLos Shortcodes se pueden usar en páginas, entradas, widgets e incluso en tipos de entradas personalizados.
• ReutilizableDespués de crear un shortcode una vez, se puede utilizar varias veces en diferentes lugares en el sitio.
• Fácil de gestionarEl uso de shortcodes mantiene las páginas y los posts limpios y ordenados, sin necesidad de incrustar código complejo directamente.

Cómo crear códigos cortos en WordPress

Paso 1: Acceda al archivo functions.php

El primer paso para crear un shortcode es abrir el archivo funciones.php Fichero. Este archivo es dondeAñadir funciones y código personalizados al temacuando desee añadir una funcionalidad personalizada a su sitio web, como crear un shortcode personalizado para mostrar un contenido o una funcionalidad específicos, la función funciones.php para añadir el código.

Siga los pasos que se indican a continuación:

1. Inicie sesión en el panel de control de WordPress.
2. cambiar a Apariencia > Editor de temas.
3. En la parte derecha, busque y abra la carpeta funciones.php Documentación.

Paso 2: Definir funciones de código corto

En el corazón del shortcode están las funciones PHP que usted crea. A continuación se muestra un sencillo ejemplo de shortcode que mostrará un mensaje, "¡Hola, mundo!" en una página:

function hola_mundo_shortcode() {<br>    return '¡Hola, mundo!<br>}<br>
function hola_mundo_shortcode() {<br>    return '¡Hola, mundo!<br>}<br>
function hola_mundo_shortcode() {
    return '¡Hola, mundo!
}

Este código define una función PHP sencilla hello_world_shortcodeque devolverá una cadena: "¡Hola, mundo!".

Paso 3: Registrar un código corto

Después de crear la función shortcode, el siguiente paso es registrarla con WordPress. Esto se puede hacer usando la función add_shortcode() para registrar el código corto y especificar un nombre y la función correspondiente. Ejemplo:

add_shortcode('hola_mundo', 'hola_mundo_shortcode');<br>
add_shortcode('hola_mundo', 'hola_mundo_shortcode');<br>
add_shortcode('hola_mundo', 'hola_mundo_shortcode');

Esta línea de código registra un código corto [hola_mundo]Cuando se inserta en una página o entrada, WordPress llama a la función hello_world_shortcode() y muestra lo que devuelve la función.

Paso 4: Probar el código corto

Después de completar la creación y el registro del shortcode, puede probarlo.

A continuación se muestra el código completo que reúne todo el proceso:

// Definir la función shortcode
function hola_mundo_shortcode() {
    return '¡Hola, Mundo!
}
// Registrar el shortcode
add_shortcode('hola_mundo', 'hola_mundo_shortcode');
// Definir la función shortcode
function hola_mundo_shortcode() {
    return '¡Hola, Mundo!
}

// Registrar el shortcode
add_shortcode('hola_mundo', 'hola_mundo_shortcode');
// Definir la función shortcode
function hola_mundo_shortcode() {
    return '¡Hola, Mundo!
}

// Registrar el shortcode
add_shortcode('hola_mundo', 'hola_mundo_shortcode');

Insertar en página o post [hola_mundo]Luego mira la página del front-end. Debería mostrar "¡Hola, mundo!".

Si no está en funciones.php y en la página del front-end debería aparecer el archivo[hola_mundo]

Crear más códigos cortos personalizados

Ejemplo 1: Creación de un código corto de botón

botoneses una parte clave de la interacción en un sitio web y puede utilizarse para la llamada a la acción (CTA) y la navegación. Podemos crear un simple botón personalizado con un código corto:

function custom_button_shortcode($atts) {<br>    $atts = shortcode_atts(<br>        array(<br>            'text' => 'Hazme clic',<br>            url' => '#'.<br>        ), $atts<br>    );<br><br>    return '<a href="/es/' . esc_url($atts['url']) . '/" class="custom-button" style="padding: 10px 20px;background-color: #0073aa;color: blanco;text-decoration: none">' . esc_html($atts['text']) . '</a>';<br>}<br><br>add_shortcode('custom_button', 'custom_button_shortcode');<br>
function custom_button_shortcode($atts) {<br>    $atts = shortcode_atts(<br>        array(<br>            'text' => 'Hazme clic',<br>            url' => '#'.<br>        ), $atts<br>    );<br><br>    return '<a href="/es/' . esc_url($atts['url']) . '/" class="custom-button" style="padding: 10px 20px;background-color: #0073aa;color: blanco;text-decoration: none">' . esc_html($atts['text']) . '</a>';<br>}<br><br>add_shortcode('custom_button', 'custom_button_shortcode');<br>
function custom_button_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'text' => 'Hazme clic',
            url' => '#'.
        ), $atts
    );

    return '' . esc_html($atts['text']) . '';
}

add_shortcode('custom_button', 'custom_button_shortcode');

En este ejemplo, se define un código corto [custom_button]que recibe dos argumentos:texto(texto del botón) y url(dirección del enlace).

Por ejemplo, puedes usarlo así:

[custom_button text="Más información" url="https://example.com"]<br>
[custom_button text="Más información" url="https://example.com"]<br>
[custom_button text="Más información" url="https://example.com"]

Esto genera unazul (color)que, al pulsarlo, salta a la URL especificada.

Ejemplo 2: Creación de un código corto de galería

Crear unGalería ShortcodeTambién es muy sencillo. Especificando la imagen IDWordPress genera automáticamente una galería:

function custom_gallery_shortcode($atts) {<br>    $atts = shortcode_atts(<br>        array(<br>            'ids' => ''<br>        ), $atts<br>    );<br><br>    $ids = explode(',', $atts['ids']);<br>    $output = '<div class="custom-gallery">';<br><br>    foreach ($ids as $id) {<br>        $image = wp_get_attachment_image_src($id, 'medium');<br>        $output . = '<img src="' . esc_url($image[0]) . '" class="gallery-image">';<br>    }<br><br>    $output . = '</div>';<br>    return $output.<br>}<br><br>add_shortcode('custom_gallery', 'custom_gallery_shortcode');<br>
function custom_gallery_shortcode($atts) {<br>    $atts = shortcode_atts(<br>        array(<br>            'ids' => ''<br>        ), $atts<br>    );<br><br>    $ids = explode(',', $atts['ids']);<br>    $output = '<div class="custom-gallery">';<br><br>    foreach ($ids as $id) {<br>        $image = wp_get_attachment_image_src($id, 'medium');<br>        $output . = '<img src="' . esc_url($image[0]) . '" class="gallery-image">';<br>    }<br><br>    $output . = '</div>';<br>    return $output.<br>}<br><br>add_shortcode('custom_gallery', 'custom_gallery_shortcode');<br>
function custom_gallery_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'ids' => ''
        ), $atts
    );

    $ids = explode(',', $atts['ids']);
    $output = '
';

    foreach ($ids as $id) {
        $image = wp_get_attachment_image_src($id, 'medium');
        $output . = '';
    }

    $output . = '
';
    return $output.
}

add_shortcode('custom_gallery', 'custom_gallery_shortcode');

Crear un [custom_gallery] código corto que acepta ids puede introducir varios ID de imagen para generar la galería. Por ejemplo:

[custom_gallery ids="1,2,3"]<br>
[custom_gallery ids="1,2,3"]<br>
[custom_gallery ids="1,2,3"]

Esto mostrará imágenes con IDs 1, 2 y 3 en la página.

Cómo usar códigos cortos en páginas y entradas de WordPress

Método 1: Utilizar el editor clásico

Si utiliza WordPress Editor clásicoBasta con insertar el código corto directamente en el cuadro de texto del editor.

Ejemplo:

[custom_button text="Comprar ahora" url="https://yourlink.com"]<br>
[custom_button text="Comprar ahora" url="https://yourlink.com"]<br>
[custom_button text="Comprar ahora" url="https://yourlink.com"]

Tras actualizar o publicar una página, el shortcode se procesa en el front-end para mostrar el contenido apropiado.

Método 2: Uso del editor de bloques de Gutenberg

existe Editor GutenbergPuede utilizar el código especial "código corto"para insertar el código corto. El procedimiento es el siguiente:

1. Abra el editor de páginas o entradas.
2. golpe (en el teclado) + para añadir un nuevo bloque.
3. Buscar y seleccionar Código corto Bloques.

4. Introduzca su código corto en el bloque de código corto, por ejemplo:

[custom_button text="Regístrate" url="https://yourlink.com"]<br>
[custom_button text="Regístrate" url="https://yourlink.com"]<br>
[custom_button text="Regístrate" url="https://yourlink.com"]

A continuación, guarde o actualice el contenido y el shortcode mostrará la salida en el front-end.

Método 3: Utilizar el editor de páginas

Muchos editores de páginas populares como Elementor responder cantando WPBakeryproporciona widgets o módulos para insertar códigos cortos. Basta con pegar el shortcode en el widget correspondiente y el constructor mostrará su efecto en tiempo real.

Cómo utilizar códigos cortos en los widgets de WordPress

También puede utilizar el shortcode paraÁrea de widgets(por ejemplouna barra lateral (en software)ypies de página(etc.). Estos son los pasos:

1. En el cuadro de mandos, vaya a Apariencia > Widgets.
2. comandante en jefe (militar) Widget de texto Arrastre y suelte en la zona del widget donde desea que se muestre el shortcode.

3. Introduzca un código corto en el área de texto, por ejemplo:

[custom_button text="Contacte con nosotros" url="https://yourlink.com"]<br>
[custom_button text="Contacte con nosotros" url="https://yourlink.com"]<br>
[custom_button text="Contacte con nosotros" url="https://yourlink.com"]

Guardar y ver el sitio y el código corto se mostrará como un botón en el área de widgets.

Simplifique el proceso con un generador de códigos cortos

Para los usuarios que no estén familiarizados con la escritura de código, la funciónGenerador de códigos cortoses una herramienta muy útil. Con estas herramientas, es sencillo generar códigos cortos utilizando formularios sin tener que escribir el código manualmente. Los plugins generadores de shortcodes más populares son:

• Shortcodes Ultimate: Se proporciona una completa biblioteca de códigos cortos que admite deslizadores, acordeones y muchas otras funciones.
• MyThemeShop WP Shortcode: Proporciona generadores de shortcodes fáciles de usar para botones, pestañas, columnas y mucho más.
• Shortcoder: Los usuarios más avanzados pueden crear códigos cortos personalizados.

Con estos plugins, puede generar rápidamente códigos cortos e insertarlos en el contenido de WordPress, ahorrándole la molestia de escribir códigos complejos.

Resumen:

Los códigos cortos en WordPress le ayudan a insertar fácilmente funciones complejas como botones, galerías y contenido dinámico en sus páginas, entradas o widgets sin tener que escribir mucho código. Simplemente [shortcode] sintaxis, puede reutilizar estas funciones en distintos lugares para mejorar la eficacia y la capacidad de mantenimiento de su sitio web. Este artículo explica en detalle cómo puede reutilizar estas funciones en WordPress' funciones.php Creación y registro de shortcodes en archivos, con ejemplos prácticos de shortcodes de botones y galerías. También se describen formas de utilizar shortcodes en el editor clásico, el editor de bloques de Gutenberg y los widgets para ayudarte a agilizar tu flujo de trabajo.