Come aggiungere i file di immagini SVG in WordPress

Pronti a dare al vostro sito WordPress un serio aggiornamento grafico? Immaginate un logo e delle icone infinitamente scalabili, nitidi su qualsiasi dispositivo, senza pixel né distorsioni. Questa guida vi mostra esattamente come caricare e gestire i file SVG in WordPress utilizzando WP Media Folder, ed è pensata per chiunque, anche per chi non è uno sviluppatore.

In questo tutorial passo-passo, disimbalteremo i vantaggi dei file SVG, perché i designer li adorano e perché sono fantastici per le prestazioni SEO e Page. Imparerai più metodi facili da seguire per abilitare i caricamenti SVG: dall'utilizzo di plug-in affidabili a semplici modifiche al codice, oltre a strategie intelligenti per proteggere il tuo sito.

Utilizzeremo WP Media Folder, il potente plug -in di gestione dei media di Joomunited. 

Perché gli SVG sono fantastici per la grafica scalabile

Scalabilità : gli SVG sono file vettoriali. Ciò significa che puoi ingrandire, ingrandire o ridurli senza perdere qualità per loghi, icone o progetti reattivi.

leggeri e SEO - sono spesso più piccoli delle immagini raster e sono XML a base di testo, in modo che i motori di ricerca possano leggere direttamente gli elementi chiave (testo ALT, titoli, ecc.).

Styling & Animation : puoi manipolare SVGS tramite CSS o JavaScript. Vuoi un effetto o un'animazione hover? Facile.

Accessibilità : impostato correttamente, gli SVG contengono tag di testo accessibili e ruoli che i lettori degli schermo possono interpretare, solo un'altra solida ragione per usarli.

Soluzioni per aggiungere SVG in WordPress

WordPress blocca SVG per impostazione predefinita a causa di rischi per la sicurezza (SVG è XML, che può includere codice dannoso), tuttavia, ci sono tre modi affidabili per abilitare il supporto SVG:

1. Usa un plugin

A) WPCODE + SNIPET

• Installare il plug -in WPCODE gratuito.
• Aggiungi lo snippet "Consenti file svg caricamento" dalla sua libreria e attivalo.
• Per impostazione predefinita, solo gli amministratori possono caricare SVGS.

b) plug -in di supporto SVG

• Installa "SVG Support" tramite plugin> Aggiungi nuovo, attivalo.
• Nelle sue impostazioni, controlla "limita all'amministratore" e/o "abilita la modalità avanzata" (rendering in linea, stile CSS).
• Carica il tuo SVG tramite Media> Aggiungi nuovo o trascina.

c) altre opzioni :

• SVG Safe di Darrell Doyle, più vecchio ma ancora usato.
• SVG Support Sanitizza i caricamenti per prevenire i rischi XSS/XXE.
• Happyfiles/gatfolters aggiungono caricamenti SVG con sanificazione e anteprime.

2. Aggiungi snippet di codice a funzioni.php

È possibile utilizzare il seguente codice: 

funzione abilita_svg_upload ($ mimes) {$ mimes ['svg'] = 'immagine/svg+xml'; restituire $ mimes; } add_filter ('upload_mimes', 'anable_svg_upload'); 

Dove: Funzioni del tema.php (sempre Cuse un tema bambino!).

Straviati: nessuna igiene per impostazione predefinita: RISKY se non accoppiato a un disinfettante. E upload limitato ad amministratore (puoi personalizzarlo).

3. Considerazioni sulla sicurezza

 Svg = xml, che può contenere:

• Attacchi XSS (JavaScript).
• Attacchi XXE (chiamate di entità esterna).

Best practice:

• Usa plug -in come il supporto SVG, SVG Safe, HappyFiles con sanificazione Built -IN.
• Sanitizzare tramite strumenti online (ad es. Test di disinfettante SVG di Darryll Doyle) prima di caricare.
• Limitare i caricamenti SVG solo ad amministratore o utenti di fiducia.

WP Media Folder e perché è importante per SVGS su WordPress

WP Media Folder è un potente manager della libreria multimediale

- Struttura della cartella/Subfolder

-I filtri avanzati, ordinamento, trascina

 - Rinomina, filigrana, sostituzione in blocco, anteprima, scarica

- Compatibile con molti strumenti come i costruttori di pagine, WooCommerce e WPML.

Mentre WP Media Folder stessa non consente di utilizzare i file SVG, ci consentirà di organizzare, mantenere e gestire anche qualsiasi tipo di file, inclusi i file SVG.

Avvolgimento: eleva il tuo sito con SVGS e WP Media Folder

Smetti di wrestling con cartelle multimediali disordinate e file di immagini non ottimizzati. Invece, sblocca il pieno potenziale di SVG, leggero, ricercabile e adattabile, con gli strumenti di organizzazione intuitivi della WP Media Folder. 

Che tu sia un creatore di contenuti, un designer o un piccolo imprenditore, mette in mano una tecnologia potente senza alcun codice. Il tuo sito si caricherà più velocemente, si posizionerà più in alto e sembri sorprendente! Cosa stai aspettando? Vai qui e prendi la tua copia.