WordPress CSS: Estilos por Defecto (Parte 1 de 2)

El WordPress nos permite controlar plenamente el aspecto de nuestros sitios web. Podemos especificar qué clases y atributos usar en nuestros archivos de plantilla (template files), y luego definir CSS a través de la hoja de estilo personalizada dentro del ¨tema¨ en uso. Es importante saber que, tras bambalinas, el WordPress genera sus propias clases e IDs, y las aplica a determinados elementos HTML dentro de los archivos del tema y contenidos de la base de datos. El tener estos elementos, vuelve super-fácil el personalizar estilos para los citas e imágenes dentro de los artículos, y muchos otros elementos.

Además de generar clases por defecto para las páginas visibles de su sitio (lo que ven sus lectores y usuarios), el WordPress utiliza un conjunto de atributos CSS para la interfaz de administración (la parte que sólo ven los que tenemos autoridad para controlar nuestro blog). Si alguna vez usted se ha adentrado en el intrincado mundo de los estilos de la interfaz de administración, entenderá fácilmente la razón por la cual, en este artículo, me enfocaré exclusivamente en los  atributos ¨de la parte pública¨. Nuestro objetivo es cubrir todas las clases e IDs generadas para el contenido de la base de datos, los archivos del tema y los elementos pre programados por defecto (default widget ítems).

Afortunadamente, la mayoría (si no todo) el trabajo CSS en el WordPress sucede a nivel del “tema” o “artículo”. Cuando es necesario trabajar el estilo de la parte administrativa, es usualmente más fácil hacerlo de conjunto, con un extensor o plugin. Sin embargo, usted puede hacerlo de la forma tradicional.

Diferentes Tipos de Estilos por Defecto en WordPress

En este artículo, nos centraremos en los atributos CSS por defecto que se muestran públicamente. Existen muchas más clases e IDs automáticamente generados de los que usted imagina, incluyendo aquellos para los elementos más comunes, como los siguientes:

• Imágenes incluidas a través del Editor de Artículos del WordPress
• Pie de foto para las imágenes y galerías incluidas por la misma vía
• Las etiquetas de plantilla body_class() y post_class()
• Las “sonrisas” automáticas del WordPress
• Los elementos pre programados por defecto del WordPress (default widgets)

Algunos de estos elementos son usados muy frecuentemente, mientras otros no lo son tanto. Es una buena idea el cubrir estilos-base para estos elementos, especialmente cuando se producen temas disponibles públicamente. Al incluir algunos estilos básicos para los atributos CSS, usted garantiza una experiencia más completa y gratificante para los usuarios de su tema (así como para la audiencia de ellos).

No todos los atributos CSS por defecto requieren ser definidos explicitamente. Muchas clases e IDs por defecto se generan e incluyen a conveniencia. Por el contrario, hay algunos estilos básicos que son esenciales para los temas públicos. Dado esto, organizaremos las cosas en dos categorías arbitrarias de atributos por defecto, “los esenciales” y “los opcionales”:

Estilos Esenciales en el WordPress

Estos son los atributos por defecto del WordPress que deben ser definidos a través de CSS:

• Estilos por defecto aplicados por el editor del WordPress
• Estilos por defecto generados por los elementos pre programados del WordPress (widgets)
• Estilos de los comentarios
• Otros estilos misceláneos

Estilos Opcionales en el WordPress

A continuación atributos por defecto del WordPress que deben ser definidos sólo en caso de necesidad:

• Las listas de página
• Atributos CSS generados por la clase body_class()
• Atributos CSS generados por la clase post_class()
• Otros estilos misceláneos

Describiremos el funcionamiento de cada una de estas secciones y presentaremos el estilo CSS generado por defecto y el resultado en el WordPress. Recuerde que los estilos por defecto del editor de artículos de WordPress (WSIWYG) están definidos de acuerdo al Codex del WordPress.