Objaśnienie pętli WordPressa: co to jest i jak działa

Pętla jest centralną częścią WordPressa. Bez tego nie widziałbyś treści na żadnej witrynie WordPress. Odpowiada za to, aby artykuły pojawiały się na stronie bloga i w archiwach, a także statyczne treści na pojedynczych stronach.

Jeśli jesteś projektantem motywów, nie będziesz się uczyć, jak go używać. Jednak jako zwykły użytkownik WordPressa możesz nawet nie wiedzieć, że istnieje.

Aby temu zaradzić, w tym poście szczegółowo wyjaśnimy działanie pętli WordPress. Przyjrzymy się, co to jest i jak działa oraz gdzie go znaleźć w WordPressie. Dowiesz się również, jak tworzyć własne i zobaczysz kilka przykładów pętli WordPress, aby ugruntować swoje zrozumienie.

Czym jest pętla WordPress (i gdzie ją znaleźć)?

Gdybyś miał krótko wyjaśnić, czym jest pętla WordPress, to po prostu znacznik, który pobiera i wyświetla zawartość na stronach w witrynie WordPress. Niezależnie od tego, czy jest to strona statyczna, post, strona bloga czy archiwum — wszędzie tam, gdzie WordPress pobiera zawartość z bazy danych i wyświetla ją na stronie, pojawia się pętla.

Dlaczego jednak nazywa się to pętlą?

Ponieważ będzie działał wielokrotnie. Dodatkowo, jak zobaczysz poniżej, dosłownie składa się z pętli PHP.

Jak często działa pętla WordPress?

Dopóki nie zostanie nic do wyświetlenia. Nawet na statycznych stronach przegląda dostępną zawartość. Jednak w tym przypadku zatrzymuje się po jednym przejeździe.

Jak wygląda pętla WordPressa?

Aby było jasne, o czym mówimy, spójrzmy na przykład i przeanalizujmy go krok po kroku. Oto przykład tego, jak wygląda prosta pętla WordPress:

 if ( have_posts() ) : while ( have_posts() ) : the_post(); // Display content here endwhile; endif;

Jeśli znasz już PHP lub jesteś programistą WordPress, nie powinieneś mieć problemu ze zrozumieniem go. Jednak dla wszystkich innych przejdźmy do kawałków jeden po drugim.

• if ( have_posts() ) : — To jest instrukcja if korzystająca z funkcji have_posts(). Jeśli w programowaniu często występują instrukcje, to po prostu mówią „jeśli ma zastosowanie następujący warunek, kontynuuj”. W tym przypadku warunkiem jest have_posts() , co jest po prostu sprawdzeniem, czy istnieją posty, które można wyświetlić.
• while ( have_posts() ) : — Ten wiersz jest pętlą while i oznacza początek pętli WordPress. Wykona kod, który zawiera, o ile jego warunek jest spełniony. Ponownie, warunkiem jest to, czy WordPress ma w zanadrzu jakieś posty. To, jak często będzie zwracać true , zależy od liczby postów ustawionych w ustawieniach WordPressa w interfejsie administratora.
• the_post(); — To jest kod wykonywany przez pętlę. Jest to funkcja WordPress, która wywołuje wszystkie dostępne dane dla następnego posta i zapisuje je, aby przygotować je do wyświetlenia. W tym celu mamy wiele tagów szablonów, o których omówimy poniżej.
• // Display content here — Tutaj umieszczamy znacznik, który określa, którą część zawartości wyświetlić iw jaki sposób. Zwykle jest to mieszanka PHP i HTML. Nie pokazujemy tego tutaj, ponieważ jest to bardziej złożone i omówimy to później.
• endwhile; — Fragment kodu, który zamyka pętlę while po wykonaniu tego, czego potrzebujemy.
• endif; — To samo co powyżej, ale dla instrukcji if .

Tak więc w zasadzie struktura wygląda następująco: sprawdź, czy posty istnieją, a następnie pobierz potrzebne dane z bazy danych i wyświetl je we wcześniej ustalony sposób, powtarzaj to, dopóki istnieją prawidłowe posty do wyświetlenia.

Alternatywna składnia

Jedna szybka rzecz, czasami zobaczysz pętlę napisaną w ten sposób:

 if ( have_posts() ) { while ( have_posts() ) { the_post(); // Display content here } // end while } // end if

To jest dokładnie to samo, co w powyższym przykładzie, tylko w alternatywnej składni PHP. To, którego użyjesz, zależy od Ciebie. Dla zachowania spójności będziemy kontynuować pierwszą wariację.

Gdzie znaleźć pętlę WordPressa?

Fakt, że pętla działa zawsze, gdy treść pojawia się na stronie, już odpowiada, gdzie znaleźć pętlę WordPress. Odpowiedzi znajdują się w każdym pliku szablonu Twojego motywu, który wyświetla zawartość.

Alternatywnie, w zależności od architektury motywu, może on również znajdować się w części szablonu. Są to pliki szablonów zawierające często używane fragmenty kodu (takie jak pętla). Można je przeciągnąć do innych plików zamiast za każdym razem używać tego samego fragmentu kodu.

Na przykład, jeśli otworzysz plik page.php motywu Twenty Twenty-One, zobaczysz, że tutaj pętla jest podzielona na części. Chociaż zaczyna się w samym pliku, sekcja określająca sposób wyprowadzania danych znajduje się w części szablonu o nazwie content-page.php .

 /* Start the Loop */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content/content-page' ); // If comments are open or there is at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) { comments_template(); } endwhile; // End of the loop.

Hierarchia szablonów WordPress określa, którego pliku system używa do wyświetlania rodzaju strony i każdego pliku, który musi zawierać pętlę lub odniesienie do miejsca, w którym można go znaleźć.

Oznacza to również, że pętla może wyglądać inaczej w poszczególnych plikach, czyli na różnych stronach. Na przykład w archiwum możesz chcieć wyświetlać tylko fragmenty postów, podczas gdy na głównej stronie bloga możesz chcieć pokazywać całe posty (aż do linku „czytaj więcej”). Do tego potrzebne są różne rodzaje znaczników, dlatego pętla nie wyglądałaby tak samo wewnątrz home.php i archive.php .

Jak stworzyć pętlę

Aby utworzyć pętlę, możesz w zasadzie zacząć od prostego kodu, który omówiliśmy powyżej. To naprawdę standardowa pętla. Oto znowu:

 if ( have_posts() ) : while ( have_posts() ) : the_post(); // Display content here endwhile; endif;

Trudną częścią jest to, co pominęliśmy: część, która determinuje wyświetlanie treści. W tym celu, jak wspomniano, zwykle używasz kombinacji HTML i PHP. Na przykład, oto jak możesz powiedzieć WordPressowi, aby wypluł post opakowany w tag <article> z niestandardową klasą i identyfikatorem, tytułem jako nagłówkiem h1 oraz wyróżnionym obrazem i treścią.

 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article <?php post_class(); ?>> <h1><?php the_title(); ?></h1> <?php the_post_thumbnail(); ?> <?php the_content(); ?> </article> <?php endwhile; endif; ?>

Jedną z rzeczy, która wyróżnia się powyżej, jest to, że istnieje wiele tagów pisanych z podkreśleniami. Są to tagi szablonów WordPress, które oferują skróty do wywoływania wspólnych części treści. Tutaj używamy the_title() do wyświetlania tytułu posta, the_post_thumbnail() dla wyróżnionego obrazu i the_content() dla głównej treści. Jest o wiele więcej, takich jak the_excerpt() lub the_category() . Listę opcji znajdziesz tutaj.

Kolejną ważną rzeczą dla pętli WordPressa są tagi warunkowe. Widzisz, że są one często używane w znacznikach związanych z pętlami, aby wyświetlać coś tylko w określonych warunkach. Na przykład bardzo często owija się the_post_thumbnail() w instrukcję warunkową, aby uniemożliwić WordPressowi umieszczenie go na stronie, gdy nie istnieje żaden polecany obraz.

 <?php if ( has_post_thumbnail() ): the_post_thumbnail(); endif; ?>

Poniżej mamy więcej przykładów. Aby dowiedzieć się więcej o tagach warunkowych, sprawdź Kodeks WordPress.

Przykłady pętli WordPress

W końcowej części tego samouczka omówimy kilka przykładów korzystania z pętli WordPress.

Dwadzieścia dwadzieścia jeden temat

Patrząc na motyw Twenty Twenty-One, pierwszą rzeczą, która rzuca się w oczy, jest intensywne użycie części szablonu. Wszystkie standardowe pliki szablonów, takie jak page.php , single.php , a nawet index.php , rozpoczynają pętlę wewnątrz pliku, a następnie używają get_template_part , aby przenieść wyświetlanie zawartości do innych plików. W tym przypadku są to odpowiednio content-page.php , content-single.php i content.php . Oto skrócona wersja single.php jako przykład:

 <?php get_header(); /* Start the Loop */ while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content/content-single' ); // additional code for comments and post navigation endwhile; // End of the loop. get_footer();

Jest to również widoczne w innych plikach. Na przykład nagłówek i stopka również mają swoje własne części szablonu. Możesz zobaczyć odniesienia do tych wewnątrz pętli w innych miejscach. Na przykład, jeśli spojrzysz na content-single.php , na końcu zobaczysz wywołanie części szablonu author-bio.php .

 <article <?php post_class(); ?>> <header class="entry-header alignwide"> <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?> <?php twenty_twenty_one_post_thumbnail(); ?> </header><!-- .entry-header --> <div class="entry-content"> <?php the_content(); wp_link_pages( array( 'before' => '<nav class="page-links" aria-label="' . esc_attr__( 'Page', 'twentytwentyone' ) . '">', 'after' => '</nav>', /* translators: %: Page number. */ 'pagelink' => esc_html__( 'Page %', 'twentytwentyone' ), ) ); ?> </div><!-- .entry-content --> <footer class="entry-footer default-max-width"> <?php twenty_twenty_one_entry_meta_footer(); ?> </footer><!-- .entry-footer --> <?php if ( ! is_singular( 'attachment' ) ) : ?> <?php get_template_part( 'template-parts/post/author-bio' ); ?> <?php endif; ?> </article><!-- #post-<?php the_ID(); ?> -->

Poza tym jest to stosunkowo standardowe uczciwe:

1. Otwórz element HTML <article> z niestandardowym identyfikatorem i klasą
2. Utwórz element nagłówka artykułu, który wyświetla tytuł w nagłówku h1 i wyświetla wyróżniony obraz z funkcją dostosowaną do dwudziestu dwudziestu jeden
3. Kontynuuj za pomocą elementu entry-content , który zawiera tag szablonu the_content() , aby wyprowadzić treść pojedynczego posta
4. Dołącz znaczniki do paginacji i stopkę wpisu z inną funkcją dwadzieścia dwadzieścia jeden do wyświetlania metainformacji o wpisie
5. Na koniec jest wspomniane wezwanie do autora biografii we własnej części szablonu

Domyślny motyw WordPress dwadzieścia dziesięć

Jeśli wrócisz do pierwszego w historii domyślnego motywu WordPress, Dwadzieścia dziesięć, i użyjesz repozytorium subversion do przeglądania plików z wersji 1.0, możesz zobaczyć, jak obsługa pętli i plików szablonów ewoluowała na przestrzeni czasu. W tamtych czasach wiele plików szablonów zawierało własne kompletne pętle WordPress, zamiast zlecać je do części szablonów wielokrotnego użytku. Możesz to wyraźnie zobaczyć w page.php motywu.

 <?php get_header(); ?> <div> <div role="main"> <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?> <div <?php post_class(); ?>> <?php if ( is_front_page() ) { ?> <h2 class="entry-title"><?php the_title(); ?></h2> <?php } else { ?> <h1 class="entry-title"><?php the_title(); ?></h1> <?php } ?> <div class="entry-content"> <?php the_content(); ?> <?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?> <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?> </div><!-- .entry-content --> </div><!-- #post-## --> <?php comments_template( '', true ); ?> <?php endwhile; ?> </div><!-- #content --> </div><!-- #container --> <?php get_sidebar(); ?> <?php get_footer(); ?>

To samo jest również widoczne w onecolumn-page.php , który jest plikiem kontrolującym niestandardowy szablon strony oferowany przez motyw. Na uwagę zasługuje również to, że używa starszego wywołania pętli, które było wtedy zapisane w jednej linii.

 <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

W nowoczesnych motywach najczęściej widać, że jest on rozłożony na kilka wierszy, jak widzieliśmy wcześniej, aby zwiększyć czytelność kodu.

Motyw Twenty Ten zawiera również samodzielny plik loop.php , który jest zbyt długi, aby można go było tu umieścić bez przekraczania mojego limitu słów. Podzielony jest na trzy części, które kontrolują wyświetlanie kilku typów postów (galeria zdjęć, posty z kategorii Asides , wszystkie inne posty). Każda z nich jest dalej podzielona według instrukcji if i else w celu uwzględnienia różnych przypadków, takich jak strony archiwum i wyszukiwania.

 <?php while ( have_posts() ) : the_post(); ?> <?php /* How to display posts of the Gallery format. The gallery category is the old way. */ ?> // Lots of code here <?php else : ?> // Lots of code here as well <?php endif; ?> <?php /* How to display posts of the Aside format. The asides category is the old way. */ ?> // Even more code <?php /* How to display all other posts. */ ?> <?php else : ?> // Still more code <?php else : ?> // A bit more markup <?php endif; ?> // And a bit more code <?php endif; // This was the if statement that broke the loop into three parts based on categories. ?> <?php endwhile; // End of the loop. Whew. ?>

Całość zawiera dość zawiłą logikę, dlatego wychodzi dość długa i skomplikowana. Cieszę się, że mamy dziś inne sposoby ich obsługi i polecam rzucić okiem na przykład pętli WordPress, którego nie chcesz emulować.

Przy okazji, jeśli uważasz, że byłem zbyt surowy dla programistów z tamtych czasów, zapewniam, że zgadzają się z moją oceną. Wystarczy spojrzeć na komentarz dewelopera, w którym loop.php zamyka pętlę.

 <?php endwhile; // End the loop. Whew. ?>

Blok pętli zapytań WordPress

Być może nie zdajesz sobie z tego sprawy, ponieważ jest to stosunkowo nowa funkcja Gutenberga, ale edytor bloków (a co za tym idzie, edycja całej witryny) ma teraz również blok zawierający pętlę WordPress. Nazywa się to blokiem pętli zapytań i możesz go dodać do swojej witryny jak każdy inny blok. Najprostszym sposobem jest dodanie ukośnika i wpisanie jego nazwy, np. /queryloop . Naciśnij enter, a pojawi się na stronie.

Blok pozwala na stworzenie pętli PHP bez konieczności pisania kodu. Automatycznie wyświetli najnowsze posty w Twojej witrynie. Poza tym ma kilka opcji dostosowywania. Przede wszystkim blok zawiera szereg gotowych układów. Możesz przełączać się między nimi za pomocą strzałek lub kliknąć opcję Siatka , aby zobaczyć je wszystkie naraz.

Wybierz to, co Ci się podoba, lub kliknij Wybierz , jeśli dotarłeś do swojej ulubionej opcji, aby sfinalizować wybór. Ważne jest, aby pamiętać, że układy składają się z wzorców blokowych, a więc wstępnie ułożonych grup pojedynczych bloków. Oznacza to również, że możesz je rozmieścić w zależności od potrzeb, nadal są to normalne bloki. Użyj strzałek lub kliknij i przytrzymaj opcję Przeciągnij , aby przenieść je w dowolne miejsce.

Ponadto każdy blok (i często każda grupa bloków) ma również swoje zwykłe opcje na głównym ekranie edytora i na pasku bocznym. Tutaj możesz zmienić ich kolory, rozmiary czcionek, formaty i nie tylko.

Gdy będziesz zadowolony, jeśli opublikujesz lub wyświetlisz podgląd strony, zobaczysz na niej niestandardową pętlę zapytań WordPress. Tak więc, nawet jeśli nie jesteś programistą WordPress i nie rozumiesz PHP, nadal możesz skorzystać z tego, co pętla ma do zaoferowania.

Pętla WordPressa wyjaśniona w pigułce

Pętla to coś, z czym każdy profesjonalista WordPress musi być zaznajomiony. Jednak nawet jeśli jesteś bardziej przypadkowym użytkownikiem, nadal nie jest złym pomysłem, aby zrozumieć, jak to działa. Może to ułatwić rozwiązywanie problemów lub tworzenie niestandardowych szablonów stron, jeśli sobie tego życzysz.

W tym poście omówiliśmy, czym jest pętla, gdzie się znajduje, i szczegółowo ją omówiliśmy. Przyjrzeliśmy się również, jak stworzyć własną pętlę i przykłady z domyślnych motywów i nowego bloku zapytań. Do tej pory wiesz już wszystko, czego potrzebujesz, aby stworzyć i dostosować pętlę WordPress.

Jakie jest twoje ulubione zastosowanie pętli WordPress? Podziel się swoimi przemyśleniami w komentarzach poniżej!

Zdjęcia: Jonny Gios/Unsplash, Tine Ivanic/Unsplash