SÄ hÀr lÀgger du till numerisk paginering i ditt WordPress-tema

Difference between default WordPress navigation and Numeric Pagination

En av vÄra lÀsare frÄgade oss nyligen hur vi lÀgger till numerisk paginering pÄ WPBeginner-bloggsidan. Standard WordPress-teman och mÄnga andra teman visar paginationslÀnkar genom att lÀgga till Àldre inlÀgg och nyare inlÀggslÀnkar lÀngst ner pÄ dina WordPress-arkivsidor. Det finns dock mÄnga WordPress-webbplatser som anvÀnder numerisk paginering, som WPBeginner. Enligt vÄr erfarenhet Àr numerisk paginering mer anvÀndarvÀnlig, attraktiv och SEO-vÀnlig. De flesta avancerade WordPress-temaramar som Genesis kommer med en inbyggd funktionalitet för att lÀgga till numerisk paginering. I den hÀr artikeln visar vi dig hur du lÀgger till numerisk paginering i ditt WordPress-tema. MÄlet Àr att ersÀtta standardlÀnkar för Àldre och nyare paginering lÀngst ner pÄ arkivsidor med enkla att navigera pÄ sidnummer.

Det finns tvÄ metoder för att lÀgga till numerisk paginering i ditt WordPress-tema. Den första metoden Àr att manuellt lÀgga till numerisk paginering utan att förlita sig pÄ ett plugin frÄn tredje part. Eftersom den hÀr artikeln Àr i temakategorin och avsedd för nya temadesigners kommer vi att visa den manuella metoden först. Den andra metoden Àr att anvÀnda ett befintligt plugin frÄn tredje part för att lÀgga till numerisk paginering. Vi rekommenderar den metoden för alla vÄra DIY-anvÀndare.

Manuellt lÀgga till numerisk paginering i dina WordPress-teman

Först visar vi dig hur man manuellt lÀgger till numerisk paginering i dina WordPress-teman. Detta kommer att gynna vÄra avancerade anvÀndare och anvÀndare som lÀr sig temautveckling, eller vill göra detta utan att förlita sig pÄ ett plugin frÄn tredje part. LÄt oss komma igÄng genom att lÀgga till följande kod i temas funktioner.php-fil.

Obs! Den hÀr koden kommer frÄn Genesis Framework som vi anvÀnder pÄ vÄr webbplats. Om du anvÀnder Genesis behöver du inte den hÀr koden eller plugin-programmet.



function wpbeginner_numeric_posts_nav() {

	if( is_singular() )
		return;

	global $wp_query;

	/** Stop execution if there's only 1 page */
	if( $wp_query->max_num_pages <= 1 )
		return;

	$paged = get_query_var( 'paged' ) ? absint( get_query_var( 'paged' ) ) : 1;
	$max   = intval( $wp_query->max_num_pages );

	/**	Add current page to the array */
	if ( $paged >= 1 )
		$links[] = $paged;

	/**	Add the pages around the current page to the array */
	if ( $paged >= 3 ) {
		$links[] = $paged - 1;
		$links[] = $paged - 2;
	}

	if ( ( $paged + 2 ) <= $max ) {
		$links[] = $paged + 2;
		$links[] = $paged + 1;
	}

	echo '<div class="navigation"><ul>' . "n";

	/**	Previous Post Link */
	if ( get_previous_posts_link() )
		printf( '<li>%s</li>' . "n", get_previous_posts_link() );

	/**	Link to first page, plus ellipses if necessary */
	if ( ! in_array( 1, $links ) ) {
		$class = 1 == $paged ? ' class="active"' : '';

		printf( '<li%s><a href="%s">%s</a></li>' . "n", $class, esc_url( get_pagenum_link( 1 ) ), '1' );

		if ( ! in_array( 2, $links ) )
			echo '<li>
</li>';
	}

	/**	Link to current page, plus 2 pages in either direction if necessary */
	sort( $links );
	foreach ( (array) $links as $link ) {
		$class = $paged == $link ? ' class="active"' : '';
		printf( '<li%s><a href="%s">%s</a></li>' . "n", $class, esc_url( get_pagenum_link( $link ) ), $link );
	}

	/**	Link to last page, plus ellipses if necessary */
	if ( ! in_array( $max, $links ) ) {
		if ( ! in_array( $max - 1, $links ) )
			echo '<li>
</li>' . "n";

		$class = $paged == $max ? ' class="active"' : '';
		printf( '<li%s><a href="%s">%s</a></li>' . "n", $class, esc_url( get_pagenum_link( $max ) ), $max );
	}

	/**	Next Post Link */
	if ( get_next_posts_link() )
		printf( '<li>%s</li>' . "n", get_next_posts_link() );

	echo '</ul></div>' . "n";

}


PÄ WPBeginner anvÀnder vi samma kod för numerisk pagination pÄ vÄra arkivsidor (till exempel vÄr blogg eller WordPress tutorials kategorisida). Vad den hÀr koden gör Àr att den hÀmtar antalet sidor och förbereder en punktlista med numrerade lÀnkar. För att lÀgga till detta i dina mallar mÄste du lÀgga till följande malltagg i ditt temas index.php, archive.php, category.php och nÄgon annan arkivsidesmall.


	<?php wpbeginner_numeric_posts_nav(); ?>

Nu nÀr vi har fÄtt vÄr lista med numrerade sidor mÄste vi utforma listan. Vi vill fÄ listan att visas i rad dÀr den aktiva sidan Àr markerad med en annan bakgrundsfÀrg. För att uppnÄ det, lÄt oss gÄ vidare och lÀgga till följande i ditt temas stil.css-fil:


.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
	color: #fff;
	text-decoration:none;
}

.navigation li {
	display: inline;
}

.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
	background-color: #6FB7E9;
	border-radius: 3px;
	cursor: pointer;
	padding: 12px;
	padding: 0.75rem;
}

.navigation li a:hover,
.navigation li.active a {
	background-color: #3C8DC5;
}

DÀr har du det. Vi har en lista med numerisk paginering i vÄrt tema som ser bra ut.

Manuellt lÀgga till numerisk paginering i WordPress-teman utan ett plugin

LĂ€gga till numerisk paginering i WordPress med WP-PageNavi

LÄt oss nu titta pÄ hur du lÀgger till numerisk paginering i ditt WordPress-tema genom att anvÀnda ett befintligt plugin som heter WP-PageNavi. Det första du behöver göra Àr att installera och aktivera WP-PageNavi-plugin. Efter att ha aktiverat plugin, gÄ till InstÀllningar »PageNavi för att konfigurera plugininstÀllningarna.

Konfigurera WP-PageNavi-instÀllningar

PÄ insticksidan för plugin-program kan du ersÀtta standardinstÀllningarna för text och numeriska sidor med dina egna om du vill. StandardinstÀllningarna bör dock fungera för de flesta webbplatser.

I nÀsta steg mÄste du lÀgga till en malltagg i ditt WordPress-tema. GÄ till din temamapp och hitta raderna för Àldre och nyare paginering i dina arkivsidesmallar: index.php, archive.php och andra arkivmallfiler. LÀgg till följande malltagg för att ersÀtta de gamla taggarna för tidigare_posts_link och next_posts_link.

<?php wp_pagenavi(); ?>

NÀr du har lagt till wp_pagenavi-kodavsnittet, sÄ ser den numeriska paginationen ut:

Standardvy av wp-pagenavis numeriska paginering

Om du vill Àndra hur fÀrgerna och stilen för numerisk paginering i wp-pagenavi ser ut, mÄste du gÄ till InstÀllningar »PageNavi. Avmarkera alternativet att anvÀnda AnvÀnd pagenavi-css.css och spara Àndringar. GÄ nu till Plugins »Editor. FrÄn rullgardinsmenyn, vÀlj och klicka pÄ knappen. Redaktören laddar plugin-filer i högra sidofÀltet. Klicka pÄ pagenavi-css.css för att öppna den i redigeraren och kopiera sedan innehÄllet i filen.

Kopiera innehÄllet i pagenavi-css-filen

DÀrefter mÄste du gÄ till Utseende »Redaktör och klistra in innehÄllet i pagenavi-css.css i ditt temas stil.css-fil. Nu kan du Àndra fÀrgschemat och stylingen hÀrifrÄn. Anledningen till att vi kopierade innehÄllet i plugins css till temas stilark Àr att förhindra förlust av stilÀndringar om du uppdaterar plugin. HÀr Àr en nÄgot modifierad version av numerisk pagination, anvÀnd gÀrna och modifiera den i ditt tema.



.wp-pagenavi {
	clear: both;
}

.wp-pagenavi a, .wp-pagenavi span {
	color: #FFF;
	text-decoration: none;
	background-color:#6FB7E9; 
	border: 1px solid #B2D1E5;
	padding: 5px 5px;
	margin: 2px;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
	border-color: #E9F2F9;
	background-color:#6FB7E9;
}

.wp-pagenavi span.current {
	font-weight: bold;
	background-color:#3C8DC5;
}

SÄ hÀr ser det ut:

Anpassad PageNavi CSS

Som alltid bör du experimentera med CSS. MÄlet bör vara att matcha den numeriska sidbilden med utseendet pÄ din webbplats fÀrger, sÄ att den smÀlter in snyggt och inte ser ut som ett konstigt placerat objekt.

Vi hoppas att den hÀr artikeln hjÀlpte dig att lÀgga till och visa numerisk paginering i ditt WordPress-tema. Vilken metod föredrar du att anvÀnda? Gillar du den numeriska sidan eller föredrar du den inbyggda föregÄende / nÀsta navigationen? LÄt oss veta i kommentarerna nedan.