Das Einbetten einer PDF-Datei in Ihre WordPress-Beiträge oder -Seiten kann eine nützliche Möglichkeit sein, den Besuchern Ihrer Website Inhalte anzuzeigen. Wenn Sie beispielsweise Restaurantmenüs, Reiserouten, Kursmaterialien oder E-Books teilen möchten, können Sie diese Inhalte als PDFs in Ihre Website einbetten. Besucher können die PDF-Dateien dann nach Bedarf lesen, herunterladen oder ausdrucken.
In diesem Tutorial sehen wir uns zwei schnelle und einfache Methoden an, die Ihnen beim Hochladen und Einbetten einer PDF-Datei in WordPress helfen. Wir besprechen die Installation und Verwendung des kostenlosen WordPress-Plugins PDF Embedder sowie eine Option ohne Plugin, bei der ein PDF über Google Drive eingebettet wird. Lass uns anfangen.
1. Verwenden Sie ein WordPress-Plugin, um eine PDF-Datei einzubetten
Die Verwendung eines WordPress-Plugins zum Einbetten einer PDF-Datei in eine Seite oder einen Beitrag Ihrer Website ist eine Methode, die wir WordPress-Anfängern empfehlen, da dies die schnellste und einfachste Option ist. Für diesen Job stehen zahlreiche Plugins zur Verfügung, die jeweils etwas anderes bieten:
- PDF-Einbetter (kostenlos) – Lässt Sie PDFs hochladen und direkt in Ihre Website einbetten.
- PDF-Viewer einbetten (kostenlos) – ermöglicht Ihnen das Einbetten eines PDFs aus der Mediathek oder von einer Drittanbieter-Site über oEmbed.
- Google Drive-Einbetter (kostenlos) – ermöglicht Ihnen den Zugriff auf Ihre Google Drive-Dokumente von Ihrem WordPress-Dashboard aus. PDF-Dateien können dann direkt in Beiträge oder Seiten eingebettet werden.
- PDF Viewer für WordPress (Premium) – bietet eine Auswahl beeindruckender Funktionen, darunter erweiterte Kontrolle über Anzeigeoptionen, ein leistungsstarkes Admin-Panel, Google Analytics-Tracking und mehr.
Alle oben genannten Plugins sind großartige Optionen, aber unsere Empfehlung ist, PDF Embedder zu verwenden. Es ist ein kostenloses WordPress-Plugin, mit dem Sie PDFs direkt in jede Seite oder jeden Beitrag Ihrer Website hochladen und einbetten können. Es bettet PDFs mit JavaScript ein, mit dem Sie das Erscheinungsbild Ihrer Dokumente anpassen können.
Standardmäßig zeigt PDF Embedder PDFs automatisch in ihrer Originalgröße an (wenn sie zu groß sind, füllen sie nur die verfügbare Breite aus). Sie können auch eine Breite und Höhe für jede eingebettete PDF-Datei angeben. Alle JavaScript- und anderen Dateien werden von Ihrem eigenen Server bereitgestellt, sodass keine potenziell unzuverlässigen Dritten beteiligt sind.
Hier ist ein Beispiel dafür, wie ein PDF auf Ihrer Website aussieht, wenn Sie PDF Embedder verwenden:
Lassen Sie uns nun als nächstes herausfinden, wie Sie das PDF Embedder-Plugin installieren und verwenden.
Schritt 1: Installieren Sie PDF Embedder auf Ihrer WordPress-Website
Um PDF Embedder zu installieren, öffnen Sie Ihr WordPress-Dashboard und klicken Sie auf Plugins > Neu hinzufügen.
Geben Sie dann in der Plugin-Suchfunktion ein PDF-Einbetter. Nachdem das Plugin abgerufen wurde, wählen Sie Installieren Jetzt, dann aktivieren Sie.
Sie werden feststellen, dass PDF Embedder nun auf Ihrer Website installiert wurde. Um mehr über die Installation eines WordPress-Plugins zu erfahren, lesen Sie auch unsere Schritt-für-Schritt-Anleitung.
Schritt 2: Konfigurieren Sie die Einstellungen von PDF Embedder
Um die Einstellungsseite für PDF Embedder zu öffnen, klicken Sie auf Einstellungen > PDF-Einbetter in Ihrem WordPress-Dashboard.
Die kostenlose Version von PDF Embedder bietet eingeschränkte Einstellungen. Zu den Optionen gehören:
- Höhe und Breite – Hier können Sie eine bestimmte Höhe und Breite für Ihre PDFs einstellen. (Dies ist nur erforderlich, wenn Sie eine bestimmte Größe im Sinn haben. Andernfalls zeigt PDF Embedder PDFs in ihrer Originalgröße an).
- Position der Symbolleiste – Wählen Sie aus, ob die Symbolleiste oben oder unten auf der Seite angezeigt werden soll. Die Symbolleiste ermöglicht Benutzern das Vergrößern und Verkleinern der PDF-Datei sowie das Umschalten zwischen Seiten.
- Symbolleisten-Hover – Wählen Sie aus, ob die Symbolleiste dauerhaft sichtbar sein soll oder nur angezeigt werden soll, wenn ein Benutzer mit der Maus über das PDF fährt.
Wenn Sie die Einstellungen konfiguriert haben, denken Sie daran, auf zu klicken Änderungen speichern am Ende der Seite.
Schritt 3: PDF hochladen und einbetten
Um ein PDF mit PDF Embedder hochzuladen und einzubetten, befolgen Sie einfach den gleichen einfachen Vorgang wie beim Hochladen und Einbetten von Bildern.
Öffnen Sie den Beitrag oder die Seite, auf der Sie das PDF anzeigen möchten. Dann von innerhalb der Editor, klicke auf Medien hinzufügen.
Sobald die Medienbibliothek geöffnet hat, klicken Sie auf Dateien hochladen > Dateien auswählen. Laden Sie dann die PDF-Datei von Ihrem Computer hoch.
Nachdem das PDF in die Medienbibliothek hochgeladen wurde, wählen Sie die Datei aus und klicken Sie auf ‚In Beitrag einfügen‘.
In Ihrem Post-Editor sehen Sie nun einen Shortcode für Ihr PDF.
Abschließend können Sie den Beitrag in der Vorschau anzeigen oder veröffentlichen. Sie sollten nun feststellen, dass das PDF im Frontend Ihrer WordPress-Website angezeigt wird.
2. Ein PDF in WordPress mit Google Drive einbetten
Die zweite Methode, die wir besprechen, um Ihnen zu helfen, ein PDF in Ihre WordPress-Website einzubetten, verwendet Google Drive. Wenn Sie lieber ein PDF in Ihre Website einbetten möchten, ohne ein Plugin verwenden zu müssen, dann ist dies über Google Drive die richtige Methode für Sie.
Sie müssen die PDF-Datei auf Ihr Google Drive hochladen und dann die Datei mithilfe des iFrame-Codes in Ihre Website einbetten. Hier ist ein Beispiel dafür, wie ein PDF auf Ihrer Website angezeigt wird, wenn Sie sich für die Verwendung von Google Drive entscheiden:
Lassen Sie uns diesen Prozess nun Schritt für Schritt durchgehen.
Schritt 1: Laden Sie die PDF-Datei in Google Drive hoch
Melden Sie sich bei Google Drive an oder erstellen Sie bei Bedarf ein neues Konto.
Sie müssen nun das PDF in Ihr Google Drive-Konto hochladen. Also klick auf Neu > Datei-Upload aus dem Menü auf der linken Seite und wählen Sie die Datei von Ihrem lokalen Computer aus.
Schritt 2: Machen Sie das PDF teilbar
Nachdem das PDF auf Google Drive hochgeladen wurde, doppelklicken Sie auf die Datei. Wenn die Datei geöffnet wird, klicken Sie auf das Drei-Punkte-Symbol in der rechten Ecke der oberen Menüleiste. Wählen Sie dann ‚In neuem Fenster öffnen‘.
Sobald das PDF geöffnet ist, klicken Sie erneut auf das Symbol mit den drei Punkten und wählen Sie diesmal Teilen.
Ein Popup mit dem Titel ‚Mit anderen teilen‘ wird nun erscheinen. Klicke auf ‚Teilbaren Link abrufen‘. Durch diese Aktion kann Ihr PDF öffentlich angezeigt werden.
Wenn Sie nicht möchten, dass Ihr PDF von Ihren Benutzern heruntergeladen, kopiert oder gedruckt wird, klicken Sie auf das Fortschrittlich Knopf und Check „Optionen zum Herunterladen, Drucken und Kopieren für Kommentatoren und Betrachter deaktivieren“.
Dann klick auf Fertig.
Schritt 3: HTML-Code einbetten
Sie müssen nun den Einbettungscode finden und kopieren und ihn dann in Ihre WordPress-Website einbetten. Um den Einbettungscode zu finden, klicken Sie auf das Symbol mit den drei Punkten und wählen Sie ‚Element einbetten‘.
Kopieren Sie dann den angezeigten HTML-Code.
Wechseln Sie nun zurück zu Ihrem WordPress-Dashboard und öffnen Sie die Seite oder den Beitrag, auf der Sie das PDF anzeigen möchten. Wechseln Sie zur Textansicht und fügen Sie dann den HTML-Code ein.
Zeigen Sie jetzt eine Vorschau des Beitrags an oder veröffentlichen Sie ihn, um zu sehen, wie Ihr PDF auf Ihrer Live-Site angezeigt wird.
Abschließende Gedanken zum Einbetten einer PDF-Datei in WordPress
Beide in diesem Artikel erwähnten Methoden sind gute Optionen, wenn es darum geht, eine PDF-Datei in WordPress einzubetten. Wählen Sie also einfach die Methode, die Ihren Bedürfnissen und Fähigkeiten am besten entspricht. Sie können dann schnell eine breite Palette von PDFs auf Ihrer Website erstellen, einbetten und anzeigen, die Ihnen helfen, mit Ihrem Publikum zu interagieren und es zu versorgen.
Wie betten Sie eine PDF-Datei in Ihre WordPress-Website ein? Bitte teilen Sie Ihre Gedanken in den Kommentaren unten mit…