Jak dodać nazwę strony do klasy body w WordPress

Przez lata pracowaliśmy nad wieloma witrynami WordPress, a jedną z sztuczek personalizacji, do której zawsze wracamy, jest dodawanie nazwy strony do klasy body. To taka prosta rzecz, ale robi ogromną różnicę, jeśli chodzi o elastyczność projektowania.

Oto co mamy na myśli: Prawdopodobnie już się z tym spotkałeś – chcesz stylizować tylko jedną stronę inaczej niż resztę swojej witryny. Bez nazwy strony w klasie body, będziesz musiał walczyć ze skomplikowanymi selektorami CSS lub tworzyć oddzielne arkusze stylów.

Dodanie ślimaka strony w motywie WordPress pozwala na wykonanie wszystkich pożądanych dostosowań bez żadnych komplikacji. Możesz łatwo zmieniać kolory, czcionki i inne elementy na poszczególnych stronach, nie wpływając na resztę swojej witryny.

W tym artykule pokażemy, jak dodać identyfikator strony do klasy body w motywach WordPress. Używaliśmy tej metody we wszystkim, od prostych stron biznesowych po złożone sklepy eCommerce.

Dlaczego dodawać „Page Slug” do klasy Body w Twoim Motywie?

Jeśli chcesz dostosować konkretne strony w swojej witrynie i poprawnie je zidentyfikować, dodanie nazwy strony do klasy body motywu jest bardzo przydatne.

Domyślnie Twoja strona WordPress będzie wyświetlać tylko klasy identyfikatora posta, co może być trudne przy rozpoznawaniu poprawnej strony. Nazwa strony (slug) pokazuje adres URL Twojego wpisu na blogu, co ułatwia dostosowanie strony.

Oprócz tego możesz wprowadzać różne modyfikacje na swoich stronach za pomocą klasy nazwy strony (slug). Na przykład możesz zmienić czcionkę i kolory konkretnego posta lub wyróżnić przycisk wezwania do działania na określonej stronie docelowej.

Mając to na uwadze, przyjrzyjmy się, jak możesz dodać nazwę strony (slug) do klasy ciała (body class) swojego motywu WordPress.

Dodawanie nazwy strony w Twoim motywie WordPress

Aby pomóc Ci dodać adres URL swojej strony do klasy ciała (body class) Twojego motywu WordPress, możesz wprowadzić poniższy kod do pliku functions.php swojego motywu.

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' );

Możesz uzyskać dostęp do plików functions.php swojego motywu, przechodząc do Edytora motywów WordPress (Edytor kodu). Jednak bezpośrednia edycja plików motywu jest bardzo ryzykowna.

Dzieje się tak, ponieważ jakikolwiek błąd podczas dodawania kodu może zepsuć Twoją stronę i uniemożliwić Ci zalogowanie się do panelu administracyjnego WordPress.

Znacznie prostszym sposobem dodania kodu do klasy ciała (body class) Twojego motywu jest użycie wtyczki WordPress, takiej jak WPCode. Używamy jej na wielu stronach, zobacz naszą pełną recenzję WPCode, aby dowiedzieć się więcej.

Dzięki WPCode możesz łatwo dodawać kod do swojej strony w ciągu kilku minut i bez żadnych błędów. Ponadto zapewnia, że Twój kod nie zostanie usunięty, jeśli zaktualizujesz lub zmienisz swój motyw w przyszłości.

Zawiera również bibliotekę gotowych fragmentów kodu stworzonych przez ekspertów, które można zainstalować jednym kliknięciem. Nie potrzebujesz więc żadnych umiejętności kodowania, aby dokonywać zaawansowanych modyfikacji WordPressa.

W rzeczywistości dodanie nazwy strony do klasy body jest dostępne jako gotowy fragment w bibliotece WPCode. Jest to najłatwiejsza metoda do zastosowania.

Najpierw musisz zainstalować i aktywować bezpłatną wtyczkę WPCode na swojej stronie. Instrukcje krok po kroku znajdziesz w naszym przewodniku jak zainstalować wtyczkę WordPress.

Po aktywacji wtyczki, w pasku administracyjnym WordPress pojawi się nowa pozycja menu o nazwie „Fragmenty kodu”. Kliknięcie jej przeniesie Cię na stronę, na której będziesz zarządzać wszystkimi swoimi fragmentami kodu.

Aby dodać swój pierwszy fragment kodu, kliknij przycisk „Dodaj nowy”.

Spowoduje to wyświetlenie strony „Dodaj fragment”, gdzie możesz wybrać fragment kodu z gotowej biblioteki.

Po prostu wyszukaj fragment kodu „Add the Page Slug to Body Class” (Dodaj nazwę strony do klasy body), a gdy go znajdziesz, kliknij przycisk „Use snippet” (Użyj fragmentu kodu).

Teraz WPCode automatycznie doda kod i ustawi odpowiednią metodę wstawiania.

Wszystko, co musisz zrobić, to przełączyć przełącznik z 'Nieaktywny' na 'Aktywny'. Na koniec kliknij przycisk 'Aktualizuj' u góry strony.

Zobaczysz teraz nową klasę `body` generowaną w ten sposób: `page-{slug}`. Użyj tej klasy, aby nadpisać domyślne style i dostosować elementy dla konkretnych stron.

Na przykład, powiedzmy, że chcesz stylizować widżety paska bocznego, ale tylko na stronie, która ma nazwę (slug) „edukacja”. W takim przypadku możesz dodać kod CSS w następujący sposób:

#sidebar .widgets{background: #fff; color: #000;}
.page-education #sidebar .widgets{background: #000; color: #fff;}

Więcej szczegółów znajdziesz w naszym przewodniku jak dodać niestandardowy CSS w WordPress.

Ręczne dodawanie niestandardowego kodu

Jeśli wolisz dodać niestandardowy kod ręcznie, oto jak to zrobić.

Najpierw przejdź do strony Fragmenty kodu » Dodaj fragment z panelu administracyjnego WordPress.

Stamtąd przejdź do opcji „Dodaj swój niestandardowy kod (nowy fragment)” i kliknij przycisk „+ Dodaj niestandardowy fragment”.

Następnie musisz wybrać typ kodu z listy opcji, które pojawią się na ekranie. W tym samouczku wybierz „Fragment PHP”.

Teraz nadaj tytuł swojemu fragmentowi kodu, który jest tylko do Twojej wiadomości i może być czymkolwiek, co pomoże Ci zidentyfikować kod.

Następnie po prostu skopiuj i wklej kod z góry do pola „Podgląd kodu”.

Następnie przewiń w dół do sekcji „Wstawianie”. Tutaj możesz wybrać metodę „Automatyczne wstawianie”, aby automatycznie wstawić i wykonać kod w określonej lokalizacji WordPress, takiej jak administrator, frontend i inne.

Jeśli nie masz pewności, zachowaj domyślną opcję „Uruchom wszędzie”.

Możesz też wybrać metodę „Krótki kod”. Dzięki tej metodzie fragment nie jest automatycznie wstawiany. Otrzymasz krótki kod, który możesz ręcznie wstawić w dowolnym miejscu na swojej stronie.

Kiedy będziesz gotowy, przełącz przełącznik z „Inactive” (Nieaktywny) na „Active” (Aktywny) i kliknij przycisk „Save Snippet” (Zapisz fragment kodu) w prawym górnym rogu.

Więcej szczegółów znajdziesz w naszym przewodniku jak dodać niestandardowy kod w WordPress.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać nazwę strony (slug) do klasy ciała (body class) Twojego motywu WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat klasy ciała WordPress i jak wybrać najlepsze oprogramowanie do projektowania.

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.