Želite li naučiti kako da otpremite SVG-ove na WordPress? U ovom tutorijalu predstavit ćemo metode kako to postići..
Web administratori i web dizajneri su dužni koristiti različite formate medijskih datoteka u svom radu. Jedan od najpopularnijih formata danas je SVG, vektorski format zasnovan na XML-u. Nažalost, ne podržavaju svi pretraživači i platforme SVG, tako da prvo morate ručno omogućiti podršku za SVG.
Ovaj članak će pokriti korake za učitavanje SVG datoteka na WordPress web stranicu pomoću dodatka za podršku SVG. Takođe ćemo odgovoriti na nekoliko pitanja u vezi sa sigurnosnim problemima koji okružuju ovaj određeni format medijske datoteke i zašto se SVG isplati koristiti.
Za početak, upoznajmo se sa SVG-om i kako on funkcionira.
Ali prije nego što započnemo, saznajte ako nikada niste instalirali WordPress Kako instalirati WordPress blog u koracima 7 et Kako pronaći, instalirati i aktivirati WordPress temu na svom blogu
Onda se vratimo na pitanje zašto smo ovde.
Šta je SVG?
Skalabilna vektorska grafika (SVG) je XML tekstualni format vektorske grafike. Iako se uobičajeni formati slika kao što su JPG i PNG sastoje od tona sićušnih kvadrata zvanih pikseli, ovaj format se oslanja na XML jezik za označavanje da bi opisao atribute slike.
U januaru 2022, 42% svih web stranica širom svijeta koristite SVG. Ovaj postotak je povećan od januara 2021. godine, kada je samo 29,4% web stranica koristili. Slično PNG i JPG formatima, SVG je popularan među web stranicama s velikim prometom kao što su Google, Wikipedia i YouTube.
Još jedna sjajna stvar u vezi sa SVG-om je da je široko podržan od strane svih glavnih pretraživača.
Evo je lista pretraživača koji podržavaju SVG format datoteke:
| navigator | Djelimična podrška | Potpuna podrška |
| odbor | - | Verzija 12-18, 79-96, 97 |
| Firefox | verzija 2 | Verzije 3-94, 95, 96-97 |
| Firefox za Android | - | verzija 95 |
| Chrome | - | Verzije 4-96, 97, 98-100 |
| Chrome za Android | - | verzija 96 |
| safari | verzija 3.1 | Verzija 3.2-15.1, 15.2, TP |
| Opera | - | Verzije 10-81, 82 |
| Mini Opera | - | Sve verzije |
| Opera Mobile | - | Izdanje 12-12.1, 64 |
| Safari na iOS-u | - | Izdanje 3.2-15.1, 15.2 |
| Android pretraživač | Verzija 3-4.3 | Izdanje 4.4-4.4.4, 96 |
| UC pretraživač za Android | - | verzija 12.12 |
| Samsung Internet | - | Izdanje 4-14.0, 15.0 |
| QQ Browser | - | verzija 10.4 |
| Baidu Browser | - | verzija 7.12 |
| KaiOS pretraživač | - | verzija 2.5 |
Kako funkcioniše SVG?
SVG-ovi koriste XML za proizvodnju dvodimenzionalnih vektorskih slika. Za razliku od JPG-a i PNG-a, vektorska grafika nema piksele. Umjesto toga, njihovo ponašanje je opisano u XML tekstualnim datotekama.
Iz tog razloga, SVG-ovi se mogu pretraživati, indeksirati, skriptirati, modificirati i komprimirati poput koda. Kao rezultat toga, svako ih može kreirati pomoću uređivača teksta ili softvera za vektorsku grafiku.
Da li WordPress podržava SVG?
U WordPress-u po defaultu nema SVG podrške zbog sigurnosnih rizika koje nameće – kasnije ćemo detaljnije pokriti sigurnosne probleme u vezi sa SVG-om.
Evo poruke o grešci koja se pojavljuje prilikom učitavanja SVG grafike na WordPress web stranicu:
Postoji trenutnu diskusiju o tome da SVG postane dio osnovne WordPress funkcionalnosti. Do tada moramo biti kreativni i koristiti druga rješenja za otpremanje SVG slika u WordPress.
Zašto koristiti WordPress SVG?
Uprkos sigurnosnim problemima, mnogi korisnici i dalje koriste ovaj format slike jer ima razne prednosti. Evo nekih od prednosti korištenja SVG datoteka:
- Skalabilnost: Pošto je SVG format vektorske slike, SVG datoteke održavaju isti kvalitet na svim rezolucijama ekrana. Ova prednost je prisutna i nakon njihovog povećanja, zbog čega mnogi ljudi koriste ovaj skalabilni format slike za ikone i logotipe.
- Manja veličina datoteke : SVG datoteke olakšavaju poboljšanje performansi web stranice jer zauzimaju manje prostora za pohranu na webu i učitavaju se mnogo brže od drugih slika.
- SEO Prijateljski : Google indeksira SVG fajlove, omogućavajući im da se pojave na Google pretrazi slika i poboljšavajući vaše napore pretraživanja. SEO. Kod drugih vrsta slika, ograničeni ste na optimizaciju njihovih alt atributa.
- SVG-ovi zasnovani na kodu mogu se uređivati pomoću uređivača teksta ili softvera za uređivanje vektorske grafike. Možete optimizirati SVG datoteke za web stranice ili čak dodati animacije kako biste grafiku učinili interaktivnom.
SVG na WordPress-u i sigurnost
Pošto je SVG u suštini XML tekstualna datoteka, ima ranjivosti koje se mogu iskoristiti i koje ne utiču na druge formate slika. Stoga, ljudi ga lako mogu oteti zlonamjernim kodom kako bi pokrenuli napade skriptiranja na više lokacija (XSS) i XML External Entity (XXE) na vaš sistem.
Iz tog razloga, trebali biste biti oprezni kada rukujete SVG datotekama i dodajete ih u WordPress.
Da biste smanjili sigurnosne rizike, obavezno očistite SVG datoteke prije nego što ih otpremite u WordPress medijsku biblioteku. Ovaj proces uklanja sumnjivi kod i greške, čineći slike sigurnim za vašu web stranicu.
Možete očistiti otpremljene SVG datoteke pomoću SVG dodatka – kasnije ćemo pokriti njegove korake. Ipak, preporučujemo da ga dva puta dezinfikujete sa SVG test za dezinfekciju -
Drugi način da osigurate svoju WordPress web stranicu je da ograničite SVG otpremanje samo na pouzdane korisnike. Odabrani korisnici bi trebali biti svjesni sigurnosnih problema oko SVG formata – to će ih obeshrabriti da nabavljaju SVG datoteke iz sumnjivih izvora.
Kako prenijeti SVG datoteke u WordPress na 2 bezbedna metoda
Tehnički, postoje dva načina za dodavanje SVG podrške u WordPress: korištenjem a WordPress dodatak ili ručnim aktiviranjem. Šta god da odaberete, preporučujemo vam da ograničite privilegije preuzimanja na administratore i pouzdane korisnike samo kako biste minimizirali zlonamjerna preuzimanja.
Koristite WordPress dodatak
U ovom vodiču ćemo koristiti SVG podrška. ovo WordPress dodatak koristi SVG sanitizer biblioteku koja će se automatski aktivirati prilikom otpremanja SVG datoteka u biblioteku medija. Također je jednostavan za postavljanje i besplatan za korištenje.
Evo koraka za konfiguriranje SVG podrške:
- IInstalirajte dodatak i aktivirajte ga.
- Pristup postavke -> podrška SVG sa vaše WordPress kontrolne table.
- Označite polje pored opcije Ograničeno na administratore da ograničite privilegije učitavanja. Uradite isto za opciju Aktivirajte napredni način rada ako želite pristup naprednim funkcijama, kao što su inline SVG renderiranje i CSS stil.
- Nakon što sačuvate promjene, možete bezbedno početi sa otpremanjem SVG datoteka u biblioteku medija.
Ručno dodajte podršku za WordPress SVG
Ova metoda uključuje uređivanje datoteke functions.php vaše WordPress web stranice. Stoga, toplo preporučujemo da slijedite ove korake ako ste upoznati sa PHP-om i potpuno razumijete SVG sigurnosni problem.
Obavezno backup vaše WordPress web stranice prije unošenja izmjena kako biste izbjegli gubitak podataka u slučaju pogrešne konfiguracije.
Sljedeći koraci će objasniti kako ručno omogućiti SVG u WordPress-u uz pomoć FTP klijenta kao što je FileZilla.
- Idite u direktorij datoteka vaše web stranice na svom hostu
- Pristup public_html -> wp-uključuje. Pomičite se prema dolje dok ne dođete find functions.php.
- Kliknite desnim tasterom miša na ovu datoteku i odaberite View/Edit da je otvorite i zalijepite sljedeći isječak koda u nju:
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');- Sačuvajte promene i pokušajte da otpremite novi SVG fajl. Ako je proces uspješan, vaša biblioteka medija bi trebala prihvatiti otpremanje datoteke.
Mnoge prednosti SVG datoteka doprinose rastućoj popularnosti ove vrste datoteka. Nažalost, XML tekstualne datoteke su sklone ubrizgavanju koda, što je glavni razlog zašto WordPress podrazumevano ne uključuje SVG podršku.
Uz to, postoje dva načina da natjerate svoju WordPress web stranicu da prihvati SVG datoteke: pomoću a WordPress dodatak ili uredite datoteku functions.php. Pored ograničavanja privilegija za otpremanje, moći ćete bezbedno da otpremate SVG fajlove u biblioteku medija veb lokacije.
Ostali preporučeni resursi
Takođe vas pozivamo da konsultujete sredstva ispod da preuzmete više vlasništva i kontrole nad vašom web lokacijom i blogom.
- Kako napraviti jednostavan WordPress dodatak
- Kako napraviti jednostavan Gutenberg Block WordPress dodatak
- Kako postaviti svoju početnu stranicu u WordPress-u
- Kako razumjeti WordPress kontrolnu tablu
- Kako napraviti jednostavan WordPress dodatak
zaključak
To je to za ovaj vodič koji vam pokazuje kako da otpremite SVG-ove u WordPress. Nadamo se da vam je ovaj članak dao uvid u prednosti i rizike učitavanja SVG datoteka na WordPress web stranicu. Ako imate bilo kakvih nedoumica ili sugestija, javite nam u roku komentari.
Međutim, takođe ćete moći da se konsultujete sa našim sredstva, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem o Izrada bloga WordPress ili onaj on Divi: najbolja WordPress tema svih vremena.
U međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
