Unsere Leser fragen uns oft, ob es möglich ist, Symbole für angehängte Dateien in WordPress anzuzeigen. Das Hinzufügen von Dateisymbolen hilft Benutzern, den Typ der Datei, die sie herunterladen, auf einen Blick zu erkennen, was großartig ist, um ihnen zu helfen, Ihre Inhalte besser zu verstehen.
Ich habe verschiedene Methoden zum Hinzufügen von Dateisymbolen getestet, und sie machen einen spürbaren Unterschied in der Benutzererfahrung. Besucher können sofort erkennen, ob sie eine PDF-, Word- oder ZIP-Datei herunterladen.
In diesem Leitfaden zeigen wir Ihnen, wie Sie ganz einfach Symbole für Anhangsdateien in WordPress hinzufügen. Mit unseren Schritten können Sie Dateisymbole anzeigen, die dem Typ der Dateien auf Ihrer Website entsprechen.
Schnelle Antwort: So fügen Sie Symbole für angehängte Dateien in WordPress hinzu
Sie können Dateianhang-Icons in WordPress mit einem Plugin wie MimeTypes Link Icons (die einfachste Methode) hinzufügen oder manuell Icon-Schriften mit Font Awesome hinzufügen. Beide Methoden zeigen visuelle Indikatoren neben den Dateidownload-Links an, die Besuchern helfen, Dateitypen sofort zu erkennen.
Die Plugin-Methode funktioniert automatisch für alle unterstützten Dateitypen. Die Font-Awesome-Methode gibt Ihnen mehr Kontrolle über die Icon-Gestaltung und Anpassung.
Was sind Symbole für angehängte Dateien?
Symbole für angehängte Dateien sind kleine visuelle Indikatoren (wie PDF-, DOC- oder ZIP-Symbole), die neben Download-Links angezeigt werden. Sie helfen Besuchern, sofort zu erkennen, welche Art von Datei sie herunterladen möchten, ohne die Dateierweiterung lesen zu müssen.
Standardmäßig können Sie in WordPress Bilder, Audio, Video und andere Dokumente hochladen. Sie können auch zusätzliche Dateitypen für den Upload in WordPress aktivieren.
Wenn Sie eine Datei über den Medien-Uploader hochladen und zu einem Beitrag oder einer Seite hinzufügen, bettet WordPress unterstützte Formate wie Bilder, Audio und Video ein. Das bedeutet, dass es automatisch eine Vorschau oder einen Mediaplayer anzeigt, anstatt nur einen Link.
Für alle anderen Dateien wird nur ein Dateiname als einfacher Text hinzugefügt und mit der Download- oder Anhangseite verknüpft.
Im obigen Screenshot haben wir eine PDF- und eine Docx-Datei hinzugefügt. Es ist jedoch für einen Benutzer schwierig zu erraten, welche Art von Datei er herunterladen würde.
Wenn Sie regelmäßig verschiedene Dateitypen hochladen, erleichtert die Anzeige eines Symbols neben dem Link den Benutzern das Auffinden des gesuchten Dateityps.
Das werden wir Ihnen als Nächstes zeigen.
Welche Methode sollten Sie verwenden?
Bevor wir zu den Tutorials kommen, hier ein kurzer Vergleich beider Methoden, damit Sie die richtige für Ihre Website auswählen können:
| Funktion | Methode 1: Plugin | Methode 2: Font Awesome |
|---|---|---|
| Benutzerfreundlichkeit | Sehr einfach | Fortgeschritten |
| Einrichtungszeit | Sekunden | Manuell pro Beitrag |
| Anpassung | Begrenzt | Hoch |
| Am besten für | Anfänger | Fortgeschrittene Benutzer |
Ich empfehle Methode 1 für die meisten Benutzer, da sie schneller ist und website-weit funktioniert. Beginnen wir damit.
Methode 1: Symbole für angehängte Dateien in WordPress mit einem Plugin hinzufügen
Der einfachste Weg, Dateityp-Icons hinzuzufügen, ist die Verwendung eines WordPress-Plugins wie MimeTypes Link Icons. Es ist ein kostenloses Plugin, das sehr einfach zu bedienen ist und es Ihnen ermöglicht, Icons für verschiedene Dateitypen hinzuzufügen.
Als Erstes müssen Sie das Plugin MimeTypes Link Icons installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.
Nach der Aktivierung müssen Sie die Seite Einstellungen » MimeType Icons besuchen, um die Plugin-Einstellungen zu konfigurieren.
Das Plugin ermöglicht es Ihnen, die Symbolgröße sowie zwischen PNG- und GIF-Bildformaten zu wählen. Wir empfehlen die Verwendung von PNG-Symbolen, da diese eine bessere Qualität für Dateitypanzeigen bieten.
Als Nächstes müssen Sie die Symbolausrichtung und die Dateitypen auswählen, die das Symbol anzeigen sollen.
Danach können Sie nach unten scrollen und Symbole auswählen, die auf Ihrer Website angezeigt werden sollen. Zum Beispiel gibt es Symbole für Dateitypen wie PDF, PPT, CSV, AVI, RPM, TXT und mehr.
Ich habe dieses Plugin auf unserer Demoseite mit PDF-, DOCX- und ZIP-Dateien getestet. Die Symbole erschienen automatisch innerhalb von Sekunden nach der Aktivierung, ohne dass zusätzliche Konfigurationen erforderlich waren.
Scrollen Sie als Nächstes zum Abschnitt „Erweiterte Einstellungen“.
Hier finden Sie die Option, die Dateigröße neben dem Download-Link anzuzeigen. Sie ist standardmäßig deaktiviert, da sie ressourcenintensiv sein könnte.
Wenn Sie fertig sind, vergessen Sie nicht, auf die Schaltfläche „Änderungen speichern“ zu klicken, um Ihre Einstellungen zu speichern.
Sie können jetzt einen Beitrag oder eine Seite bearbeiten und über den Medien-Uploader einen Dateidownload-Link hinzufügen. Vorschau Ihres Beitrags, und Sie sehen das Dateisymbol neben dem Download-Link.
Methode 2: Verwendung von Icon-Schriftarten für Anhangsdateien in WordPress
In dieser Methode verwenden wir eine Icon-Schriftart, um ein Icon neben dem Link zur angehängten Datei anzuzeigen. Diese Methode gibt Ihnen mehr Kontrolle über die Icon-Formatierung und funktioniert gut, wenn Sie bereits Font Awesome auf Ihrer Website verwenden.
Font Awesome ist eine beliebte Icon-Bibliothek, die Tausende von skalierbaren Vektor-Icons bietet. Dies sind Grafiken, die gestochen scharf und klar bleiben, egal wie stark Sie sie vergrößern oder verkleinern.
Diese Methode beinhaltet die Installation des Font Awesome Plugins und das anschließende manuelle Hinzufügen von Icon-Code zu Ihren Beiträgen.
Als Erstes müssen Sie das Plugin Font Awesome installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unsere Anleitung zur Installation eines WordPress-Plugins.
Nach der Aktivierung können Sie von Ihrem WordPress-Dashboard aus zur Seite Einstellungen » Font Awesome gehen. Hier können Sie die allgemeinen Einstellungen für das Plugin bearbeiten, z. B. auswählen, ob es Pro- oder kostenlose Symbole verwenden soll.
Als Nächstes können Sie einen Beitrag oder eine Seite bearbeiten, zu der Sie einen Anhangslink hinzufügen möchten.
Im Inhaltseditor fügen Sie den HTML-Code des Icons vor Ihrem Download-Link ein. Dies zeigt das Icon neben dem Dateinamen an.
Hinweis: Wann immer Sie benutzerdefinierten Code oder HTML-Snippets zu Ihrer Website hinzufügen, ist es ratsam, zuerst ein Backup zu erstellen. Für komplexere Snippets empfehlen wir die Verwendung des WPCode Plugins zur sicheren Implementierung.
Um diesen HTML-Code zu finden, können Sie die Icon-Bibliothek-Website von Font Awesome besuchen. Suchen Sie einfach nach einem Icon in der Suchleiste und klicken Sie dann auf das Bild.
Als Nächstes sehen Sie verschiedene Variationen des Icons und dessen HTML-Code.
Klicken Sie auf den Code, um ihn zu kopieren.
Danach können Sie zu Ihrem WordPress-Inhaltseditor zurückkehren und auf das '+' Zeichen klicken, um einen Benutzerdefinierten HTML Block hinzuzufügen.
Von hier aus fügen Sie einfach den Code für Ihr Symbol in den Block ein.
Sobald Sie fertig sind, veröffentlichen oder aktualisieren Sie Ihre Seite.
Sie können nun Ihre Website besuchen, um das neu hinzugefügte Icon für den Anhangsdateityp zu sehen.
Bonus: Digitale Dateien verkaufen, um online Geld zu verdienen
Jetzt, da Sie wissen, wie man Anhänge-Dateityp-Icons hinzufügt, können Sie einen Schritt weiter gehen und verschiedene Dateien als digitale Downloads verkaufen. Dies ermöglicht es Ihnen, online Geld zu verdienen oder Benutzer zu ermutigen, sich für Ihren Newsletter anzumelden im Austausch für eine kostenlose Ressource.
Der beste Weg, digitale Produkte zu verkaufen, ist die Verwendung von Easy Digital Downloads. Es ist eine der besten E-Commerce-Plattformen für WordPress und sehr einfach zu bedienen und einzurichten.
Easy Digital Downloads lässt sich problemlos in verschiedene Zahlungsdienste wie PayPal, Stripe, Apple Pay und Google Pay integrieren.
Außerdem können Sie einfach digitale Dateien hochladen, die Sie verkaufen möchten, und online Geld verdienen.
Das Plugin ermöglicht es Ihnen, Details wie einen Titel und eine Beschreibung hinzuzufügen, den Preis des Downloads festzulegen, ein Download-Bild auszuwählen und vieles mehr.
Weitere Details finden Sie in unserer Anleitung zur Verkaufs von digitalen Downloads in WordPress.
Häufig gestellte Fragen zu Dateisymbolen in WordPress
Verlangsamen Dateisymbole meine Website?
Nein, Dateisymbole sind sehr kleine Bilddateien, die sich nur minimal auf die Website-Geschwindigkeit auswirken. Das Plugin MimeTypes Link Icons verwendet leichtgewichtige PNG- oder GIF-Dateien, und Font Awesome-Symbole sind vektorbasiert, was bedeutet, dass sie für die Leistung optimiert sind.
Kann ich die Farben und Stile der Symbole anpassen?
Ja, wenn Sie Font Awesome verwenden, können Sie die Farben, Größen und Stile der Symbole mit CSS (Cascading Style Sheets) anpassen. Dies ist der Code, der zum Gestalten Ihrer Website verwendet wird. Die Plugin-Methode (Methode 1) verwendet voreingestellte Icon-Designs, die gängigen Dateitypen entsprechen.
Funktionieren Dateisymbole auf Mobilgeräten?
Ja, Dateisymbole werden auf Mobilgeräten korrekt angezeigt. Die Symbole sind responsiv, d. h. sie passen sich automatisch an, um auf verschiedenen Bildschirmgrößen gut auszusehen.
Welche Dateitypen können Symbole anzeigen?
Das Plugin MimeTypes Link Icons unterstützt viele gängige Dateitypen, darunter:
- PDF, DOC und DOCX
- XLS und XLSX
- PPT und PPTX
- ZIP, MP3 und AVI
Sie können auf der Einstellungsseite des Plugins genau auswählen, welche Dateitypen aktiviert werden sollen.
Bonus-Ressourcen
Im Folgenden finden Sie einige zusätzliche nützliche Ressourcen, die Ihnen bei der Verwaltung Ihrer WordPress-Website und Medien hilfreich sein könnten:
- So verwenden Sie WordPress für die Dokumentenverwaltung oder Dateiverwaltung
- Gespeicherte Entwürfe in WordPress finden (Anfängerleitfaden)
- PDF-Dateien auf Ihre WordPress-Website hochladen
- So verbinden Sie mehrere WordPress-Websites miteinander (3 Wege)
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Dateianhang-Icons in WordPress hinzufügen. Möglicherweise möchten Sie auch unsere Anleitung zum Einbetten von PDFs, Tabellenkalkulationen und anderen Dateien in WordPress-Blogbeiträgen und unsere Expertenauswahl der besten WordPress-Aktivitätsprotokoll- und Tracking-Plugins sehen.
Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.
Mrteesurez
Dieses Tutorial ist hilfreich! Das Hinzufügen von Dateityp-Symbolen verbessert die Benutzererfahrung erheblich und erleichtert es Besuchern, Anhänge zu identifizieren, kurz bevor sie heruntergeladen werden.
Ich habe dies auf meiner Website gemacht, und es ließ meine Inhalte sofort professioneller aussehen. Ihre Schritt-für-Schritt-Anleitung macht den Prozess so einfach. Ich möchte fragen, wie sich das Hinzufügen von Symbolen auf die Ladezeit meiner Website-Seiten auswirkt?
WPBeginner Support
Dies sollte keine großen Auswirkungen auf die Geschwindigkeit Ihrer Website haben.
Admin
Mrteesurez
Danke für die Antwort. Ich habe gefragt, weil die Verwendung von Icons oft das Herunterladen oder Laden von Schriftbibliotheken wie Font Awesome oder Google Fonts erfordert, was die Geschwindigkeit einer Website beeinträchtigen kann. Ich freue mich, dass Sie mir mitteilen, dass dies keine größeren Auswirkungen auf die Geschwindigkeit meiner Website hat.
Isha Singh
Ich bin mit WordPress nicht vertraut. Aber während ich Ihren Beitrag durchgehe, scheint es, als ob ich alles über WordPress weiß.
Enc
Sie empfehlen ernsthaft ein Plugin, das seit einem Jahr nicht mehr aktualisiert wurde?
WPBeginner Support
Ja, das tun wir. Bitte lesen Sie unseren Artikel sollten Sie Plugins installieren, die nicht mit Ihrer WordPress-Version getestet wurden für weitere Informationen zu diesem Thema.
Admin