Jak zmienić wygląd strony w zależności od kategorii w WP?5 min read

13 Sie, 2015 Wordpress 4 komentarze Karol Trybulski

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:

<?php foreach((get_the_category()) as $category) { $category->cat_name . ' '; } ?>
<?php if ($category->cat_name == 'kategoria1') { ?>      
<?php  } ?>

<?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:

<?php foreach((get_the_category()) as $category) { echo $category->cat_name . ' '; } ?>

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:

<?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 == 'kategoria1') { ?>

<?php foreach((get_the_category()) as $category) { echo $category->cat_name . ' '; } ?>

<?php } ?>

I w arkuszu styli dodasz:

Czytaj Dodawanie i wyświetlanie pól w profilu użytkownika WP

span.czerwone { 
  color: red;
}

span.czerwone {

color: red;

}

Jeżeli mamy 2 kategorie, kod wygląda następująco:

<?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  } ?>

<?php foreach((get_the_category()) as $category) { $category->cat_name . ' '; } ?>

<?php if ($category->cat_name == 'kategoria1') { ?>

<?php foreach((get_the_category()) as $category) { echo $category->cat_name . ' '; } ?>

<?php } ?>

<?php foreach((get_the_category()) as $category) { $category->cat_name . ' '; } ?>

<?php if ($category->cat_name == 'kategoria2') { ?>

<?php foreach((get_the_category()) as $category) { echo $category->cat_name . ' '; } ?>

<?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:

<?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  } ?>

<?php

/**

* zmiana kolorów dla kategorii

<?php foreach((get_the_category()) as $category) { $category->cat_name . ' '; } ?>

<?php if ($category->cat_name == 'kategoria1') { ?>

<?php foreach((get_the_category()) as $category) { echo $category->cat_name . ' '; } ?>

<?php } ?>

<?php foreach((get_the_category()) as $category) { $category->cat_name . ' '; } ?>

<?php if ($category->cat_name == 'kategoria2') { ?>

<?php foreach((get_the_category()) as $category) { echo $category->cat_name . ' '; } ?>

<?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:

Czytaj Ochrona przed spamem w WordPress bez wtyczek

<?php get_template_part( 'kolorykategorii' ); ?>

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:

<span class="<?php echo $cat->slug; ?>"><?php echo $cat->name; ?></span>

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.

<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>

<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);

<?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.

Czytaj Modyfikacje standardowego RSS'a WP

Przedstawiony kod nie jest najbardziej optymalny. Starałem się, aby był najbardziej czytelny i uniwersalny.

Artykuły

O Karol Trybulski

Przygodę z tworzeniem stron zaczynał kiedy modny był HTML 3. Teraz tworzy nie tylko strony, ale i skutecznie je pozycjonuje. Od końca 2014 kieruje własną marką inBulb.pl

Pełna pętla WordPress - 27 grudnia 2016
WordPress i Wcag czy można łatwo spełnić wymagania? - 3 października 2016
Kanibalizacja słów kluczowych, wstępna diagnoza i naprawa na WordPress - 20 września 2016
7 prostych rozwiązań dla WordPress - 29 sierpnia 2016
Google Tag Manager i WordPress – błyskawiczny przepis - 3 sierpnia 2016
Jak uruchomić Instant Articles i Google AMP na WordPress ? - 8 lipca 2016
Rejestracja użytkowników na stronie WordPress, kompleksowe rozwiązanie palącego problemu - 1 czerwca 2016
PIWIK i WordPress, dlaczego warto spojrzeć na te statystyki - 30 maja 2016
Buddypress, czyli społeczność na WordPressie - 10 maja 2016
Instalacja płatnego motywu dla WordPress - 11 kwietnia 2016

4 komentarze

Jan Kamiński - Odpowiedz
13 sierpnia 2015 at 17:35
Też niedawno potrzebowałem tego! Bardzo dobry artykuł!
Sebastian - Odpowiedz
14 sierpnia 2015 at 07:44
Hmm, a nie lepiej wykorzystać category-$slug.php ?
http://wphierarchy.com/
- karol - Odpowiedz
  14 sierpnia 2015 at 14:22
  Hej!
  W zależności od tego co kto lubi, tak mu będzie wygodniej. Rozwiązań tego probelmu jest pewnie kilka. Przedstawiłem ten ponieważ łatwiej jest go (moim zdaniem) rozbudować o jakąś konfiguracje w panelu administratora WordPress w porównaniu do rozwiązania opartego o nowe pliki.
  Na pewno ważne uzupełnienie z Twojej strony, dzięki.
Mateusz - Odpowiedz
14 sierpnia 2015 at 13:34
Hmm fajny pomysł i spore ułatwienie dla mnie, postaram się to wprowadzić na mojej stronie i zobaczymy co z tego wyjdzie.
Pozdrawiam Mateusz.

Czego szukasz?

Jak zmienić wygląd strony w zależności od kategorii w WP?5 min read

O Karol Trybulski

4 komentarze

Jan Kamiński - Odpowiedz

Sebastian - Odpowiedz

karol - Odpowiedz

Mateusz - Odpowiedz

Zostaw odpowiedź

Przeczytaj inne:

Posumowanie roku 2015 – najpopularniejsze artykuły w 2015