Hoe Attachment File Type Pictogrammen in WordPress toevoegen

Heb je websites gezien met bestandspictogrammen naast de downloadlinks? Onlangs vroeg een van onze lezers of het mogelijk was bijlagenbestandpictogrammen in WordPress weer te geven. Ja, dat is het, en het is vrij eenvoudig. In dit artikel laten we u zien hoe u pictogrammen voor bijlagebestanden kunt toevoegen in WordPress.

Wanneer u bijlagen nodig heeft Bestandspictogrammen in WordPress

WordPress biedt standaard de mogelijkheid om afbeeldingen, audio, video en andere documenten te uploaden. U kunt ook toestaan ​​dat extra bestandstypen worden geüpload in WordPress.

Wanneer u een bestand uploadt via de media-uploader en dit toevoegt aan een bericht of pagina, probeert WordPress het bestand in te sluiten als het een afbeelding, audio, video of een ondersteunde bestandsindeling is.

Voor alle andere bestanden zal het gewoon een bestandsnaam als platte tekst toevoegen en deze koppelen aan de download- of bijlagepagina.

In de bovenstaande schermafbeelding hebben we een PDF- en een Docx-bestand toegevoegd. Het is echter moeilijk voor een gebruiker om te raden welk bestand ze downloaden.

Als u regelmatig verschillende bestandstypen uploadt, wilt u mogelijk een pictogram naast de link weergeven, zodat uw gebruikers eenvoudig het bestandstype kunnen vinden waarnaar ze op zoek zijn.

Dat gezegd hebbende, laten we zien hoe bijlage bestandspictogrammen in WordPress voor verschillende bestandstypen kunnen worden toegevoegd.

Methode 1: Bijlagepictogram-pictogrammen toevoegen in WordPress Plug-in gebruiken

Het eerste wat u hoeft te doen is de plug-in MimeTypes Link Icons installeren en activeren. Raadpleeg onze stapsgewijze handleiding over het installeren van een WordPress-plug-in voor meer informatie.

Bij activering moet je bezoeken Instellingen »MimeType-pictogrammen pagina om plugin-instellingen te configureren.

Met de plug-in kunt u de pictogramgrootte kiezen. U kunt ook kiezen tussen png- en gif-pictogrammen. Vervolgens moet u de uitlijning van het pictogram kiezen en welke bestandstypen het pictogram weergeven.

Onder de geavanceerde opties kunt u CSS-klassen inschakelen om pictogrammen te verbergen. Bestandsdownloadkoppelingen die zijn ingepakt in deze CSS-klassen zullen de pictogrammen niet weergeven.

Hieronder vindt u de optie om de bestandsgrootte naast de downloadkoppeling te tonen. Het is standaard uitgeschakeld, omdat het mogelijk een bronintensief probleem is. Als u wilt, kunt u dit inschakelen en de optie ook inschakelen voor 'Cache opgehaalde bestandsgrootten'.

Vergeet niet op de knop Wijzigingen opslaan te klikken om uw instellingen op te slaan.

U kunt nu een bericht of pagina bewerken en een downloadlink voor bestanden toevoegen met behulp van een media-uploader. Bekijk een voorbeeld van uw bericht en u ziet het bestandspictogram naast de downloadkoppeling.

Methode 2: Pictogramlettertypen gebruiken voor bijlagebestanden in WordPress

In deze methode gebruiken we een pictogramlettertype om een ​​pictogram weer te geven naast de koppeling van het bijlagebestand.

Het eerste wat u hoeft te doen is de Better Font Awesome-plug-in installeren en activeren.

Na activering kunt u een bericht of pagina bewerken waar u een koppeling naar een bijlage wilt toevoegen.

U zult de nieuwe knop 'Pictogram invoegen' bovenaan de berichteditor opmerken. Als u erop klikt, verschijnt er een pop-up waarin u kunt zoeken en het pictogram kunt selecteren dat u wilt toevoegen.

Font Awesome wordt geleverd met heel veel pictogrammen en bevat pictogrammen voor de meest gebruikte bestandstypen. Klik op het pictogram dat u wilt toevoegen en de plug-in zal automatisch de vereiste shortcode toevoegen in de berichteditor.

Nu kunt u uw bestand uploaden en invoegen in de post met behulp van de media-uploader.

U kunt ook uw eigen aangepaste CSS voor een bestandspictogram toevoegen door uw eigen CSS-klasse als volgt aan de shortcode toe te voegen:

[icon name = "file-pdf-o" class = "" unprefixed_class = "pdf-icon"]

Je kunt nu gebruiken .pdf-icon klasse om de grootte, kleur en stijl van het pictogram aan uw eigen behoeften aan te passen.

We hopen dat dit artikel u heeft geholpen bij het leren toevoegen van pictogrammen voor bijlagebestanden in WordPress. Wellicht wilt u ook onze handleiding over hoe u PDF's, spreadsheets en andere insluiten in WordPress-blogposts.

Als je dit artikel leuk vond, meld je dan aan voor onze YouTube-video-tutorials over WordPress. U kunt ons ook vinden op Twitter en Facebook.