¿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 puede 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.
Tutorial en video
Si no le gusta el video o necesita más instrucciones, continúe leyendo.
Método 1: usar un complemento para agregar un borde de imagen en WordPress
Este método es para principiantes que no desean editar HTML o CSS. Lo primero que debe hacer es instalar y activar el Bordes de imagen WP enchufar. Tras la activación, debe visitar Configuración »Bordes de imagen de WP para configurar los ajustes del complemento.
La primera sección en la configuración del complemento le permite orientar imágenes. Puede agregar bordes a todas las imágenes en sus publicaciones de WordPress marcando la casilla junto a ‘Agregar bordes a todas las imágenes en las publicaciones del blog’ opción.
Alternativamente, puede apuntar a clases CSS específicas para que tengan 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 .border-image.
La segunda sección en la configuración del complemento le permite personalizar la configuración de los bordes. 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 paralelas 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 paralelas a sus imágenes, simplemente deje 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 ‘Agregar bordes a todas las imágenes en las publicaciones del blog’, entonces no necesita hacer nada más.
Debería ver los bordes de las imágenes en todas las imágenes de las publicaciones de su blog.
Sin embargo, si seleccionó la segunda opción para mostrar solo el borde para imágenes específicas, debe seguir el siguiente paso.
Agregar clase CSS a una imagen en WordPress
Si solo desea agregar bordes alrededor de las imágenes seleccionadas, deberá decirle a WordPress qué imágenes deben tener bordes. Puede hacer esto agregando una clase CSS a las imágenes que necesitan bordes.
Simplemente cargue su imagen y agréguela a su 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 la clase css de su imagen.
Pista: esto es .border-image porque lo seleccionamos en la configuración de nuestro complemento.
A continuación, haga clic en el botón de actualización para guardar y actualizar la configuración de la imagen. Eso es todo, tu imagen ahora tendrá una clase adicional. Dado que está utilizando el complemento WP Image Borders, aparecerá un borde en esta imagen.
Método 2: usar HTML y CSS para agregar bordes de imagen en WordPress
Agregar bordes de imágenes 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 formas de hacer esto y se las mostraremos todas. Puede elegir lo que mejor se adapte a sus necesidades.
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á el código HTML de su imagen. Se verá algo como esto:
<img src="https://www.example.com/wp-content/uploads/2015/04/bluebird-300x203.jpg" alt="bluebird" width="300" height="203" class="alignnone size-medium wp-image-36" />
Puede agregar fácilmente estilo CSS en el código HTML de esta manera:
<img src="https://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; padding:3px; margin:3px;" />
Siéntase libre de cambiar el ancho, el color, el relleno y el margen del borde según sus propias necesidades.
Agregar borde de imagen en su tema de WordPress o tema secundario
Si desea agregar bordes de forma permanente 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 tema hijo.
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 hijo.
WordPress agrega clases de imágenes predeterminadas a todas las imágenes. Para asegurarse de que las imágenes en sus publicaciones / páginas tengan un borde de imagen, debe orientar sus anuncios a todas estas clases. Aquí hay un fragmento de CSS simple para comenzar:
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 desea usar bordes de imagen cuando los necesite, puede agregar la clase CSS a sus imágenes (ver arriba). Agregue reglas de estilo para esta clase de CSS en su tema o tema hijo.
img.border-image {
border: 3px solid #eee;
padding:3px;
margin:3px;
}
Esperamos que este artículo le haya ayudado a agregar un borde de imagen alrededor de las imágenes de su blog de WordPress. Es posible que también desee ver nuestra guía sobre cómo guardar imágenes optimizadas para la web para acelerar su sitio de WordPress.
Si le gustó este artículo, suscríbase a nuestro Canal de Youtube para tutoriales en video de WordPress. También puedes encontrarnos en Gorjeo y Facebook.