Standard-WordPress-generiertes CSS-Spickzettel für Anfänger

Haben Sie sich jemals gefragt, wie Sie verschiedene Elemente des WordPress-Designs gestalten können? Nun, es ist von Thema zu Thema unterschiedlich, aber es gibt bestimmte CSS-Klassen und IDs, die von WordPress generiert werden. Wenn Sie jemand sind, der versucht, ein Design zu gestalten, oder ein Design für die Veröffentlichung in der Öffentlichkeit erstellen möchte, handelt es sich hierbei um einige Stilelemente, die Sie möglicherweise in Ihr Design einfügen möchten.

Das Ziel dieses Cheat Sheets ist es, Anfängern zu helfen, die sich für das WordPress-Design interessieren. Wenn Sie ein Anfänger sind und sich nicht mit den Codes beschäftigen möchten, empfehlen wir Ihnen, einen Themenrahmen wie Headway zu erstellen, der das Ganze mit Drag & Drop erledigt. Für den Rest von Ihnen werden wir die wichtigsten Standard-WordPress-Stile nacheinander durchgehen.

Videoanleitung

Wenn Ihnen das Video nicht gefällt oder Sie weitere Anweisungen benötigen, lesen Sie weiter.

Standard-Body-Class-Stile

Eines der großen Dinge an WordPress ist die Anpassbarkeit. Sie können mit CSS sehr spezifische Aspekte Ihrer Website ansprechen. Dies geschieht unter anderem durch das Hinzufügen benutzerdefinierter Klassen zu verschiedenen Elementen Ihres Blogs. Das wichtigste davon ist das Tag. Hier einige Beispiele allgemeiner Klassen, die WordPress diesem Element hinzufügen könnte:

 .rtl  .home  .blog  .archive  .date  .search  .paged  .attachment  .error404  .einzige postid- (id)  ​​.attachmentid- (id)  .attachment- (Mime-Typ)  .author  .author- (benutzername)  .category  .category- (slug)  .tag  .tag- (slug)  .page -parent  .page-child Parent-pageid- (id)  ​​.page-template page-template- (Name der Vorlagendatei)  .search-results  .search-no-results  .logged-in  .paged- (Seitennummer)  .single-paged- (Seitennummer)  .page-paged- (Seitennummer)  .category-paged- (Seitennummer)  .tag-paged- ( Seitennummer)  .date-paged- (Seitennummer)  .author-paged- (Seitennummer)  .search-paged- (Seitennummer)  

Wenn Sie beispielsweise Ihre Suchergebnisseite auf eine bestimmte Art und Weise formatieren möchten, können Sie die Klasse "Suchergebnisse" verwenden, um Ihr Styling hinzuzufügen. WordPress fügt diese Klasse nur dann dem body-Tag hinzu, wenn die Seite mit den Suchergebnissen aktiv ist, sodass keine anderen Seiten betroffen sind.

Standard-Post-Styles

Wie beim Body-Element fügt WordPress den Post-Elementen auch dynamische Klassen hinzu. Hier ist eine Liste der beliebtesten:

 .post-id  .post  .page  .attachment  .sticky  .hentry  .category-misc  .category-example  .tag-news  .tag-wordpress . Tag-Markup  

Wenn Sie unseren Artikel Was, Warum und Wie zu Postformaten in WordPress 3.1 gelesen haben, werden Sie über Postformate informiert und wie Sie Ihre Beiträge je nach dem von Ihnen gewählten Format unterschiedlich anzeigen können. Wieder einmal fügt WordPress Ihrem Beitrag mithilfe der Funktion post_class () dynamische Klassen hinzu, mit denen Sie für jedes Format eigene Stile erstellen können. Die Funktion post_class () fügt eine Klasse in der Form „.format-foo“ hinzu, wobei foo das von Ihnen gewählte Post-Format ist. Galerie, Bild usw.

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

Standardmenüstile

In unserem Artikel mit dem Thema zum Gestalten von WordPress-Navigationsmenüs besprechen wir, wie Sie Ihre eigene Klasse zu Ihrem Menü hinzufügen können. Wir gehen davon aus, dass Sie es gelesen haben und dass Sie Ihrem Nav-Menü seinen eigenen Klassennamen "Hauptmenü" gegeben haben..

 #header .main-menu  // Containerklasse #header .main-menu ul  // Containerklasse erste ungeordnete Liste #header .main-menu ul ul  // ungeordnete Liste innerhalb einer ungeordneten Liste #header .main -menu li  // jedes Navigationselement #header .main-menu li a  // jedes Navigationselement Anker #header .main-menu li ul  // ungeordnete Liste, wenn Dropdown-Elemente #header .main vorhanden sind -menu li li  // jedes Dropdown-Navigationselement #header .main-menu li li a  // Jeder Navigationselementeinstiegsanker .current_page_item  // Klasse für aktuelle Seite .current-cat  // Klasse für aktuelle Kategorie .current-menu-item  // Klasse für einen beliebigen anderen Menüpunkt .menu-item-type-taxonomy  // Klasse für eine Kategorie .menu-item-type-post_type  // Klasse for Pages .menu-item-type-custom  // Klasse für jedes benutzerdefinierte Element, das Sie .menu-item-home  // Class für den Home-Link hinzugefügt haben 

Beachten Sie, dass jedes Mal, wenn Sie ein Menü in WordPress erstellen, dieses automatisch in ein div eingeschlossen wird. Dieses div hat nur dann einen Klassennamen, wenn Sie diesen angeben (wir wählen „Hauptmenü“). Von dort aus gestalten Sie einfach die verschiedenen Listenelemente.

Standardmäßige WISIWYG-Editorstile

Der WISWYG-Editor ist einer der beliebtesten und am häufigsten verwendeten Aspekte von WordPress. Aus diesem Grund ist es eine gute Idee, Stile für alles bereit zu haben, das der Benutzer seinem Blog hinzufügen könnte, beispielsweise Bilder oder Block-Quotes. Das folgende CSS zeigt Ihnen, welche Klassen WordPress diesen Elementen automatisch hinzufügt:

 .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  

Sie können sehen, dass es mehrere Klassen gibt, die sich nur auf Bilder beziehen. Wenn der Benutzer beispielsweise beschließt, ein nach links ausgerichtetes Bild einzuschließen, fügt WordPress die Klasse „alignleft“ hinzu.

Standardmäßige WordPress Widget-Stile

Widgets sind ein weiterer beliebter Aspekt von WordPress. Als Entwickler haben Sie die Kontrolle darüber, welche Widgets angezeigt werden, sodass Sie normalerweise genau wissen, welche Stile hinzugefügt werden sollen. WordPress enthält jedoch eine Reihe von Standard-Widgets. Wenn Sie sie nicht entfernen, ist es ratsam, ihren Klassen Stil hinzuzufügen.

 .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: nach  .widget_links li: vor  .widget_tag_cloud  .widget_tag_cloud a  .widget_tag_cloud a: nach   .widget_tag_cloud a: vor  .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.childr de  .widget_categories a  .widget_categories select  .widget_categories select # cat  .widget_categories select.postform  .widget_categories-Option  .widget_categories .level-0  .widget_categories .leget-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  .widget_recent_entries ul li a  .textwidget  .widget_text  .textwidget p  

Wenn Sie Widgets gestalten, werden Sie wahrscheinlich immer wieder dieselben Stile verwenden. Aus diesem Grund ist es eine gute Idee, Klassen auf Ihrem Stylesheet mit Kommas zu kombinieren. Sie könnten beispielsweise .widget_pages ul und .widget_archive ul miteinander kombinieren, indem Sie Folgendes tun:

 .widget_pages ul, .widget_archive ul  

Standardformate für Kommentarformulare

So hässlich Stilkommentare sind, dass WordPress mit seinen Standardklassen viel einfacher wird. Wenn Sie sich nicht mit Thread-Kommentaren befassen, können Sie viele davon ignorieren.

 / * Kommentarausgabe * / .commentlist .reply  .commentlist .reply a  .commentlist .alt  .commentlist .odd  .commentlist .even  .commentlist .thread-alt  .commentlist .thread- ungerade  .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  .commentlistad .commentmetadata a  .commentlist .parent  .commentlist .comment  .commentlist .children  .commentlist .pingback . Kommentarliste .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  .co mmentlist 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  / * Kommentarformular * / #respond  # reply-title  # cancel-comment- Reply-Link  #commentform  #author  #email  #url  #comment #submit .comment-notes  .required  .com-Formularautor  .com-Formularformular-E-Mail   .comment-form-url  .comment-form-comment  .form-allowed-tags  .form-submit 

Da dies nur ein Cheatsheet ist, gibt es noch viele andere Klassen und IDs, die wir möglicherweise nicht behandelt haben. Wenn Sie das Gefühl haben, dass etwas anderes wichtig ist und es zu dieser Liste gehört, können Sie unten einen Kommentar hinterlassen.