Wordpress Image Borders

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 forma sencilla 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 ningún código HTML o CSS.
Bordes De Imagen De Wordpress

Video tutorial

Contents

Suscríbase a MundoCMS Si no le gusta el video o necesita más instrucciones, siga leyendo.

Método 1: usar un complemento para agregar un borde de imagen en WordPress

Este método está destinado a principiantes que no desean modificar 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 Configuración »Bordes de imagen de WP para configurar los ajustes del complemento.
Página De Configuración Del Complemento Wp Image Borders
La primera sección de la configuración del complemento le permite orientar las 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 de blog ». También 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. Por ahora, puede 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 ú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 un color de sombra para el 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 «Agregar bordes a todas las imágenes en las publicaciones del blog», no necesita hacer nada más. Debería ver bordes de imagen 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 para imágenes específicas, debe dar 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, luego haga clic en el botón Editar en la barra de herramientas.
Editar Una Imagen En Wordpress
Esto abrirá una ventana emergente de edición de imágenes que muestra los detalles de su imagen. Debe hacer clic en las opciones avanzadas para expandirlo y luego ingresar la clase css de su imagen. Consejo: es .border-image porque lo seleccionamos en la configuración de nuestro complemento.
Agregar Una Clase Css A Una Imagen En Wordpress
Luego 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 extra. 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 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 formas de hacer esto y te las mostraremos todas. Puede elegir lo 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á algo como esto:

Pájaro Azul

Puede agregar fácilmente estilos CSS en código HTML como este:

Pájaro Azul

Siéntase libre de cambiar el ancho, el color, el relleno y el margen del borde según lo necesite.

Agregar un borde de imagen en su tema de WordPress o 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 un archivo style.css. Puede modificar el CSS existente o 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 de su publicación / página tengan un borde de imagen, debe orientar sus anuncios a todas estas clases. Aquí hay un fragmento de código CSS simple 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: automático; margen derecho: automático; borde: 3px sólido #EEEEEE; } img.alignnone {borde: 3px sólido #EEE; } Si desea usar bordes de imagen solo cuando los necesite, puede agregar una 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 {borde: 3px sólido #eee; relleno: 3px; margen: 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 puede consultar 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 ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.

Leave a Reply