Wie Sie ein PDF in WordPress einbinden

Das Einbinden eines PDF-Viewers in WordPress hält Nutzer auf Ihrer Website und verbessert ihr Erlebnis. Die Alternative – ein erzwungener Download auf die Festplatte – stört dieses Erlebnis, da man die Seite verlassen muss, nur um die Datei zu lesen. Halten Sie Nutzer auf Ihrer Website, und die Verweildauer steigt, die Interaktion mit Ihrer Marke bleibt bestehen, und sie haben weiterhin die Möglichkeit, die Datei herunterzuladen, wenn sie möchten. 

Doch wie fügen Sie eine solche Funktion Ihrer Website hinzu? Ob Sie ein Restaurant sind, das eine Speisekarte anzeigt, eine B2B-Agentur, die eine Fallstudie teilt, oder ein Dozent, der einen Lehrplan auf WordPress bereitstellt – der native Gutenberg-Editor ist nicht immer die beste Lösung, um ein PDF in WordPress einzubinden. Er verlässt sich auf den Browser des Besuchers, um das PDF inline darzustellen. Außerdem hat der Gutenberg-PDF-Einbettungsblock eine dokumentierte Historie von Problemen in Safari, was Entwicklern Kopfschmerzen bereitet. 

Um einen zuverlässigen, individuellen PDF-Viewer auf WordPress mit Navigationssteuerung zu erhalten, der in jedem Browser korrekt angezeigt wird, können sich Website-Betreiber auf zwei Wege verlassen: die Installation eines Dokument-Viewer-Plug-ins aus dem Repository oder die Verwendung eines kostenlosen, schlanken, serverlosen Widgets, das die Seitengeschwindigkeit schützt.

In diesem Artikel behandle ich beide Methoden, um ein PDF in WordPress einzufügen. Für jede Option gibt es eine Schritt-für-Schritt-Anleitung, damit Sie die beste Lösung für sich auswählen können.

Watch on youtube

How to Add a PDF Viewer in WordPress

Option 1: Ein spezielles WordPress-PDF-Viewer-Plug-in installieren

Der standardmäßige WordPress-Weg ist die Installation eines PDF-Einbettungs-Plug-ins von Drittanbietern. So gehen Sie dabei vor:

1. Durchsuchen Sie das WordPress-Plugin-Verzeichnis. In diesem Beispiel haben wir nach „PDF embed“ gesucht.

2. Wählen Sie Ihr Plug-in aus und klicken Sie auf die Schaltfläche Download.

3. Installieren Sie das Plug-in in WordPress, indem Sie im Seitenmenü unter Plugins zu Plugin hinzufügen navigieren, dann auf Plugin hochladen und Datei auswählen klicken. Es öffnet sich ein Fenster, in dem Sie die Datei aus den Ordnern auf Ihrem Computer auswählen können.

4. Klicken Sie auf Datei auswählen, um die .zip-Datei des Plugins von Ihrem Computer auszuwählen, und klicken Sie dann auf Jetzt installieren, um mit der Installation fortzufahren.

5. Erstellen Sie einen Shortcode, um den Viewer darzustellen.

Der Arbeitsablauf ist einfach genug. Doch wie bereits erwähnt, funktioniert er nicht immer in allen Browsern, und es handelt sich um eine Lösung, die auf einem speziellen Plug-in beruht, das Komplikationen verursachen kann.

Diese Plug-ins von Drittanbietern können zum Beispiel

• Ihre Website belasten: Dies kann sich auf Dinge wie die Seitengeschwindigkeit und die Core Web Vitals auswirken. Zugegeben, anständige Plug-ins und komprimierte PDF-Dateien sollten das eigentlich nicht tun, aber prüfen Sie immer die Bewertungen und lesen Sie, was andere Website-Administratoren über die Auswirkungen der Installation Ihres gewählten Plug-ins sagen.
• Nützliche Funktionen hinter einer Bezahlschranke verbergen: Wenn Sie Ihren Nutzern einen Vollbild-Lesemodus, kontinuierliches Scrollen oder eine individuelle Download-Schaltfläche anbieten möchten, sind Sie in der Regel gezwungen, eine Premium-Lizenz zu erwerben.

Wenn Sie all das lieber umgehen möchten, folgt als Nächstes eine Alternative zum WordPress-PDF-Plug-in.

Option 2: Ein kostenloses, anpassbares PDF-Einbettungs-Widget hinzufügen (empfohlen)

Wenn Sie einen zuverlässigen, voll ausgestatteten PDF-Viewer wünschen, ohne für jährliche Plug-in-Verlängerungen zu zahlen, sich auf inkonsistente browsereigene Darstellung zu verlassen und Ihr Frontend zu verlangsamen, ist die beste Lösung eine gehostete Einbettung.

Genau das bietet das Jotform PDF-Einbettungs-Widget. So funktioniert es:

1. Laden Sie Ihre PDF-Datei hoch, indem Sie sie per Drag-and-drop in den Upload-Bereich auf der linken Seite ziehen oder auf PDF hochladen klicken.

2. Verwenden Sie die Stil-Einstellungen, um den Viewer visuell so zu konfigurieren, dass er das Erscheinungsbild Ihrer Website erhält.

3. Nachdem Sie auf „Weiter“ geklickt haben, kopieren Sie den generierten iFrame-Code, indem Sie auf Code kopieren klicken.

4. Fügen Sie den generierten Code in einen standardmäßigen „Custom HTML“-Block auf Ihrer WordPress-Website ein.

Das Ergebnis ist ein einwandfreier, geräteübergreifender PDF-Viewer, der die gesamte aufwendige Darstellung vollständig außerhalb des Servers abwickelt, sodass Verarbeitung und Ladezeit nicht beeinträchtigt werden.

Ich habe das auf meiner Website ausprobiert, um zu testen, wie schnell ich es einrichten kann. So sieht der PDF-Viewer aus:

Es dauerte weniger als fünf Minuten, das PDF einzubinden, und es sieht großartig aus! Zugegeben, ich habe keine neue Datei hochgeladen oder den Stil verändert, aber selbst wenn ich das getan hätte, ist dies eine unglaublich schnelle Methode, um ein PDF kostenlos in WordPress einzubinden.

Mit Jotform können Sie Ihre Dokumente hochladen und erhalten die Garantie für ein konsistentes, professionelles Leseerlebnis auf jedem Gerät und in jedem Browser – inklusive nahtlosem Scrollen und nativen Steuerungselementen – und das völlig kostenlos. Und da es sich um eine serverunabhängige Einbettung handelt, verlangsamt sie weder die Ladezeiten Ihrer WordPress-Seite, noch belegt sie Speicherplatz in Ihrer Mediathek oder drängt Sie zu einer teuren Premium-Plug-in-Stufe.

Verbessern Sie Ihre WordPress-Website mit intelligenten, serverlosen Widgets

Das PDF-Einbettungs-Widget von Jotform ist nur ein Werkzeug in einem viel größeren Werkzeugkasten. Die umfassende Bibliothek an kostenlosen Website-Widgets von Jotform deckt Dutzende weiterer typischer WordPress-Problemstellen ab, und jedes einzelne davon funktioniert auf dieselbe serverunabhängige Weise:

• Keine Plug-in-Installation
• Kein Aufblähen der Mediathek
• Keine jährliche Lizenz, die zwischen Ihnen und den Funktionen steht, die Sie tatsächlich wünschen

Sobald Sie Jotform nutzen, werden Sie mit weiteren großartigen Widgets verwöhnt, die das Nutzererlebnis Ihrer Website verbessern, darunter das

• FAQ-Widget: Verwandelt lange Blogbeiträge und Pillar-Seiten in überfliegbare, ausklappbare Antworten, ohne dass Sie ein spezielles Accordion-Plug-in installieren müssen
• QR-Code-Widget: Stattet eine Speisekarte, eine herunterladbare Ressource oder ein Druckstück mit einem scannbaren Link zurück zu Ihrer Website aus
• Popup-Widget: Erfasst E-Mail-Adressen oder bewirbt ein Angebot, ohne dass Sie ein schweres, skriptlastiges Popup-Plug-in zu Ihrem Theme hinzufügen müssen

Noch besser: Es gibt die Jotform-WordPress-Integration, die Ihre Widgets und das WordPress-Formulare-Plug-in von Jotform mit einem einzigen Konto verbindet, sodass Sie alles an einem Ort verwalten können.

Als wachsendes Unternehmen oder als Creator sollte die Leistung Ihres Servers für die Abwicklung von Verkäufen und Traffic genutzt werden, nicht für das Rendern von Dokumenten und das Ausführen schwerer Skripte. Indem Sie zu kostenlosen, serverunabhängigen Tools wie denen von Jotform greifen, können Sie Ihren Besuchern ein hochwertiges, äußerst reaktionsschnelles Website-Erlebnis bieten, ohne Ihrer Website mehr Arbeit abzuverlangen, als nötig ist.