Szukasz domyślnie generowanej przez WordPress ściągawki CSS?
WordPress automatycznie dodaje pewne klasy CSS do różnych elementów w większości motywów. Te domyślne klasy CSS mogą być używane do stylizacji tych elementów w twoim motywie WordPress.
W tym artykule pokażemy domyślny arkusz ściągawki CSS generowany przez WordPress. Porozmawiamy również o tym, jak łatwo znaleźć klasy CSS i jak dodać własne klasy CSS, gdy ich potrzebujesz.
Dlaczego warto poznać domyślny CSS generowany przez WordPress?
WordPress automatycznie generuje i dodaje domyślne klasy CSS do różnych elementów na twojej witrynie internetowej WordPress.
Twórcy motywów WordPress mogą następnie używać tych klas CSS do stylizowania wspólnych obszarów wszystkich witryn WordPress. Może to obejmować obszar treści, panele boczne, widżety, menu nawigacyjne i inne.
Znajomość tych klas CSS przydaje się, jeśli uczysz się tworzenia motywów WordPress lub po prostu próbujesz stworzyć motyw potomny dla twojej witryny internetowej.
Pomaga również szybko stylizować określone elementy w twoim motywie WordPress, dodając własny CSS bez konieczności tworzenia własnego motywu.
Uwaga: Nie musisz uczyć się CSS, aby zmienić style twojego motywu lub stworzyć własny konfigurator. Jeśli wolisz nie uczyć się kodowania, możesz użyć kreatora typu „przeciągnij i upuść”, takiego jak SeedProd. Więcej na ten temat powiemy w dalszej części artykułu.
Biorąc to pod uwagę, przyjrzyjmy się domyślnym klasom CSS generowanym przez WordPress.
Domyślne style klasy nadwozia
Tag <body> w HTML zawiera cały układ strony internetowej, co czyni go bardzo istotnym w każdym motywie WordPress.
WordPress dodaje kilka klas CSS do obszaru body, które projektanci motywów mogą wykorzystać do stylizacji kontenera body.
// 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) {}
Jak widać, klasy te obejmują szeroką gamę warunków, które możesz uwzględnić w swoich stylach CSS.
Na przykład, jeśli chcesz, aby strona kategorii „Aktualności” miała inny kolor tła, możesz dodać następujący konfigurator CSS.
.category-news {
background-color:#f7f7f7;
}
Potrzebujesz łatwego sposobu na dodawanie CSS i fragmentów kodu w WordPress? Wypróbuj darmową wtyczkę WPCode, aby zabezpieczyć swoje fragmenty kodu na przyszłość.
Domyślne klasy stylów wpisów
Podobnie jak w przypadku elementu body, WordPress dodaje dynamiczne klasy również do wpisów.
Elementem tym jest zazwyczaj tag <article> w twoim szablonie motywu. Może to być jednak dowolny inny tag w zależności od twojego motywu. Klasy CSS wpisów są wyświetlane w twoim motywie poprzez dodanie tagu szablonu post_class().
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
Poniżej znajduje się lista najpopularniejszych klas CSS generowanych przez funkcję post_class():
// 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) {}
Klasy wpisów umożliwiają stylizowanie wpisów i stron na blogu zgodnie z różnymi warunkami. Na przykład, wpisy na blogu należące do określonej kategorii można stylizować w różny sposób za pomocą następującego niestandardowego kodu CSS:
.category-news {
background-color:#EFEFEF;
}
Jeśli nie widzisz edytora CSS w twoim kokpicie WordPress, to skorzystaj z naszego poradnika jak poprawić brakujący konfigurator motywu WordPress.
Domyślne klasy menu nawigacji
WordPress dodaje również klasy CSS do twojego menu nawigacyjnego. Poniżej znajdują się domyślne klasy dodawane domyślnie do menu nawigacyjnych.
// 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{}
Twój motyw WordPress doda również klasę CSS do każdego położenia menu nawigacji.
Załóżmy, że twój motyw przypisuje klasę primary-menu do położenia menu w obszarze nagłówka, a następnie możesz kierować ją w swoim CSS za pomocą następujących klas CSS.
// 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 {}
Więcej szczegółów można znaleźć w naszym przewodniku na temat stylowania menu nawigacyjnych w WordPress.
Domyślne klasy widżetów WordPress
Widżety to łatwy sposób na wyświetlanie bloków niebędących treścią w twoim motywie WordPress. Zazwyczaj są one wyświetlane w dedykowanych obszarach gotowych na widżety lub panelach bocznych w twoim motywie WordPress.
WordPress dodaje następujące klasy do starszych widżetów.
.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 {}
Ponieważ jednak WordPress przechodzi na obszary widżetów oparte na blokach, możesz teraz dodawać różne bloki do twoich obszarów widżetów, a każdy z nich dynamicznie generuje klasy CSS.
W dalszej części artykułu pokażemy, jak znaleźć te klasy CSS.
Domyślne klasy formularzy komentarzy
Komentarze są centrum zaangażowania dla wielu witryn internetowych WordPress. Ich stylizacja pomaga zapewnić użytkownikom czystsze i bardziej angażujące wrażenia.
WordPress dodaje następujące domyślne klasy CSS, aby pomóc twórcom motywów w stylizacji obszaru komentarzy.
/*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
Więcej szczegółów można znaleźć w naszym przewodniku na temat stylowania komentarzy w WordPress.
Znajdowanie klas bloków WordPress
Edytor bloków WordPress dynamicznie generuje klasy CSS dla bloków.
Aby znaleźć te klasy CSS, musisz dodać ten konkretny blok do wpisu lub strony. Następnie należy kliknąć przycisk Podgląd, aby zobaczyć blok w działaniu.
W karcie podglądu przesuń kursor myszy do właśnie dodanego bloku i wybierz narzędzie Inspect, klikając prawym przyciskiem myszy.
W konsoli programisty zobaczysz kod HTML wygenerowany przez blok. Z tego miejsca można zobaczyć klasy CSS dodane przez blok.
Na powyższym zrzucie ekranu przyglądamy się klasom CSS bloku Galeria. Następnie możesz użyć tych klas CSS do stylizacji bloku galerii w twoim motywie WordPress.
Dodawanie własnych klas CSS w WordPressie
Domyślne klasy CSS WordPressa są dość wszechstronne. Jednak ich celem jest głównie zapewnienie twórcom motywów standardowych ram do tworzenia.
W przypadku twojej indywidualnej witryny internetowej może być konieczne dodanie własnego kodu CSS dla obszarów, w których nie można znaleźć domyślnej klasy CSS.
Podobnie, czasami możesz po prostu chcieć wprowadzić niewielką zmianę w konkretnym wpisie lub stronie bez stosowania jej w całym twoim motywie.
Na szczęście WordPress zapewnia kilka łatwych sposobów dodawania klas CSS w różnych obszarach.
Dodawanie własnych klas CSS do bloku w edytorze bloków
Jeśli chcesz szybko dodać własną klasę CSS do konkretnego wpisu lub strony, najłatwiej jest to zrobić za pomocą edytora bloków.
Wystarczy edytować wpis lub stronę, a następnie wybrać blok, w którym chcesz dodać własną klasę CSS. W ustawieniach bloku kliknij panel zaawansowany i dodaj nazwę twojej klasy CSS.
Nie zapomnij zapisać twoich zmian, klikając przycisk Aktualizuj.
Możesz teraz użyć tej klasy, aby dodać własny kod CSS, który będzie miał wpływ tylko na ten konkretny blok w tym konkretnym wpisie lub stronie.
W menu nawigacji WordPress
Możesz również dodać własny CSS do twoich elementów menu nawigacyjnego WordPress. Powiedzmy, że chcesz przekonwertować element menu na przycisk, wtedy ta metoda jest przydatna.
Wystarczy przejść do strony Wygląd ” Menu i kliknąć przycisk Opcje ekranu w prawym górnym rogu ekranu.
W tym miejscu należy zaznaczyć pole obok opcji klas CSS.
Następnie musisz przewinąć w dół i kliknąć, aby rozwinąć pozycję menu, w której chcesz dodać własną klasę CSS.
Zauważysz pole oznaczone klasami CSS. Dodaj tutaj swoją własną klasę CSS.
Nie zapomnij kliknąć przycisku Zapisz menu, aby zapisać twoje zmiany.
Możesz teraz użyć tej własnej klasy CSS, aby nadać inny styl tej konkretnej pozycji menu.
Bonus: Łatwe projektowanie motywu WordPress bez pisania kodu CSS
Nauka stylizacji twojego motywu WordPress za pomocą własnego CSS jest bardzo przydatną umiejętnością. Jednak niektórzy użytkownicy mogą po prostu chcieć rozwiązania do projektowania swojego motywu WordPress bez pisania kodu CSS.
W tym celu potrzebny będzie SeedProd. Jest to najlepsze na rynku narzędzie do tworzenia stron WordPress, które umożliwia łatwe tworzenie własnych motywów bez pisania jakiegokolwiek kodu.
SeedProd zawiera gotowe do użycia motywy, które można wykorzystać jako punkt wyjścia.
Można również utworzyć motyw od podstaw, ręcznie tworząc szablony.
Następnie możesz edytować swój własny motyw za pomocą intuicyjnego interfejsu tworzenia witryn typu „przeciągnij i upuść”.
Po prostu upuść bloki do twojego projektu, aby stworzyć własny układ.
Możesz także łatwo zmienić dowolny element za pomocą prostego kliknięcia. Możesz użyć twoich własnych kolorów, tła, kroju pisma i nie tylko.
Aby uzyskać więcej informacji, zobacz nasz poradnik krok po kroku, jak łatwo stworzyć własny motyw WordPress bez pisania jakiegokolwiek kodu.
Mamy nadzieję, że ten artykuł pomógł Ci znaleźć domyślny arkusz ściągawki CSS generowany przez WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat poprawek najczęstszych błędów WordPressa lub zobaczyć nasze eksperckie porównanie najlepszego oprogramowania do czatu na żywo dla małych firm.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
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
Administrator
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
Administrator
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
Administrator
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.
Administrator
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.