Aunque WordPress no admite SVG de forma nativa en todos los casos, podemos superar esta limitación mediante la adición de código personalizado en el archivo functions.php. En este artículo, exploraremos cómo hacerlo de manera sencilla y segura.

El formato SVG (Scalable Vector Graphics) es popular debido a su capacidad para escalar sin pérdida de calidad, lo que lo convierte en una opción ideal para gráficos y logotipos. Integrar SVG en WordPress puede mejorar significativamente la estética y la interactividad de un sitio, pero por defecto, WordPress no permite la carga de archivos SVG en todas las áreas.

Pasos para habilitar SVG en WordPress:

  1. Copia de Seguridad: Antes de realizar cambios en el archivo functions.php, realiza una copia de seguridad para evitar posibles problemas.
  2. Acceso al archivo functions.php: Abre tu panel de administración de WordPress y navega hasta «Apariencia > Editor de archivos de temas». Selecciona el archivo functions.php de tu tema activo para editarlo.
  3. Añadir el Código de Soporte SVG: Inserta el siguiente código al final del archivo functions.php y guarda los cambios.php
/*
 * Permitir la carga de archivos SVG
 */
function allow_svg_upload( $mimes ) {
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
}
add_filter( 'upload_mimes', 'allow_svg_upload' );

Esta función filtra los tipos de archivos permitidos durante la carga de medios, agregando el tipo de archivo SVG a la lista permitida.

/*
 * Corregir la visualización de miniaturas SVG en el área de administración
 */
function fix_svg_thumb_display() {
    echo '<style>
        td.media-icon img[src$=".svg"], img[src$=".svg"].attachment-post-thumbnail {
            width: 100% !important;
            height: auto !important;
        }
    </style>';
}
add_action( 'admin_head', 'fix_svg_thumb_display' );

Esta función añade un estilo en línea al encabezado de la administración de WordPress que ajusta la presentación de miniaturas SVG. Esto asegura que las miniaturas se muestren correctamente, ocupando el 100% del ancho disponible y ajustando automáticamente la altura.

Ya puedes probar a subir y utilizar archivos SVG en tu WordPress. Ahora, deberías poder utilizar archivos SVG como lo harías con cualquier otro tipo de imagen.

Compartir en

Relacionados


Cómo configurar el slug /blog/ solo para entradas en WordPress y redirigir correctamente

En ocasiones, necesitamos modificar la estructura de enlaces permanentes en WordPress para que solo las entradas del blog tengan el slug /blog/, mientras que el […]

23/02/2024
Añadir campo personalizado a email de WooCommerce

Si utilizas Advanced Custom Fields en WordPress con WooCommerce, es muy posible que utilices algún campo personalizado en cada producto. Si quieres que ese campo […]

Mejorar SEO canonicals Prestashop

Os compartirmos un fragmento de código que mejora el comportamiento de las etiquetas canonical en Prestashop. La etiqueta canonical se utiliza para indicar a los […]