Hoe u SVG -afbeeldingsbestanden toevoegt in WordPress

Klaar om je WordPress-site een serieuze grafische upgrade te geven? Stel je een oneindig schaalbaar logo en pictogrammen voor die er op elk apparaat scherp uitzien, zonder pixelvorming of vervorming. Deze handleiding laat je precies zien hoe je SVG-bestanden uploadt en beheert in WordPress met WP Media Folder, en is geschikt voor iedereen, zelfs als je geen ontwikkelaar bent.

In deze stapsgewijze tutorial zullen we de voordelen van SVG-bestanden uitpakken, waarom ontwerpers er dol op zijn en waarom ze fantastisch zijn voor SEO- en pagina-prestaties. U leert meerdere eenvoudig te volgen methoden om SVG-uploads in te schakelen: van het gebruik van vertrouwde plug-ins tot eenvoudige codetweaks, plus slimme strategieën om uw site veilig te houden.

We gebruiken WP Media Folder, de krachtige plug -in Media Management van JoomUnited. 

Waarom SVG's geweldig zijn voor schaalbare afbeeldingen

Schaalbaarheid - SVG's zijn vectorbestanden. Dat betekent dat u kunt inzoomen, vergroten of verkleinen zonder kwaliteit te verliezen voor logo's, iconen of responsieve ontwerpen.

Lichtgewicht en seo -vriendelijk - SVG -bestanden zijn vaak kleiner dan rasterafbeeldingen en zijn op tekst gebaseerde XML, zodat zoekmachines belangrijke elementen direct kunnen lezen (ALT -tekst, titels, enz.).

Styling & Animation - Je kunt SVG's manipuleren via CSS of JavaScript. Wilt u een zweefeffect of animatie? Eenvoudig.

Toegankelijkheid - correct ingesteld, SVG's bevatten toegankelijke teksttags en rollen die screenlezers kunnen interpreteren, gewoon een andere solide reden om ze te gebruiken.

Oplossingen om SVG's toe te voegen in WordPress

WordPress blokkeert standaard SVG als gevolg van beveiligingsrisico's (SVG is XML, waaronder kwaadaardige code), maar er zijn drie betrouwbare manieren om SVG -ondersteuning mogelijk te maken:

1. Gebruik een plug -in

A) WPCode + SVG -fragment

• Installeer de gratis WPCode -plug -in.
• Voeg het snippet 'SVG -bestanden toestaan' uit de bibliotheek toe en activeer het.
• Standaard kunnen alleen beheerders SVG's uploaden.

b) SVG Support -plug -in

• Installeer "SVG -ondersteuning" via plug -ins> Nieuw toevoegen, activeren deze.
• Controleer in de instellingen "Beperkt tot beheerder" en/of "Geavanceerde modus inschakelen" (inline rendering, CSS -styling).
• Upload uw SVG via media> Voeg nieuwe of drag & drop toe.

c) Andere opties :

• SVG Safe van Darrell Doyle, ouder maar nog steeds gebruikt.
• SVG Support Sanitiseert uploads om XSS/XXE -risico's te voorkomen.
• HappyFiles/Catfolders voegen SVG -uploads toe met sanering en previews.

2. Voeg code -fragment toe aan functies.php

U kunt de volgende code gebruiken: 

functie enable_svg_upload ($ mimes) {$ mimes ['svg'] = 'Image/svg+xml'; retourneer $ mimes; } add_filter ('upload_mimes', 'enable_svg_upload'); 

Waar: de functies van het thema (altijd een kinderthema!).

Nadelen: Standaard geen sanering - risico, tenzij gekoppeld aan een ontsmettingsmiddel. En uploaden beperkt tot admin (u kunt dat aanpassen).

3. Beveiligingsoverwegingen

 Svg = xml, die kan bevatten:

• XSS -aanvallen (JavaScript).
• XXE -aanvallen (oproepen van externe entiteit).

Best practices:

• Gebruik plug -ins zoals SVG -ondersteuning, SVG Safe, HappyFiles met sanering ingebouwd - in.
• Sanitize via online tools (bijvoorbeeld de SVG Sanitizer -test van Darryl Doyle) voordat u uploadt.
• Beperk SVG -uploads alleen tot beheerder of vertrouwde gebruikers.

WP Media Folder en waarom het belangrijk is voor SVG's op WordPress

WP Media Folder is een krachtige mediabibliotheekmanager

- Map/submolderstructuur

-Vetanceerde filters, sorteren, slepen en vallen

 - Hernoemde, watermerk, bulk vervangen, preview, downloaden

- Compatibel met veel tools zoals pagina -bouwers, WooCommerce en WPML.

Hoewel WP Media Folder zelf niet toestaat SVG -bestanden te gebruiken, kunnen we ons in staat stellen om elk type bestand inclusief SVG -bestanden te organiseren, te onderhouden en te beheren.

Uitvoegen: Verhoog uw site met SVG's en WP Media Folder

Stop met worstelen met rommelige mediamappen en niet -geoptimaliseerde beeldbestanden. Ontgrendel in plaats daarvan het volledige potentieel van SVG's, lichtgewicht, doorzoekbaar en aanpasbaar, met de intuïtieve organisatietools van WP Media Folder. 

Of u nu een maker van inhoud, ontwerper of eigenaar van een klein bedrijf bent, het legt krachtige technologie in uw handen zonder enige code. Uw site laadt sneller, rangschikt hoger en ziet er prachtig uit! Waar wacht je nog op? Ga hierheen en haal je eigen exemplaar.