Ako nahrať vektorovú grafiku SVG do WordPress

Pred chvíľou som na svojom bočnom paneli vytvoril blok HTML (pozrite si ho posuňte sa nadol) na propagáciu pridružených produktov a iných WordPress tutoriály. Do toho bloku som chcel vložiť vektorovú grafiku.

SVG sú určené na popis dvojrozmernej vektorovej zmiešanej rastrovej grafiky v XML.

Vektorová grafika (.SVG) zaberá menej miesta a je ľahko škálovateľná. Môžete ich škálovať a upravovať ich veľkosti bez zníženia kvality. Načítavajú sa tiež rýchlejšie v porovnaní s inými formátmi obrázkov, napríklad .png. Dôrazne sa odporúča používať SVG Obsahové boxy WordPress.

Väčšina dnešných prehliadačov štandardne podporuje SVG. Vektorová grafika sa úžasne škáluje podľa rôznych veľkostí obrazovky. Na sietnicovom displeji môžete očakávať ostrý obraz bez akéhokoľvek zhoršenia kvality.

SVG znamená škálovateľnú vektorovú grafiku. WordPress vám umožňuje nahrať viacero formátov obrázkov, medzi ktoré patrí .jpeg, .jpg, .gif a .png.

WordPress vám ich však spočiatku neumožňuje nahrať. Pri pokuse o odovzdanie grafiky vo formáte .svg sa zobrazí nasledujúca chyba:

Grafika SVG je rovnako bezpečná ako iné obrazové formáty. Mnohí však veria, že SVG nie sú obrázky; sú to dokumenty. Sú zraniteľné a ak majú vaši prispievatelia prístup na ich nahrávanie, možno by ste to mali zastaviť.

Tu je výňatok z Príspevok Bjorna Johansena o tom, prečo nie sú SVG povolené vo WordPress:

SVG umožňuje veľa útočných vektorov podľa návrhu, nie náhodou, takže nehovoríme o nezaplatených zabezpečenia problémy tu. SVG sa dajú skutočne ľahko zneužiť a jediný „bezpečný“ spôsob, ako sa s nimi vysporiadať, je zakázať funkcie. JPEG a PNG nie sú navrhnuté tak, aby umožňovali napríklad spúšťanie ľubovoľného kódu.

Môžete očakávať, že jadro WordPress ich v predvolenom nastavení čoskoro povolí. Poďme sa pozrieť na to, ako jednoducho nahrať SVG do WordPress.

V tomto článku sa podelím o niekoľko spôsobov, ako to urobiť. Pomocou ktorejkoľvek z uvedených metód budete môcť jednoducho nahrať svoju obľúbenú vektorovú grafiku.

Začnime.

1. Úprava Functions.php

Túto metódu by som vám odporučil dodržiavať. Je to jednoduché a nebudete inštalovať žiadny extra plugin, čo je vždy lepšie rýchlosť a čas načítania vášho webu.

Prvou metódou, ktorá umožní WordPress prijať.SVG, je úprava vášho súboru functions.php. Skopírujte a prilepte nižšie uvedený kód, ktorý povoľuje iba obrázky SVG, keďže autorizuje typ MIME. Čo potom umožňuje knižnici médií WordPress prijímať obrázky SVG.

Skopírujte a prilepte nižšie uvedený kód do súboru functions.php:

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_action('upload_mimes', 'add_file_types_to_uploads');

Ak vyššie uvedený kód nefunguje, môžete alternatívne skopírovať/prilepiť nasledujúci kód:

function cc_mime_types($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

Pozrite sa, ako to vyššie uvedený kód umožňuje .svg+xml byť videný ako typ obrázka v riadku 2.

Ak nemôžete nájsť súbor functions.php alebo neviete, ako správne pridať kód, nechajte túto časť. Nainštalujte doplnok útržkov kódu a vložte do nej kód. Nebudete sa musieť dotknúť žiadneho súboru.

Prejdime k našej druhej metóde.

2. Doplnky WordPress na aktiváciu podpory SVG

Ak sa nechcete dotýkať súborov tém, nevadí. Existuje niekoľko doplnkov, ktoré vám pomôžu rýchlo nahrať SVG.

Bezpečné SVG

Safe SVG je momentálne najlepší bezplatný doplnok na nahrávanie súborov SVG.

Doplnok je určený na dezinfekciu špinavého a zraniteľného kódu SVG/XML. To zaistí, že používate už dezinfikovaný kód, ktorý neodhalí rôzne zraniteľnosti vášho webu.

Dodáva sa aj v profesionálnej verzii, Bezpečný SVG pro. Odporúčam vám to skontrolovať, ak chcete:

• Vyberte, kto môže nahrať SVG.
• Skenujte súbory SVG
• Hostite svoje súbory SVG na inom serveri
• Optimalizujte ich na rýchlosť

Používanie doplnku Safe SVG je jednoduché. Prejdite na svoj informačný panel WordPress, kliknite na pridať nové doplnky a nainštalujte Safe SVG. Môžete si ho aj stiahnuť odtiaľ a nainštalujte ho ručne.

Podpora SVG

Podpora SVG vám tiež umožňuje jednoducho nahrať vektorovú grafiku do vašej knižnice médií WordPress.

Nainštalujte a aktivujte doplnok podpory SVG a môžete začať. Neexistujú žiadne ďalšie nastavenia a do knižnice médií budete môcť nahrať súbory SVG.

Dôrazne vám odporúčam prejsť do nastavení pluginu podpory SVG a začiarknutím políčka zapnúť „obmedziť oprávnenia na nahrávanie SVG iba na správcov.“

Iba teraz budú môcť ostatní správcovia nahrať akýkoľvek druh grafiky SVG. Tým sa zvýši celková bezpečnosť vášho blogu WordPress.

WP Extra typy súborov

WP Extra typy súborov je ďalší doplnok, ktorý môžete použiť na nahrávanie súborov SVG priamo do vašej knižnice médií. Nielen to, že vám to čoskoro pomôže, ak by ste niekedy chceli pridať ďalšie typy súborov, ako napríklad .rq, .st atď.

Po inštalácii doplnku prejdite do jeho nastavení a kliknite na začiarkavacie políčko .svg. Kliknite na uložiť nastavenia a obnovte stránku.

Ak stále nemôžete nahrať súbory .svg, vymažte vyrovnávaciu pamäť. Vyčistite vyrovnávaciu pamäť servera a tiež vymažte vyrovnávaciu pamäť prehliadača. Pomôže to rýchlo vyriešiť problém.

To je všetko.

Teraz by ste mali byť schopní nahrať každú grafiku .svg na váš web WordPress. SVG sú úžasní interpreti, najmä keď ich vložíte ako svoje logo do svojich obsahových boxov a mediálnej súpravy. Na konverziu vášho existujúceho loga alebo akéhokoľvek iného obrázka, ktorý chcete, z JPG, PNG na SVG, môžete použiť online platformy ako Convertio zadarmo.

Niekoľko ďalších článkov, ktoré by ste si chceli prečítať:

• Ako zabrániť rozmazaniu a zmenšeniu obrázkov vo WordPress
• Ako automaticky upravovať svoje obrázky tak, aby boli SEO priateľské pre WordPress
• Ako zobraziť posledný aktualizovaný dátum nad blogovými príspevkami WordPress

Zdieľajte tento návod so svojimi priateľmi WordPress a dajte mi vedieť, aký spôsob ste si vybrali v komentároch nižšie.