kminek.pl | HTML, PHP, CSS, JavaScript, WordPress, kursy, skrypty, blog

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 Kultura
• tag-smieszne – taka klasa zostanie przypisana do wpisu z tagiem śmieszne
• sticky – 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.