Añadir bordes a las imágenes en WordPress

Posted By Fernando Tellado on 9 May, 2014

Hasta WordPress 3.9 había una opción en los ajustes avanzados de las imágenes que insertábamos en las entradas que permitía definir bordes y espacios a las imágenes solo con indicar un número, pero esa opción desapareció.

Y a muchos usuarios esto les ha hecho la pascua, porque era algo que usaban mucho, aunque como he dicho por activa y por pasiva no es el modo correcto de hacerlo, pues los bordes de las imágenes deben ser una constante en el diseño de un sitio, y no algo que se añade para unas si y para otras no, al menos en la mayoría de los usos habituales.

Pero bueno, como cada sitio es un mundo, y aquí la cosa va de dar más soluciones que opiniones, vamos a ver cómo añadir bordes a las imágenes si ya has actualizado a WordPress 3.9.

Índice de contenidos

1 :: Añadir bordes a las imágenes mediante HTML ::
2 :: Añadir bordes a las imágenes mediante CSS en la hoja de estilos ::
3 :: Añadir bordes a “algunas” imágenes mediante CSS en la hoja de estilos ::
4 :: Añadir bordes a las imágenes con plugin ::

:: Añadir bordes a las imágenes mediante HTML ::

Vale, sé que no es el modo más amigable ni intuitivo y visual pero ahí está, siempre ha estado y siempre estará. Si te encuentras cómodo con el HTML siempre puedes añadir bordes y espaciados a tus imágenes añadiendo los parámetros de estilo padding y border a tus imágenes como en este ejemplo:

<img class="alignleft" style="padding: 10px 10px 10px 10px; border:3px solid black;" src="http://tusitio.es/tus_imagenes/imagen.png" alt="texto alternativo" width="281" height="157" />

1	<img class="alignleft" style="padding: 10px 10px 10px 10px; border:3px solid black;" src="http://tusitio.es/tus_imagenes/imagen.png" alt="texto alternativo" width="281" height="157" />

:: Añadir bordes a las imágenes mediante CSS en la hoja de estilos ::

Mucho mejor es que definas previamente en tu hoja de estilos cómo se mostrarán las imágenes por defecto, con los bordes y los estilos que quieras, iguales para todas.

La idea (ideal) es que, en tu tema hijo o el principal, modifiques la clase CSS de las imágenes para que incluyan un borde o lo que sea que te guste, algo así, por ejemplo:

.mi-clase-img {
float: left;
border: 2px solid #ccc;
width: 100%;
height: 200px;
}

.mi-clase-img {

float: left;

border: 2px solid #ccc;

width: 100%;

height: 200px;

}

Por supuesto la clase mi-clase-img es la del ejemplo, en tu hoja de estilos tendrá otro nombre. En este caso se les ha añadido un borde de 2 píxeles.

:: Añadir bordes a “algunas” imágenes mediante CSS en la hoja de estilos ::

Una variable de lo anterior es que seas de los especialitos y quieras añadir estilos solo a algunas imágenes, en cuyo caso el proceso se complica (en realidad lo complicas tu) pues requiere de 2 pasos.

El primero sería crear en la hoja de estilos las clases CSS que vayas a utilizar, por ejemplo:

.borde-negro {
    border: #000 solid 2px;
}

.borde-gris {
    border: #b9b9b9 solid 2px;
}

.borde-negro {

border: #000 solid 2px;

}

.borde-gris {

border: #b9b9b9 solid 2px;

}

Una vez guardes los cambios ya tendrás disponibles las clases CSS para utilizarlas en tus imágenes desde el editor visual de WordPress. Ahora, cada vez que insertes una imagen puedes pulsar el icono para editarla.

icono editar imagen wordpress 3.9

En la nueva ventana de edición despliegas el apartado avanzado y podrás aplicar la clase CSS recién creada para que esa imagen concreta tenga el borde (o lo que sea) que te guste.

:: Añadir bordes a las imágenes con plugin ::

¿Que no te vale nada de lo anterior?, pues nada, te instalas el plugin Advanced image styles, que devuelve a los ajustes avanzados de las imágenes la funcionalidad perdida y le añade alguna más, como puedes ver en la siguiente captura.

Si te gusta este contenido prueba tambien a suscribirte al canal en YouTube.

AVISO: esta publicación es de hace dos años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.