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.
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 {}
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»).
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».
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 {}
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.