✅Acordeones con Shortcodes en WordPress (Sin Plugins)

Imagina poder organizar y presentar tu contenido en WordPress de manera atractiva, sin la necesidad de instalar complicados plugins. En este artículo, descubrirás cómo aprovechar la potencia de los acordeones infinitos utilizando shortcodes en WordPress, proporcionándote una forma sencilla y eficaz de mejorar la experiencia del usuario en tu sitio web.

La Magia de los Acordeones

Los acordeones son una excelente herramienta para estructurar la información de manera clara y concisa. Su capacidad para mostrar y ocultar contenido con solo un clic los convierte en un recurso valioso para organizar secciones extensas de información. Tradicionalmente, lograr esta funcionalidad requeriría la instalación de plugins adicionales, pero ¿qué pasa si te dijera que puedes lograrlo sin añadir peso innecesario a tu sitio?

El Poder de los Shortcodes

En el mundo de WordPress, los shortcodes son pequeñas porciones de código que te permiten realizar funciones específicas con solo insertar una línea en el editor. Sin necesidad de conocimientos técnicos avanzados, puedes agregar características atractivas y funcionales a tu contenido. En este caso, nos centraremos en la creación de acordeones sin la necesidad de depender de plugins adicionales.

Código Claro y Conciso

El código que comparto aquí es una joya en sí mismo. Sin entrar en detalles técnicos abrumadores, permíteme explicarte cómo funciona y por qué es tan poderoso.

El Contenedor Acordeón:

[acordeon_personalizado]

    [pestana_acordeon_personalizado titulo="Pestaña 1"]

        Contenido de la pestaña 1

    [/pestana_acordeon_personalizado]

    [pestana_acordeon_personalizado titulo="Pestaña 2"]

        Contenido de la pestaña 2

    [/pestana_acordeon_personalizado]

    [pestana_acordeon_personalizado titulo="Pestaña 3"]

        Contenido de la pestaña 3

    [/pestana_acordeon_personalizado]

    [pestana_acordeon_personalizado titulo="Pestaña 4"]

        Contenido de la pestaña 4

    [/pestana_acordeon_personalizado]

    [pestana_acordeon_personalizado titulo="Pestaña 5"]

        Contenido de la pestaña 5

    [/pestana_acordeon_personalizado]

[/acordeon_personalizado]
Lenguaje del código: CSS (css)

Este shortcode simple crea un contenedor de acordeón. Puedes personalizar fácilmente el título y el contenido de cada pestaña. No es necesario instalar plugins adicionales ni depender de códigos complicados.

Por Qué Es Importante

1. Peso Ligero:
   • A diferencia de los plugins que pueden ralentizar tu sitio, este método utiliza código eficiente y liviano. Tu sitio se mantiene rápido y ágil.
2. Personalización Total:
   • Tienes control total sobre el diseño y el contenido de cada pestaña. Sin restricciones impuestas por plugins.
3. Sin Conflictos:
   • Al evitar la instalación de plugins, reduces el riesgo de conflictos y problemas de compatibilidad.
4. Experiencia del Usuario:
   • Los acordeones proporcionan una navegación intuitiva, mejorando la experiencia del usuario y manteniendo a tus visitantes comprometidos.

Cómo Utilizarlo en Tu Sitio

1. Copia y Pega:
   • Simplemente copia el código proporcionado y pégalos en tus páginas o entradas de WordPress donde desees agregar un acordeón.
2. Personaliza a Tu Gusto:
   • Modifica los títulos y el contenido de las pestañas según tus necesidades. La simplicidad del código te permite personalizar sin complicaciones.
3. Disfruta de la Versatilidad:
   • Ahora tienes acordeones ilimitados a tu disposición. Expande tu creatividad y utiliza esta funcionalidad de manera efectiva en diferentes secciones de tu sitio.

Al aprovechar shortcodes y código limpio, has desbloqueado la capacidad de crear acordeones infinitos en WordPress sin depender de plugins externos. Este enfoque liviano y personalizable te permite mantener el control total sobre la apariencia y funcionalidad de tu sitio web.

El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS. (Copia a partir de la línea 6).

<?php




function cargar_jquery() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'cargar_jquery');

// Shortcode para el acordeón
function acordeon_personalizado_shortcode($atts, $content = null) {
    ob_start(); ?>

    <style>
        .acordeon-personalizado {
            width: 100%;
        }

        .pestana-acordeon {
            border: 1px solid #ccc;
            margin-bottom: 10px;
        }

        .titulo-pestana {
            padding: 10px;
            background-color: #f2f2f2;
            cursor: pointer;
            position: relative;
            padding-left: 50px;
        }

        .contenido-pestana {
            display: none;
            padding: 10px;
        }

        .icono-toggle {
            position: absolute;
            top: 50%;
            left: 10px;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            background: url('https://listinghive.instawp.xyz/wp-content/uploads/2023/12/icons8-plus-50-1.png') center center no-repeat;
            background-size: contain;
        }
    </style>

    <div class="acordeon-personalizado">
        <?php echo do_shortcode($content); ?>
    </div>

    <script>
        jQuery(document).ready(function ($) {
            $('.titulo-pestana').click(function () {
                var pestana = $(this).closest('.pestana-acordeon');

                // Si la pestaña está abierta, ciérrala. Si está cerrada, ábrela.
                $('.contenido-pestana', pestana).slideToggle();

                // Cierra otras pestañas abiertas
                $('.pestana-acordeon').not(pestana).find('.contenido-pestana').slideUp();
            });
        });
    </script>

    <?php return ob_get_clean();
}
add_shortcode('acordeon_personalizado', 'acordeon_personalizado_shortcode');

// Shortcode para las pestañas del acordeón
function pestana_acordeon_personalizado_shortcode($atts, $content = null) {
    extract(shortcode_atts(array(
        'titulo' => 'Título de la Pestaña',
    ), $atts));

    ob_start(); ?>

    <div class="pestana-acordeon">
        <div class="titulo-pestana"><?php echo esc_html($titulo); ?><span class="icono-toggle"></span></div>
        <div class="contenido-pestana"><?php echo do_shortcode($content); ?></div>
    </div>

    <?php return ob_get_clean();
}
add_shortcode('pestana_acordeon_personalizado', 'pestana_acordeon_personalizado_shortcode');
Lenguaje del código: HTML, XML (xml)

Entendiendo el Código

Cargar jQuery:

1. Función cargar_jquery()
   • Esta función de WordPress se encarga de cargar la biblioteca jQuery para su uso en la página.
   • Utiliza wp_enqueue_script('jquery') para agregar el script de jQuery a la cola de scripts.

Estilos y Estructura HTML para el Acordeón Personalizado:

2. Función acordeon_personalizado_shortcode($atts, $content = null)
   • Define un shortcode para crear un acordeón personalizado con pestañas y contenido.
   • Incluye estilos CSS para la apariencia del acordeón.
   • Crea un contenedor con la clase acordeon-personalizado.
   • Utiliza do_shortcode($content) para procesar y colocar el contenido del shortcode dentro del contenedor.

Script jQuery para el Acordeón:

3. Script jQuery
   • Este script se ejecuta al cargar completamente el documento HTML.
   • Asigna un controlador de eventos al hacer clic en elementos con la clase titulo-pestana.
   • Implementa la funcionalidad del acordeón:
     • Encuentra el contenedor de la pestaña actual.
     • Alterna la visibilidad del contenido de la pestaña actual.
     • Cierra cualquier otra pestaña abierta.

Shortcode para las Pestañas del Acordeón:

4. Función pestana_acordeon_personalizado_shortcode($atts, $content = null)
   • Define un shortcode para crear pestañas individuales dentro del acordeón personalizado.
   • Permite personalizar el título de la pestaña mediante el parámetro titulo.
   • Estructura HTML de cada pestaña:
     • Con clase pestana-acordeon.
     • Contiene un título con clase titulo-pestana y un icono de alternancia (icono-toggle).
     • El contenido de la pestaña se procesa mediante do_shortcode y se coloca dentro de un contenedor con clase contenido-pestana.

En resumen, este conjunto de funciones y scripts en WordPress facilita la creación de un acordeón personalizado con pestañas, estilos y funcionalidad interactiva utilizando jQuery. El shortcode acordeon_personalizado crea el contenedor principal del acordeón, mientras que el shortcode pestana_acordeon_personalizado se utiliza para definir las pestañas individuales.

Nos vemos en el siguiente tutorial.

Un saludo.