Standardmäßig von WordPress generierte CSS-Spickzettel für Einsteiger

Sind Sie auf der Suche nach einem standardmäßig von WordPress generierten CSS-Spickzettel?

WordPress fügt automatisch einige CSS-Klassen zu verschiedenen Elementen in den meisten Themes hinzu. Diese Standard-CSS-Klassen können verwendet werden, um diese Elemente in Ihrem WordPress-Theme zu gestalten.

In diesem Artikel zeigen wir Ihnen den standardmäßig von WordPress generierten CSS-Spickzettel und erläutern, wie Sie CSS-Klassen leicht finden und bei Bedarf eigene CSS-Klassen hinzufügen können.

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 verwenden, um allgemeine Bereiche aller WordPress-Websites zu gestalten, z. B. den Inhaltsbereich, Seitenleisten, Widgets, Navigationsmenüs und vieles mehr.

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 die Stile Ihres Themes zu ändern oder ein benutzerdefiniertes Theme zu erstellen. Wenn Sie es vorziehen, nicht programmieren zu lernen, dann können Sie einen Drag-and-Drop-Builder wie SeedProd verwenden. Wir werden später in diesem Artikel mehr darüber erzählen.

Werfen wir also einen Blick auf die standardmäßig von WordPress generierten CSS-Klassen.

Standard Body Class Styles

Der Body-Tag in HTML enthält die gesamte Layout-Struktur einer Webseite, was sie 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.

 // Hinzugefügt, wenn eine Website eine Rechts-nach-Links-Sprache verwendet, z. B. Arabisch, Hebräisch .rtl {} // Hinzugefügt, wenn eine Homepage angezeigt wird .home {} // Hinzugefügt, wenn eine Blog-Seite angezeigt wird .blog {} // Hinzugefügt, wenn eine Archiv-Seite angezeigt wird .archive {} // Hinzugefügt, wenn ein datumsbasiertes Archiv angezeigt wird .date {} // Hinzugefügt auf Such-Seiten .search {} // Hinzugefügt, wenn Paginierung aktiviert ist .paged {} // Hinzugefügtwenn eine Seite mit Anhängen angezeigt wird .attachment {} // Hinzugefügt, wenn eine 404-Fehlerseite angezeigt wird .error404 {} // Hinzugefügt, wenn ein einzelner Beitrag angezeigt wird, der die Beitrags-ID enthält .single postid-(id) {} // Hinzugefügt, wenn ein einzelner Anhang angezeigt wird, der die Anhangs-ID enthält .attachmentid-(id) {} // Hinzugefügt, wenn ein einzelner Anhang angezeigt wird, der den Anhang-Mime-Typ enthält .attachment-(mime-type) {} // Hinzugefügt, wenneine Autorenseite angezeigt wird .author {} // Hinzugefügt, wenn eine Autorenseite angezeigt wird. Enthält den Namen des Autors. .author-(user_nicename) {} // Hinzugefügt, wenn eine Kategorieseite angezeigt wird .category {} // Hinzugefügt, wenn eine Kategorieseite angezeigt wird. Enthält den Slug der Kategorie. .category-(slug) {} // Hinzugefügt, wenn eine Tagseite angezeigt wird. .tag {} // Hinzugefügt, wenn eine Tagseite angezeigt wird. Enthält den Slug des Tags. .tag-(slug) {} //Wird hinzugefügt, wenn eine übergeordnete Seite angezeigt wird. .page-parent {} // Wird hinzugefügt, wenn eine untergeordnete Seite angezeigt wird. Enthält die ID der übergeordneten Seite. .page-child parent-pageid-(id) {} // Wird hinzugefügt, wenn eine Seite mit einer Seitenvorlage angezeigt wird. Enthält den Dateinamen der Seitenvorlage. .page-template page-template-(template file name) {} // Wird hinzugefügt, wenn Suchergebnisse angezeigt werden. .search-results {} // Wird hinzugefügt, wenn die Suche keine Ergebnisse liefert..search-no-results {} // Wird hinzugefügt, wenn ein angemeldeter Benutzer erkannt wird. .logged-in {} // Wird hinzugefügt, wenn eine paginierte Seite angezeigt wird. Beinhaltet die Seitenzahl. .paged-(Seitenzahl) {} // Wird hinzugefügt, wenn ein paginierter Einzelartikel angezeigt wird. Beinhaltet die Seitenzahl. .single-paged-(Seitenzahl) {} // Wird hinzugefügt, wenn ein paginierter Seitentyp angezeigt wird. Beinhaltet die Seitenzahl. .page-paged-(Seitenzahl) {} // Wird hinzugefügt, wenn ein paginierterKategorie-Seite angezeigt wird. Beinhaltet die Seitenzahl. .category-paged-(page number) {} // Hinzugefügt, wenn eine Tag-Seite angezeigt wird. Beinhaltet die Seitenzahl. .tag-paged-(page number) {} // Hinzugefügt, wenn eine datumsbasierte Archiv-Seite angezeigt wird. Beinhaltet die Seitenzahl. .date-paged-(page number) {} // Hinzugefügt, wenn eine Autor-Seite angezeigt wird. Beinhaltet die Seitenzahl. .author-paged-(page number) {} // Hinzugefügtwenn eine Suchseite angezeigt wird, die die Seitennummer enthält. .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; } 

Wenn Sie eine einfache Möglichkeit suchen, CSS- und Codeschnipsel in WordPress hinzuzufügen, sollten Sie das kostenlose WPCode-Plugin ausprobieren, um Ihre Codeschnipsel 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 das 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 angezeigt, indem Sie das post_class() Vorlage-Tag.

Hier ist eine Liste der gängigsten CSS-Klassen, die von der Funktion post_class() erzeugt werden:

 // Fügt eine Klasse mit ID für einzelne Artikel hinzu. .post-(ID) {} // Generische Beitragsklasse für einzelne Blogbeiträge. .post {} // Generische Seitenklasse für einzelne Seiten. .page {} // Generische Anhangsklasse für Anhangsseiten. .attachment {} // Fügt eine Beitragstypklasse hinzu, z. B. type-post .type(post-type){} // Fügt eine Klasse für das Beitragsformat hinzu, wenn das Thema Beitragsformate unterstützt. z. B. format-standard .format-(post-format){} // Hinzugefügt, wenn ein Artikel ein Bild hat .has-post-thumbnail{} // Hinzugefügt, wenn ein Sticky-Post angezeigt wird .sticky {} // Generische Klasse zur Anzeige eines Eintrags .hentry {} // Klassen mit Kategorien, die einem Beitrag zugeordnet sind. z.B. category-news category-movies .category-(slug) {} // Klassen mit Tags, die einem Beitrag zugeordnet sind. z.B. tag-photofriday tag-tgif .tag-(slug) {} 

Mit den Beitragsklassen können Sie Blogeinträge und Seiten, die unterschiedlichen Bedingungen entsprechen, anders gestalten. So können Sie beispielsweise Blogeinträ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.

 // Klasse für aktuelle Seite .current_page_item{} // Klasse für aktuelle Kategorie .current-cat{} // Klasse für beliebige andere aktuelle Menüpunkte .current-menu-item{} // Klasse für Taxonomien .menu-item-type-(taxonomy){} // Klasse zur Unterscheidung von Beitragstypen .menu-item-type-(post_type){} // Klasse für beliebige benutzerdefinierte Elemente, die Sie hinzugefügt haben .menu-item-type-custom{} // Klasse für den 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.

 // Containerklasse #header .primary-menu{} // Containerklasse erste ungeordnete Liste #header .primary-menu ul {} // ungeordnete Liste innerhalb einer ungeordneten Liste #header .primary-menu ul ul {} // jedes Navigationselement #header .primary-menu li {} // jedes Navigationselement Anker #header .primary-menu li a {} // ungeordnete Liste, wenn es Dropdown-Elemente gibt #header .primary-menu li ul {} // jedes DropdownNavigationselement #header .primary-menu li li {} // jedes nach unten gezogene Navigationselement Anker #header .primary-menu 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-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#heute {} #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. Wenn Sie sie gestalten, 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.

 /*Kommentarausgabe*/ .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 .vcardspan.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 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.childrenli.comment-author-admin {} #cancel-comment-reply {} #cancel-comment-reply a {} /*Kommentarformular */ #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 jeweiligen Block zu einem Beitrag oder einer Seite hinzufügen und dann 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 generierten HTML-Code und die vom Block hinzugefügten CSS-Klassen.

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, dienen aber hauptsächlich dazu, Theme-Entwicklern ein standardisiertes Gerüst zur Verfügung zu stellen, mit dem sie arbeiten 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 den Blockeinstellungen auf das erweiterte Panel 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. Nehmen wir an, Sie möchten ein Menüelement in eine Schaltfläche umwandeln, dann ist diese Methode sehr nützlich.

Gehen Sie einfach zum Erscheinungsbild " Menüs Seite 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 bemerken. Fügen Sie hier Ihre benutzerdefinierte 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

Wenn Sie lernen, Ihr WordPress-Theme mit benutzerdefiniertem CSS zu gestalten, ist das eine sehr nützliche Fähigkeit. Manche Benutzer möchten jedoch einfach eine Lösung, um ihr WordPress-Theme zu gestalten, ohne jemals CSS-Code zu schreiben.

Dazu benötigen Sie SeedProd, 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 und Ihre eigenen Farben, Hintergründe, Schriftarten und vieles 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 möchten Sie auch unseren Leitfaden zur Behebung der häufigsten WordPress-Fehler oder unseren Expertenvergleich der besten Live-Chat-Software für kleine Unternehmen lesen.

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.