L’affichage des PDF directement sur votre site WordPress peut améliorer l’expérience des utilisateurs/utilisatrices en leur permettant d’accéder facilement à des documents, des livres électroniques et d’autres éléments précieux.
Une visionneuse de PDF embarquée permet à votre public de voir le contenu de manière transparente et d’interagir avec lui directement sur votre site. Aucun des fichiers n’est mis en page de la même manière, quel que soit l’appareil utilisé par l’internaute.
Dans cet article, nous allons vous afficher comment ajouter facilement une visionneuse de PDF dans WordPress. Nos instructions étape par étape ne nécessiteront aucun codage, vous pouvez donc les utiliser même si vous êtes un débutant.
Pourquoi avez-vous besoin d’une visionneuse de PDF dans WordPress ?
De nombreux sites WordPress utilisent des fichiers PDF pour partager des informations sur leurs services et leurs produits. Par exemple, si vous avez un site de restaurant, vous pouvez publier votre menu sous forme de PDF en ligne.
Vous pouvez toujours téléverser un PDF sur votre site, puis ajouter un lien de téléchargement dans WordPress. Cependant, ce n’est pas le meilleur compte pour les utilisateurs/utilisatrices qui souhaitent consulter rapidement un document PDF ou qui ne veulent pas télécharger le fichier complet.
Au lieu de cela, vous pouvez ajouter une visionneuse de PDF dans WordPress, puis afficher les PDF directement sur votre site. Cela permet aux internautes de voir le document sans le télécharger, ce qui est particulièrement utile pour les utilisateurs/utilisatrices de smartphones et de tablettes.
Il permet également de garder les internautes sur votre site, ce qui peut augmenter le nombre de pages vues et réduire votre taux de rebond.
Ceci étant dit, voyons comment vous pouvez facilement ajouter une visionneuse PDF à WordPress. Utilisez simplement les liens rapides pour passer directement à la méthode que vous souhaitez utiliser :
Méthode 1 : Ajouter une visionneuse de PDF à l’aide de l’éditeur/éditrices de blocs (facile)
La manière la plus simple d’afficher des PDF sur votre site web WordPress est d’utiliser le bloc Fichier intégré dans l’éditeur Gutenberg.
Cette méthode ne nécessite pas d’extension particulière, mais vous pouvez uniquement personnaliser la visionneuse de quelques façons. Si vous souhaitez des personnalisations et des fonctionnalités plus avancées, nous vous recommandons d’utiliser plutôt une extension WordPress.
Pour commencer, il suffit d’ouvrir la page ou l’article dans lequel vous souhaitez ajouter la visionneuse PDF, puis de cliquer sur le bouton « Ajouter un bloc » (+) pour ajouter un nouveau bloc.
Ensuite, commencez à taper « Fichier » et sélectionnez le bloc de droite lorsqu’il apparaît.
Si vous avez déjà téléversé votre PDF dans la bibliothèque de médias de WordPress, cliquez sur le bouton « Bibliothèque de médias ». Vous pouvez alors sélectionner le PDF que vous souhaitez embarquer.
Si vous n’avez pas encore téléversé le PDF, cliquez sur « Téléverser » et choisissez un fichier sur votre ordinateur.
WordPress choisira automatiquement une taille pour le Contenu embarqué.
Selon la taille du fichier, la vue par défaut peut ne pas afficher l’intégralité du document. Toutefois, les internautes peuvent effectuer des zooms avant et arrière et faire défiler le PDF en utilisant les paramètres de la barre d’outils.
Si vous préférez, vous pouvez modifier la hauteur de la visionneuse PDF pour afficher une partie plus ou moins importante du document embarqué.
Pour ce faire, il suffit d’utiliser le Diaporama « Hauteur en pixels » dans le menu de droite.
Il arrive que les visiteurs veuillent télécharger un PDF, de sorte qu’ils l’ont toujours à portée de main.
Par exemple, les clients peuvent vouloir télécharger le manuel d’utilisation de votre produit le plus populaire ou le programme d’un événement ou d’une conférence à venir.
Par défaut, WordPress affiche une icône « Télécharger » dans la barre d’outils et un bouton sous le PDF.
Le bouton « Télécharger » peut être utile aux internautes qui ne sont pas familiarisés avec les différentes icônes de la barre d’outils PDF.
C’est pourquoi vous pouvez laisser le bouton « Télécharger » activé. Toutefois, si vous ne souhaitez pas inclure ce contenu duplicator, vous pouvez cliquer sur le bouton « Afficher le bouton de téléchargement » pour le désactiver.
Lorsque vous êtes satisfait de la façon dont le PDF est configuré, cliquez sur « Mettre à jour » ou « Publier » pour que vos modifications soient directes.
Maintenant, si vous visitez votre site WordPress, vous verrez la visionneuse PDF en action.
Méthode 2 : Ajouter une visionneuse de PDF dans WordPress à l’aide d’une extension (plus personnalisable)
Le bloc de fichiers intégré de WordPress est une bonne option si vous souhaitez simplement intégrer quelques PDF. Cependant, si vous souhaitez avoir plus de contrôle sur la visionneuse, nous vous recommandons d’utiliser un plugin gratuit.
WP PDF Embedder est l’une des meilleures extensions WordPress de visualisation de fichiers PDF. Il ajuste automatiquement la taille de vos fichiers PDF, ou vous pouvez spécifier une largeur, et l’extension calculera automatiquement la hauteur pour vous.
Il est également doté d’une visionneuse de PDF qui comprend des boutons Suivant / Précédent et un bouton de zoom pour faciliter la navigation et la visualisation. Cette fonction est idéale pour afficher des documents plus longs, tels que des documents de référence pour des cours en ligne.
Tout d’abord, vous devez installer et activer le plugin WP PDF Embedder. Si vous avez besoin d’aide, veuillez consulter notre guide étape par étape sur l’installation d’un plugin WordPress.
Note : Il existe une version gratuite de l’extension qui vous permet d’embarquer facilement des PDF adaptés aux mobiles dans WordPress. Cependant, nous utiliserons la version premium pour ce tutoriel car elle est livrée avec des fonctionnalités plus avant.
Après l’activation, visitez la page » Settings » PDF Embedder dans le tableau de bord de WordPress pour configurer les paramètres du plugin.
Dans l’onglet « Réglages principaux », vous pouvez définir la largeur et la hauteur de vos PDF. La plupart du temps, vous pouvez surcharger ces réglages par défaut lors de l’Embarqué de chaque PDF. Par exemple, vous pouvez modifier la taille ou l’échelle d’un PDF individuel.
Toutefois, nous vous recommandons de modifier les réglages par défaut afin qu’ils correspondent mieux à vos Prérequis, car cela peut vous faire gagner beaucoup de temps et d’efforts.
D’emblée, PDF Embedder affiche la barre d’outils en haut lorsque les internautes survolent le document avec leur souris.
Toutefois, si vous avez l’intention d’inclure des documents plus longs ou des PDF de plusieurs pages, il peut être utile d’afficher la barre d’outils par défaut. Pour ce faire, il vous suffit de sélectionner l’option « Barre d’outils toujours visible ».
Vous pouvez également définir l’emplacement de votre barre d’outils en haut, en bas, ou aux deux endroits, ou la désactiver complètement en cliquant sur le menu déroulant.
Lorsque vous défilez vers le bas de la page, vous pouvez définir d’autres réglages pour votre visionneuse PDF. Par exemple, vous pouvez afficher des barres de défilement, activer le défilement continu de la page, ajouter un bouton de recherche PDF dans la barre d’outils, etc.
En outre, vous pouvez permettre aux visiteurs de télécharger des documents en affichant un bouton de téléchargement de PDF dans la barre d’outils. Vous pouvez également activer le suivi des vues et des téléchargements afin de mesurer la popularité de vos PDF auprès des visiteurs.
Lorsque vous êtes satisfait de la façon dont l’extension est configurée, cliquez sur « Enregistrer les modifications ».
Vous êtes maintenant prêt à ajouter une visionneuse de PDF dans WordPress. Il vous suffit d’ouvrir la page ou la publication où vous souhaitez afficher le PDF, puis de cliquer sur le bouton » + « .
Vous pouvez maintenant commencer à taper « PDF Embedder » et sélectionner le bloc adéquat lorsqu’il apparaît.
Ensuite, cliquez sur le lien pour ouvrir la médiathèque de WordPress et sélectionnez un PDF. Choisissez ensuite un PDF dans la bibliothèque ou téléversez un fichier depuis votre ordinateur.
L’extension affichera le PDF en utilisant vos Réglages par défaut, mais vous pouvez affiner l’aspect et le fonctionnement de ce PDF en utilisant les réglages dans le menu de droite.
Ici, vous pouvez modifier la hauteur et la largeur du PDF, l’Emplacement de la barre d’outils, le survol de la barre d’outils, les liens externes et le bouton de recherche.
Lorsque vous êtes satisfait de la façon dont le PDF est configuré, cliquez simplement sur « Mettre à jour » ou « Publier ». Vous pouvez maintenant visiter votre blog ou site WordPress pour voir la visionneuse de PDF embarquée.
Les internautes peuvent facilement voir vos documents PDF et utiliser la barre d’outils pour saisir le mode plein écran, zoomer, naviguer dans les pages, télécharger le PDF, etc.
Bonus : Comment gagner de l’argent avec vos PDFs Embarqués
Si vous avez des PDF de qualité et utiles, alors vous pouvez les utiliser pour gagner de l’argent en ligne avec WordPress.
Après avoir embarqué un document PDF sur votre site, vous pouvez transformer cette page ou cette publication en un contenu exclusif réservé aux membres. Les internautes peuvent alors trier une adhésion afin d’accéder à cette page ou publication et de voir le PDF Embarqué.
La façon la plus simple de transformer WordPress en site d’adhésion est d’utiliser MemberPress. C’est la meilleure extension d’adhésion WordPress qui vous autorise à transformer n’importe quelle page ou publication en un contenu exclusif réservé aux abonnés, y compris des PDF embarqués.
Nous avons un guide complet sur la création d’un site d’adhésion WordPress avec des instructions étape par étape pour vous aider à démarrer.
Nous vous conseillons également d’utiliser Easy Digital Downloads pour gérer et vendre des documents PDF sur votre site. Vous pouvez vendre facilement toutes sortes de biens numériques et embarquer les PDF dans les pages de produits en guise de prévisualisation, également.
Nous espérons que cet article vous a aidé à ajouter une visionneuse de PDF dans WordPress. Vous pouvez également jeter un coup d’œil à notre guide du débutant sur la façon d’embarquer des PDF, des feuilles de calcul et autres dans les publications de blog WordPress, ou consulter notre tutoriel sur la façon d’embarquer des vidéos TikTok dans WordPress.
Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et 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.
Administrateur
Christian
Works great on the latest version!
WPBeginner Support
Thanks for letting us know
Administrateur
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.
Administrateur
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?
Administrateur
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.
Administrateur
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.
Administrateur