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