WordPress Body Class 101: porady i wskazówki dla projektantów motywów

Czy jesteś początkującym projektantem motywów WordPress, który szuka nowych sposobów wykorzystania CSS do swoich motywów?

Na szczęście WordPress automatycznie dodaje klasy CSS, które możesz wykorzystać w swoich motywach. Kilka z tych klas CSS jest automatycznie dodawanych do < body> sekcja każdej strony w witrynie WordPress.

W tym artykule wyjaśnimy klasę ciała WordPress z poradami i wskazówkami dla początkujących projektantów motywów, aby wykorzystać je w swoich projektach.

Oto krótki przegląd tego, czego dowiesz się z tego artykułu.

• Czym jest WordPress body class?
• Kiedy używać klasy body
• Jak dodać własne klasy ciała
• Jak dodać klasę body za pomocą wtyczki
• Używanie znaczników warunkowych do dodawania własnych klas ciała
• Więcej przykładów dynamicznego dodawania własnych klas ciała
• Wykrywanie przeglądarki użytkownika i dodawanie specyficznej dla przeglądarki klasy body

Czym jest WordPress Body Class?

Body class (body_class) to funkcja WordPress, która pozwala przypisać klasy CSS do elementu body.

Znacznik treści HTML zwykle rozpoczyna się w nagłówku motywu.plik php, który ładuje się na każdej stronie. Pozwala to dynamicznie dowiedzieć się, którą stronę przegląda użytkownik, a następnie odpowiednio dodać klasy CSS.

Zwykle większość motywów i RAM startowych zawiera już funkcję klasy body wewnątrz znacznika html body. Jeśli jednak Twój motyw go nie ma, możesz go dodać, modyfikując tag body w ten sposób:

< body <?PHP body_class ($class);?>>

W zależności od rodzaju wyświetlanej strony, WordPress automatycznie dodaje odpowiednie klasy.

Na przykład, jeśli jesteś na stronie Archiwum, WordPress automatycznie doda klasę archiwum do elementu body. Robi to dla prawie każdej strony.

Powiązane: Zobacz jak działa WordPress za kulisami (infografika)

Oto kilka przykładów typowych klas, które WordPress może dodać, w zależności od tego, która strona jest wyświetlana:

.rtl {}
.Strona główna {}
.blog {}
.archiwum {}
.Data {}
.Szukaj {}
.paged {}
.załącznik {}
.error404 {}
.single postid - (id) {}
.attachmentid - (id) {}
.attachment - (mime-type) {}
.autor {}
.autor - (user_nicename) {}
.Kategoria {}
.Kategoria - (ślimak) {}
.tag {}
.tag - (slug) {}
.strona-rodzic {}
.page-child parent-pageid - (id) {}
.page-template page-template - (nazwa pliku szablonu) {}
.search-results {}
.search-no-results {}
.zalogowany {}
.paged - (numer strony) {}
.single-paged - (page number) {}
.page-paged - (numer strony) {}
.category-paged - (page number) {}
.tag-paged - (numer strony) {}
.date-paged - (page number) {}
.autor-paged - (numer strony) {}
.search-paged - (numer strony) {}

Jak widać, mając tak potężny zasób pod ręką, możesz całkowicie dostosować swoją stronę WordPress za pomocą tylko CSS. Możesz dostosować konkretne strony profilu autora, archiwa oparte na datach itp.

Mając to na uwadze, przyjrzyjmy się teraz, jak i kiedy używasz klasy body.

Kiedy korzystać z klasy Body WordPress

Najpierw musisz upewnić się, że element body szablonu zawiera funkcję klasy body, jak pokazano powyżej. Jeśli tak, to automatycznie obejmie wszystkie wygenerowane przez WordPress klasy CSS wymienione powyżej.

Następnie będziesz mógł dodać własne niestandardowe klasy CSS do elementu body. Możesz dodać te klasy, kiedy tylko ich potrzebujesz.

Na przykład, jeśli chcesz zmienić wygląd artykułów przez konkretnego autora w określonej kategorii.

Jak dodać własne klasy ciała

WordPress ma filtr, który można wykorzystać do dodawania niestandardowych klas ciała w razie potrzeby. Pokażemy Ci, jak dodać klasę body za pomocą filtra, zanim pokażemy Ci konkretny scenariusz użycia, aby wszyscy mogli być na tej samej stronie.

Ponieważ klasy body są specyficzne dla motywu, musisz dodać następujący kod do funkcji motywu.plik php.

function my_class_names ($classes) {
	// dodaj 'class-name' do tablicy $classes
	$classes [] = 'wpb-class';
	// zwraca tablicę $classes
	return $ classes;
}

// Teraz Dodaj klasę testową do filtra
add_filter ('body_class', 'my_class_names');

Powyższy kod doda klasę „wpb-class”do tagu body na każdej stronie w Twojej witrynie. Nie jest tak źle, prawda?

Teraz możesz użyć tej klasy CSS bezpośrednio w arkuszu stylów szablonu. Jeśli pracujesz nad własną stroną internetową, Możesz również dodać CSS za pomocą niestandardowej funkcji CSS w theme customizer.

Dodawanie klasy ciała za pomocą wtyczki WordPress

Jeśli nie pracujesz nad projektem klienta i nie chcesz pisać kodu, ta metoda będzie dla ciebie łatwiejsza.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę Custom Body Class. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji musisz odwiedzić Ustawienia ” Niestandardowa Klasa Nadwozia strona. Stąd możesz skonfigurować ustawienia wtyczki.

Możesz wybrać typy postów, w których chcesz włączyć funkcję klasy body i kto może uzyskać do niej dostęp. Nie zapomnij kliknąć przycisku zapisz zmiany, aby zapisać swoje ustawienia.

Następnie możesz przejść do edycji dowolnego postu lub strony w witrynie WordPress. Na ekranie edycji postu znajdziesz nowe pole meta w prawej kolumnie o nazwie 'klasy Post’.

Kliknij, aby dodać własne klasy CSS. Możesz dodać wiele klas oddzielonych spacją.

Po zakończeniu możesz po prostu zapisać lub opublikować swój post. Wtyczka doda teraz Twoje niestandardowe klasy CSS do klasy body dla tego konkretnego postu lub strony.

Używanie znaczników warunkowych z klasą Body

Prawdziwa moc funkcji body_class pojawia się, gdy jest używana z tagami warunkowymi.

Te warunkowe tagi są true lub false typy danych, które sprawdzają, czy warunek jest true lub false w WordPress. Na przykład znacznik warunkowy is_home sprawdza, czy aktualnie wyświetlana strona jest stroną główną, czy nie.

Pozwala to twórcom motywów sprawdzić, czy warunek jest true, czy false przed dodaniem niestandardowej klasy CSS do funkcji body_class.

Rzućmy okiem na kilka przykładów użycia znaczników warunkowych do dodawania własnych klas do klasy body.

Załóżmy, że chcesz zmienić styl swojej strony głównej dla zalogowanych użytkowników z rolą użytkownika autora. Podczas gdy WordPress automatycznie generuje .spis treści oraz .zalogowany klasa, nie wykrywa roli użytkownika ani nie dodaje jej jako klasy.

Jest to scenariusz, w którym możesz użyć znaczników warunkowych z niestandardowym kodem, aby dynamicznie dodać niestandardową klasę do klasy body.

Aby to osiągnąć, dodasz następujący kod do funkcji motywu.plik php.

function wpb_loggedin_user_role_class ($classes) { 

// sprawdźmy czy jest to strona główna
if (is_home() ) {

// Teraz sprawdźmy, czy zalogowany użytkownik ma rolę autora.  
$user = wp_get_current_user();
if (in_array ('autor', (array) $user - >role)) {
    // Użytkownik ma rolę "autora"
    // Dodaj rolę użytkownika do klasy body
    $classes [] = 'autor';
    // Zwraca tablicę klas
    return $ classes;      
} 
} else { 
// jeżeli nie jest to homepage, wtedy zwracamy tylko klasy domyślne
return $ classes; 
}
} 

add_filter ('body_class', 'wpb_loggedin_user_role_class');

Spójrzmy teraz na inny użyteczny przykład. Tym razem Sprawdzimy, czy wyświetlana strona jest podglądem wersji roboczej WordPress.

W tym celu użyjemy warunkowego tagu is_preview, a następnie dodamy naszą własną klasę CSS.

function add_preview_class ($classes) { 
if (is_preview() ) {
$classes [] = 'preview-mode';
return $ classes;
}
return $ classes; 
}
add_filter ('body_class', 'add_preview_class');

Teraz dodamy następujący CSS do arkusza stylów naszego motywu, aby wykorzystać nową niestandardową klasę CSS, którą właśnie dodaliśmy.

.tryb podglądu .site-header: before { 
content: 'tryb podglądu';
color: # FFF;
background-color: # ff0000;
}

Tak to wyglądało na naszej stronie demo:

Możesz sprawdzić pełną listę tagów warunkowych, których możesz użyć w WordPress. To daje poręczny zestaw gotowych do użycia znaczników dla kodu.

Inne przykłady dynamicznego dodawania własnych klas ciała

Oprócz znaczników warunkowych możesz również użyć innych technik do pobierania informacji z bazy danych WordPress i tworzenia niestandardowych klas CSS dla klasy body.

Dodawanie nazw kategorii do klasy body pojedynczej strony postu

Załóżmy, że chcesz dostosować wygląd pojedynczych postów na podstawie kategorii, w której są umieszczone. Możesz użyć klasy body, aby to osiągnąć

Po pierwsze, musisz dodać nazwy kategorii jako klasę CSS na stronach pojedynczego postu. Aby to zrobić, dodaj następujący kod do funkcji szablonu.plik php:

// Dodaj kategorię nicenames w klasie body
function category_id_class ($classes) {
    global $post;
    foreach ((get_the_category ($post->ID)) as $category)
        $classes [] = $category - >category_nicename;
    return $ classes;
}
 
add_filter ('body_class', 'category_id_class');

Powyższy kod doda klasę kategorii w klasie body dla pojedynczych stron postów. Następnie możesz użyć klas CSS do stylizacji według własnego uznania.

Dodawanie page slug do klasy body

Wklej następujący kod w funkcjach szablonu.plik php:

// Page Slug Body Class
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');

Wykrywanie przeglądarki i specyficzne dla przeglądarki klasy ciała

Czasami możesz natknąć się na problemy, w których Twój motyw może potrzebować dodatkowego CSS dla konkretnej przeglądarki.

Dobrą wiadomością jest to, że WordPress automatycznie wykrywa przeglądarkę po załadowaniu, a następnie tymczasowo przechowuje te informacje jako zmienną globalną.

Wystarczy sprawdzić, czy WordPress wykrył określoną przeglądarkę, a następnie dodać ją jako niestandardową klasę CSS.

Po prostu skopiuj i wklej następujący kod w funkcjach szablonu.plik php:

function wpb_browser_body_class ($classes) { 
	global $is_iphone, $is_chrome, $is_safari, $is_NS4, $is_opera, $is_macIE, $is_winIE, $is_gecko, $is_lynx, $is_IE, $is_edge;

if ($is_iphone) $classes [] = 'iphone-safari';
elseif ($is_chrome) $classes [] = 'google-chrome';
elseif ($is_safari) $classes [] = 'safari';
elseif ($is_NS4) $classes [] = 'netscape';
elseif ($is_opera) $classes [] = 'opera';
elseif ($is_macIE) $classes [] = 'mac-ie';
elseif ($is_winIE) $classes [] = 'windows-ie';
elseif ($is_gecko) $classes [] ='firefox';
elseif ($is_lynx) $classes [] = 'lynx';
elseif ($is_IE) $classes [] = 'internet-explorer';
elseif ($is_edge) $classes [] = 'ms-edge';
else $classes [] = 'unknown';
	
return $ classes;
}
add_filter ('body_class', 'wpb_browser_body_class');

Następnie można korzystać z takich klas jak:

. ms-edge .nawigacja {jakiś element idzie tutaj}

Jeśli jest to mały problem z wypełnieniem lub marginesem, jest to dość łatwy sposób na jego naprawienie.

Jest zdecydowanie o wiele więcej scenariuszy, w których użycie funkcji body_class może uchronić Cię przed pisaniem długich linii kodu. Na przykład, jeśli używasz struktury motywu, takiej jak Genesis, możesz jej użyć do dodania niestandardowych klas do motywu podrzędnego.

Możesz użyć funkcji body_class, aby dodać klasy CSS dla układów stron o pełnej szerokości, zawartości paska bocznego, nagłówka i stopki itp.

Mamy nadzieję, że ten artykuł pomógł Ci nauczyć się korzystać z klasy ciała WordPress w swoich motywach. Możesz również zobaczyć nasz artykuł o tym, jak inaczej stylizować każdy post WordPress oraz nasze porównanie najlepszych wtyczek do tworzenia stron WordPress.

Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.