Mostrar PDFs directamente en tu sitio de WordPress puede mejorar la experiencia del usuario al proporcionar acceso fácil a documentos, libros electrónicos y otro material valioso.
Un visor de PDF incrustado permite a tu audiencia ver el contenido sin problemas e interactuar con él directamente en tu sitio web. Además, asegura que todos tus archivos tengan el mismo diseño, sin importar el dispositivo que esté usando el visitante.
Hemos utilizado visores de PDF en WPBeginner y en nuestros sitios web asociados en el pasado, y hemos experimentado cuánto mejoran la accesibilidad y la conveniencia para nuestros usuarios.
En este artículo, te mostraremos cómo agregar fácilmente un visor de PDF en WordPress. Nuestras instrucciones paso a paso no requerirán ningún código, por lo que puedes usarlas incluso si eres principiante.
¿Por qué necesitas un visor de PDF en WordPress?
Muchos sitios de WordPress utilizan archivos PDF para compartir información sobre sus servicios y productos. Por ejemplo, si tienes un sitio web de restaurante, podrías publicar tu menú como un PDF en línea.
Siempre puedes subir un PDF a tu sitio web y luego agregar un enlace de descarga en WordPress. Sin embargo, esta no es la mejor experiencia de usuario para las personas que quieren ver rápidamente un documento PDF o que no quieren descargar el archivo completo.
En su lugar, puedes agregar un visor de PDF en WordPress y luego mostrar PDFs directamente en tu sitio web. Esto permite a los visitantes ver el documento sin descargarlo, lo cual es particularmente útil para usuarios de teléfonos inteligentes y tabletas.
También mantiene a los visitantes en tu sitio web, lo que puede aumentar tus visitas a la página y reducir tu tasa de rebote.
Dicho esto, veamos cómo puedes agregar fácilmente un visor de PDF a WordPress. Simplemente usa los enlaces rápidos para saltar directamente al método que deseas usar:
- Método 1: Agregar un visor de PDF usando el editor de bloques (Fácil)
- Método 2: Agregar un visor de PDF en WordPress usando un plugin (Más personalizable)
- Extra: Cómo ganar dinero con tus PDFs incrustados
Método 1: Agregar un visor de PDF usando el editor de bloques (Fácil)
La forma más fácil de mostrar PDFs en tu sitio web de WordPress es usando el bloque de Archivo integrado en el editor de Gutenberg.
Este método no requiere un plugin especial, pero solo puedes personalizar el visor de algunas maneras. Si deseas personalizaciones y funciones más avanzadas, te recomendamos usar un plugin de WordPress en su lugar.
Para empezar, simplemente abre la página o entrada donde deseas agregar el visor de PDF y luego haz clic en el botón 'Agregar bloque' (+) para añadir un nuevo bloque.
Después de eso, comienza a escribir 'Archivo' y selecciona el bloque correcto cuando aparezca.
Si ya has subido tu PDF a la biblioteca de medios de WordPress, haz clic en el botón 'Biblioteca de medios'. Luego puedes seleccionar el PDF que deseas incrustar.
Si aún no has subido el PDF, haz clic en 'Subir' y luego elige un archivo de tu computadora.
WordPress elegirá automáticamente un tamaño para el PDF incrustado.
Dependiendo del tamaño del archivo, la vista predeterminada puede no mostrar el documento completo. Sin embargo, los visitantes pueden hacer zoom y desplazarse por el PDF usando la configuración de la barra de herramientas.
Si lo prefieres, puedes cambiar la altura del visor de PDF para mostrar más o menos del documento incrustado.
Para hacer esto, simplemente usa el control deslizante 'Altura en píxeles' en el menú de la derecha.
A veces, los visitantes pueden querer descargar un PDF, para tenerlo siempre a mano.
Por ejemplo, los clientes pueden querer descargar el manual de usuario de tu producto más popular o el programa de programación de un próximo evento o conferencia.
Por defecto, WordPress muestra un ícono de 'Descargar' en la barra de herramientas y un botón debajo del PDF.
El botón 'Descargar' puede ser útil para los visitantes que no están familiarizados con los diferentes íconos en la barra de herramientas del PDF.
Teniendo esto en cuenta, es posible que desees dejar habilitado el botón 'Descargar'. Sin embargo, si no deseas incluir este contenido duplicado, puedes hacer clic para deshabilitar el interruptor 'Mostrar botón de descarga'.
Cuando estés satisfecho con la configuración del PDF, haz clic en 'Actualizar' o 'Publicar' para que tus cambios se reflejen en vivo.
Ahora, si visitas tu sitio web de WordPress, verás el visor de PDF en acción.
Método 2: Agregar un visor de PDF en WordPress usando un plugin (Más personalizable)
El bloque de Archivo de WordPress integrado es una buena opción si simplemente deseas incrustar algunos PDF. Sin embargo, si deseas un mayor control sobre el visor, te recomendamos usar un plugin gratuito en su lugar.
PDF Embedder es uno de los mejores plugins de visor de PDF para WordPress. Ajusta automáticamente el tamaño de tus archivos PDF, o puedes especificar un ancho y el plugin calculará automáticamente la altura por ti.
También viene con un visor de PDF que incluye botones Siguiente / Anterior y un botón de zoom para facilitar la navegación y visualización. Esto es perfecto para mostrar documentos más largos, como materiales de referencia para cursos en línea.
Para obtener más información sobre el plugin, puedes consultar nuestra reseña completa de PDF Embedder.
Primero, necesitarás instalar y activar el plugin PDF Embedder. Si necesitas ayuda, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Nota: Existe una versión gratuita del plugin que te permite incrustar fácilmente PDFs compatibles con dispositivos móviles en WordPress. Sin embargo, usaremos la versión premium para este tutorial porque viene con funciones más avanzadas.
Tras la activación, visita la página Ajustes » PDF Embedder desde el panel de WordPress para configurar los ajustes del plugin.
En la pestaña 'Ajustes principales', puedes establecer el ancho y la altura de tus PDFs. La mayoría de las veces, puedes anular estos ajustes predeterminados al incrustar cada PDF. Por ejemplo, puedes cambiar el tamaño o la escala de un PDF individual.
Sin embargo, aún recomendamos cambiar los ajustes predeterminados para que coincidan mejor con tus propios requisitos, ya que esto puede ahorrarte mucho tiempo y esfuerzo.
Por defecto, PDF Embedder muestra la barra de herramientas en la parte superior cuando los visitantes pasan el ratón sobre el documento.
Sin embargo, si planeas incluir documentos más largos o PDFs de varias páginas, puede ser útil mostrar la barra de herramientas de forma predeterminada. Para hacer esto, simplemente selecciona la opción 'Barra de herramientas siempre visible'.
También puedes establecer la ubicación de tu barra de herramientas en la parte superior, inferior o ambas ubicaciones, o deshabilitarla por completo haciendo clic en el menú desplegable.
Al desplazarte hacia abajo en la página, puedes configurar más opciones para tu visor de PDF. Por ejemplo, puedes mostrar barras de desplazamiento, habilitar el desplazamiento continuo de páginas, agregar un botón de búsqueda de PDF en la barra de herramientas, y más.
Además, puedes permitir que los visitantes descarguen documentos mostrando un botón de descarga de PDF en la barra de herramientas. También puedes habilitar vistas y seguimiento de descargas para que puedas medir qué tan populares son tus PDF entre los visitantes.
Cuando estés satisfecho con la configuración del plugin, haz clic en 'Guardar Cambios'.
Ahora estás listo para agregar un visor de PDF en WordPress. Simplemente abre la página o publicación donde deseas mostrar el PDF y luego haz clic en el botón '+'.
Ahora puedes empezar a escribir 'PDF Embedder' y seleccionar el bloque correcto cuando aparezca.
A continuación, haz clic en el enlace para abrir la biblioteca de medios de WordPress y selecciona un PDF. Luego, elige un PDF de la biblioteca o carga un archivo desde tu computadora.
El plugin mostrará el PDF utilizando tu configuración predeterminada, pero puedes ajustar cómo se ve y se comporta este PDF utilizando las opciones en el menú de la derecha.
Aquí, puedes cambiar la altura, el ancho, la ubicación de la barra de herramientas, el efecto al pasar el mouse sobre la barra de herramientas, los enlaces externos y el botón de búsqueda del PDF.
Cuando estés satisfecho con la configuración del PDF, simplemente haz clic en ‘Actualizar’ o ‘Publicar’. Ahora puedes visitar tu blog o sitio web de WordPress para ver el visor de PDF incrustado.
Los visitantes pueden ver fácilmente tus documentos PDF y usar la barra de herramientas para entrar en modo de pantalla completa, hacer zoom, navegar por las páginas, descargar el PDF y más.
Extra: Cómo ganar dinero con tus PDFs incrustados
Si tienes PDFs de calidad y útiles, entonces puedes usarlos para generar ingresos en línea con WordPress.
Después de incrustar un documento PDF en tu sitio web, puedes convertir esa página o publicación en contenido exclusivo solo para miembros. Los visitantes pueden entonces comprar una membresía para acceder a esa página o publicación y ver el PDF incrustado.
La forma más fácil de convertir WordPress en un sitio de membresía es usando MemberPress. Es el mejor plugin de membresía de WordPress que te permite convertir cualquier página o publicación en contenido exclusivo solo para suscriptores, incluidos los PDF incrustados.
Tenemos una guía completa sobre cómo crear un sitio web de membresía en WordPress con instrucciones paso a paso para ayudarte a empezar.
También sugerimos usar Easy Digital Downloads para administrar y vender documentos PDF en tu sitio web. Puedes vender todo tipo de productos digitales fácilmente e incrustar PDF en las páginas de productos como vistas previas, también.
Esperamos que este artículo te haya ayudado a agregar un visor de PDF en WordPress. También puedes echar un vistazo a nuestra guía para principiantes sobre cómo incrustar PDFs, hojas de cálculo y otros en las publicaciones de blog de WordPress, o consultar nuestro tutorial sobre cómo incrustar videos de TikTok en WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Jiří Vaněk
En mi sitio web, los PDF se abrían en el navegador Edge, lo cual era muy molesto. Otros usuarios experimentaron el mismo problema si no tenían un visor de PDF diferente. El plugin WP PDF Embedder ayudó a minimizar significativamente este comportamiento. Un problema tan trivial, y solo este artículo me ayudó a resolverlo.
Soporte de WPBeginner
Glad our guide was able to help
Administrador
Dennis Muthomi
¡Gran guía!
una pregunta: ¿hay algún impacto notable en los tiempos de carga de página al incrustar archivos PDF más grandes utilizando el método del plugin?
Para sitios con muchos PDF incrustados, especialmente si algunos de esos PDF tienen tamaños de archivo enormes, sería bueno saber si hay alguna consideración de rendimiento a tener en cuenta.
a veces, servir archivos PDF grandes podría ralentizar la carga de la página.
Comentarios de WPBeginner
Si el PDF tiene un tamaño de archivo grande, puede tardar un poco en cargarse en la página. Sin embargo, en muchos casos esto no será un problema.
Mrteesurez
Buen post, útil.
Pero, ¿es posible incrustar un PDF y generar ingresos mientras la gente lo lee en línea, algo así como Amazon KDP? ¿Se puede usar este plugin para lograr esto? ¿o alguna forma personalizada, házmelo saber, gracias.
Soporte de WPBeginner
Por el momento, no tenemos un método que recomendaríamos para eso.
Administrador
Christian
¡Funciona muy bien en la última versión!
Soporte de WPBeginner
Thanks for letting us know
Administrador
Ian
Veo que PDF Viewer no se ha actualizado en 3 años y no ha sido probado con mi versión actual de Wordpress (v4.9.1). ¿Sigue siendo este el plugin sugerido para usar? Parece que nadie lo está manteniendo, ¿quizás?
Soporte de WPBeginner
Hola Ian,
Tienes razón. Deberías echar un vistazo a estos plugins de PDF para WordPress.
Administrador
Manoj jidugu
Si hago clic en imprimir para mi página web de WordPress, obtengo la página que no está alineada correctamente.
Obtengo todas las URLs y el contenido combinados
Marek
En la página del plugin dice:
“Este plugin no se ha actualizado en más de 2 años. Es posible que ya no se mantenga o soporte y que tenga problemas de compatibilidad cuando se use con versiones más recientes de WordPress.”
Quizás por eso no les funciona a algunos.
Kallol Das
En mi sitio pdfviewer no funciona. De hecho, no puedo incrustar ningún archivo pdf en mis publicaciones de blog.
rajesh
hola, quiero publicar un libro en mi sitio de wordpress y la gente solo lee el libro, ¿puedes recomendarme algún plugin de lector de pdf fácil?
Omar
Esto no me funciona en la última versión de WP. ¿Alguien sabe una solución alternativa? ¿O alguna otra opción que funcione?
fred
Hola chicos,
el problema con los plugins de PDF como estos es que no puedes eliminar la barra lateral cuando generas tu PDF, ¡y eso cambia mucho el estilo!
Si alguna vez encuentro uno que tenga esta característica tan útil, volveré aquí para decírtelo. ¿O tal vez alguien encontró uno en alguna parte?
ibrar
Buena información
Nate Richie
Deberías probar 'Embed Any Document'. Es una alternativa mucho mejor.
AllyG
Gracias por la recomendación. ¡¡Funciona genial!!
Piet Marisael
¿Es posible configurar el visor para que al abrir un archivo se muestre automáticamente al 110% y cómo lo hago?
Es un plugin perfecto utilizado por Wordpress 4.4.2 y el tema twenty-eleven
Darron
Hola Syed,
Muchas gracias por el aviso sobre este problema.
He estado usando la siguiente versión gratuita de este plugin durante los últimos dos años, aunque acabo de actualizar a la versión premium debido a la gran cantidad de fPDF en el sitio de mis clientes:
Hasta ahora no he tenido ningún problema con la versión premium, además puedo 'desmarcar' el documento y rastrear el número de descargas/vistas.
Rita
Leí la información que indicaste. Parece que el visor de PDF no está disponible para wordpress.com. Qué lástima. Entiendo el problema de que los lectores que hagan clic en mi URL para un PDF irán a una página separada y quizás no regresen a mi blog. Ese es un problema. No sabía que tendría esta necesidad de mostrar PDFs cuando empecé con wordpress.com, o quizás habría tomado una decisión diferente.
Rita
¿Es correcto que WordPress.org es la aplicación requerida para el plugin de incrustación? Si es así, sugiero que esa información se declare claramente como un requisito. Todas las referencias que vi son al WordPress genérico, por lo que no es posible (¿Me lo perdí?) determinar si hay un requisito de aplicación específico. Ayudaría a los novatos como nosotros a evitar errores y nos dirigiría a tomar decisiones diferentes.
Gracias.
Dan
Realmente aprecio tus publicaciones que identifican un problema de "hazlo tú mismo" (DIY) en WordPress y luego ofrecen algunas soluciones alternativas, que generalmente involucran plugins.
"Pero", me pregunto si te tomas el tiempo de leer algunas de las reseñas publicadas por los usuarios en la página del plugin en el directorio de wordpress.org, y también la información de ÚLTIMA ACTUALIZACIÓN.
Por ejemplo, este plugin VISOR DE PDF se actualizó por última vez "hace 8 meses" y es compatible hasta WP 4.2.6
Además, según un revisor...
"4 de noviembre de 2015 para WP 4.3.1
Este plugin era precisamente lo que necesitaba. ¡Gracias!
******Las únicas preocupaciones son:
(1) Este plugin utiliza el framework PDF.JS de Mozilla. A partir de noviembre de 2015, este plugin está significativamente rezagado con respecto a la versión actual de ese framework:
La página de Configuración del Plugin indica:
PDF.js Versión Fecha
Estable 1.1.1 18 Mar 2015
Beta 1.1.114 7 May 2015
La página de PDF.JS indica a partir de noviembre de 2015:
Estable 1.1.366
Beta 1.1.469
RESUMEN > ¿No crees que es una buena práctica usar plugins con buenas calificaciones, pero que también se actualizan constantemente y están muy bien valorados? Si es así, por favor incluye información en tus publicaciones que reconozca que un plugin sugerido no se ha actualizado en mucho tiempo, pero que parece ser la mejor solución entre los disponibles actualmente.
Soporte de WPBeginner
PDF Viewer te permite usar la versión beta de PDF.js desde la página de configuración. También te puede interesar consultar nuestra guía sobre ¿Deberías instalar complementos no probados con tu versión de WordPress?
Administrador
Rita
Uso Wordpress.com, no .org. ¿Puedo incrustar PDFs y otros documentos usando un plugin? He encontrado referencias variadas y quiero estar seguro antes de experimentar y posiblemente dañar mi blog existente.
La página de edición de Wordpress.com tiene una ubicación etiquetada como plugins. Eso también me lleva a creer que puedo usarlos, sin embargo, las referencias dicen "no". Agradecería una explicación.
Gracias
Soporte de WPBeginner
Por favor, consulte nuestra guía sobre la diferencia entre WordPress.org autoalojado vs blog gratuito de WordPress.com.
Administrador
Md Riyaz Alam
Hola Syed,
Creo que esta es la primera olla de su tipo en WordPress. No vi una publicación sobre PDF para WordPress, pero muchos de SEO y bloggers están buscando este plugin. Así que gracias por introducir esto en la industria de WP. Esto podría ser muy útil para tutoriales también.
Rita
Estoy usando Wordpress.com (no .org). Quiero que los visitantes vean mis documentos PDF en la misma página que el resto de mi publicación de blog. ¿Puedo instalar el visor de PDF que se describe aquí en mi blog de Wordpress.com?
Príncipe
Gracias por este artículo. Para fines de SEO, ¿es mejor agregar el contenido del PDF en texto y agregar un botón para descargar el enlace, o mostrar el PDF solo usando este plugin visor?
Soporte de WPBeginner
Como dijimos, un enlace de descarga obliga a los usuarios a ver el PDF por separado. Esto disminuye el tiempo que pasan en tu página y sus posibilidades de volver a navegar por tu sitio web. Obtendrás el mismo beneficio de SEO que al agregar un enlace de descarga. Dado que está escrito en JavaScript y es compatible con HTML5, los motores de búsqueda aún pueden indexar el contenido de tu PDF si el archivo PDF tiene texto y no solo imágenes.
Administrador