Comment ajouter des fichiers d'image SVG dans WordPress

Prêt à moderniser l'apparence graphique de votre site WordPress ? Imaginez un logo et des icônes infiniment redimensionnables, nets sur tous les appareils, sans pixellisation ni distorsion. Ce guide vous explique précisément comment importer et gérer des fichiers SVG dans WordPress avec WP Media Folder. Il est accessible à tous, même aux non-développeurs.

Dans ce didacticiel étape par étape, nous déballerons les avantages des fichiers SVG, pourquoi les concepteurs les aiment et pourquoi ils sont fantastiques pour le référencement et les performances de page. Vous apprendrez plusieurs méthodes faciles à suivre pour activer les téléchargements SVG: de l'utilisation des plugins de confiance en ajustements de code simples, ainsi que des stratégies intelligentes pour garder votre site en sécurité.

Nous utiliserons WP Media Folder, le puissant plugin de gestion des médias de JoomUnited. 

Pourquoi les SVG sont géniaux pour les graphiques évolutifs

Évolutivité - Les SVG sont des fichiers vectoriels. Cela signifie que vous pouvez zoomer, agrandir ou les rétrécir sans perdre de qualité pour les logos, les icônes ou les conceptions réactives.

légers et SVG sont souvent plus petits que les images raster et sont des XML en texte, afin que les moteurs de recherche puissent lire directement les éléments clés (texte alt, titres, etc.).

Styling et animation - Vous pouvez manipuler les SVG via CSS ou JavaScript. Vous voulez un effet ou une animation en survol? Facile.

Accessibilité - Configuration correctement, les SVG contiennent des balises de texte accessibles et des rôles que les lecteurs d'écran peuvent interpréter, juste une autre raison solide de les utiliser.

Solutions pour ajouter des SVG dans WordPress

WordPress bloque SVG par défaut en raison des risques de sécurité (SVG est XML, qui peut inclure du code malveillant), cependant, il existe trois façons fiables de permettre le support SVG:

1. Utilisez un plugin

a) Snippet WPCode + SVG

• Installez le plugin WPCode gratuit.
• Ajoutez l'extrait «Autoriser les fichiers SVG» de sa bibliothèque et l'activer.
• Par défaut, seuls les administrateurs peuvent télécharger des SVG.

b) Plugin d'assistance SVG

• Installez "Prise en charge SVG" via les plugins> Ajouter un nouveau, activez-le.
• Dans ses paramètres, vérifiez "Se limiter à l'administrateur" et / ou "Activer le mode avancé" (rendu en ligne, style CSS).
• Téléchargez votre SVG via Media> Ajouter un nouveau ou glisser-glisser.

c) Autres options :

• SVG Safe par Darrell Doyle, plus âgé mais toujours utilisé.
• SVG Prise en charge des téléchargements pour empêcher les risques XSS / XXE.
• HappyFiles / Catfolders ajoute des téléchargements SVG avec désinfection et aperçus.

2. Ajouter un extrait de code aux fonctions.php

Vous pouvez utiliser le code suivant: 

fonction enable_svg_upload ($ mimes) {$ mimes ['svg'] = 'image / svg + xml'; retour $ mimes; } add_filter ('upload_mimes', 'enable_svg_upload'); 

Où: Fonctions du thème.PHP (toujours coucher un thème enfant!).

Inconvénients: pas de désinfection par défaut - Risky à moins d'être associé à un désinfectant. Et télécharger Limited à Admin (vous pouvez le personnaliser).

3. Considérations de sécurité

 Svg = xml, qui peut contenir:

• Attaques XSS (JavaScript).
• Attaques XXE (appels entités externes).

Meilleures pratiques:

• Utilisez des plugins comme le support SVG, SVG Safe, HappyFiles avec désinfection intégrée.
• Désinfecter via des outils en ligne (par exemple, le test de désinfection SVG de Darryll Doyle) avant le téléchargement.
• Restreindre uniquement les téléchargements SVG vers l'administrateur ou les utilisateurs de confiance.

WP Media Folder et pourquoi il est important pour SVGS sur WordPress

WP Media Folder est un puissant gestionnaire de bibliothèque de médias

- Structure du dossier / sous-dossier

-Les filtres avancés, tri, glisser-déposer

 - renommer, filigrane, remplacement en vrac, prévisualisation, télécharger

- Compatible avec de nombreux outils tels que les constructeurs de pages, WooCommerce et WPML.

Bien que WP Media Folder ne permette pas d'utiliser les fichiers SVG, il nous permettra d'organiser, de maintenir et également de gérer tout type de fichier, y compris les fichiers SVG.

Enveloppement: Élevez votre site avec SVGS et WP Media Folder

Arrêtez de lutter avec des dossiers multimédias désordonnés et des fichiers d'image non optimisés. Au lieu de cela, déverrouillez le plein potentiel des SVG, légers, consultables et adaptables, avec les outils d'organisation intuitifs du WP Media Folder. 

Que vous soyez un créateur de contenu, un concepteur ou un propriétaire de petite entreprise, il met une technologie puissante entre vos mains sans aucun code. Votre site se chargera plus rapidement, se classera plus haut et sera magnifique! Qu'attendez-vous? Allez ici et obtenez votre propre copie.