Pdf sur Wordpress: attention à la vue mobile

Quand on veut afficher un pdf sur un site fait avec Wordpress, les solutions sont nombreuses.

Il existe des dizaines de plugins et les versions de Wordpress les plus récentes permettent même d' "embarquer" le pdf (une fois qu'on l'a mis dans les Medias ou qu'on a son adresse exacte).

Oui mais .. avez-vous vérifié comment la page avec pdf apparaît sur mobile ?

Si sur desktop, on voit bien le pdf "embed" sur la page, il n'en est pas de même sur mobile où souvent on ne voit rien, ou juste un lien "download the pdf"..

Comment résoudre ce problème ?

On peut passer par un plugin payant mais il en existe un gratuit qui permet de bien voir le pdf ET sur desktop ET sur mobile: PDF Embedder (il existe aussi une version Premium et une version qui permet de sécuriser le pdf -->  https://wp-pdf.com/ ).

Avec PDF Embedder, il va falloir utiliser les codes courts de Wordpress de la façon suivante:

<!-- wp:shortcode -->
[pdf-embedder url="https://www.toto.com/nomdupdf.pdf"]
<!-- /wp:shortcode -->

où https://www.toto.com/nomdupdf.pdf est l'url directe du pdf.

Si vous avez déjà utilisé un autre plugin dont vous vous apercevez qu'il ne donne rien sur mobile (exemple Vanilla PDF qui pendant longtemps fut un top du pdf avec Wordpress avant d'être abandonné), la solution est d'utiliser un plugin de "Search and Replace" et de remplacer le code court de l'ancien plugin par le nouveau.

Par exemple dans le cas de Vanilla PDF, le code court était [pdf] url [/pdf]

On va donc chercher et remplacer

[pdf]https

par [pdf-embedder url="https

et .pdf[/pdf]

par .pdf"]

Si vous avez utilisé la méthode "embed" de wordpress, vous avez un code (si vous allez dans le code) de type:

<!-- wp:embed {"url":"urldupdf.pdf","type":"rich","providerNameSlug":"prise-en-charge-des-contenus-embarques"} -->
<figure class="wp-block-embed is-type-rich is-provider-prise-en-charge-des-contenus-embarques wp-block-embed-prise-en-charge-des-contenus-embarques"><div class="wp-block-embed__wrapper">
urldupdf.pdf
</div></figure>
<!-- /wp:embed -->

Et c'est donc tout ce code que vous pouvez remplacer par

[pdf-embedder url="urlpdf.pdf"]

Pourquoi passer par le code ? Parce que c'est plus pratique. Vous pouvez aussi le faire via le wysiwyg mais ça prendra + de temps pour récupérer l'url puis effacer l'ancien bloc.

Vérifiez bien ensuite, par le back-office de wordpress, en cherchant dans vos articles "pdf" que tous les articles s'affichent bien sur mobile.

SI vous avez une erreur dans l'apparence des pdfs, vérifiez les plugins d'optimisation de la vitesse comme par exemple autoptimize.. Il va falloir peut-être les configurer différemment.

Vous pouvez aussi "sécuriser" le tout en évitant les pdfs orphelins avec le plugin Attachment Pages Redirect qui va renvoyer automatiquement les documents attachés à une page VERS la page.