Cómo agregar archivos de imagen SVG en WordPress

¿Listo para mejorar drásticamente los gráficos de tu sitio de WordPress? Imagina un logotipo e iconos infinitamente escalables que se ven nítidos en cualquier dispositivo, sin pixelación ni distorsión. Esta guía te muestra exactamente cómo subir y administrar archivos SVG en WordPress usando WP Media Folder, y está diseñada para todos, incluso si no eres desarrollador.

En este tutorial paso a paso, desempaveremos los beneficios de los archivos SVG, por qué los diseñadores los aman y por qué son fantásticos para el rendimiento de SEO y PAGE. Aprenderá múltiples métodos fáciles de seguir para habilitar las cargas de SVG: desde el uso de complementos de confianza hasta ajustes de código simples, además de estrategias inteligentes para mantener su sitio seguro.

Utilizaremos WP Media Folder, el poderoso complemento de administración de medios de Joomunited. 

Por qué los SVG son increíbles para gráficos escalables

Escalabilidad : los SVG son archivos vectoriales. Eso significa que puede acercarlos, ampliarlos o encogerlos sin perder calidad por logotipos, iconos o diseños receptivos.

Ligeros y SEO : los archivos SVG a menudo son más pequeños que las imágenes de trama y son XML basados en texto, para que los motores de búsqueda puedan leer elementos clave directamente (texto alternativo, títulos, etc.).

Estilo y animación : puede manipular SVGS a través de CSS o JavaScript. ¿Quieres un efecto o animación flotante? Fácil.

Accesibilidad : configurado correctamente, los SVG contienen etiquetas de texto y roles de texto que los lectores de pantalla pueden interpretar, solo otra razón sólida para usarlas.

Soluciones para agregar SVG en WordPress

WordPress Blocks SVG de forma predeterminada debido a riesgos de seguridad (SVG es XML, que puede incluir código malicioso), sin embargo, hay tres formas confiables de habilitar el soporte de SVG:

1. Use un complemento

a) WPCODE + SVG Spippet

• Instale el complemento WPCode gratuito.
• Agregue el fragmento 'Permitir los archivos SVG' de su biblioteca y activelo.
• Por defecto, solo los administradores pueden cargar SVGS.

b) complemento de soporte de SVG

• Instale el "soporte SVG" a través de los complementos> Agregar nuevo, activarlo.
• En su configuración, verifique "restringir al administrador" y/o "habilitar el modo avanzado" (representación en línea, estilo CSS).
• Cargue su SVG a través de medios> Agregar nuevo o arrastrar y soltar.

c) Otras opciones :

• SVG Safe de Darrell Doyle, más antiguo pero todavía usado.
• El soporte de SVG desinfecta las cargas para evitar riesgos XSS/XXE.
• HappyFiles/CatFolders agregue cargas SVG con desinfectación y vistas previas.

2. Agregue el fragmento de código a las funciones.php

Puede usar el siguiente código: 

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

Dónde: las funciones del tema.php (¡siempre coruse un tema infantil!).

Desenvuelos: Sin desinfección por defecto, restringido a menos que se combine con un desinfectante. Y cargar limitado al administrador (puede personalizarlo).

3. Consideraciones de seguridad

 Svg = xml, que puede contener:

• Ataques XSS (JavaScript).
• XXE ataques (llamadas de entidad externa).

Las mejores prácticas:

• Use complementos como SVG Support, SVG Safe, HappyFiles con desinfección de desinfección.
• Desinfectación a través de herramientas en línea (por ejemplo, prueba de desinfectante SVG de Darryll Doyle) antes de cargar.
• Restringir las cargas de SVG solo a usuarios administrativos o de confianza.

WP Media Folder y por qué es importante para SVG en WordPress

WP Media Folder es un poderoso administrador de la biblioteca de medios

- Estructura de carpeta/subfolder

-Los filtros avanzados, clasificación, arrastre y caída

 - Cambiar nombre, marca de agua, reemplazo a granel, vista previa, descargar

- Compatible con muchas herramientas como Page Builders, WooCommerce y WPML.

Si bien WP Media Folder en sí no permite usar archivos SVG, nos permitirá organizar, mantener y administrar cualquier tipo de archivo, incluidos los archivos SVG.

Envolviendo: eleva su sitio con WP Media Folder

Deja de luchar con carpetas de medios desordenadas y archivos de imagen no optimizados. En su lugar, desbloquee todo el potencial de SVG, liviano, de búsqueda y adaptable, con las herramientas de organización intuitivas de WP Media Folder. 

Ya sea que sea un creador de contenido, diseñador o propietario de una pequeña empresa, pone una tecnología poderosa en sus manos sin ningún código. ¡Su sitio se cargará más rápido, se clasificará más alto y se verá impresionante! ¿Qué estás esperando? Ve aquí y consigue tu propia copia.