Sind Sie auf der Suche nach einem standardmäßig von WordPress generierten CSS-Spickzettel?
WordPress fügt in den meisten Themes automatisch einige CSS-Klassen zu verschiedenen Elementen hinzu. Diese Standard-CSS-Klassen können zur Gestaltung dieser Elemente in Ihrem WordPress-Theme verwendet werden.
In diesem Artikel zeigen wir Ihnen den standardmäßig von WordPress generierten CSS-Spickzettel. Wir werden auch darüber sprechen, wie Sie CSS-Klassen leicht finden und wie Sie benutzerdefinierte CSS-Klassen hinzufügen können, wenn Sie sie benötigen.
Warum sollte man etwas über das von WordPress generierte Standard-CSS lernen?
WordPress generiert automatisch CSS-Klassen und fügt diese den verschiedenen Elementen auf Ihrer WordPress-Website hinzu.
WordPress-Theme-Entwickler können diese CSS-Klassen dann verwenden, um allgemeine Bereiche aller WordPress-Sites zu gestalten. Dazu können der Inhaltsbereich, Seitenleisten, Widgets, Navigationsmenüs und mehr gehören.
Die Kenntnis dieser CSS-Klassen ist sehr nützlich, wenn Sie die Entwicklung von WordPress-Themes erlernen oder einfach nur ein Child-Theme für Ihre eigene Website erstellen möchten.
Es hilft Ihnen auch, bestimmte Elemente in Ihrem WordPress-Theme schnell zu gestalten, indem Sie benutzerdefinierte CSS hinzufügen, ohne Ihr eigenes Theme zu erstellen.
Hinweis: Sie müssen keine CSS-Kenntnisse haben, um Ihre Themenstile zu ändern oder ein benutzerdefiniertes Thema zu erstellen. Wenn Sie nicht programmieren lernen möchten, können Sie einen Drag-and-Drop-Builder wie SeedProd verwenden. Wir werden später in diesem Artikel mehr darüber sprechen.
Werfen wir also einen Blick auf die standardmäßig von WordPress generierten CSS-Klassen.
Standard Body Class Styles
Der Body-Tag <body> in HTML enthält die gesamte Layout-Struktur einer Webseite, was ihn in jedem WordPress-Theme-Design sehr wichtig macht.
WordPress fügt dem Body-Bereich mehrere CSS-Klassen hinzu, die Theme-Designer verwenden können, um den Body-Container zu gestalten.
// Added when a website is using a right-to-left language e.g. Arabic, Hebrew
.rtl {}
// Added when home page is being displayed
.home {}
// Added when blog page is being displayed
.blog {}
// Added when an Archive page is being displayed
.archive {}
// Added when a date based archive is displayed
.date {}
// Added on search pages
.search {}
// Added when pagination is enabled
.paged {}
// Added when an attachment page is displayed
.attachment {}
// Added when a 404 error page is displayed
.error404 {}
// Added when a single post is dispayed includes post ID
.single postid-(id) {}
// Added when a single attachment is displayed. Includes attachment ID
.attachmentid-(id) {}
// Added when a single attachment is displayed. Includes attachment mime-type
.attachment-(mime-type) {}
// Added when an author page is displayed
.author {}
// Added when an author page is displayed. Includes author name.
.author-(user_nicename) {}
// Added when a category page is displayed
.category {}
//Added when a category page is displayed. Includes category slug.
.category-(slug) {}
// Added when a tag page is displayed.
.tag {}
// Added when a tag page is displayed. Includes tag slug.
.tag-(slug) {}
// Added when a parent page is displayed.
.page-parent {}
// Added when a child page is displayed. Includes parent page ID.
.page-child parent-pageid-(id) {}
// Added when a page is displayed using page template. Includes page template file name.
.page-template page-template-(template file name) {}
// Added when search results are displayed.
.search-results {}
// Added when search returns no results.
.search-no-results {}
// Added when a logged in user is detected.
.logged-in {}
// Added when a paginated page is displayed. Includes page number.
.paged-(page number) {}
// Added when a paginated single item is displayed. Includes page number.
.single-paged-(page number) {}
// Added when a paged page type is displayed. Includes page number.
.page-paged-(page number) {}
// Added when a paged category page is displayed. Includes page number.
.category-paged-(page number) {}
// Added when a paged tag page is displayed. Includes page number.
.tag-paged-(page number) {}
//Added when a paged date based archive page is displayed. Includes page number.
.date-paged-(page number) {}
// Added when a paged author page is displayed. Includes page number.
.author-paged-(page number) {}
// Added when a paaged search page is displayed. Includes page number.
.search-paged-(page number) {}
Wie Sie sehen können, umfassen diese Klassen eine Vielzahl von Bedingungen, die Sie in Ihren CSS-Stilen berücksichtigen können.
Wenn Sie zum Beispiel möchten, dass die Kategorieseite „News“ eine andere Hintergrundfarbe hat, können Sie das folgende benutzerdefinierte CSS hinzufügen.
.category-news {
background-color:#f7f7f7;
}
Benötigen Sie eine einfache Möglichkeit, CSS und Codeschnipsel in WordPress hinzuzufügen? Testen Sie das kostenlose WPCode-Plugin, um Ihre Code-Snippets zukunftssicher zu machen.
Standard-Poststil-Klassen
Genau wie beim body-Element fügt WordPress auch den post-Elementen dynamische Klassen hinzu.
Dieses Element ist normalerweise der <article>-Tag in Ihrer Themenvorlage. Es kann aber auch jeder andere Tag sein, je nach Ihrem Thema. Die CSS-Klassen für Beiträge werden in Ihrem Thema durch Hinzufügen des Template-Tags post_class() angezeigt.
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
Hier ist eine Liste der gängigsten CSS-Klassen, die von der Funktion post_class() erzeugt werden:
// Adds a class with ID for single items
.post-(ID) {}
// Generic post claass added for single blog posts.
.post {}
// Generic page class added when a single page is displayed.
.page {}
// Generic attachment class added to attachment pages.
.attachment {}
// Adds a post type class e.g. type-post
.type(post-type){}
// Adds a class for post format if theme supports posts formats. E.g. format-standard
.format-(post-format){}
// Added when an item has a featured image
.has-post-thumbnail{}
// Added when a sticky post is displayed
.sticky {}
// Generic class to display an entry
.hentry {}
// Classes with categories assigned to a post. E.g. category-news category-movies
.category-(slug) {}
// Classes with tags assigned to a post. e.g. tag-photofriday tag-tgif
.tag-(slug) {}
Mithilfe von Beitragsklassen können Sie Blogbeiträge und Seiten entsprechend unterschiedlicher Bedingungen gestalten. So können Sie zum Beispiel Blogbeiträge, die in einer bestimmten Kategorie abgelegt sind, mit dem folgenden benutzerdefinierten CSS anders gestalten:
.category-news {
background-color:#EFEFEF;
}
Wenn Sie den CSS-Editor in Ihrem WordPress-Dashboard nicht sehen, dann folgen Sie unserer Anleitung, wie Sie den fehlenden WordPress-Theme-Customizer beheben.
Standard-Navigationsmenü-Klassen
WordPress fügt auch CSS-Klassen zu Ihren Navigationsmenüs hinzu. Im Folgenden sind die Standardklassen aufgeführt, die den Navigationsmenüs standardmäßig hinzugefügt werden.
// Class for Current Page
.current_page_item{}
// Class for Current Category
.current-cat{}
// Class for any other current Menu Item
.current-menu-item{}
// Class for a taxonomies
.menu-item-type-(taxonomy){}
// class to distinguish post types.
.menu-item-type-(post_type){}
// Class for any custom item that you added
.menu-item-type-custom{}
// Class for the Home Link
.menu-item-home{}
Ihr WordPress-Theme fügt auch eine CSS-Klasse zu jeder Position des Navigationsmenüs hinzu.
Angenommen, Ihr Thema weist die Klasse primary-menu einer Menüposition im Kopfbereich zu, dann können Sie sie in Ihrem CSS mit den folgenden CSS-Klassen anvisieren.
// container class
#header .primary-menu{}
// container class first unordered list
#header .primary-menu ul {}
//unordered list within an unordered list
#header .primary-menu ul ul {}
// each navigation item
#header .primary-menu li {}
// each navigation item anchor
#header .primary-menu li a {}
// unordered list if there is drop down items
#header .primary-menu li ul {}
// each drop down navigation item
#header .primary-menu li li {}
// each drap down navigation item anchor
#header .primary-menu li li a {}
Weitere Einzelheiten finden Sie in unserem Leitfaden zur Gestaltung von Navigationsmenüs in WordPress.
Standard-WordPress-Widget-Klassen
Widgets sind eine einfache Möglichkeit, in Ihrem WordPress-Theme Blöcke anzuzeigen, die nicht zum Inhalt gehören. Sie werden in der Regel in speziellen Widget-bereiten Bereichen oder Seitenleisten in Ihrem WordPress-Theme angezeigt.
WordPress fügt die folgenden Klassen zu den Legacy-Widgets hinzu.
.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 {}
Da WordPress jedoch zu blockbasierten Widget-Bereichen übergeht, können Sie nun verschiedene Blöcke zu Ihren Widget-Bereichen hinzufügen und jeder von ihnen generiert dynamisch CSS-Klassen.
Wir zeigen Ihnen später in diesem Artikel, wie Sie diese CSS-Klassen finden können.
Standard-Kommentarformular-Klassen
Kommentare sind der Dreh- und Angelpunkt für viele WordPress-Websites. Durch ihre Gestaltung können Sie den Nutzern eine sauberere und ansprechendere Erfahrung bieten.
WordPress fügt die folgenden Standard-CSS-Klassen hinzu, um Theme-Entwicklern die Gestaltung des Kommentarbereichs zu erleichtern.
/*Comment Output*/
.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 {}
/*Comment Form */
#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
Weitere Einzelheiten finden Sie in unserem Leitfaden zur Gestaltung von Kommentaren in WordPress.
Finden von WordPress-Block-Klassen
Der WordPress-Blockeditor erzeugt dynamisch CSS-Klassen für Blöcke.
Um diese CSS-Klassen zu finden, müssen Sie den betreffenden Block zu einem Beitrag oder einer Seite hinzufügen. Danach müssen Sie auf die Schaltfläche Vorschau klicken, um den Block in Aktion zu sehen.
Gehen Sie auf der Registerkarte „Vorschau“ mit der Maus auf den Block, den Sie gerade hinzugefügt haben, und wählen Sie mit der rechten Maustaste das Werkzeug „Prüfen“.
In der Entwicklerkonsole sehen Sie den vom Block erzeugten HTML-Code. Von hier aus können Sie die durch den Block hinzugefügten CSS-Klassen sehen.
Im obigen Screenshot sehen wir uns die CSS-Klassen des Galerie-Blocks an. Sie können diese CSS-Klassen dann verwenden, um den Galerie-Block in Ihrem WordPress-Theme zu gestalten.
Hinzufügen Ihrer eigenen CSS-Klassen in WordPress
Die Standard-CSS-Klassen von WordPress sind recht umfangreich. Ihr Zweck besteht jedoch hauptsächlich darin, Theme-Entwicklern ein standardisiertes Gerüst zu bieten, mit dem sie bauen können.
Für Ihre individuelle Website müssen Sie möglicherweise benutzerdefinierte CSS für Bereiche hinzufügen, für die Sie keine Standard-CSS-Klasse finden können.
Ebenso kann es vorkommen, dass Sie nur eine kleine Änderung an einem bestimmten Beitrag oder einer Seite vornehmen möchten, ohne sie auf Ihr gesamtes Thema anzuwenden.
Glücklicherweise bietet WordPress Ihnen mehrere einfache Möglichkeiten, CSS-Klassen in verschiedenen Bereichen hinzuzufügen.
Hinzufügen von benutzerdefinierten CSS-Klassen zu einem Block im Block-Editor
Wenn Sie schnell eine benutzerdefinierte CSS-Klasse zu einem bestimmten Beitrag oder einer Seite hinzufügen möchten, ist es am einfachsten, den Block-Editor zu verwenden.
Bearbeiten Sie einfach den Beitrag oder die Seite und wählen Sie dann den Block aus, dem Sie eine benutzerdefinierte CSS-Klasse hinzufügen möchten. Klicken Sie unter „Blockeinstellungen“ auf das Feld „Erweitert“ und fügen Sie den Namen für Ihre CSS-Klasse hinzu.
Vergessen Sie nicht, Ihre Änderungen zu speichern, indem Sie auf die Schaltfläche Aktualisieren klicken.
Sie können diese Klasse nun verwenden, um benutzerdefinierten CSS-Code hinzuzufügen, der sich nur auf diesen bestimmten Block in diesem bestimmten Beitrag oder auf dieser Seite auswirken wird.
In WordPress Navigationsmenüs
Sie können auch benutzerdefinierte CSS zu Ihren WordPress-Navigationsmenüelementen hinzufügen. Angenommen, Sie möchten ein Menüelement in eine Schaltfläche umwandeln, dann ist diese Methode sehr nützlich.
Gehen Sie einfach auf die Seite Erscheinungsbild “ Menüs und klicken Sie auf die Schaltfläche Bildschirmoptionen in der oberen rechten Ecke des Bildschirms.
Hier müssen Sie das Kontrollkästchen neben der Option CSS-Klassen aktivieren.
Als Nächstes müssen Sie nach unten scrollen und auf das Menüelement klicken, dem Sie die benutzerdefinierte CSS-Klasse hinzufügen möchten.
Sie werden ein Feld mit der Bezeichnung CSS-Klassen sehen. Fügen Sie hier Ihre eigene CSS-Klasse hinzu.
Vergessen Sie nicht, auf die Schaltfläche Menü speichern zu klicken, um Ihre Änderungen zu speichern.
Sie können nun diese benutzerdefinierte CSS-Klasse verwenden, um dieses bestimmte Menüelement anders zu gestalten.
Bonus: Entwerfen Sie ganz einfach ein WordPress-Theme, ohne CSS-Code zu schreiben
Zu lernen, wie man sein WordPress-Theme mit benutzerdefiniertem CSS gestaltet, ist eine äußerst nützliche Fähigkeit. Manche Benutzer möchten jedoch einfach nur eine Lösung, um ihr WordPress-Theme zu gestalten, ohne jemals CSS-Code zu schreiben.
Dafür brauchen Sie SeedProd. Es ist das beste WordPress-Seitenerstellungstool auf dem Markt, mit dem Sie ganz einfach benutzerdefinierte Themes erstellen können, ohne Code schreiben zu müssen.
SeedProd wird mit gebrauchsfertigen Themen geliefert, die Sie als Ausgangspunkt verwenden können.
Sie können ein Thema auch von Grund auf neu erstellen, indem Sie manuell Vorlagen erstellen.
Anschließend können Sie Ihr benutzerdefiniertes Thema mit einer intuitiven Drag-and-Drop-Schnittstelle für die Website-Erstellung bearbeiten.
Fügen Sie einfach Blöcke in Ihr Design ein, um Ihre eigenen Layouts zu erstellen.
Sie können auch jedes Element mit einem einfachen Mausklick ändern. Sie können Ihre eigenen Farben, Hintergründe, Schriftarten und mehr verwenden.
Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung, wie Sie ganz einfach ein benutzerdefiniertes WordPress-Theme erstellen können, ohne Code schreiben zu müssen.
Wir hoffen, dass dieser Artikel Ihnen geholfen hat, den standardmäßig von WordPress generierten CSS-Spickzettel zu finden. Vielleicht interessieren Sie sich auch für unseren Leitfaden zur Behebung der häufigsten WordPress-Fehler oder unseren Expertenvergleich der besten Live-Chat-Software für kleine Unternehmen.
Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Rodrigo Vieira Eufrasio da Silva says
You are to be congratulated for this wonderful content. I would only recommend updating this article, and letting us know which classes are generated by guttenberg and the latest version of WordPress because this post is out of date. But it helped me a lot.
Hugs to you all.
WPBeginner Support says
Thank you for letting us know, we’ll be sure to take a look
Admin
Alison Westall says
Is there a CSS class for changing the padding of an element? Thanks!
WPBeginner Support says
Once you find the object you want to add padding to, you would use:
padding, padding-top, padding-right, padding-bottom, padding-left
depending on what type of padding you want added
Admin
Matt Cauley says
Thanks for the info. I just bookmarked page even though its a few years old!
WPBeginner Support says
Thank you, while the article is older, it should still be useful
Admin
MS Shohan says
Awesome work bro. Thanks for making a list of all the default WP classes
Hannah Steele says
Hello, I am really struggling to format the automatically generated events page.
Please help me?
Arunjith RS says
Realy useful..Tank you.
Shai says
Can you (if not already elsewhere) list the admin dashboard and admin widgets classes.
it look like the admin is using a loader (wp-admin/load-styles.php) to include it CSS but that CSS is compress and hard to read. it will be nice to see a list of the items in use. for example if you want to create your own widget with tabs ; I inspected the CSS and can see large list of the class .nav-tab related CSS.
.
Ari Susanto says
and the „entry-content“ itself!
Ari Susanto says
I want to add this one:
„status-publish“
luroch says
A question: when creating a bootstrap theme from underscores, should I keep the classes and ids that come with this framework, just adding the Bootstrap ones, or can I use only Bootstrap classes and Ids?
Ari Susanto says
How did you found them? Is there an automated way like using php function, may be?
Stephen Clark says
Fantastic post and highly informative. Curious if you could append this post with similar details about the WP footer. I have been struggling with styling and formatting the footer with the theme I’m using, and with some other sites I’ve built.
Would also be helpful to have a downloadable CSS stylesheet file containing all of these styles. Thanks!
Kevin Pryce says
When I inspect element only my wordpress theme, I do not see these styles, especially the ones applied to the body class. Do you have to put them into the template?
Joel Bladt says
Nice compilation of all the standard WordPress classes. Was that really all classes that are added automatically by WordPress? If classes are obsolete and disappeared, or new ones have come to this, I look forward to updating the list.
– German Blogger and translated with Google Translator.
WPBeginner Support says
It is up to date to the best of our knowledge, if you find any class obsolete, please let us know.
Admin
loreto says
time saver! now let me mess those styles
Amba Junior says
Very useful tutorial. Just like the Genesis visual hook guide, this summarizes Genesis real well
MalcolmOwen says
Do you know what would be useful? A printable PDF version of this guide…
Pete says
http://www.printfriendly.com/print/v2?url=http%3A%2F%2Fwww.wpbeginner.com%2Fwp-themes%2Fdefault-wordpress-generated-css-cheat-sheet-for-beginners%2F#
Adriane says
Thank you Pete!
wpbeginner says
@smashingmag Thank you for retweeting our article
really appreciate the love.
favstar50 says
@smashingmag Congrats on your 50★ tweet! http://t.co/r78Ao3Sm
bobHankin says
@photoassassin No I hadn’t. That’s sweet! Handy too!
eugenebicyclist says
Just learning to work with WP and this is really handy. Thank you.