Come creare un'impaginazione di query personalizzata in WordPress con un esempio
Pubblicato: 2020-02-24
La creazione di un'impaginazione di query personalizzata in WordPress è una delle soluzioni di impaginazione più ordinate per i post del blog e i tipi di post personalizzati. Se vuoi creare un'impaginazione di query personalizzata nel tuo blog WordPress, questo post ti guiderà. Idealmente, l'impaginazione della query personalizzata implica l'utilizzo di diversi parametri di query per creare un'impaginazione del post di WordPress basata su questa query.
Nel tutorial precedente, ho spiegato in dettaglio come aggiungere l'impaginazione numerica in WordPress, nonché come creare l'impaginazione del post precedente e successivo in miniatura e come dividere un post in più pagine usando l'impaginazione. Ho anche condiviso una serie di codici di impaginazione di WordPress che puoi utilizzare nel tuo blog per aggiungere la tua opzione di impaginazione preferita. In questo post, esporrò come costruire e implementare l'impaginazione di query personalizzate sul tuo sito WordPress.
Impaginazione query personalizzata
Come ho accennato nell'introduzione, l'impaginazione della query personalizzata è composta da tre parti che includono: la query personalizzata, il codice per visualizzare l'impaginazione e alcuni stili per rendere l'impaginazione corretta. Analizzeremo questo codice di impaginazione della query personalizzata in questi tre passaggi:
Crea una query personalizzata di post o post personalizzati
Il primo passaggio consiste nel creare una query che sia fondamentalmente una matrice di argomenti che intendiamo utilizzare nella query personalizzata.
Per visualizzare questa impaginazione della query personalizzata, iniziamo creando un modello di pagina personalizzato in cui aggiungeremo il codice per l'impaginazione della query personalizzata.
Di seguito è riportato l'esempio del modello di pagina personalizzato con il codice query personalizzato:
<?php
/**
* Nome modello: impaginazione CQ
*
*/
get_header();
// Passaggio 1: crea una query personalizzata
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'impaginato' ) : 1;
$args = array(
'posts_per_page' => 2,// interroga gli ultimi 5 post
'paged' => $paged
);
$customQuery = nuovo WP_Query($args);Questo codice crea semplicemente un modello di pagina personalizzato che puoi vedere sotto gli attributi della pagina come mostrato nell'immagine qui sotto:
La query può avere diversi argomenti, ma in questo caso ci siamo limitati a 'post_per_page' che è il numero di post che vogliamo visualizzare nella pagina.
Possiamo anche specificare il tipo di post usando 'post_type', orderby, author e molto altro. Quello che segue è un esempio di un'altra query per il tipo di post personalizzato denominato "libro":
//Ottieni l'autore corrente da utilizzare nella query
$ autore_corrente = ( isset($_GET ) ) ? get_user_by('slug', $author_name): get_userdata(intval($author));
/* imposta gli argomenti per la query
$args = array(
'post_type' => array( 'obiettivo' ),
'orderby' => 'data',
'ordine' => 'dec',
'post_per_page' => 10,
'paged' => get_query_var( 'page' ) ? get_query_var( 'pagina' ): 1,
'autore' => $autore_corrente->ID
);
// Crea un'istanza della query
$ query = nuova WP_Query($args);Dopo aver creato $args e creato un'istanza della query, siamo ora pronti per visualizzare i post nel ciclo e aggiungere la query personalizzata nel passaggio successivo.
Visualizza i post richiesti nel modello di pagina personalizzato
Per visualizzare i post richiesti, il codice è stato aggiunto al codice del modello personalizzato originale e il codice completo è il seguente:
<?php
/**
* Nome modello: impaginazione CQ
*
*/
get_header();
// Passaggio 1: crea una query personalizzata
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'impaginato' ) : 1;
$args = array(
'posts_per_page' => 2,// interroga gli ultimi 5 post
'paged' => $paged
);
$customQuery = nuovo WP_Query($args);
?>
<!-- Passaggio 2: mostra i post che abbiamo interrogato nel passaggio 1 -->
<div class="avvolgere">
<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();
posta $ globale;
?>
<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> <!-- fine post del blog -->
<?php nel frattempo;
finisci se;
wp_reset_query();Crea una funzione di impaginazione
In questo passaggio finale, dobbiamo creare la funzione di impaginazione che utilizzeremo nel modello di pagina personalizzato sopra per visualizzare l'impaginazione della query personalizzata. Per creare la funzione di impaginazione dobbiamo aggiungere il seguente codice al file functions.php:
// Funzione di impaginazione personalizzata
funzione cq_pagination($pagine = '', $intervallo = 4)
{
$showitems = ($range * 2)+1;
globale $ paginato;
if(vuoto($paged)) $paged = 1;
if($pagine == '')
{
$wp_query globale;
$pagine = $wp_query->max_num_pagine;
if(!$pagine)
{
$pagine = 1;
}
}
if(1 != $pagine)
{
echo "<nav aria-label='Esempio di navigazione della pagina'> <ul class='pagination'> <span>Pagina ".$paged." di ".$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)."'>‹ Precedente</a>";
for ($i=1; $i <= $pagine; $i++)
{
if (1 != $pagine &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pagine <= $showitems ))
{
eco ($paged == $i)? "<li class=\"page-item attivo\"><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($pagine)."'><i class='flaticon flaticon-arrow'></i></a></li>";
echo "</ul></nav>\n";
}
}
Chiama la funzione di impaginazione nel modello personalizzato
Il passaggio finale consiste nel chiamare la funzione che abbiamo aggiunto sopra nel modello in modo che venga visualizzata l'impaginazione. Per chiamare questa funzione dovremmo usare il seguente codice:
// Passaggio 3: chiama qui la funzione di impaginazione
se (function_exists("cq_pagination")) {
cq_pagination($customQuery->max_num_pages);
}Il codice finale che crea un modello di pagina personalizzato con questa funzione di impaginazione dovrebbe essere il seguente:
<?php
/**
* Nome modello: impaginazione CQ
*
*/
get_header();
// Passaggio 1: crea una query personalizzata
$paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'impaginato' ) : 1;
$args = array(
'posts_per_page' => 2,// interroga gli ultimi 5 post
'paged' => $paged
);
$customQuery = nuovo WP_Query($args);
?>
<!-- Passaggio 2: mostra i post che abbiamo interrogato nel passaggio 1 -->
<div class="avvolgere">
<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();
posta $ globale;
?>
<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> <!-- fine post del blog -->
<?php nel frattempo;
finisci se;
wp_reset_query();
// Passaggio 3: chiama qui la funzione di impaginazione
se (function_exists("cq_pagination")) {
cq_pagination($customQuery->max_num_pages);
}
?>
</main><!-- #main -->
</div><!-- #primario -->
</div><!-- .wrap -->
<!----fine pagina-------->
<?php get_footer(); ?>Se hai seguito ogni passaggio nel modo giusto dovresti avere l'impaginazione come si vede nell'immagine qui sotto:
Stile l'impaginazione della query personalizzata
L'ultimo passaggio consiste nell'aggiungere gli stili all'impaginazione personalizzata per farla corrispondere agli stili e al design del tema. Di seguito sono riportati gli stili CSS che dovresti aggiungere al foglio di stile per definire lo stile di questa impaginazione personalizzata:
/**
* Stili di impaginazione CQ
* @autore Joe Njenga
*/
.impaginazione {
chiaro: entrambi;
posizione:relativa;
dimensione del carattere: 16px;
altezza della linea: 13px;
galleggiante:destra;
tipo-stile-elenco:nessuno;
larghezza: 100%;
}
.paginazione intervallo, .paginazione a {
blocco di visualizzazione;
galleggiante: sinistra;
margine: 2px 2px 2px 0;
imbottitura: 6px 9px 5px 9px;
decorazione del testo:nessuno;
larghezza: automatica;
colore:#fff;
sfondo: #237697;
}
.impaginazione a:passa il mouse{
colore:#fff;
sfondo: #000;
}
.impaginazione .corrente{
imbottitura: 6px 9px 5px 9px;
sfondo: #999;
colore:#fff;
}Dopo aver aggiunto questi stili di impaginazione, l'aspetto finale dell'impaginazione personalizzata dovrebbe essere come mostrato nell'immagine seguente:
Pensieri finali
In questo post, abbiamo delineato passo passo come aggiungere l'impaginazione delle query personalizzate al tuo blog WordPress. Questi passaggi includono; creazione della query, creazione di un modello di pagina personalizzato per visualizzare i post interrogati personalizzati con impaginazione e aggiunta di una funzione di impaginazione al file functions.php. Infine, non dimenticare di chiamare la funzione di impaginazione e aggiungere gli stili appropriati che corrispondono al design del tuo tema WordPress.