Problemas con visualización de imágenes en Wordpress

Problema

Wordpress incorpora herramientas que nos hacen muy facil el tratado de las imágenes en nuestros posts. Puede ocurrir que en el editor del post centremos una imagen, pero luego cuando la vemos en el sitio estos cambios no aparecen. Esto suele ser común y es un “problema” de los themes, que no traen incorporado las clases Css que Wordpress usa para lograr estos efectos. Otro problema común es agregar un epígrafe en el editor, que luego no tiene la misma apariencia en el sitio principal.

Solución

La solución a estos problemas es muy sencilla, solo es agregar el código necesario en la hoja de estilos de nuestra plantilla. Para eso accedemos al editor de themes (Apariencia -> Editor), abrimos el archivo de estilos (generalmente styles.css) y añadimos el siguiente código al final:

Para problemas de alineación de imágenes (la centramos pero siempre aparece a la izquierda, el texto no float alrededor de la imágen, etc), agregamos las siguientes clases Css.

img.alignleft, div.alignleft {
float:left;
margin:0 0.5em 0.5em 0;
}
img.alignright, div.alignright {
float:right;
margin:0 0 0.5em 0.5em;
}
img.aligncenter, div.aligncenter {
text-align:center;
margin:0 auto;
}

Para lograr el mismo efecto de el epígrafe tanto en el editor del administrador como en el sitio principal, añadimos las clases:

.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
/* optional rounded corners for browsers that support it */
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}

Tagged as: css, imagenes, Trucos