Jeśli aspirujesz do bycia projektantem motywów WordPress, opanowanie CSS jest kluczem do odblokowania większej kontroli, personalizacji i wydajności w Twoim przepływie pracy.
Na szczęście WordPress automatycznie dodaje klasy CSS, które możesz wykorzystać w swoich motywach. Wiele z tych klas CSS jest automatycznie dodawanych do sekcji <body> każdej strony w witrynie WordPress.
W tym artykule wyjaśnimy klasę body WordPress. Podzielimy się również wskazówkami i trikami dotyczącymi korzystania z klas body WordPress, opartymi na wieloletnim doświadczeniu w tworzeniu motywów, aby pomóc Ci ulepszyć Twoje projekty.
Here is a quick overview of what you’ll learn in this article.
- Czym jest WordPress Body Class?
- Kiedy używać WordPress Body Class
- Jak dodawać niestandardowe klasy body
- Dodawanie klasy do ciała za pomocą wtyczki WordPress
- Używanie tagów warunkowych z klasą ciała
- Inne przykłady dynamicznego dodawania niestandardowych klas body
- Wykrywanie przeglądarki i klasy CSS specyficzne dla przeglądarki
- Eksperckie poradniki dotyczące projektowania motywów WordPress
Czym jest WordPress Body Class?
Klasa body (body_class) to funkcja WordPress, która pozwala przypisać klasy CSS do elementu body.
Tag HTML body zazwyczaj zaczyna się w pliku header.php motywu, który ładuje się na każdej stronie. Pozwala to dynamicznie określić, którą stronę przegląda użytkownik, a następnie odpowiednio dodać klasy CSS.
Zazwyczaj większość motywów startowych i frameworków już zawiera funkcję body class w tagu HTML body. Jednak jeśli Twój motyw jej nie ma, możesz ją dodać, modyfikując tag body w następujący sposób:
<body <?php body_class($class); ?>>
W zależności od wyświetlanego typu strony, WordPress automatycznie dodaje odpowiednie klasy.
Na przykład, jeśli jesteś na stronie archiwum, WordPress automatycznie doda klasę archiwum do elementu body. Robi to dla prawie każdej strony.
Powiązane: Zobacz jak WordPress działa w tle (infografika).
Oto kilka przykładów typowych klas, które WordPress może dodać, w zależności od wyświetlanej strony:
.rtl {}
.home {}
.blog {}
.archive {}
.date {}
.search {}
.paged {}
.attachment {}
.error404 {}
.single postid-(id) {}
.attachmentid-(id) {}
.attachment-(mime-type) {}
.author {}
.author-(user_nicename) {}
.category {}
.category-(slug) {}
.tag {}
.tag-(slug) {}
.page-parent {}
.page-child parent-pageid-(id) {}
.page-template page-template-(template file name) {}
.search-results {}
.search-no-results {}
.logged-in {}
.paged-(page number) {}
.single-paged-(page number) {}
.page-paged-(page number) {}
.category-paged-(page number) {}
.tag-paged-(page number) {}
.date-paged-(page number) {}
.author-paged-(page number) {}
.search-paged-(page number) {}
Jak widać, mając tak potężne narzędzie do dyspozycji, możesz całkowicie dostosować swoją stronę WordPress, używając tylko CSS. Możesz dostosować konkretne strony profilu autora, archiwa oparte na dacie itp.
Biorąc to pod uwagę, przyjrzyjmy się teraz, jak i kiedy można użyć klasy body.
Kiedy używać WordPress Body Class
Najpierw musisz upewnić się, że element body Twojego motywu zawiera funkcję body class, jak pokazano powyżej. Jeśli tak, automatycznie uwzględni wszystkie klasy CSS wygenerowane przez WordPress, o których mowa powyżej.
Po tym będziesz mógł również dodawać własne klasy CSS do elementu body. Możesz dodawać te klasy, kiedy tylko ich potrzebujesz.
Na przykład, jeśli chcesz zmienić wygląd artykułów konkretnego autora z danej kategorii.
Jak dodawać niestandardowe klasy body
WordPress posiada filtr, który można wykorzystać do dodawania niestandardowych klas ciała, gdy jest to potrzebne. Pokażemy, jak dodać klasę ciała za pomocą filtra, zanim przedstawimy konkretny scenariusz użycia, aby wszyscy byli na tej samej stronie.
Ponieważ klasy body są specyficzne dla motywu, musisz dodać następujący kod do pliku functions.php swojego motywu lub do wtyczki fragmentów kodu.
function my_class_names($classes) {
// add 'class-name' to the $classes array
$classes[] = 'wpb-class';
// return the $classes array
return $classes;
}
//Now add test class to the filter
add_filter('body_class','my_class_names');
Powyższy kod doda klasę „wpb-class” do tagu body na każdej stronie Twojej witryny.
Zalecamy dodanie tego kodu za pomocą WPCode, najlepszej wtyczki fragmentów kodu na rynku. Dzięki niej bezpieczne i łatwe jest dodawanie niestandardowego kodu w WordPress bez edycji pliku functions.php motywu.
Najpierw musisz zainstalować i aktywować darmową wtyczkę WPCode. Jeśli potrzebujesz instrukcji, zapoznaj się z naszym przewodnikiem jak zainstalować wtyczkę WordPress.
Po aktywacji wtyczki przejdź do Fragmenty kodu » + Dodaj fragment z poziomu panelu administracyjnego WordPress.
Następnie znajdź opcję „Dodaj swój niestandardowy kod (nowy fragment)” i kliknij przycisk „+ Dodaj niestandardowy fragment” pod nią.
Stamtąd musisz wybrać typ kodu z listy dostępnych opcji.
W tym samouczku wybierz opcję „Fragment PHP”.
Następnie dodaj tytuł dla swojego fragmentu, który może być czymkolwiek, co pomoże Ci zapamiętać, do czego służy kod.
Następnie wklej powyższy kod do pola „Podgląd kodu”.
Następnie po prostu przełącz przełącznik z „Nieaktywny” na „Aktywny” i kliknij przycisk „Zapisz fragment”.
Teraz możesz bezpośrednio wykorzystać tę klasę CSS w arkuszu stylów swojego motywu.
Jeśli pracujesz nad własną witryną, możesz również dodać CSS za pomocą funkcji niestandardowego CSS w narzędziu do dostosowywania motywu WordPress.
Więcej szczegółów znajdziesz w naszym przewodniku jak łatwo dodać niestandardowy CSS do swojej witryny WordPress.
Dodawanie klasy do ciała za pomocą wtyczki WordPress
Jeśli nie pracujesz nad projektem klienta i nie chcesz pisać kodu, ta metoda będzie dla Ciebie łatwiejsza.
Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i aktywowanie wtyczki Custom Body Class. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku na temat jak zainstalować wtyczkę WordPress.
Po aktywacji musisz odwiedzić stronę Ustawienia » Niestandardowa klasa ciała. Tutaj możesz skonfigurować ustawienia wtyczki.
Możesz wybrać typy postów, w których chcesz włączyć funkcję klasy body i kto może mieć do niej dostęp. Nie zapomnij kliknąć przycisku „Zapisz zmiany”, aby zapisać swoje ustawienia.
Następnie możesz przejść do edycji dowolnego wpisu lub strony w swojej witrynie WordPress. Na ekranie edycji wpisu znajdziesz nowe pole meta w prawej kolumnie zatytułowane „Klasy wpisu”.
Kliknij, aby dodać własne klasy CSS. Możesz dodać wiele klas oddzielonych spacją.
Po zakończeniu możesz po prostu zapisać lub opublikować swój wpis. Wtyczka doda teraz Twoje niestandardowe klasy CSS do klasy body dla tego konkretnego wpisu lub strony.
Używanie tagów warunkowych z klasą ciała
Prawdziwa moc funkcji body_class ujawnia się, gdy jest używana z tagami warunkowymi.
Te tagi warunkowe to typy danych prawda/fałsz, które sprawdzają, czy warunek jest prawdziwy czy fałszywy w WordPress. Na przykład, tag warunkowy is_home sprawdza, czy aktualnie wyświetlana strona jest stroną główną, czy nie.
Pozwala to programistom motywów sprawdzić, czy warunek jest prawdziwy czy fałszywy, zanim dodadzą niestandardową klasę CSS do funkcji body_class.
Przyjrzyjmy się kilku przykładom użycia tagów warunkowych do dodawania niestandardowych klas do klasy body.
Załóżmy, że chcesz inaczej stylizować swoją stronę główną dla zalogowanych użytkowników z rolą użytkownika roli użytkownika. Chociaż WordPress automatycznie generuje klasę .home i .logged-in, nie wykrywa roli użytkownika ani nie dodaje jej jako klasy.
Teraz jest to scenariusz, w którym możesz użyć tagów warunkowych z niestandardowym kodem, aby dynamicznie dodać niestandardową klasę do klasy body.
Aby to osiągnąć, dodasz poniższy kod do pliku functions.php swojego motywu lub do wtyczki fragmentów kodu.
function wpb_loggedin_user_role_class($classes) {
// let's check if it is homepage
if ( is_home() ) {
// Now let's check if the logged in user has author user role.
$user = wp_get_current_user();
if ( in_array( 'author', (array) $user->roles ) ) {
//The user has the "author" role
// Add user role to the body class
$classes[] = 'author';
// Return the classes array
return $classes;
}
} else {
// if it is not homepage, then just return default classes
return $classes;
}
}
add_filter('body_class', 'wpb_loggedin_user_role_class');
Teraz przyjrzyjmy się innemu przydatnemu przykładowi. Tym razem sprawdzimy, czy wyświetlana strona jest podglądem wersji roboczej WordPressa.
Aby to zrobić, użyjemy znacznika warunkowego is_preview, a następnie dodamy naszą niestandardową klasę CSS.
function add_preview_class($classes) {
if ( is_preview() ) {
$classes[] = 'preview-mode';
return $classes;
}
return $classes;
}
add_filter('body_class','add_preview_class');
Teraz dodamy następujący kod CSS do arkusza stylów naszego motywu, aby wykorzystać nową niestandardową klasę CSS, którą właśnie dodaliśmy.
.preview-mode .site-header:before {
content:'preview mode';
color:#FFF;
background-color:#ff0000;
}
Tak to wyglądało na naszej stronie demonstracyjnej:
Możesz sprawdzić pełną listę tagów warunkowych, których możesz używać w WordPress. Da ci to poręczny zestaw gotowych do użycia tagów dla twojego kodu.
Inne przykłady dynamicznego dodawania niestandardowych klas body
Oprócz tagów warunkowych, możesz również użyć innych technik do pobierania informacji z bazy danych WordPress i tworzenia niestandardowych klas CSS dla klasy body.
Dodawanie nazw kategorii do klasy body strony pojedynczego wpisu
Załóżmy, że chcesz dostosować wygląd pojedynczych wpisów w zależności od kategorii, do której należą. Możesz użyć klasy body, aby to osiągnąć.
Najpierw musisz dodać nazwy kategorii jako klasę CSS na stronach pojedynczych wpisów. Aby to zrobić, dodaj poniższy kod do pliku functions.php swojego motywu lub do wtyczki fragmentów kodu, takiej jak WPCode:
// add category nicenames in body class
function category_id_class($classes) {
global $post;
foreach((get_the_category($post->ID)) as $category)
$classes[] = $category->category_nicename;
return $classes;
}
add_filter('body_class', 'category_id_class');
Powyższy kod doda klasę kategorii do klasy body na stronach pojedynczych wpisów. Następnie możesz użyć klas CSS do stylizacji według własnych potrzeb.
Dodawanie ślimaka strony do klasy body
Wklej poniższy kod do pliku functions.php swojego motywu lub do wtyczki fragmentów kodu:
//Page Slug Body Class
function add_slug_body_class( $classes ) {
global $post;
if ( isset( $post ) ) {
$classes[] = $post->post_type . '-' . $post->post_name;
}
return $classes;
}
add_filter( 'body_class', 'add_slug_body_class' );
Ponownie zalecamy dodanie tego kodu w WordPressie za pomocą wtyczki do fragmentów kodu, takiej jak WPCode. W ten sposób nie będziesz musiał martwić się o uszkodzenie swojej witryny.
Zacznij od zainstalowania i aktywowania darmowej wtyczki WPCode. Jeśli potrzebujesz pomocy, postępuj zgodnie z tym przewodnikiem na temat jak zainstalować wtyczkę WordPress.
Po aktywacji wtyczki przejdź do Fragmenty kodu » Dodaj fragment z panelu administracyjnego WordPress.
Następnie kliknij przycisk „Użyj fragmentu” pod opcją „Dodaj własny kod (nowy fragment)”.
Następnie wybierz „Fragment PHP” jako typ kodu.
Następnie po prostu dodaj tytuł dla swojego fragmentu kodu i wklej powyższy kod do pola „Podgląd kodu”.
Na koniec przełącz przełącznik z pozycji „Nieaktywny” na „Aktywny” i kliknij przycisk „Zapisz fragment”.
Wykrywanie przeglądarki i klasy CSS specyficzne dla przeglądarki
Czasami możesz napotkać problemy, w których Twój motyw może potrzebować dodatkowego CSS dla konkretnej przeglądarki.
Teraz dobra wiadomość jest taka, że WordPress automatycznie wykrywa przeglądarkę podczas ładowania, a następnie tymczasowo przechowuje te informacje jako zmienną globalną.
Musisz tylko sprawdzić, czy WordPress wykrył konkretną przeglądarkę, a następnie dodać ją jako niestandardową klasę CSS.
Po prostu skopiuj i wklej poniższy kod do pliku functions.php swojego motywu lub wtyczki fragmentów kodu:
function wpb_browser_body_class($classes) {
global $is_iphone, $is_chrome, $is_safari, $is_NS4, $is_opera, $is_macIE, $is_winIE, $is_gecko, $is_lynx, $is_IE, $is_edge;
if ($is_iphone) $classes[] ='iphone-safari';
elseif ($is_chrome) $classes[] ='google-chrome';
elseif ($is_safari) $classes[] ='safari';
elseif ($is_NS4) $classes[] ='netscape';
elseif ($is_opera) $classes[] ='opera';
elseif ($is_macIE) $classes[] ='mac-ie';
elseif ($is_winIE) $classes[] ='windows-ie';
elseif ($is_gecko) $classes[] ='firefox';
elseif ($is_lynx) $classes[] ='lynx';
elseif ($is_IE) $classes[] ='internet-explorer';
elseif ($is_edge) $classes[] ='ms-edge';
else $classes[] = 'unknown';
return $classes;
}
add_filter('body_class','wpb_browser_body_class');
Możesz wtedy użyć klas takich jak:
.ms-edge .navigation {some item goes here}
Jeśli jest to niewielki problem z paddingiem lub marginesem, jest to dość prosty sposób na jego rozwiązanie.
Z pewnością istnieje wiele innych scenariuszy, w których użycie funkcji body_class może uchronić Cię przed pisaniem długich linii kodu. Na przykład, jeśli używasz frameworka motywów, takiego jak Genesis, możesz go użyć do dodania niestandardowych klas w swoim motywie potomnym.
Możesz użyć funkcji body_class, aby dodać klasy CSS dla układów stron pełnoekranowych, zawartości paska bocznego, nagłówków i stopek itp.
Eksperckie poradniki dotyczące projektowania motywów WordPress
Szukasz więcej poradników? Sprawdź nasze inne przewodniki dotyczące projektowania motywów w WordPress:
- Jak dodać efekt paralaksy do dowolnego motywu WordPress
- Jak edytować stopkę w WordPress (4 sposoby)
- Jak dodać spadające płatki śniegu do swojego bloga WordPress
- Jak zaktualizować motyw WordPress bez utraty personalizacji
- Jak uzyskać opinie na temat projektu strony internetowej w WordPress
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak używać klasy body WordPress w swoich motywach. Możesz również zapoznać się z naszym artykułem na temat stylizowania każdego posta WordPress inaczej oraz naszym porównaniem najlepszych wtyczek do tworzenia stron WordPress metodą przeciągnij i upuść.
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.
Mrteesurez
Dziękuję za udostępnienie tych wskazówek i kodów dotyczących klasy body WordPress, dopiero uczę się tej klasy, ponieważ zajmuję się tworzeniem WordPress, więc ten post jest dla mnie korzystny, aby lepiej zrozumieć klasy i funkcje WordPress.
jenny
plsss give me example outwitting a crocodile theme plsssssssss
Corrinda
Dziękuję po przeczytaniu kilku artykułów na temat body-class, ten w końcu do mnie dotarł.
Udało mi się to uruchomić na poszczególnych stronach i stronach kategorii, to świetnie. Przypadki użycia zrobiły dla mnie różnicę.
Personel redakcyjny
Świetnie. Cieszę się, że mogłem pomóc.
Admin
Yolanda
Świetne wskazówki! Próbuję dowiedzieć się, jak dodać klasę menu (tę, którą można wprowadzić w panelu administracyjnym) do body_class:
[pre]
/** Dodaj klasę CSS menu nawigacyjnego do klasy body */
function add_nav_menu_css( $classes ) {
$classes[] = ‘menu-class-from-admin’;
return $classes;
}
add_filter( ‘body_class’, ‘add_nav_menu_css’ );
[/pre]
Seth Burleigh
Świetne wskazówki. Próbuję to zrobić i podczas wstawiania „page-template page-template-(nazwa pliku szablonu)” do mojego pliku nagłówka, tak aby mieć:
<body >
A następnie modyfikuję mój CSS, aby uwzględnić: .page-template-home_corechella
Została mi całkowicie pusta strona. Nic. Co robię źle? Dzięki!
Personel redakcyjny
Szablony stron są dodawane do strony głównej automatycznie, o ile masz tagi body_class. Musiałbym zobaczyć plik, aby dowiedzieć się, co robisz źle. Użyj zewnętrznej usługi, takiej jak pastebin, a następnie wklej link tutaj.
Admin
Seth
Ok, dziękuję bardzo!
Nieco zmieniłem podejście od czasu mojego wpisu (teraz używam zamiast szablonu strony), ale występuje podobny problem – właściwy kod CSS dla body (body.corechella) nie jest wyświetlany. Oryginalna klasa body ma priorytet.
Szablon strony Corechella (http://dev.corebaby.org/corechella-home/) – http://pastebin.com/embed_js.php?i=8L6rhESr
Plik header.php Corechella – http://pastebin.com/embed_js.php?i=n2Sn4jUJ
CSS (nowa klasa body znajduje się na samym dole) – http://pastebin.com/embed_js.php?i=4U6d09cQ”
Seth
Personel redakcyjny
W pliku header.php musisz zachować klasę body w następujący sposób:
1-click Use in WordPress
W swoim CSS użyj po prostu .corchella zamiast body.corchella
Michael
Świetny artykuł, dzięki
Personel redakcyjny
Glad you found it helpful
Admin
Rasha
mam stronę z wiadomościami, która pobiera wpisy za pomocą category.php, chcę nadać jej specyficzną klasę, abym mógł zrobić treść szeroką i bez paska bocznego, jak mogę to zrobić?
Vajrasar
Rzeczywiście dobry i bardzo pouczający artykuł. Mam tylko pytanie – na przykład, jeśli dzisiaj dodam przeglądarkową specyficzną klasę body, a po kilku dniach będę musiał zastosować klasę strony w slugu body. Czy ustawienia/CSS, które zrobiłem z przeglądarkową specyficzną klasą body, zostaną zrujnowane, czy nie?
Personel redakcyjny
Nie, nie zostanie zrujnowane. Można to nadpisać w zależności od sposobu napisania kodu CSS.
Admin