Jak zmienić wygląd strony w zależności od kategorii w WP?
Niekiedy jest tak, że potrzebujemy wyróżnić w indywidualny sposób daną kategorię, jej nagłówek, kolor, czcionkę, kategorię czy może nawet szerokość strony. W tej części pragnę pokazać, jak można to w bardzo prosty sposób zrobić, i jak zarządzać tym, aby nasze pliki nie posiadały za chwilę tysięcy linijek kodu.
Chcemy uzyskać możliwość stworzenia indywidualnego wyglądu względem kategorii, w której jesteśmy, aby to zrobić, skorzystamy z poniższego kodu:
1 2 3 | <?php foreach((get_the_category()) as $category) { $category->cat_name . ' '; } ?> <?php if ($category->cat_name == 'kategoria1') { ?> <?php } ?> |
Jak widzimy, kod ten jest stosunkowo zrozumiały. Pobiera kategorie, sprawdza, czy znajdujemy się w kategorii o nazwie “kategoria1”, po czym jeżeli jest to prawdą, wyświetla nam zawartość if’a. Dlaczego wszędzie wstawiłem znaczniki php?. Dlatego, że dzięki temu łatwiej będzie dodawać kolejny elementy, niebędące już kodem php.
Nazwę kategorii wyświetlamy w poniższy sposób:
1 | <?php foreach((get_the_category()) as $category) { echo $category->cat_name . ' '; } ?> |
Widzimy, że po raz kolejny pobieramy wszystko i wyświetlamy kategorie. Zostawiam to w taki sposób, ponieważ dzięki temu powyższy kod można od raz przykleić do swojego motywu/kodu.
Innymi słowy, jeżeli chcemy, żeby tylko kategoria “kategoria1” wyświetlała się na czerwono, wystarczy, że stworzymy poniższy kod:
1 2 3 4 | <?php foreach((get_the_category()) as $category) { $category->cat_name . ' '; } ?> <?php if ($category->cat_name == 'kategoria1') { ?> <span class="czerwone"><?php foreach((get_the_category()) as $category) { echo $category->cat_name . ' '; } ?></span> <?php } ?> |
I w arkuszu styli dodasz:
1 2 3 | span.czerwone { color: red; } |
Jeżeli mamy 2 kategorie, kod wygląda następująco:
1 2 3 4 5 6 7 8 9 | <?php foreach((get_the_category()) as $category) { $category->cat_name . ' '; } ?> <?php if ($category->cat_name == 'kategoria1') { ?> <span class="czerwone"><?php foreach((get_the_category()) as $category) { echo $category->cat_name . ' '; } ?></span> <?php } ?> <?php foreach((get_the_category()) as $category) { $category->cat_name . ' '; } ?> <?php if ($category->cat_name == 'kategoria2') { ?> <span class="zielone"><?php foreach((get_the_category()) as $category) { echo $category->cat_name . ' '; } ?></span> <?php } ?> |
Teraz powstanie nam problem, co zrobić, jeżeli mamy 5 kategorii, a plików, do których trzeba to wkleić, jest 10? Co zrobić, jak trzeba będzie coś zmienić?
Otóż najprościej zamknąć powyższy kod w dodatkowym pliku o nazwie np. kolorykategorii.php, czyli zawartość pliku to:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <?php /** * zmiana kolorów dla kategorii */ ?> <?php foreach((get_the_category()) as $category) { $category->cat_name . ' '; } ?> <?php if ($category->cat_name == 'kategoria1') { ?> <span class="czerwone"><?php foreach((get_the_category()) as $category) { echo $category->cat_name . ' '; } ?></span> <!-- dowolny kod --> <?php } ?> <?php foreach((get_the_category()) as $category) { $category->cat_name . ' '; } ?> <?php if ($category->cat_name == 'kategoria2') { ?> <span class="zielone"><?php foreach((get_the_category()) as $category) { echo $category->cat_name . ' '; } ?></span> <!-- dowolny kod --> <?php } ?> |
Umieścić go w głównym folderze z plikiem i odwoływać się do niego w miejscu, w których go potrzebujemy, używając poniższego kodu:
1 | <?php get_template_part( 'kolorykategorii' ); ?> |
Istnieje prostsza metoda, możemy po prostu stylować według kategorii, wystarczy po pobraniu kategorii, zastosować poniższy kod:
1 | <span class="<?php echo $cat->slug; ?>"><?php echo $cat->name; ?></span> |
W ten sposób można zmienić o wiele prościej kolor kategorii i mniej obciążać bazę. Dzięki temu wszędzie, gdzie wkleimy ten kod, będziemy mogli wywoływać zawartość pliku kolorykategorii.php, co znacznie ułatwi nam pracę. Będziemy mogli wykorzystać go wielokrotnie, kopiując jedną linijkę i łatwiej będzie nam wprowadzać zmiany.
Przykładowo dzięki takiemu rozwiązaniu możemy wyświetlić nagłówki graficzne dla każdej kategorii inne, wystarczy dodać:
<img src=”adres.jpg”>
Nagle wszystko staje się tak proste, jak dodanie obrazka na stronę. W if’ie możemy zamieścić wszystko, na co mamy ochotę.
W razie potrzeby możemy też wyświetlić wpisy tylko z danej kategorii, wystarczy dodać poniższy kod. Dzięki zastosowaniu “(is_category() || is_single())” zawartość wyświetli nam się tylko na podstronie kategorii lub pojedynczego wpisu.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <ul> <?php global $post; if(is_category() || is_single()){ foreach(get_the_category() as $category) { $current = $category->cat_ID; $current_name = $category->cat_name; $myposts = get_posts(array('category__in' => array($current))); } } foreach($myposts as $post) : setup_postdata($post); ?> <li><a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a> </li> <?php endforeach; ?> <?php wp_reset_query(); ?> </ul> |
Linkiem będzie oczywiście tytuł wpisu. Koniecznie należy pamiętać o “ <?php wp_reset_query(); ?> “, dzięki czemu unikniemy problemów w sytuacji, kiedy podobnych pętli na jednej podstronie będzie więcej niż jedna.
Przedstawiony kod nie jest najbardziej optymalny. Starałem się, aby był najbardziej czytelny i uniwersalny.