Cómo agregar un borde alrededor de una imagen en WordPress

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

Video Tutorial

Si no te gusta el video o necesitas más instrucciones, continúa leyendo.

Método 1: usar un complemento para agregar borde 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 complemento WP Image Borders. Tras la activación, debe visitar Ajustes »Bordes de imagen WP para configurar los ajustes del plugin.

La primera sección en la configuración del complemento te permite apuntar las imágenes. Puede agregar bordes a todas las imágenes en sus publicaciones de WordPress marcando la casilla junto a 'Añadir bordes a todas las imágenes en las publicaciones del blog' opción.

Alternativamente, puedes dirigir clases CSS específicas para tener bordes. Le mostraremos cómo agregar 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 .imagen de borde.

La segunda sección en la configuración del complemento le permite personalizar la configuración del borde. Puede elegir un estilo de borde, ancho, radio y color.

La última sección de la página de configuración le permite agregar sombras a sus imágenes. Puede ingresar una distancia horizontal y vertical, difuminar y extender el radio, así como el color de la sombra del cuadro. Si no desea agregar sombras a sus imágenes, simplemente puede dejar estos campos en blanco..

No olvide hacer clic en el botón Guardar cambios para almacenar la configuración de su complemento.

Si seleccionó la primera opción 'Añadir bordes a todas las imágenes en las publicaciones del blog', Entonces no necesitas hacer nada más..

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

Sin embargo, si seleccionó la segunda opción para mostrar solo el borde de imágenes específicas, debe seguir el siguiente paso.

Agregando clases CSS a una imagen en WordPress

Si solo desea agregar bordes alrededor de las imágenes seleccionadas, deberá indicar a WordPress qué imágenes deben tener bordes. Puede hacerlo agregando una clase CSS a las imágenes que necesitan bordes..

Simplemente sube tu imagen y agrégala a tu publicación. Después de agregar la imagen, haga clic en ella en el editor visual y luego haga clic en el botón Editar en la barra de herramientas.

Aparecerá una ventana emergente de edición de imágenes que muestra los detalles de la imagen. Debe hacer clic en Opciones avanzadas para expandirlo y luego ingresar a la clase css de su imagen..

Pista: esto es .imagen de borde porque seleccionamos eso en nuestra configuración de plugin.

A continuación, haga clic en el botón actualizar para guardar y actualizar la configuración de la imagen. Eso es todo, tu imagen ahora tendrá una clase adicional. Ya que está usando el complemento WP Image Borders, aparecerá un borde en esta imagen..

Método 2: uso de HTML y CSS para agregar bordes de imagen en WordPress

Agregar bordes de imagen usando CSS / HTML es una forma más rápida y rápida de obtener bordes alrededor de sus imágenes en WordPress. Hay muchas maneras en que puede hacer esto, y le mostraremos todas ellas. Puedes elegir lo que mejor te funcione.

Agregar bordes usando estilos en línea en WordPress

Una vez que haya cargado e insertado su imagen en una publicación de WordPress, cambie al editor de texto. Verás el código HTML de tu imagen. Se verá algo como esto:

Puede agregar fácilmente el estilo CSS en el código HTML de esta manera:

Siéntase libre de cambiar el ancho del borde, el color, el relleno y el margen según sus propias necesidades.

Agregar borde de imagen en su tema de WordPress o tema infantil

Si desea agregar bordes permanentemente a todas las imágenes en las publicaciones y páginas de su blog de WordPress, puede agregar CSS directamente en su tema de WordPress o en su tema secundario.

La mayoría de los temas de WordPress ya tienen estas reglas de estilo definidas en la hoja de estilo del tema, que generalmente es el archivo style.css. Puede modificar el CSS existente, o puede agregar su propio CSS en un tema secundario.

WordPress agrega clases de imagen por defecto a todas las imágenes. Para asegurarte de que las imágenes en tus publicaciones / páginas tengan un borde de imagen, debes apuntar a todas estas clases. Aquí hay un simple fragmento de código CSS para comenzar:

 img.alignright float: right; margen: 0 0 1em 1em; borde: 3px sólido #EEEEEE;  img.alignleft float: left; margen: 0 1em 1em 0; borde: 3px sólido #EEEEEE;  img.aligncenter display: block; margen izquierdo: auto; margen derecho: auto; borde: 3px sólido #EEEEEE;  img.alignnone border: 3px solid #EEE;  

Si solo desea usar bordes de imagen cuando los necesita, puede agregar clases CSS a sus imágenes (ver arriba). Agregue reglas de estilo para esta clase de CSS en su tema o tema infantil.

 img.border-image border: 3px solid #eee; relleno: 3px; margen: 3px;  

Esperamos que este artículo te haya ayudado a agregar un borde de imagen alrededor de las imágenes de tu blog de WordPress. También es posible que desee ver nuestra guía sobre cómo guardar imágenes optimizadas para la web para acelerar su sitio de WordPress.

Si le ha gustado este artículo, suscríbase a nuestros tutoriales en video del Canal de YouTube para WordPress. También puedes encontrarnos en Twitter y Facebook..