WordPress genera estilos CSS base a nivel de algunas etiquetas HTML las cuales podemos usar para personalizar nuestro sitio web. En este artículo veremos algunos de estos estilos CSS por defecto que nos brinda WordPress.
Anteriormente vimos cómo Usar Firebug para Modificar un Theme, este artículo nos servirá de base para aprender a usar los ids y clases que se detallan a continuación.
1- Estilos por defecto para la etiqueta body
Estas clases posiblemente son las que más usaremos si queremos hacer personalizaciones a páginas específicas en nuestro sitio. El siguiente listado muestra los estilos generados para la etiqueta HTML body. Para usar alguna de estas clases, se debe reemplazar las mayúsculas por el valor adecuado, por ejemplo en .page-id-10, ver video para más detalle.
.home {} /* se muestra si estas en la página de inicio*/
.page{} /* estas viendo el detalle de una página*/
.page-id-ID{} /* estas viendo detalle de página específica */
.single{} /* estas viendo el detalle de una entrada */
.postid-ID {} /* estas viendo el detalle de entrada específica */
.logged-in {} /* indica si un usuario esta conectado */
.blog {} /* lista entradas formato blog */
.archive {} /* lista de entradas, usualmente va asociado con category*/
.search {} /* lista de entradas buscadas */
.paged {} /* lista entradas cuando hay paginación */
.attachment {} /* lista de entradas con adjuntos*/
.date {} /* lista entradas por fecha */
.error404 {} /* para el body de la página de error.php */
.author {} /* indica el detalle de una página de autor */
.tag {} /* lista de entradas por por tag*/
.category {} /* lista de entradas por categoría */
.category-SLUG {} /* lista de entradas por categoría específica */
.search-results {} /* lista de entradas de búsqueda */
.search-no-results {} /* no existen entradas para la búsqueda */
.attachmentid-ID {} /* página de adjunto específica */
.attachment-MIMETYPE {} /* Tipo de página de adjunto de acuerdo al tipo */
.author-USERNICENAME {} /* autor específico en base al nombre */
.tag-SLUG {} /* lista de entradas por tag específico */
.page-parent {} /* página padre */
.page-child{} /* detalle de alguna página hija */
.parent-pageid-ID {} /* página hija específica */
.rtl {} /* texto de derecha a izquierda, para algunos idiomas */
2- Estilos por defecto para contenido
Tenemos básicamente estilos de páginas y estilos de entradas, pero podrían ser extensibles a cualquier post-type, las clases aplicadas se detallan en el siguiente enlace, a diferencia del caso anterior estas clases podrían aplicarse en cualquier etiqueta contenedora del contenido, depende cómo lo usa el theme , sin embargo usualmente se suele usar la etiqueta HTML article. En el listado se detallan las clases, para algunas será necesario reemplazar las mayúsculas por un valor válido, por ejemplo .post-10.
.post-ID{} /* clase para una entrada o página específica*/
.page{} /* clase para una página */
.post{} /* clase para un post */
.has-post-thumbnail{} /* si el artículo tiene imagen destacada*/
.TAXONMIA-NOMBRE{} /* por ejemplo : categoria-noticias */
.type-TIPO{} /* por ejemplo type-post o type-page */
.sticky{} /* cuando un artículo es definido como sticky o fijo */
.tag-NOMBRE{} /* si el artículo tiene un tag*/
.hentry{} /* hAtom microformato */
.status-ESTADO{} /* define una clase para el estado, usualmente publish */
.format-FORMATO{} /* clase para formato defecto o estandard*/
.post-password-required{} /* clase para pagina de clave requerida*/
.post-password-protected{} /* clase para página de protegido por clave*/
3- Estilos por defecto para menús
Para una referencia completa de las clases que se generan para los menús revisar el siguiente enlace. En el siguiente listado se muestra los estilos más importantes
.menu-item{} /* clase para un item de menú*/
.menu-item-ID{} /* clase para un item de menú específico */
#menu-item-ID{} /* id para un item de menú específico*/
.current-menu-item{} /* menu activo actualmente */
.current-menu-parent{} /* menu padre activo actualmente */
.menu-item-has-children{} /* el menú es un menú padre */
4- Estilos por defecto de los Widgets
La mayoría de los widgets crean sus propias clases, sin embargo de manera general el siguiente listado presenta las más importantes.
.widget{} /* clase para un widget */
.widget_NOMBRE{}/* widget de un tipo específico */
#NOMBRE{} /* id del nombre del widget */
.widget-title{} /* título del widget */
.widget-wrap{} /* usado usualmente para un widget de texto como contenedor*/
Tener en cuenta que el nombre del widget puede contener un número en caso existan más widgets del mismo tipo agregado, por ejemplo #text-4.
5- Estilo por defecto de comentarios
Depende mucho del tema que se use, sin embargo los estilos más importantes son los que se detallan en la siguiente lista.
.commentlist{} /* lista de comentarios */
.odd{} /* diferencia comentarios pares */
.even{} /* diferencia comentarios impares */
.depth-NUMERO{} /* profundidad de respuesta */
.comment-author{} /* área de autor */
.comment-author-NOMBRE{}/* clase para autor específica */
.comment-reply{} /* link para responder */
.comment-form{} /* contenedor del formulario de comentarios*/
.comment-form-author{} /* campo de nombre */
.comment-form-email{} /* campo de correo */
.comment-form-url{} /* campo de url */
.comment-form-comment{} /*contenedor formulario */
#submit{} /* clase para el boton de enviar */
6- Estilos por defecto Generales
Una referencia completa de estos estilos se encuentra en el siguiente enlace. Alguno de los más importantes se muestra en la siguiente lista.
.alignleft{} /* alinear a la izquierda */
.alignright{} /* alinear a la derecha */
.aligncenter{} /* alinear al centro */
.alignnone{} /* sin alineación */
.wp-caption{} /* clase para un subtitulo */
.screen-reader-text{} /* clase para accesibilidad */
En el siguiente video se explica el uso de las clases que genera por defecto WordPress, se realizan dos modificaciones:
- Cambio de color de fondo de una página específica.
- Ocultar Widget para usuarios registrados.
Artículos Relacionados
(5 votos, promedio: 4,80 de 5)
Cargando...
Me encanta tu blog. Creo que efectivamente es wordpress a otro nivel. Gracias
Gracias Tere, Saludos.
Me a sido de mucha utilidad tu blog