WordPress et les classes CSS

Quand on crée un thème WordPress, il convient souvent de définir dans notre feuille de style un certain nombre de classes indispensables, car générées automatiquement par le CMS, par certaines fonctions ou par l’éditeur Wysiwyg.

Petit catalogue (exhaustif?)

Sources

J’ai utilisé diverses sources, un peu plus complètes (en commentaires surtout) pour cette compilation

• Le CODEX bien sûr, et entre autre la page CSS#WordPress_Generated_Classes, qui suggérera d’ailleurs quelques valeurs
• Les sources du Core de WordPress
• Default WordPress Generated CSS Cheat Sheet for Beginners
• WordPress Default CSS Styles

Classes utilisées par l’éditeur Wysiwyg

La plupart sont ajoutées lorsque l’on joue avec les alignements.

.entry-content img {  }
.alignleft, img.alignleft {}
.alignright, img.alignright {}
.aligncenter, img.aligncenter {}
blockquote.left {}
blockquote.right {}

Pour les images, et entre autre le shortcode gallery:

.wp-caption {}
.wp-caption img {}
.wp-caption p.wp-caption-text {}
.wp-smiley {}
.gallery dl {}
.gallery dt {}
.gallery dd {}
.gallery dl a {}
.gallery dl img {}
.gallery-caption {}
.size-full {}
.size-large {}
.size-medium {}
.size-thumbnail {}

A noter que la css de la galerie peut être personnalisée via le shortcode en question.

Celles ci se glissent par ci par là, surtout en relations avec les catégories…

li.categories {}  
li.cat-item {}
li.cat-item-{id} {}
li.current-cat {}
li.current-cat-parent {}
ul.children {}
.linkcat {}
.blogroll {}
.more-link {}

Liste de page ou menus

Cette série de classes va arriver via les fonctions wp_list_pages(), wp_page_menu() ou wp_nav_menu()…

.pagenav {}
.page_item {}
.page-item-{id} {}
.current_page_item {}
.current_page_parent {}
.current_page_ancestor {}

.pagenav ul,
.pagenav .current_page_item ul,
.pagenav .current_page_ancestor ul,
.pagenav .current_page_ancestor .current_page_item ul,
.pagenav .current_page_ancestor .current_page_ancestor ul,
.pagenav .current_page_ancestor .current_page_ancestor .current_page_item ul,
.pagenav .current_page_ancestor .current_page_ancestor .current_page_ancestor ul {}

.pagenav  ul ul,
.pagenav .current_page_item ul ul,
.pagenav .current_page_ancestor ul ul,
.pagenav .current_page_ancestor .current_page_item ul ul,
.pagenav .current_page_ancestor .current_page_ancestor ul ul {}
.pagenav .current_page_ancestor .current_page_ancestor .current_page_item ul ul,
.pagenav .current_page_ancestor .current_page_ancestor .current_page_ancestor ul ul {}

Ouf…

Ici, nous partons du principe que .pagenav est le parent de la structure (div qui encadre le menu par exemple…) Et que l’on se limite à un menu à 2 niveaux, il peut arriver d’avoir des arborescences plus complexes encore, donc des ul > ul > ul> ul…

Il est également possible de créer des classes génériques, du genre:

.menu [class*='current-'] , .menu [class*='current_'] {
 }

(à adapter selon les besoins).

Les widgets par défaut

En utilisant les widgets fournis par WordPress, chacun va avoir son lot de CSS. Pas indispensables si vous ne vous en servez pas, bien sûr.

/* liens */
.widget_links {}
.widget_links ul {}
.widget_links ul li {}
.widget_links ul li a {}

/* metat */
.widget_meta {}
.widget_meta ul {}
.widget_meta ul li {}
.widget_meta ul li a {}

/* pages */
.widget_pages {}
.widget_pages ul {}
.widget_pages ul li {}
.widget_pages ul li a {}

/* articles récents */
.widget_recent_entries {}
.widget_recent_entries ul {}
.widget_recent_entries ul li {}
.widget_recent_entries ul li a {}

/* archives */
.widget_archive {}
.widget_archive ul {}
.widget_archive ul li {} 
.widget_archive ul li a {}
.widget_archive select {}
.widget_archive option {}

/* nuage de mots */
.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 {}

/* calendrier */
.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 {}

/* categories */
.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 {}

/* commentaires récents */
.recentcomments {}
#recentcomments {}
#recentcomments li {}
#recentcomments li a {}
.widget_recent_comments {}

/* recherche */
#searchform {}
.widget_search {}
.screen-reader-text {}

/* texte */
.textwidget {}
.widget_text {}
.textwidget p {}

Notez que certains vont générer des ID, empêchant ainsi de les utiliser plusieurs fois…

Commentaires

Utile si vous gérez des affichages de commentaires. On prend son souffle…

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

Classes contextuelles : body_class()

Si au niveau du body, vous glissez la fonction body_class() elle vous ajoutera, selon le cas, une ou plusieurs classes suivantes:

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

Classes contextuelles : post_class()

Si à l’intérieur de votre boucle, vous glissez la fonction post_class() elle vous ajoutera, selon le cas, une ou plusieurs classes suivantes:

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

Et tout ça, sans compter vos propres classes à vous (reset, normalise, grille, typographie…)

Bien sûr, chaque plugin installé pourra ajouter son lot de classes…

Et comme souvent, WordPress ajoutera sans doute des choses au fur et à mesure de ses versions, il est possible que cette liste soit déjà partiellement obsolète… Et peut également varier selon les paramètre que vous passez aux fonctions générées…

Bref: l’inspecteur web de votre navigateur est un outil indispensable !