Blog

Hoe je een PDF-viewer toevoegt aan WordPress

Voor het laatst bijgewerkt: 
Hoe je een PDF-viewer toevoegt aan WordPress

Door een pdf-viewer in WordPress in te sluiten, houdt u gebruikers op uw site en verbetert u hun ervaring. Het alternatief – ze dwingen een bestand naar hun harde schijf te downloaden – verstoort die ervaring, omdat ze uw site moeten verlaten om het bestand te lezen. Houd gebruikers op uw website, en de tijd op de pagina neemt toe, de betrokkenheid bij uw merk blijft behouden, en ze hebben nog steeds de mogelijkheid om het bestand te downloaden als ze dat willen. 

Maar hoe voegt u er een toe aan uw site? Of u nu een restaurant bent dat een menu toont, een B2B-bureau dat een casestudy deelt, of een docent die een studiegids aanbiedt op WordPress, de ingebouwde Gutenberg-editor is niet altijd de beste oplossing om een pdf in te sluiten in WordPress. Het leunt op de browser van de bezoeker om de pdf inline weer te geven. Bovendien heeft het Gutenberg pdf-insluitblok een gedocumenteerde geschiedenis van storingen in Safari, wat voor hoofdpijn bij ontwikkelaars zorgt. 

Om een betrouwbare, aangepaste pdf-viewer op WordPress te krijgen met navigatieknoppen die in elke browser werken, kunnen site-eigenaren rekenen op twee manieren: het installeren van een documentviewer-plug-in uit de repository, of het gebruiken van een gratis, lichtgewicht, serverloze widget die de paginasnelheid beschermt.

In dit artikel behandel ik beide methoden om een pdf toe te voegen aan WordPress. Ik geef bij elke optie een stapsgewijze handleiding, zodat u de beste oplossing voor u kunt kiezen.

Optie 1: Installeer een speciale WordPress pdf-viewer-plug-in

De standaardmanier in WordPress is het installeren van een pdf-insluit-plug-in van derden. Zo doet u dat:

  1. Zoek in de WordPress Plugin Directory. In dit voorbeeld hebben we gezocht op “PDF embed.”
  2. Zoekresultaten in de WordPress Plugin Directory voor pdf-insluit-plug-ins
  1. Kies uw plug-in en klik op de knop Download.
  2. Pagina van de PDF Embedder-plug-in met de knop Download gemarkeerd
  1. Installeer de plug-in op WordPress door in het zijmenu onder Plugins naar Add Plugin te navigeren, en vervolgens op Upload Plugin en Choose File te klikken. Er wordt een venster geopend waarin u het bestand kunt selecteren uit de mappen op uw computer.
  2. WordPress-scherm Add Plugins met Upload Plugin gemarkeerd
  1. Klik op Choose File om het .zip-bestand van de plug-in op uw computer te selecteren, en klik vervolgens op Install Now om door te gaan met de installatie.
  2. WordPress plug-in-uploadscherm met Choose File en Install Now gemarkeerd
  1. Genereer een shortcode om de viewer weer te geven.

De workflow is eenvoudig genoeg. Maar zoals ik al zei, werkt het niet altijd in alle browsers, en het is een oplossing die afhankelijk is van een speciale plug-in die complicaties kan veroorzaken.

Deze plug-ins van derden kunnen bijvoorbeeld

  • Gewicht toevoegen aan uw website: Dit kan gevolgen hebben voor zaken als paginasnelheid en Core Web Vitals. Toegegeven, fatsoenlijke plug-ins en gecomprimeerde pdf-bestanden zouden dit eigenlijk niet moeten doen, maar controleer altijd de recensies en lees wat andere websitebeheerders zeggen over de impact van het installeren van uw gekozen plug-in.
  • Handige functies achter een betaalmuur plaatsen: Als u uw gebruikers een leesmodus op volledig scherm, doorlopend scrollen of een aangepaste downloadknop wilt bieden, wordt u meestal gedwongen een premium licentie aan te schaffen.

Als u dit alles liever overslaat, komt er hierna een alternatief voor een WordPress pdf-plug-in.

Optie 2: Voeg een gratis, aanpasbare pdf-insluitwidget toe (aanbevolen)

Als u een betrouwbare, volledig uitgeruste pdf-viewer wilt zonder te betalen voor jaarlijkse plug-inverlengingen, zonder afhankelijk te zijn van inconsistente browser-native weergave en zonder uw front-end te vertragen, is de beste oplossing een gehoste insluiting.

Dat is precies wat de Jotform PDF Embed Widget biedt. Zo werkt het:

  1. Upload uw pdf-bestand door het naar het uploadgebied aan de linkerkant te slepen en neer te zetten, of klik op Upload PDF.
  2. Jotform PDF Embed Widget met een geüploade en voorbeeld weergegeven pdf
  1. Gebruik de Styles-instellingen om de viewer visueel te configureren, zodat deze de look-and-feel van uw site heeft.
  2. PDF Embed Widget Styles-instellingen voor het aanpassen van de viewer
  1. Nadat u op Continue hebt geklikt, kopieert u het gegenereerde iFrame-fragment door op Copy Code te klikken.
  2. Insluitcodevenster met de knop Copy Code gemarkeerd
  1. Plak de gegenereerde code in een standaard “Custom HTML”-blok op uw WordPress-website.
  2. WordPress-editor met het Custom HTML-blok geselecteerd

Het resultaat is een feilloze pdf-viewer die op alle apparaten werkt en alle zware weergave volledig buiten de server afhandelt, zodat de verwerking en laadtijd niet worden beïnvloed.

Ik heb dit op mijn website uitgevoerd om te testen hoe snel ik het kon instellen. Zo ziet de pdf-viewer eruit:

Jotform PDF Embed Widget weergegeven op een WordPress-pagina met een pdf-voorbeeld en downloadknop

Het insluiten van de pdf duurde minder dan vijf minuten, en het ziet er geweldig uit! Toegegeven, ik heb geen nieuw bestand geüpload of de stijl aangepast, maar zelfs als ik dat wel had gedaan, is dit een ongelooflijk snelle methode om gratis een pdf toe te voegen aan WordPress.

Met Jotform kunt u uw documenten uploaden en bent u verzekerd van een consistente, professionele kijkervaring op elk apparaat en in elke browser – compleet met naadloos scrollen en native bediening – geheel gratis. En omdat het een off-server-insluiting is, vertraagt het de laadtijden van uw WordPress-pagina niet, neemt het geen opslagruimte in uw mediabibliotheek in beslag, en dwingt het u niet richting een dure premium plug-in-versie.

Pro Tip

Meer ondersteuning nodig bij WordPress? Lees de blogpost van Jotform over hoe u WordPress gebruikt.

Geef uw WordPress-site een boost met slimme, serverloze widgets

De PDF Embed Widget van Jotform is slechts één hulpmiddel in een veel grotere gereedschapskist. De volledige bibliotheek met gratis websitewidgets van Jotform dekt tientallen andere veelvoorkomende WordPress-knelpunten, en ze werken allemaal op dezelfde off-server-manier:

  • Geen plug-in-installatie
  • Geen opgeblazen mediabibliotheek
  • Geen jaarlijkse licentie die tussen u en de functies staat die u echt wilt

Zodra u Jotform gebruikt, raakt u verwend met andere geweldige widgets die de gebruikerservaring van uw website verbeteren, waaronder de

  • FAQ Widget: Zet lange blogposts en pijlerpagina’s om in scanbare, uitklapbare antwoorden zonder een speciale accordeon-plug-in te installeren
  • QR Code Widget: Voorziet een menu, downloadbare bron of drukwerk van een scanbare link terug naar uw site
  • Popup Widget: Verzamelt e-mailadressen of promoot een aanbieding zonder een zware, scriptrijke popup-plug-in aan uw thema toe te voegen

Nog beter: er is de Jotform-WordPress-integratie, die uw widgets en de plug-in voor WordPress-formulieren van Jotform koppelt aan één account, zodat u alles op één plek kunt beheren.

Als groeiend bedrijf of maker zou de kracht van uw server moeten gaan naar het afhandelen van verkoop en verkeer, en niet naar het weergeven van documenten en het uitvoeren van zware scripts. Door te kiezen voor gratis, off-server-tools zoals die van Jotform, kunt u uw bezoekers een premium, zeer responsieve website-ervaring bieden zonder uw site meer werk te laten verrichten dan nodig is.

Dit artikel is bedoeld voor WordPress-site-eigenaren, B2B-bedrijven, docenten en restaurants die leesbare documenten (whitepapers, menu’s, roosters) rechtstreeks op hun pagina’s willen weergeven zonder gebruikers te dwingen tot downloaden of hun site op te blazen met zware plug-ins.

Verstuur Opmerking:

Jotform Avatar
Deze site wordt beschermd door reCAPTCHA en het Privacybeleid en de Servicevoorwaarden van Google zijn van toepassing.

Podo Comment Wees de eerste om een reactie te geven.