Cómo agregar SVG a WordPress: Guía de imágenes vectoriales de WordPress

Soportes de WordPressMúltiples formatos de imagen.jpgListo para usar desde el primer momento , incluidos ,, y . Sin embargo, no se puede utilizar con este.jpeg.png.gifGráficos vectoriales escalables (SVG), Este es uno de los tipos de imagen más flexibles. Afortunadamente, aprender a agregar SVG a WordPress es muy fácil.

Para habilitar este formato de imagen, solo configure algunos archivos. Después de eso, podrá usar SVG con contenido como imágenes y logotipos normales. Además, tan pronto como habilite el tipo de archivo, WordPress funciona bien con SVG.

Este artículo explica qué es SVG y por qué SVG es tan útil. A continuación, le mostraré cómo agregar SVG a WordPress usando dos métodos diferentes y cómo animar SVG usando CSS. ¡Empecemos!

Qué son los gráficos vectoriales escalables (SVG) (y cómo ayudan)

Ejemplo SVG.

SVG (por ejemploselección libre) Genial para imágenes simples que no tienen demasiados elementos complejos como iconos.

SVG en sí mismo no es un formato de imagen. en realidad es reallenguaje de marcadoSe utiliza para crear una imagen 2D que consta de vectores. En teoría esto puede parecer complicado, pero en la práctica usas SVG en la misma situación que cualquier otra imagen.

Esto es importante porque SVG tiene varias ventajas sobre los tipos de imágenes más comunes, como PNG y JPG. por ejemplo:

  • Ocupan menos espacio.En lugar de píxeles, SVG se compone de vectores. Así que el tuyo, debería ayudar.
  • Puedes escalarlos fácilmente.Como sabrá, existen límites en la forma en que puede escalar una imagen normal antes de que comience a verse terrible. Este no es el caso de SVG. Esto se debe a que puede escalar hacia arriba o hacia abajo el vector sin comprometer la calidad (o cambiar el tamaño del archivo).
  • Puedes usar CSS para animar SVG.Los vectores se pueden animar con CSS, por lo que puede crear sus propios efectos (más sobre esto más adelante).

Crear su propio SVG puede ser difícil si no tiene experiencia en diseño. Sin embargo, siempre puedes buscar imágenes SVG de archivo o preguntarle al diseñador si puedes usar este formato para reproducir algunos elementos de tu sitio.

Tenga en cuenta que cuanto más compleja es la imagen, más difícil es reproducirla en un vector. En otras palabras, SVG es bueno para gráficos simples, pero no para fotografía.

Cómo agregar SVG a WordPress (dos formas fáciles)

Como se mencionó anteriormente, WordPress no es compatible con SVG desde el primer momento. Sin embargo, puede habilitar esta función manualmente o mediante un complemento. Comencemos con el método más fácil y último.

Método 1: use el complemento de soporte SVG

Si está buscando la forma más rápida de agregar SVG a WordPress, aquí está. Use el complemento de compatibilidad con SVG para habilitar este formato de imagen en particular y agregue compatibilidad a su biblioteca de medios.

Soporte SVGSoporte SVG

escritores):benbody

Versión actual: 2.4.2

Última actualización: 4 de febrero de 2022

svg-support.2.4.2.zip

98% de calificaciónMás de 800.000 instalacionesSe requiere WP 4.8+

El proceso es simple. Como siempre, podrá agregar SVG a su sitio de WordPress según sea necesario.

WordPress xmlrequiere etiquetas en los archivos SVG antes de cargarlos. Abra el archivo SVG en cualquier editor de código (como texto sublime), agregue lo siguiente a la primera línea del archivo SVG y guárdelo para evitar errores de seguridad.

?xml version="1.0" encoding="utf-8"?

Sin embargo, hay dos configuraciones más que puede cambiar según sea necesario. Primero, vayamos a la pestaña Configuración → Compatibilidad con SVG.

Cómo agregar SVG a WordPress usando el complemento de soporte SVG

Hay dos opciones dentro. El primero incluye un modo de complemento avanzado que le permite apuntar a SVG usando CSS. Puede omitir esta opción si no desea animar el SVG.

Luego puede limitar la capacidad de cargar archivos SVG a los administradores solo habilitando la función "Restringir administradores". ¡Tu decides!

Método 2: edite el archivo functions.php para su sitio.

Cada sitio de WordPress tiene el suyo. Este importante componente contiene importantes funciones, clases y filtros. Este también es un boleto para agregar soporte SVG a WordPress con unas pocas líneas de código.

Para acceder a este archivo, debe acceder al sitio web a través de FTP. Si no tienes un cliente, te recomendamos usarArchivoZilla.. Una vez que haya encontrado sus credenciales de FTP y haya visitado el sitio, debe ir a la carpeta. rootLas carpetas suelen tener public_htmlel nombre del sitio.

Carpeta raíz de WordPress.

Luego vaya a la carpeta wp-includesy busque los archivos en ella. Es importante tener en cuenta que functions.phpeste es un archivo principal y es un archivo separado para cada tema.functions.php

wp-contiene carpetas.

En este ejemplo, agregaremos el código al archivo principal. Sin embargo, la actualización de WordPress puede dar lugar a la pérdida de cambios, así que haga la functions.phpmejor manera de agregar sus cambios a su archivo de tema.

(Nota del editor: recomendamos hacer esto con el archivo de funciones del tema).

functions.phpAcceda al archivo ahora haciendo clic con el botón derecho en el archivo y seleccionando la opción Ver/Editar. Esto lo abrirá en su editor de texto predeterminado. Luego, desplácese hacia abajo y pegue este fragmento de código.

function add_file_types_to_uploads($file_types){$new_filetypes = array();$new_filetypes['svg'] = 'image/svg+xml';$file_types = array_merge($file_types, $new_filetypes );return $file_types;}add_filter('upload_mimes', 'add_file_types_to_uploads');

Guarde y cierre sus cambios en el archivo. A continuación, puede volver a la barra de herramientas y cargar el archivo SVG en su biblioteca multimedia para probar las nuevas funciones. Esto debería funcionar bien.

Animar imágenes SVG usando CSS

Animar SVG es un proceso bastante complicado, especialmente si eres nuevo en esto.Usa CSS.. Sin embargo, esta función es útil para crear animaciones muy ligeras y simples, especialmente a diferencia de los GIF. También puede escalar el SVG animado según sea necesario, pero esto tampoco (nuevamente) puede ser manejado por el GIF.

Si desea obtener más información sobre cómo animar SVG usando CSS, visite:Tutoría en líneaEsto explicará los conceptos básicos del proceso. también verifiqueAlgunos ejemplos¿Qué puedes hacer si te esfuerzas?

Conclusión

SVG es uno de los tipos de imágenes más interesantes disponibles en su sitio web. La escalabilidad no solo lo convierte en una buena opción para sitios receptivos, sino que también puede animarse para permitirle reemplazar los GIF en situaciones específicas. Además, es muy fácil habilitarlos en WordPress.

Para agregar SVG a WordPress, simplemente elija uno de los siguientes dos métodos y disfrute de los tipos de archivos al contenido de su corazón.

  1. utilizarSoporte SVGComplementos si no quieres meterte con el código.
  2. functions.phpSi no desea instalar complementos adicionales, modifique el archivo para agregar compatibilidad con SVG.

¿Tiene alguna pregunta sobre cómo agregar SVG a WordPress? ¡Haga preguntas en la sección de comentarios a continuación!

Guía gratuita

5 consejos importantes para acelerar su sitio de WordPress

Simplemente siga algunos consejos simples y podrá reducir el tiempo de descarga en un 50-80%.

Descarga la guía gratuita

Entradas relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Subir

Utilizamos cookies para asegurarnos de brindarle la mejor experiencia en nuestro sitio web. Si continúa utilizando este sitio, asumiremos que está satisfecho con él. Más información