Agrega estilos a tus imágenes con tu tema en WordPress

Cuando creamos un tema para WordPress tenemos que tener en cuenta que las opciones que queremos en una entrada suelen ser muy diversas. Y es común olvidar añadir estilosy opciones para personalizar el editor de textos de WordPress.Tomemos las imágenes, por ejemplo.

Cuando añadimos una entrada podemos incrustar una imagen para darle un mayor impacto visual. Pero WordPress sólo añadirá una imagen seguida por el texto en el HTML, algo similar a esto:

Spider-Man es uno de los superhéroes más populares y exitosos comercialmente.

Como resultado, en nuestra entrada se verá una imagen inline y un texto que le sigue. No muy atractivo a la vista:

Para arreglarlo, solemos utilizar el editor visual de WordPress; que es más cómodo que añadir las clases a mano. Pero escribir el código tampoco es una mala opción. El editor nos permite flotar la imagen a la izquierda, derecha o centrarla y es posible hacerlo sin problema:

Pero si el tema es creación propia y no hemos añadido las clases necesarias, esto no tendrá efecto alguno. Ya que lo que hace el código es añadir una clase u otra a la imagen para realizar la alineación.

Spider-Man es uno de los superhéroes más populares y exitosos comercialmente.

Arriba se observa cómo ha añadido la clase alignleft esperando que tenga propiedades coherentes con lo que se quiere hacer: flotar la imagen a la izquierda. Pero si queremos que esto funcione con un tema creado desde cero, tendremos que añadir esos selectores y sus propiedades al CSS.

Las susodichas clases

Las clases que el editor agrega en las imágenes con el fin de poder alinear la imagen a la derecha, a la izquierda y al centro son tres:alignrightalignleftaligncenterNosotros simplemente tenemos que darles propiedades en nuestro CSS para que cumpla con función que queremos lograr.

.alignright {
        float: right;
}

.alignleft {
        float: left;
}

.aligncenter {
        display: block;
        margin-right: auto;
        margin-left: auto;
}

Para cubrirnos la espalda y evitar que la imagen descuadre el formato cuando se encuentre dentro de un enlace, vamos a añadir las mismas opciones para imágenes dentro de un link:

.alignright, .alignright {
        float: right;
}

.alignleft, a .alignleft {
        float: left;
}

.aligncenter, a .aligncenter {
        display: block;
        margin-right: auto;
        margin-left: auto;
}

En muchos sitios se recomiendaa usarlo de la siguiente manera:  img.aligncenter {…} pero si tomaste el curso de Desarrollo Web sabrás que es mejor poder reutilizar esos selectores en otro momento y no limitarlos a imágenes.Una vez añadidas estas clases, veremos cómo nuestra imagen se ajusta casi perfectamente:

Sin embargo, si esta imagen tiene full background, quedará muy pegada al texto. Pero con CSS podemos anticiparnos a esta situación añadiendo márgenes a las clases:

.alignright, .alignright {
        float: right;
        margin-left: 1em;
        margin-bottom: 1em;
}

.alignleft, a .alignleft {
        float: left;
        margin-right: 1em;
        margin-bottom: 1em;
}

.aligncenter, a .aligncenter {
        display: block;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 1em;
}

Et Voilà. Podemos utilizar las alineaciones del editor de WordPress con total seguridad.