PDF WordPress : comment intégrer, partager et afficher un PDF

PDF WordPress : comment intégrer, partager et afficher un PDF
13 mn de lecture

Il existe de nombreuses raisons pour lesquelles vous souhaiterez partager des fichiers PDF dans WordPress :

  • Formulaires Ă  remplir
  • E-books
  • Livres blancs
  • Infographies
  • Manuels d’utilisation
  • Brochures marketing et commerciales

Dans cet article, je vais donc vous expliquer comment compresser un PDF avant importation et surtout comment l’importer, le partager ou l’afficher dans WordPress.

Compresser un PDF

Pour commencer, sachez qu’il vaut mieux compresser votre PDF avant de l’intĂ©grer sur votre site.

En effet, les PDF peuvent s’avĂ©rer relativement lourds. Non seulement ils prennent de la place sur votre hĂ©bergement, mais ils ralentissent le chargement de la page.

No stress, il existe de nombreux sites Web qui offrent gratuitement des services de compression pour les PDF.

En voici quelques-uns :

Ici, nous allons utiliser I❀PDF.

PremiĂšrement, allez sur le site I❀PDF et choisissez “compresser PDF”.

DeuxiÚmement, téléchargez votre PDF sur le site (le fichier peut provenir de votre ordinateur, mais aussi de Dropbox ou de Google Drive).

Télécharger le PDF à compresser sur IlovePDF

TroisiĂšmement, choisissez votre niveau de compression, cliquez sur “Compresser PDF” et laissez I❀PDF travailler.

Niveau de compression PDF Ilove PDF

Enfin, téléchargez le fichier compressé sur votre ordinateur.

Télécharger PDF compressé

💡​​ Comme pour les images, pensez Ă  choisir un nom de fichier avec un mot-clĂ© pertinent pour optimiser son rĂ©fĂ©rencement naturel.

Votre PDF est prĂȘt ? Alors passons Ă  son importation dans WordPress.

Importer un PDF dans WordPress

Pour importer un fichier PDF dans WordPress, la maniĂšre de procĂ©der est exactement la mĂȘme que pour les images.

Il vous suffit de téléverser votre fichier PDF dans vos médias.

Ensuite, pour le retrouver facilement, vous pouvez filtrer les fichiers de votre mĂ©diathĂšque en choisissant “Documents”.

Téléverser le fichier PDF dans les médias de WordPress

Maintenant que vous avez tĂ©lĂ©versĂ© votre fichier PDF dans la mĂ©diathĂšque, il est temps de le partager avec vos visiteurs. 😉 

Faire un lien vers un PDF dans WordPress

Pour partager votre PDF, vous pouvez tout simplement crĂ©er un lien vers celui-ci Ă  partir de n’importe quel article ou page de votre site.

Pour les exemples, je vais prendre le PDF que je propose en tĂ©lĂ©chargement dans mon article la liste des mots de transition de Yoast.

En premier lieu, copiez l’URL du fichier PDF en vous rendant dans la mĂ©diathĂšque.

Copier l'URL du fichier PDF

Puis, accĂ©dez Ă  la publication ou Ă  la page oĂč vous souhaitez inclure le lien et cliquez sur “Modifier l’article” ou “Modifier la page”.

Enfin, ajoutez le lien au texte, Ă  l’image ou au bouton que vous souhaitez lier au PDF.

Si vous souhaitez créer un lien texte, alors :

  1. Mettez en surbrillance le texte auquel vous souhaitez ajouter un lien
  2. Cliquez sur l’icĂŽne de lien
  3. Dans la boĂźte qui apparait, saisissez l’URL du fichier prĂ©cĂ©demment copiĂ©e
  4. Choisissez si vous souhaitez ouvrir le PDF dans un nouvel onglet ou pas
  5. Validez le lien en appuyant sur la touche “EntrĂ©e” de votre clavier
  6. Cliquez sur “Publier” pour enregistrer les modifications apportĂ©es Ă  la page ou Ă  l’article
Sélectionner le texte voulu pour créer un lien et saisir l'URL du fichier PDF

VoilĂ  ce que donne un lien texte :

Télécharger la liste des mots de transition de Yoast

Pour mettre le lien dans un bouton ou sur une image, c’est exactement la mĂȘme chose, sauf que vous choisissez un bloc bouton ou image au lieu d’un bloc texte.

💡​​ Ne liez pas votre PDF Ă  un texte tel que “cliquez ici”. Adaptez le texte de votre lien au sujet de votre page ou article et incluez un mot-clĂ© pertinent.

Afficher un PDF dans une page ou un article avec Gutenberg

Au lieu de mettre un lien vers votre fichier PDF, vous pouvez Ă©galement afficher le PDF directement dans votre page ou article.

Ce qui est vraiment cool, c’est qu’il est possible sous Gutenberg d’afficher un PDF dans WordPress sans avoir recours Ă  aucune extension.

En premier lieu, rendez-vous en mode Ă©dition dans l’article ou la page oĂč vous souhaitez placer votre fichier PDF.

Puis, insérez un bloc Fichier.

Ensuite, si vous avez dĂ©jĂ  tĂ©lĂ©versĂ© votre PDF dans la mĂ©diathĂšque, cliquez sur “MĂ©diathĂšque” et choisissez-le. Si ce n’est pas le cas, vous pouvez directement le tĂ©lĂ©verser en cliquant “TĂ©lĂ©verser”.

Ajouter bloc fichier puis téléverser PDF ou le choisir dans la médiathÚque WordPress

Sans dĂ©lai, le PDF s’affiche dans une visionneuse Ă  l’intĂ©rieur de votre page ou article.

C’est ce que l’on appelle un PDF embarquĂ© (embed PDF en anglais).

Affichage de la visionneuse avec PDF embarqué dans la page

À droite, dans les rĂ©glages PDF, l’option “Afficher le contenu embarquĂ© en ligne” est activĂ©e. C’est cette option qui permet d’afficher la visionneuse de fichier PDF.

Vous pouvez en spĂ©cifier la hauteur d’affichage qui est rĂ©glĂ©e initialement sur 600 px en dĂ©plaçant le curseur ou en indiquant une valeur dans le champ dĂ©diĂ©.

En dessous de la visionneuse, le titre du PDF sous forme de lien Ă  cliquer ainsi que le bouton texte “tĂ©lĂ©charger” sont affichĂ©s par dĂ©faut.

titre lien du PDF et bouton texte "télécharger"affichés par défaut.

Dans les rĂ©glages du bloc, vous pouvez paramĂ©trer le lien afin qu’il s’affiche dans un nouvel onglet.

D’autre part, si vous ne souhaitez pas afficher le bouton “tĂ©lĂ©charger”, alors, dĂ©sĂ©lectionnez “Afficher le bouton de tĂ©lĂ©chargement”.

RĂ©glages PDF dans bloc fichier

Et voilĂ  le rĂ©sultat ! (Ă  voir sur ordinateur)😉

💡​​ Le bloc fichier n’est accessible que via l’éditeur Gutenberg. Si vous utilisez un constructeur de page tel que Divi, Elementor ou autres, alors, il vous faudra utiliser une extension.

Afficher un PDF dans Elementor, Divi ou autres

Il existe pas mal d’extensions gratuites pour embarquer les PDF.

J’ai choisi de vous prĂ©senter PDF Poster – PDF Embedder Plugin for WordPress, une extension lĂ©gĂšre qui peut ĂȘtre utilisĂ©e Ă  la fois avec Gutenberg, Elementor ou bien encore Divi.

Ce que je trouve sympa dans cette extension, c’est que tous les PDF publiĂ©s sont rĂ©pertoriĂ©s au mĂȘme endroit.

De plus, contrairement Ă  l’extension super connue PDF Embedder, elle permet le tĂ©lĂ©chargement du PDF mĂȘme en mode gratuit.

PDF Poster – PDF Embedder Plugin for WordPress

L’installation est simple : comme d’habitude, allez dans Extensions/ajouter, puis saisissez le mot-clĂ© PDF Poster. Ensuite, installez et activez l’extension.

Un menu PDF Poster apparait alors directement dans le tableau de bord. Il vous suffit alors de cliquer sur â€œAdd New Pdf”.

Si vous n’avez pas activĂ© Gutenberg shortcode generator dans les “settings” de PDF Poster, voici l’écran qui s’affiche :

PDF Poster ajout d'un nouveau PDF

Par contre, si vous activez Gutenberg shortcode generator, lorsque vous cliquerez sur â€œAdd New Pdf”, vous atterrirez directement dans une page Gutenberg en mode Ă©dition.

Activation shortcode generator PDF Poster
Add New PDF avec shortcode generator activé

Dans les deux cas, saisissez le titre du PDF. Ensuite, indiquez son URL s’il existe dĂ©jĂ  dans vos mĂ©dias ou tĂ©lĂ©versez-le.

Modifiez la hauteur de la visionneuse si besoin, activez l’autorisation d’imprimer ou pas ainsi que l’affichage du titre au-dessus de la visionneuse.

Et n’oubliez pas de cliquer sur “Save” ou “Publier” en haut, Ă  droite.

À prĂ©sent, votre PDF est enregistrĂ© et un code court a Ă©tĂ© gĂ©nĂ©rĂ©.

Copier le code court du PDF

Cliquez sur le code court pour le copier et rendez-vous dans la page ou l’article oĂč vous souhaitez afficher le PDF.

Intégrer un PDF dans Elementor

Pour Elementor, choisissez un widget texte ou code court et collez le code court du PDF que vous avez prĂ©cĂ©demment copiĂ©.

Coller le code court du PDF dans Elementor

💡​​ Si vous utilisez dĂ©jĂ  un addon pour Elementor, vĂ©rifiez au prĂ©alable s’il ne possĂšde pas dĂ©jĂ  un widget de visionneuse PDF. Avouez que ça serait ballot d’ajouter une extension supplĂ©mentaire inutilement. 😉

Intégrer un PDF dans Divi

Pour Divi, choisissez un module texte et idem, collez le code court.

Coller le code court dans un module texte Divi

Intégrer un PDF avec Gutenberg

Concernant Gutenberg, vous remarquerez que PDF Poster met Ă  votre disposition un bloc “PDF Poster Selector”.

InsĂ©rez le bloc Ă  l’endroit souhaitĂ© dans votre page ou article et Ă  droite, puis, dans la liste dĂ©roulante, sĂ©lectionnez un des PDF que vous avez enregistrĂ© et paramĂ©trĂ© dans PDF Poster.

Gutenberg choix PDF dans bloc  PDF Poster Selector

💡​​ Si vous voyez “PDF manquant” en mode Ă©dition et “​​Oops! You forgot to select a pdf file.” en visualisation, c’est que vous avez sĂ©lectionnĂ© un PDF crĂ©Ă© sans avoir activĂ© Gutenberg shortcode generator. En ce cas, activez-le dans les “settings”, enregistrez de nouveau le PDF dans Poster PDF et sĂ©lectionnez sa nouvelle version.

Et voilĂ  le rĂ©sultat. Votre PDF s’affiche dans votre page et vos visiteurs peuvent le visualiser en plein Ă©cran, le tĂ©lĂ©charger et l’imprimer (si vous avez activĂ© l’autorisation d’impression dans les rĂ©glages).

Outils visionneuse PDF Poster

PDF dans WordPress depuis Google drive

Dans l’éventualitĂ© oĂč vous souhaiteriez stocker vos PDF sur Google Drive, alors sachez qu’il est Ă©galement possible de crĂ©er des liens vers ceux-ci ou bien de les afficher sur votre site WordPress sans aucune extension.

En premier lieu, rendez-vous sur Google Drive et connectez-vous Ă  votre compte.

DeuxiĂšmement, cliquez sur â€œNouveau” dans la barre latĂ©rale gauche, choisissez â€œImporter un fichier”, sĂ©lectionnez le PDF sur votre ordinateur et importez-le.

Importer fichier PDF dans Google Drive

Créer un lien vers un fichier PDF stocké dans Google Drive

Pour simplement crĂ©er un lien vers le fichier PDF, il faut activer son partage.

Une fois l’importation faite, prĂ©visualisez le PDF. Cliquez alors sur les 3 points dans le coin supĂ©rieur droit et sĂ©lectionnez â€œPartager”. (Vous pouvez pareillement faire un clic droit sur le nom du fichier et choisir “Partager” dans le menu qui s’affiche.)

Partager un fichier stocké dans Google Drive

Dans accĂšs gĂ©nĂ©ral, choisissez “Tous les utilisateurs qui ont le lien” afin que toute personne cliquant sur le lien puisse voir le fichier.

Paramétrer et partager fichier Google Drive

💡​​ Vous pouvez dĂ©sactiver les options de tĂ©lĂ©chargement, d’impression et de copie pour les commentateurs et les lecteurs via les paramĂštres avancĂ©s en cliquant sur l’icĂŽne en forme d’engrenage.

Ensuite, copiez le lien qui s’affiche et insĂ©rez-le dans votre page ou article dans un lien texte, bouton ou autre.

Embarquer un fichier PDF stocké dans Google Drive dans WordPress

Si vous prĂ©fĂ©rez afficher le PDF au sein de votre page, c’est Ă©galement possible.

En ce cas, partagez votre fichier comme indiqué précédemment.

Puis, prĂ©visualisez votre PDF et cliquez sur les 3 points dans le coin supĂ©rieur droit afin de sĂ©lectionner â€œOuvrir dans une nouvelle fenĂȘtre”.

Une fois dans la nouvelle fenĂȘtre, cliquez de nouveau sur les 3 points et sĂ©lectionnez alors â€œintĂ©grer un Ă©lĂ©ment”. Un popup surgit avec le code HTML iframe Ă  intĂ©grer dans votre site.

Copiez alors le code HTML.

Afficher et copier code HTML iframe  du fichier partagé Google Drive

Enfin, rendez-vous sur votre site WordPress, sĂ©lectionnez l’article ou la page dans laquelle vous souhaitez afficher le PDF et collez le code :

  • Dans un bloc HTML personnalisĂ© dans Gutenberg
  • Dans un widget HTML dans Elementor
  • Et enfin dans un module code si vous utilisez Divi
Coller le code HTML du fichier dans Gutenberg, Elementor ou Divi

💡​​ Le code par dĂ©faut spĂ©cifie une largeur de 640 px (width=”640″) et une hauteur de 480 px (height=”480″). Mais, vous pouvez modifier les valeurs directement dans le code si elles ne vous conviennent pas. 

Le PDF affichĂ© dans WordPress comprendra une icĂŽne afin de l’ouvrir dans une fenĂȘtre externe. Ainsi, lorsque le visiteur cliquera dessus, le PDF s’affichera avec la barre d’outils permettant de l’imprimer et de le tĂ©lĂ©charger si vous en avez accordĂ© la permission.

Affichage du PDF dans WordPress et dans une fenĂȘtre externe

Intégrer, partager et afficher un PDF dans WordPress au final

Pour conclure, compresser, crĂ©er un lien vers un fichier PDF ou directement l’intĂ©grer dans une page ou un article sous WordPress n’est vraiment pas compliquĂ©.

Alors, qu’avez-vous envie de partager comme PDF et quelle mĂ©thode allez-vous utiliser ?

Soumettre un commentaire 💬

guest
0 Commentaires
Commentaires en ligne
Afficher tous les commentaires