Wenn Sie Ihrem WordPress-Theme Paginierungsunterstützung mit coolen Zahlen anstelle des standardmäßigen nächsten und vorherigen Beitrags hinzufügen möchten, können Sie dies mit dem berühmten . tun PageNavi Plugin, jedoch bevorzuge ich es, Paginierung manuell zu meinen Designs hinzuzufügen, damit die Leute nicht nach einem Plugin suchen müssen. Es hilft auch, die Site ohne all die externen Skripte und CSS schneller zu halten.
Zum Glück gibt es in WordPress eine tolle Funktion namens „paginate_links“, das in WordPress 2.1 hinzugefügt wurde und es Ihnen ermöglicht, eine paginierte Navigation für jede Abfrage auf Ihrer Website zu erstellen. Hier ist eine kurze Anleitung zum Hinzufügen einer einfachen Seitennavigation zu Ihrem Thema, die genauso aussieht wie die Paginierung in my Gesamtes WordPressTheme.
Paginierung PHP
Fügen Sie einfach den folgenden Code am Ende Ihrer Datei functions.php (oder einer beliebigen Datei in Ihrem Theme, in der Sie sie aufbewahren möchten) hinzu.
// Numbered Pagination
if ( !function_exists( 'wpex_pagination' ) ) {
function wpex_pagination() {
$prev_arrow = is_rtl() ? '→' : '←';
$next_arrow = is_rtl() ? '←' : '→';
global $wp_query;
$total = $wp_query->max_num_pages;
$big = 999999999; // need an unlikely integer
if( $total > 1 ) {
if( !$current_page = get_query_var('paged') )
$current_page = 1;
if( get_option('permalink_structure') ) {
$format = 'page/%#%/';
} else {
$format = '&paged=%#%';
}
echo paginate_links(array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => $format,
'current' => max( 1, get_query_var('paged') ),
'total' => $total,
'mid_size' => 3,
'type' => 'list',
'prev_text' => $prev_arrow,
'next_text' => $next_arrow,
) );
}
}
}
Paginierungs-CSS
Kopieren Sie das folgende CSS und fügen Sie es in Ihre style.css-Datei ein.
ul.page-numbers {
list-style: none;
margin: 0;
}
.page-numbers:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
ul.page-numbers li {
display: block;
float: left;
margin: 0 4px 4px 0;
text-align: center;
}
.page-numbers a,
.page-numbers span {
line-height: 1.6em;
display: block;
padding: 0 6px;
height: 18px;
line-height: 18px;
font-size: 12px;
text-decoration: none;
font-weight: 400;
cursor: pointer;
border: 1px solid #ddd;
color: #888;
}
.page-numbers a span { padding: 0 }
.page-numbers a:hover,
.page-numbers.current,
.page-numbers.current:hover {
color: #000;
background: #f7f7f7;
text-decoration: none;
}
.page-numbers:hover { text-decoration: none }
Hinzufügen der Paginierungsfunktion zu Ihrem Thema
Um die Paginierungsfunktion zurückzurufen, ist es wirklich einfach. Alles, was Sie tun müssen, ist, den folgenden Code zu Ihren Themendateien hinzuzufügen, in denen Sie jede Art von Paginierung anzeigen möchten. Die gebräuchlichsten sind Ihre index.php, home.php, category.php, tags.php, archive.php und search.php. Wenn Sie jedoch benutzerdefinierte Seitenvorlagen mit Paginierungsunterstützung haben, sollten Sie diese hier hinzufügen.
Ersetzen Sie die Standard-Paginierung durch Folgendes (normalerweise irgendwo nach endif ):
<?php wpex_pagination(); ?>
Benutzerdefinierte Abfragen?
Wenn Sie eine benutzerdefinierte Abfrage mit WP_Query erstellen, funktioniert diese Funktion nicht, es sei denn, Sie haben Ihre Abfrage in der Variablen $wp_query definiert (was schlecht ist, tun Sie es nicht). Um das Problem zu beheben, erstelle ich im Allgemeinen neue Abfragen wie die folgenden:
$wpex_query = new WP_Query( $args );
Auf diese Weise kann ich die Haupt-Paginierungsfunktion ändern, um beim Erstellen der Paginierung nach der Variablen zu suchen, Beispiel (Bearbeiten des ersten Snippets):
global $wp_query, $wpex_query;
if ( $wpex_query ) {
$total = $wpex_query->max_num_pages;
} else {
$total = $wp_query->max_num_pages;
}
Aktualisieren: In diesem Beispiel überprüfe ich die globale Variable…Sie könnten jedoch die Abfragevariable einfach direkt an die Funktion wpex_pagination übergeben, was wahrscheinlich die bessere Wahl ist 😉