WP-DOC

Pisanie motywu

02.05 Wyświetlanie wpisów – pętla

Ostatnia modyfikacja: 01.04.2021

Pętla WordPress

Na początku skupimy się na najprostszej metodzie ładowania postów czyli bez dodatkowych danych do pętli. Pobierzemy wszystkie wpisy jakie istnieją i wyświetlimy je na stronie. Jednak zanim to zrobimy zapoznajmy się z budową pętli. Została ona przygotowana przez twórców WordPress i służy do pobierania wpisów i wyświetlania ich na stronie internetowej. Jej budowa została przedstawiona na listingu niżej.

Pętla do wyświetlania wpisów.

<?php
if (have_posts()) :
    while (have_posts()) : the_post();
        // tutaj akcje, jeżeli istnieje choć jeden post.
    endwhile;
else : 
    // Tutaj akcje, jeżeli nie istnieje żaden post.
endif;
?>

Pętla zaczyna się od instrukcji warunkowej if (have_posts()) :, która sprawdza czy istnieje choć jeden post. Jeżeli tak, pętla wewnątrz tej instrukcji zaczyna pobieranie „literuje” wszystkie posty. To wewnątrz tej pętli wyświetlimy, nagłówek, treść, obrazek wyróżniający i inne. Jeżeli żaden post nie będzie istniał, wówczas zostaną wykonane akcje po else :. Na końcu instrukcja warunkowa zostaje zamknięta endif:.

Do pętli można wprowadzać dane zmieniające jej podstawowe działanie. Na przykład można manipulować ilością wyświetlanych wpisów, z jakich kategorii posty mają zostać pobrane i wiele innych parametrów. Więcej o modyfikacji pętli dowiesz się z działu 06.Więcej o budowie motywu.

Przygotowanie pętli

Wiedząc jak zbudowana jest pętla dostosujemy ją do motywu, na którym pracujemy. Zanim dodamy kod do pętli, zobaczmy jak zbudowany jest jeden artykuł w motywie.

index.php – budowa jednego wpisu

<article class="post_article">
    <div class="post_article_img" style="background: url('<?php echo get_template_directory_uri(); ?>/images/foto-2.jpg') center center no-repeat; background-size: cover"></div>
    <div class="post_article_content">
        <h1 class="post_article_title"><a href="">Nemo labore nobis</a></h1>
        <ul class="post_article_info">
            <li>Dodano: 25.10.2020</li>
            <li><a href="">WP-DOC</a></li>
            <li><a href="">Brak komentarzy</a></li>
        </ul>
        <p>Enim laborum distinctio debitis, ullam, ex illum nihil modi eligendi
         sapiente consequuntur ipsum maxime eius totam? Eaque ipsam
         sapiente magnam, eius fugiat quidem odio sit vero maiores alias,
         error eveniet, iste magni. Nemo labore nobis, eaque quaerat
         perspiciatis beatae voluptates doloremque excepturi in corporis
         veniam rerum temporibus ea aut natus voluptatem assumenda,
         magni, aliquid commodi laudantium neque deleniti.</p>
        <p class="para_more"><a href="" class="link_more">czytaj więcej</a></p>
    </div>
</article>

Zanim cokolwiek wyświetlimy w pętli while, wewnątrz niej dodajmy „pusty szablon” wpisu, jak na listingu niżej, który będziemy uzupełniać. Całość powinna znajdować się wewnątrz elementu div o nazwie klasy content_post. Natomiast statyczne wpisy z motywu należy usunąć.

index.php – dodanie pętli pobierającej posty – fragment kodu

<div class="content_post">
<?php
if (have_posts()) :
    while (have_posts()) : the_post();
        ?>
        <article class="post_article">
            <div class="post_article_img" style="background: url('') center center no-repeat; background-size: cover"></div>
            <div class="post_article_content">
            <h1 class="post_article_title"><a href=""></a></h1>
            <ul class="post_article_info">
                <li>Dodano: [tutaj data wpisu]</li>
                    <li><a href="">[autor wpisu]</a></li>
                    <li><a href="">[liczba komentarzy]</a></li>
                </ul>
                <p></p>
                <p class="para_more"><a href="" class="link_more">czytaj więcej</a></p>
            </div>
        </article>
        <?php
    endwhile;
else : 
    // Tutaj akcje, jeżeli nie istnieje żaden post.
endif;
?>
</div>

Obrazek wyróżniający

W tym wpisie, zaprezentowałem jak dodać w panelu administratora WordPress, opcję dodania do artykułu obrazka wyróżniającego. Teraz wyświetlimy go w motywie za pomocą funkcji the_post_thumbnail_url(), jak na listingu niżej. Funkcja ta wyświetla adres url obrazka.

index.php – wyświetlenie obrazka wyróżniającego – fragment kodu

<div class="post_article_img" style="background: url('<?php the_post_thumbnail_url('large'); ?>') center center no-repeat; background-size: cover"></div>

Po wprowadzeniu zmian zapisz plik index.php i odśwież stronę. Obrazek wyróżniający przypisany do artykułu został załadowany do motywu.

Użyta funkcja the_post_thumbnail_url() wyświetla url do obrazka. Jeżeli chcesz wstawić obraz, który zostanie umieszczony za pomocą znacznika img, musisz skorzystać z funkcji the_post_thumbnail(), która została omówiona w 06.08 Miniatury postów

W funkcji the_post_thumbnail_url() użyłem argumentu large. Funkcja ta przyjmuje jeden z 4 argumentów:

  • thumbnail – rozmiar w zależności od ustawień panelu administratora;
  • medium – rozmiar w zależności od ustawień panelu administratora;
  • large – rozmiar w zależności od ustawień panelu administratora;
  • full – oryginalny rozmiar zdjęcia przesłanego na serwer.

Każdy argument określa jakiego rozmiaru grafika ma zostać załadowana. Rozmiar ten jest uzależniony od ustawień, które można zmodyfikować w panelu administracyjnym Ustawienia - Media, jak pokazano na rysunku niżej. Rozmiar grafiki w motywie jest uzależniony od kontenera, w którym się znajduje, dlatego nie ma sensu pobierania z serwera oryginalnego rozmiaru obrazu, na przykład kiedy jest on w rozdzielczości HD (1920 x 1080). Wtedy jako argument funkcji the_post_thumbnail_url() warto podać obraz o mniejszej rozdzielczości, co skróci czas ładowania zdjęcia.

Panel administracyjny WordPress - Media
Rozdzielczość poszczególnych miniatur, można zmienić w Ustawienia – Media. Rozmiar będzie odpowiadał konkretnej nazwie, którą mozna podać jako argument funkcji the_post_thumbnail_url().

Tytuł artykułu

W motywie, który piszemy tytuł jest jednocześnie linkiem do całego artykułu. Na razie pobierzemy tylko tytuł artykułu, a odnośnik zrobimy w dalszej części tego artykułu. Do wyświetlenia tytułu posta należy posłużyć się funkcją the_title(), jak na listingu niżej. Funkcja ta może być użyta tylko w pętli.

index.php – dodanie tytułu artykułu – fragment kodu

<h1 class="post_article_title"><a href=""><?php the_title(); ?></a></h1>

Dodatkowo funkcja ta może przyjąć dwa argumenty before oraz after. Odpowiednio oznaczają one co ma się znaleźć przed oraz za tytułem. Na poniższym przykładzie tytuł zostanie umieszczony wewnątrz znacznika h1.

Przykład użycia argumentów funkcji the_title().

<?php the_title('<h1>','</h1>'); ?>

Data postu / autor / ilość komentarzy

Data postu

Do wyświetlenia daty należy wykorzystać funkcję the_date(), natomiast godziny funkcję the_time(). Data oraz godzina zostaną wyświetlone w formacie, które są zdefiniowane w ustawieniach panelu administratora WordPress w dziale Ustawienia - Ogólne. Więcej przykładów oraz szerszy opis formatowania daty i czasu dla funkcji the_date() oraz the_time() w artykule 06.01 Data i godzina postu. W motywie, który tworzymy, wyświetlamy tylko datę publikacji wpisu, jak na listingu niżej.

index.php – data publikacji postu – fragment kodu

<li>Dodano: <?php the_date(); ?></li>

Autor postu

Oprócz samego imienia autora, stworzymy link, który przeniesie do wszystkich jego wpisów. Jest to opcja przydatna kiedy treści bloga tworzy kilka osób. Strona, na której będzie można przeczytać wszystkie posty danego autora zostanie utworzona później. Do wyświetlenia autora postu należy skorzystać z funkcji the_author_meta(). Funkcja ta przyjmuje wiele argumentów, a za pomocą argumentu display_name pobierzemy wyświetlaną nazwę autora. Nazwa ta jest uzależniona od ustawień użytkownika. Znajdziemy je w Użytkownicy - Profil - Przedstawiaj mnie jako, jak na zdjęciu niżej.

Panel administracyjny WP - profil użytkownika
Wyświetlana nazwa autora postów.

Opis wszystkich przyjmowanych argumentów znajdziesz w artykule 06.02 Autor postu. Imię lub pseudonim autora należy wyświetlić za pomocą echo, co zostało zaprezentowane na listingu niżej.

index-php – imię pseudonim autora postu – fragment kodu

<li><a href=""><?php echo the_author_meta('display_name'); ?></a></li>

Do utworzenia linku autora postów należy skorzystać z funkcji get_author_posts_url(). Argumentem tej funkcji jest ID użytkownika, dla którego zostanie wygenerowany link do wszystkich jego wpisów. Numer ID uzyskamy dzięki funkcji get_the_author_meta() z argumentem ID, jak pokazano na listingu niżej. Więcej o funkcji get_the_author_meta() w artykule 06.02 Autor postu.

index.php – link do wpisów autora – fragment kodu

<li><a href="<?php echo get_author_posts_url(get_the_author_meta('ID')) ?>"><?php echo get_the_author_meta('display_name'); ?></a></li>

Przy tworzeniu linku warto skorzystać z funkcji esc_url(), która oczyszcza link. Koduje znaki jako encje, na przykład znak &amp; zamieni na postać &amp;#038. Link do wpisów autora powinien wyglądać jak na listingu niżej.

index.php – link do wpisów autora – fragment kodu

<li><a href="<?php echo esc_url(get_author_posts_url(get_the_author_meta('ID'))) ?>"><?php echo get_the_author_meta('display_name'); ?></a></li>

Ilość komentarzy

Ilość komentarzy dla danego wpisu, jest jednocześnie linkiem do sekcji komentarzy w danym poście. Za to wszystko odpowiada funkcja comments_popup_link(), która przyjmuje trzy argumenty jednocześnie:

  • pierwszy to treść kiedy brak komentarzy;
  • drugi to treść dla jednego komentarza;
  • trzeci to treść dla więcej niż jednego komentarza.

Na listingu niżej użycie funkcji z podanymi argumentami. Ostatni argument zaczyna się od znaków % co będzie zamieniane na ilość komentarzy. Natomiast słowo Comments będzie tłumaczone automatycznie, w zależności od ilości komentarzy. Mianowicie w przypadku 2, 3 lub 4 będzie to komentarze w przypadku większej liczby na przykład 15 będzie to komentarzy.

index.php – ilość komentarzy – fragment kodu

<li><?php comments_popup_link('Brak komentarzy', '1 komentarz', '% Comments'); ?></li>

Zwróć uwagę, że z znacznika li został usunięty znacznik a z atrybutem href, gdyż jak pisałem wyżej funkcja comments_popup_link() sama tworzy link do sekcji komentarzy. Utworzenie sekcji komentarzy znajdziesz w dziale 04.Komentarze.

Treść artykułu

Na stronie głównej nie ładujemy całego artykułu, tylko jego fragment. Do tego możemy użyć jednej z dwóch funkcji:

  • the_content() – wyświetla fragment lub całą treść posta;
  • the_excerpt() – wyświetla fragment posta, domyślnie 55 słów.

Przygotowanie motywu

W motywie, na którym pracujemy wykorzystamy funkcję the_content(). Informacje na temat funkcji the_excerpt() znajdziesz w artykule 06.03 Fragment postu – the_excerpt(). Zanim jednak przejdziemy do prezentacji treści, musimy zmodyfikować kod HTML motywu, w którym ma się pojawiać treść postu. Warto wstawić znacznik div z nazwą klasy na przykład text_post, jak na listingu niżej. Prezentacja fragmentu wpisu w znaczniku p jest błędem, gdyż taki fragment może zawierać dwa lub więcej akapitów lub listę.

index.php – modyfikacja motywu – fragment kodu

<div class="post_article_content">
    <h1 class="post_article_title"><a href=""><?php the_title(); ?></a></h1>
    <ul class="post_article_info">
        <li>Dodano: <?php the_date(); ?></li>
        <li><a href="<?php echo get_author_posts_url(get_the_author_meta('ID')) ?>"><?php echo get_the_author_meta('display_name'); ?></a></li>
        <li><?php comments_popup_link('Brak komentarzy', '1 komentarz', '% Comments'); ?></li>
    </ul>
    <div class="text_post">
                    
    </div>
    <p class="para_more"><a href="" class="link_more">czytaj więcej</a></p>
</div>

Podział postu w panelu administratora WordPress

W panelu administratora należy edytować każdy z postów wstawiając w dowolnym miejscu blok o nazwie więcej, jak na zdjęciu niżej. Do tego miejsca zostanie wyświetlony post na stronie głównej, kategorii i wszędzie tam, gdzie będziemy chcieli zaprezentować fragment wpisu.

Panel administratora WordPress - dodawanie bloku więcej
Dodanie bloku „więcej” dla wyświetlenia fragmentu postu na stronie głównej.

Wyświetlenie fragmentów postów

Wewnątrz wcześniej utworzonego bloku div umieść funkcję the_content(), jak na listingu niżej, aby wyświetlić fragment postu. Jak pisałem wyżej funkcja ta ładuje również treść całego wpisu. System WordPress sam rozpoznaje czy ma wyświetlić fragment czy cały post.

index.php – ładowanie fragmentu postu – fragment kodu

<div class="text_post"><?php the_content(); ?></div>

Po dokonanych zmianach zapisz plik i odśwież stronę. Wówczas zobaczysz, że oprócz fragmentu postu, pojawił się również link w postaci (więcej...), jak na zdjęciu niżej. Jest to efekt działania funkcji the_content(). Co więcej link ten działa i po jego kliknięciu będziemy mieli możliwość przeczytania całego artykułu. Ten sam efekt będzie po kliknięciu linku ilości komentarzy. Dlaczego tak się dzieje, dowiesz się z części o hierarchii plików w motywie.

Post na stronie z linkiem do artykułu
Po fragmencie postu, automatycznie został dodany link do pełnego artykułu.

Funkcja the_content() przyjmuje dwa argumenty. Pierwszy z nich to treść linku, natomiast drugi to czy treść przed blokiem więcej ma zostać ukryta w całym poście. Dokonajmy modyfikacji funkcji i wewnątrz nawiasów podajmy argument zmieniający treść linku na czytaj więcej, jak na listingu niżej.

Drugi argument the_content(), decyduje o ukryciu lub pokazaniu fragmentu postu znajdujący się nad blokiem więcej przy całym wpisie. Domyślnie drugi parametr przyjmuje wartość false, co oznacza pokazanie fragmentu postu, z nad bloku więcej przy całym wpisie. Bardzo rzadko stosuje się wymuszenie ukrycia tego fragmentu wpisu przez podanie wartości true, gdyż przy każdym poście w panelu administratora WordPress, można ustawić czy tekst ma być ukryty czy też nie.

index.php – zmiana treści linku do całego wpisu przy użyciu the_content() – fragment kodu

<div class="text_post"><?php the_content('czytaj więcej'); ?></div>

Jeżeli nie chcemy żadnego linku, który zostanie automatycznie utworzony, to wewnątrz funkcji the_content(), należy umieść tylko apostrofy, jak na listingu niżej.

Usunięcie automatycznie tworzonego linku co całego wpisu przez funkcję the_content()

<div class="text_post"><?php the_content(''); ?></div>

Jak widać zmiana treści linku jest bardzo prosta i szybka. Również bardzo łatwo można nałożyć na niego dowolny styl. Wystarczy posłużyć się klasą more-link, gdyż taka nazwa klasy jest przypisana do znacznika a tego linku. Można to sprawdzić w inspektorze przeglądarki, jak na zdjęciu niżej.

Inspektor kodu
W inspektorze kodu można odczytać nazwę klasy, którą posiada wygenerowany link do artykułu.

W podglądzie kodu widać, że na końcu linku jest kotwica #more-12. Cyfra na końcu oznacza id danego posta, dlatego dla każdego wpisu wartość ta będzie inna. Więcej o kotwicy z linku generowanego przez the_content() znajdziesz w artykule 06.04.Kotwica linku do posta – the_content().

Link do postu

Link do całego postu uzyskamy poprzez skorzystanie z funkcji the_permalink(), jak na listingu niżej. Funkcja ta może być użyta tylko w pętli. W motywie w dwóch miejscach należy umieścić tą funkcję, w nagłówku h1 oraz w znaczniku a o nazwie klasy link_more.

index.php – link do całego wpisu – fragmenty kodu

// Link w nagłówku
<h1 class="post_article_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>

// Link w przycisku do całego artykułu
<p class="para_more"><a href="<?php the_permalink() ?>" class="link_more">czytaj więcej</a></p>

Podsumowanie

Wyświetlanie fragmentu postów oraz jego poszczególnych elementów zakończone. Na listingu niżej cała pętla „loop”, ze wszystkimi zmianami. Linki są aktywne i przenoszą do całego artykułu, mimo jednego pliku index.php na serwerze. Po zapoznaniu się z hierarchią plików motywu WordPress, dowiesz się dlaczego tak się dzieje oraz jak otworzyć post w specjalnie przygotowanym do tego pliku.

index.php – pętal „loop” ze wszystkimi zmianami – fragment kodu

<?php
if (have_posts()) :
    while (have_posts()) : the_post();
        ?>
        <article class="post_article">
            <div class="post_article_img" style="background: url('<?php the_post_thumbnail_url('large'); ?>') center center no-repeat; background-size: cover"></div>
            <div class="post_article_content">
                <h1 class="post_article_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
                <ul class="post_article_info">
                    <li>Dodano: <?php the_date(); ?></li>
                    <li><a href="<?php echo esc_url(get_author_posts_url(get_the_author_meta('ID'))) ?>"><?php echo the_author_meta('display_name'); ?></a></li>
                    <li><?php comments_popup_link('Brak komentarzy', '1 komentarz', '% Comments'); ?></li>
                </ul>
                <div class="text_post"><?php the_content(''); ?></div>
                <p class="para_more"><a href="<?php the_permalink() ?>" class="link_more">czytaj więcej</a></p>
            </div>
        </article>
        <?php
    endwhile;
else : 
    // Tutaj akcje, jeżeli nie istnieje żaden post.
endif;
?>

Pętla WordPress „loop”, będzie często wykorzystywana w trakcie tworzenia motywu. Dlatego warto dobrze zapoznać się z jej wszystkimi elementami. Do samodzielnego uzupełnienia pozostaje akcja po instrukcji else, gdzie będzie komunikat o braku jakiegokolwiek wpisu.

Czytaj dalej…

02.06 Budowa nawigacji

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.

2 komentarze

  • Krzysztof pisze:

    W fragmencie mówiącym o wyświetlaniu daty posta jest mały błąd. Zamiast użycia funkcji do wyświetlenia daty the_data() została użyta funkcja do wyświetlania godziny the_time(). W listingu później jest wszystko poprawnie. Po prostu czytając pierwszy raz można źle coś zrozumieć.