W artykule:
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:
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:
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:
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:
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:
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:
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]
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:
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:
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:
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:
To daje mi jeszcze trzy kolory. Zielony dla essentials:
Czerwony dla ultimate:
I na koniec żółty dla aplikacje:
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:
A oto efekt jaki ma na moim blogu:
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.
Tagi:
