Jak jest jest budowana klasa dla tagu body? Jak to wykorzystać i jak zmienić? Co można na tym zyskać, a co stracić i właściwie do czego jest to potrzebne?
Skąd się właściwie bierze atrybut class w tagu body?
Prawidłowo skonstruowany szablon WordPressa, oprócz kilku innych elementów, zawiera też w otwierający tagu body poniższy kod, który to odpowiedzialny jest za atrybut class tegoż tagu.
<body <?php body_class($class); ?>> |
Nasz CMS umieszcza tam odpowiednie klasy, w zależności od tego gdzie w serwisie się znajdujemy. Z samych nazw klas, oto niektóre z nich: home, category, page, single-format-standard, logged-in, można ustalić w drugą stronę: co jest aktualnie wyświetlane.
Do czego to wszystko? Dość często wykorzystuję klasę z body do zmiany wyglądu bloga, podpinając odpowiednie reguły w css:
body.home #motto { font-weight:bold; color:red; } body.category #footer .notice { display:none; } |
Jak to wykorzystać bardziej…?
Następnym etapem wykorzystywania możliwości funkcji body_class
Argumentem wejściowym jest tablica zawierająca wszystkie klasy które do tej pory stworzył sam system. Tu należy uważać, ponieważ zwracać MUSIMY tablicę.
Poniży listing zawiera kilka prostych przykładów użycia filtra
- dodanie klasy dla wybranej kategorii
- dodanie klasy związanej z dniem tygodnia
- dodanie klasy związanej z godziną
- dodanie klasy typu dzień/noc
- usunięcie klas związanych z kategorią
W podobny sposób można dodawać lub usuwać inne klasy.
Co natomiast zostanie zrobione w arkuszach stylów, choćby inny szablon dla dnia inny dla nocy, pozostawię już waszej inicjatywie.
add_filter( 'body_class', 'iworks_snippet_body_class_filter'); function iworks_snippet_body_class_filter( $class ) { /** * nadawania określonej klasy dla ustawionej w opcjach kategorii */ if ( get_option( 'feature-category' ) && is_category( get_option( 'feature-category' ) ) ) { $class[] = 'category-feature'; } /** * nadawanie klasy związanej z dniem tygodnia */ $class[] = sprintf( 'day-%s', strtolower( date ( 'l' ) ) ); /** * nadawania klasy związanej z godziną */ $class[] = sprintf( 'hour-%d', date( 'H' )); /** * klasa dzień/noc */ $class[] = ( date( 'G' ) > 8 && date( 'G' ) < 20 )? 'is-day':'is-night'; /** * usuwanie klasy kategorii */ if ( is_category() ) { for( $i = 0; $i < count( $class ); $i++ ) { if ( preg_match( '/^category/', $class[$i] ) ) { unset( $class[$i] ); } } } return $class; } |
Inne przykłady
Dodanie klasy „class_sidebar” jeżeli na stronie jest używany sidebar o nazwie „my_sidebar”:
add_filter('body_class','iworks_body_class_has_sidebar'); function iworks_body_class_has_sidebar( $class ) { if (is_active_sidebar('my_sidebar')) { $class[] = 'class_sidebar'; } return $class; } |
Jak użyć podany kod?
Masz 3 rozwiązania:
- wrzuć załączony plik do folderu
wp-content/plugins, a potem włącz wtyczkę - wrzuć załączony plik do folderu
wp-content/mu-plugins - dołącz kod do pliku
functions.phpaktualnie używanego motywu
benek
dalej tego nie kumam siedze juz przy tym sporo czasu i nic mi nie wychodzi nie mogę tego jakoś posklejać do kupy
to wiadomo gdzie <body >
filtr mam dodać do funkcji motywu ??
a co z tym CSS na jakiej zasadzie mam zrobić te reguły
chyba lipa bedzie bo rzuciłem sie na głęboką wode :/ a nie znam dokładnie CSS itp
Marcin
@benek – tak funkcja jest gotowa do użycia i może zostać włączona do pliku functions.php motywu.
Dodałem do wpisu tekst „jak użyć kod”.
Co do reguł CSS no to niestety bez wiedzy jak się je pisze, ciężko jest je wykorzystać.