Uso de SVG en WordPress (se recomiendan 2 complementos útiles)  trucos CSS

Uso de SVG en WordPress (se recomiendan 2 complementos útiles) trucos CSS

Si planea usar SVG en WordPress, debe trabajar un poco. Por una buena razón, WordPress no permite sacar SVG de la caja. SVG es una sintaxis para el etiquetado con potentes funciones, incluida la capacidad de cargar otros recursos y ejecutar JavaScript. Por lo tanto, si WordPress permite SVG de forma predeterminada, incluso los usuarios con roles muy limitados podrían cargar SVG y causar problemas como vulnerabilidades XSS.

Pero digamos que esto no es un problema para su sitio, solo use SVG, maldita sea. Primero, entendamos qué significa usar SVG en WordPress: Cargue SVG a través del cargador de medios y use la imagen SVG como una imagen destacada en el contenido de la publicación.

Por ejemplo, nada le impide usar SVG en sus plantillas. <svg> O archivos SVG que vinculas como imágenes de plantillas como CSS o similares. no tienes que hacer nada especial Haz que funcione en WordPress.

Ejemplo de uso de SVG en WordPress.  La biblioteca de medios está abierta y muestra vistas previas de mosaicos para varios archivos SVG.

toma el asunto en tus propias manos

Lo que le impide usar SVG en WordPress es el tipo de MIME por el cual el cargador de la biblioteca de medios rechaza el archivo. Para habilitar SVG en WordPress solo necesitas este filtro, estará en el tuyo functions.php o complemento funcional:

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

Pero el problema es que los archivos SVG a menudo no se muestran correctamente en los diferentes lugares en los que deben estar, como vistas previas de imágenes para bibliotecas de medios, dispositivos de imágenes destacados y tal vez incluso un editor clásico o de bloques. Tengo algo de CSS que puedo inyectar para resolver este problema. Pero, y por eso estoy escribiendo este nuevo artículo, parece que ya no funciona y me hace pensar.

Complementos que usan SVG en WordPress

Estaba pensando, uh, por qué preocuparse, este es un código tan pequeño, también podría hacerlo yo mismo con esta característica. Pero WordPress, por supuesto, cambia con el tiempo, y dado que la compatibilidad con SVG no es algo que WordPress hace de manera inmediata, en realidad es una buena idea de complemento. De esta manera, el complemento SVG se puede desarrollar con WordPress para lidiar con las rarezas y, en teoría, si suficientes personas usan el complemento SVG, será compatible.

Entonces, aquí hay algunas sugerencias de complementos para usar SVG en WordPress.

Soporte SVG

Está Lo he estado usando recientemente y parece funcionar para mí.

Captura de pantalla del complemento SVG de WordPress en el directorio de complementos de WordPress.

Solo lo instalo, lo activo y no hago nada. Hay una pantalla de configuración, pero no necesito ninguna de estas cosas. Me gusta mucho que te pregunte si puedes cargar CSS adicional en la interfaz (esto no funciona para mí, así que lo desactivé), aunque es mejor que el complemento te muestre lo que cargará para que puedas agregarlo. a su propio CSS si lo desea.

La configuración para restringir las cargas de SVG a los administradores de WordPress es inteligente, pero si quiere tomarse la seguridad de SVG más en serio, puede usar el siguiente complemento en su lugar…

SVG seguro

Esta Uno no se ha actualizado en años, pero está haciendo esfuerzos adicionales para la seguridad de SVG, ya que desinfecta los archivos SVG cuando los carga e incluso optimiza SVG cuando se agrega a WordPress.

Captura de pantalla del complemento Safe SVG en el directorio de complementos de WordPress.

Tenemos un control editorial bastante estricto sobre los autores, etc. en este sitio, por lo que el aspecto de seguridad de este complemento SVG no es un gran problema para mí. Además, me gusta asumir la responsabilidad de mi propia optimización de SVG, por lo que no es perfecto para mí, aunque puedo recomendarlo en sitios con menos experiencia técnica a nivel de propietario del sitio.


Parece ser Soporte SVG simple Lo mismo, pero no parece tan bueno como el complemento Support SVG y no se ha actualizado recientemente, por lo que no lo recomiendo.

¿Qué complementos ha probado para usar con éxito SVG en WordPress? ¿Quieres añadir alguna sugerencia?

Comentarios

Aún no hay comentarios. ¿Por qué no comienzas el debate?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *