Mostrar archivos PDF directamente en su sitio de WordPress puede mejorar la experiencia del usuario al facilitar el acceso a documentos, libros electrónicos y otros materiales valiosos.
Un visor de PDF incrustado permite a su público ver el contenido sin problemas e interactuar con él directamente en su sitio web. Además, garantiza que todos sus archivos tengan la misma estructura / disposición / diseño / plantilla, independientemente del dispositivo que utilice el visitante.
En el pasado hemos utilizado visores de PDF en WPBeginner y en nuestros sitios web asociados, y hemos comprobado lo mucho que mejoran la accesibilidad y la comodidad para nuestros usuarios.
En este artículo, le mostraremos cómo añadir 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é necesita un visor de PDF en WordPress?
Muchos sitios de WordPress utilizan archivos PDF para compartir información acerca de sus servicios y productos. Por ejemplo, si tienes un sitio web de restaurantes, puedes publicar tu menú en formato PDF.
Siempre puedes subir un PDF a tu sitio web y luego añadir un enlace de descarga en WordPress. Sin embargo, esta no es la mejor experiencia de usuario para quienes desean consultar rápidamente un documento PDF o no quieren descargar el archivo completo.
En su lugar, puede añadir un visor de PDF en WordPress y luego mostrar los PDF directamente en su sitio web. Esto permite a los visitantes ver el documento sin descargarlo, lo que resulta especialmente útil para los usuarios de smartphones y tabletas.
También mantiene a los visitantes en su sitio web, lo que puede aumentar las páginas vistas y reducir la tasa de rebote.
Dicho esto, veamos cómo añadir fácilmente un visor de PDF a WordPress. Simplemente usa los enlaces rápidos para saltar directamente al método que quieras usar:
Método 1: Añadir un visor de PDF mediante el editor de bloques (Fácil)
La forma más sencilla de mostrar archivos PDF en tu sitio web de WordPress es utilizando el bloque Archivo integrado en el editor Gutenberg.
Este método no requiere un plugin especial, pero solo puedes personalizar el visor de unas pocas maneras. Si desea personalizaciones y características más avanzadas, entonces le recomendamos que utilice un plugin de WordPress en su lugar.
Para empezar, sólo tiene que abrir la página o entrada en la que desea añadir el visor de PDF y, a continuación, hacer clic en el botón “Añadir bloque” (+) para añadir un nuevo bloque.
Después, empieza a escribir “Archivo” y selecciona el bloque adecuado cuando aparezca.
Si ya has subido tu PDF a la biblioteca de medios de WordPress, haz clic en el botón “Biblioteca de medios”. A continuación, puede seleccionar el PDF que desea incrustar.
Si aún no ha subido el PDF, haga clic en “Subir” y elija un archivo de su ordenador.
WordPress elegirá automáticamente un tamaño para el PDF incrustado.
Dependiendo del tamaño del archivo, es posible que la vista por defecto no muestre el documento completo. Sin embargo, los visitantes pueden ampliar / alejar y desplazarse por el PDF utilizando los ajustes de la barra de herramientas.
Si lo prefiere, puede cambiar la altura del visor de PDF para mostrar más o menos del documento incrustado.
Para ello, sólo tiene que utilizar el carrusel / control deslizante “Altura en píxeles” del 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 su producto más popular o el calendario de programación de un próximo evento o conferencia.
Por defecto, WordPress muestra un icono “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 distintos iconos de la barra de herramientas PDF.
Teniendo esto en cuenta, es posible que desee dejar activado el botón “Descargar”. Sin embargo, si no desea incluir este contenido duplicado, puede hacer clic para desactivar el conmutador “Mostrar botón de descarga”.
Cuando esté satisfecho con la configuración del PDF, haga clic en “Actualizar” o “Publicar” para aplicar los cambios.
Ahora, si visita su sitio web WordPress, verá el visor de PDF en acción.
Método 2: Añadir un visor de PDF en WordPress mediante un plugin (más personalizable)
El bloque de archivos integrado de WordPress es una buena opción si simplemente quieres incrustar unos cuantos PDF. Sin embargo, si quieres tener más control sobre el visor, te recomendamos que utilices un plugin gratuito.
PDF Embedder es uno de los mejores plugins de WordPress para visualizar archivos PDF. Se ajusta automáticamente el tamaño de los archivos PDF, o puede especificar una anchura, y el plugin calculará automáticamente la altura para usted.
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 la visualización. Esto es perfecto para mostrar documentos más largos, como materiales de referencia para cursos en línea.
En primer lugar, deberá instalar y activar el plugin PDF Embedder. Si necesita ayuda, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Nota: Existe una versión gratuita del plugin que permite incrustar fácilmente PDFs adaptados a dispositivos móviles en WordPress. Sin embargo, vamos a utilizar la versión premium para este tutorial, ya que viene con características más avanzadas.
Una vez activado, visite la página Ajustes ” Incrustador de PDF desde el escritorio de WordPress para establecer los ajustes del plugin.
En la pestaña “Ajustes principales” puede establecer la anchura y la altura de los archivos PDF. La mayoría de las veces, puede anular estos ajustes por defecto al incrustar cada PDF. Por ejemplo, puede cambiar el tamaño o la escala de un PDF individual.
No obstante, le recomendamos que cambie los ajustes por defecto para adaptarlos mejor a sus propias necesidades, ya que esto puede ahorrarle mucho tiempo y esfuerzo.
El PDF Embedder muestra la barra de herramientas en la parte superior cuando los visitantes pasan el cursor sobre el documento.
Sin embargo, si tiene previsto incluir documentos más largos o PDF de varias páginas, puede resultarle útil mostrar la barra de herramientas por defecto. Para ello, sólo tiene que seleccionar la opción “Barra de herramientas siempre visible”.
También puede establecer la ubicación de la barra de herramientas en la parte superior, inferior o ambas, o desactivarla por completo al hacer clic en el menú desplegable.
Al desplazarse por la página, puede establecer más ajustes para su visor de PDF. Por ejemplo, puede mostrar barras de desplazamiento, activar el desplazamiento continuo por la página, añadir un botón de búsqueda de PDF en la barra de herramientas, etc.
Además, puede permitir que los visitantes descarguen documentos mostrando un botón de descarga de PDF en la barra de herramientas. También puede activar el seguimiento de visitas y descargas para medir la popularidad de sus PDF entre los visitantes.
Cuando esté satisfecho con cómo se ha establecido el plugin, haga clic en “Guardar cambios”.
Ya está listo para añadir un visor de PDF en WordPress. Simplemente abra la página o entrada donde desea mostrar el PDF y luego haga clic en el botón ‘+’.
Ahora puede empezar a escribir “PDF Embedder” y seleccionar el bloque adecuado cuando aparezca.
A continuación, haga clic en el enlace para abrir la biblioteca de medios de WordPress y seleccione un PDF. A continuación, elige un PDF de la biblioteca o sube un archivo desde tu ordenador.
El plugin mostrará el PDF utilizando sus ajustes por defecto, pero puede ajustar el aspecto y el comportamiento de este PDF utilizando los ajustes del menú de la derecha.
Aquí puede cambiar la altura, la anchura, la ubicación de la barra de herramientas, al pasar el cursor por la barra de herramientas, los enlaces externos y el botón de búsqueda del PDF.
Cuando estés satisfecho con cómo se ha establecido el PDF, sólo tienes que hacer clic en “Actualizar” o “Publicar”. Ya puedes visitar tu blog o sitio web de WordPress para ver el visor de PDF incrustado.
Los visitantes pueden ver fácilmente sus documentos PDF y utilizar la barra de herramientas para entrar en el modo de pantalla completa, ampliar / acercar, navegar por las páginas, descargar el PDF, etc.
Bonificación: Cómo ganar dinero con sus PDF incrustados
Si tienes PDF útiles y de calidad, puedes utilizarlos para ganar dinero online con WordPress.
Después de incrustar un documento PDF en su sitio web, puede convertir esa página o entrada en contenido exclusivo para miembros. Los visitantes pueden entonces comprar una membresía para acceder a esa página o entrada y ver el PDF incrustado.
La forma más fácil de convertir WordPress en un sitio de membresía es utilizando MemberPress. Es el mejor plugin de membresía para WordPress que le permite convertir cualquier página o entrada en contenido exclusivo solo para suscriptores, incluyendo PDFs incrustados.
Tenemos una guía completa sobre cómo hacer un sitio web de membresía en WordPress con instrucciones paso a paso para ayudarle a empezar.
También le sugerimos que utilice Easy Digital Downloads para gestionar y vender documentos PDF en su sitio web. Puedes vender todo tipo de productos digitales fácilmente e incrustar PDFs en las páginas de producto como vistas previas.
Esperamos que este artículo te haya ayudado a añadir 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 entradas de blog de WordPress, o comprobar nuestro tutorial sobre cómo incrustar vídeos de TikTok en WordPress.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Mrteesurez
Good, helpful post.
But is it possible to embed a PDF and earn income while people read it online, something like Amazon KDP. Can this plugin be used to achieve this ?? or any custom way, let me know, thanks.
WPBeginner Support
We do not have a method we would recommend at the moment for that.
Administrador
Christian
Works great on the latest version!
WPBeginner Support
Thanks for letting us know
Administrador
Ian
I see that PDF Viewer has not been updated in 3 years, and has not been tested with my current version of Wordpress (v4.9.1). Is this still the suggested plugin to use? It’s looking like no one is maintaining it, perhaps?
WPBeginner Support
Hi Ian,
You are right. You should check out these PDF plugins for WordPress.
Administrador
Manoj jidugu
if am clicking print for my word press web page i am getting the page which is not properly aligned.
I am getting all the urls and content combined
Marek
On the plugin page it says:
“This plugin hasn’t been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.”
Maybe that’s why it does not work for some.
Kallol Das
In my site pdfviewer does not work. In fact I cannot embed any pdf file on my blog post.
rajesh
hi i want to publish a book in my wordpress site and people only read the book so can u refer me any easy pdf reader plugin
Omar
This is not working for me on the last version of WP. Someone know a workaround? Or another option that works?
fred
Hi guys,
the problem with PDF plugins like this ones, is that you cannot remove sibar(s) when generating your PDF, an that changes style a lot !
If ever I find one that has this so useful feature, I come back here to tell you ! Or maybe someone found one somewhere ?
ibrar
NIce information
Nate Richie
You should try ‘Embed Any Document’. It’s a much better alternative.
AllyG
Thanks for the recommendation. It works great!!
Piet Marisael
Is it possible to set the viewer by opening a file to 110% view automaticly and how i gonna do that?
It’s a perfect plugin used by Wordpress 4.4.2 and twenty-eleven theme
Darron
Hi Syed,
Many thanks for the ‘heads up’ on this issue.
I’ve been using the following free version of this plugin for the last two years, though have just upgraded to the premium due to the high number of fPDF’s held on my clients site:
So far I’ve had no issues at all with the premium version, I’m also able to ‘unbrand’ the document, plus track the number of download/views.
Rita
I read the info that you indicated. Looks like the pdf viewer is not available for wordpress.com. Too bad. I understand the issue that readers who click on my url for a pdf will go to a separate page, and may not return to my blog. That is a problem. I didn’t know that I would have this a need to display pdfs when I started with wordpress.com, or I may have made a different choice.
Rita
Am I correct that WordPress.org is the required application for the embedding plugin? If so, I suggest that information be clearly stated as a requirement. All references that I saw are to the generic WordPress, so it’s not possible (Did I miss it?) to determine whether there is a specific application requirement. It would help us newbies to avoid mistakes, and direct us to potentially making different decisions.
Thanks.
Dan
I really appreciate your posts that identify a DIY (do it yourself) issue in wordpress, and then provide some alternate solutions, usually involving plug ins.
“But”, am wondering if you take the time to read some of the reviews posted by users on the plugin page in wordpress.org directory, and also the LAST UPDATED info.
For example, this PDF VIEWER plugin was last updated “8 months” ago, and is compatible up to WP 4.2.6
Also, per one reviewer….
“November 4, 2015 for WP 4.3.1
This plugin was precisely what I needed. Thanks!
******Only concerns are:
(1) This plugin leverages Mozilla PDF.JS framework. As of 2015-NOV, this plugin is significantly behind the present version of that framework:
Plugin Settings page states:
PDF.js Version Date
Stable 1.1.1 18 Mar 2015
Beta 1.1.114 7 May 2015
PDF.JS page states as of 2015-NOV:
Stable 1.1.366
Beta 1.1.469
SUMMARY > Don’t you think it’s good practice to use plugins with good ratings, but that are also consistently updated and highly rated ? If you do, please include some info in your posts that acknowledge a suggested plugin hasn’t been updated in a while, but appears to be the best solution among the ones currently available.
WPBeginner Support
PDF Viewer allows you to use the beta version of PDF.js from the settings page. You may also want to see our guide on Should You Install Plugins Not Tested With Your WordPress Version?
Administrador
Rita
I use Wordpress.com, not .org. Can I embed pdfs and other documents using a plug-in? I have found varying references, and want to be certain, before experimenting and possibly damaging m existing blog.
Wordpress.com edit page does have a location labeled plugins. That also leads me to believe that I can use them, yet, references say “no”. I’ll appreciate an explanation.
Thanks
WPBeginner Support
Please see our guide on the difference between self hosted WordPress.org vs free WordPress.com blog.
Administrador
Md Riyaz Alam
Hey Syed,
I think this is the first of its kind pots on wordpress. I did not see a post on PDF for WordPpress, but many of SEO and bloggers are looking for this pluging. So thanks to introduce this to the WP industry. This could be very helpful for tutorials as well.
Rita
I am using Wordpress.com (not .org). I want viewers to see my pdf documents on the same page as the rest of my blog post. Can I install the pdf viewer that is described here, in my Wordpress.com blog?
Prince
Thanks for this article. For SEO purpose, is it better to add the pdf content in text and add a button to download the link, or to display the pdf only using this viewer plugin ?
WPBeginner Support
Like we said, a download link forces users to view the PDF separately. This decreases the time they spend on your page and their chances of coming back to resume browsing your website. You will get the same SEO benefit as adding a download link. Since it is written in JavaScript and compatible with HTML5 search engines can still index your PDF contents if the PDF file has text in it and not just images.
Administrador