Załóżmy, że na blogu mamy trzy kategorie – Rozrywka, Kultura i Sport. Strona główna naszego bloga pokazuje oczywiście wpisy z wszystkich trzech kategorii. Początkujący użytkownicy WP bardzo często zadają pytanie – jak sprawić, aby wpisy z danej kategorii były wizualnie odmienne od pozostałych?
Rozwiązanie tego problemu sprowadza się do napisania własnej funkcji i wpięciu jej w odpowiednie miejsce w pętlę WordPressa.
Sposób I (dla WordPressów wcześniejszych niż 2.7)
Wszystkie wpisy w WP objęte są w kodzie HTML pojemnikiem div z klasą post (oczywiście pod warunkiem, że korzystamy z domyślnej skórki).
Jako, że do elementu w HTML możemy przypisać wiele klas CSS rozdzielonych spacjami, wystarczy że dodamy odpowiednie klasy do postów z odpowiednich kategorii – dzięki czemu będziemy mogli nadać im odmienne style.
Chcemy uzyskać coś takiego:
<div class="post rozrywka"> ... </div><div class="post kultura"> ... </div><div class="post sport"> ... </div>
Zadanie generowania właściwych klas CSS w zależności od kategorii, w której znajduje się wpis powierzymy funkcji generuj_css(), którą zdefiniujemy w pliku functions.php:
function generuj_css() {foreach(get_the_category() as $kategoria) {$klasy_css .= ' ' . $kategoria->slug;}echo $klasy_css . ' ' . get_the_author();}
Kluczowym elementem naszej funkcji jest wykorzystanie wewnętrznej funkcji WP get_the_category(). Jest ona bardzo podobna do standardowej funkcji the_category(), z tą różnicą, że zamiast wyświetlać kategorie do których należy wpis zwraca je w formie tablicy. Tak samo jak w przypadku the_category() – aby zadziałała prawidłowo musi zostać umieszczona w ramach WordPressowej pętli.
Jeśli np. wpis należy tylko do kategorii Kultura get_the_category() zwraca następującą jednoelementową tablicę:
([0] => stdClass Object([term_id] => 4[name] => Kultura[slug] => kultura[term_group] => 0[term_taxonomy_id] => 4[taxonomy] => category[description] =>[parent] => 0[count] => 1[object_id] => 1[cat_ID] => 4[category_count] => 1[category_description] =>[cat_name] => Kultura[category_nicename] => kultura[category_parent] => 0))
Tablica ta jest o tyle ciekawa, że jej elementem jest obiekt, który zawiera praktycznie wszystkie informacje dotyczące danej kategorii, z których możemy skorzystać. W funkcji generuj_css() skorzystaliśmy z pola slug, które idealnie nadaje się jako nazwa klasy (nie zawiera spacji i polskich znaków).
Do listy generowanych klas CSS dopisujemy również klasę bedącą nazwą użytkownika autora konkretnego wpisu, aby możliwe było np. dołączenie odpowiedniego zdjęcia do wpisu. Wykorzystaliśmy funkcję get_the_author(), która zwraca login autora danego wpisu w postaci łańcucha tekstowego.
Napisaną funkcję wpinamy w pętlę WP w następujący sposób:
<?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?><div class="post<?php generuj_css(); ?>" id="post-<?php the_ID(); ?>">...</div><?php endwhile; ?>
Sposób II (dla WP w wersji 2.7 lub późniejszej)
Okazuje się, że wraz z nadchodzącą wersją 2.7 pojawia się w pętli WP nowa funkcja post_class(), która robi dokładnie to samo co napisana przez nas funkcja generuj_css() a nawet więcej!
Aby skorzystać z jej dobrodziejstw, zamieniamy w pętli fragment:
<div class="post" id="post-<?php the_ID(); ?>">
na:
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
Od tej pory wpisom zostaną przypisane odpowiednie klasy CSS w zależności od tego w jakiej znajdują się kategorii, jak są otagowane i czy są tzw. wpisami przyklejonymi (nowość w WP 2.7):
category-kultura– taka klasa zostanie przypisana do wpisu z kategorii Kulturatag-smieszne– taka klasa zostanie przypisana do wpisu z tagiem śmiesznesticky– taka klasa zostanie przypisana do przyklejonego wpisu (ang. sticky post)
Co ciekawe, jeśli do listy klas generowanych przez funkcje post_class() klas chcemy dopisać własną klasę, wystarczy podać łańcuch tekstowy z nazwami klas jako argument. Czyli jeśli chcielibyśmy dopisać klasę będącą nazwą użytkownika autora wpisu możemy to zrobić w ten sposób:
post_class(get_the_author());
Mam nadzieję, że powyższe informacje ułatwią wam eksperymenty z wyglądem WordPressowych wpisów.
Czy mógłbyś podać przykład fragmentu pliku css odpowiedzialny za ostylowanie postu po wprowadzeniu tej linijki kodu:
id=”post-”>
np. klasy sticky?
Sory, nie wprowadziłem otagowania. Chodzi mi o tą linijkę:
id="post-">div.sticky { ... }div.sticky p { ... }itd.Świetna rzecz! Dzięki :D