Comment créer un site Web ou un blog en 2020 - Guide gratuit et facile pour créer un site Web

Comment intégrer des fichiers PDF dans WordPress

Il peut y avoir des moments où vous aimeriez intégrer un fichier PDF dans votre publication ou votre page:

  • Un auteur de livre voudra peut-être donner aux lecteurs un exemplaire gratuit.
  • Pour ajouter des catalogues de produits à votre site Web.
  • Pour partager vos créations au format PDF avec les clients.
  • Vous dirigez peut-être une agence de voyages et souhaitez montrer l’itinéraire des voyages organisés.

Mais il y a un problème!

Bien que WordPress vous permette d’incorporer des fichiers audio, des vidéos et bien sûr des images, il n’est pas possible d’incorporer des fichiers PDF dans vos publications et pages. Cette fonctionnalité n’est pas disponible jusqu’à présent, elle sera peut-être ajoutée à l’avenir.

Si vous souhaitez ajouter un fichier PDF, vous pouvez télécharger le fichier à l’aide de l’option Ajouter un média, l’insérer et le lien vers ce fichier sera ajouté à votre page. Et vos visiteurs peuvent le télécharger ou afficher le fichier dans le navigateur Web lorsqu’ils quittent votre site Web.

Mais que se passe-t-il si vous souhaitez intégrer des fichiers PDF dans vos publications et laisser vos visiteurs le voir sans quitter votre site Web? Y a-t-il une solution pour ça? La reponse courte est oui.

Donc, dans cet article, je vais vous montrer comment intégrer un fichier PDF dans votre article ou votre page WordPress. Avant de commencer, vous souhaiterez probablement créer un document PDF soigné et bien formaté avec un éditeur PDF. Ensuite, vous êtes prêt à l’ajouter à vos messages avec ou sans l’aide d’un plugin. Commençons.

Comment intégrer un fichier PDF avec un plugin

Il existe de nombreux plugins que vous pouvez utiliser pour ajouter un fichier PDF à votre publication WordPress.

Cependant, nous utiliserons un plugin appelé PDF Embedder. C’est un plugin gratuit qui est disponible dans le répertoire des plugins WordPress. La meilleure chose à propos de ce plugin est qu’il utilise JavaScript pour faire son travail et non un service tiers ou des iframes.

Étape 1: installez le plugin PDF Embedder

Connectez-vous à votre tableau de bord WordPress et accédez à Plugins> Ajouter un nouveau. Rechercher maintenant PDF Embedder dans le champ de recherche. Une fois que vous avez trouvé le plugin, installez-le simplement et activez-le. C’est simple, non?

Installer le plugin PDF Embedder

Étape 2: configurer le plugin

Bien que vous puissiez commencer à incorporer vos fichiers PDF une fois que vous avez installé ce plugin, vous pouvez d’abord modifier les paramètres pour améliorer l’apparence des fichiers incorporés. Pour ouvrir la page de configuration de ce module complémentaire, accédez à Paramètres> PDF Inserter dans la barre latérale gauche de votre tableau de bord WordPress.

Paramètres de PDF Embedder

La version gratuite de ce plugin vous permet de modifier les éléments suivants:

  • Largeur et hauteur – Vous pouvez modifier la largeur et la hauteur de la visionneuse PDF. Accepte les valeurs entières (en pixels) ou max. (100% large).
  • Emplacement de la barre d’outils – La barre d’outils de cette visionneuse PDF permet à votre public de faire un zoom avant ou arrière et de passer à la page suivante ou précédente. Vous pouvez avoir la barre d’outils en haut, en bas ou les deux.
  • Barre d’outils – Vous pouvez choisir si vous souhaitez que la barre d’outils soit visible uniquement lorsque vous passez la souris sur le document ou non.

Maintenant, ce sont les paramètres universels. Mais que faire si vous souhaitez modifier les paramètres d’un fichier spécifique? Eh bien, vous pouvez le faire à l’aide de codes courts. Voici un exemple:

[pdf-embedder url=”http://yoursite.com/wp-content/uploads/2019/01/April.pdf”  width=”500″ toolbar=”top” toolbarfixed=”on”]

Dans l’exemple ci-dessus, la largeur est définie sur 500 px, l’emplacement de la barre d’outils est défini en haut et la barre d’outils sera réparée. Vous pouvez également désactiver la barre d’outils en bas et la barre d’outils fixe.

Ce plugin a également une version premium qui offre des fonctionnalités telles que le bouton de téléchargement, le suivi de l’affichage et du téléchargement, le défilement continu des pages et l’ouverture de liens dans une nouvelle fenêtre.

Étape 3: intégrer un fichier PDF dans votre publication ou page

Une fois la configuration terminée, vous pouvez commencer à faire le sale boulot. Maintenant, que vous utilisiez l’éditeur classique ou l’éditeur Gutenberg, vous pouvez facilement utiliser ce plugin pour obtenir le résultat souhaité.

Si vous utilisez le Éditeur classiqueL’incorporation d’un fichier PDF est similaire à ce que vous feriez pour une image ou une vidéo.

Créez d’abord une nouvelle publication ou ouvrez une publication existante, puis cliquez sur le bouton Ajouter un média. Téléchargez maintenant votre fichier PDF, cliquez sur le bouton Insérer dans la publication et un shortcode sera ajouté à votre publication.

Insérer un éditeur de fichier PDF classique

Voilà, vous pouvez maintenant prévisualiser votre message pour vérifier s’il fonctionne correctement ou non.

Que se passe-t-il Éditeur Gutenberg? Eh bien, le plugin PDF Embedder est livré avec un bloc spécifique. Créez donc un nouveau message et cliquez sur l’icône Ajouter un bloc. Recherchez ensuite le bloc PDF Embedder et sélectionnez-le.

Insérer un fichier PDF Gutenberg Editor

Enfin, cliquez sur le bloc pour sélectionner (ou télécharger) votre fichier PDF et votre travail est terminé.

Voici le résultat final, quel que soit l’éditeur que vous utilisez:

Fichier PDF intégré final

Plugins populaires de la visionneuse PDF

Bien que le plugin PDF Embedder fasse du bon travail, il est toujours agréable d’avoir quelques alternatives. Permettez-moi maintenant de partager quelques plugins de visionneuse PDF gratuits et premium, sans ordre particulier:

Visionneuse PDF pour WordPress

Visionneuse PDF pour WordPress Plugin

Avec plus de 3900 ventes, la visionneuse PDF pour WordPress est le plugin de visionneuse PDF vendu chez CodeCanyon. Il s’agit d’un plugin entièrement réactif et compatible avec plusieurs navigateurs. Ce plugin vous permet d’activer ou de désactiver des options telles que l’impression, le téléchargement, le zoom, la navigation sur la page et le partage sur les réseaux sociaux. Vous pouvez également utiliser Google Analytics avec WordPress pour suivre le nombre de visiteurs lisant vos fichiers PDF.

Embedder Google Drive

Plugin d'insertion Google Drive

Google Drive Embedder est un plugin gratuit qui vous permet d’accéder à votre Google Drive à partir de votre tableau de bord WordPress et d’incorporer des PDF, des documents Word ou des feuilles de calcul dans votre publication ou votre page. Cependant, pour utiliser ce plugin, vous devez également installer Google Apps Login: le but de ce plugin est de connecter votre Google Drive à votre site WordPress.

Algori PDF Viewer

Plugin Algori PDF Viewer

Vous cherchez un plugin de bloc Gutenberg pour intégrer des fichiers PDF? Vous pouvez essayer le plugin Algori PDF Viewer. Ce plug-in gratuit est compatible avec tous les navigateurs Web comme Google Chrome, Firefox, Safari, Opera et Internet Explorer 11. Il vous permet de télécharger plusieurs fichiers sur une seule page et prend en charge le mode de présentation.

Plugin WordPress pour FlipBook Real3D

Plugin WordPress pour FlipBook Real3D

Comme son nom l’indique, Real3D FlipBook est un plugin flipbook 3D réactif et tactile pour afficher des fichiers PDF et des images. Il a été développé en utilisant HTML5 et ne nécessite pas l’utilisation de Flash. Vous pouvez personnaliser des paramètres tels que la vitesse de panoramique, le son de panoramique, le niveau de zoom et l’angle de la caméra. Ce plugin est également compatible avec la lightbox et le mode plein écran.

Insérez plus de document

Insérez plus de document

Embed Any Document Plus est un plugin unique qui vous permet de télécharger et d’intégrer facilement des fichiers de document (PDF, Word, PPT, Excel, etc.) facilement sur les sites Web WordPress. Le plugin ajoute un bouton «Ajouter un document» au-dessus de l’éditeur visuel. Cela ouvrira la fenêtre contextuelle EAD Plus à partir de laquelle vous pouvez sélectionner la police de votre document. Il est également étroitement intégré aux services cloud de Google Drive, Dropbox et Box.com. Vous pouvez rester dans votre site WordPress et télécharger des fichiers vers les services cloud et les intégrer directement à partir de là.

Après avoir téléchargé ou sélectionné le document que vous souhaitez intégrer, vous aurez également la possibilité de sélectionner le service de document que vous souhaitez choisir pour intégrer votre fichier. Le plugin reconnaîtra automatiquement le format de fichier et suggérera la visionneuse. Les utilisateurs peuvent gérer un fichier d’une taille maximale de 5 à 8 Mo. Pour les fichiers plus volumineux, les développeurs recommandent de les télécharger sur Google Drive et de les insérer à partir de là.

Comment intégrer un fichier PDF sans plugin

Eh bien, si vous êtes de ceux qui recherchent toujours des solutions sans plugin, cette section est pour vous. Nous pouvons certainement intégrer un fichier PDF dans des publications et des pages WordPress sans installer un autre plugin.

L’idée est simple: vous devrez télécharger votre fichier PDF sur votre compte Google Drive, puis utiliser le code iframe pour intégrer ce fichier sur votre site. Bien que cette méthode soit sûre, le seul problème est qu’elle utilise des iframes.

Étape 1: Accédez à Google Drive et connectez-vous à votre compte.

Étape 2: Téléchargez le fichier PDF que vous souhaitez insérer dans votre publication WordPress ici. Pour ce faire, cliquez sur Nouveau dans la barre latérale gauche de votre compte Google Drive, sélectionnez Importer des fichiers et importez le fichier depuis votre ordinateur local.

Téléchargement de fichiers depuis Google Drive

Étape 3: Une fois le fichier téléchargé sur votre lecteur, double-cliquez dessus pour prévisualiser le fichier. Maintenant, cliquez sur les 3 points verticaux (Plus d’actions) présents dans le coin supérieur droit et sélectionnez Ouvrir dans une nouvelle fenêtre.

Étape 4: Dans la nouvelle fenêtre, cliquez sur Plus d’actions (les 3 points verticaux dans le coin supérieur droit) et sélectionnez Partager.

Partage PDF Google Drive

Étape 5: Une fenêtre contextuelle appelée «Partager avec les autres» s’ouvrira. Ici, cliquez sur le lien Get to share; ce qu’il fait, c’est de s’assurer que toute personne disposant du lien vers le fichier PDF peut le voir. Si vous ne le faites pas, le fichier restera privé et ne sera pas visible par l’audience de votre site Web.

Obtenir le lien de partage

Étape 6: Si vous ne souhaitez pas que vos visiteurs téléchargent ou impriment le fichier et désactivent également la fonction de copie de texte, cliquez sur Avancé dans la même fenêtre contextuelle. Cochez l’option qui dit «Supprimer les options de téléchargement, d’impression et de copie pour les commentateurs et les téléspectateurs» et cliquez sur Terminé.

Désactiver le téléchargement de la copie papier dans Google Drive PDF

Étape 7: Il est maintenant temps d’obtenir le code d’intégration que nous utiliserons dans notre article. Pour l’obtenir, cliquez à nouveau sur Plus d’actions, sélectionnez Insérer un élément et copiez le code de l’iframe.

Copier le code d'intégration de Google Drive

Étape 8: Accédez à votre tableau de bord WordPress et créez ou modifiez la publication ou la page où vous souhaitez intégrer le fichier PDF. Maintenant, si vous utilisez le Éditeur classique, allez dans l’onglet Texte et collez le code:

Onglet Éditeur de texte classique

pour Éditeur Gutenberg, vous devez ajouter un nouveau bloc, rechercher du code HTML personnalisé et enfin ajouter le code iframe dans le bloc HTML personnalisé:

Bloc HTML personnalisé

Étape 9: Voilà, prévisualisez maintenant votre publication ou votre page pour vérifier votre fichier PDF intégré.

Note de bas de page sur la façon d’intégrer des fichiers PDF dans WordPress

WordPress vous permet de créer un lien vers vos fichiers PDF, mais pas de les intégrer. Cependant, ce didacticiel résout ce problème. Il montre comment vous pouvez intégrer vos fichiers PDF dans vos publications ou pages, tout comme vos images et vidéos, avec ou sans utilisation d’un plugin.

Avez-vous déjà intégré un fichier PDF sur votre site Web en utilisant l’une ou l’autre méthode? Avez-vous un plugin alternatif en tête et pensez-vous qu’il est meilleur que ceux mentionnés dans cet article? Faites-moi savoir vos pensées dans la section des commentaires.