Intégrer un pdf dans votre site
Voici plusieurs méthodes pour intégrer un PDF en iframe avec WordPress :
1. Méthode HTML directe (dans l’éditeur)
<iframe src="URL_DE_VOTRE_PDF"
width="100%"
height="600"
style="border: none;">
<p>Votre navigateur ne supporte pas les iframes.
<a href="URL_DE_VOTRE_PDF">Télécharger le PDF</a>
</p>
</iframe>
2. Utilisation de Google Docs Viewer
<iframe src="https://docs.google.com/viewer?url=URL_DE_VOTRE_PDF&embedded=true"
width="100%"
height="600"
style="border: none;">
</iframe>
3. Avec un plugin WordPress
Plugin recommandé : « PDF Embedder »
- Installez le plugin « PDF Embedder »
- Téléchargez votre PDF dans la médiathèque
- Utilisez le shortcode :
[pdf-embedder url="URL_DU_PDF"]
Plugin « Embed PDF Viewer »
- Shortcode :
[pdfviewer width="100%" height="600px"]URL_DU_PDF[/pdfviewer]
4. Étapes détaillées
A. Télécharger le PDF
- Allez dans Médias > Ajouter
- Téléchargez votre fichier PDF
- Copiez l’URL du fichier
B. Ajouter l’iframe
- Éditez votre page/article
- Passez en mode HTML/Texte
- Collez le code iframe
- Remplacez
URL_DE_VOTRE_PDF
par l’URL réelle
5. CSS pour améliorer l’affichage
.pdf-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 75%; /* Ratio 4:3 */
}
.pdf-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
6. Version responsive
<div class="pdf-container">
<iframe src="URL_DE_VOTRE_PDF"
title="Document PDF">
</iframe>
</div>
7. Considérations importantes
- Sécurité : Vérifiez que vos PDFs ne contiennent pas d’informations sensibles
- Performance : Les gros PDFs peuvent ralentir le chargement
- Compatibilité : Tous les navigateurs ne gèrent pas les PDFs de la même façon
- Mobile : Testez l’affichage sur mobile
8. Alternative avec un bouton de téléchargement
<div class="pdf-embed">
<iframe src="URL_DE_VOTRE_PDF" width="100%" height="600"></iframe>
<p><a href="URL_DE_VOTRE_PDF" download>Télécharger le PDF</a></p>
</div>