WordPress link zu PDF [2024] 💥
Sie sind zwar mit dem Hochladen von Bildern vertraut, aber was ist mit PDFs? Es ist einfach, PDFs in WordPress hochzuladen. Wir zeigen Ihnen, wie Sie schnell ein PDF zu WordPress hinzufügen und von überall auf Ihrer Website darauf verlinken können. Wir stellen auch Anweisungen bereit, wie das PDF für Besucher zum Download verfügbar gemacht werden kann.
Anzeige
Lassen Sie uns ein wenig vorbereiten. Melden Sie sich in Ihrem Wordpress-Backend an und gehen Sie zu „Medien“ >> „Neu hinzufügen“. Legen Sie einfach Ihr PDF dort ab, wie Sie es mit einem Bild tun würden. Gehen Sie nun zu „Medien“ >> „Bibliothek“ und klicken Sie auf die gerade hochgeladene Datei. Auf der rechten Seite sehen Sie die URL, die auf diese Datei verweist, kopieren Sie sie für später. Siehe Screenshot unten.
1. Mit Gutenberg auf ein PDF verlinken
"Datei"
Beginnen wir mit der gebräuchlichsten und einfachsten Art, in Wordpress auf eine PDF-Datei zu verlinken. Als erstes müssen wir einen Block öffnen, es gibt ein paar Blöcke, die wir verwenden können, wie "Absatz", "Schaltflächen" und "Datei".
Wir beginnen mit dem einfachsten Weg, dem "Datei"-Block. Klicken Sie auf das +, um einen Block hinzuzufügen, und klicken Sie auf „Datei“. Klicken Sie in dem Popup, das angezeigt wird, auf "Medienbibliothek" und wählen Sie das zuvor hochgeladene PDF aus. Jetzt sehen Sie das PDF geöffnet, das heißt, es wird auf der Website angezeigt. Um das PDF nicht anzuzeigen, sondern nur einen Link zum PDF zu erstellen, müssen Sie die Option "Inline-Einbettung anzeigen" rückgängig machen.
Alles, was jetzt noch übrig ist, ist der Titel der Datei, der auch anklickbar ist, und eine Schaltfläche mit der Aufschrift "Herunterladen". Benötigen Sie nur den Textlink, aber nicht den Button, dann machen Sie auch "Download-Button anzeigen" rückgängig. Siehe Screenshot unten.
"Schaltfläche"
Klicken Sie auf das +, um einen Block hinzuzufügen, und klicken Sie auf „Schaltflächen“. Schreiben Sie "Download" in die Schaltfläche. Klicken Sie auf das Link-Symbol und fügen Sie dort den Link zu Ihrem PDF ein (das haben wir am Anfang dieses Tutorials vorbereitet). Klicken Sie zum Abschluss auf „Enter“ auf Ihrer Tastatur. Wenn wir es so belassen, wird das PDF beim Klicken auf die Schaltfläche geöffnet, aber wir möchten es herunterladbar machen.
Wir müssen dem Link ein Download-Attribut hinzufügen. Klicken Sie im Menü auf die 3 Punkte und klicken Sie auf „Als HTML bearbeiten“. Siehe Screenshot unten.
Sie sehen nun den HTML-Code dieses Absatzes, und wir fügen dem Link ein Download-Attribut hinzu. Wir werden hinzufügen:
download="filename"am Ende des Links, wie im Screenshot unten zu sehen ist. Wenn eine Person auf diesen Link klickt, nimmt der Browser automatisch "filename" als Dateinamen. Sie können es beliebig ersetzen.
Das Ergebnis des vollständigen Links würde so aussehen.
<a href="https://webstick.blog/file" download="filename">example</a>Aktualisiere den Beitrag. Die Schaltfläche lädt jetzt das PDF herunter, wenn sie angeklickt wird.
"Absatz"
Klicken Sie auf das +, um einen Block hinzuzufügen, und klicken Sie auf „Absatz“. Schreiben Sie "Dies ist ein Testdownload". Markieren Sie „Download“ und klicken Sie auf das Link-Icon. Fügen Sie die URL in das PDF ein und drücken Sie „Enter“ auf Ihrer Tastatur. Wenn wir es so belassen, öffnet sich das PDF beim Klicken auf den Textlink, aber wir möchten es herunterladbar machen.
Wir müssen dem Link ein Download-Attribut hinzufügen. Klicken Sie im Menü auf die 3 Punkte und klicken Sie auf „Als HTML bearbeiten“. Siehe Screenshot unten.
Sie sehen nun den HTML-Code dieses Absatzes, und wir fügen dem Link ein Download-Attribut hinzu. Wir werden hinzufügen:
download="filename"am Ende des Links, wie im Screenshot unten zu sehen ist. Wenn eine Person auf diesen Link klickt, nimmt der Browser automatisch "Dateiname" als Dateinamen. Sie können es beliebig ersetzen.
Das Ergebnis des vollständigen Links würde so aussehen.
<a href="https://design-a-webpage.com/wp-content/uploads/2023/02/test-document.pdf" download="filename">download</a>
2. Link zu einem PDF mit Divi
"Textlink"
Wir fahren mit den Anweisungen für den besten Seitenersteller da draußen für Wordpress fort, den Divibuilder. Dieser Seitenersteller wird auf Millionen von Websites verwendet. Öffnen Sie einen Beitrag/eine Seite mit dem Divibuilder, indem Sie in der Liste Ihrer Beiträge auf „Mit Divi bearbeiten“ klicken. Klicken Sie im grauen Bereich auf das Symbol "Moduleinstellungen". schreiben Sie einen Text, zum Beispiel "Dies ist ein Testdownload". Markieren Sie das Wort „Download“ und klicken Sie auf das Link-Icon und fügen Sie die URL Ihres PDFs ein. Siehe Screenshot unten.
Ein weiterer Schritt ist erforderlich, um den Link herunterzuladen, anstatt das PDF zu öffnen. Wechseln Sie im Popup-Fenster von "Visuell" zu "Text", dies zeigt den HTML-Code an. Fügen Sie nun dem Link ein Download-Attribut hinzu. Fügen Sie den folgenden Code ein:
download="filename"Ersetzen Sie „filename“ durch den Titel Ihres PDFs. Das Ergebnis des vollständigen Links würde so aussehen.
<a href="https://webstick.blog/file.pdf" download="filename">Download</a>"Button-Link"
Lassen Sie uns ein neues Divi-Modul öffnen, indem Sie auf das graue + klicken. Dieses Mal wählen wir "Button". Schreiben Sie im Reiter „Text“ „Download“. Dies wird der Button-Text sein. Öffnen Sie nun den Link"-Tab. Wo "Button link URL" fügen Sie die URL Ihrer PDF-Datei ein, die wir am Anfang dieses Tutorials hochgeladen haben. Wählen Sie die Option, um den Link in einem neuen Tab zu öffnen. Aktualisieren Sie den Beitrag natürlich und Sie sind es bereit. Siehe Screenshot unten.
3. Link zu einem PDF mit Elementor
"Textlink"
Wir beginnen damit, eine Seite/einen Beitrag mit Elementor zu öffnen, indem wir auf „Mit Elementor bearbeiten“ klicken. Öffnen Sie nun ein „Texteditor“-Modul, indem Sie es auf den Seitenbereich nach rechts ziehen. Schreiben Sie den Testsatz „Dies ist ein Testdownload“. Markieren Sie das Wort "Download" davon. Klicken Sie auf das Link-Symbol und fügen Sie dann die URL Ihrer PDF-Datei ein. Jetzt wechseln wir von der "visuellen" zur "Text"-Ansicht, die den HTML-Code anzeigt. Siehe Screenshot unten.
Ein weiterer Schritt ist erforderlich, um den Link herunterzuladen, anstatt das PDF zu öffnen. Wir fügen dem Link ein Download-Attribut hinzu. Fügen Sie den folgenden Code ein:
download="filename"Ersetzen Sie „filename“ durch den Titel Ihres PDFs. Das Ergebnis des vollständigen Links würde so aussehen.
<a href="https://webstick.blog/file.pdf" download="filename">Download</a>"Button-Link"
Öffnen Sie ein „Schaltflächen“-Modul, indem Sie es im Seitenbereich nach rechts ziehen. Wo "Text" steht, schreiben Sie "Download", dieser Text wird nun in der eigentlichen Schaltfläche auf der rechten Seite angezeigt. Fügen Sie darunter, wo "Link" steht, die URL Ihrer PDF-Datei ein, die wir zu Beginn dieses Tutorials hochgeladen haben. Klicken Sie nun auf das Zahnradsymbol neben der URL. Dies wird weitere Optionen eröffnen. Markieren Sie "In neuem Fenster öffnen" und schreiben Sie dort, wo "Benutzerdefinierte Attribute" steht, "Herunterladen". Speichern und Ihr Download-Button ist fertig. Siehe Screenshot unten.
Anzeige