Cómo añadir un borde alrededor de una imagen en WordPress

¿Quieres añadir un borde alrededor de tus imágenes en WordPress? Recientemente, uno de nuestros usuarios nos preguntó por una manera fácil de añadir un borde alrededor de una imagen en WordPress. Aunque puedes usar CSS, es confuso para los principiantes. En este artículo, te mostraremos una manera fácil de añadir un borde a una imagen en WordPress sin editar ningún código HTML o CSS.

Video Tutorial

Si no te gusta el vídeo o necesitas más instrucciones, sigue leyendo.

Método 1: Usar un plugin para añadir bordes de imagen en WordPress

Este método es para principiantes que no desean editar ningún HTML o CSS. Lo primero que debe hacer es instalar y activar el plugin WP Image Borders. Una vez activado, necesita visitar Ajustes ” WP Image Borders para establecer los ajustes del plugin.

La primera sección en los ajustes del plugin le permite orientar las imágenes. Puede añadir bordes a todas las imágenes en sus entradas de WordPress marcando la casilla siguiente a la opción ‘ Añadir bordes a todas las imágenes en entradas de blog’.

Alternativamente, puedes seleccionar clases CSS específicas para que tengan bordes. Le mostraremos cómo añadir una clase CSS a una imagen específica más adelante en este artículo. Ahora mismo puedes poner cualquier cosa en la clase CSS como .border-image.

La segunda sección en los ajustes del plugin te permite personalizar los ajustes de los bordes. Puedes elegir un estilo de borde, anchura, radio y color.

La última sección de la página de ajustes te permite añadir sombras a tus imágenes. Puedes introducir una distancia horizontal y vertical, un radio de desenfoque y propagación, así como el color de la sombra. Si no quieres añadir sombras a tus imágenes, puedes dejar estos campos en blanco.

No olvides hacer clic en el botón Guardar cambios para establecer los ajustes del plugin.

Si ha seleccionado la primera opción ‘Añadir bordes a todas las imágenes en entradas de blog’, entonces no necesita hacer nada más.

Deberías ver bordes de imagen en todas las imágenes de las entradas de tu blog.

Sin embargo, si ha seleccionado la segunda opción para mostrar solo los bordes de las imágenes específicas, entonces usted tiene que seguir el siguiente paso.

Añadir Clase CSS a una Imagen en WordPress

Si solo desea añadir bordes alrededor de imágenes seleccionadas, entonces necesitará decirle a WordPress qué imágenes deben tener bordes. Puede hacerlo añadiendo una clase CSS a las imágenes que necesitan bordes.

Simplemente suba su imagen y añádala a su entrada. Después de añadir la imagen haga clic en ella en el editor visual y luego haga clic en el botón editar en la barra de herramientas.

Esto hará que aparezca un mensaje / ventana emergente de edición de imágenes mostrando los detalles de tu imagen. Tienes que hacer clic en las opciones avanzadas para expandirlo y, a continuación, introduzca la clase CSS de la imagen.

Sugerencia: esta es .border-image porque la seleccionamos en los ajustes de nuestro plugin.

A continuación, haga clic en el botón de actualización para guardar o actualizar los ajustes de la imagen. Eso es todo, su imagen tendrá ahora una clase adicional. Puesto que usted está utilizando WP Image Borders plugin, un borde se mostrará en esta imagen.

Método 2: Usar HTML y CSS para añadir bordes de imagen en WordPress

Añadir bordes de imagen usando CSS/HTML es una forma más rápida y sencilla de obtener bordes alrededor de sus imágenes en WordPress. Hay muchas maneras de hacer esto, y le mostraremos todas ellas. Puede elegir la que mejor funcione para usted.

Añadir bordes usando estilos en línea en WordPress

Después de haber subido e insertado su imagen en una entrada de WordPress, cambie al editor de texto. Verá el código HTML de su imagen. Se verá algo como esto:

<img src="http://www.example.com/wp-content/uploads/2015/04/bluebird-300x203.jpg" alt="bluebird" width="300" height="203" class="alignnone size-medium wp-image-36" />

Usted puede añadir fácilmente el estilo CSS en el código HTML de esta manera:

<img src="http://www.example.com/wp-content/uploads/2015/04/bluebird-300x203.jpg" alt="bluebird" width="300" height="203" class="alignnone size-medium wp-image-36" style="border:3px solid #eeeeee; relleno:3px; margen:3px;" />

No dude en cambiar el ancho del borde, el color, el relleno y el margen a sus propias necesidades.

Añadir borde de la imagen en su tema de WordPress o tema infantil

Si desea añadir bordes de forma permanente a todas las imágenes de las entradas y páginas de su blog de WordPress, puede añadir CSS directamente en su tema de WordPress o tema hijo.

La mayoría de los temas de WordPress ya tienen estas reglas de estilo definidas en la hoja de estilos del tema, que suele ser el archivo style.css. Puede modificar el CSS existente, o puede añadir su propio CSS en un tema hijo.

WordPress añade clases de imagen por defecto a todas las imágenes. Para asegurarse de que las imágenes en sus entradas / páginas tienen un borde de imagen, necesita apuntar a todas estas clases. Aquí tienes un simple fragmento de código CSS para empezar:

img.alignright {
float:right; 
margin:0 0 1em 1em;
border:3px solid #EEEEEE;
}
img.alignleft {
float:left; 
margin:0 1em 1em 0;
border:3px solid #EEEEEE;
}
img.aligncenter {
display: block; 
margin-left: auto; 
margin-right: auto;
border:3px solid #EEEEEE;
}
img.alignnone { 
border:3px solid #EEE; 
}

Si solo quieres usar bordes de imagen cuando los necesites, entonces puedes añadir una clase CSS a tus imágenes (ver arriba). Añade reglas de estilo para esta clase CSS en tu tema o tema hijo.

img.border-image { 
border: 3px solid #eee;
padding:3px; 
margin:3px;
}

Esperamos que este artículo te haya ayudado a añadir bordes de imagen alrededor de las imágenes de tu blog WordPress. Puede que también quieras ver nuestra guía sobre cómo guardar imágenes optimizadas para la web para acelerar tu sitio WordPress.

Si te ha gustado este artículo, suscríbete a nuestro canal de YouTube para ver tutoriales en vídeo sobre WordPress. También puedes encontrarnos en Twitter y Facebook.