WordPress dodaje własne klasy CSS do różnych elementów w większości motywów. Te domyślne klasy pomagają automatycznie stylizować różne części Twojej witryny.
Znajomość tych domyślnych klas CSS może być bardzo przydatna. Ułatwiają one dostosowanie wyglądu Twojej witryny bez zaczynania od zera.
Na przykład, gdy zaczęliśmy używać CSS na naszych stronach, okazało się, że znacznie łatwiej jest stylizować treść naszego bloga, aby się wyróżniała.
W tym artykule znajdziesz arkusz ściąg z domyślnych klas CSS generowanych przez WordPress. Pokażemy Ci również, jak znaleźć więcej klas CSS i dodać własne, gdy ich potrzebujesz.
Dlaczego warto dowiedzieć się o domyślnych klasach CSS generowanych przez WordPress?
WordPress automatycznie generuje i dodaje domyślne klasy CSS do różnych elementów na Twojej witrynie WordPress.
Twórcy motywów mogą bawić się tymi domyślnymi klasami CSS, aby stylizować typowe obszary witryn WordPress, takie jak obszary treści, paski boczne, widżety, menu nawigacyjne i inne.
Wiedząc o tych klasach CSS, przyda się, jeśli uczysz się tworzenia motywów WordPress lub po prostu próbujesz stworzyć motyw potomny dla swojej własnej strony internetowej.
Pomaga również szybko stylizować określone elementy w Twoim motywie WordPress przez dodawanie niestandardowego CSS bez tworzenia własnego motywu.
Uwaga: Nie musisz uczyć się CSS, aby zmieniać style swojego motywu lub tworzyć niestandardowy motyw. Jeśli wolisz nie uczyć się kodowania, możesz użyć kreatora typu „przeciągnij i upuść”, takiego jak SeedProd. Porozmawiamy o tym więcej później w artykule.
W poniższych sekcjach udostępnimy domyślne klasy CSS generowane przez WordPress. Oto szybki przegląd wszystkich rzeczy, które omówimy w tym artykule:
- Domyślne style klas ciała
- Domyślne klasy stylu wpisu
- Domyślne klasy menu nawigacyjnego
- Domyślne klasy widżetów WordPress
- Domyślne klasy formularza komentarzy
- Znajdowanie klas bloków WordPress
- Dodawanie własnych niestandardowych klas CSS w WordPress
- Bonus: Łatwo zaprojektuj motyw WordPress bez pisania kodu CSS
Bez dalszych ceregieli, zanurzmy się i dowiedzmy, jak sprawić, by Twoja witryna WordPress wyglądała dokładnie tak, jak chcesz!
Domyślne style klas ciała
W HTML tag <body> zawiera strukturę układu każdej strony internetowej, co czyni go bardzo ważnym w projektowaniu motywów WordPress.
WordPress dodaje kilka klas CSS do tagu body. Projektanci motywów mogą efektywnie wykorzystywać te klasy 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ą szeroki zakres warunków, które można określić w stylach CSS.
Na przykład, jeśli chcesz, aby strona kategorii „Wiadomości” miała inny kolor tła, możesz dodać następujący niestandardowy CSS.
.category-news {
background-color:#f7f7f7;
}
Wskazówka eksperta: Potrzebujesz łatwego sposobu na dodawanie fragmentów kodu CSS i innych w WordPress? Wypróbuj darmowy plugin WPCode, aby zabezpieczyć swoje fragmenty kodu na przyszłość.
Domyślne klasy stylu wpisu
Podobnie jak w przypadku elementu body, WordPress dodaje dynamiczne klasy również do elementów postów.
Ten element to zazwyczaj tag <article> w szablonie Twojego motywu. Może to być jednak dowolny inny tag, w zależności od Twojego motywu WordPress. Klasy CSS dla postów są wyświetlane w Twoim motywie poprzez dodanie znacznika szablonu post_class().
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
Oto lista niektórych z najczęściej używanych 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 postów pozwalają na stylowanie postów i stron blogowych pasujących do różnych warunków. Na przykład, możesz inaczej stylować posty blogowe znajdujące się w określonej kategorii, używając następującego niestandardowego CSS:
.category-news {
background-color:#EFEFEF;
}
Jeśli nie widzisz edytora CSS w swoim panelu WordPress, postępuj zgodnie z naszym samouczkiem na temat jak naprawić brakujący dostosowywacz motywów WordPress.
Domyślne klasy menu nawigacyjnego
WordPress dodaje również klasy CSS do menu nawigacyjnych. Poniżej znajdują się domyślne klasy dodawane 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żdej lokalizacji menu nawigacyjnego.
Załóżmy, że Twój motyw przypisuje klasę menu głównego do lokalizacji menu w obszarze nagłówka, a następnie możesz ją docelowo wybrać w swoim CSS, używając 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 {}
Aby uzyskać więcej szczegółów, zapoznaj się z naszym przewodnikiem na temat stylizowania menu nawigacyjnych w WordPress.
Domyślne klasy widżetów WordPress
Widgety to łatwy sposób na wyświetlanie bloków niebędących treścią w motywie WordPress. Są one zazwyczaj wyświetlane w dedykowanych obszarach gotowych na widgety lub paskach bocznych.
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 {}
Jednak wraz z przejściem WordPressa na obszary widżetów oparte na blokach, możesz teraz dodawać różne bloki do swoich obszarów widżetów, a każdy z nich dynamicznie generuje klasy CSS.
Pokażemy Ci, jak znaleźć te klasy CSS później w tym artykule.
Domyślne klasy formularza komentarzy
Komentarze są centrum interakcji dla wielu witryn WordPress. Stylizowanie ich pomaga zapewnić użytkownikom czystsze i bardziej angażujące doświadczenie.
WordPress dodaje następujące domyślne klasy CSS, aby pomóc programistom motywów w stylizacji obszarów 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
Aby uzyskać więcej szczegółów, zapoznaj się z naszym przewodnikiem na temat jak stylizować komentarze w WordPress.
Znajdowanie klas bloków WordPress
Edytor bloków WordPress dynamicznie generuje klasy CSS dla bloków.
Aby znaleźć te klasy CSS, najpierw musisz dodać określony blok do wpisu lub strony. Następnie kliknij przycisk „Podgląd”, aby zobaczyć blok w akcji.
W zakładce podglądu najedź kursorem na właśnie dodany blok i kliknij prawym przyciskiem myszy, aby wybrać narzędzie Inspekcja.
W konsoli deweloperskiej zobaczysz kod HTML wygenerowany przez blok i dodane przez niego klasy CSS.
Na powyższym zrzucie ekranu widzimy klasy CSS bloku Galerii. Następnie możesz użyć tych klas CSS do stylizacji bloku galerii w swoim motywie WordPress.
Dodawanie własnych niestandardowych klas CSS w WordPress
Obecnie domyślne klasy CSS WordPressa są dość obszerne. Jednak ich celem jest głównie zapewnienie twórcom motywów standardowych ram do budowania.
W przypadku Twojej witryny może być konieczne dodanie niestandardowego CSS w obszarach, gdzie domyślne klasy CSS nie są dostępne.
Podobnie możesz chcieć wprowadzić drobne zmiany w konkretnym poście lub stronie, nie wpływając na cały motyw.
Na szczęście WordPress oferuje kilka prostych sposobów na dodawanie klas CSS do różnych obszarów. Oto kilka metod:
Dodaj niestandardowe klasy CSS do bloku w edytorze bloków
Jeśli chcesz szybko dodać niestandardową klasę CSS do konkretnego wpisu lub strony, najłatwiejszym sposobem jest użycie edytora bloków.
Po prostu edytuj wpis lub stronę i wybierz blok, do którego chcesz dodać niestandardową klasę CSS. W ustawieniach bloku kliknij panel „Zaawansowane” i dodaj nazwę swojej klasy CSS.
Nie zapomnij zapisać zmian, klikając przycisk „Zaktualizuj”.
Możesz teraz użyć tej klasy, aby dodać niestandardowy kod CSS, który wpłynie tylko na ten konkretny blok w tym konkretnym wpisie lub stronie.
W menu nawigacyjnym WordPress
Możesz również dodać niestandardowy CSS do elementów menu nawigacyjnego WordPress. Załóżmy, że chcesz przekształcić element menu w przycisk, wtedy ta metoda przyda się.
Po prostu przejdź do strony Wygląd » Menu i kliknij przycisk „Opcje ekranu” w prawym górnym rogu ekranu.
Stąd będziesz chciał zaznaczyć pole obok opcji „Klasy CSS”.
Następnie przewiń w dół i rozwiń element menu, do którego chcesz dodać niestandardową klasę CSS.
Zauważysz wtedy pole oznaczone jako Klasy CSS. Dodaj tutaj swoją niestandardową klasę CSS.
Nie zapomnij kliknąć przycisku „Zapisz menu”, aby zachować wprowadzone zmiany.
Teraz możesz użyć tej niestandardowej klasy CSS, aby inaczej stylizować ten konkretny element menu.
Bonus: Łatwo zaprojektuj motyw WordPress bez pisania kodu CSS
Nauka stylowania motywu WordPress za pomocą niestandardowego 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.
Do tego będziesz potrzebować SeedProd. Jest to najlepsze narzędzie do tworzenia stron WordPress na rynku, które pozwala łatwo tworzyć niestandardowe motywy bez pisania kodu.
SeedProd jest wyposażony w gotowe do użycia motywy, których możesz użyć jako punktu wyjścia.
Jeśli chcesz, możesz również stworzyć motyw od podstaw.
Po wybraniu szablonu jesteś gotowy do edycji swojego niestandardowego motywu za pomocą intuicyjnego edytora typu „przeciągnij i upuść”.
Po prostu przeciągaj bloki do swojego projektu, aby tworzyć własne układy.
Możesz również łatwo zmienić dowolny element za pomocą prostego kliknięcia. Ponadto możesz używać własnych kolorów, tła, czcionek i nie tylko.
Aby uzyskać więcej szczegółów, zapoznaj się z naszym szczegółowym samouczkiem na temat tego, jak łatwo stworzyć niestandardowy motyw WordPress bez pisania kodu.
Mamy nadzieję, że ten artykuł pomógł Ci znaleźć domyślny arkusz stylów CSS generowany przez WordPress. Następnie możesz również zapoznać się z naszym przewodnikiem na temat jak minifikować pliki CSS lub JavaScript w WordPress oraz jak usunąć nieużywany CSS w WordPress.
Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.
Gwyneth Llewelyn
Naprawdę, naprawdę przydatne odniesienie – zwłaszcza gdy chcesz dodać jakieś 'dodatkowe' style, a najłatwiejszym sposobem na to jest po prostu użycie jednego z wbudowanych stylów (ponieważ wszystkie bloki pozwalają na dodawanie dodatkowych klas – ale nie wszystkie motywy pozwalają na dodawanie dodatkowego CSS, chyba że stworzysz własny motyw potomny itp.)
Zastanawiam się, czy wśród 'nowszych' klas CSS Automattic udostępnił coś do stylizacji separatorów. Uwielbiam przypisy i używam ich *bardzo dużo* (nawet zanim stały się 'standardem' w WP, w czasach wersji 6.3!), ale nie podoba mi się ich minimalistyczny styl. WordPress w pełni przyznaje, że jest to 'praca w toku' i niewiele więcej można zmienić niż niektóre atrybuty czcionki: https://wordpress.org/documentation/article/footnotes-block/
Dlatego — CSS z pomocą! Potrzebuję tylko podstawowej klasy, która daje Ci
width=30%. Miałem nadzieję, że dostanę coś takiego z Twojej obszernej listy, ale obawiam się, że nie — przynajmniej nie do jesieni 2025.Dziękuję w każdym razie. Twoja lista jest mimo wszystko całkiem przydatna!
Moinuddin Waheed
Bardzo przydatna ściągawka dla tych, którzy mają pewne doświadczenie jako programiści i praktyczną znajomość CSS.
Będzie to bardzo pomocne przy wprowadzaniu zmian w wyglądzie wizualnym i uczynieniu go pięknym.
Dziękuję za stworzenie tej ściągawki.
Mrteesurez
Dobra robota, stworzyłeś przydatne arkusze ściągawki CSS. Ułatwią one właściwe radzenie sobie ze stylami po ich opanowaniu. Dziękuję za poświęcony czas na połączenie tych arkuszy ściągawki CSS dla nas.
Rodrigo Vieira Eufrasio da Silva
Należy pogratulować Wam tego wspaniałego materiału. Chciałbym tylko zasugerować aktualizację tego artykułu i poinformowanie nas, które klasy są generowane przez Guttenberg i najnowszą wersję WordPress, ponieważ ten post jest nieaktualny. Ale bardzo mi pomógł.
Uściski dla Was wszystkich.
Wsparcie WPBeginner
Thank you for letting us know, we’ll be sure to take a look
Admin
Alison Westall
Czy istnieje klasa CSS do zmiany dopełnienia elementu? Dziękuję!
Wsparcie WPBeginner
Gdy znajdziesz obiekt, do którego chcesz dodać dopełnienie, użyjesz:
padding, padding-top, padding-right, padding-bottom, padding-left
w zależności od tego, jaki rodzaj dopełnienia chcesz dodać
Admin
Matt Cauley
Dzięki za informacje. Zakładkowałem stronę, mimo że ma kilka lat!
Wsparcie WPBeginner
Thank you, while the article is older, it should still be useful
Admin
MS Shohan
Świetna robota, bracie. Dzięki za stworzenie listy wszystkich domyślnych klas WP
Hannah Steele
Cześć, mam naprawdę problem z formatowaniem automatycznie generowanej strony wydarzeń.
Czy możesz mi pomóc?
Arunjith RS
Naprawdę przydatne.. Dziękuję.
Shai
Czy możesz (jeśli nie zostało to już zrobione gdzie indziej) wymienić klasy panelu administracyjnego i widżetów administracyjnych.
Wygląda na to, że panel administracyjny używa ładowarki (wp-admin/load-styles.php) do dołączania stylów CSS, ale te style CSS są skompresowane i trudne do odczytania. Miło byłoby zobaczyć listę używanych elementów. na przykład, jeśli chcesz stworzyć własny widżet z zakładkami; Przejrzałem CSS i widzę dużą listę klas związanych z .nav-tab.
.
Ari Susanto
i sam „entry-content”!
Ari Susanto
Chcę dodać ten:
"status-publish"
luroch
Pytanie: tworząc motyw bootstrap z underscores, czy powinienem zachować klasy i identyfikatory pochodzące z tego frameworka, dodając tylko te z Bootstrap, czy mogę używać tylko klas i identyfikatorów Bootstrap?
Ari Susanto
Jak je znalazłeś? Czy jest jakiś zautomatyzowany sposób, na przykład za pomocą funkcji php, może?
Stephen Clark
Fantastyczny post i bardzo pouczający. Jestem ciekaw, czy mógłbyś uzupełnić ten post o podobne szczegóły dotyczące stopki WP. Mam problemy ze stylizacją i formatowaniem stopki w używanym motywie, a także w innych witrynach, które zbudowałem.
Pomocne byłoby również posiadanie pliku arkusza stylów CSS do pobrania, zawierającego wszystkie te style. Dziękuję!
Kevin Pryce
Kiedy sprawdzam element tylko mojego motywu WordPress, nie widzę tych stylów, zwłaszcza tych zastosowanych do klasy body. Czy musisz umieścić je w szablonie?
Joel Bladt
Miła kompilacja wszystkich standardowych klas WordPress. Czy to były naprawdę wszystkie klasy dodawane automatycznie przez WordPress? Jeśli klasy są przestarzałe i zniknęły, lub pojawiły się nowe, z niecierpliwością czekam na aktualizację listy.
– niemiecki bloger i przetłumaczono za pomocą Tłumacza Google.
Wsparcie WPBeginner
Jest aktualny według naszej najlepszej wiedzy, jeśli znajdziesz jakąkolwiek przestarzałą klasę, daj nam znać.
Admin
loreto
time saver! now let me mess those styles
Amba Junior
Bardzo przydatny tutorial. Podobnie jak przewodnik po hakach wizualnych Genesis, ten dobrze podsumowuje Genesis
Malcolm Owen
Czy wiesz, co byłoby przydatne? Wersja tego przewodnika do wydrukowania w formacie PDF...
Pete
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
Dziękuję, Pete!
wpbeginner
@smashingmag Thank you for retweeting our article
really appreciate the love.
favstar50
@smashingmag Gratulacje z okazji Twojego 50★ tweeta! http://t.co/r78Ao3Sm
bobHankin
@photoassassin Nie, nie miałem. To jest super! Przydatne też!
eugenebicyclist
Dopiero uczę się pracować z WP i to jest naprawdę przydatne. Dziękuję.