Jak dodać do elementu class w body uproszczoną nazwę strony?

  • Poziom trudności:

Czy potrzebowałeś kiedyś dodawać styl CSS na unikatowej podstronie i tylko na niej? W tym kursie podpowiem Ci w jaki sposób dodać unikatową klasę w elemencie <body> która może być punktem zaczepienia przy dodawaniu stylów do witryny. Innymi słowy, będziesz mógł dowolnie spersonalizować stronę dodając do niej unikatową kolorystykę albo elementy dostępne tylko w tej części witryny.

Na początek pozwólcie, że wyjaśnię różnicę pomiędzy dwoma terminami: szablon i motyw. Motywy mogą być płatne lub bezpłatne i są to paczki zawierające całościowy układ witryny: jej wygląd, style, strukturę plików czy grafiki wykorzystywane przy wyświetlaniu strony. Motyw to pojęcie szersze.

Szablon w przeciwieństwie do motywu to pewna forma wykorzystywana przy jednej lub wielu stronach/wpisach np. do wyświetlania treści na całą szerokość witryny z pominięciem sidebara. Motywy mogą się składać z wielu szablonów, a podstawowym szablonem dla strony motywu jest plik page.php. Szablon możesz wybrać na dowolnej stronie z rozwijanego menu na prawej kolumnie:

szablon

Po co to przydługie rozpoczęcie? Wszystko po to aby wyjaśnić Ci jakie masz możliwości na starcie i co możesz osiągnąć rozbudowując blog o nową funkję. Domyślnie znacznik:

<body <?php body_class(); ?>>

w nowszych wersjach WordPressa będzie zawierał klasy z nazwą szablonu. Mają one konstrukcję np.

page-template-page-nazwaszablonu

 oraz

page-template-page-nazwaszablonu-php

Jest to element, który pozwoli Ci na ostylowanie wszystkich stron w ramach jednego szablonu. W znaczniku <body> znajdziesz najprawdopodobniej również klasę np. page-id-286 czyli informację o indywidualnym numerze ID strony. Ponieważ jednak niewygodnie w kodzie CSS posługiwać się numerami stron, dlatego proponuję abyś dodał nową funkcję do witryny pozwalającą na operowanie uproszczoną nazwą strony.

Aby taką informację dodać powinieneś otworzyć functions.php i dodać pomiędzy znacznikami <?php i ?> następujący fragment kodu:

//Dodawanie do klasy dla body informacji o skróconej nazwie strony
function uproszczona_nazwa_w_body_class( $classes ) {
global $post;
if ( isset( $post ) ) {
$classes[] = $post->post_type . '-' . $post->post_name;
}
return $classes;
}
add_filter( 'body_class', 'uproszczona_nazwa_w_body_class' );

Od tej pory będziesz widział nową klasę mającą postać: page-{uproszczona-nazwa-strony}. Możesz jej używać w CSS aby spersonalizować style dla tej konkretnej strony.

Przykładowo jeśli klient zażyczył sobie, aby na stronie kontaktowej obok formularza pojawiała się informacja teleadresowa w bocznej kolumnie przedstawiona w bardziej wyraźny sposób, wtedy możesz przy użyciu CSS wyróżnić ten konkretny widget:

#sidebar .widgets {background: #fff; color: #333;}
.page-kontakt #sidebar .widgets {background: red; color: #fff;}

Gdybyś z tego rozwiązania nie skorzystał Twój kod CSS mógłby np. wyglądać następująco:

#sidebar .widgets {background: #fff; color: #333;}
.page-id-286 #sidebar .widgets {background: red; color: #fff;}

i zapewne jeden i drugi by działał, ale w pierwszym przypadku po zajrzenia do kodu witryny po kilku miesiącach nie musisz się domyślać/sprawdzać jakie ID ma każda ostylowana strona. Wystarczy że spojrzysz na uproszczoną nazwę i wszystko będzie dla Ciebie jasne.

UDOSTĘPNIJ
WordPress dla początkujących