So erstellen Sie eine benutzerdefinierte Paginierung für Abfragen in WordPress anhand eines Beispiels
Veröffentlicht: 2020-02-24
Das Erstellen einer benutzerdefinierten Paginierung für Abfragen in WordPress ist eine der am besten sortierten Paginierungslösungen für Blogbeiträge und benutzerdefinierte Beitragstypen. Wenn Sie in Ihrem WordPress-Blog eine benutzerdefinierte Paginierung für Abfragen erstellen möchten, wird Sie dieser Beitrag anleiten. Idealerweise beinhaltet die benutzerdefinierte Paginierung von Abfragen die Verwendung verschiedener Abfrageparameter, um die Paginierung von WordPress-Beiträgen zu erstellen, die auf dieser Abfrage basieren.
Im vorherigen Tutorial habe ich ausführlich erklärt, wie Sie in WordPress eine numerische Paginierung hinzufügen können, wie Sie eine Miniaturbild-Paginierung für den vorherigen und den nächsten Beitrag erstellen und wie Sie einen Beitrag mithilfe der Paginierung in mehrere Seiten aufteilen. Ich habe auch eine Reihe von WordPress-Paginierungscodes geteilt, die Sie in Ihrem Blog verwenden können, um Ihre bevorzugte Paginierungsoption hinzuzufügen. In diesem Beitrag werde ich erläutern, wie Sie eine benutzerdefinierte Paginierung für Abfragen auf Ihrer WordPress-Site erstellen und implementieren.
Benutzerdefinierte Abfrage-Paginierung
Wie ich in der Einleitung erwähnt habe, besteht die Paginierung der benutzerdefinierten Abfrage aus drei Teilen, darunter: die benutzerdefinierte Abfrage, der Code zum Anzeigen der Paginierung und einige Stile, damit die Paginierung gut aussieht. Wir werden diesen benutzerdefinierten Abfrage-Paginierungscode in diese drei Schritte unterteilen:
Erstellen Sie eine benutzerdefinierte Abfrage von Beiträgen oder benutzerdefinierten Beiträgen
Der erste Schritt besteht darin, eine Abfrage zu erstellen, die im Grunde ein Array von Argumenten ist, die wir in der benutzerdefinierten Abfrage verwenden möchten.
Um diese benutzerdefinierte Abfrage-Paginierung anzuzeigen, beginnen wir mit der Erstellung einer benutzerdefinierten Seitenvorlage, in der wir den Code für die benutzerdefinierte Abfrage-Paginierung hinzufügen.
Das Folgende ist das Beispiel der benutzerdefinierten Seitenvorlage mit dem benutzerdefinierten Abfragecode:
<?php
/**
* Vorlagenname: CQ-Paginierung
*
*/
get_header();
// Schritt 1: Benutzerdefinierte Abfrage erstellen
$paged = ( get_query_var( 'paged' ) ) ? get_query_var('ausgelagert'): 1;
$args = array(
'posts_per_page' => 2,// Abfrage der letzten 5 Beiträge
'paged' => $paged
);
$customQuery = neue WP_Query($args);Dieser Code erstellt einfach eine benutzerdefinierte Seitenvorlage, die Sie unter den Seitenattributen sehen können, wie in der Abbildung unten gezeigt:
Die Abfrage kann mehrere Argumente haben, aber in diesem Fall haben wir uns nur auf „posts_per_page“ beschränkt, was die Anzahl der Posts ist, die wir auf der Seite anzeigen möchten.
Wir können den Beitragstyp auch mit 'post_type', orderby, author und vielem mehr angeben. Das Folgende ist ein Beispiel für eine andere Abfrage für den benutzerdefinierten Beitragstyp namens „Buch“:
//Aktuellen Autor zur Verwendung in der Abfrage abrufen $aktueller_Autor = ( isset($_GET ) ) ? get_user_by( 'slug', $author_name ) : get_userdata( intval( $author ) ); /* Setze die Argumente für die Abfrage $args = array( 'post_type' => array( 'Ziel' ), 'orderby' => 'date', 'order' => 'desc', 'posts_per_page' => 10, 'paged' => get_query_var( 'page' ) ? get_query_var( 'Seite' ) : 1, 'Autor' => $aktueller_Autor->ID ); // Abfrage instanziieren $query = neue WP_Query( $args );
Nachdem wir die $args erstellt und die Abfrage instanziiert haben, können wir nun die Posts in der Schleife anzeigen und im nächsten Schritt die benutzerdefinierte Abfrage hinzufügen.
Zeigen Sie abgefragte Beiträge in einer benutzerdefinierten Seitenvorlage an
Um die abgefragten Beiträge anzuzeigen, wurde der Code zum ursprünglichen benutzerdefinierten Vorlagencode hinzugefügt und der vollständige Code lautet wie folgt:
<?php
/**
* Vorlagenname: CQ-Paginierung
*
*/
get_header();
// Schritt 1: Benutzerdefinierte Abfrage erstellen
$paged = ( get_query_var( 'paged' ) ) ? get_query_var('ausgelagert'): 1;
$args = array(
'posts_per_page' => 2,// Abfrage der letzten 5 Beiträge
'paged' => $paged
);
$customQuery = neue WP_Query($args);
?>
<!-- Schritt 2: Zeigen Sie die Beiträge an, die wir in Schritt 1 abgefragt haben -->
<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();
globaler $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> <!-- Blogbeiträge beenden -->
<?php endwhile;
endif;
wp_reset_query();Erstellen Sie eine Paginierungsfunktion
In diesem letzten Schritt müssen wir die Paginierungsfunktion erstellen, die wir in der benutzerdefinierten Seitenvorlage oben verwenden werden, um die benutzerdefinierte Paginierung der Abfrage anzuzeigen. Um die Paginierungsfunktion zu erstellen, müssen wir der Datei functions.php den folgenden Code hinzufügen:
// Benutzerdefinierte Paginierungsfunktion
Funktion cq_pagination($pages = '', $range = 4)
{
$showitems = ($range * 2)+1;
global $paged;
if(empty($paged)) $paged = 1;
if($seiten == '')
{
global $wp_query;
$pages = $wp_query->max_num_pages;
if(!$seiten)
{
$seiten = 1;
}
}
if(1 != $seiten)
{
echo "<nav aria-label='Seitennavigationsbeispiel'> <ul class='pagination'> <span>Seite ".$paged." von ".$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)."'>‹ Zurück</a>";
for ($i=1; $i <= $pages; $i++)
{
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $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($seiten)."'><i class='flaticon flaticon-arrow'></i></a></li>";
echo "</ul></nav>\n";
}
}
Rufen Sie die Paginierungsfunktion in der benutzerdefinierten Vorlage auf
Der letzte Schritt besteht darin, die Funktion, die wir oben in der Vorlage hinzugefügt haben, aufzurufen, damit die Paginierung angezeigt wird. Um diese Funktion aufzurufen, sollten wir den folgenden Code verwenden:
// Schritt 3: Hier die Paginierungsfunktion aufrufen
if (function_exists("cq_pagination")) {
cq_pagination($customQuery->max_num_pages);
}Der endgültige Code, der eine benutzerdefinierte Seitenvorlage mit dieser Paginierungsfunktion erstellt, sollte wie folgt aussehen:
<?php
/**
* Vorlagenname: CQ-Paginierung
*
*/
get_header();
// Schritt 1: Benutzerdefinierte Abfrage erstellen
$paged = ( get_query_var( 'paged' ) ) ? get_query_var('ausgelagert'): 1;
$args = array(
'posts_per_page' => 2,// Abfrage der letzten 5 Beiträge
'paged' => $paged
);
$customQuery = neue WP_Query($args);
?>
<!-- Schritt 2: Zeigen Sie die Beiträge an, die wir in Schritt 1 abgefragt haben -->
<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();
globaler $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> <!-- Blogbeiträge beenden -->
<?php endwhile;
endif;
wp_reset_query();
// Schritt 3: Rufen Sie hier die Paginierungsfunktion auf
if (function_exists("cq_pagination")) {
cq_pagination($customQuery->max_num_pages);
}
?>
</main><!-- #main -->
</div><!-- #primär -->
</div><!-- .wrap -->
<!----Ende der Seite-------->
<?php get_footer(); ?>Wenn Sie jeden Schritt richtig befolgt haben, sollten Sie die Seitennummerierung wie im Bild unten sehen:
Gestalten Sie die Paginierung der benutzerdefinierten Abfrage
Der letzte Schritt besteht darin, die Stile zur benutzerdefinierten Paginierung hinzuzufügen, damit sie mit den Stilen und dem Design des Themas übereinstimmt. Im Folgenden sind die CSS-Stile aufgeführt, die Sie dem Stylesheet hinzufügen sollten, um diese benutzerdefinierte Paginierung zu gestalten:
/**
* CQ-Paginierungsstile
* @Autor Joe Njenga
*/
.Seitennummerierung {
Lösche beide;
Position: relativ;
Schriftgröße: 16px;
Zeilenhöhe: 13px;
schweben rechts;
list-style-type:none;
Breite: 100 %;
}
.pagination span, .pagination a {
Bildschirmsperre;
Schwimmer: links;
Rand: 2px 2px 2px 0;
Polsterung:6px 9px 5px 9px;
Textdekoration: keine;
Breite: automatisch;
Farbe:#fff;
Hintergrund: #237697;
}
.paginieren a:hover{
Farbe:#fff;
Hintergrund: #000;
}
.paginierung .aktuell{
Polsterung:6px 9px 5px 9px;
Hintergrund: #999;
Farbe:#fff;
}Nachdem Sie diese Paginierungsstile hinzugefügt haben, sollte das endgültige Aussehen der benutzerdefinierten Paginierung so aussehen, wie auf dem Bild unten gezeigt:
Abschließende Gedanken
In diesem Beitrag haben wir Schritt für Schritt beschrieben, wie Sie Ihrem WordPress-Blog eine benutzerdefinierte Paginierung für Abfragen hinzufügen können. Diese Schritte umfassen; Erstellen der Abfrage, Erstellen einer benutzerdefinierten Seitenvorlage zum Anzeigen der benutzerdefinierten abgefragten Beiträge mit Paginierung und Hinzufügen einer Paginierungsfunktion zur Datei functions.php. Vergessen Sie zum Schluss nicht, die Paginierungsfunktion aufzurufen und die passenden Styles hinzuzufügen, die zum Design Ihres WordPress-Themes passen.