Våra läsare frågar oss ofta om det är möjligt att visa ikoner för bifogade filer i WordPress. Att lägga till filikoner hjälper användare att snabbt identifiera vilken typ av fil de laddar ner, vilket är bra för att hjälpa dem att bättre förstå ditt innehåll.
Jag har testat olika metoder för att lägga till filikoner, och de gör en märkbar skillnad i användarupplevelsen. Besökare kan omedelbart se om de laddar ner en PDF, ett Word-dokument eller en ZIP-fil.
I den här guiden visar vi hur du enkelt lägger till ikoner för bifogade filer i WordPress. Med våra steg kan du visa filikoner som matchar typen av filer på din webbplats.
Snabbt svar: Hur man lägger till ikoner för bifogade filer i WordPress
Du kan lägga till ikoner för bifogade filer i WordPress med hjälp av ett plugin som MimeTypes Link Icons (enklaste metoden) eller genom att manuellt lägga till ikonfonter med Font Awesome. Båda metoderna visar visuella indikatorer bredvid länkar för filnedladdning, vilket hjälper besökare att omedelbart känna igen filtyper.
Plugin-metoden fungerar automatiskt för alla stödda filtyper. Font Awesome-metoden ger dig mer kontroll över ikonens stil och anpassning.
Vad är ikoner för bifogade filer?
Ikoner för bifogade filer är små visuella indikatorer (som PDF-, DOC- eller ZIP-symboler) som visas bredvid nedladdningslänkar. De hjälper besökare att omedelbart känna igen vilken typ av fil de är på väg att ladda ner utan att behöva läsa filändelsen.
Som standard tillåter WordPress dig att ladda upp bilder, ljud, video och andra dokument. Du kan också aktivera ytterligare filtyper som kan laddas upp i WordPress.
När du laddar upp en fil via medieuppladdaren och lägger till den i ett inlägg eller en sida, kommer WordPress att bädda in stödda format som bilder, ljud och video. Detta innebär att den automatiskt visar en förhandsgranskning eller en mediaspelare istället för bara en länk.
För alla andra filer lägger den bara till ett filnamn som vanlig text och länkar det till nedladdnings- eller bifogningssidan.
I skärmdumpen ovan lade vi till en PDF- och en Docx-fil. Det är dock svårt för en användare att gissa vilken typ av fil de skulle ladda ner.
Om du regelbundet laddar upp olika filtyper, gör det enklare för dina användare att hitta den filtyp de letar efter genom att visa en ikon bredvid länken.
Det är vad vi ska visa dig hur du gör härnäst.
Vilken metod ska du använda?
Innan vi går in på handledningarna, här är en snabb jämförelse av båda metoderna så att du kan välja rätt för din webbplats:
| Funktion | Metod 1: Plugin | Metod 2: Font Awesome |
|---|---|---|
| Enkelhet att använda | Mycket enkelt | Medel |
| Inställningstid | Sekunder | Manuell per inlägg |
| Anpassning | Begränsad | Hög |
| Bäst för | Nybörjare | Avancerade användare |
Jag rekommenderar Metod 1 för de flesta användare eftersom den är snabbare och fungerar över hela webbplatsen. Låt oss börja med den.
Metod 1: Lägg till ikoner för bifogade filer i WordPress med hjälp av ett plugin
Det enklaste sättet att lägga till ikoner för filtyper är att använda ett WordPress-plugin som MimeTypes Link Icons. Det är ett gratis plugin som är mycket lätt att använda och låter dig lägga till ikoner för olika filtyper.
Det första du behöver göra är att installera och aktivera pluginet MimeTypes Link Icons. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.
Efter aktivering måste du besöka sidan Inställningar » MimeType-ikoner för att konfigurera plugin-inställningarna.
Pluginet låter dig välja ikonstorlek, samt mellan PNG- och GIF-bildformat. Vi rekommenderar att använda PNG-ikoner eftersom de ger bättre kvalitet för filtypsindikatorer.
Därefter måste du välja ikonjustering och vilka filtyper som ska visa ikonen.
Därefter kan du skrolla ner och välja ikoner att visa på din webbplats. Till exempel finns det ikoner för filtyper som PDF, PPT, CSV, AVI, RPM, TXT och mer.
Jag testade detta plugin på vår demosida med PDF-, DOCX- och ZIP-filer. Ikonerna dök upp automatiskt inom några sekunder efter aktivering, utan ytterligare konfiguration behövdes.
Därefter kan du skrolla ner till avsnittet Avancerade inställningar.
Här hittar du alternativet att visa filstorlek bredvid nedladdningslänken. Det är avstängt som standard, eftersom det kan vara resurskrävande.
När du är klar, kom ihåg att klicka på knappen 'Spara ändringar' för att spara dina inställningar.
Du kan nu redigera ett inlägg eller sida och lägga till en filnedladdningslänk med medieuploader. Förhandsgranska helt enkelt ditt inlägg, så ser du filikonen bredvid nedladdningslänken.
Metod 2: Använda ikon-typsnitt för bifogade filer i WordPress
I den här metoden kommer vi att använda ett ikon-typsnitt för att visa en ikon bredvid länken till bifogade filer. Den här metoden ger dig mer kontroll över ikonens stil och fungerar bra om du redan använder Font Awesome på din webbplats.
Font Awesome är ett populärt ikonbibliotek som tillhandahåller tusentals skalbara vektorikoner. Dessa är grafik som förblir skarpa och tydliga oavsett hur mycket du ändrar storlek på dem.
Denna metod innebär att installera Font Awesome-pluginet och sedan manuellt lägga till ikonkod i dina inlägg.
Det första du behöver göra är att installera och aktivera pluginet Font Awesome. Om du behöver hjälp, se vår guide om hur man installerar ett WordPress-plugin.
Efter aktivering kan du gå till sidan Inställningar » Font Awesome från din WordPress-instrumentpanel. Här kan du redigera de allmänna inställningarna för pluginet, som att välja om det ska använda pro- eller gratisikoner.
Därefter kan du redigera ett inlägg eller en sida där du vill lägga till en bifogad länk.
I innehållsredigeraren lägger du till ikonens HTML-kod före din nedladdningslänk. Detta visar ikonen bredvid filnamnet.
Observera: När du lägger till anpassad kod eller HTML-avsnitt på din webbplats är det en bra idé att skapa en säkerhetskopia först. För mer komplexa avsnitt rekommenderar vi att du använder pluginet WPCode för säker implementering.
För att hitta den HTML-koden kan du besöka Font Awesome ikonbibliotek. Sök helt enkelt efter en ikon i sökfältet och klicka sedan på bilden.
Därefter ser du olika varianter av ikonen och dess HTML-kod.
Klicka på koden för att kopiera den.
Därefter kan du återgå till din webbplats WordPress-innehållsredigerare och klicka på '+' -tecknet för att lägga till ett Anpassat HTML-block.
Härifrån klistrar du helt enkelt in koden för din ikon i blocket.
När du är klar, fortsätt och publicera eller uppdatera din sida.
Du kan nu besöka din webbplats för att se den nyligen tillagda ikonen för bifogade filtyper.
Bonus: Sälj digitala filer för att tjäna pengar online
Nu när du vet hur du lägger till ikoner för filtyper kan du ta det ett steg längre och sälja olika filer som digitala nedladdningar. Detta gör att du kan tjäna pengar online eller uppmuntra användare att registrera sig för ditt nyhetsbrev i utbyte mot en gratis resurs.
Det bästa sättet att sälja digitala produkter är att använda Easy Digital Downloads. Det är en av de bästa e-handelsplattformarna för WordPress, och den är mycket enkel att använda och konfigurera.
Easy Digital Downloads integreras enkelt med olika betaltjänster som PayPal, Stripe, Apple Pay och Google Pay.
Dessutom kan du helt enkelt ladda upp digitala filer som du vill sälja och börja tjäna pengar online.
Pluginet låter dig lägga till detaljer som en titel och beskrivning, ställa in priset för nedladdningen, välja en nedladdningsbild och mer.
För mer information, se vår guide om hur man säljer digitala nedladdningar i WordPress.
Vanliga frågor om filikoner i WordPress
Saktar filikoner ner min webbplats?
Nej, filikoner är mycket små bildfiler som har minimal påverkan på webbplatsens hastighet. Pluginet MimeTypes Link Icons använder lätta PNG- eller GIF-filer, och Font Awesome-ikoner är vektorbasserade, vilket innebär att de är optimerade för prestanda.
Kan jag anpassa ikonernas färger och stilar?
Ja, om du använder Font Awesome kan du anpassa ikonernas färger, storlekar och stilar med hjälp av CSS (Cascading Style Sheets). Detta är den kod som används för att styla din webbplats. Pluginmetoden (Metod 1) använder förinställda ikon-designer som matchar vanliga filtyper.
Fungerar filikoner på mobila enheter?
Ja, filikoner visas korrekt på mobila enheter. Ikonerna är responsiva, vilket innebär att de automatiskt anpassar sig för att se bra ut på olika skärmstorlekar.
Vilka filtyper kan visa ikoner?
Pluginet MimeTypes Link Icons stöder många vanliga filtyper, inklusive:
- PDF, DOC och DOCX
- XLS och XLSX
- PPT och PPTX
- ZIP, MP3 och AVI
Du kan välja exakt vilka filtyper som ska aktiveras på pluginets inställningssida.
Bonusresurser
Följande är några ytterligare användbara resurser som du kan finna hjälpsamma för att hantera din WordPress-webbplats och media:
- Hur man använder WordPress för dokumenthantering eller filhantering
- Hur du hittar dina sparade utkast i WordPress (nybörjarguide)
- Hur man laddar upp PDF-filer till din WordPress-webbplats
- Hur man kopplar ihop flera WordPress-webbplatser (3 sätt)
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till ikoner för bifogade filer i WordPress. Du kanske också vill se vår guide om hur du bäddar in PDF-filer, kalkylblad och andra filer i WordPress-blogginlägg och vårt experttips om de bästa pluginen för aktivitetsloggning och spårning i WordPress.
Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.
Mrteesurez
Den här handledningen är hjälpsam! Att lägga till filtypsikoner förbättrar verkligen användarupplevelsen, vilket gör det lättare för besökare att identifiera bilagor när de är på väg att ladda ner dem.
Jag har gjort detta på min webbplats, och det fick omedelbart mitt innehåll att se mer professionellt ut. Din steg-för-steg-guide gör processen så enkel. Jag vill fråga hur påverkar tillägget av ikoner min webbplats laddningstid?
WPBeginner Support
Det bör inte ha någon större effekt på din webbplats hastighet.
Admin
Mrteesurez
Tack för svaret. Jag frågade eftersom användning av ikoner ofta kräver nedladdning eller laddning av fontbibliotek som Font Awesome eller Google Fonts, vilket kan påverka en webbplats hastighet. Jag uppskattar att du låter mig veta att det inte har någon större effekt på min webbplats hastighet.
Isha Singh
Jag är inte bekant med WordPress. Men medan jag går igenom ditt inlägg, verkar det som att jag vet allt om WordPress.
Enc
Rekommenderar du på allvar ett plugin som inte har uppdaterats på ett år?
WPBeginner Support
Ja, det är vi. Se vår artikel ska du installera plugins som inte har testats med din WordPress-version för mer om detta ämne.
Admin