WordPress: hoja de estilos CSS por defecto

css

Los estilos CSS de WordPress varían de un tema a otro, pero hay ciertas clases CSS e identificadores generados por WordPress que no todo el mundo conoce. Si estás creando un tema de WordPress esta recopilación de estilos, que incluye las clases CSS más importantes, puede ayudarte.

Una de las mejores cosas de WordPress es su personalización. Permite añadir clases personalizadas a diferentes elementos y sobre todo al más importante de todos que es el <body>

Estilos por defecto para body class

.rtl {}
.home {}
.blog {}
.archive {}
.date {}
.search {}
.paged {}
.attachment {}
.error404 {}
.single postid-(id) {}
.attachmentid-(id) {}
.attachment-(mime-type) {}
.author {}
.author-(user_nicename) {}
.category {}
.category-(slug) {}
.tag {}
.tag-(slug) {}
.page-parent {}
.page-child parent-pageid-(id) {}
.page-template page-template-(template file name) {}
.search-results {}
.search-no-results {}
.logged-in {}
.paged-(page number) {}
.single-paged-(page number) {}
.page-paged-(page number) {}
.category-paged-(page number) {}
.tag-paged-(page number) {}
.date-paged-(page number) {}
.author-paged-(page number) {}
.search-paged-(page number) {}

Si queremos, por ejemplo, que el estilo de la home (portada o página de inicio) se visualice de una forma determinada y distinta a las demás páginas, podemos utilizar la clase .home {} y añadir los estilos que deseemos. WordPress añade esta clase a la etiqueta <body> cuando y solamente cuando la home está activa, de forma que estos estilos no afectarán a ninguna otra página.

Estilos por defecto para los posts (entradas)

De la misma forma que WordPress añade clases dinámicas al elemento body hace lo mismo en los siguientes elementos:

.post-id {}
.post {}
.page {}
.attachment {}
.sticky {}
.hentry {}
.category-misc {}
.category-example {}
.tag-news {}
.tag-wordpress {}
.tag-markup {}

Con la función post_class () de WordPress podemos crear estilos específicos para cada formato de entrada. La función post_class () añade una clase en forma de .format-foo donde foo es el formato de entrada elegido al crear o editar el post: entrada, cita, enlace, galería, imagen, etc.

.format-image {}
.format-gallery {}
.format-chat {}
.format-link {}
.format-quote {}
.format-status {}
.format-video {}

Estilos por defecto para menús

Vamos a suponer que hemos creado un menú de navegación personalizado y que hemos determinado para él la clase main-menu.

#header .main-menu{}
#header .main-menu ul {}
#header .main-menu ul ul {}
#header .main-menu li {}
#header .main-menu li a {}
#header .main-menu li ul {}
#header .main-menu li li {}
#header .main-menu li li a {}

.current_page_item{}
.current-cat{}
.current-menu-item{}
.menu-item-type-taxonomy{}
.menu-item-type-post_type{}
.menu-item-type-custom{}
.menu-item-home{}

En este punto hay que tener en cuenta cada vez que creamos un menú en WordPress se crea automáticamente un div. Este div no tiene nombre de clase a menos que lo especifiquemos al registrar el menú en functions.php. Si usamos main-menu como nombre de clase, diseñar los elementos de la lista nos resultará muy fácil.

Estilos por defecto para el editor WISIWYG

El editor WISIWYG es uno de los recursos más utilizados de WordPress. Por esta razón, es buena idea tener preparados estilos para cualquier elemento que el usuario pueda añadir al crear una página desde el editor: imágenes, pies de foto, citas… El siguiente CSS muestra las clases WordPress añade automáticamente a los elementos del editor:

.entry-content img {}
.alignleft, img.alignleft {}
.alignright, img.alignright {}
.aligncenter, img.aligncenter {}
.alignnone, img.alignnone {}

.wp-caption {}
.wp-caption img {}
.wp-caption p.wp-caption-text {}

.wp-smiley {}

blockquote.left {}
blockquote.right {}

.gallery dl {}
.gallery dt {}
.gallery dd {}
.gallery dl a {}
.gallery dl img {}
.gallery-caption {}

.size-full {}
.size-large {}
.size-medium {}
.size-thumbnail {}

Como podemos ver hay varias clases para las imágenes. Si, por ejemplo, el usuario incluye una imagen alineada a la izquierda WordPress añade la clase alignleft.

Estilos por defecto de los widgets de WordPress

WordPress viene con unos cuantos widgets por defecto, sin embargo, es aconsejable añadir estilo a sus clases.

.widget {}

#searchform {}
.widget_search {}
.screen-reader-text {}

.widget_meta {}
.widget_meta ul {}
.widget_meta ul li {}
.widget_meta ul li a {}

.widget_links {}
.widget_links ul {}
.widget_links ul li {}
.widget_links ul li a {}

.widget_archive {}
.widget_archive ul {}
.widget_archive ul li {}
.widget_archive ul li a {}
.widget_archive select {}
.widget_archive option {}

.widget_pages {}
.widget_pages ul {}
.widget_pages ul li {}
.widget_pages ul li a {}

.widget_links {}
.widget_links li:after {}
.widget_links li:before {}
.widget_tag_cloud {}
.widget_tag_cloud a {}
.widget_tag_cloud a:after {}
.widget_tag_cloud a:before {}

.widget_calendar {}
#calendar_wrap {}
#calendar_wrap th {}
#calendar_wrap td {}
#wp-calendar tr td {}
#wp-calendar caption {}
#wp-calendar a {}
#wp-calendar #today {}
#wp-calendar #prev {}
#wp-calendar #next {}
#wp-calendar #next a {}
#wp-calendar #prev a {}

.widget_categories {}
.widget_categories ul {}
.widget_categories ul li {}
.widget_categories ul ul.children {}
.widget_categories a {}
.widget_categories select{}
.widget_categories select#cat {}
.widget_categories select.postform {}
.widget_categories option {}
.widget_categories .level-0 {}
.widget_categories .level-1 {}
.widget_categories .level-2 {}
.widget_categories .level-3 {}

.recentcomments {}
#recentcomments {}
#recentcomments li {}
#recentcomments li a {}
.widget_recent_comments {}

.widget_recent_entries {}
.widget_recent_entries ul {}
.widget_recent_entries ul li {}
.widget_recent_entries ul li a {}

.textwidget {}
.widget_text {}
.textwidget p {}

Estilos por defecto para los comentarios

Incluye estilos para comentarios anidados. Si no los usamoss podemos ignorar la mayoría de los siguientes estilos.

/* Salida de comentarios*/

.commentlist .reply {}
.commentlist .reply a {}

.commentlist .alt {}
.commentlist .odd {}
.commentlist .even {}
.commentlist .thread-alt {}
.commentlist .thread-odd {}
.commentlist .thread-even {}
.commentlist li ul.children .alt {}
.commentlist li ul.children .odd {}
.commentlist li ul.children .even {}

.commentlist .vcard {}
.commentlist .vcard cite.fn {}
.commentlist .vcard span.says {}
.commentlist .vcard img.photo {}
.commentlist .vcard img.avatar {}
.commentlist .vcard cite.fn a.url {}

.commentlist .comment-meta {}
.commentlist .comment-meta a {}
.commentlist .commentmetadata {}
.commentlist .commentmetadata a {}

.commentlist .parent {}
.commentlist .comment {}
.commentlist .children {}
.commentlist .pingback {}
.commentlist .bypostauthor {}
.commentlist .comment-author {}
.commentlist .comment-author-admin {}

.commentlist {}
.commentlist li {}
.commentlist li p {}
.commentlist li ul {}
.commentlist li ul.children li {}
.commentlist li ul.children li.alt {}
.commentlist li ul.children li.byuser {}
.commentlist li ul.children li.comment {}
.commentlist li ul.children li.depth-{id} {}
.commentlist li ul.children li.bypostauthor {}
.commentlist li ul.children li.comment-author-admin {}

#cancel-comment-reply {}
#cancel-comment-reply a {}

/* Formulario de comentarios */

#respond { }
#reply-title { }
#cancel-comment-reply-link { }
#commentform { }
#author { }
#email { }
#url { }
#comment
#submit
.comment-notes { }
.required { }
.comment-form-author { }
.comment-form-email { }
.comment-form-url { }
.comment-form-comment { }
.form-allowed-tags { }
.form-submit

Es posible que tengamos que ir actualizando esta lista constantemente. Si encuentras algún estilo por defecto de WordPress que no esté aquí, estaríamos muy agradecidos si lo indicas en los comentarios.

Hemos preparado un archivo completo, por si quieres descargarlo, compártelo!

Descárgala pagando solo un tweet!

Fuente: wpbeginner | Foto: Jeffrey Zeldman

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *