Pętla WordPress w akcji

WordPress idealnie nadaje się do stron, zawierających wpisy blogowe, aktualności lub innego rodzaju treści, które wymagają archiwizacji i kategoryzacji. Wpisami można wygodnie zarządzać w panelu administratora a dodatkowo, samo wyświetlanie wpisów na stronie jest bajecznie proste. 🙂

W poprzednich wpisach z serii „WordPress motyw od podstaw” podpięliśmy nagłówek, stopkę i nawigację strony, więc teraz czas zająć się częścią blogową. W tym artykule wprowadzimy trochę ruchu do statycznego kodu i zobaczymy Pętlę WordPress w akcji.

Przygotowanie zawartości

Z repozytorium z plikami statycznymi, kopiuję środkowy fragment pliku index.html, czyli div z klasą .content-area (linie 52 do 86) – bez nagłówka i stopki . Nie przenoszę też na razie sidebar’u. Skopiowaną zawartość przeklejam do szablonu index.php, który znajduje się w katalogu z naszym motywem:

<?php
/**
 * index.php
 * The main template file
 */

get_header();
?>

<!-- Tutaj, pomiędzy nagłówkiem a stopką, umieszczamy kod HTML -->

<?php
get_footer();

Gdy zapiszemy zmiany i odświeżymy stronę, pojawi się na niej pierwszy artykuł. Wpis jest w tym momencie zakodowany na sztywno – nie jest to artykuł, który został napisany w panelu admina, więc musimy to koniecznie zmienić. 🙂

Szablon częściowy dla wpisu

Przypominam, że jesteśmy teraz w szablonie index.php, który zajmuje się wyświetlaniem strony głównej naszego bloga. Skoro będzie wyświetlał wpisy blogowe, musi się w nim znaleźć Pętla.

Żeby zachować porządek w szablonie index.php, przygotuję sobie szablon częściowy kafelki z wpisem blogowym. Szablon częściowy będzie załączany wewnątrz Pętli tyle razy ile będzie trzeba – za każdym razem z danymi wpisu, który będzie obecnie przetwarzany w Pętli.

W katalogu z motywem tworzę więc nowy folder o nazwie template-parts a w nim plik content-tile.php.

cloudyblog
|-- includes
|-- js
|-- template-parts
|    |-- content-tile.php

Do content-tile.php przenoszę z index.php markup otoczony tagiem article. Z markupu wpisu usuwam na razie całą górę z miniaturą – wrócę do niej w kolejnych wpisach.

Pętla WordPress

Teraz pora zająć się Pętlą w szablonie index.php. Pętlę wrzucam w miejsce wyciętych artykułów – będzie to wyglądało tak:

<?php
/**
 * index.php
 * The main template file
 */

get_header();
?>

  <div class="content-area">
      <main>
      <?php
      if( have_posts() ) :
          while( have_posts() ) :
              the_post();
              get_template_part( 'template-parts/content-tile' );
          endwhile;
      else:
          get_template_part( 'template-parts/content-none' );
      endif;
      ?>
      </main>
  </div><!-- .content-area -->

<?php
get_footer();

Jeśli Pętla nie znajdzie żadnej zawartości do wyświetlenia, wczyta szablon częściowy o nazwie content-none.php, który stworzyłam w tym samym miejscu co szablon content-tile.php. W szablonie content-none.php umieszczam sekcję z tytułem i informacją o braku wpisów.

Ożywienie szablonu częściowego

W tym momencie szablon częściowy dla kafelki z wpisem ma statyczną zawartość. Jeśli będzie załączany wewnątrz Pętli, to zawsze będzie pokazywał to samo. Żeby to zmienić, wykorzystam funkcje, które udostępnia WordPress.

<?php
/**
 * content-tile.php
 * Template for displaying post tiles
 */

?>

<article <?php post_class(array('std-post', 'std-post--tile')); ?>>
    <div class="std-post__body">
        <header>
            <a href="<?php the_permalink();?>" class="post-data"><?php the_time( get_option('date_format'));?></a>
            <?php the_title('<h2 class="cb-title"><a href="'. get_permalink().'" rel="bookmark">','</a></h2>');?>
        </header>
        <div><?php the_excerpt(); ?></div>
        <footer class="std-post__footer">
            <span class="cat-links post-data"><span class="post-data__title">Category: </span><?php echo get_the_category_list(' '); ?></span>
            <a href="<?php the_permalink(); ?>" title="Read more" class="read-more-btn">
                <span class="read-more-btn__dot"></span>
                <span class="read-more-btn__dot"></span>
                <span class="read-more-btn__dot"></span>
            </a>
        </footer>
    </div>
</article>

Jak już wcześniej pisałam, korzystając z funkcji, które udostępnia WordPress, możemy bardzo łatwo przechywyć z bazy danych informacje na temat wpisu i wyświetlić je na froncie:

• wszystkie klasy wpisu wygenerowane przez WordPress (można też do nich dołączyć własne klasy, umieszczając je w tablicy przekazywanej do tej funkcji) – post_class()
• odnośnik do wpisu – the_permalink() – dodatkowo, funkcja get_permalink() zwraca adres odnośnika, ale nie wyświetla go
• data dodania wpisu – the_time()
• tytuł wpisu – the_title()
• początkowy fragment wpisu – the_excerpt()
• lista kategorii przypisanych do wpisu – get_the_category_list()

Po zapisaniu zmian i odświeżeniu strony, na blogu pojawił się, załadowany w nasz markup, wpis „Witaj, świecie”. Jak widać, wyświetlanie wpisów na stronie nie jest niczym trudnym. 🙂