Cómo agregar DearFlip para crear un flipbook en WordPress

DearFlip es un plugin de WordPress que convierte archivos PDF o secuencias de imágenes en flipbooks interactivos con efecto de paso de página, renderizados directamente en el navegador mediante WebGL y transformaciones 3D CSS3. En lugar de obligar a los visitantes a descargar un PDF estático, DearFlip integra una experiencia realista de paso de página — con sombras de curvatura, efectos de sonido y controles de zoom — sin necesidad de Flash ni dependencias externas.

Esta guía recorre cada etapa del proceso: instalación, configuración global, creación de flipbooks, inserción y optimización del rendimiento. También cubre los casos técnicos límite y los errores comunes que la mayoría de los tutoriales omiten por completo.

Por qué los flipbooks son importantes para la estrategia de contenido en WordPress

Un flipbook no es solo un truco visual. Para editores, operadores de comercio electrónico y agencias, resuelve un problema concreto: los PDF incrustados mediante <iframe> o el visor de Google Docs no tienen marca propia, son lentos en dispositivos móviles y no ofrecen ganchos de análisis. DearFlip mantiene a los usuarios en tu dominio, admite enlaces directos a páginas específicas y se integra con los hooks estándar de WordPress para que puedas rastrear la participación.

Los casos de uso más comunes incluyen:

• Revistas digitales y catálogos donde la navegación página a página refleja la experiencia impresa
• Lookbooks de productos incrustados en páginas de categorías de WooCommerce
• Informes anuales y documentos técnicos que deben mantener la identidad de marca
• Portafolios interactivos construidos a partir de una secuencia de imágenes de alta resolución
• Manuales de formación con marcadores internos y navegación por tabla de contenidos

DearFlip gratuito vs. Pro: qué obtienes realmente

Antes de instalar, comprende qué limita la versión gratuita y dónde la licencia Pro desbloquea funciones críticas.

Para documentos internos o sitios con poco tráfico, la versión gratuita es completamente funcional. Para catálogos orientados al cliente o contenido restringido, Pro vale la inversión.

Paso 1: Instalar el plugin DearFlip

1.1 Instalar desde el repositorio de plugins de WordPress

Inicia sesión en tu panel de administración de WordPress y navega a Plugins > Añadir nuevo plugin. En el campo de búsqueda, escribe DearFlip. Localiza el plugin titulado DearFlip – 3D Flipbook, PDF Viewer de DearHive y haz clic en Instalar ahora, luego en Activar.

Alternativamente, instala mediante WP-CLI si gestionas varios sitios o prefieres flujos de trabajo en línea de comandos:

wp plugin install dearflip --activate

1.2 Instalar la versión Pro manualmente

Si adquiriste la licencia Pro, descarga el archivo .zip desde el panel de tu cuenta de DearHive. Luego navega a Plugins > Añadir nuevo plugin > Subir plugin, selecciona el archivo .zip y haz clic en Instalar ahora > Activar.

Nota importante: No instales simultáneamente las versiones gratuita y Pro. Desactiva y elimina la versión gratuita antes de subir el archivo Pro para evitar conflictos de clases que generarán un error fatal de PHP.

1.3 Verificar los requisitos de PHP y del servidor

DearFlip requiere:

• PHP 7.4 o superior (se recomienda PHP 8.1+)
• WordPress 5.0+
• Librería GD o Imagick habilitada en el servidor (utilizada para generar miniaturas de portada a partir de páginas de PDF)
• allow_url_fopen o cURL habilitado (para fuentes PDF remotas en Pro)

Si tu entorno de alojamiento compartido carece de Imagick, las miniaturas de portada del flipbook no se generarán automáticamente. Actualizar a un plan de Alojamiento VPS te da control total sobre las extensiones PHP y las directivas php.ini, lo que elimina por completo este tipo de problemas de configuración.

Paso 2: Configurar los ajustes globales de DearFlip

Tras la activación, aparece un elemento de menú DearFlip en la barra lateral izquierda. Navega a DearFlip > Ajustes. Estos ajustes globales definen el comportamiento predeterminado para cada flipbook que crees — los flipbooks individuales pueden anularlos, pero configurar correctamente los valores predeterminados ahorra tiempo.

2.1 Ajustes generales

• Modo de paso de página: Elige Página única para diseños con enfoque móvil o Doble página para presentación de escritorio estilo revista. El modo de doble página divide correctamente cada pliego del PDF solo si tu PDF fue exportado como pliegos, no como páginas individuales.
• Altura del flipbook: Establece un porcentaje o un valor fijo en píxeles. Usar 100% con un div contenedor es el enfoque más adaptable.
• Color de fondo: Haz coincidir el fondo de tu sitio para evitar un contraste de color discordante alrededor del lienzo del flipbook.

2.2 Ajustes de controles

Habilita o deshabilita los siguientes controles de interfaz según tu audiencia:

• Zoom — Esencial para catálogos con texto pequeño; desactívalo para lookbooks puramente visuales
• Pantalla completa — Muy recomendado; los usuarios lo esperan
• Controles de navegación de páginas — Botones de flecha y un campo de entrada de número de página
• Efectos de sonido — El sonido de paso de página añade realismo pero puede resultar intrusivo; déjalo como opción del usuario en lugar de activarlo automáticamente
• Botón de descarga — Desactívalo si tu PDF es contenido propietario o restringido

2.3 Ajustes de rendimiento

Aquí es donde la mayoría de los tutoriales guardan silencio, y donde fallan los despliegues en entornos reales.

Motor de renderizado PDF: DearFlip renderiza los PDF en el lado del cliente usando PDF.js (la librería de código abierto de Mozilla). Esto significa que el PDF completo se transfiere al navegador antes de que comience el renderizado. Para un catálogo de 50 páginas a 150 KB por página, eso supone una carga inicial de 7,5 MB. Mitiga esto mediante:

1. Comprimir tu PDF con Ghostscript antes de subirlo:

gs -sDEVICE=pdfwrite -dCompatibilityLevel=1.4 -dPDFSETTINGS=/ebook 
   -dNOPAUSE -dQUIET -dBATCH 
   -sOutputFile=compressed_output.pdf input.pdf

1. Habilitar la Carga diferida en los ajustes de DearFlip para que solo se rendericen las primeras páginas en la carga inicial.
2. Servir el PDF desde un bucket de almacenamiento respaldado por CDN en lugar de directamente desde el directorio uploads de WordPress.

Límite de memoria de WordPress: El procesamiento de PDF.js puede disparar el uso de memoria PHP durante la generación de miniaturas. Si ves una pantalla en blanco o un error 500 tras subir un PDF grande, aumenta el límite de memoria en wp-config.php:

define( 'WP_MEMORY_LIMIT', '256M' );

Paso 3: Crear un nuevo flipbook

Navega a DearFlip > Añadir nuevo. Esto abre la interfaz de creación de flipbooks, que funciona como un editor de tipo de entrada personalizado.

3.1 Establecer el título y el tipo de fuente

Introduce un título interno descriptivo (no se muestra a los visitantes de forma predeterminada, pero aparece en la lista de shortcodes y en el panel de administración, así que sé específico: 2025 Spring Catalog en lugar de Flipbook 1).

En el menú desplegable Fuente, selecciona:

• PDF — para un único archivo PDF (lo más habitual)
• Imagen — para una secuencia de archivos JPEG o PNG
• URL externa (solo Pro) — para referenciar un PDF alojado en un servidor externo o CDN

3.2 Subir un PDF

Haz clic en Subir PDF y selecciona tu archivo desde la Biblioteca de medios o súbelo directamente desde tu ordenador. El tamaño máximo de subida predeterminado de WordPress suele ser 2 MB, lo cual es insuficiente para la mayoría de los catálogos.

Para aumentar el límite de subida, añade lo siguiente a tu archivo .htaccess (Apache) o nginx.conf (Nginx):

Apache .htaccess:

php_value upload_max_filesize 64M
php_value post_max_size 64M
php_value max_execution_time 300
php_value max_input_time 300

Bloque de servidor Nginx:

client_max_body_size 64M;

Tras la subida, DearFlip genera automáticamente una miniatura de portada a partir de la primera página usando Imagick o GD. Si la miniatura está en blanco o no aparece, confirma que tu servidor tiene Imagick instalado:

php -r "phpinfo();" | grep -i imagick

3.3 Subir una secuencia de imágenes

Para flipbooks basados en imágenes, haz clic en Subir imágenes y selecciona varios archivos. El orden de subida determina el orden de las páginas. Un flujo de trabajo fiable es nombrar los archivos de forma secuencial antes de subirlos (page-001.jpg, page-002.jpg, etc.) para que el orden de clasificación del sistema de archivos coincida con la secuencia deseada.

Formatos compatibles: JPEG, PNG, WebP (la compatibilidad con WebP depende de la versión de GD o Imagick de tu servidor).

Especificaciones de imagen recomendadas:

• Resolución: 1200 x 1600 px (vertical) o 1600 x 1200 px (horizontal)
• Perfil de color: sRGB (las imágenes CMYK se renderizarán con colores incorrectos en los navegadores)
• Tamaño de archivo por imagen: Menos de 200 KB tras la compresión; usa herramientas como cwebp o jpegoptim

3.4 Opciones de personalización por flipbook

Cada flipbook tiene sus propios ajustes que anulan los valores predeterminados globales:

• Ancho / Alto de página: Establece dimensiones explícitas si el flipbook debe ajustarse a una columna de diseño específica
• Paso automático: Habilita el paso de página automático a un intervalo definido (en segundos). Úsalo con moderación — el paso automático es desorientador para páginas con mucho contenido
• Página de inicio: Especifica qué página se abre primero, útil para campañas con enlaces directos
• Skin: Selecciona un tema visual (claro, oscuro o personalizado en Pro)
• Miniatura del flipbook: Sube una imagen de portada personalizada que aparece antes de que el usuario haga clic para abrir el flipbook

3.5 Publicar el flipbook

Haz clic en Publicar. WordPress guarda el flipbook como una entrada de tipo de entrada personalizado. El shortcode es inmediatamente visible en el lado derecho del editor, con el formato:

[dflip id="123"]

Donde 123 es el ID de entrada de WordPress asignado a ese flipbook. Anota este ID — lo necesitarás para la inserción.

Paso 4: Insertar el flipbook en una página o entrada

4.1 Usar el editor de bloques Gutenberg

Navega a Páginas > Añadir nueva o abre una página existente. En el editor de bloques, haz clic en el icono + para añadir un nuevo bloque. Busca Shortcode y selecciónalo. Pega el shortcode:

[dflip id="123"]

También puedes usar el bloque dedicado de DearFlip si aparece en tu biblioteca de bloques tras la activación — esto proporciona una vista previa visual en el propio editor.

4.2 Usar el editor clásico

Abre la página o entrada en el Editor clásico. Cambia a la pestaña Texto (no Visual) para pegar el shortcode directamente en el HTML. Pegar en la pestaña Visual puede hacer que el filtro wpautop de WordPress envuelva el shortcode en etiquetas <p>, lo que ocasionalmente rompe las dimensiones del contenedor del flipbook.

4.3 Insertar con un bloque HTML personalizado

Para un control preciso del diseño, envuelve el shortcode en un bloque HTML personalizado con dimensiones explícitas:

<div>
  [dflip id="123"]
</div>

Esto evita que el flipbook se extienda al ancho completo de la ventana en monitores ultraanchos.

4.4 Parámetros del shortcode para inserción avanzada

El shortcode de DearFlip acepta parámetros en línea que anulan tanto los ajustes globales como los del flipbook individual:

[dflip id="123" width="900" height="600" mode="2d" autoplay="1" duration="5"]

Parámetros clave:

4.5 Insertar en un widget o barra lateral

Los shortcodes de DearFlip funcionan en cualquier área de widgets que admita la renderización de shortcodes. Navega a Apariencia > Widgets, añade un widget de Texto o HTML personalizado y pega el shortcode. Ten en cuenta que los flipbooks en la barra lateral deben usar dimensiones restringidas (width="300") para evitar el desbordamiento del diseño.

Paso 5: Consideraciones de rendimiento, SEO y accesibilidad

5.1 Implicaciones SEO de los flipbooks PDF

Google puede indexar el contenido PDF directamente cuando el archivo es de acceso público, pero no puede indexar el contenido renderizado por JavaScript (PDF.js) de la misma manera. Si la visibilidad SEO del contenido del flipbook es importante, considera:

1. Publicar el mismo contenido como página HTML junto al flipbook
2. Añadir una tabla de contenidos en formato texto debajo del flipbook incrustado
3. Usar la etiqueta meta og:image para establecer la portada del flipbook como imagen para compartir en redes sociales

5.2 Impacto en Core Web Vitals

Un flipbook incrustado introduce una carga significativa de JavaScript (PDF.js pesa aproximadamente 300 KB minificado). Para proteger tus puntuaciones de Largest Contentful Paint (LCP) y Total Blocking Time (TBT):

• Carga el flipbook solo en páginas donde sea el contenido principal, no en tu página de inicio
• Usa el Modo Lightbox de DearFlip, que carga el flipbook solo cuando el usuario hace clic en una miniatura, aplazando el paquete JavaScript completo hasta la interacción
• Habilita el caché de WordPress y sirve los activos estáticos a través de un CDN

Un VPS con cPanel bien configurado te permite ajustar los grupos de trabajadores PHP-FPM, habilitar OPcache y configurar Nginx como proxy inverso — todo lo cual se combina para lograr tiempos de carga del flipbook notablemente más rápidos en comparación con entornos compartidos.

5.3 Accesibilidad

La implementación predeterminada de DearFlip tiene soporte limitado de navegación por teclado. Para el cumplimiento de WCAG 2.1:

• Habilita la función de Tabla de contenidos (Pro) para que los lectores de pantalla puedan navegar por capítulos
• Proporciona un enlace de descarga alternativo al PDF original debajo del flipbook
• Establece texto alt descriptivo en la imagen de miniatura del flipbook

5.4 Renderizado en dispositivos móviles

En dispositivos móviles, los efectos de paso de página 3D consumen muchos recursos de GPU. DearFlip recurre automáticamente a un modo de deslizamiento 2D en dispositivos con soporte WebGL limitado. Prueba tu flipbook en hardware móvil real — no solo en las DevTools del navegador — porque el comportamiento de WebGL varía significativamente entre Chrome para Android y Safari para iOS.

Paso 6: Gestionar múltiples flipbooks

A medida que crece tu biblioteca, la lista DearFlip > Todos los flipbooks se convierte en tu centro de gestión. Cada entrada muestra el título del flipbook, el shortcode y el estado de publicación.

Consejos prácticos de gestión:

• Usa una convención de nomenclatura coherente que incluya el tipo de contenido y la fecha: Catalog-Spring-2025, Report-Annual-2024
• Asigna categorías o etiquetas de WordPress a los flipbooks si tienes más de diez — DearFlip admite filtrado por taxonomía en la versión Pro
• Al actualizar un flipbook (nueva versión del PDF), reemplaza el archivo fuente en lugar de crear una nueva entrada de flipbook; el ID del shortcode permanece igual, por lo que todos los embeds existentes se actualizan automáticamente
• Audita regularmente los flipbooks no publicados o en borrador y elimina los archivos PDF sin usar de la Biblioteca de medios para evitar que tu cuota de almacenamiento se infle

Si gestionas un sitio con mucho contenido y docenas de flipbooks con archivos PDF de gran tamaño, considera un plan de Servidores dedicados para garantizar un rendimiento de E/S constante y evitar el efecto de vecino ruidoso común en infraestructuras compartidas.

Solución de problemas comunes de DearFlip

El flipbook muestra un lienzo en blanco

Causa: El PDF no se cargó, normalmente debido a una política CORS que bloquea la URL del PDF, una ruta de archivo incorrecta tras una migración del sitio, o un agotamiento de memoria PHP durante el renderizado.

Solución: Abre la consola del navegador (F12 > Console). Si ves un error CORS, asegúrate de que el PDF se sirve desde el mismo dominio que WordPress. Si ves un 404, verifica la URL del adjunto en la Biblioteca de medios. Si ves un error fatal de PHP, aumenta WP_MEMORY_LIMIT.

La animación de paso de página es entrecortada o lenta

Causa: Las páginas del PDF son demasiado grandes (imágenes de alta resolución incrustadas en el PDF), o la GPU del dispositivo no puede gestionar la composición WebGL.

Solución: Comprime el PDF antes de subirlo (consulta el comando Ghostscript en el Paso 2.3). Cambia el flipbook a mode="2d" para usuarios con dispositivos de baja potencia.

El shortcode se renderiza como texto plano

Causa: El tema o un constructor de páginas está eliminando el procesamiento de shortcodes, o el shortcode se pegó dentro de un bloque de código en lugar de un bloque de shortcode.

Solución: Asegúrate de que el shortcode esté dentro de un bloque Shortcode en Gutenberg, no en un bloque Código o Párrafo. En el Editor clásico, confirma que estás en modo Texto, no en modo Visual, al pegar.

La miniatura no se genera

Causa: Imagick o GD no están instalados, o el PDF usa una codificación no estándar que ninguna de las dos librerías puede analizar.

Solución: Instala Imagick mediante el gestor de paquetes de tu servidor:

sudo apt-get install php-imagick
sudo systemctl restart php8.1-fpm

Alternativamente, sube manualmente una imagen de miniatura personalizada en los ajustes del flipbook.

El flipbook no se muestra en sitios HTTPS

Causa: El PDF se sirve mediante HTTP mientras la página usa HTTPS, lo que activa un bloqueo de contenido mixto en el navegador.

Solución: Asegúrate de que la URL del sitio y la URL de WordPress estén configuradas como https:// en Ajustes > General. Ejecuta una búsqueda y reemplazo en la base de datos para actualizar todas las URL de adjuntos:

wp search-replace 'http://yourdomain.com' 'https://yourdomain.com' --skip-columns=guid

Combinar esto con un Certificado SSL correctamente emitido garantiza que todos los activos — incluidos los PDF almacenados en wp-content/uploads — se sirvan mediante una conexión segura sin advertencias de contenido mixto.

Configuración avanzada: alojar PDF en almacenamiento externo

Para despliegues en producción con grandes bibliotecas de PDF, almacenar los PDF directamente en wp-content/uploads es ineficiente. Una arquitectura mejor:

1. Sube los PDF a un bucket de almacenamiento de objetos compatible con S3 (Cloudflare R2, Backblaze B2 o AWS S3)
2. Configura una distribución CDN frente al bucket
3. En DearFlip Pro, usa el tipo de fuente URL externa y apunta a la URL CDN de cada PDF
4. Establece encabezados Cache-Control: public, max-age=31536000 en el CDN para los activos PDF

Esta arquitectura desacopla la E/S de disco de tu servidor WordPress de la entrega de PDF, reduciendo drásticamente la carga del servidor durante picos de tráfico y manteniendo tu base de datos de WordPress ligera.

Si tu caso de uso implica generar PDF de forma dinámica (a partir de datos enviados por usuarios o informes con plantillas), combina esta configuración con un plan de Alojamiento VPS donde puedas instalar Puppeteer, wkhtmltopdf o WeasyPrint como herramientas de generación de PDF en el lado del servidor, y luego enviar el resultado directamente al almacenamiento de objetos.

Matriz de decisión: cuándo usar DearFlip frente a alternativas

Lista de verificación técnica de puntos clave

Antes de publicar un flipbook de DearFlip, verifica cada elemento:

• La versión de PHP es 7.4 o superior; la extensión Imagick está cargada
• Los límites de tamaño de subida en .htaccess o nginx.conf coinciden con el tamaño de tu archivo PDF más grande
• El PDF está comprimido a menos de 10 MB para catálogos típicos; usa Ghostscript para compresión por lotes
• WP_MEMORY_LIMIT está configurado en al menos 256M en wp-config.php
• HTTPS está aplicado en todo el sitio y todas las URL de PDF usan https://; los errores de contenido mixto romperán el flipbook silenciosamente
• El modo Lightbox está habilitado para flipbooks que no son el contenido principal de la página, para aplazar la carga de JavaScript
• Existe una alternativa en texto plano o HTML para el contenido del flipbook si la indexabilidad SEO es importante
• El renderizado móvil ha sido probado en dispositivos iOS y Android reales, no solo en las DevTools del navegador
• Se ha subido una miniatura personalizada para cada flipbook para mejorar la tasa de clics en páginas de archivo o de destino
• Los flipbooks sin usar y los PDF huérfanos se eliminan de la Biblioteca de medios para mantener el almacenamiento limpio

Preguntas frecuentes

¿DearFlip funciona con PDF protegidos por contraseña?

No. PDF.js, que DearFlip usa para el renderizado, no puede descifrar PDF protegidos por contraseña. Elimina la protección por contraseña a nivel de PDF antes de subirlo. Si necesitas control de acceso, usa en su lugar la función de contraseña de flipbook integrada en DearFlip Pro, que restringe el acceso al propio embed en lugar del archivo subyacente.

¿Puedo usar DearFlip con un constructor de páginas como Elementor o Divi?

Sí. Tanto Elementor como Divi incluyen un widget de Shortcode. Pega el shortcode [dflip id="123"] en ese widget. DearFlip Pro también incluye un widget nativo de Elementor que proporciona configuración visual sin shortcodes.

¿DearFlip ralentizará todo mi sitio WordPress?

Solo en las páginas donde el flipbook está incrustado. DearFlip encola su JavaScript y CSS de forma global de manera predeterminada. Para restringir la carga de activos únicamente a las páginas con flipbooks, añade lo siguiente al archivo functions.php de tu tema:

add_filter( 'dflip_load_scripts', function( $load ) {
    return is_singular() && has_shortcode( get_post()->post_content, 'dflip' );
});

¿Cuántos flipbooks puedo crear con la versión gratuita?

La versión gratuita no impone un límite estricto en el número de flipbooks. Las limitaciones prácticas son el espacio de almacenamiento y la ausencia de funciones Pro como la protección por contraseña y los análisis.

¿Qué ocurre con mis flipbooks si desactivo el plugin DearFlip?

Las entradas del tipo de entrada personalizado del flipbook permanecen en la base de datos de WordPress, pero los shortcodes se renderizarán como cadenas vacías en el front end. Los archivos PDF subidos permanecen en la Biblioteca de medios. Reactivar el plugin restaura todos los flipbooks inmediatamente sin pérdida de datos.