kaxigt.com

Visste du att du kan få till en fin post-paginering med WordPress egen inbyggda core-funktion utan att använda något plugin? Faktum är att denna funktion har funnits med sedan wp version 2.1. Inte alla vet om det.

Jag använde den ofta förr i tiden i mina gamla teman på ThemesCloud men den är fortfarande funktionell. Vi ska nu gå igenom hur du kan implementera denna funktion i ditt tema.

Börja med att öppna din functions.php.

Kopiera denna kod till din functions.php

function wp_corenavi() {
  $pages = '';
    $max = $wp_query->max_num_pages;
    if (!$current = get_query_var('paged')) $current = 1;
    $a['base'] = str_replace(999999999, '%#%', get_pagenum_link(999999999));
    $a['total'] = $max;
    $a['current'] = $current;

    $total = 1; //1 - display the text "Page N of N", 0 - not display
    $a['mid_size'] = 2; //how many links to show on the left and right of the current
    $a['end_size'] = 1; //how many links to show in the beginning and end
    $a['prev_text'] = $prev; //text of the "Previous page" link
    $a['next_text'] = $next; //text of the "Next page" link
    $a['before_page_number'] = '<span class="pagination_elem">';
    $a['after_page_number'] = '</span>';

    $big = 999999999; // need an unlikely integer
    if ($max > 1) echo '<div class="navigation">';
    echo $pages . paginate_links($a);
    if ($max > 1) echo '</div>';
}

Post-navigation:

Byt ut dina post-navigationkoder i dina wordpress POST-filer (exv index.php, single.php, category.php, archive.php)

<?php // Previous/next page navigation. the_posts_pagination( array( 'prev_text' => __( 'Previous page', 'your_theme' ),
				'next_text'          => __( 'Next page', 'your_theme' ),
				'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'your_theme' ) . ' </span>',
			) );
		?>

till denna kod

<?php if (function_exists('wp_corenavi')) wp_corenavi(); ?>

Din HTML output kommer då att se ut här:

<div class="navigation"><span class="pages">Page 8 of 38</span> <a class="prev page-numbers" href="https://site.name/page/7/">« Previous</a> <a class="page-numbers" href="https://site.name/page/1/">1</a> <span class="page-numbers dots">...</span> <a class="page-numbers" href="https://site.name/page/4/">4</a> <a class="page-numbers" href="https://site.name/page/5/">5</a> <a class="page-numbers" href="https://site.name/page/6/">6</a> <span class="page-numbers current">8</span> <a class="page-numbers" href="https://site.name/page/9/">9</a> <a class="page-numbers" href="https://site.name/page/10/">10</a> <a class="page-numbers" href="https://site.name/page/10/">10</a> <span class="page-numbers dots">...</span> <a class="page-numbers" href="https://site.name/page/38/">38</a> <a class="next page-numbers" href="https://site.name/page/9/">Next »</a></div>

Din visuella output kommer att se ut så här

Som du ser har du full kontroll på resultatet så du kan styla din html i css-mallen efter dina egna önskemål så de passar just ditt tema. Kika på exemplet här under.

Style.css

.pagination {
	background: #f4f4f4;
	padding: 20px;
}

/* Pages (eg. Page 1 of 10) */
.pages {
	color: #888;
	margin-right: 10px;
	font-size: 13px;
}

/* All Page Numbers */
.page-numbers { padding: 5px 10px; }

/* Page Links & Hover */
a.page-numbers {
	background: #f4f4f4;
	border: 1px solid #d7d7d7;
	color: #252525;
}
a.page-numbers:hover { background: #e1e1e1;}

/* Current Page */
.page-numbers.current {
	background: #252525;
	border: #252525;
	color: #ffffff;
}

/* Dots Between First & Last Pages */
.page-numbers.dots {
	border: none;
	background: none;
	padding: 0;
	color: #888;
}

/* Next & Previous Page Link */
.next.page-numbers,
.prev.page-numbers {
	background: #252525;
	color: #ffffff;
}

/* Next / Previous Page Link Hover */
.next.page-numbers:hover,
.prev.page-numbers:hover {
	background: #333;
}

Med ovanstående css blir det så här

Just function wp_corenavi() är en utvald del hämtad hos https://pastebin.com/aSWrPqk3.

Dokumentet innehåller fler godbitar för den som är intresserad. Variant på CSS hos https://alychitech.com/create-wordpress-pagination-without-plugin/#Step_3_Styling_the_Pagination

Lycka till!