PDF in eine WordPress-Seite einbinden und anzeigen? So gelingt’s!

Sie haben eine WordPress Seite und möchten auf dieser auch PDFs einbetten und anzeigen können? Sie möchten dies aber, wenn möglich, ohne neues Plugin tun, da zu viele Plugins Ihre Website immer mehr verlangsamen? Kein Problem, es geht auch ohne! Wie, das zeigen wir Ihnen in dieser einfachen Anleitung. Und keine Sorge, wer doch ein Plugin verwenden möchte, der findet weiter unten ebenfalls eine Anleitung.

Warum kein zusätzliches Plugin nutzen?

Sicherlich können Sie mit ausgewählten Plugins arbeiten, um ein PDF-Dokument auf Ihrer Website anzeigen zu lassen. Wie, das erklären wir Ihnen weiter unten in den letzten Abschnitten. Dies ist jedoch je nach Seite nicht unbedingt ratsam. Plugins erhöhen die Zahl der HTTP-Requests Ihrer WordPress Seite und führen so dazu, dass die Seite langsamer lädt, da sie beim Aufrufen mehr arbeiten muss. Dies kann für Ihre Nutzer störend sein und mit etwas Pech sogar dazu führen, dass es zu einer höheren Absprungrate kommt, da die User nicht warten möchten. Bei einigen Seiten werden allerdings so wenige (oder gar so viele) Plugins verwendet, dass es kaum einen Unterschied macht und in diesen Fällen kann ein Plugin durchaus sinnvoll und hilfreich sein. Damit Sie frei entscheiden können, zeigen wir Ihnen in diesem Artikel gleich zwei Wege, wie Sie PDF-Dateien auf Ihrer Seite anzeigen können.

Warum überhaupt ein PDF auf der Website anzeigen lassen?

Es kann viele Gründe geben, warum man ein PDF-Dokument auf der eigenen WordPress Seite anzeigen lassen möchte. Vielleicht haben Sie ein bereits fertiges Dokument, welches Sie für andere Zwecke nutzen, jedoch ebenfalls auf Ihrer Website integrieren möchten. PDFs sind außerdem sehr nützlich, da diese Dateien immer das gleiche Layout haben – ganz egal auf welchem ​​Gerät sie angezeigt werden. Hier verschiebt sich also auch bei der Smartphone-Anzeige nichts. Durch das Einbetten von PDF-Dateien in WordPress können Sie außerdem Ihre Dateien mit Ihren Usern teilen und gleichzeitig Besucher auf Ihrer Website halten, da diese nicht über einen externen Downloadlink abspringen. Dies wäre allerdings der Fall, wenn Sie Ihre PDF-Dateien in dem Abschnitt „Medien“ standardmäßig hochladen und so zum WordPress-Beitrag hinzufügen. WordPress im default-mode zeigt Ihre PDFs nämlich nicht an, sondern nur den Namen und einen Link Ihrer Datei. Ihre Besucher können dann über den Link auf das PDF zugreifen und es gegebenenfalls downloaden. Das bedeutet aber im Umkehrschluss, dass diese User Ihre Seite verlassen – was wiederum zu einer höheren Absprungrate führt. Die bessere Variante ist daher, Ihre Datei so einzubetten, dass Ihre Besucher Sie einfach und unkompliziert direkt auf Ihrer Seite ansehen und darauf zugreifen können. Wie? Das erfahren Sie in den folgenden Abschnitten.

Ein PDF auf Ihrer WordPress Seite einbinden

Wer mit PDF-Dateien arbeitet, kann sich zunächst einmal viel Arbeit ersparen, indem die einzelnen Dateien, nach Möglichkeit zusammengeführt werden. So müssen Sie nämlich nur eine Datei hochladen und nicht mehrere. Haben Sie also beispielsweise mehrere Seiten eines zusammenhängenden Dokumentes oder Ordners, kann es Sinn machen, diese Daten gemeinsam hochzuladen. Hier können Sie PDF Dateien zusammenführen.

Ob nun aber eine oder mehrere Dateien: Das PDF direkt bei Ihnen auf der Seite anzuzeigen können Sie entweder mit einem Plugin machen (welches aber Ihre Seite verlangsamen kann, wie oben erwähnt), oder aber wie folgt:

Schritt 1: Stellen Sie sicher, dass Ihre WordPress Version möglichst neu ist. Bei einigen älteren Versionen könnte diese Technik unter Umständen nicht funktionieren.

Schritt 2: Gehen Sie zu dem Post in Ihrem WordPress-Backend, dem Sie die PDF-Datei zur Ansicht hinzufügen möchten.

Schritt 3: Klicken Sie hier auf die Schaltfläche „Medien hinzufügen“, dann auf die Registerkarte „Dateien hochladen“ und anschließend auf die Schaltfläche „Datei auswählen“, um die gewünschte PDF-Datei in Ihre WordPress-Mediengalerie hochzualden.

Schritt 4: Gehen Sie nun zurück zu Ihrem Beitrag und klicken Sie auf den Ort, wo Ihr PDF hinsoll. Anschließend klicken Sie oben rechts in Ihrem Texteditor auf „Text“.

Schritt 5: In Ihrem Texteditor fügen Sie nun folgenden Code ein:

<embed src=“https://ww.example.com/demo.pdf“ type=“application/pdf“ width=“774″ height=“774″></embed>

Schritt 5: Klicken Sie nun auf Medien hinzufügen, wählen Sie die PDF-Datei aus und kopieren Sie die auf der rechten Seite angegebene URL. Anschließen ersetzen Sie einfach https://ww.example.com/demo.pdf durch Ihre eigene PDF-Datei.

Doch lieber mit Plugin?

Wie oben schon erwähnt, können Sie natürlich auch den anderen Weg wählen und Ihr PDF mit einem Plugin einbetten. Hierzu gibt es verschiedene, beispielsweise den „PDF Embedder“. Dieser verwendet JavaScript zum Einbetten von Dateien mit einer voll funktionsfähigen Symbolleiste. Hier können Sie User sogar in die PDF-Datei hineinzoomen und darin navigieren. Ein weiteres Feature dieses Plugins ist, dass die mobile Version optimiert ist, die Anzeige ist also auf Smartphones ebenso gut wie auf dem Laptop. Um Ihre Datei mit diesem Plugin zu integrieren, gehen Sie wie folgt vor:

Schritt 1: Installieren Sie das PDF Embedder-Plugin und aktivieren Sie es.
Schritt 2: Gehen Sie im Plugin auf „Einstellungen“. Die Standardeinstellungen sind für die meisten Websites bereits geeignet, daher ist dieser Schritt optional. Mit den Einstellungen können Sie Höhe und Breite des PDF-Viewers steuern. Sie können hier außerdem die Symbolleiste oben oder unten im Viewer anzeigen lassen oder ganz ausblenden und nur anzeigen lassen, wenn der Benutzer mit der Maus über das Dokument fährt. In der Premium Version gibt es noch einige Extras. Nun noch Änderungen speichern und weiter.
Schritt 3: Betten Sie nun Ihr PDF in Ihren WordPress-Beitrag ein. Entweder geht dies durch den Blockeditor oder durch den klassischen Editor.

Mit dem Block Editor einfügen:

Zunächst erstellen Sie einen neuen Beitrag. Platzieren Sie dabei zunächst Ihren Cursor an der Stelle, an der Sie später das PDF einfügen möchten. Klicken Sie dann oben links auf die Schaltfläche „Block hinzufügen“. Anschließend klicken Sie auf „PDF Embedder“ unter dem Abschnitt „Text“. Nun können Sie eine neue PDF-Datei zu Ihrem Beitrag hochladen oder eine aus Ihrer Medienbibliothek auswählen, wie Sie es bereits von Bilddateien gewohnt sind. Wählen Sie also wie gewohnt Ihre Medien aus und laden Sie diese hoch. Das PDF wird nun Ihrem Dokument hinzugefügt. Achtung, nicht verwirrt sein: Sie sehen keine Vorschau des PDFs, während Sie den Beitrag bearbeiten. Stattdessen enthält der Block die URL der Datei. Das PDF ist jedoch eingebettet, sobald Sie Ihren beitrag speichern und sich die Vorschau anzeigen lassen.

Im klassischen Editor einfügen:

Das Einbetten einer PDF-Datei ist eben so einfach im klassischen Editor. Auch hier starten Sie zunächst einen neuen Beitrag oder öffnen den Beitrag, an dem Sie gerade arbeiten. Wieder platzieren Sie den Cursor dort, wo Sie Ihr PDF gern hätten. Nun ziehen Sie die PDF-Datei auf Ihre Seite und lassen die Maustaste los, wenn Sie die Meldung „Dateien zum Hochladen ablegen“ sehen. Hierbei wird die Datei automatisch in Ihre Mediathek hochgeladen und ausgewählt. Sie müssen nun also nur noch auf die Schaltfläche „In Beitrag einfügen“ klicken und so die PDF-Datei auf Ihrer Seite einfügen. Der PDF Embedder fügt Ihrem Beitrag einen Shortcode hinzu. Dieser sieht etwa so aus: [pdf-embedder url=“URLPDF“]. Nun wird die PDF-Datei auch hier angezeigt, wenn Sie den Beitrag speichern und die Vorschau anzeigen.

Tool-Tipp:

Folgende Apps nutze ich in meinem Blog. Zu den meisten dieser Apps findest du auf meinem YouTube-Kanal oder direkt hier eine ausführliche Review.

Keyword-Strategie: WriterZen, LongTailPro, Link Assistant
Content-Erstellung: Frase, StoryChief, Bramework, NeuronWriter
Optimierung Pagespeed: WP Rocket, ShortPixel
Optimierung Conversion: Convertbox
Sicherheit: WPVivid

Du suchst nach einer Lösung für dein Marketing, deiner SEO- oder Content-Strategie? Dann schau auch gern in meiner Akademie vorbei: Businesserfolg.de

Deine Meinung ist gefragt!

Hat dir der Artikel gefallen? Oder fehlt etwas?
Hinterlasse mir gern einen Kommentar!

Platz für deinen Kommentar!

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Neue Themes

Neu: Scroll-Effekte, WooCommerce-Module u.v.m.

Galerie

Workshops

Workshops, Academy, Magazin, Masterclass

Starten

Geschenkt

Handbuch WordPress,
Workshop SEO & Marketing

Download

Überblick

Galerie

Features

Preise