Activați suportul SVG în WordPress

WordPress permite utilizatorilor să încarce destul de multe tipuri diferite de fișiere imagine. Probabil că veți recunoaște suspecții obișnuiți, cum ar fi PNG și JPG. Afișarea altor tipuri de fișiere, cum ar fi grafica vectorială, poate fi mai problematică.

Din fericire, există câteva modalități de a încorpora fișiere vectoriale în site-ul dvs. web. Deși nu este o caracteristică nativă, fișierele Scalable Vector Graphics (SVG) pot fi folosite pentru a afișa imagini bidimensionale pe site-urile WordPress. Cu o mică reconfigurare, veți putea optimiza unele dintre sigle și alte elemente grafice folosind acest tip de fișier.

Notă: Dacă găzduiți cu WP Engine, acceptăm în mod nativ compresia GZIP pe fișierele SVG.

În acest articol, vom afla mai multe despre ce sunt fișierele SVG și de ce ați putea dori să le utilizați. Apoi vom parcurge două moduri de a le permite utilizarea pe site-ul dvs. web. Vom acoperi, de asemenea, câteva măsuri importante de securitate pe care poate doriți să le luați. Să începem!

Ce este un SVG?

Un fișier SVG este un tip de imagine vectorială. Fișierele vectoriale sunt compuse diferit față de tipurile de fișiere imagine mai comune. De exemplu, un JPG este format din mii de pixeli. Cu un fișier SVG, pe de altă parte, nu este cazul.

Imaginile vectoriale sunt mai mult ca un set de instrucțiuni scrise. Nu conțin pixeli care formează o imagine mai mare. În schimb, ele includ un set de date asemănător unei scheme care creează o imagine bidimensională. Aceasta înseamnă că există câteva beneficii unice în utilizarea fișierelor SVG.

De ce să folosiți SVG?

SVG-urile au o serie de avantaje. Deoarece sunt foarte scalabile, puteți manipula dimensiunea după cum este necesar, fără a afecta calitatea imaginii. După cum probabil știți prea bine, dacă încercați să măriți dimensiunea unui JPG, calitatea se degradează foarte repede la un nivel inutilizabil.

Acolo pot fi utile SVG-urile. Deși nu sunt menite pentru afișarea fotografiilor tradiționale, ele sunt o alegere excelentă pentru logo-uri, pictograme și alte elemente grafice simple de pe site-ul dvs. web.

În plus, fișierele SVG tind să fie semnificativ mai mici decât alte tipuri de imagini. Aceasta înseamnă că site-ul dvs. nu va fi blocat de grafică. În plus, fișierele SVG sunt indexate de Google și au fost de ceva timp. Acest lucru poate fi un adevărat avantaj pentru optimizarea pentru motoarele de căutare (SEO) a site-ului dvs.

Cum să încărcați un SVG în WordPress

Deoarece WordPress nu include suport pentru SVG-uri din cutie, va trebui să munciți puțin mai mult pentru a le include pe site-ul dvs. web. În următoarele câteva secțiuni, vom analiza cum să adăugați fișiere SVG pe site-ul dvs. cu un plugin și printr-un proces manual.

Metoda 1: Folosiți un plugin

Ca și în cazul multor sarcini WordPress, pluginurile pot simplifica activarea suportului SVG. Tot ce trebuie să faceți este să alegeți instrumentul potrivit și să configurați câteva setări.

Pasul 1: Descărcați pluginul

În primul rând, va trebui să descărcați și să instalați un plugin SVG. Vă recomandăm suport SVG:

După ce ați instalat și activat pluginul, veți avea o nouă opțiune de meniu în tabloul de bord WordPress sub Setări > Asistență SVG . Acolo, veți primi instrucțiuni despre cum să stilați fișierele SVG pentru site-ul dvs.:

În plus, veți putea configura câteva setări administrative importante. Aceasta include restricționarea privilegiilor de încărcare SVG numai la administratori:

După aceea, veți putea încărca fișiere SVG direct în Biblioteca dvs. media. Cu toate acestea, există câteva alte elemente importante de care trebuie să aveți grijă mai întâi.

Pasul 2: Activați suportul GZip pentru fișierele SVG pe serverul dvs

Modul în care abordați acest pas va depinde de configurarea gazdei dvs. web și a serverului. De exemplu, aici, la WP Engine, GZip este deja activat pentru o listă specifică de tipuri de fișiere. Acestea fiind spuse, „image/svg+xml” nu este unul dintre ele.

Adăugarea acestui tip la lista pentru site-ul dvs. web vă va asigura că fișierele dvs. SVG sunt optimizate în mod corespunzător și rapid. Va trebui să includeți acest tip de fișier în fișierul dvs. .htaccess , pentru ca totul să funcționeze fără probleme.

Pasul 3: Asigurați-vă că pluginul securizează corect fișierele

Unul dintre dezavantajele utilizării fișierelor SVG și motivul principal pentru care acest tip de fișier nu a fost încă încorporat în nucleul WordPress, se datorează problemelor de securitate. Deoarece fișierele SVG sunt bazate pe XML, ele sunt vulnerabile la atacurile de entități externe, printre alte riscuri.

Când vă configurați pluginul SVG, este recomandat să limitați accesul la încărcarea SVG numai la administratori. Cu toate acestea, o abordare și mai sigură este să „igienizezi” fișierele SVG înainte de a le încărca. Acest lucru elimină orice cod XML inutil care ar putea lăsa site-ul dvs. deschis atacurilor.

Pluginul de asistență SVG nu include igienizarea automată, dar există și alte pluginuri care o fac. Safe SVG este unul dintre ele:

Alternativ, puteți instala și propriul dvs. dezinfectant și îl puteți utiliza independent. Creatorul Safe SVG a furnizat codul de dezinfectare al pluginului pe GitHub, pentru ca oricine să-l folosească.

A avea propriul dezinfectant este, de asemenea, o opțiune bună dacă intenționați să utilizați următoarea metodă pentru activarea SVG-urilor pe site-ul dvs. WordPress.

Metoda 2: Activați manual încărcările fișierelor SVG

Dacă preferați să vă murdăriți mâinile pentru a utiliza un plugin, puteți activa manual site-ul WordPress pentru a accepta fișiere SVG. În continuare, vom arunca o privire la modul în care funcționează acest proces.

Pasul 1: Editați fișierul Functions.php al site-ului dvs

Pentru a începe, va trebui să editați fișierul functions.php al site-ului dvs. web. Pentru a face acest lucru, puteți merge la Aspect > Editați teme în tabloul de bord și selectați fișierul functions.php :

Alternativ, puteți accesa fișierele site-ului dvs. folosind o aplicație FTP (File Transfer Protocol) precum FileZilla.

Oricum ar fi, cel mai bine este să creați o temă copil sau să treceți la un mediu de dezvoltare înainte de a face orice lucru major pe site-ul dvs. web. Acest lucru vă va proteja site-ul live de vătămări în timp ce efectuați modificări.

Pasul 2: Adăugați un fragment de cod

Apoi, va trebui să adăugați următorul fragment de cod în fișierul functions.php :

// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {

global $wp_version;
if ( $wp_version !== '4.7.1' ) {
return $data;
}

$filetype = wp_check_filetype( $filename, $mimes );

return [
'ext' => $filetype['ext'],
'type' => $filetype['type'],
'proper_filename' => $data['proper_filename']
];

}, 10, 4 );

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

function fix_svg() {
echo '<style type="text/css">
.attachment-266x266, .thumbnail img {
width: 100% !important;
height: auto !important;
}
</style>';
}
add_action( 'admin_head', 'fix_svg' );

După aceea, veți putea încărca imagini SVG în Biblioteca dvs. media. Acolo, le puteți vizualiza și interacționa cu ele la fel ca și în cazul altor tipuri de fișiere imagine.

Pasul 3: Accesul securizat și limitarea permisiunilor de încărcare SVG

După cum am menționat mai devreme, activarea fișierelor SVG implică anumite riscuri. Pentru a vă păstra site-ul în siguranță, puteți seta permisiuni de încărcare pentru SVG-uri creând roluri personalizate de utilizator. Puteți utiliza un plugin cum ar fi User Role Editor sau WPFront User Role Editor pentru a realiza acest lucru.

Aceste pluginuri vă permit să personalizați nivelurile de acces și permisiuni pentru rolurile dvs. de utilizator existente. Cu alte cuvinte, vă vor permite să desemnați utilizatorii care vor avea permisiunea de a încărca SVG-uri. Acest lucru vă va ajuta să urmăriți securitatea acelor fișiere.

Rămâneți în siguranță cu WP Engine

În mod nativ, WordPress nu permite utilizarea fișierelor SVG. Este regretabil, deoarece aceste fișiere tind să fie cea mai bună opțiune pentru afișarea logo-urilor și a altor elemente grafice. Vestea bună este că, cu ajutorul unora dintre resursele noastre preferate pentru dezvoltatori, veți putea activa și asigura utilizarea fișierelor SVG pe site-ul dvs.

În plus, rețineți că, pe planurile noastre de găzduire WordPress, veți avea acces la asistență profesională și soluții bine dezvoltate de securitate a site-ului web. Securizează-ți site-ul cu noi astăzi!