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 ID posta, co może być trudne przy rozpoznawaniu poprawnej strony. „Page slug” pokazuje adres URL Twojego wpisu na blogu, ułatwiając dostosowanie strony.

Poza tym możesz wprowadzać różne modyfikacje na swoich stronach, używając klasy body z nazwą strony. 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 do klasy body swojego motywu WordPress.

Dodawanie nazwy strony w Twoim motywie WordPress

Aby pomóc Ci dodać adres URL Twojej strony do klasy body motywu WordPress, możesz wprowadzić następujący kod w 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ż każdy błąd podczas dodawania kodu może zepsuć Twoją witrynę i uniemożliwić Ci zalogowanie się do panelu administracyjnego WordPress.

Znacznie prostszym sposobem dodania kodu do klasy body 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 witryny 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łatny wtyczkę WPCode na swojej stronie. Szczegółowe instrukcje 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żna 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 nadać styl swoim widżetom paska bocznego, ale tylko na stronie z identyfikatorem „education”. W takim przypadku możesz dodać CSS w następujący sposób:

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

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat jak dodać niestandardowy CSS do 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ślonym miejscu WordPress, takim jak panel administracyjny, frontend i inne.

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

Alternatywnie możesz wybrać metodę „Krótki kod”. W tej metodzie fragment nie jest automatycznie wstawiany. Otrzymasz krótki kod, który możesz ręcznie wstawić w dowolnym miejscu swojej witryny.

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.

Aby uzyskać więcej szczegółów, możesz zapoznać się z naszym przewodnikiem na temat jak dodawać niestandardowy kod w WordPress.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać „page slug” do klasy body Twojego motywu WordPress. Możesz również zapoznać się z naszym przewodnikiem po klasie body WordPress oraz jak wybrać najlepsze oprogramowanie do projektowania stron internetowych.

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.