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

  1. Allez dans Médias > Ajouter
  2. Téléchargez votre fichier PDF
  3. Copiez l’URL du fichier

B. Ajouter l’iframe

  1. Éditez votre page/article
  2. Passez en mode HTML/Texte
  3. Collez le code iframe
  4. 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>