¿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. Aunque 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 modificar el código HTML o CSS.
Este método es para principiantes que no quieren modificar ningún código HTML o CSS. Lo primero que debe hacer es instalar y activar el Bordes de imagen de WP conectar. Tras la activación, debe visitar Configuración » Bordes de imagen de WP para configurar los ajustes del complemento.
La primera sección de 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 “Agregue bordes a todas las imágenes en las publicaciones del blog” opción.
Alternativamente, puede apuntar a 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. En este momento puedes poner cualquier cosa en la clase CSS como .border-image.
La segunda sección de la configuración del complemento le permite personalizar la configuración del borde. Puede elegir un estilo de borde, ancho, radio y color.
La sección final de la página de configuración le permite agregar sombras paralelas a sus imágenes. Puede ingresar la distancia horizontal y vertical, el desenfoque y el radio de dispersión, y el color de la sombra del cuadro. Si no desea agregar sombras paralelas a sus imágenes, puede dejar estos campos en blanco.
No olvide hacer clic en el botón Guardar cambios para guardar la configuración de su complemento.
Si seleccionó la primera opción “Agregue bordes a todas las imágenes en las publicaciones del blog”entonces no tienes que 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 ha seleccionado la segunda opción para mostrar solo el borde de imágenes específicas, debe seguir el siguiente paso.
Agrega una 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, 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: es .border-image porque lo seleccionamos en la configuración de nuestro complemento.
Luego 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 extra. Dado que está utilizando el complemento WP Image Borders, aparecerá un borde en esta imagen.
Método 2: use HTML y CSS para agregar bordes de imagen en WordPress
Agregar bordes de imágenes usando CSS/HTML es una forma cada vez más rápida de colocar bordes alrededor de sus imágenes en WordPress. Hay muchas maneras de hacer esto, y te las mostraremos todas. Puedes elegir lo que más te convenga.
Agregar un borde de imagen en su tema de WordPress o tema secundario
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 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 suele ser un archivo style.css. Puede modificar el CSS existente o puede agregar su propio CSS en un tema secundario.
WordPress agrega clases de imágenes predeterminadas a todas las imágenes. Para asegurarse de que las imágenes de su publicación/página tengan un borde de imagen, debe orientar 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 desea utilizar los bordes de las imágenes solo cuando los necesite, puede agregar una clase CSS a sus imágenes (ver más arriba). Agregue reglas de estilo para esta clase de CSS en su tema o tema secundario.
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. También puedes consultar nuestra guía en cómo guardar imágenes optimizadas para la web para acelerar su sitio de WordPress.
