Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Så här add to attachment file type icons i WordPress (Easy Tutorial)

Har du någonsin sett websites som visar fil icons bredvid download links?

En av våra läsare frågade nyligen om det var möjligt att displayed attachment file icons i WordPress. Du kan enkelt visa olika icons så att användarna vet vilken typ av fil de downloadar.

I den här artikeln visar vi dig hur du add to attachment file icons i WordPress.

How to add attachment file type icons in WordPress

När du behöver attachment-fil icons i WordPress

Som standard tillåter WordPress dig att uploada images, ljud, videoklipp och andra documents. Du kan även aktivera ytterligare filtyper för upload i WordPress.

När du laddar upp en fil via mediauppladdaren och addar den till en post eller page, kommer WordPress att försöka embedda filen som om det vore en image, ljud, video eller i ett format som stöds.

För alla andra filer lägger den bara till ett filnamn som plain text och länkar det till download- eller bilagssidan.

View download links

I ovanstående screenshot har vi lagt 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 uploadar olika filtyper kanske du vill visa en icon bredvid linken. På så sätt kan dina användare enkelt hitta den filtyp de letar efter.

Med detta sagt, låt oss se hur du add to attachment file icons i WordPress för olika filtyper.

Metod 1: Add Attachment File Icons i WordPress med hjälp av plugin

Det enklaste sättet att lägga till filtypsikoner är genom att använda ett WordPress tillägg som gillar MimeTypes Link Icons. Det är ett gratis plugin som är mycket användarvänligt och låter dig add to icons för olika filtyper.

Det första du behöver göra är att installera och aktivera MimeTypes Link Icons plugin. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett plugin för WordPress.

Efter aktivering måste du besöka Settings ” MimeType Icons page för att konfigurera plugin-inställningarna.

Mimetype general settings

Pluginet allow you to choose the icon size, as well as between PNG and GIF icons. Därefter måste du välja inriktningen på ikonen och vilka filtyper som ska visa ikonen.

Efter det kan du rulla ner och välja icons som ska visas på din website. Till exempel finns det icons för filtyper som gillar PDF, PPT, CSV, AVI, RPM, TXT och mer.

Select file type icons

Därefter kan du rulla ner till Advanced Settings section.

Här hittar du alternativet att visa filstorlek bredvid länken för download. Det är avstängt som standard, eftersom det kan vara resurskrävande.

Advanced settings mimetype

När du är klar, glöm inte att klicka på knappen ”Save Changes” för att spara dina inställningar.

Du kan nu edit ett post eller en page och add to en fil download link med hjälp av media uppladdaren. Helt enkelt preview your post, och du kommer att se fil iconen bredvid download länken.

View file type icons

Metod 2: Använda Icon Fonts för Attachment-filer i WordPress

I den här metoden kommer vi att använda ett icon font för att visa en icon bredvid attachment filens link.

Det första du behöver göra är att installera och aktivera pluginet Font Awesome. Om du behöver hjälp, vänligen se vår guide om hur du installerar ett plugin för WordPress.

Efter aktivering kan du heada till Settings ” Font Awesome page från din WordPress dashboard. Här kan du editera de allmänna inställningarna för pluginet, som att välja om det ska använda Pro eller gratis icons.

Font awesome settings

Därefter kan du redigera ett post eller en sida där du vill lägga till en länk till en bilaga.

När du är i content editor måste du enter HTML-koden för den icon som du vill visa.

För att hitta den HTML-koden kan du besöka Font Awesome icon library website. Sök helt enkelt efter en icon i sökfältet och klicka sedan på imagen.

Search for font icon

Därefter kommer du att se olika variationer av iconen och dess HTML-kod.

Gå vidare och clicka på koden för att kopiera den.

Copy the icon code

Efter det kan du gå tillbaka till din websites WordPress content editor och clicka på ”+”-tecknet för att add to ett Custom HTML block.

Härifrån klistrar du helt enkelt in koden för din icon i blocket.

Add custom HTML block

När du är klar, gå vidare och publicera eller updating din page.

You can now visit your website to see the newly added icon for the attachment file type.

View attachment file type icon

Bonus: Sälj digitala filer för att tjäna pengar online

Nu när du vet hur man add to attachment file type icons, kan du gå ett steg längre och sälja olika filer som digitala downloads. This allows you to make money online or encourage users to sign up for your newsletter in exchange for a gratis resource.

Det bästa sättet att sälja digitala produkter är genom att använda Easy Digital Downloads. Det är en av de bästa e-handelsplattformarna för WordPress som är mycket användarvänlig och enkel att installera.

Easy Digital Downloads integreras enkelt med olika betaltjänster som PayPal och Stripe.

How to accept payments online with Easy Digital Downloads

Förutom det kan du helt enkelt ladda upp digitala filer som du gillar att sälja och börja tjäna pengar online.

Pluginet låter dig add to details som en rubrik och description, ställa in priset för download, välja en download image, och mer.

Adding a new digital download product

För mer detaljer, vänligen se vår guide om hur du säljer digitala downloads i WordPress.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du add to attachment file icons i WordPress. Du kanske också vill se vår guide om hur man embedar PDF-filer, kalkylblad och andra filer i blogginlägg i WordPress och de bästa WordPress-tilläggen för småföretag.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

4 kommentarerLämna ett svar

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Isha Singh says

    I am not familiar with the WordPress. But while I am going through your post, It seems like I know everything about the WordPress.

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.