Theme mnmlwp: Blogliste > Pagination (Seitennummern) oben und unten

Am Fuss vieler Blogseiten wird häufig die sog. “Pagination” (Seitennummerierung) angezeigt, eine Liste aller Blogseiten zum “Durchklicken”. In einem unserer Projekt ist gewünscht, dass diese Pagination auch im oberen Bereich der Blogliste zu sehen ist.

Im Theme mnmlwp geht das so:

a) in der Datei für die Blogbeitragsliste (home.php) ist zu sehen, dass die Liste der Artikel mit der Funktion mnmlwp_get_posts aufgerufen wird, die wiederum in der functions.php definiert ist.

b) ebenfalls in der functions.php wird die Pagination “als solches” durch die Funktion mnmlwp_paginate_links erzeugt und dann so aufgerufen:: $html .= mnmlwp_paginate_links( $paged );

=> Also in der functions..php nach mnmlwp_paginate_links suchen.

Wenn gefunden, dann einfach darin die Paginate Funktion an der gewünschten Stelle hinzufügen, das sieht dann z.B: so aus:

$posts_per_page = get_option('posts_per_page');
$query_var_page = get_query_var('page');

// Eigene Anpassung
$html = mnmlwp_paginate_links( $paged );
echo $html;

Funktioniert soweit – aber das Styling sieht u.U. blöd aus, da die Pagination ja eigentlich nur für das Seitenende gedacht ist. Zum Feintunen weiter in der mnmlwp_paginate_links gucken. Dort sieht der zuständige Abschnitt im aktuellen Projekt z.B. so aus:

// Eigene Anpassung
$html = '<div class="mnmlwp-pagination">';
$html .= get_the_posts_pagination( array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'format' => '?paged=%#%',
'total' => $wp_query->max_num_pages,
'current' => max( 1, $paged ),
'show_all' => false, // true,
'end_size' => 1,
'mid_size' => 2,
'prev_next' => true,
'prev_text' => __('&Lang;'),
'next_text' => __('&Rang;'),
'type' => 'plain',
'add_args' => false,
'add_fragment' => '',
'before_page_number' => '',
'after_page_number' => '',
'screen_reader_text' => false // added
) );
$html .= '</div>';

Das Styling lässt sich hier also mit den entsprechenden Einstellungen beeinflussen, sowie per individuellem CSS über die Klasse mnmlwp-pagination – mit einem kleinen Zusatz (Erklärung folgt sofort) sieht das bei dem gegebenen Projekt dann im CSS bspw. so aus:

div.mnmlwp-pagination{
border:0px;padding:0px;
}

div.mnmlwp-pagination-top{
border:0px;padding:0px;margin-bottom:55px;
}

Die versprochene Erklärung: Die obere und untere Paginationzeile werden beide “im Kern” von derselben CSS Klasse gesteuert (div.mnmlwp-pagination). Die zweite Klasse (div.mnmlwp-pagination-top) habe ich zugefügt, da die Pagination, die dann oben auf den Seiten angezeigt wird, andere Abstände zum Text “drumrum” haben soll als die untere. In der functions..php wurde die obere mnmlwp_paginate_links dafür final nochmal so angepasst:

// Eigene Anpassung
$html = mnmlwp_paginate_links( $paged );
echo '<div class="mnmlwp-pagination-top">' . $html . '</div>';

Jetzt greift die zweite CSS Klasse und erzeugt einen anderen Abstand des Pagination im oberen Bereich.

Für das aktuelle Projekt habe ich damit “fertig” 🙂

Wer noch weiter schrauben möchte, kann sich

a) mit der WP-Core-Funktion get_the_posts_pagination auseinandersetzen (für die auch die die lange Liste der Attribute im mnmlwp_paginate_links Code oben steht): WordPress Developer Reference get_the_posts_pagination

b) im Basis CSS schauen und entweder direkt dort (nicht empfohlen) oder im individuellen CSS dann die entsprechenden Klassen anpassen. Hierzu in der assets/css/main.css des mnmlwp Themes nach “page-numbers” suchen, dann gelangt man zum richtigen Absatz.

Am Ende sah das CSS dann in dem Projekt, um das es ging, so aus:

/* PAGINATION START */

div.mnmlwp-pagination-top{
border:0px;padding:0px;margin-bottom:55px;}

.mnmlwp-pagination nav.navigation.pagination{
border:0px;padding:0px;margin:0px;line-height:1.5em;background-color:#f8f8f8;}

.mnmlwp-pagination span.page-numbers.dots{
background-color:#fff;}

.mnmlwp-pagination a.page-numbers, .mnmlwp-pagination span.page-numbers.current {
padding: .1em .5em;border:none;}

.mnmlwp-pagination span.page-numbers.current {
font-weight: 600;}

.mnmlwp-pagination a.page-numbers:not(.current):hover {
background: #dd9933!important;color:#fff;}

/* PAGINATION END */

Und? Wie macht Ihr das so? 🙂

Happy Coding,
antiblabla admina