Cómo personalizar el CSS de WordPress (CSS Cheat Sheet)

Una de las grandes cosas de WordPress es su personalización. Una de ellas es el CSS donde añadiendo clases personalizadas a varios elementos del blog se puede adaptar a cualquier necesidad de diseño. La etiqueta CSS más importante es <body> y aquí van algunos ejemplos de clases comunes que WordPress se pueden agregar a este elemento:

CSS para el Body (Body Class Styles)

01.rtl {}
02.home {}

03.blog {}
04.archive {}

05.date {}
06.search {}

07.paged {}
08.attachment {}

09.error404 {}
10.single postid-(id) {}

11.attachmentid-(id) {}
12.attachment-(mime-type) {}

13.author {}
14.author-(user_nicename) {}

15.category {}
16.category-(slug) {}

17.tag {}
18.tag-(slug) {}

19.page-parent {}
20.page-child parent-pageid-(id) {}

21.page-template page-template-(template file name) {}
22.search-results {}

23.search-no-results {}
24.logged-in {}

25.paged-(page number) {}
26.single-paged-(page number) {}

27.page-paged-(page number) {}
28.category-paged-(page number) {}

29.tag-paged-(page number) {}
30.date-paged-(page number) {}

31.author-paged-(page number) {}
32.search-paged-(page number) {}

Si, por ejemplo, desea diseñar su página de resultados de búsqueda de una manera específica, puede utilizar la clase “search-results” para añadir su estilo. WordPress sólo agrega esta clase a la etiqueta de cuerpo cuando la página de resultados de búsqueda está activa por lo que no afecta a ninguna otra página.

Estilos de publicación predeterminados

Al igual que con el elemento de cuerpo, WordPress agrega clases dinámicas a los elementos de publicación. Aquí hay una lista de algunos de los más populares:

01.post-id {}
02.post {}

03.page {}
04.attachment {}

05.sticky {}
06.hentry {}

07.category-misc {}
08.category-example {}

09.tag-news {}
10.tag-wordpress {}

11.tag-markup {}

WordPress permite clases dinámicas en las publicaciones usando la función post_class () que te permitirá crear estilos propios para cada formato. La función post_class () agregará una clase en forma de «.format-foo» donde foo es cualquier formato de post que haya elegido pj. Galería, imagen, etc.

1.format-image {}
2.format-gallery {}

3.format-chat {}
4.format-link {}

5.format-quote {}
6.format-status {}

7.format-video {}

Menús de navegación

Clases para el menú de navegación «main-menu».

01#header .main-menu{} // container class
02#header .main-menu ul {} // container class first unordered list

03#header .main-menu ul ul {} //unordered list within an unordered list
04#header .main-menu li {} // each navigation item

05#header .main-menu li a {} // each navigation item anchor
06#header .main-menu li ul {} // unordered list if there is drop down items

07#header .main-menu li li {} // each drop down navigation item
08#header .main-menu li li a {} // each drap down navigation item anchor

09
10.current_page_item{} // Class for Current Page

11.current-cat{} // Class for Current Category
12.current-menu-item{} // Class for any other current Menu Item

13.menu-item-type-taxonomy{} // Class for a Category
14.menu-item-type-post_type{} // Class for Pages

15.menu-item-type-custom{} // Class for any custom item that you added
16.menu-item-home{} // Class for the Home Link

WP cada vez que crea un menú este se envuelve automáticamente en un div. Este div coge como nombre de la clase el nombre de creación del menú(en el ejemplo «main-menu»).

En el Editor de entradas

El editor WISWYG es uno de los aspectos más populares y más utilizados de WordPress. Por esta razón, es una buena idea tener estilos listos para cualquier cosa que el usuario pueda agregar a su blog, como imágenes o blockquotes. El siguiente CSS muestra qué clases WordPress agrega automáticamente a estos elementos:

01.entry-content img {}
02.alignleft, img.alignleft {}

03.alignright, img.alignright {}
04.aligncenter, img.aligncenter {}

05.alignnone, img.alignnone {}
06

07.wp-caption {}
08.wp-caption img {}

09.wp-caption p.wp-caption-text {}
10

11.wp-smiley {}
12

13blockquote.left {}
14blockquote.right {}

15
16.gallery dl {}

17.gallery dt {}
18.gallery dd {}

19.gallery dl a {}
20.gallery dl img {}

21.gallery-caption {}
22

23.size-full {}
24.size-large {}

25.size-medium {}
26.size-thumbnail {}

Se puede ver que hay varias clases pertenecientes sólo a las imágenes. Si, por ejemplo, el usuario decide incluir una imagen alineada a la izquierda, WordPress agregará la clase «alignleft».

Estilos para Widgets

Como desarrollador tienes el control sobre qué widgets van a ser mostrados por lo que normalmente sabrá exactamente qué estilos añadir. WordPress viene con un puñado de widgets predeterminados, sin embargo, ya menos que los elimine, es aconsejable agregar estilos a sus clases.

01.widget {}
02

03#searchform {}
04.widget_search {}

05.screen-reader-text {}
06

07.widget_meta {}
08.widget_meta ul {}

09.widget_meta ul li {}
10.widget_meta ul li a {}

11
12.widget_links {}

13.widget_links ul {}
14.widget_links ul li {}

15.widget_links ul li a {}
16

17.widget_archive {}
18.widget_archive ul {}

19.widget_archive ul li {}
20.widget_archive ul li a {}

21.widget_archive select {}
22.widget_archive option {}

23
24.widget_pages {}

25.widget_pages ul {}
26.widget_pages ul li {}

27.widget_pages ul li a {}
28

29.widget_links {}
30.widget_links li:after {}

31.widget_links li:before {}
32.widget_tag_cloud {}

33.widget_tag_cloud a {}
34.widget_tag_cloud a:after {}

35.widget_tag_cloud a:before {}
36

37.widget_calendar {}
38#calendar_wrap {}

39#calendar_wrap th {}
40#calendar_wrap td {}

41#wp-calendar tr td {}
42#wp-calendar caption {}

43#wp-calendar a {}
44#wp-calendar #today {}

45#wp-calendar #prev {}
46#wp-calendar #next {}

47#wp-calendar #next a {}
48#wp-calendar #prev a {}

49
50.widget_categories {}

51.widget_categories ul {}
52.widget_categories ul li {}

53.widget_categories ul ul.children {}
54.widget_categories a {}

55.widget_categories select{}
56.widget_categories select#cat {}

57.widget_categories select.postform {}
58.widget_categories option {}

59.widget_categories .level-0 {}
60.widget_categories .level-1 {}

61.widget_categories .level-2 {}
62.widget_categories .level-3 {}

63
64.recentcomments {}

65#recentcomments {}
66#recentcomments li {}

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

69
70.widget_recent_entries {}

71.widget_recent_entries ul {}
72.widget_recent_entries ul li {}

73.widget_recent_entries ul li a {}
74

75.textwidget {}
76.widget_text {}

77.textwidget p {}

Al diseñar widgets probablemente terminará usando los mismos estilos una y otra vez. Por esta razón, es una buena idea combinar las clases en su hoja de estilo mediante comas. Por ejemplo, puede combinar .widget_pages ul y .widget_archive ul haciendo algo así:

1.widget_pages ul, .widget_archive ul {}

Estilos para comentarios

WordPress lo pone fácil con sus clases predeterminadas. Sin embargo, si no se trata de comentarios con subprocesos, es posible ignorar muchos de ellos.

01/*Comment Output*/
02

03.commentlist .reply {}
04.commentlist .reply a {}

05
06.commentlist .alt {}

07.commentlist .odd {}
08.commentlist .even {}

09.commentlist .thread-alt {}
10.commentlist .thread-odd {}

11.commentlist .thread-even {}
12.commentlist li ul.children .alt {}

13.commentlist li ul.children .odd {}
14.commentlist li ul.children .even {}

15
16.commentlist .vcard {}

17.commentlist .vcard cite.fn {}
18.commentlist .vcard span.says {}

19.commentlist .vcard img.photo {}
20.commentlist .vcard img.avatar {}

21.commentlist .vcard cite.fn a.url {}
22

23.commentlist .comment-meta {}
24.commentlist .comment-meta a {}

25.commentlist .commentmetadata {}
26.commentlist .commentmetadata a {}

27
28.commentlist .parent {}

29.commentlist .comment {}
30.commentlist .children {}

31.commentlist .pingback {}
32.commentlist .bypostauthor {}

33.commentlist .comment-author {}
34.commentlist .comment-author-admin {}

35
36.commentlist {}

37.commentlist li {}
38.commentlist li p {}

39.commentlist li ul {}
40.commentlist li ul.children li {}

41.commentlist li ul.children li.alt {}
42.commentlist li ul.children li.byuser {}

43.commentlist li ul.children li.comment {}
44.commentlist li ul.children li.depth-{id} {}

45.commentlist li ul.children li.bypostauthor {}
46.commentlist li ul.children li.comment-author-admin {}

47
48#cancel-comment-reply {}

49#cancel-comment-reply a {}
50

51/*Comment Form */
52

53#respond { }
54#reply-title { }

55#cancel-comment-reply-link { }
56#commentform { }

57#author { }
58#email { }

59#url { }
60#comment

61#submit
62.comment-notes { }

63.required { }
64.comment-form-author { }

65.comment-form-email { }
66.comment-form-url { }

67.comment-form-comment { }
68.form-allowed-tags { }

69.form-submit

Esto es solamente un breve "cheat sheet", hay muchas otras clases e id que poco a poco iremos conociendo.