Alle von WordPress generierten CSS Klassen

Für WordPress Theme Entwickler ist es wichtig, alle Standard CSS-Klassen, die von WordPress generiert werden zu kennen. Denn bereits benannte Elemente müssen dann nicht erneut deklariert werden.

Das Ziel dieser Liste ist es einen möglichst umfassenden Überblick über die von WordPress generierten Klassen zu geben. Natürlich erhebe ich keinen Anspruch auf Vollständigkeit. Sollte eine Klasse fehlen bitte ich dies mir zu sagen. Die Liste richtet sich sowohl an Anfänger als auch an Fortgeschrittene und Profis.

CSS Klassen für den Body Tag

Wird im Theme der Body-Tag um den Code


<?php body_class(); ?>

erweitert, dann stehen folgende CSS-Klassen zur Gestaltung zur Verfügung:

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

CSS-Klassen für Artikel

WordPress ermöglicht es, eigentlich jeden Artikel ganz individuell zu gestalten. Entweder anhand der Post-ID, dem Post-Type, dem Tag oder vielem anderen mehr:

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

Und die Klassen für die verschiedenen Formate, die man einem Artikel geben kann:

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

CSS-Klassen für die WordPress Navigation

Bitte daran denken, dass WordPress die Menüs immer innerhalb von Div-Container anlegt, wenn man nichts anderes definiert. Und dieser Div-Container hat auch nur dann eine CSS-Klasse, wenn man eine definiert. Ich habe in diesem Beispiel den Container „main-menu“ genannt:

#header .main-menu{} // Container Klasse
#header .main-menu ul {} // Kontainer Klasse der erste UL-Liste
#header .main-menu ul ul {} //UL-Liste innerhalb einer UL-Liste
#header .main-menu li {} // Jedes Navigationselement
#header .main-menu li a {} // Der Link innerhalb eines Navigationselements
#header .main-menu li ul {} // UL-Liste als Untermenü
#header .main-menu li li {} // Navigationselement des Untermenüs
#header .main-menu li li a {} // Link innerhalb der Navigationselemente eines Untermenüs

.current_page_item{} // Wird für die gerade angezeigte Seite angehängt
.current-cat{} // Wird für die gerade angezeigte Kategorie angehängt
.current-menu-item{} // Wird für jedes andere Element, das gerade angezeigt wird angehängt
.menu-item-type-taxonomy{} // Klasse für eine Kategorie
.menu-item-type-post_type{} // Klasse für Seiten
.menu-item-type-custom{} // Klasse für ein eigens hinzugefügtes Element
.menu-item-home{} // Klasse für den Home-Link</pre>

WYSIWYG – CSS Klassen

Damit gemeint sind die Klassen, die durch Elemente innerhalb des TinyMCE Editors generiert werden. Damit werden Elemente des eigentlichen Inhalts formatiert:

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

WordPress eigene CSS-Klassen für Widgets

Jedes Widget von WordPress hat natürlich auch eine entsprechende CSS-Klasse:

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

CSS-Klassen für die Kommentare

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

Wie bereits oben erwähnt, ist diese Liste bei weitem noch nicht fertig und wird sicherlich mit der Zeit noch erweitert.

Ähnliche Artikel:

Tags: ,

Kommentar hinterlassen




CommentLuv badge