Integración con WordPress

WordPress ofrece varias formas de integrar temporizadores, desde enfoques simples basados en bloques hasta inserción de HTML personalizado. Esta guía cubre todos los métodos tanto para instalaciones modernas como clásicas de WordPress.

Método 1: Editor de bloques de WordPress (Gutenberg)

El WordPress moderno utiliza el editor de bloques (Gutenberg), que proporciona una interfaz visual para construir páginas y entradas.

Guía paso a paso

Paso 1: Crea tu temporizador

1. Ve al Editor
2. Diseña y configura tu temporizador
3. Copia la URL del temporizador de la sección Renderer
4. Tenla a mano para los próximos pasos

Paso 2: Crea el código iFrame

Construye tu código de integración iFrame usando la URL de tu temporizador:

<iframe
  src="https://gettickr.app/r/#TU-ID-DE-TEMPORIZADOR"
  width="100%"
  height="400"
  style="border: none; max-width: 1200px; margin: 0 auto; display: block;"
  title="Temporizador de cuenta atrás"
>
</iframe>

Paso 3: Añade el bloque HTML personalizado

1. Abre la página o entrada donde quieres el temporizador
2. Haz clic en el botón "+" para añadir un nuevo bloque
3. Busca "HTML personalizado"
4. Selecciona el bloque "HTML personalizado"

Paso 4: Pega tu código

1. Haz clic dentro del bloque HTML personalizado
2. Pega tu código iFrame completo
3. El bloque muestra "HTML personalizado" mientras editas
4. Haz clic en "Vista previa" para ver el temporizador en acción

Paso 5: Publica

1. Haz clic en "Actualizar" o "Publicar" en la parte superior derecha
2. Ve a tu página para verificar que el temporizador aparece correctamente
3. Prueba en dispositivos móviles o usando la vista previa responsive

Consejos del editor de bloques

Método 2: Editor clásico

Si tu sitio WordPress usa el Editor clásico, puedes añadir temporizadores a través del editor HTML.

Guía paso a paso

1. Abre tu página/entrada en el Editor clásico
2. Haz clic en la pestaña "Texto" (cambia de Visual a modo HTML)
3. Encuentra la ubicación donde quieres el temporizador en tu HTML
4. Pega tu código iFrame en esa ubicación
5. Cambia a la pestaña "Visual" para previsualizar (opcional)
6. Actualiza/Publica tu página

Ejemplo de código para Editor clásico

<h2>Cuenta atrás del evento</h2>

<iframe
  src="https://gettickr.app/r/#TU-ID-DE-TEMPORIZADOR"
  width="800"
  height="400"
  frameborder="0"
  style="border: none; display: block; margin: 20px auto;"
>
</iframe>

<p>¡Únete a nosotros para el evento del año!</p>

Método 3: Plugins de constructor de páginas

Muchos sitios WordPress usan constructores de páginas para diseño visual. Aquí está cómo añadir temporizadores a los constructores de páginas populares:

Elementor

Consejo Pro de Elementor:

Usa el "Posicionamiento personalizado" de Elementor para superponer
temporizadores en imágenes o secciones para diseños hero creativos.

Divi Builder

WPBakery Page Builder

Beaver Builder

Comparación de constructores de páginas

Método 4: Áreas de widgets (barra lateral/pie de página)

Para temporizadores que aparecen en múltiples páginas (barras laterales, pies de página, encabezados):

Guía paso a paso

1. Ve a Panel → Apariencia → Widgets
2. Encuentra el área de widget objetivo (ej. "Barra lateral", "Pie de página")
3. Haz clic en "+" para añadir bloque o "Añadir un widget"
4. Busca "HTML personalizado"
5. Añade el widget HTML personalizado
6. Pega tu código iFrame
7. Añade título (opcional, ej. "Cuenta atrás del evento")
8. Haz clic en "Actualizar" o "Guardar"

Recomendaciones de tamaño de widget

Método 5: Shortcodes para reutilización

Crea un shortcode personalizado para usar el mismo temporizador fácilmente en múltiples páginas.

Crear un shortcode

Añade a functions.php de tu tema o crea un plugin personalizado:

// Añadir a functions.php
function tickr_countdown_shortcode($atts) {
    $atts = shortcode_atts(array(
        'id' => '',
        'width' => '100%',
        'height' => '400',
    ), $atts);

    if (empty($atts['id'])) {
        return '<p>Por favor proporciona un ID de temporizador</p>';
    }

    $output = '<iframe ';
    $output .= 'src="https://gettickr.app/r/#' . esc_attr($atts['id']) . '" ';
    $output .= 'width="' . esc_attr($atts['width']) . '" ';
    $output .= 'height="' . esc_attr($atts['height']) . '" ';
    $output .= 'style="border: none; max-width: 100%;" ';
    $output .= 'title="Temporizador de cuenta atrás">';
    $output .= '</iframe>';

    return $output;
}
add_shortcode('tickr', 'tickr_countdown_shortcode');

Usar tu shortcode

Una vez añadido, usa el shortcode en cualquier página, entrada o widget:

Uso básico:

[tickr id="TU-ID-DE-TEMPORIZADOR"]

Con dimensiones personalizadas:

[tickr id="TU-ID-DE-TEMPORIZADOR" width="800" height="500"]

Múltiples temporizadores:

<h3>Evento 1</h3>
[tickr id="temporizador-1"]

<h3>Evento 2</h3>
[tickr id="temporizador-2"]

Beneficios del shortcode

Compatibilidad de plugins

Problemas comunes de plugins

Permitir iFrames en plugins de seguridad

Wordfence:

1. Ve a Wordfence → Firewall → All Firewall Options
2. Añade gettickr.app a dominios en lista blanca
3. Guarda configuración

iThemes Security:

1. Ve a Security → Settings → Advanced
2. Deshabilita "Filter Suspicious Query Strings in the URL" para páginas específicas
3. O añade gettickr.app a lista blanca

Solución de problemas de integración en WordPress

El temporizador no aparece

Problemas de visualización

Problemas en móvil

WordPress Multisitio

Para instalaciones WordPress Multisitio:

Pasos del administrador de red:

1. Administrador de red → Configuración
2. Habilitar "HTML sin filtrar" para administradores de sitio (si es necesario)
3. Los sitios individuales pueden entonces añadir iFrames de temporizadores normalmente

Próximos pasos

• Integración iFrame - Documentación detallada de iFrame
• Personalizar diseño del temporizador - Haz coincidir con tu tema de WordPress
• Integración con Shopify - WooCommerce es similar a Shopify
• Control remoto - Controlar temporizadores mientras gestionas tu sitio WordPress