¿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 cambiar ningún código HTML o CSS.
Si no le gusta el video o necesita más instrucciones, siga leyendo.
Método 1: usar un plugin para agregar un borde de imagen en WordPress
Este método es para principiantes que no quieren cambiar ningún HTML o CSS. Lo primero que debe hacer es instalar y activar el archivo. Bordes de imagen WP conectar. Después de la activación, debe visitar Configuración »Bordes de imagen de WP para configurar los ajustes del plugin.
La primera sección en la configuración del plugin le permite orientar imágenes. Puede agregar bordes a todas las imágenes en sus publicaciones de WordPress marcando la casilla junto a la opción «Agregar bordes a todas las imágenes en las publicaciones del blog».
Alternativamente, puede apuntar a clases CSS específicas para que tengan bordes. Más adelante en este artículo, le mostraremos cómo agregar una clase CSS a una imagen específica. Ahora mismo puedes poner cualquier cosa en la clase CSS como .border-image.
La segunda sección en la configuración del plugin 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 difuminar el radio, así como 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 almacenar la configuración del plugin.
Si ha seleccionado la primera opción «Agregar bordes a todas las imágenes en las publicaciones del blog», no necesita hacer nada más.
Debería ver los bordes de las imágenes en todas las imágenes de la publicación de su blog.
Sin embargo, si ha seleccionado la segunda opción para mostrar solo el borde para imágenes específicas, debe seguir el siguiente paso.
Agregar una clase CSS a una imagen en WordPress
Si solo desea agregar bordes alrededor de las imágenes seleccionadas, deberá indicarle 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, luego ingrese la clase css de la imagen.
Pista: esto es todo .border-image porque lo hemos seleccionado en la configuración de nuestro plugin.
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á clase adicional. Dado que está utilizando el plugin 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 a las imágenes usando CSS / HTML es una forma más rápida y rápida de obtener bordes alrededor de las imágenes en WordPress. Hay muchas formas de hacer esto y te las mostraremos todas. Puede elegir el que mejor se adapte a sus necesidades.
Agregar bordes usando estilos en línea en WordPress
Después de cargar e insertar su imagen en una publicación de WordPress, cambie al editor de texto. Verá el código HTML de su imagen. Se verá así:
<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 código HTML como este:
<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 del borde, el color, el relleno y el margen para satisfacer sus necesidades.
Agregar borde de imagen en el tema de WordPress o en el tema hijo
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 suele ser el archivo style.css. Puede editar CSS existente o agregar su propio CSS en un tema hijo.
WordPress agrega clases de imágenes predefinidas a todas las imágenes. Para asegurarse de que las imágenes de 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 el borde de la imagen alrededor de las imágenes de su blog de WordPress. También puede consultar nuestra guía sobre cómo guardar imágenes optimizadas para la web para acelerar su sitio de WordPress.
¿Te ha resultado útil??
0 / 0