Kako prenijeti SVG u WordPress: 2 metode

još Passy Guy | WordPress Tutorial

Želite li naučiti kako prenijeti SVG-ove u WordPress? U ovom vodiču predstavit ćemo metode kako to postići..

Web administratori i web dizajneri dužni su koristiti različite formate medijskih datoteka u svom radu. Jedan od najpopularnijih formata danas je SVG, vektorski format baziran na XML-u. Nažalost, ne podržavaju svi preglednici i platforme SVG, pa 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đer ć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.

No, prije nego što započnemo, saznajte ako nikada niste instalirali WordPress Kako instalirati 7 korake WordPress blog et Kako pronaći, instalirati i aktivirati WordPress temu na svoj blog 

Onda se vratimo zašto smo ovdje.

Što 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 se format oslanja na XML označni jezik za opisivanje atributa slike.

U siječnju 2022, 42% svih web stranica u svijetu koristite SVG. Taj se postotak povećao od siječnja 2021., kada je samo 29,4% web stranica koristili su ga. 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 kod SVG-a je to što ga svi glavni preglednici naširoko podržavaju.

Ovdje je popis preglednika koji podržavaju SVG format datoteke:

navigatorDjelomična podrškaPotpuna podrška
ploča-Verzija 12-18, 79-96, 97
FirefoxVerzija 2Verzije 3-94, 95, 96-97
Firefox za Android-Verzija 95
krom-Verzije 4-96, 97, 98-100
Chrome za Android-Verzija 96
safariVerzija 3.1Verzija 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
preglednik za AndroidVerzija 3-4.3Izdanje 4.4-4.4.4, 96
UC preglednik za Android-Verzija 12.12
Samsung internet-Izdanje 4-14.0, 15.0
QQ preglednik-Verzija 10.4
Baidu preglednik-Verzija 7.12
KaiOS preglednik-Verzija 2.5

Kako radi 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, mijenjati i komprimirati poput koda. Kao rezultat toga, svatko ih može stvoriti pomoću uređivača teksta ili softvera za vektorsku grafiku.

Podržava li WordPress SVG?

U WordPressu prema zadanim postavkama nema podrške za SVG zbog sigurnosnih rizika koje nameće – kasnije ćemo detaljnije pokriti sigurnosne probleme oko SVG-a.

Evo poruke o pogrešci koja se pojavljuje prilikom učitavanja SVG grafike na web mjesto WordPress:

Tamo je trenutnu raspravu o tome da SVG postane dio osnovne funkcionalnosti WordPressa. Do tada moramo biti kreativni i koristiti druga rješenja za prijenos SVG slika u WordPress.

Zašto koristiti WordPress SVG?

Unatoč sigurnosnim problemima, mnogi korisnici još uvijek koriste ovaj format slike jer ima razne prednosti. Evo nekih od prednosti korištenja SVG datoteka:

  • Skalabilnost: Budući da je SVG format vektorske slike, SVG datoteke održavaju istu kvalitetu na svim razlučivostima zaslona. Ova prednost je prisutna i nakon 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 friendly : Google indeksira SVG datoteke, dopuštajući im da se pojave na Google pretrazi slika i poboljšava vaše napore u pretraživanju. SEO. S drugim vrstama slika ograničeni ste na optimizaciju njihovih alt atributa.
  • SVG-ovi koji se temelje 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 WordPressu i sigurnost

Budući da je SVG u biti XML tekstualna datoteka, ima ranjivosti koje se mogu iskoristiti i koje ne utječu na druge formate slika. Stoga ga ljudi mogu lako preoteti zlonamjernim kodom kako bi pokrenuli napade skriptiranja na više mjesta (XSS) i XML External Entity (XXE) na vaš sustav.

Iz tog razloga trebali biste biti oprezni pri rukovanju SVG datotekama i njihovom dodavanju u WordPress.

Da biste smanjili sigurnosne rizike, obavezno očistite SVG datoteke prije nego što ih prenesete u WordPress medijsku biblioteku. Ovaj proces uklanja sumnjivi kôd i pogreške, čineći slike sigurnima za vašu web stranicu.

Prenesene SVG datoteke možete očistiti pomoću SVG dodatka – kasnije ćemo pokriti njegove korake. Međutim, preporučujemo da ga dvaput dezinficirate SVG test za dezinfekciju -

Drugi način da osigurate svoju WordPress web stranicu jest ograničiti SVG prijenose samo na pouzdane korisnike. Odabrani korisnici trebali bi biti svjesni sigurnosnih problema oko SVG formata – to će ih obeshrabriti od dobivanja SVG datoteka iz sumnjivih izvora.

Kako prenijeti SVG datoteke u WordPress na 2 sigurne metode

Tehnički, postoje dva načina za dodavanje SVG podrške u WordPress: korištenjem a WordPress plugin ili ručnim aktiviranjem. Što god odabrali, snažno predlažemo da privilegije preuzimanja ograničite na administratore i pouzdane korisnike samo kako biste smanjili zlonamjerna preuzimanja.

Koristite dodatak za WordPress

U ovom vodiču koristit ćemo se SVG podrška. Ovo WordPress plugin koristi SVG dezinfekcijsku biblioteku koja će se automatski aktivirati prilikom učitavanja SVG datoteka u medijsku biblioteku. Također je jednostavan za postavljanje i besplatan za korištenje.

Evo koraka za konfiguriranje SVG podrške:

  1. IInstalirajte dodatak i aktivirajte ga.
prenesite SVG-ove u WordPress
  1. Pristup postavke -> podrška SVG s vaše WordPress nadzorne ploče.
  1. Označite okvir pored opcije Ograničiti na administratore ograničiti privilegije učitavanja. Učinite isto za opciju Aktivirajte napredni način rada ako želite pristup naprednim značajkama, kao što su inline SVG renderiranje i CSS stil.
prenesite SVG-ove u WordPress
  1. Nakon spremanja promjena, možete sigurno početi prenositi SVG datoteke u biblioteku medija.

Ručno dodajte podršku za WordPress SVG

Ova metoda uključuje uređivanje datoteke functions.php Vaše web stranice WordPress. Stoga preporučujemo da slijedite ove korake ako ste upoznati s PHP-om i potpuno razumijete SVG sigurnosni problem.

Obavezno sigurnosno kopirajte svoju WordPress web stranicu prije unošenja promjena kako bi se izbjegao gubitak podataka u slučaju pogrešne konfiguracije.

Sljedeći koraci će objasniti kako ručno omogućiti SVG u WordPressu uz pomoć FTP klijenta kao što je FileZilla.

  1. Idite u direktorij datoteka svoje web stranice na svom hostu
  2. Pristup public_html -> wp-uključuje. Pomičite se prema dolje dok ne dođete pronađi funkcije.php.
prenesite SVG-ove u WordPress
  1. Desnom tipkom miša kliknite ovu datoteku i odaberite Prikaži/Uredi 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');
  1. Spremite promjene i pokušajte prenijeti novu SVG datoteku. Ako je proces uspješan, vaša bi medijska biblioteka trebala prihvatiti prijenos datoteke.

Mnoge prednosti SVG datoteka pridonose rastućoj popularnosti ove vrste datoteka. Nažalost, XML tekstualne datoteke sklone su ubrizgavanju koda, što je glavni razlog zašto WordPress prema zadanim postavkama ne uključuje podršku za SVG.

Uz to, postoje dva načina da natjerate svoju WordPress web stranicu da prihvati SVG datoteke: pomoću a WordPress plugin ili uredite datoteku functions.php. Osim ograničavanja privilegija prijenosa, moći ćete sigurno prenositi SVG datoteke u medijsku biblioteku web-mjesta.

Ostali preporučeni resursi

Također vas pozivamo da se posavjetujete s sredstva ispod kako biste preuzeli više vlasništva i kontrole nad svojom web stranicom i blogom.

Zaključak

To je to za ovaj vodič koji vam pokazuje kako prenijeti 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 prijedloga, javite nam unutar Komentari.

Međutim, također ćete moći konzultirati naše sredstva, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na internetu Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.

U međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.   

...  

Objavi komentar

Vaša email adresa neće biti objavljena. Obavezna polja su označena *

Ova web stranica koristi Akismet kako bi smanjila neželjene. Saznajte više o načinu upotrebe podataka o vašim komentarima.