Cum să încărcați SVG-uri în WordPress: 2 metode

Doriți să aflați cum să încărcați SVG-uri în WordPress? Vom prezenta în acest tutorial metodele pentru a realiza acest lucru..

Administratorii web și designerii web sunt obligați să folosească diferite formate de fișiere media în munca lor. Unul dintre cele mai populare formate astăzi este SVG, un format vectorial bazat pe XML. Din păcate, nu toate browserele și platformele acceptă SVG, așa că mai întâi trebuie să activați manual suportul SVG.

Acest articol va acoperi pașii pentru încărcarea fișierelor SVG pe un site web WordPress folosind pluginul de asistență SVG. Vom răspunde, de asemenea, la câteva întrebări referitoare la problemele de securitate legate de acest format de fișier media și de ce merită folosit SVG.

Pentru a începe, să ne familiarizăm cu SVG și cum funcționează.

Dar înainte de a începe, dacă nu ați instalat niciodată WordPress, aflați Cum se instalează un blog WordPress pași 7 et Cum de a găsi, a instala și a activa o temă WordPress pe blog-ul dvs. 

Apoi înapoi la motivul pentru care suntem aici.

Ce este SVG?

Scalable Vector Graphics (SVG) este un format de imagine grafică vectorială bazată pe text XML. Deși formatele obișnuite de imagine precum JPG și PNG sunt formate din tone de pătrate minuscule numite pixeli, acest format se bazează pe limbajul de marcare XML pentru a descrie atributele imaginii.

În ianuarie 2022, 42% din toate site-urile web din întreaga lume utilizați SVG. Acest procent a crescut din ianuarie 2021, când abia 29,4% dintre site-uri web l-au folosit. Similar cu formatele PNG și JPG, SVG este popular printre site-urile web cu trafic ridicat precum Google, Wikipedia și YouTube.

Un alt lucru grozav despre SVG este că este acceptat pe scară largă de toate browserele majore.

Aici este lista de browsere care acceptă formatul de fișier SVG:

navigator	Sprijin parțial	Sprijin deplin
Semnale de advertisment	-	Versiunea 12-18, 79-96, 97
Firefox (en engleză)	versiune 2	Versiunile 3-94, 95, 96-97
Firefox pentru Android	-	versiune 95
Chrome	-	Versiunile 4-96, 97, 98-100
Chrome pentru Android	-	versiune 96
Safari	versiune 3.1	Versiunea 3.2-15.1, 15.2, TP
Operă	-	Versiunile 10-81, 82
Mini Opera	-	Toate versiunile
Opera mobilă	-	Versiunea 12-12.1, 64
Safari pe iOS	-	Versiunea 3.2-15.1, 15.2
Browser Android	Versiunea 3-4.3	Versiunea 4.4-4.4.4, 96
UC Browser pentru Android	-	versiune 12.12
Samsung Internet	-	Versiunea 4-14.0, 15.0
Browser QQ	-	versiune 10.4
Browser Baidu	-	versiune 7.12
Browser KaiOS	-	versiune 2.5

Cum funcționează SVG?

SVG-urile folosesc XML pentru a produce imagini vectoriale bidimensionale. Spre deosebire de JPG și PNG, grafica vectorială nu are pixeli. În schimb, comportamentul lor este descris în fișiere text XML.

Din acest motiv, SVG-urile pot fi căutate, indexate, scriptate, modificate și comprimate ca un cod. Ca rezultat, oricine le poate crea folosind un editor de text sau un software de grafică vectorială.

WordPress acceptă SVG?

Nu există suport pentru SVG în WordPress în mod implicit, din cauza riscurilor de securitate pe care le impune – vom trata problemele de securitate legate de SVG mai în profunzime mai târziu.

Iată un mesaj de eroare care apare la încărcarea unei imagini SVG pe un site web WordPress:

Este un discuție curentă pentru a face SVG parte din funcționalitatea de bază WordPress. Până atunci, trebuie să fim creativi și să folosim alte soluții pentru a încărca imagini SVG pe WordPress.

De ce să folosiți WordPress SVG?

În ciuda problemelor de securitate, mulți utilizatori încă folosesc acest format de imagine, deoarece are diverse avantaje. Iată câteva dintre beneficiile utilizării fișierelor SVG:

• Scalabilitate: Deoarece SVG este un format de imagine vectorială, fișierele SVG păstrează aceeași calitate pe toate rezoluțiile ecranului. Acest avantaj este prezent și după mărirea acestora, motiv pentru care mulți oameni folosesc acest format de imagine scalabil pentru pictograme și logo-uri.
• Dimensiune mai mică a fișierului : Fișierele SVG facilitează îmbunătățirea performanței site-ului web, deoarece ocupă mai puțin spațiu de stocare web și se încarcă mult mai rapid decât alte imagini.
• SEO Friendly : Google indexează fișierele SVG, permițându-le să apară în Căutarea de imagini Google și îmbunătățind eforturile dvs. de căutare. SEO. Cu alte tipuri de imagini, sunteți limitat la optimizarea atributelor lor alte.
• SVG-uri bazate pe cod sunt editabile folosind un editor de text sau un software de editare a graficelor vectoriale. Puteți optimiza fișierele SVG pentru site-uri web sau chiar puteți adăuga animații pentru a face grafica interactivă.

SVG pe WordPress și securitate

Deoarece SVG este în esență un fișier text XML, are vulnerabilități exploatabile care nu afectează alte formate de imagine. Prin urmare, oamenii îl pot deturna cu ușurință cu cod rău intenționat pentru a lansa atacuri Cross-Site Scripting (XSS) și XML External Entity (XXE) asupra sistemului dumneavoastră.

Din acest motiv, ar trebui să fiți atenți când manipulați fișierele SVG și le adăugați la WordPress.

Pentru a minimiza riscurile de securitate, asigurați-vă că dezinfectați fișierele SVG înainte de a le încărca în biblioteca media WordPress. Acest proces elimină codurile și erorile suspecte, făcând imaginile sigure pentru site-ul dvs. web.

Puteți curăța fișierele SVG încărcate folosind un plugin SVG – vom acoperi pașii acestuia mai târziu. Cu toate acestea, vă recomandăm să-l dezinfectați de două ori cu Test de dezinfectare SVG -

O altă modalitate de a vă asigura site-ul WordPress este să limitați încărcările SVG numai la utilizatorii de încredere. Utilizatorii selectați ar trebui să fie conștienți de problemele de securitate legate de formatul SVG - acest lucru îi va descuraja să obțină fișiere SVG din surse dubioase.

Cum să încărcați fișiere SVG în WordPress în 2 metode sigure

Din punct de vedere tehnic, există două moduri de a adăuga suport SVG la WordPress: folosind un WordPress plug-in sau activând-o manual. Indiferent ce alegeți, vă sugerăm insistent să limitați privilegiile de descărcare la administratori și utilizatori de încredere numai pentru a minimiza descărcările rău intenționate.

Utilizați un plugin WordPress

În acest tutorial, vom folosi Suport SVG. Acest WordPress plug-in folosește o bibliotecă de dezinfectare SVG care se va activa automat la încărcarea fișierelor SVG în biblioteca media. De asemenea, este ușor de configurat și gratuit de utilizat.

Iată pașii pentru a configura suportul SVG:

1. IInstalați pluginul și activează-l.

2. Accesul la setările -> a sustine SVG din tabloul de bord WordPress.

3. Bifați caseta de lângă opțiune Restricționați la administratori pentru a limita privilegiile de încărcare. Faceți același lucru pentru opțiune Activați modul avansat dacă doriți acces la funcții avansate, cum ar fi redarea inline SVG și stilul CSS.

4. După salvarea modificărilor, puteți începe în siguranță să încărcați fișiere SVG în biblioteca media.

Adăugați manual suport pentru WordPress SVG

Această metodă implică editarea fișierului functions.php a site-ului dvs. WordPress. Prin urmare, vă recomandăm insistent să urmați acești pași dacă sunteți familiarizat cu PHP și înțelegeți pe deplin problema de securitate SVG.

Asigură-te că backup site-ul dvs. WordPress înainte de a face modificări pentru a evita pierderea datelor în caz de configurare greșită.

Următorii pași vor explica cum să activați manual SVG în WordPress cu ajutorul unui client FTP, cum ar fi FileZilla.

1. Accesați directorul de fișiere al site-ului dvs. de la gazdă
2. Accesul la public_html -> wp-include. Derulați în jos până când dvs găsi funcții.php.

3. Faceți clic dreapta pe acest fișier și selectați Vizualizare/Editare pentru a-l deschide și inserați următorul fragment de cod în el:

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. Salvați modificările și încercați să încărcați un nou fișier SVG. Dacă procesul are succes, biblioteca dvs. media ar trebui să accepte încărcarea fișierului.

Multe avantaje ale fișierelor SVG contribuie la popularitatea tot mai mare a acestui tip de fișier. Din păcate, fișierele text XML sunt predispuse la injectarea de cod, care este principalul motiv pentru care WordPress nu include suport SVG în mod implicit.

Acestea fiind spuse, există două moduri de a face site-ul dvs. WordPress să accepte fișiere SVG: folosind un WordPress plug-in sau editați fișierul functions.php. Pe lângă limitarea privilegiilor de încărcare, veți putea încărca în siguranță fișiere SVG în biblioteca media a site-ului web.

Alte resurse recomandate

De asemenea, vă invităm să consultați Resurse de mai jos pentru a prelua mai multă proprietate și control asupra site-ului și blogului dvs.

• Cum să creezi un plugin WordPress simplu
• Cum să creezi un plugin WordPress simplu Gutenberg Block
• Cum să vă setați pagina de pornire în WordPress
• Cum să înțelegeți tabloul de bord WordPress
• Cum să creezi un plugin WordPress simplu

Concluzie

Asta este pentru acest ghid care vă arată cum să încărcați SVG-uri în WordPress. Sperăm că acest articol v-a oferit câteva informații despre beneficiile și riscurile încărcării fișierelor SVG pe un site web WordPress. Dacă aveți nelămuriri sau sugestii, vă rugăm să ne anunțați comentarii.

Cu toate acestea, veți putea, de asemenea, să ne consultați Resurse, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.

În același timp, împărtășește acest articol pe diferitele rețele de socializare.   

...