HÁZTE PREMIUM PARA SIEMPRE POR SÓLO 30€ (Precio Temporal). HACES UN SÓLO PAGO Y PODRÁS ACCEDER INDEFINIDAMENTE A LA ZONA DE DESCARGAS, CURSOS Y VIDEOS PREMIUM. ¡QUIERO SER PREMIUM!

APLICAR FILTRO A LAS IMÁGENES DE WORDPRESS CON CSS

 

Hola buenas bienvenidos a un nuevo tutorial de PluginsWeb.es

Hoy vamos a ver cómo filtrar todas las imágenes de WordPress sin la necesidad de añadir ningún plugin, simplemente copiando una línea de código CSS y pegándola en nuestro editor personalizado de CSS de WordPress.

Para ello vamos a ir a la página Filtros de imágenes de W3schools.com y allí encontraremos todos los filtros que podemos agregar a nuestras imágenes.

 

 

filter:blur(5px);
filter:brightness(200%);
filter:contrast(200%);
filter:drop-shadow(8px 8px 10px gray);
filter:grayscale(100%);
filter:hue-rotate(90deg);
filter:invert(100%);
filter:opacity(30%);
filter:saturate(8);
filter:sepia(100%);
filter:contrast(200%) brightness(150%);

 

aplicar filto a las imagenes de wordpress con css

 

¿CÓMO APLICAR FILTROS A LAS IMÁGENES DE WORDPRESS CON CSS FÁCILMENTE?

 

 

 

 

Bien, lo primero que tenemos que hacer es ir a apariencia –> personalizar y entramos en la pestaña de CSS adicional.

Dentro del editor de código de CSS de nuestro WordPress pegamos la siguiente función.

 

img {

 

}

 

aplicar filtro global imagenes wordpress

 

 

Ahora simplemente copiamos el código del filtro que queramos y lo pegamos entre los corchetes de la función  que acabamos de poner en el editor CSS adicional de WordPress.

Observarás que todas y cada una de tus imágenes que tienes publicadas en tu WordPress han sido modificadas por el filtro que acabas de añadir.

Ve jugando con los parámetros de px y %  para ajustar las imágenes a tus necesidades.

 

 

como aplicar filtros a las imagenes de wordpress sin plugin

 

VALE, PERO ¿QUE PASA SI SÓLO QUIERO AÑADIR EL FILTRO A UNA SOLA IMAGEN?

 

También si lo deseas, puedes añadir el filtro a una sola imagen o a un grupo determinado de imágenes que tienen algo en común como el tamaño etcétera.

Lo único que tienes que hacer es hacer clic en la imagen que quieres modificar con el botón derecho del ratón y seleccionar inspeccionar.

Verás que esa imagen en concreto tiene una  class, con información sobre esa imagen determinada dónde podremos ver la ID de la imagen entre otras cosas.

 

 

filtrar imagenes de wordpress

 

Copiamos el código identificador de la imagen y ahora vamos otra vez a nuestro personalizador de CSS adicional y sustituimos img (que se refiere a todas las imágenes) por el identificador de la imagen que queremos modificar con el filtro.

 

 

añadir filtro a una imagen de wordpress con css

 

 

Hacemos clic en Publicar.

Listo, ahora el filtro solamente afecta a esa imagen que nosotros queremos y las demás imágenes quedarán sin ningún tipo de filtro.

Como ves, es muy sencillo aplicar filtros a las imágenes de WordPress con pocos conocimientos de CSS podrás realizar cambios a tu web prácticamente sin limitaciones.
Si tienes cualquier duda o necesitas hacer algo por CSS y no sabes cómo deja un comentario o envíame un email a través del formulario de contacto y te contestaré lo antes posible.

Un saludo 🙂

 

APLICAR FILTRO A LAS IMÁGENES DE WORDPRESS CON CSS
5 (100%) 4 vote[s]