Comment activer la prévisualisation des svg dans la bibliothèque média de WordPress

Comment activer la prévisualisation des svg dans la bibliothèque média de WordPress
Temps de lecture estimé : 4 minutes

Qu’est ce que le svg ?

SVG est une image vectorielle basée sur XML qui est couramment utilisée par les sites Web et les marques pour afficher des logos et des icônes sur leurs sites Web. En effet, il est très léger et il ne pixelise pas lors du redimensionnement. De plus, ce format est supporté par les navigateurs récents, y compris les navigateurs mobiles.

Comment pouvoir uploader des svg dans WordPress ?

Ce format de ficher se basant sur du code XML, il hérite donc des failles possibles avec ce type de fichier, à savoir notamment l’insertion de code dangereux à l’intérieur du fichier.

Pour plus d’informations je vous invite à lire cet article très bien fait :

Que faire quand la preview des svg ne fonctionne pas dans l’admin :

Le code proposé ici a été le fruit d’une discussion ici : https://gist.github.com/benfrain/9422862

Merci à fadupla son auteur pour sa contribution

Voici ce qui se passe quand la prévisualisation ne fonctionne pas dans l’admin. Vous vous retrouvez avec plusieurs fichiers svg avec l’icône par défaut, mais si les noms des fichiers n’est pas assez explicite, impossible de déterminer de quel fichier il s’agit.

Pour pouvoir résoudre ce souci, vous aurez besoin de 3 fichiers à placer dans votre thème :

  • le fichier functions.php (soit il existe déjà et il faudra y rajouter du code, sinon il faudra le créer à la racine de votre thème enfant)
  • un fichier nommé svg.css pour gérer l’affichage
  • un fichier nommé svg.js qui va gérer l’affichage dans l’admin

La structure utilisée sera la suivante, le fichier css sera stocké dans un répertoire/css à la racine du thème, et le fichier js sera stocké dans un répertoire /js situé à la racine du thème.

Structure mise en place

Le code php à mettre dans functions.php

Le fichier svg.css

Le fichier svg.js

Pour les plus fainéants, voici les fichiers css et js dans un zip

Si tout s’est bien passé, vous devriez désormais voir vos svg directement dans votre bibliothèque média :

Et voilà ! vos svg apparaissent bien dans l’admin

Si vous n’y arrivez pas, dites)le moi dans les commentaires et on y arrivera ensemble !

Send a Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.