WordPress Pagination utan plugin

WordPress
Postad: 01.11.2020 | Arkiverat · Wordpress

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.

OBS! Dessa koder är obsoleta (föråldrade) och fungerar troligtvis inte längre. De finns enbart kvar som exempel på hur vi kunde göra förr.

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() {
  global $wp_query, $wp_rewrite;
  $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'] = 5; //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'] = '« Previous'; //text of the "Previous page" link
  $a['next_text'] = 'Next »'; //text of the "Next page" link

  if ($max > 1) echo '<div class="navigation">';
  if ($total == 1 && $max > 1) $pages = '<span class="pages">Page ' . $current . ' of ' . $max . '</span>'."rn";
  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/'>&laquo; 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 &raquo;</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 &amp; 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!