WordPress Pagination utan plugin

Postad: 01.11.2020

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.

Denna post innehåller kod-snippar som du kan använda. Det är alltid bra att göra en backup av din stilmall och funktionsfil innan du gör det.

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!

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *

Denna webbplats använder Akismet för att minska skräppost. Lär dig hur din kommentardata bearbetas.