Slik laster du opp SVG-er til WordPress: 2 metoder

pari Passy Guy | WordPress Tutorial

Vil du lære hvordan du laster opp SVG-er til WordPress? Vi vil presentere i denne opplæringen metodene for å oppnå dette..

Nettadministratorer og webdesignere er nødt til å bruke forskjellige mediefilformater i arbeidet sitt. Et av de mest populære formatene i dag er SVG, et XML-basert vektorformat. Dessverre er det ikke alle nettlesere og plattformer som støtter SVG, så du må aktivere SVG-støtte manuelt først.

Denne artikkelen vil dekke trinnene for å laste opp SVG-filer til et WordPress-nettsted ved å bruke SVG Support-plugin. Vi vil også svare på noen spørsmål angående sikkerhetsproblemene rundt dette bestemte mediefilformatet og hvorfor SVG er verdt å bruke.

For å komme i gang, la oss bli kjent med SVG og hvordan det fungerer.

Men før du begynner, hvis du aldri har installert WordPress, må du finne ut av det Hvordan installere en WordPress blogg 7 trinn et Hvordan finne, installere og aktivere en WordPress tema på bloggen din 

Så tilbake til hvorfor vi er her.

Hva er SVG?

Scalable Vector Graphics (SVG) er et XML-tekstbasert vektorgrafikkbildeformat. Selv om vanlige bildeformater som JPG og PNG består av tonnevis av små firkanter kalt piksler, er dette formatet avhengig av XML-markeringsspråk for å beskrive bildeattributter.

I januar 2022, 42 % av alle nettsteder over hele verden bruk SVG. Denne prosentandelen har økt siden januar 2021, da bare 29,4 % av nettstedene har brukt det. I likhet med PNG- og JPG-formater er SVG populær blant nettsteder med høy trafikk som Google, Wikipedia og YouTube.

En annen flott ting med SVG er at det støttes bredt av alle større nettlesere.

Her er liste over nettlesere som støtter SVG-filformat:

navigatorDelvis støtteFull støtte
Edge-Versjon 12-18, 79-96, 97
Firefoxversjon 2Versjoner 3-94, 95, 96-97
Firefox for Android-versjon 95
Chrome-Versjoner 4-96, 97, 98-100
Chrome for Android-versjon 96
Safariversjon 3.1Versjon 3.2-15.1, 15.2, TP
Opera-Versjon 10-81, 82
Mini Opera-Alle versjoner
Opera Mobile-Utgivelse 12-12.1, 64
Safari på iOS-Utgivelse 3.2-15.1, 15.2
Android-nettleserenVersjon 3-4.3Utgivelse 4.4-4.4.4, 96
UC-nettleser for Android-versjon 12.12
Samsung Internett-Utgivelse 4-14.0, 15.0
QQ-nettleser-versjon 10.4
Baidu nettleser-versjon 7.12
KaiOS-nettleser-versjon 2.5

Hvordan fungerer SVG?

SVG-er bruker XML for å produsere todimensjonale vektorbilder. I motsetning til JPG og PNG har vektorgrafikk ingen piksler. I stedet er oppførselen deres beskrevet i XML-tekstfiler.

Av denne grunn kan SVG-er søkes, indekseres, skriptes, endres og komprimeres som kode. Som et resultat kan hvem som helst lage dem ved hjelp av et tekstredigeringsprogram eller vektorgrafikkprogramvare.

Støtter WordPress SVG?

Det er ingen SVG-støtte i WordPress som standard på grunn av sikkerhetsrisikoen det påfører – vi vil dekke sikkerhetsproblemer rundt SVG mer i dybden senere.

Her er en feilmelding som vises når du laster opp en SVG-grafikk til et WordPress-nettsted:

Det er en aktuell diskusjon om å gjøre SVG til en del av kjernefunksjonaliteten i WordPress. Inntil da må vi være kreative og bruke andre løsninger for å laste opp SVG-bilder til WordPress.

Hvorfor bruke WordPress SVG?

Til tross for sikkerhetsproblemene, bruker mange brukere fortsatt dette bildeformatet, da det har forskjellige fordeler. Her er noen av fordelene med å bruke SVG-filer:

  • Evolutivitet: Siden SVG er et vektorbildeformat, opprettholder SVG-filer samme kvalitet på tvers av alle skjermoppløsninger. Denne fordelen er også tilstede etter å ha forstørret dem, og det er derfor mange bruker dette skalerbare bildeformatet for ikoner og logoer.
  • Mindre filstørrelse : SVG-filer gjør det enkelt å forbedre nettstedets ytelse fordi de tar opp mindre nettlagringsplass og laster mye raskere enn andre bilder.
  • SEO Friendly : Google indekserer SVG-filer, slik at de vises på Google Bildesøk og forbedrer søkearbeidet. SEO. Med andre typer bilder er du begrenset til å optimalisere alt-attributtene deres.
  • Kodebaserte SVG-er kan redigeres ved hjelp av et tekstredigeringsprogram eller redigeringsprogramvare for vektorgrafikk. Du kan optimalisere SVG-filer for nettsteder eller til og med legge til animasjoner for å gjøre grafikken interaktiv.

SVG på WordPress og sikkerhet

Siden SVG i hovedsak er en XML-tekstfil, har den utnyttbare sårbarheter som ikke påvirker andre bildeformater. Derfor kan folk enkelt kapre den med ondsinnet kode for å starte Cross-Site Scripting (XSS) og XML External Entity (XXE) angrep på systemet ditt.

Av denne grunn bør du være forsiktig når du håndterer SVG-filer og legger dem til WordPress.

For å minimere sikkerhetsrisikoen, sørg for å rense SVG-filer før du laster dem opp til WordPress mediebibliotek. Denne prosessen fjerner mistenkelig kode og feil, noe som gjør bildene trygge for nettstedet ditt.

Du kan rydde opp i opplastede SVG-filer ved å bruke en SVG-plugin – vi dekker trinnene senere. Vi anbefaler imidlertid at du desinfiserer den to ganger med SVG Sanitizer Test -

En annen måte å sikre WordPress-nettstedet på er å begrense SVG-opplastinger til kun pålitelige brukere. Utvalgte brukere bør være klar over sikkerhetsproblemene rundt SVG-formatet – dette vil fraråde dem å hente SVG-filer fra tvilsomme kilder.

Hvordan laste opp SVG-filer til WordPress i 2 sikre metoder

Teknisk sett er det to måter å legge til SVG-støtte til WordPress: ved å bruke en WordPress Plugin eller ved å aktivere den manuelt. Uansett hva du velger, anbefaler vi sterkt at du begrenser nedlastingsprivilegier til administratorer og pålitelige brukere bare for å minimere ondsinnede nedlastinger.

Bruk en WordPress-plugin

I denne opplæringen skal vi bruke SVG-støtte. Dette WordPress Plugin bruker et SVG-rensemiddelbibliotek som automatisk aktiveres når SVG-filer lastes opp til mediebiblioteket. Det er også enkelt å sette opp og gratis å bruke.

Her er trinnene for å konfigurere SVG-støtte:

  1. IInstaller plugin-en og aktivere den.
last opp SVG-er til WordPress
  1. Tilgang til innstillinger -> støtte SVG fra WordPress-dashbordet.
  1. Merk av i boksen ved siden av alternativet Begrens til administratorer for å begrense opplastingsprivilegier. Gjør det samme for alternativet Aktiver avansert modus hvis du vil ha tilgang til avanserte funksjoner, for eksempel innebygd SVG-gjengivelse og CSS-styling.
last opp SVG-er til WordPress
  1. Etter å ha lagret endringene, kan du trygt begynne å laste opp SVG-filer til mediebiblioteket.

Legg til WordPress SVG-støtte manuelt

Denne metoden innebærer redigering av fil functions.php av WordPress-nettstedet ditt. Derfor anbefaler vi på det sterkeste at du følger disse trinnene hvis du er kjent med PHP og fullt ut forstår SVG-sikkerhetsproblemet.

Vær sikker på at du sikkerhetskopiere WordPress-nettstedet ditt før du gjør endringer for å unngå tap av data i tilfelle feilkonfigurering.

Følgende trinn vil forklare hvordan du aktiverer SVG i WordPress manuelt ved hjelp av en FTP-klient som fileZilla.

  1. Gå til nettstedets filkatalog hos verten din
  2. Tilgang til public_html -> wp-inkluderer. Rull ned til du finn funksjoner.php.
last opp SVG-er til WordPress
  1. Høyreklikk på denne filen og velg Vis/Rediger for å åpne den og lim inn følgende kodebit i den:
function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_filter('upload_mimes', 'add_file_types_to_uploads');
  1. Lagre endringer og prøv å laste opp en ny SVG-fil. Hvis prosessen er vellykket, bør mediebiblioteket godta filopplastingen.

De mange fordelene med SVG-filer bidrar til den økende populariteten til denne filtypen. Dessverre er XML-tekstfiler utsatt for kodeinjeksjon, som er hovedårsaken til at WordPress ikke inkluderer SVG-støtte som standard.

Når det er sagt, er det to måter å få WordPress-nettstedet ditt til å godta SVG-filer: ved å bruke en WordPress Plugin eller rediger filen functions.php. I tillegg til å begrense opplastingsprivilegier, vil du sikkert kunne laste opp SVG-filer til nettstedets mediebibliotek.

Andre anbefalte ressurser

Vi inviterer deg også til å konsultere ressources nedenfor for å gå dypere inn i å komme i gang med og kontrollere nettstedet og bloggen din.

konklusjonen

Det er det for denne guiden som viser deg hvordan du laster opp SVG-er til WordPress. Vi håper denne artikkelen har gitt deg litt innsikt i fordelene og risikoene ved å laste opp SVG-filer til et WordPress-nettsted. Hvis du har noen bekymringer eller forslag, vennligst gi oss beskjed innen commentaires.

Du vil imidlertid også kunne konsultere våre ressources, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.

I mellomtiden del denne artikkelen på de forskjellige sosiale nettverkene dine.   

...  

Legg inn kommentaren

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket *

Dette nettstedet bruker Akismet for å redusere uønsket. Lær mer om hvordan dine kommentarer data blir brukt.