Cómo Crear un Reloj Digital Personalizable en WordPress con Shortcode

¿Buscas un reloj digital en WordPress con diseño profesional y opciones de personalización avanzadas? Con este código actualizado, crearás un reloj modular usando shortcodes, donde podrás estilizar horas, minutos y segundos por separado. ¡Ideal para sitios con branding específico o diseños creativos!

Requisitos:

1. WordPress + Plugin Code Snippets (seguro y fácil de gestionar).
2. Conocimientos básicos de CSS (para personalizar).

Paso 1: Crear el snippet en Code Snippets

1. Ve a Snippets > Añadir nuevo.
2. Título: «Reloj digital personalizable con CSS».
3. Código: Pega este código actualizado:
4. Configuración: Ejecutar en todas partes > Guardar y activar.

function agregar_reloj_digital() {
    ?>
    <div id="digital-clock" class="reloj-digital-container">
        <span class="reloj-hora"></span>:<span class="reloj-minutos"></span>:<span class="reloj-segundos"></span>
    </div>
    <script>
    function updateClock() {
        const now = new Date();
        const hours = now.getHours();
        const minutes = now.getMinutes();
        const seconds = now.getSeconds();
        
        const horaElement = document.querySelector('.reloj-hora');
        const minutosElement = document.querySelector('.reloj-minutos');
        const segundosElement = document.querySelector('.reloj-segundos');
        
        horaElement.textContent = hours < 10 ? '0' + hours : hours;
        minutosElement.textContent = minutes < 10 ? '0' + minutes : minutes;
        segundosElement.textContent = seconds < 10 ? '0' + seconds : seconds;
    }
    
    setInterval(updateClock, 1000);
    updateClock();
    </script>
    <style>
    .reloj-digital-container {
        font-family: 'Arial', sans-serif;
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        padding: 10px;
        color: yellow;
        background-color: black;
        display: inline-block; /* Para ajustarse al contenido */
        border-radius: 8px; /* Borde redondeado opcional */
    }
    /* Personaliza cada parte del reloj */
    .reloj-hora {
        color: #ffcc00; /* Amarillo brillante */
    }
    .reloj-minutos {
        color: #ffffff; /* Blanco */
    }
    .reloj-segundos {
        color: #ff6666; /* Rojo claro */
    }
    </style>
    <?php
}
add_shortcode('reloj_digital', 'agregar_reloj_digital');

Paso 2: Usar el shortcode [reloj_digital]

Insértalo en cualquier parte de tu sitio:

• Páginas/Entradas: Usa el bloque «Shortcode» de WordPress.
• Menús o widgets: Ideal para headers o barras laterales.
• Plantillas PHP: Con <?php echo do_shortcode('[reloj_digital]'); ?>.

Personalización avanzada

1. Cambiar colores:
   Modifica las clases .reloj-hora, .reloj-minutos, y .reloj-segundos en el CSS.