Ako nahrať SVG do WordPress: 2 spôsoby

Chcete sa dozvedieť, ako nahrať SVG do WordPress? V tomto návode vám predstavíme spôsoby, ako to dosiahnuť..

Weboví správcovia a weboví dizajnéri musia pri svojej práci používať rôzne formáty mediálnych súborov. Jedným z najpopulárnejších formátov súčasnosti je SVG, vektorový formát založený na XML. Bohužiaľ, nie všetky prehliadače a platformy podporujú SVG, takže najprv musíte podporu SVG povoliť manuálne.

Tento článok sa bude zaoberať krokmi na nahrávanie súborov SVG na webovú stránku WordPress pomocou doplnku Podpora SVG. Odpovieme aj na niekoľko otázok týkajúcich sa bezpečnostných problémov súvisiacich s týmto konkrétnym formátom mediálneho súboru a prečo sa oplatí používať SVG.

Na začiatok sa zoznámime so SVG a s tým, ako funguje.

Ale skôr ako začneme, zistite, či ste WordPress nikdy nenainštalovali Ako nainštalovať 7 krokov WordPress blogu et Ako nájsť, nainštalovať a aktivovať WordPress tému na svojom blogu 

Potom späť k tomu, prečo sme tu.

čo je SVG?

Scalable Vector Graphics (SVG) je formát vektorovej grafiky založený na texte XML. Hoci bežné obrazové formáty ako JPG a PNG sú tvorené množstvom malých štvorcov nazývaných pixely, tento formát sa pri popise atribútov obrázkov spolieha na značkovací jazyk XML.

V januári 2022, 42 % všetkých webových stránok na celom svete použite SVG. Toto percento sa zvýšilo iba od januára 2021 29,4 % webových stránok použili to. Podobne ako formáty PNG a JPG je SVG populárny medzi webmi s vysokou návštevnosťou, ako sú Google, Wikipedia a YouTube.

Ďalšia skvelá vec na SVG je, že je široko podporovaná všetkými hlavnými prehliadačmi.

tu je zoznam prehliadačov ktoré podporujú formát súboru SVG:

navigátor	Čiastočná podpora	Plná podpora
Bord	-	Verzia 12-18, 79-96, 97
Firefox	verzia 2	Verzie 3-94, 95, 96-97
Firefox pre Android	-	verzia 95
chróm	-	Verzie 4-96, 97, 98-100
Chrome pre Android	-	verzia 96
safari	verzia 3.1	Verzia 3.2-15.1, 15.2, TP
Opera	-	Verzie 10-81, 82
Mini Opera	-	Všetky verzie
Opera Mobile	-	Vydanie 12-12.1, 64
Safari na iOS	-	Vydanie 3.2-15.1, 15.2
prehliadač Android	Verzia 3-4.3	Vydanie 4.4-4.4.4, 96
Prehliadač UC pre Android	-	verzia 12.12
Samsung Internet	-	Vydanie 4-14.0, 15.0
Prehliadač QQ	-	verzia 10.4
Prehliadač Baidu	-	verzia 7.12
Prehliadač KaiOS	-	verzia 2.5

Ako funguje SVG?

SVG používajú XML na vytváranie dvojrozmerných vektorových obrázkov. Na rozdiel od JPG a PNG nemá vektorová grafika žiadne pixely. Namiesto toho je ich správanie opísané v textových súboroch XML.

Z tohto dôvodu je možné SVG vyhľadávať, indexovať, skriptovať, upravovať a komprimovať ako kód. Vďaka tomu ich môže vytvoriť ktokoľvek pomocou textového editora alebo softvéru na vektorovú grafiku.

Podporuje WordPress SVG?

WordPress štandardne nepodporuje SVG kvôli bezpečnostným rizikám, ktoré prináša – bezpečnostným problémom súvisiacim s SVG sa budeme podrobnejšie venovať neskôr.

Toto je chybové hlásenie, ktoré sa zobrazí pri nahrávaní grafiky SVG na webovú stránku WordPress:

Existuje aktuálna diskusia o tom, že SVG bude súčasťou základnej funkcie WordPress. Dovtedy musíme byť kreatívni a používať iné riešenia na nahrávanie SVG obrázkov na WordPress.

Prečo používať WordPress SVG?

Napriek problémom so zabezpečením mnohí používatelia stále používajú tento formát obrázka, pretože má rôzne výhody. Tu sú niektoré z výhod používania súborov SVG:

• Škálovateľnosť: Keďže SVG je formát vektorových obrázkov, súbory SVG si zachovávajú rovnakú kvalitu pri všetkých rozlíšeniach obrazovky. Táto výhoda je prítomná aj po ich zväčšení, a preto veľa ľudí používa tento škálovateľný formát obrázkov pre ikony a logá.
• Menšia veľkosť súboru : Súbory SVG uľahčujú zlepšenie výkonu webových stránok, pretože zaberajú menej miesta na webe a načítavajú sa oveľa rýchlejšie ako iné obrázky.
• SEO Friendly : Google indexuje súbory SVG, čo umožňuje ich zobrazenie v službe Vyhľadávanie obrázkov Google a zlepšuje vaše vyhľadávanie. SEO. Pri iných typoch obrázkov sa obmedzujete na optimalizáciu ich alternatívnych atribútov.
• SVG založené na kóde sú upraviteľné pomocou textového editora alebo softvéru na úpravu vektorovej grafiky. Môžete optimalizovať súbory SVG pre webové stránky alebo dokonca pridať animácie, aby bola grafika interaktívna.

SVG na WordPress a bezpečnosť

Keďže SVG je v podstate textový súbor XML, má zneužiteľné zraniteľnosti, ktoré neovplyvňujú iné formáty obrázkov. Preto ho môžu ľudia ľahko uniesť pomocou škodlivého kódu a spustiť útoky Cross-Site Scripting (XSS) a XML External Entity (XXE) na váš systém.

Z tohto dôvodu by ste mali byť opatrní pri manipulácii so súbormi SVG a ich pridávaní do WordPress.

Ak chcete minimalizovať bezpečnostné riziká, nezabudnite dezinfikovať súbory SVG pred ich odovzdaním do knižnice médií WordPress. Tento proces odstraňuje podozrivý kód a chyby, vďaka čomu sú obrázky bezpečné pre váš web.

Nahrané súbory SVG môžete vyčistiť pomocou doplnku SVG – jeho krokom sa budeme venovať neskôr. Odporúčame ho však dezinfikovať dvakrát pomocou Test dezinfekčného prostriedku SVG -

Ďalším spôsobom, ako zabezpečiť svoju webovú stránku WordPress, je obmedziť nahrávanie SVG iba na dôveryhodných používateľov. Vybraní používatelia by si mali byť vedomí bezpečnostných problémov týkajúcich sa formátu SVG – to ich odradí od získavania súborov SVG z pochybných zdrojov.

Ako nahrať súbory SVG do WordPress v 2 bezpečných metódach

Technicky existujú dva spôsoby, ako pridať podporu SVG do WordPress: pomocou a WordPress Plugin alebo manuálnou aktiváciou. Bez ohľadu na to, čo si vyberiete, dôrazne vám odporúčame, aby ste oprávnenia sťahovania obmedzili iba na správcov a dôveryhodných používateľov, aby ste minimalizovali škodlivé sťahovanie.

Použite doplnok WordPress

V tomto návode použijeme Podpora SVG. Tento WordPress Plugin používa knižnicu SVG sanitizer, ktorá sa automaticky aktivuje pri nahrávaní súborov SVG do knižnice médií. Je tiež jednoduché ho nastaviť a používať zadarmo.

Tu sú kroky na konfiguráciu podpory SVG:

1. INainštalujte doplnok a aktivujte ho.

2. Prístup k nastavenie -> podpora SVG z hlavného panela WordPress.

3. Začiarknite políčko vedľa možnosti Obmedziť na správcov obmedziť práva na nahrávanie. Urobte to isté pre možnosť Aktivujte rozšírený režim ak chcete mať prístup k pokročilým funkciám, ako je napríklad vnorené vykresľovanie SVG a štýly CSS.

4. Po uložení zmien môžete bezpečne začať nahrávať súbory SVG do knižnice médií.

Manuálne pridajte podporu WordPress SVG

Táto metóda zahŕňa úpravu súboru functions.php vášho webu WordPress. Preto dôrazne odporúčame, aby ste postupovali podľa týchto krokov, ak poznáte PHP a plne rozumiete bezpečnostnému problému SVG.

Určite zálohujte si svoj web WordPress pred vykonaním zmien, aby ste predišli strate údajov v prípade nesprávnej konfigurácie.

Nasledujúce kroky vysvetlia, ako manuálne povoliť SVG vo WordPress pomocou FTP klienta FileZilla.

1. Prejdite do adresára súborov na svojej webovej lokalite u svojho hostiteľa
2. Prístup k public_html -> wp-obsahuje. Posúvajte sa nadol, až kým nebudete nájsť funkcie.php.

3. Kliknite pravým tlačidlom myši na tento súbor a výberom položky Zobraziť/Upraviť ho otvorte a vložte doň nasledujúci útržok kódu:

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');

4. Uložte zmeny a skúste nahrať nový súbor SVG. Ak je proces úspešný, vaša knižnica médií by mala akceptovať nahranie súboru.

Mnoho výhod súborov SVG prispieva k rastúcej popularite tohto typu súborov. Bohužiaľ, textové súbory XML sú náchylné na vloženie kódu, čo je hlavný dôvod, prečo WordPress štandardne nezahŕňa podporu SVG.

To znamená, že existujú dva spôsoby, ako dosiahnuť, aby váš web WordPress prijímal súbory SVG: pomocou a WordPress Plugin alebo upravte súbor functions.php. Okrem obmedzenia práv na nahrávanie budete môcť bezpečne nahrávať súbory SVG do knižnice médií webovej stránky.

Ďalšie odporúčané zdroje

Pozývame vás tiež na konzultáciu zdroje nižšie, aby ste sa dostali hlbšie do začiatkov a ovládania vašich webových stránok a blogu.

• Ako vytvoriť jednoduchý doplnok WordPress
• Ako vytvoriť jednoduchý doplnok Gutenberg Block WordPress
• Ako nastaviť svoju domovskú stránku vo WordPress
• Ako porozumieť hlavnému panelu WordPress
• Ako vytvoriť jednoduchý doplnok WordPress

záver

To je všetko pre túto príručku, ktorá vám ukáže, ako nahrať súbory SVG do WordPress. Dúfame, že vám tento článok poskytol prehľad o výhodách a rizikách nahrávania súborov SVG na webovú stránku WordPress. Ak máte nejaké obavy alebo návrhy, dajte nám vedieť Komentáre.

Môžete sa však poradiť aj s našimi zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.

Medzitým, zdieľajte tento článok na rôznych sociálnych sieťach.   

...