Jak utworzyć niestandardową paginację zapytań w WordPressie na przykładzie?
Opublikowany: 2020-02-24
Tworzenie niestandardowych stronicowania zapytań w WordPressie jest jednym z najbardziej uporządkowanych rozwiązań stronicowania postów na blogu i niestandardowych typów postów. Jeśli chcesz utworzyć niestandardową paginację zapytań na swoim blogu WordPress, ten post Cię poprowadzi. W idealnej sytuacji niestandardowe stronicowanie zapytań polega na użyciu różnych parametrów zapytania w celu zbudowania stronicowania postu WordPress na podstawie tego zapytania.
W poprzednim samouczku szczegółowo wyjaśniłem, jak dodać paginację numeryczną w WordPressie, a także jak utworzyć paginację miniatury poprzedniego i następnego posta oraz jak podzielić post na wiele stron za pomocą paginacji. Udostępniłem również kilka kodów stronicowania WordPress, których możesz użyć na swoim blogu, aby dodać preferowaną opcję paginacji. W tym poście wyjaśnię, jak zbudować i zaimplementować niestandardową paginację zapytań w witrynie WordPress.
Niestandardowe podziały zapytań
Jak wspomniałem we wstępie, niestandardowa paginacja zapytań składa się z trzech części, które obejmują: niestandardowe zapytanie, kod do wyświetlania paginacji i kilka stylów, które sprawią, że paginacja będzie dobrze wyglądać. Podzielimy ten niestandardowy kod stronicowania zapytania na następujące trzy kroki:
Utwórz niestandardową kwerendę postu lub postów niestandardowych
Pierwszym krokiem jest utworzenie zapytania, które jest zasadniczo tablicą argumentów, których zamierzamy użyć w zapytaniu niestandardowym.
Aby wyświetlić tę niestandardową paginację zapytań, zacznijmy od utworzenia niestandardowego szablonu strony, w którym dodamy kod niestandardowej paginacji zapytań.
Poniżej znajduje się przykład niestandardowego szablonu strony z niestandardowym kodem zapytania:
<?php
/**
* Nazwa szablonu: Paginacja CQ
*
*/
pobierz_nagłówek();
// Krok 1: Utwórz zapytanie niestandardowe
$paged = ( get_query_var( 'stronicowane' ) ) ? get_query_var( 'stronicowane' ) : 1;
$argumenty = tablica(
'posts_per_page' => 2,// zapytanie o ostatnie 5 postów
'stronicowany' => $stronicowany
);
$customQuery = nowe WP_Query($args);Ten kod po prostu tworzy niestandardowy szablon strony, który można zobaczyć pod atrybutami strony, jak pokazano na poniższym obrazku:
Zapytanie może mieć kilka argumentów, ale w tym przypadku ograniczyliśmy się tylko do „posts_per_page”, czyli liczby postów, które chcemy wyświetlić na stronie.
Możemy również określić typ posta za pomocą 'post_type', orderby, author i wiele więcej. Poniżej znajduje się przykład innego zapytania dla niestandardowego typu posta o nazwie „book”:
//Pobierz aktualnego autora do użycia w zapytaniu $current_author = ( isset($_GET ) ) ? get_user_by( 'slug', $author_name ) : get_userdata( intval( $author ) ); /* ustaw argumenty zapytania $argumenty = tablica( 'post_type' => array( 'cel' ), 'zamówienie' => 'data', 'zamówienie' => 'opis', 'posts_per_page' => 10, 'paged' => get_query_var( 'strona' ) ? get_query_var( 'strona' ): 1, 'autor' => $current_author->ID ); // Utwórz wystąpienie zapytania $zapytanie = nowe WP_Query( $args );
Po zbudowaniu $args i stworzeniu wystąpienia zapytania jesteśmy teraz gotowi do wyświetlenia postów w pętli i dodania niestandardowego zapytania w następnym kroku.
Wyświetlaj pytane posty w niestandardowym szablonie strony
Aby wyświetlić żądane posty, kod został dodany do oryginalnego kodu szablonu niestandardowego, a pełny kod wygląda następująco:
<?php
/**
* Nazwa szablonu: Paginacja CQ
*
*/
pobierz_nagłówek();
// Krok 1: Utwórz zapytanie niestandardowe
$paged = ( get_query_var( 'stronicowane' ) ) ? get_query_var( 'stronicowane' ) : 1;
$argumenty = tablica(
'posts_per_page' => 2,// zapytanie o ostatnie 5 postów
'stronicowany' => $stronicowany
);
$customQuery = nowe WP_Query($args);
?>
<!-- Krok 2: Wyświetl posty, o które zapytaliśmy w kroku 1 -->
<div class="wrap">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
if($customQuery->have_posts() ):
while($customQuery->have_posts()) :
$customQuery->the_post();
globalny $post;
?>
<div class ="inner-content-wrap">
<ul class ="cq-posts-list">
<li>
<h3 class ="cq-h3"><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></h3>
<div>
<ul>
<div>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
</div>
</ul>
<ul>
<p><?php echo the_content(); ?></p>
</ul>
</div>
</li>
</ul>
</div> <!-- koniec postów na blogu -->
<?php koniec;
endif;
wp_reset_query();Utwórz funkcję stronicowania
W tym ostatnim kroku musimy utworzyć funkcję paginacji, której użyjemy w powyższym niestandardowym szablonie strony, aby wyświetlić niestandardową paginację zapytań. Aby stworzyć funkcję stronicowania musimy dodać następujący kod do pliku functions.php:
// Niestandardowa funkcja stronicowania
funkcja cq_pagination($strony = '', $zakres = 4)
{
$showitems = ($zakres * 2)+1;
globalna $paged;
if(pusty($stronicowany)) $stronicowany = 1;
if($strony == '')
{
globalne $wp_query;
$pages = $wp_query->max_num_pages;
if(!$strony)
{
$strony = 1;
}
}
if(1 != $strony)
{
echo "<nav aria-label='Przykład nawigacji strony'> <ul class='pagination'> <span>Strona ".$paged." z ".$pages."</span>";
if($paged > 2 && $paged > $zakres+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>« First</a>";
if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>‹ Poprzedni</a>";
dla ($i=1; $i <= $stron; $i++)
{
if (1 != $strony &&( !($i >= $stronicowane+$zakres+1 || $i <= $stronicowane-$zakres-1) || $strony <= $showitems ))
{
echo ($paged == $i)? "<li class=\"page-item active\"><a class='page-link'>".$i."</a></li>":"<li class='page-item' > <a href='".get_pagenum_link($i)."' class=\"page-link\">".$i."</a></li>";
}
}
if ($paged < $pages && $showitems < $pages) echo " <li class='page-item'><a class='page-link' href=\"".get_pagenum_link($paged + 1)." \">i class='flaticon flaticon-back'></i></a></li>";
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo " <li class='page-item'><a class='page-link' href=' ".get_pagenum_link($pages)."'><i class='flaticon flaticon-arrow'></i></a></li>";
echo "</ul></nav>\n";
}
}
Wywołaj funkcję stronicowania w szablonie niestandardowym
Ostatnim krokiem jest wywołanie funkcji, którą dodaliśmy powyżej w szablonie, aby wyświetlić paginację. Aby wywołać tę funkcję, powinniśmy użyć następującego kodu:
// Krok 3: Wywołaj tutaj funkcję stronicowania
if (function_exists("cq_pagination")) {
cq_pagination($customQuery->max_num_pages);
}Ostateczny kod, który tworzy niestandardowy szablon strony z tą funkcją stronicowania, powinien wyglądać następująco:
<?php
/**
* Nazwa szablonu: Paginacja CQ
*
*/
pobierz_nagłówek();
// Krok 1: Utwórz zapytanie niestandardowe
$paged = ( get_query_var( 'stronicowane' ) ) ? get_query_var( 'stronicowane' ) : 1;
$argumenty = tablica(
'posts_per_page' => 2,// zapytanie o ostatnie 5 postów
'stronicowany' => $stronicowany
);
$customQuery = nowe WP_Query($args);
?>
<!-- Krok 2: Wyświetl posty, o które zapytaliśmy w kroku 1 -->
<div class="wrap">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
if($customQuery->have_posts() ):
while($customQuery->have_posts()) :
$customQuery->the_post();
globalny $post;
?>
<div class ="inner-content-wrap">
<ul class ="cq-posts-list">
<li>
<h3 class ="cq-h3"><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></h3>
<div>
<ul>
<div>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
</div>
</ul>
<ul>
<p><?php echo the_content(); ?></p>
</ul>
</div>
</li>
</ul>
</div> <!-- koniec postów na blogu -->
<?php koniec;
endif;
wp_reset_query();
// Krok 3: Wywołaj tutaj funkcję stronicowania
if (function_exists("cq_pagination")) {
cq_pagination($customQuery->max_num_pages);
}
?>
</main><!-- #main -->
</div><!-- #primary -->
</div><!-- .wrap -->
<!----koniec strony-------->
<?php get_footer(); ?>Jeśli wykonałeś każdy krok we właściwy sposób, powinieneś mieć paginację, jak pokazano na poniższym obrazku:
Stylizacja niestandardowego podziału zapytań
Ostatnim krokiem jest dodanie stylów do niestandardowej paginacji, aby pasowała do stylów i projektu motywu. Poniżej znajdują się style CSS, które należy dodać do arkusza stylów, aby nadać styl tej niestandardowej paginacji:
/**
* Style stronicowania CQ
* @autor Joe Njenga
*/
paginacja {
oba czyste;
pozycja:względna;
rozmiar czcionki:16px;
wysokość linii:13px;
pływak:w prawo;
typ-listy:brak;
szerokość:100%;
}
.pagination rozpiętość, .pagination a {
Blok wyświetlacza;
pływak:w lewo;
margines: 2px 2px 2px 0;
wypełnienie: 6px 9px 5px 9px;
dekoracja tekstu:brak;
szerokość:auto;
kolor:#fff;
tło: #237697;
}
.paginacja a: najechanie {
kolor:#fff;
tło: #000;
}
.paginacja .bieżąca{
wypełnienie: 6px 9px 5px 9px;
tło: #999;
kolor:#fff;
}Po dodaniu tych stylów paginacji ostateczny wygląd niestandardowej paginacji powinien wyglądać tak, jak pokazano na poniższym obrazku:
Końcowe przemyślenia
W tym poście opisaliśmy krok po kroku sposób dodawania niestandardowej paginacji zapytań do bloga WordPress. Te kroki obejmują; tworzenie zapytania, tworzenie niestandardowego szablonu strony do wyświetlania niestandardowych zapytanych postów z podziałem na strony oraz dodanie funkcji stronicowania do pliku functions.php. Na koniec nie zapomnij wywołać funkcji paginacji i dodać odpowiednie style, które pasują do projektu Twojego motywu WordPress.