WordPress: klasa css dla tagu body

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_class1 jest filtr2 o takiej samej nazwie i tutaj mamy prawie całkowitą kontrolę nad tym jakie klasy pojawią się w rezultacie na stronie. Możemy dodawać, usuwać i modyfikować zawartość. Dlaczego prawie? Bo nasz filtr nie musi być ostatni.

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 filtra3:

  1. dodanie klasy dla wybranej kategorii
  2. dodanie klasy związanej z dniem tygodnia
  3. dodanie klasy związanej z godziną
  4. dodanie klasy typu dzień/noc
  5. 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;
}

pobierz plik: iworks-body_class-filter.php

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:

  1. wrzuć załączony plik do folderu wp-content/plugins, a potem włącz wtyczkę
  2. wrzuć załączony plik do folderu wp-content/mu-plugins
  3. dołącz kod do pliku functions.php aktualnie używanego motywu
  1. funkcja body_class() []
  2. filtr body_class []
  3. filtr body_class []

3 odpowiedzi do “WordPress: klasa css dla tagu body”

  1. 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

  2. @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ć.

Możliwość komentowania jest wyłączona.

Jeżeli chcesz skomentować, napisz mail na adres marcin w domenie strony na której jesteś. Dodam twoj komentarz.