Jak dodać uproszczoną nazwę strony do klasy Body w WordPress?

Przez lata pracowaliśmy nad wieloma witrynami WordPress, a jednym z konfiguratorów, do którego zawsze wracamy, jest dodanie uproszczonej nazwy strony do klasy body. To taka prosta rzecz, ale robi ogromną różnicę, jeśli chodzi o elastyczność projektowania.

Dodanie uproszczonej nazwy strony w motywie WordPress pozwala wykonać wszystkie konfiguratory, które chcesz, bez żadnych komplikacji. Możesz łatwo zmieniać kolory, kroje pisma i inne elementy na poszczególnych stronach, nie mając wpływu na resztę twojej witryny.

W tym artykule pokażemy, jak dodać uproszczoną nazwę strony w klasie body twojego motywu WordPress.

Dlaczego warto dodać uproszczoną nazwę strony w klasie Body twojego motywu?

Jeśli chcesz dostosować własne strony w witrynie i chcesz poprawnie zidentyfikować stronę, to dodanie uproszczonej nazwy strony w klasie body twojego motywu jest naprawdę przydatne.

Domyślnie twoja witryna WordPress pokazuje tylko klasy identyfikatora wpisu, co może być trudne, jeśli chodzi o rozpoznanie właściwej strony. Uproszczona nazwa strony pokazuje adres URL twojego wpisu na blogu, ułatwiając dostosowanie strony.

Poza tym, możesz dokonywać różnych dostosowań na swoich stronach za pomocą klasy body uproszczonej nazwy strony. Możesz na przykład zmienić krój pisma i kolory poszczególnych wpisów lub wyróżnić przycisk wezwania do działania na konkretnej stronie docelowej.

W związku z tym przyjrzyjmy się, jak można dodać uproszczoną nazwę strony w klasie body twojego motywu WordPress.

Dodawanie uproszczonej nazwy strony w twoim motywie WordPress

Aby dodać adres URL twojej strony w klasie body twojego motywu WordPress, możesz wpisz następujący kod w pliku functions.php twojego 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 twojego motywu, przechodząc do edytora motywów WordPress (Edytor kodu). Bezpośrednia edycja plików motywu jest jednak bardzo ryzykowna.

Wynika to z faktu, że każdy błąd podczas dodawania kodu może zepsuć twoją witrynę i zablokować logowanie się do kokpitu WordPress.

Znacznie prostszym sposobem na dodanie kodu do klasy body twojego motywu jest użycie wtyczki WordPress, takiej jak WPCode.

Dzięki WPCode możesz łatwo dodać kod do swojej witryny w ciągu kilku minut i bez żadnych błędów. Ponadto zapewnia również, że twój kod nie będzie usuwany w przypadku aktualizacji lub zmiany motywu w przyszłości.

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

Najpierw musisz zainstalować i włączyć darmową wtyczkę WPCode na twojej witrynie. Instrukcje krok po kroku można znaleźć w naszym przewodniku na temat instalacji wtyczki WordPress.

Po włączeniu wtyczki, nowy fragment menu o nazwie „Code Snippets” zostanie dodany do twojego paska administratora WordPress. Kliknięcie na nią przeniesie cię na stronę, na której będziesz mógł zarządzać wszystkimi twoimi fragmentami kodu.

Aby dodać twój pierwszy własny fragment kodu, kliknij przycisk „Dodaj nowy”.

Spowoduje to wyświetlenie strony „Dodaj fragment kodu „, na której można wybrać fragment kodu z gotowej biblioteki lub dodać własny kod.

Aby dodać swój własny kod, przejdź do opcji „Add Your Custom Code (New Snippet)” i kliknij przycisk „Use snippet”.

Teraz nadaj tytuł swojemu fragmentowi kodu i wpisz kod w polu „Podgląd kodu”. Musisz również wybrać „Fragment kodu PHP” jako rodzaj kodu z rozwijanej listy po prawej stronie.

Następnie przewiń w dół do sekcji „Wstaw”. Tutaj możesz wybrać metodę „Auto Insert”, 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”. W przypadku tej metody fragment kodu nie jest wstawiony automatycznie. Otrzymasz krótki kod, który możesz ręcznie wstawić w dowolnym miejscu na twojej witrynie.

Gdy będziesz gotowy, przełącz przełącznik z „Nieaktywny” na „Aktywny” i kliknij przycisk „Zapisz fragment kodu” w prawym górnym rogu.

Więcej szczegółów można znaleźć w naszym przewodniku na temat dodawania własnego kodu w WordPress.

Zaczniesz teraz widzieć nową klasę body, która będzie wyświetlana w następujący sposób: page-{slug}. Użyj tej klasy, aby zastąpić domyślne style i dostosuj elementy dla określonych stron.

Załóżmy na przykład, że chcesz nadać styl swoim widżetom na panelu bocznym, ale tylko na stronie o uproszczonej nazwie „edukacja”. W takim przypadku można dodać 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 można znaleźć w naszym przewodniku na temat dodawania własnych CSS do WordPressa.

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak dodać uproszczoną nazwę strony w klasie body twojego motywu WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat klasy body WordPress i jak wybrać najlepsze oprogramowanie do projektowania.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.