Cum să creați o paginare personalizată a interogărilor în WordPress cu un exemplu
Publicat: 2020-02-24
Crearea unei pagini personalizate de interogări în WordPress este una dintre cele mai sortate soluții de paginare pentru postările de blog și tipurile de postări personalizate. Dacă doriți să creați o paginare personalizată a interogărilor în blogul dvs. WordPress, această postare vă va ghida. În mod ideal, paginarea personalizată a interogării implică utilizarea diferiților parametri de interogare pentru a construi paginarea postării WordPress care se bazează pe această interogare.
În tutorialul anterior, am explicat în detaliu cum puteți adăuga paginarea numerică în WordPress, precum și cum să creați paginarea în miniatură a postării anterioare și următoare și cum să împărțiți o postare în mai multe pagini folosind paginarea. De asemenea, am împărtășit o serie de coduri de paginare WordPress pe care le puteți folosi în blogul dvs. pentru a adăuga opțiunea de paginare preferată. În această postare, voi explica cum să construiți și să implementați paginarea personalizată a interogărilor pe site-ul dvs. WordPress.
Paginare personalizată a interogărilor
După cum am menționat în introducere, paginarea interogării personalizate constă din trei părți care includ: interogarea personalizată, codul pentru afișarea paginației și câteva stiluri pentru a face paginarea să arate bine. Vom împărți acest cod de paginare a interogării personalizate în acești trei pași:
Creați o interogare personalizată de postări sau postări personalizate
Primul pas este să creăm o interogare care este practic o serie de argumente pe care intenționăm să le folosim în interogarea personalizată.
Pentru a afișa această paginare personalizată a interogării, să începem prin a crea un șablon de pagină personalizată unde vom adăuga codul pentru paginarea personalizată a interogării.
Următorul este exemplul șablonului de pagină personalizată cu codul de interogare personalizat:
<?php
/**
* Nume șablon: CQ Pagination
*
*/
get_header();
// Pasul 1: Creați o interogare personalizată
$paginat = ( get_query_var( 'paginat' ) ) ? get_query_var('paginat'): 1;
$args = matrice(
'posts_per_page' => 2,// interogați ultimele 5 postări
'paginat' => $paginat
);
$customQuery = new WP_Query($args);Acest cod creează pur și simplu un șablon de pagină personalizat pe care îl puteți vedea sub atributele paginii, așa cum se arată în imaginea de mai jos:
Interogarea poate avea mai multe argumente, dar în acest caz, ne-am limitat doar la „posts_per_page”, care este numărul de postări pe care dorim să le afișam pe pagină.
De asemenea, putem specifica tipul postării folosind „post_type”, orderby, author și multe altele. Următorul este un exemplu de altă interogare pentru tipul de postare personalizat numit „carte”:
//Obțineți autorul curent pentru a-l folosi în interogare
$autor_curent = ( isset($_GET ) ) ? get_user_by( 'slug', $author_name ): get_userdata( intval( $author ) );
/* setează argumentele pentru interogare
$args = matrice(
'post_type' => array('obiectiv'),
'orderby' => 'data',
'comanda' => 'desc',
'posts_per_page' => 10,
'paged' => get_query_var( 'pagina' ) ? get_query_var('pagina'): 1,
'author' => $actual_author->ID
);
// Instanțiază interogarea
$interogare = new WP_Query( $args );După ce construim $args și instanțiem interogarea, acum suntem gata să afișam postările în buclă și să adăugăm interogarea personalizată în pasul următor.
Afișați postările interogate în șablon de pagină personalizată
Pentru a afișa postările interogate, codul a fost adăugat la codul original al șablonului personalizat, iar codul complet este următorul:
<?php
/**
* Nume șablon: CQ Pagination
*
*/
get_header();
// Pasul 1: Creați o interogare personalizată
$paginat = ( get_query_var( 'paginat' ) ) ? get_query_var('paginat'): 1;
$args = matrice(
'posts_per_page' => 2,// interogați ultimele 5 postări
'paginat' => $paginat
);
$customQuery = new WP_Query($args);
?>
<!-- Pasul 2: Afișați postările pe care le-am interogat în Pasul 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();
global $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> <!-- terminați postările de pe blog -->
<?php endwhile;
endif;
wp_reset_query();Creați o funcție de paginare
În acest pas final, trebuie să creăm funcția de paginare pe care o vom folosi în șablonul de pagină personalizată de mai sus pentru a afișa paginarea interogării personalizate. Pentru a crea funcția de paginare trebuie să adăugăm următorul cod în fișierul functions.php:
// Funcție de paginare personalizată
funcția cq_pagination($pagini = '', $interval = 4)
{
$showitems = ($interval * 2)+1;
global $paged;
if(gol ($paginat)) $paginat = 1;
if($pagini == '')
{
global $wp_query;
$pagini = $wp_query->max_num_pages;
dacă(!$pagini)
{
$pagini = 1;
}
}
if(1 != $pagini)
{
echo „<nav aria-label='Exemplu de navigare în pagină'> <ul class='pagination'> <span>Pagina „.$paged.” din „.$pages.”</span>”;
if($paged > 2 && $paged > $range+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)."'>‹ Previous</a>";
pentru ($i=1; $i <= $pagini; $i++)
{
dacă (1 != $pagini &&( !($i >= $paginat+$gamă+1 || $i <= $pagină-$gamă-1) || $pagini <= $showitems ))
{
ecou ($paginat == $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>";
ecou „</ul></nav>\n”;
}
}
Apelați funcția de paginare în șablon personalizat
Pasul final este apelarea funcției pe care am adăugat-o mai sus în șablon, astfel încât paginarea să fie afișată. Pentru a apela această funcție ar trebui să folosim următorul cod:
// Pasul 3: Apelați funcția de paginare aici
dacă (funcție_există ("cq_pagination")) {
cq_pagination($customQuery->max_num_pages);
}Codul final care creează un șablon de pagină personalizat cu această funcție de paginare ar trebui să fie după cum urmează:
<?php
/**
* Nume șablon: CQ Pagination
*
*/
get_header();
// Pasul 1: Creați o interogare personalizată
$paginat = ( get_query_var( 'paginat' ) ) ? get_query_var('paginat'): 1;
$args = matrice(
'posts_per_page' => 2,// interogați ultimele 5 postări
'paginat' => $paginat
);
$customQuery = new WP_Query($args);
?>
<!-- Pasul 2: Afișați postările pe care le-am interogat în Pasul 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();
global $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> <!-- terminați postările de pe blog -->
<?php endwhile;
endif;
wp_reset_query();
// Pasul 3: Apelați funcția de paginare aici
dacă (funcție_există ("cq_pagination")) {
cq_pagination($customQuery->max_num_pages);
}
?>
</main><!-- #main -->
</div><!-- #primar -->
</div><!-- .wrap -->
<!----sfârșitul paginii-------->
<?php get_footer(); ?>Dacă ați urmat fiecare pas în mod corect, ar trebui să aveți paginarea așa cum se vede în imaginea de mai jos:
Stilați paginarea interogării personalizate
Ultimul pas este să adăugați stilurile la paginarea personalizată pentru a se potrivi cu stilurile și designul temei. Următoarele sunt stilurile CSS pe care ar trebui să le adăugați la foaia de stil pentru a stila această paginare personalizată:
/**
* Stiluri de paginare CQ
* @autorul Joe Njenga
*/
.paginare {
clar:ambele;
poziție:rudă;
dimensiunea fontului: 16px;
înălțimea liniei: 13px;
float:dreapta;
list-style-type:none;
latime:100%;
}
.pagination span, .pagination a {
display:bloc;
plutește la stânga;
marjă: 2px 2px 2px 0;
umplutură: 6px 9px 5px 9px;
text-decor:niciuna;
latime:auto;
culoare:#fff;
fundal: #237697;
}
.pagination a:hover{
culoare:#fff;
fundal: #000;
}
.pagination .current{
umplutură: 6px 9px 5px 9px;
fundal: #999;
culoare:#fff;
}După ce adăugați aceste stiluri de paginare, aspectul final al paginii personalizate ar trebui să fie așa cum se arată în imaginea de mai jos:
Gânduri finale
În această postare, am subliniat modul pas cu pas de a adăuga paginarea interogărilor personalizate pe blogul dvs. WordPress. Acești pași includ; crearea interogării, crearea unui șablon de pagină personalizat pentru a afișa postările personalizate interogate cu paginare și adăugarea unei funcții de paginare în fișierul functions.php. În cele din urmă, nu uitați să apelați funcția de paginare și să adăugați stilurile adecvate care se potrivesc cu designul temei dvs. WordPress.