✅Flip Box en WordPress (Sin Plugins)

Este código ayuda a agregar cajas giratorias a un sitio web de WordPress. Las cajas giratorias son como tarjetas que pueden mostrar información diferente en ambos lados, y este código las hace fáciles de incluir.

Lo que hace el código:

1. Cajas Giratorias Interactivas:
   • Permite incorporar cajas que cambian de contenido al girar, brindando una presentación visualmente atractiva.
2. Personalización Sencilla:
   • Ofrece un método simple (usando el shortcode [flip_box]) para personalizar la imagen, texto y otros detalles en ambos lados de la caja giratoria.
3. Estilos Mejorados:
   • Añade estilos especiales para que las cajas tengan una apariencia más atractiva y animada al interactuar con ellas.

Posibles Usos:

1. Destacar Productos:
   • Ideal para resaltar características clave de productos en un formato visualmente agradable.
2. Invitar a la Interacción:
   • Perfecto para crear secciones interactivas donde los usuarios pueden hacer clic para obtener más información.
3. Presentar Contenido Dual:
   • Útil cuando se desea mostrar dos perspectivas diferentes sobre un tema en un mismo espacio.

En resumen, este código hace que sea fácil agregar cajas giratorias a un sitio web de WordPress, mejorando la presentación de la información de manera interactiva y llamativa.

El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.

<?php

function flip_box_shortcode($atts, $content = null) {
    // Obtener los atributos del shortcode
    $atts = shortcode_atts(
        array(
            'front_image' => '',
            'front_button_text' => 'Ver más',
            'back_text' => '',
        ),
        $atts,
        'flip_box'
    );

    // Generar el HTML del flip box
    $output = '
        <div class="caja-giratoria">
            <div class="caja-giratoria-interna">
                <div class="frente-caja-giratoria">
                    <div class="contenido-frontal">
                        <img src="' . esc_url($atts['front_image']) . '" alt="Imagen Frontal">
                        <button class="ver-mas">' . esc_html($atts['front_button_text']) . '</button>
                    </div>
                </div>
                <div class="parte-trasera-caja-giratoria">
                    <div class="contenido-trasero">
                        <p>' . do_shortcode(wp_kses_post($atts['back_text'])) . '</p>
                    </div>
                </div>
            </div>
        </div>
    ';

    return $output;
}


// Registrar el shortcode
add_shortcode('flip_box', 'flip_box_shortcode');

function flip_box_styles() {
    echo '
        <style>
            .caja-giratoria {
                perspective: 1000px;
                width: 100%; 
                max-width: 500px; 
                margin: 20px auto; 
            }

            .caja-giratoria-interna {
                display: flex;
                height: 100%;
                width: 100%;
                transform-style: preserve-3d;
                transition: transform 0.6s;
            }

            .caja-giratoria:hover .caja-giratoria-interna {
                transform: rotateY(180deg);
            }

            .frente-caja-giratoria,
            .parte-trasera-caja-giratoria {
                flex: 1;
                width: 100%;
                height: 100%;
                position: absolute;
                backface-visibility: hidden;
            }

            /* Estilos específicos del contenido frontal */
            .frente-caja-giratoria {
                display: flex;
                flex-direction: column;
                background-color: #ffffff;
                align-items: center;
                justify-content: center;
                position: relative;
            }

            .contenido-frontal {
                text-align: center;
                flex: 1;
                position: relative;
            }

            .frente-caja-giratoria img {
                max-width: 100%;
                height: auto;
                max-height: 500px;
                margin-bottom: 10px;
            }

.ver-mas {
    background-color: transparent;
    color: #ffffff;
    padding: 10px 20px;
    font-size: 16px;
    border: 2px solid #ffffff;
    cursor: pointer;
    position: absolute;
    bottom: 50%; /* Ajusta la posición desde el borde inferior */
    left: 50%;
    transform: translate(-50%, 50%); /* Ajusta la posición horizontal y vertical */
}

/* Estilos específicos del contenido trasero */
.parte-trasera-caja-giratoria {
    /* Nuevos estilos para asegurar una posición y altura uniforme */
    display: flex;
    flex-direction: column;
    background-color: #f2f2f2;
    align-items: center;
    justify-content: center;
    transform: rotateY(180deg);
    padding: 40px; /* Ajusta el espacio interno de la parte trasera */
}

.contenido-trasero {
    /* Nuevos estilos para asegurar una posición y altura uniforme */
    text-align: center;
    max-width: 100%; /* Evita que el contenido se extienda más allá del ancho de la caja */
    margin: 0 auto; /* Centra el contenido horizontalmente */
	font-size: 14px;

}
        </style>';
}

// Agregar estilos en línea al head de la página
add_action('wp_head', 'flip_box_styles');
Lenguaje del código: HTML, XML (xml)

Entendiendo el Código

1. Función de Caja Giratoria con Shortcode:

• Nombre de la Función: flip_box_shortcode($atts, $content = null)
• Propósito: Crear cajas giratorias mediante el uso de un shortcode en WordPress.
• Detalles:
  • Utiliza shortcode_atts para establecer valores predeterminados y procesar atributos proporcionados al shortcode.
  • Atributos configurables:
    • 'front_image': URL de la imagen en la cara frontal.
    • 'front_button_text': Texto del botón en la cara frontal.
    • 'back_text': Contenido en la cara trasera.
  • Genera el HTML necesario para representar la caja giratoria con las caras frontal y trasera.

2. Registro del Shortcode:

• Nombre de la Función: add_shortcode('flip_box', 'flip_box_shortcode')
• Propósito: Registrar el shortcode [flip_box] para que pueda utilizarse en el contenido de las páginas de WordPress.
• Detalles:
  • Asocia el shortcode con la función flip_box_shortcode, permitiendo la creación de cajas giratorias con configuraciones específicas.

3. Función de Estilos para Caja Giratoria:

• Nombre de la Función: flip_box_styles()
• Propósito: Agregar estilos CSS personalizados a la sección <head> de la página.
• Detalles:
  • Define estilos visuales para las cajas giratorias, incluyendo animaciones de rotación y estilos específicos para el contenido en las caras frontal y trasera.

4. Registro de Estilos en la Página:

• Nombre de la Función: add_action('wp_head', 'flip_box_styles')
• Propósito: Agregar la función de estilos al hook wp_head para que los estilos se incluyan en la sección <head> de la página.
• Detalles:
  • Asegura que los estilos definidos en flip_box_styles se apliquen correctamente en la página.

Atributos del Shortcode:

• 'front_image': URL de la imagen en la cara frontal.
• 'front_button_text': Texto del botón en la cara frontal.
• 'back_text': Contenido en la cara trasera.

[flip_box front_image="URL_IMAGEN_BIBLIOTECA" front_button_text="Ver más" back_text="<h3>Senderismo por un Lago</h3>
Embárcate en una emocionante aventura de senderismo que te guiará a través de majestuosos paisajes junto a un tranquilo lago. La ruta serpentea entre bosques frondosos y prados vibrantes, ofreciendo vistas inigualables del reflejo cristalino del lago."]Lenguaje del código: PHP (php)

En resumen, este código facilita la creación y personalización de cajas giratorias en WordPress mediante el uso de shortcodes, permitiendo atributos específicos para controlar el contenido y la apariencia de las caras frontal y trasera de estas cajas.

Si necesitas adaptar el código a las necesidades de tu proyecto o agregar una funcionalidad específica a tu página web no dudes en contactar conmigo.

Nos vemos en el siguiente tutorial.

Un saludo.