Aviso de cookies (fijado en la cabecera debido a que algunos navegadores y extensiones ahora ocultan los banners): Al navegar por este sitio web, tus datos de conexión (IP) y navegación (URL) son obtenidos y mantenidos durante un máximo de 90 días exclusivamente para mantener la seguridad del sitio web a través de los servicios de cortafuegos y antivirus de Defiant Inc, prestador de servicios ubicado en EE.UU. con el que Pablo (responsable) mantiene un contrato de encargado del tratamiento. Puedes oponerte o ejercitar otros derechos, así como obtener más información consultando el aviso de cookies.
El contenido de este sitio web está basado en normas de España, salvo indicación expresa en contrario.

Recuadrar imágenes en WordPress

Estreno de Harry Potter y el Príncipe Mestizo
Este texto se denomina leyenda o pie de foto. La imagen corresponde al preestreno de Harry Potter y el Príncipe Mestizo en Madrid

Es posible añadir un borde o recuadro a las imágenes que ilustran los posts escritos en WordPress. Para ello basta con incluir una leyenda a la fotografía en su panel de edición.

Sin embargo, determinados themes no soportan esta opción de forma predeterminada y muestran únicamente el texto de la leyenda bajo la imagen con alineación a la izquierda y sin marco. Si éste es tu caso, como también ha sido el mío, lo que debes hacer es editar un poco la hoja de estilos (style.css ).

Como siempre, recomiendo hacer una copia de seguridad de la hoja de estilos antes de empezar a editarla. La forma más sencilla de hacer el backup es seleccionar el contenido del css y pegarlo en el bloc de notas, aunque también puedes descargar el archivo directamente del ftp.

Una vez hayas completado el backup, busca en la hoja de estilo las líneas referentes a imágenes para que el texto que añadamos quede en su sitio y sea fácil de encontrar en el futuro. Deberían ser similares a éstas:

img, a:link img, a:visited img{border:0px solid #999; padding:1px;}
img.left,img.center,img.right,img.norm{ margin:5px 12px 5px 0; border:1px solid #999; padding:1px;}
img.left{ float:left; margin:0 12px 5px 0; }
img.center{ display:block; margin:0 auto 5px auto; }
img.right{ float:right; margin:0 0 5px 12px; }
img align left{ float:left; margin:0 12px 5px 0; }

A continuación, justo debajo de esas líneas, pega el siguiente código:

.wp-caption img {
margin-left:5px;
margin-right:5px;
padding: 0;
border: 0 none;
}
.wp-caption {
background-color:#F3F3F3;
border:1px solid #DDDDDD;
margin-bottom:10px;
margin-top:5px;
padding:4px 0;
text-align:center;
}

Una vez actualices el archivo, podrás ver los resultados en tu próxima imágen con leyenda.

Si el texto del post y el recuadro de la imagen se muestran excesivamente juntos o incluso pegados, puedes incluir en el .wp-caption, entre la línea de margin-bottom y la de margin-top, esta línea para solucionarlo:

margin-right: 10px;

Espero que este post técnico te sirva de ayuda. Si la explicación te ha resultado útil o conoces otros trucos para hacer esto mismo, escribe tu comentario aquí abajo.

5 thoughts on “Recuadrar imágenes en WordPress”

  1. Buenísimo, voy a ver si me animo a meter mano y hacer estos cambios porque en mi blog no sale el borde y tal como decis, la descripción sale a la izquierda alejada de la foto.

    Muchas gracias y saludos

Comments are closed.

En caso de que deje un comentario, sus datos serán tratados por Pablo Fernández Burgueño con la finalidad de mantener publicado su mensaje hasta que decida suprimirlo. Tiene derecho a acceder, suprimir, rectificar los datos y otros derechos, como se explica en la política de privacidad
Ir al contenido