✅Aplicar Filtro a las Imágenes de WordPress con CSS

En este tutorial, aprenderemos a modificar la apariencia de las imágenes en WordPress sin necesidad de instalar plugins. Solo utilizando código CSS, podrás aplicar diferentes efectos visuales, como desenfoque, escala de grises, cambios de color, opacidad y más.

Además, veremos cómo aplicar estos filtros a todas las imágenes del sitio o a una imagen específica, asegurando un diseño más dinámico y atractivo sin afectar el rendimiento de tu web.

Paso 1: Acceder al editor de CSS adicional en WordPress

Para comenzar, sigue estos pasos:

1. Dirígete al personalizador de WordPress
   • En el panel de administración, ve a Apariencia > Personalizar
   • Busca la opción CSS adicional y haz clic en ella.
2. Pega la función de filtro en el editor
   • Dentro del editor de CSS adicional, copia y pega el siguiente código:

img {
    filter: grayscale(100%);
}

Esto aplicará el efecto escala de grises a todas las imágenes del sitio web.

3. Personaliza el efecto
   • Puedes modificar la intensidad del filtro ajustando los valores en pixeles (px) y porcentajes (%).
   • Para cambiar el efecto, simplemente sustituye grayscale(100%) por otro filtro de la lista que veremos a continuación.

Paso 2: Explorar los filtros disponibles

A continuación, te muestro diferentes filtros CSS que puedes usar para modificar las imágenes en WordPress:

/* Desenfoque */
img {
    filter: blur(5px);
}

/* Aumentar el brillo */
img {
    filter: brightness(200%);
}

/* Aumentar el contraste */
img {
    filter: contrast(200%);
}

/* Aplicar sombra */
img {
    filter: drop-shadow(8px 8px 10px gray);
}

/* Convertir a escala de grises */
img {
    filter: grayscale(100%);
}

/* Cambiar los tonos de color */
img {
    filter: hue-rotate(90deg);
}

/* Invertir colores */
img {
    filter: invert(100%);
}

/* Ajustar la opacidad */
img {
    filter: opacity(30%);
}

/* Aumentar la saturación */
img {
    filter: saturate(8);
}

/* Aplicar un efecto sepia */
img {
    filter: sepia(100%);
}

/* Combinación de efectos: contraste y brillo */
img {
    filter: contrast(200%) brightness(150%);
}

Puedes experimentar combinando diferentes filtros para lograr efectos únicos.

Paso 3: Aplicar el filtro a una sola imagen

Si en lugar de modificar todas las imágenes, solo deseas aplicar el filtro a una imagen específica, sigue estos pasos:

1. Inspeccionar la imagen
   • Abre tu página en el navegador.
   • Haz clic derecho sobre la imagen que quieres modificar.
   • Selecciona Inspeccionar (en Google Chrome o Edge) o Inspeccionar elemento (en Firefox).
2. Encontrar el identificador de la imagen
   • En la sección de código que aparece, busca la línea <img> correspondiente a la imagen.
   • Verás que tiene una clase (class) o un identificador (ID) único.
   • Copia el nombre de la clase o ID.
3. Aplicar el filtro solo a esa imagen
   • En el personalizador de CSS adicional de WordPress, en lugar de img, usa el identificador único de la imagen.

Por ejemplo, si la imagen tiene la clase imagen-especial, usa este código:

.imagen-especial {
    filter: sepia(80%);
}

Si la imagen tiene un ID como imagen-123, usa:

#imagen-123 {
    filter: contrast(120%);
}

4. Publicar los cambios
   • Haz clic en Publicar para guardar los cambios.
   • Ahora, el filtro se aplicará solo a la imagen seleccionada, dejando las demás sin modificaciones.

Conclusión

Modificar las imágenes en WordPress con filtros CSS es una forma sencilla y efectiva de mejorar la estética del sitio sin necesidad de plugins.

Con solo unas pocas líneas de código, puedes aplicar efectos visuales personalizados, mejorar la coherencia del diseño y experimentar con distintos estilos para destacar imágenes específicas.

Nos vemos en el siguiente tutorial. Un saludo.