WP-DOC

Pisanie motywu

02.11 Paginacja – stronicowanie

Ostatnia modyfikacja: 19.01.2021

Przy większej ilości wpisów, wyświetlanie ich wszystkich na jednej stronie nie jest najlepszym pomysłem. Warto podzielić wyświetlanie postów na podstrony za pomocą tak zwanej paginacji – stronicowania. Na rysunku niżej przykładowa paginacja. Tego typu podział uzyskujemy za pomocą funkcji paginate_links(). Natomiast WordPress, sam dokonuje niezbędnych obliczeń na podstawie ilości wpisów oraz ilości postów na jednej podstronie.

Linki paginacji
Przykładowe stronicowanie

Limit postów na podstronie

Ile postów będzie wyświetlanie na jednej stronie zależy, od ustawień w panelu administratora Ustawienia - Czytanie. Dla lepszego zrozumienia działania paginacji dodaj do bloga około 15 wpisów. Najlepiej do jednej kategorii. Moje wpisy posiadają dokładnie tą samą treść, różniąc się jedynie tytułem postu. Natomiast w ustawieniach ilość wyświetlanych postów na stronie ustaw wartość 1.

Panel administracyjny WordPress - zmiana ustawień ilości postów
Ilość postów wyświetlanych na stronie głównej oraz w kategorii.

Tworzenie paginacji

Całą paginację osiągniemy za pomocą funkcji paginate_links(), która jako argument przyjmuje tablicę z parametrami. W pełni działająca funkcja, odpowiedzialna za stronicowanie będzie mieć postać jak na listingu niżej. Kod ten należy zapisać do pliku functions.php.

functions.php – dodanie funkcji paginacji do motywu – fragment kodu

// Paginacja
function pagination() {
    global $wp_query;
                
    $big = 999999999; // unikalna liczba całkowita
                
    echo paginate_links( array(
        'base'      => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
        'format'    => '?paged=%#%',
        'total'     => $wp_query->max_num_pages,
        'current'   => max(1, get_query_var('paged')),
        'prev_text' => 'Poprzednia',
        'next_text' => 'Następna'
    ));
}
// ------------------------------------------------------------

Kod zaczynamy od utworzenia funkcji o nazwie pagination(). Funkcję tą będziemy wywoływać wszędzie tam, gdzie będziemy chcieli użyć stronicowania. Oczywiście nazwa tej funkcji może być całkowicie dowolna. Wewnątrz funkcji wywołujemy globalną zmienną $wp_guery. Zmienna ta przechowuje bardzo wiele informacji. Jeżeli chcesz zobaczyć je wszystkie w dowolnym miejscu motywu użyj poniższego kodu.

Wszystkie dane przechowywane w zmiennej $wp_query

<pre><?php print_r($wp_query); ?></pre>

Funkcja paginate_links(), generuje gotowy kod HTML wraz z linkami. Dlatego do wyświetlenia jej w motywie należy użyć echo. Jak pisałem wcześniej funkcja ta jako argument przyjmuje tablicę z parametrami. Wszystkie parametry zostały przedstawione niżej.

  • base – Adres URL, który jest dzielony na strony.
  • format – Format stronicowania.
  • total – Całkowita liczba stron.
  • current – Numer bieżącej strony.
  • aria_current – Możliwe wartości to page, step, location, date, time, true, false. Domyślnie jest to strona.
  • show_all – Czy mają zostać pokazane linki do wszystkich stron. Domyślnie false.
  • end_size – Ile linków ma być wyświetlonych na początku i końcu. Domyślnie 1.
  • mid_size – Ile linków ma być wyświetlonych po obu stronach bieżącej strony. Domyślnie 2.
  • prev_next – Określa czy dołączyć linki poprzednia oraz następna strona. Domyślnie true.
  • prev_text – Tekst poprzedniej strony.
  • next_text – Tekst następnej strony.
  • type – Format zwracanej wartości. Może to być zwykły, tablica, lista. Domyślnie jest to zwykły.
  • add_args – Tablica ciągu zapytania. Domyślnie false.
  • add_fragment – ciąg dodawany do każdego łącza.
  • before_page_number – Tekst, który ma się pojawiać przed numerem strony.
  • after_page_number – Text, który ma się pojawiać po numerze strony.

Najbardziej niejasnym z argumentów może wydawać się base. Na przykład argumentem base jest http://example.com/all_posts.php%_%, gdzie to %_% jest wymagane. Natomiast to %_% zostanie zastąpione zawartością argumentu format. Przykładem argumentu format jest ?Page=%#%, gdzie to %#% jest również wymagane. Natomiast to %#% zostanie zastąpione numerem strony. Dodatkowo w argumencie jest wykorzystywana funkcja get_pagenum_link(), która tworzy link do numeru strony. Całość została umieszczona w funkcji języka PHP str_replace().

W argumencie current, wykorzystana jest funkcja PHP max(), oraz funkcja WordPress get_query_var(), która pobiera wartość z zmiennej $wp_query. Podając argument page, pobierany jest aktualny numer paginacji.

Reszta argumentów, chyba nie wymaga wyjaśnienia, gdyż wyżej wymieniona lista, opisuje działanie poszczególnych argumentów.

Wywołanie paginacji

Mając utworzoną funkcję do paginacji można ją wyświetlić wszędzie tam, gdzie jest nam ona potrzebna. W przypadku szablonu, na którym pracujemy, musimy umieścić ją w dwóch plikach index.php oraz category.php. Wywołanie funkcji pagination(), umieść za pętlą ale wewnątrz instrukcji warunkowej if. Na listingu niżej zastosowanie funkcji w obu plikach.

index.php oraz category.php – dodanie paginacji – fragment kodu

if (have_posts()) :
     while (have_posts()) : the_post();
        // Tutaj kod wyświetlania wpisów
    endwhile;
    ?>
        <div class="pagination"><?php pagination(); ?></div>
    <?php  
    else : 
        // Tutaj akcje, jeżeli nie istnieje żaden post.
endif;

Całą paginację umieszczamy w elemencie div o nazwie klasy pagination, dla łatwiejszego nadania styli w pliku style.css. Przykładowy kod HTML paginacji wygenerowany przez WordPress będzie wyglądał następująco.

Sposób wyświetlania paginacji w kodzie HTML.

<div class="pagination">
    <a class="prev page-numbers" href="link_do_strony">Poprzedni</a>
    <a class="page-numbers" href="link_do_strony">1</a>
    <span class="page-numbers dots">…</span>
    <a class="page-numbers" href="link_do_strony">4</a>
    <a class="page-numbers" href="link_do_strony">5</a>
    <span aria-current="page" class="page-numbers current">6</span>
    <a class="page-numbers" href="link_do_strony">7</a>
    <a class="page-numbers" href="link_do_strony">8</a>
    <span class="page-numbers dots">…</span>
    <a class="page-numbers" href="link_do_strony">14</a>
    <a class="next page-numbers" href="link_do_strony">Następny</a>
</div>

Style CSS dla paginacji

WordPress dodaje style dla każdego elementu paginacji, dzięki którym możemy nałożyć dowolny styl na każdy z elementów. Poniżej lista klas nadawanych przez WordPress.

  • page-numbers – Klasa dla każdego elementu paginacji.
  • prev – Klasa dla linku „Poprzedni”.
  • next – Klasa dl linku „Następny”.
  • current – Klasa dla bieżącej strony.
  • dots – Klasa dla pominiętych linków, element span.

Znając jakie klasy nadaje WordPress dla elementów paginacji, w motywie, na którym pracujemy należy dopisać odpowiednie style w pliku style.css.

style.css – style dla paginacji

/* PAGINACJA */
.pagination {
    margin-bottom: 20px;
}

.pagination .page-numbers {
    padding: 7px 13px;
    background: rgb(255,255,255);
    border: 1px solid rgb(190,190,190);
    text-decoration: none;
    font-size: .8em;
    color: rgb(69,69,69);
    transition: background .4s, color .4s;
}

.pagination .page-numbers:hover {
    background: rgb(41,128,185);
    border-color: rgb(41,128,185);
    color: rgb(255,255,255);
}

.pagination .current, .pagination .current:hover {
    background: rgb(41,128,185);
    border-color:rgb(41,128,185);
    color: rgb(245,245,245);
}

.pagination .dots, .pagination .dots:hover {
    background:  rgb(245,245,245);
    border-color: rgb(190,190,190);
    color: rgb(69,69,69);
}
/* --------------------------------- */

Dla linków „Poprzedni” oraz „Następny” możesz skorzystać ze specjalnych znaków HTML, zamiast tekstu lub grafiki.

Czytaj dalej…

02.12 Tagi

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.