Jedną z rzeczy, które kocham w WordPressie, jest jego elastyczność. Możesz go użyć do uruchomienia prostego bloga, jako systemu zarządzania treścią o dużej mocy lub do kierowania niestandardowymi aplikacjami.

W ramach tworzenia motywów jednym z aspektów, który daje dużą elastyczność, jest użycie tagów szablonów. Będą one dynamicznie pobierać dane i umożliwiać wyświetlanie treści w sposób, który działa dla Twojego projektu.

W tym poście skupię się na dwóch bardzo specyficznych tagach szablonów: body_class() oraz post_class() tagi. Pokażę Ci, jak WordPress wykorzystuje je do dynamicznego generowania klas CSS w Twojej witrynie i jak możesz ich użyć do stylizacji bloga lub strony internetowej.

W szczególności pokażę Ci, jak używać tych klas do stylizowania zawartości z różnych kategorii, dodając do każdej z nich określone kolory, efekty tekstowe lub stylizację układu. W ten sposób możesz nadać różnym sekcjom swojej witryny inny wygląd, a także wzbogacić swoje strony archiwalne, nadając różnym kategoriom własną stylizację, dzięki czemu użytkownicy mogą natychmiast znaleźć rodzaj treści, których szukają.

Czego potrzebujesz

Aby śledzić wraz z tym postem, musisz następujące:

  • Instalacja rozwojowa WordPress (nie rób tego na swojej stronie NA ŻYWO, dopóki nie będziesz całkowicie zadowolony z wyników).
  • Własny motyw lub motyw potomny motywu strony trzeciej. Nie edytuj bezpośrednio motywu innej firmy, ponieważ po jego późniejszej aktualizacji wszystkie zmiany zostaną utracone.
  • Edytor kodu.

Identyfikowanie i używanie znaczników szablonu

Najpierw rzućmy okiem na znaczniki szablonów. Powinny one być obecne w każdym motywie-jeśli nie są w Twoim, upewnij się, że je dodasz!

Znacznik szablonu body_class()

Pierwszym znacznikiem szablonu jest body_class() tag szablonu. To idzie w Twoim temacie nagłówek.php Plik, z otwieraniem ciało element.

Kodujesz to w ten sposób:

Ładowanie gist fa1aa4761c930017c5454d62b657de25

Gdy to zrobisz, przekonasz się, że WordPress generuje szereg klas dla ciało element na każdej stronie w witrynie, w zależności od rodzaju wyświetlanej zawartości i używanego pliku szablonu.

Oto wygenerowany kod do strony głównej mojej strony:

css classes output by body_class template tag - home page
Ostatnie body_class w HTML mojej strony domowej

Przyjrzyjmy się temu, co mówi nam każda z tych klas:

  • spis treści: to jest strona główna serwisu.
  • strona-szablon: używa szablonu strony, ponieważ jest to strona statyczna.
  • page-template-page-full-width: szablon, którego używa strona.
  • page-template-page-full-width.php: pełna nazwa używanego pliku szablonu.
  • strona: typ zawartości. Gdyby moja strona główna była główną stroną bloga, byłoby inaczej.
  • strona-id-7: ID tej konkretnej strony.

A oto kod wygenerowany dla strony archiwum kategorii:

css classes output by body_class template tag - category archive
Final body class HTML dla strony archiwum kategorii

To mówi nam kilka różnych rzeczy:

  • archiwum: jest to strona archiwalna, a nie pojedynczy post lub strona.
  • Kategoria: to archiwum kategorii.
  • Kategoria-podstawy: wyświetlane jest konkretne archiwum kategorii.
  • Kategoria-154: ID tej kategorii.

Być może już wyobrażasz sobie rodzaj zawartości, której możesz użyć do kierowania za pomocą tych klas CSS:

  • indywidualny post lub strona
  • archiwum kategorii
  • Strona główna
  • wszystkie archiwa kategorii, czyli wszystkie archiwa dla danej taksonomii zwyczajowej.

Ale zanim przejdziemy do tego, rzućmy okiem na drugi z naszych znaczników szablonów.

Znacznik szablonu post_class ()

Ten następny znacznik szablonu jest używany w pętli. Jeśli więc masz wiele plików pętli w swoim szablonie (wiele plików dołączania lub wiele pętli zakodowanych w plikach szablonów), musisz dodać go do każdego z nich.

Zwykle dodajesz go z otwarciem < artykuł> element, który będzie zawierał twój post:

Ładowanie gist fa1aa4761c930017c5454d62b657de25

Zauważ, że dodałem tutaj dwie rzeczy do mojego artykułu: nie tylko post_class() tag, ale także ID za pomocą post ID. Jak zobaczymy, ta wartość jest następnie generowana zarówno jako klasa, jak i identyfikator elementu.

Przyjrzyjmy się, jak to jest wyjście na stronie głównej:

post class output css classes home page
Wyjście klasy Post

Mamy kilka klas, z którymi możemy pracować.:

  • post-7: the post ID
  • strona: typ postu. Strona główna mojej witryny jest stroną statyczną.
  • Typ-Strona: inny sposób pokazywania typu posta
  • status-publikuj: ta strona jest publikowana (nie jest to wersja robocza ani planowana)
  • has-post-thumbnail: ta strona ma miniaturkę postu (nie coś, co zawsze byś widział, ale dodałem polecane obrazy do moich stron na tej stronie).
  • hentry: Klasa używana do stylowania postów w kanałach RSS.

Teraz rzućmy okiem na nasze archiwum kategorii:

post class output css classes category archive
Wyjście klasy Post dla archiwum kategorii

To daje nam całą masę klas wyjściowych. Przyjrzyjmy się im.

  • post-2522: ID posta.
  • post: typ postu.
  • Typ-post: typ postu ponownie.
  • status-publikuj: this post has been published.
  • format-standard: format postu dla tego postu.
  • has-post-thumbnail: ten post ma miniaturkę lub polecany obraz. Szczególnie przydatny do stylizacji stron archiwalnych, w których chcesz umieścić polecane obrazy, dzięki czemu te posty, które ich nie mają, można dostosować.
  • hentry: dla RSS.
  • Kategoria-podstawy, Kategoria-roundupy: kategorie, w których znajduje się ten post.
  • tag-admin itd.: tagi dla tego posta.

Polecam poświęcić trochę czasu na zbadanie własnej witryny i przyjrzenie się klasom wyjściowym. Nie są to tylko pojedyncze posty i archiwa, które je mają-możesz ich użyć na przykład do kierowania stron 404 lub wyszukiwania.

Daje nam to dużą elastyczność w stylizacji poszczególnych postów, na ich własnej stronie lub w archiwach. Przyjrzyjmy się temu, jak to zrobić.

Używanie body_class () i post_class () do stylizacji

Teraz wiesz, jak te znaczniki szablonów są kodowane i co robią, przejdźmy do tego, jak możemy z nich korzystać.

Pokażę wam przykład, który nadaje inny kolor różnym kategoriom i używa go do stylizacji postów i archiwów kategorii. Jest to jedno z najczęstszych zastosowań tych tagów, które widziałem, chociaż innym popularnym jest nadawanie sticky postom własnej stylizacji.

Wszystko to robisz w arkuszu stylów swojego motywu, więc jeśli używasz motywu innej firmy, nie zapomnij utworzyć motywu podrzędnego. Będziesz także musiał dostosować mój kod do konkretnych kategorii w Twojej witrynie, niezależnie od tego, czy zdecydujesz się użyć identyfikatora, czy ślimaka (więcej wkrótce).

[blog]
learn wp blog page
Kolorowa Nauka-blog WP

Zauważysz, że używa to niebieskich tytułów postów zgodnie ze stylizacją nagłówka i pasków bocznych mojej witryny. Jest to stylizacja, której używam do wszystkich ogólnych stron archiwalnych.

Oto CSS, który stylizuje go:

Ładowanie gist fa1aa4761c930017c5454d62b657de25

Stylizacja za pomocą tagu body_class

Wystarczająco proste. Ale zauważysz na tym zrzucie ekranu, że na pasku bocznym znajdują się cztery główne kategorie, z których każda ma swój własny kolor. Chcę użyć tego do stylizacji archiwów kategorii dla każdej z tych czterech kategorii.

Oto stylizacja na podstawy Kategoria:

Ładowanie gist fa1aa4761c930017c5454d62b657de25

Skąd mamy wiedzieć, na co celuję z tą stylizacją? Można to powiedzieć po tym, że używam .Kategoria-podstawy zajęcia przed # content Dowód. Więc celuję w Kategoria-podstawy klasa, która jest wyprowadzana z tagiem body przez body_class() tag szablonu.

Uwaga: użyłem klasy, która zawiera ślimak kategorii. Jeśli masz wielu użytkowników w swojej witrynie i uważasz, że mogą zmienić plik slug, Użyj klasy ID kategorii.

Oto wynikowa strona archiwum:

basics category archive with its own styling
Learn-WP Category Archive page with custom colors

Możesz zobaczyć, że używa koloru kategorii dla tytułów postów, obramowania pod każdym postem i tła opisu kategorii.

Dodałem również podobną stylizację dla trzech innych kategorii:

Ładowanie gist fa1aa4761c930017c5454d62b657de25

To daje mi jeszcze trzy kolory. Zielony dla essentials:

styled category archive - essentials
Learn-WP Essentials Category archive page with green

Czerwony dla ultimate:

Ultimate category archive page styled in red
Learn-WP Ultimate category archive page with red

I na koniec żółty dla aplikacje:

styled category archive - applications
Learn-WP Applications Category archive page with yellow

Wygląda świetnie. Ale spójrzmy na post_class() tag, i jak można go wykorzystać, aby posunąć się dalej.

Stylizacja za pomocą tagu post_class

W tej chwili moja strona ma tylko kolorową stylizację na stronach archiwum kategorii. Ale mogę również dodać stylizację, która kieruje poszczególne posty na głównej stronie bloga i używa koloru, aby podkreślić, do której kategorii należą.

Aby to zrobić, dodaję następujące elementy do mojego arkusza stylów:

Ładowanie gist fa1aa4761c930017c5454d62b657de25

A oto efekt jaki ma na moim blogu:

blog with category styling
Learn-strona bloga WP z niestandardowymi kolorami według kategorii

Mogę również dodać stylizację do dolnej krawędzi każdego postu, jeśli chcę, lub nawet nadać postom kolor tła dla ich kategorii. Ogranicza cię tylko wyobraźnia (i granice dobrego projektu).

Kierowanie na klasy Body i Post daje większą kontrolę nad projektem

Ta technika daje większą kontrolę nad stylem witryny. Jeśli masz jasne Kategorie, które oddzielają różne sekcje witryny (takie jak działy firmy lub sekcje sklepu), możesz użyć tego do stworzenia innego wyglądu lub marki dla każdej sekcji witryny. Jeśli zajdziesz wystarczająco daleko, może nawet zaoszczędzić ci korzystania z sieci wielostanowiskowej z oddzielnymi witrynami dla każdego działu w Twojej firmie.

Jak używać znaczników szablonów body_class () i post_class () do stylizacji witryny? Daj nam znać w komentarzach!

Tagi:

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd “nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

9 Najlepsze Darmowe Wtyczki WordPress Author Bio Box

W artykule: 1. Simple Author Box2. Branda3. Autor postu WP4. Author Bio…