Pętla WordPress – wyświetlanie wpisów na stronie

Pętla WordPress

Pętla WordPress to serce motywu, które pompuje dane powiązane z wpisami w obszary przeznaczone do wyświetlania zawartości. W tym artykule omawiam Pętlę, czyli podstawową strukturę służącą do wyświetlania wpisów na froncie w WordPress.

Pętla WordPress - wyświetlanie wpisów
W dużym skrócie: Pętla WordPress pobiera z bazy danych wpisy a następnie wyświetla je na stronie w wybranym przez nas formacie.

[tl;dr]

  • Pętla jest mechanizmem wyświetlającym wpisy w WordPress
  • Pętlę umieszcza się w szablonach, które mają wyświetlać wpisy lub strony
  • wewnątrz motywu można wiele razy korzystać z mechanizmu Pętli
  • Pętla przetwarza każdy wpis, przeznaczony do wyświetlenia na bieżącej stronie i formatuje go w określony w szablonie sposób
  • liczbę wpisów, które ma wyświetlać Pętla ustawia się w panelu administratora
  • wewnątrz Pętli dostępne są spacjalne tagi. Zaliczają się do nich np. the_title() czy the_content()

Czym jest Pętla?

Pętla WordPress / Pętla (ang. The WordPress Loop / the Loop) jest podstawowym mechanizmem, który umożliwia wyświetlanie wpisów  na stronie korzystającej z WordPress. Używając Pętli możemy wyświetlić wpisy na stronie głównej bloga, w archiwum, wyniki wyszukiwania, pojedyncze wpisy i strony itp.

Budowa Pętli

Najprostsza Pętla może wyglądać tak:

<?php 
if ( have_posts() ) : 
  while ( have_posts() ) : 
    the_post(); 
    get_template_part( 'content' );
  endwhile; 
endif;
?>

Jeśli chcemy wykonać jakąś akcję w momencie, gdy nie znaleziono żadnej zawartości do wyświetlenia, Pętlę można rozszerzyć do postaci:

<?php 
if ( have_posts() ) : 
  while ( have_posts() ) : 
    the_post(); 
    get_template_part( 'content' );
  endwhile; 
else:
  _e( 'Brak wpisów', 'textdomain' );
endif; 
?>

Pętlę można też zbudować alternatywną składnią PHP i  będzie wtedy wyglądać tak:

<?php 
if ( have_posts() ) { 
  while ( have_posts() ) { 
    the_post(); 
    get_template_part( 'content' );
  } 
}else{ 
  _e( 'Brak wpisów', 'textdomain' );
}
?>

Działanie Pętli WordPress

Jak widać na pokazanych wyżej fragmentach kodu, Pętlę rozpoczyna instrukcja warunkowa if, która sprawdza, czy bieżąca strona powinna wyświetlać wpisy. Jeśli tak, z bazy danych pobierane są informacje powiązane z zawartością, która ma zostać wyświetlona.

W kolejnym etapie Pętla przetwarza osobno każdy wpis, który ma wyświetlić i wrzuca powiązane z nim dane w przygotowany przez naz markup. Przetwarzanie trwa dopóki nie zabraknie zawartości przeznaczonej do wyświetlenia.

Właśnie z racji tego iteracyjnego charakteru, mechanizm wyświetlania zawartości w WordPress nazywa się „Pętlą”.

To put it simply, the Loop is true to its name: it loops through each post retrieved for the current page one at a time and performs the action specified in your theme.

Liczba wyświetlanych wpisów w Pętli

Liczbę postów, które zostaną wyświetlone Pętlą WordPress, ustawia się z poziomu panelu admina w sekcji: Ustawienia > Czytanie > Strony blogu wyświetlają maksymalnie.

Liczba, którą ustawimy w tym miejscu zastosuje się m.in. do wpisów pokazywanych na stronie głównej bloga, archiwum, wyników wyszukiwań. Jeśli na poszczególnych stronach chcemy mieć różne ilości wpisów, liczbę pokazywanych wpisów musimy odpowiednio zmodyfikować filtrem.

Jak ustawić ile wpisów ma wyświetlać WordPress

Budowa Pętli WordPress krok po kroku

Żebyśmy mogli jak najlepiej zrozumieć działanie Pętli, rozłożę ją na etapy:

// jeśli znaleziono zawartość, którą trzeba wyświetlić
if( have_posts() ) :

Na samym początku sprawdzamy, czy w bazie danych znajdują się wpisy, które Pętla powinna wyświetlić na obecnie przetwarzanej stronie.

Funkcja have_posts() sprawdza czy bieżące zapytanie zwraca jakiekolwiek wpisy do wyświetlenia. Jest to funkcja boolowska, czyli zwracająca TRUE (jeśli są wpisy do wyświetlenia) lub FALSE (gdy nie ma wpisów do wyświetlenia).

// dopóki jest co wyświetlać
while( have_posts() ) :

Jeśli znaleziono wpisy, wyrażenie while rozpoczyna właściwą Pętlę. Teraz Pętla będzie przechodziła kolejno przez wszystkie pasujące do zapytania wpisy, które znalazła w bazie danych.

// pobierz dane wpisu, który jest do wyświetlenia
the_post()

Wewnątrz pętli while wywołujemy funkcję the_post() która ładuje wszystkie dane wpisu i sprawia, że stają się one ogólnie dostępne dla innych funkcji. Dane obecnie przetwarzanego wpisu są przypisywane do globalnej zmiennej $post z każdą iteracją.

Teraz, dane pojedynczego wpisu możemy przelać do przygotowanego przez nas mark-up’u:

get_template_part( 'content' );

Powyższa funkcja ładuje szablon częściowy do pliku, w którym wykonuje się Pętla. Szablon częściowy w tym wypadku ma nazwę content.php i znajduje się bezpośrednio w folderze z motywem. Jeśli w panelu admina jest ustawione, że strony na blogu wyświetlają max. 10 wpisów, szablon częściowy załączy się 10 razy, za każdym razem z danymi obecnie przetwarzanego wpisu.

// zakończenie wyrażenia while
endwhile;

Jeśli wszystkie wpisy dla bieżącej strony są już wyświetlone, w tym miejscu, po zakończeniu pętli while, umieszcza się paginację, która umożliwia przejście do kolejnej strony z resztą wpisów.

// w przeciwnym wypadku (jeśli nie znaleziono wpisów)
else :

Jeśli nie ma zawartości do wyświetlenia, w tym miejscu można poinformować o tym fakcie osobę odwiedzającą naszą stronę.

// zakończenie pętli if
endif;

Po wyświetleniu całej zawartości lub informacji o braku zawartości, możemy dalej kontynuować budowanie struktury strony.

Wyświetlanie wpisów wewnątrz Pętli

Zaraz po wywołaniu funkcji the_post(), można umieścić markup HTML, w który zostaną załadowane dane obecnie przetwarzanego wpisu.

Można to zrobić na dwa sposoby: napisać markup bezpośrednio wewnątrz Pętli lub skorzystać z funkcji get_template_part(), która załaduje w tym miejscu szablon częściowy z oddzielnego pliku.

W wcześniejszych przykładach zawsze korzystałam  z get_template_part(). Gdybym jednak umieściła kod formatujący zawartość bezpośrednio wewnątrz Pętli, mogłoby to wyglądać tak:

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
    
    <article>
       <?php the_title('<h2>', '</h2>'); ?>
       <?php the_content(); ?>
    </article>

<?php endwhile; ?>
<?php endif; ?>

W powyższym przykładzie, fragment kodu otoczony tagiem article wykona się dla każdego wpisu, który będzie wyświetlać Pętla – za każdym razem zostaną do niego załadowane dane powiązane z obecnie przetwarzanym wpisem. Jest to możliwe dzięki korzystaniu z specjalnych tagów szablonu (template tags) takich jak np. the_title() czy the_content().

Tagi, o których mowa, będą prawidłowo działać jedynie wewnątrz Pętli – umożliwia to funkcja the_post() , która ma za zadanie udostępnić bieżący wpis z przetwarzanej kolekcji do użytku wewnątrz Pętli.  Poniżej podaję małą listę z często używanymi takimi tagami razem z informacją, którą zwracają:

  • the_title() – tytuł bieżącego wpisu
  • the_content() – treść bieżącego wpisu
  • the_excerpt() – kawałek bieżącego wpisu
  • the_permalink() – link do bieżącego wpisu
  • the_author() – nazwa autora bieżącego wpisu
  • the_category() – podlinkowana lista kategorii przypisanych do bieżącego wpisu
  • the_tags() – podlinkowana lista tagów przypisanych do bieżącego wpisu
  • the_time() – czas, w którym dodano bieżący wpis

Gdzie można znaleźć Pętlę?

Pętle mogą występować w różnych szablonach wewnątrz motywu. Przykładowo, Pętle w motywie mogą odpowiadać za:

  • wyświetlanie wpisów blogowych – w najmniej skomplikowanym przypadku będzie w pliku index.php
  • wyświetlanie pojedynczego wpisu – szablon single.php
  • wyświetanie wpisów na stronach archiwum – szablon archive.php
  • wyświetlanie zawartości podstrony – szablon page.php
  • pokazywanie wyników wyszukiwania – szablon search.php

Podsumowanie

O Pętli można napisać jeszcze więcej, ja, żeby nie komplikować tematu, zatrzymam się tutaj.

Jak widać, Pętla to całkiem potężny mechanizm, bez którego nie obejdzie się żadna dynamiczna strona korzystająca z WordPress. Warto się z nią poznać, żeby intuicyjniej poruszać się po tworzeniu motywów.

Icons made by Smashicons, Freepik from www.flaticon.com is licensed by CC 3.0 BY