WP-DOC

Pisanie motywu

02.12 Tagi

Ostatnia modyfikacja: 05.04.2021

Tagami zarządzamy za pomocą panelu administratora WordPress. W panelu wybieramy Wpisy - Tagi. Utworzone tam tagi można przypisać do artykułu. Utwórz klika tagów, a następnie dodaj je do postów. Dodając tagi do postów, dodaj je w taki sposób, aby kilka artykułów posiadało wspólny tag. W ten sposób uzyskamy lepszy efekt wyświetlania wpisów pod dany tag, w motywie który tworzymy.

Wyświetlanie tagów w poście

Do wyświetlenia listy tagów służy funkcja the_tags(). W pliku single.php umieśćmy funkcję tuż przed instrukcją zamykającą pętle endwhile.

single.php – wyświetlanie tagów w poście – fragment kodu

<?php
while (have_posts()) : the_post();
    ?>
    <article class="post_article post_article_single">
        Tutaj kod wyświetlający post
    </article>

    <?php 
    the_tags();
        
endwhile;
?>

Powyższe wyświetlenie tagów będzie wyglądać jak na zdjęciu niżej.

Tagi na stronie
Wyświetlanie tagów pod wpisem na blogu.

Jak można zauważyć, automatycznie każdy tag staje się linkiem. Po jego kliknięciu, zostaną załadowane wszystkie wpisy, które posiadają przypisany dany tag. To w jakim pliku zostaną załadowane wpisy, wynika z hierarchii plików WrodPress.

Stylizacja tagów

Funkcja the_tags(), może przyjąć trzy parametry:

  1. Ciąg, który ma się pojawić przed tagami. Domyślnie to Tagi.
  2. Ciąg do użycia między tagami.
  3. Ciąg, który ma się pojawić po tagach.

Dzięki tym parametrom, tagi można wyświetlić przy pomocy listy nieuporządkowanej. Zmodyfikowany kod będzie wyglądał jak na listingu niżej.

single.php – wyświetlanie tagów jak listy nieuporządkowanej – fragment kodu

<?php
while (have_posts()) : the_post();
    ?>
    <article class="post_article post_article_single">
        Tutaj kod wyświetlający post
    </article>

    <?php 
     the_tags('<ul><li>','</li><li>','</li></ul>');;
        
endwhile;
?>

Dla lepszej prezentacji tagów na stronie dodaj trochę kodu HTML, jak na listingu niżej.

single.php – stylizacja tagów – fragment kodu

<div class="tag_list">
    <p>TAGI</p>
    <?php 
    the_tags('<ul><li>','</li><li>','</li></ul>');
    ?>
</div>

W pliku style.css, nadaj style dla tagów. Mogą one wyglądać jak na listingu niżej. Kod został opatrzony odpowiednimi komentarzami. Możesz go umieścić gdzieś od 195 linii kodu.

style.css – stylizacja tagów

/* STYLE TAGÓW DLA WPISU */
.tag_list {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    background: rgb(255,255,255);
    border: 5px solid rgb(255,255,255);
    box-shadow: 0 0 7px rgb(205,205,205);
}

.tag_list ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-transform: uppercase;
    font-size: .9em;
}

.tag_list ul li {
    display: inline-block;
    padding: 0 15px;
}

.tag_list ul li a {
    color: rgb(41,128,185);
    text-decoration: none;
}

.tag_list ul li a:hover {
    text-decoration: underline;
}
/* --------------------------------- */

Wyświetlanie tagów w motywie powinno wyglądać jak na zdjęciu niżej.

Wygląd tagów w motywie
Wygląd tagów w motywie

Czy tagi istnieją

Za pomocą funkcji has_tag(), można sprawdzić czy do wpisu został przypisany choć jeden tag. Jeżeli tak funkcja zwróci true, jeżeli nie funkcja zwróci false. Na listingu niżej zmodyfikowany kod w pliku single.php sprawdzający czy do postu został przypisany choć jeden tag.

single.php – sprawdzenie czy do wpisu został przypisany choć jeden tag – fragment kodu

<?php
if(has_tag()) {
    ?>
    <div class="tag_list">
        <p>TAGI</p>
        <?php 
        the_tags('<ul><li>','</li><li>','</li></ul>');
        ?>
    </div>
    <?php
}
?>

Wyświetlanie wpisów dla tagu

Jak pisałem wyżej WordPress przy wyświetlaniu tagów, tworzy automatycznie link do wpisów z danym tagiem. W motywie, na którym pracujemy stworzymy osobny plik o nazwie tag.php. W pliku tym będą wyświetlane wpisy, po kliknięciu tagu. Jego budowa będzie niemal identyczna jak category.php. Dlatego warto skopiować ten plik i zmienić jego nazwę na tag.php. Z pliku należy usunąć instrukcję warunkową sprawdzającą jaka kategoria jest aktualnie kliknięta. Kod do usunięcia na listingu niżej

tag.php – kod do usunięcia po skopiowaniu pliku category.php – fragment kodu

$info_cat = get_the_category(); 
if(is_category(2)) {
    echo '<p class="cat_name cat_name_gray">'.$info_cat[0]->name.'</p>';
} else if(is_category(3)) {
    echo '<p class="cat_name cat_name_blue">'.$info_cat[0]->name.'</p>';
} else if(is_category(4)) {
    echo '<p class="cat_name cat_name_orange">'.$info_cat[0]->name.'</p>';
}

Zamiast kodu z listingu wyżej, będziemy wyświetlać aktualną nazwę tagu za pomocą funkcji single_tag_title(), która przyjmuje dwa parametry.

  1. Ciąg znaków, który ma się pojawić przed tagiem
  2. Określenie czy wyświetlić czy pobrać nazwę tagu. Domyślnie true (wyświetlić). Parametr ten nie jest wymagany.

Wykorzystanie funkcji w pliku tag.php będzie mieć postać jak na listingu niżej.

tag.php – wyświetlanie nazwy tagu – fragment kodu

<div class="content_post">
    <p class="name_tag_post"><?php single_tag_title('Przeglądasz wpisy dla tagu: ') ?></p>
    <?php
        while (have_posts()) : the_post();
        ?>
            <article class="post_article">
                Tutaj kod odpowiedzialny za wyświetlenie postu
            </article>
                    
        <?php
    endwhile;
    ?>
    <div class="pagination"><?php pagination(); ?></div>
</div>

Dla akapitu w pliku style.css dodaj krótki kod styli,jak na listingu niżej, aby uatrakcyjnić wygląd motywu.

style.css – style dla tagu w pliku tag.php

.name_tag_post {
    padding: 20px;
    background: rgb(52,152,219);
    color: rgb(255,255,255);
}

Aktualna nazwa tagu dla wpisów, w pliku tag.php, powinna wyglądać jak na zdjęciu niżej.

Nazwa tagu dla wpisów
Stylizacja nazwy tagu dla wpisów

Jeżeli w funkcji single_tag_title() nie podamy żadnych parametrów, zostanie wyświetlona tylko nazwa tagu.

Czytaj dalej…

02.13 Dzielenie motywu na mniejsze części

Zobacz również

Jeżeli wiesz czym jest panel boczny sidebar – zobacz artykuł 05.04 Podobne wpisy – alternatywa dla chmurki tagów

KOMENTARZE

Jeżeli masz pytanie lub sugestie dotyczącą artykułu to napisz komentarz. Wartościowe komentarze zostaną umieszczone jako opinie warte uwagi.

Napisz komentarz

Wszystkie pola są obowiązkowe. E-mail nie będzie udostępniony, ani wykorzystywany do rozsyłania wiadomości reklamowych.

Jeszcze nikt nie napisał komentarza.