Cómo permitir la compatibilidad con SVG en WordPress

¿Está buscando subir imágenes SVG a su sitio web de WordPress? WordPress de forma predeterminada no permite cargar archivos SVG a través del cargador de medios. En este artículo, mostramos cómo permitir que la imagen SVG se cargue en WordPress.

SVG (Scalable Vector Graphics) define gráficos basados ​​en vectores en formato XML. En otras palabras, SVG define gráficos en formato XML. Los gráficos de los archivos SVG NO pierden calidad si se amplían o cambian de tamaño. Además, el tamaño del archivo SVG es pequeño y, por lo tanto, son populares hoy en día.

Cuando se trata de WordPress, si intenta cargar una imagen SVG desde el cargador de medios, obtendrá un error como ‘Lo sentimos, este tipo de archivo no está permitido por razones de seguridad’.

Esto se debe a que el tipo SVG MIME no se agrega en los tipos MIME predeterminados que se pueden cargar en WordPress. Para obtener la lista de todos los tipos MIME predeterminados, se puede usar el método get_allowed_mime_types(). Esta función devuelve la matriz de tipos MIME.

Dicho esto, veamos cómo agregar soporte de WordPress para archivos SVG.

Permitir que se cargue el archivo SVG

Para agregar soporte para la imagen SVG, usamos el filtro upload_mimesque permite modificar la lista de extensiones de archivo aceptables de WordPress. La extensión de los archivos SVG es ‘image / svg + xml’. Por lo tanto, debe colocar el siguiente código en su archivo functions.php.

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

Al usar el upload_mimesfiltro, también podemos restringir el formato de archivo específico para cargar en WordPress. Digamos que no queremos permitir archivos mp4. En ese caso, deberíamos agregar el siguiente código en el archivo functions.php.

function remove_mime_types($mimes) {
    unset($mimes['video/mp4']);
}
add_filter('upload_mimes', 'remove_mime_types');

Entonces, al agregar el pequeño fragmento de código anterior, permitirá cargar imágenes SVG en una biblioteca de medios. Sin embargo, después de cargar SVG, si va a la página de la lista, no verá la impresión en miniatura de su archivo SVG.

Para mostrar la miniatura de SVG en la página de la lista, necesitamos agregar una regla CSS que se pueda conectar al panel de WordPress.

function admin_custom_css() {
    echo "<style>table.media .column-title .media-icon img[src='.svg']{
        width: 100%;
        height: auto;
    }</style>";
}
 
add_action( 'admin_head', 'admin_custom_css' );

Después de agregar el código anterior en su archivo functions.php, verá la miniatura SVG.

Artículos relacionados

• Cargar archivos mediante programación en WordPress
• Cargar imagen usando la biblioteca a prueba de balas en PHP
• Cómo cambiar el logotipo de WordPress en la página de inicio de sesión