Pablo F Burgueño

Recuadrar imágenes en WordPress

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.