Tutoriel : Comment ajouter un PDF sur son site WordPress ?

Accueil > Blog > Tutoriels > Comment ajouter un PDF sur son site WordPress ?
Ajouter un PDF dans WordPress

Téléchargez un fichier PDF dans WordPress depuis un lien, un bouton ou une image

Il arrive parfois que l’on ait besoin d’ajouter des fichiers PDF sur son site WordPress, Ils seront ainsi téléchargeables par les internautes ou vos clients depuis un lien, un bouton ou une image inséré sur une page ou un article.

Pour ce tutoriel, nous allons transférer un fichier PDF depuis votre ordinateur dans la médiathèque de votre site WordPress, la seconde étape consistera à créer un lien, un bouton et une image sur lequel les internautes devront cliquer pour télécharger le PDF sur leur ordinateur sans quitter votre site Internet.

Cette opération est en soit assez simple à réaliser mais il faut connaître la procédure à suivre pour éviter toute erreur qui pourrait compromettre le bon fonctionnement de votre lien, de votre bouton ou de votre image.

Tuto : Téléverser un fichier PDF dans la médiathèque WordPress

Ajouter un PDF dans WordPress étape n°1
Étape 1 :

Pour commencez, nous allons téléverser un fichier PDF dans la médiathèque de votre site WordPress depuis votre ordinateur.

Connectez-vous à votre site WordPress puis rendez-vous dans l’onglet « Médias » (1-1), cliquez ensuite sur le bouton « Ajouter » (1-2).

Sur la page « Médiathèque », cliquez sur le bouton « Sélectionnez des fichiers » (1-3), vous avez également la possibilité de glisser/déposer votre fichier PDF sur cette page.

Sélectionnez le fichier PDF sur votre ordinateur que vous souhaitez téléverser sur votre site WorPress (1-4).

Cliquez sur le bouton “Ouvrir”(1-5) pour commencer le téléversement.

Ajouter un PDF dans WordPress étape n°2
Étape 2 :

Une fois que le fichier PDF est téléversé sur votre site WordPress, cliquez dessus pour l’ouvrir (2).

Ajouter un PDF dans WordPress étape n°3

Étape 3 :

Dans la fenêtre « Détails du fichier joint » qui vient de s’ouvrir, modifiez le titre de votre fichier PDF pour le rendre plus lisible par tous (3-1).

(Facultatif) Selon l’utilisation que vous souhaitez faire du PDF, renseignez également une légende et une description.

Pour terminer cette étape, cliquez sur le bouton « Copier l’URL dans le presse-papiers » (3-2), puis fermer la fenêtre en cliquant sur la croix située en haut à droite.

Copiez/collez l’URL de votre fichier PDF dans le bloc-note de votre ordinateur pour le conserver à portée de main lorsque vous en aurez besoin.

Tuto : Comment télécharger un fichier PDF depuis un lien de votre site WordPress ?

Nous allons à présent insérer le fichier PDF dans un article, sachez d’ores-et-déjà que la procédure est exactement la même pour l’insertion d’un PDF sur une page.
Nous allons voir comment insérer l’URL du fichier PDF dans un lien hypertexte, dans un bouton et enfin dans une image.

Ainsi, les lecteurs de votre article (ou de votre page) pourront télécharger la version PDF simplement en cliquant sur le lien, le bouton ou l’image.

C’est parti ! On commence par le lien hypertexte.

Télécharger un PDF depuis un lien WordPress étape n°1
Étape 1 :

Dans le menu principal de l’interface WordPress, cliquez sur l’onglet « Article » (1-1) puis cliquez sur le titre de votre article pour l’ouvrir (1-2) (ou créez-en un nouveau si vous n’avez pas encore rédigé votre article) (1-3).

Télécharger un PDF depuis un lien WordPress étape n°2
Étape 2 :

Rendez-vous à l’endroit où vous souhaitez insérer le lien hypertexte pour télécharger le PDF, cliquez sur la croix (2-1) pour ajouter un bloc et sélectionnez « Paragraphe »(2-2).

Télécharger un PDF depuis un lien WordPress étape n°3
Étape 3 :

Dans le bloc « Paragraphe », tapez la phrase suivante (ou une autre de votre choix) :
« Téléchargez le PDF en cliquant ici ! ».

Sélectionnez la partie de texte suivante : « en cliquant ici ! » (3-1) puis cliquez sur l’option « Lien » (3-2) dans le menu du bloc « Paragraphe » (ou Ctrl+k).

Télécharger un PDF depuis un lien WordPress étape n°4

Étape 4 :

Dans le champ « Rechercher ou saisir une URL » (4-1), coller l’URL du fichier PDF, activez ensuite l’option « Ouvrir dans un nouvel onglet » (4-2), et enfin pour terminer, cliquez sur l’icône en forme de flèche courbée pour envoyer (4-3).

Et voilà, c’est fini, votre lien est opérationnel !

Lorsque les visiteurs de votre site cliqueront sur ce lien, le fichier PDF s’ouvrira dans un nouvel onglet de leur navigateur Internet.
Ils pourront ensuite le consulter directement sur leur écran d’ordinateur, le télécharger dans un dossier de leur ordinateur et ils pourront également l’imprimer.

Important : n’oubliez pas d’enregistrer votre travail.

Tuto : Comment télécharger un fichier PDF depuis un bouton de votre site WordPress ?

Nous allons voir maintenant comment insérer l’URL du fichier PDF dans un bouton sur votre site WordPress.
Télécharger un PDF depuis un bouton WordPress étape n°1
Étape 1 :

Rendez-vous à l’endroit où vous souhaitez insérer le bouton pour télécharger le PDF, c’est-à-dire sur un article ou une page de votre choix, cliquez ensuite sur la croix pour ajouter un bloc (1-1) et sélectionnez le bloc « Boutons »(1-3).
Si ce bloc n’apparaît pas, tapez « bouton » dans le champ « Rechercher » (1-2).

Télécharger un PDF depuis un bouton WordPress étape n°2

Étape 2 :

Placez le curseur de votre souris sur le bouton, effectuez un clic gauche et tapez le texte suivant (ou un autre de votre choix) : « Téléchargez le PDF » (2).

Télécharger un PDF depuis un bouton WordPress étape n°3

Étape 3 :

Cliquez à présent sur l’option « Lien » (3-1) dans le menu du bloc « Bouton » (ou Ctrl+k).

Dans le champ « Rechercher ou saisir une URL » (3-2), coller l’URL du fichier PDF.

Activez ensuite l’option « Ouvrir dans un nouvel onglet » (3-3).

Enfin pour terminer, cliquez sur l’icône en forme de flèche courbée pour envoyer (3-4).

Et voilà, c’est fini, votre bouton est opérationnel !

Lorsque les visiteurs de votre site cliqueront sur ce bouton, le fichier PDF s’ouvrira dans un nouvel onglet de leur navigateur Internet.
Ils pourront ensuite le consulter directement sur leur écran d’ordinateur, le télécharger dans un dossier de leur ordinateur et ils pourront également l’imprimer.

Astuce : Il est possible de modifier l’aspect de votre bouton dans l’onglet « Bloc » de la barre latérale gauche de votre site WordPress (menu réglages).

Important : n’oubliez pas d’enregistrer votre travail.

Tuto : Comment télécharger un fichier PDF depuis une image de votre site WordPress ?

Nous allons voir maintenant comment insérer l’URL du PDF dans une image de votre site WordPress.

Télécharger un PDF depuis une image WordPress étape n°1

Étape 1 :

Rendez-vous à l’endroit où vous souhaitez insérer l’image pour télécharger le PDF (article ou page), puis cliquez sur la croix pour ajouter un bloc (1-1) et sélectionnez le bloc « Image » (1-2).
Si ce bloc n’apparaît pas, tapez « image » dans le champ « Rechercher » (1-3).

Le bloc « Image » vous permet de téléverser un fichier image depuis votre ordinateur, d’en choisir un déjà présent dans votre médiathèque ou d’ajouter-en un avec une URL.

Dans le cadre de ce tutoriel, nous allons choisir une image qui a déjà été téléchargée dans la médiathèque du site WordPress.

Télécharger un PDF depuis une image WordPress étape n°2

Étape 2 :

Sélectionnez l’option « Médiathèque » (2) dans le bloc « Image ».

Télécharger un PDF depuis une image WordPress étape n°3

Étape 3 :

Dans la fenêtre qui vient de s’ouvrir, cliquez sur l’image de votre choix (3-1) puis cliquez sur le bouton « Sélectionner » (3-2).

Télécharger un PDF depuis une image WordPress étape n°4

Étape 4 :

Dans le menu du bloc Image, cliquez sur l’option « Insérer un lien » (4-1).

Dans le champ « Collez l’URL ou saisissez une recherche » (4-2), coller l’URL du fichier PDF.

Cliquez ensuite sur l’icône en forme de flèche courbée pour appliquer la modification (4-3).

Télécharger un PDF depuis une image WordPress étape n°5

Étape 5 :

Cliquez maintenant sur l’icône en forme de flèche pointée vers le bas pour ouvrir le menu de réglages du lien (5-1).

Activez l’option « Ouvrir dans un nouvel onglet » (5-2) en cliquant dessus.

Et voilà, c’est fini, votre image est opérationnel !

Lorsque les visiteurs de votre site cliqueront sur cette image, le fichier PDF s’ouvrira dans un nouvel onglet de leur navigateur Internet.
Ils pourront ensuite le consulter directement sur leur écran d’ordinateur, le télécharger dans un dossier de leur ordinateur et ils pourront également l’imprimer.

Astuce : Il est possible de modifier l’aspect de votre image dans l’onglet « Bloc » de la barre latérale gauche de votre site WordPress (menu réglages).

Important : n’oubliez pas d’enregistrer votre travail.

Avertissement :

Placez le lien de téléchargement d’un fichier PDF sur une image possède un petit inconvénient, rien ne signale à vos visiteurs qu’ils peuvent télécharger un PDF en cliquant sur cette image.

Pour remédier à cela, il y a plusieurs solutions :

  • Soit vous placez un message d’avertissement au dessus ou au dessous de l’image.
  • Soit vous vous servez de la légende de l’image pour informer vos visiteurs.
  • Dernière solution, ajouter un texte d’information directement sur l’image.

Dans le cadre de ce tutoriel, nous allons voir comment ajouter un texte d’information directement sur l’image.

Télécharger un PDF depuis une image WordPress étape n°6

Étape 6 :

Sélectionnez le bloc image qui contient le lien de téléchargement du PDF et dans le menu du bloc, cliquez sur l’option « Ajouter du texte au-dessus de l’image » (6).

Télécharger un PDF depuis une image WordPress étape n°7
Étape 7 :

Dans le champ « Saisir “/” pour choisir un bloc » (7), tapez le texte de votre choix ou par exemple : Téléchargez l’article au format PDF !

Attention, en effectuant cette opération, vous venez de désactiver le lien de téléchargement du PDF relié à l’image.

Pour remédier à cela, nous allons ajouter un lien sur le texte que vous venez d’ajouter.

Télécharger un PDF depuis une image WordPress étape n°8

Étape 8 :

Sélectionnez l’intégralité du texte que vous venez de taper (8-1) (en d’autres termes, mettez-le en surbrillance) puis, dans le menu du bloc « bannière », cliquez sur l’option « Lien » (8-2) (ou Ctrl+k).

Dans le champ « Rechercher ou saisir une URL » (8-3), coller l’URL du fichier PDF.

Activez ensuite l’option « Ouvrir dans un nouvel onglet » (8-4).

Pour terminer, cliquez sur l’icône en forme de flèche courbée pour envoyer (8-5).

Enregistrez votre travail pour le sauvegarder et prévisualisez votre article contenant votre image cliquable.

Vous noterez que pour télécharger le fichier PDF, vos visiteurs devront à présent, non pas cliquer sur l’image, mais sur le texte d’information.

Autre détails important, le texte d’information possède maintenant la mise en forme de n’importe quel lien de votre site WordPress. Le résultat n’est souvent pas formidable.

Sachez que vous pouvez modifier son apparence depuis le bloc « Bannière ».

Dans cette dernière partie du tutoriel, nous allons apporter quelques modifications au bloc « Bannière » pour lui donner un meilleur aspect.

Télécharger un PDF depuis une image WordPress étape n°9

Étape 9 :

Cliquez sur le bloc « Bannière » (9-1) pour ouvrir le menu puis cliquez sur l’option « Modifier l’alignement du texte » (9-2) et sélectionnez « Centrer le texte » (9-3).

Télécharger un PDF depuis une image WordPress étape n°10

Étape 10 :

Sélectionnez le texte de votre bloc bannière (10-1) puis cliquez sur l’option « Gras » (10-2) (Ctrl+b) pour le mettre en gras.

Enregistrez votre travail et visualisez-le. S’il ne vous convient toujours pas… On continue.

Télécharger un PDF depuis une image WordPress étape n°11

Étape 11 :

Cliquez sur le bloc « Bannière » (11-1) pour le sélectionner puis rendez-vous dans la barre latérale de droite et cliquez sur « Bloc » (11-2).

Cliquez à présent sur la section « Couleur » (11-3) puis sur « Texte » (11-4) afin de modifier la couleur du texte.

Maintenant, vous avez le choix entre choisir une couleur de votre thème, ou en choisir une nouvelle de votre choix.

Pour choisir une couleur du thème, cliquez sur les petits cercles de couleur situés sous « THÈME » (11-5).

Pour choisir une nouvelle couleur, cliquez sur le rectangle situé au-dessus de « THÈME » (11-6).

Télécharger un PDF depuis une image WordPress étape n°12
Étape 12 :

Après avoir cliqué sur le rectangle situé au-dessus de « THÈME » (12-1) pour choisir une nouvelle couleur.

Dans la fenêtre qui s’affiche, vous pouvez sélectionner une couleur en faisant glisser les curseurs dans les champs de couleur (12-2).

Il est également possible de spécifier une couleur en sélectionnant un système de codage, vous avez le choix entre RGB, HSL ou Hex.

Avec le système Hex, vous copier le code couleur sous la forme suivante : #ff7f27 (par exemple : rouge).

Vous trouverez les codes couleurs sur des sites Internet tels que celui-ci : https://htmlcolorcodes.com/fr/
Mais ils en existent beaucoup d’autres.

Les codes couleurs sont également disponibles en utilisant des logiciels comme Photoshop Elements, GIMP ou Affinity.

Pour sélectionner un système de codage de couleur, cliquez sur l’icône intitulé « Afficher les entrées détaillées » (12-3).

Dans le menu déroulant (12-5) sélectionnez “Hex”.

Dans le champ de couleur (12-4) renseignez votre code couleur (il est possible d’effectuer un copier/coller du code couleur).

Enregistrez votre travail et visualisez-le.

Si le texte n’est pas encore assez visible à vos yeux, essayez d’ajouter une couleur « d’Arrière-plan » au bloc « Bannière ».
Cette opération vous permettra d’ajouter un rectangle de couleur sous le texte d’information contenant le lien de téléchargement.

Télécharger un PDF depuis une image WordPress étape n°13
Étape 13 :

Après avoir ajouter une couleur d’arrière-plan à votre bloc « Bannière » contenant le texte d’information pour le téléchargement du fichier PDF, cliquez maintenant sur l’image (13-1) pour ouvrir le menu.

Cliquez à présent sur l’option « Modifier la position du contenu » (13-2).

Sélectionnez l’une des neufs positions disponibles. Pour ma part, j’ai opté pour une position centrée en bas de l’image (13-3).

o2switch Hébergeur Web français 100% illimité

La société o2switch propose à ses clients une offre unique d’hébergement Web de qualité premium et tout compris.
Cette offre est optimisée pour les CMS tel que WordPress. Le site ELM Création Web est hébergé par o2switch depuis 2016.

Vous cherchez un hébergeur Web 100% illimité ?

o2switch vous offre votre un nom de domaine gratuit à vie ! Et ce n’est pas tout, vous disposez également d’un espace disque illimité et d’un transfert mensuel illimité.
En plus, vous bénéficiez de la garantie “Satisfait ou Remboursé” pendant 30 jours.

partagez ce tutoriel

Le commentaire d'Eric Le Maître

Niveau de difficulté :

Pour le premier tutoriel consacré au CMS WordPress, j’ai souhaité commencé par quelque chose d’assez simple mais qui avait tout de même son utilité que ce soit pour les particuliers ou les professionnels.

Après beaucoup d’hésitation, mon choix s’est finalement porté sur l’ajout d’un fichier PDF que les visiteurs du site WordPress pourront télécharger sur leur ordinateur sans quitter le site, en cliquant soit sur un simple lien hypertexte, soit sur un bouton, soit sur une image

La mise en place d’un lien est vraiment le plus simple à faire, le bouton est plus voyant et l’image est plus design.

Si vous ne savez pas quoi choisir, je vous recommande de mettre en place un bouton. Il est très visible et les gens ont l’habitude de cliquer dessus car on en trouve partout sur Internet.

Cette mise en place n’est valable que pour le téléchargement de fichier PDF gratuit.
Si vous souhaitez vendre des fichiers PDF, il faudra impérativement vous tourner vers l’ajout d’une extension de boutique en ligne telle que WooCommerce par exemple.

Si vous avez des questions concernant ce tutoriel, vous pouvez utiliser le module de commentaire ci-dessous ou m’envoyer un e-mail depuis la page “Contact” de ce site.

Eric Le Maître

Créateur, ELM Création Web

Donnez votre avis sur ce tutoriel

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise des liens d’affiliation vous conduisant vers des sites e-commerces partenaires et je touche une commission pour chaque vente générée par ces liens. Il est bon de préciser qu’en passant par ces liens , vos achats s' effectuent sans aucun surcoût.