Hur du lägger till nummerpagination i ditt WordPress-tema

En av våra läsare frågade oss nyligen hur vi lägger till numerisk pagination på WPBeginner-bloggsidan. WordPress-standardteman och många andra teman visar sidbrytningslänkar genom att lägga till gamla inlägg och nyare inläggslänkar längst ner på WordPress arkivsidor. Det finns emellertid många WordPress-webbplatser som använder nummerpaginering, som WPBeginner. Enligt vår erfarenhet är antalet sökningar lättare att använda, attraktiva och SEO. Mer avancerade WordPress-temaramverk, som Genesis, har inbyggd funktionalitet för att lägga till nummerpagination. I den här artikeln kommer vi att visa dig hur du lägger till nummerpagination i ditt WordPress-tema. Målet är att ersätta de tidigare äldre och nyare sidlänkarna längst ner på arkivsidorna med enkla att navigera sidnummer.

Det finns två metoder för att lägga till nummerpaginering till ditt WordPress-tema. Den första metoden är att manuellt lägga till sidsökning utan att förlita sig på en tredjeparts plugin. Eftersom den här artikeln ingår i temakategorin och är avsedd för nya temadesigners kommer vi först att visa den manuella metoden. Den andra metoden är att använda ett befintligt tredjeparts-plugin för att lägga till nummerpagination. Vi rekommenderar denna metod till alla våra DIY-användare.

Lägg till sidsökning manuellt till dina WordPress-teman

Först kommer vi att visa dig hur du manuellt lägger till nummersökning till dina WordPress-teman. Detta kommer att gynna våra kraftanvändare och användare som lär sig temautveckling eller som vill göra det utan att förlita sig på ett plugin från tredje part. Låt oss börja med att lägga till följande kod i ditt temas funktioner.php-fil.

Obs: Den här koden är härledd 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.

 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 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 ) 

'. "N";
 
 / ** Tidigare inläggslänk * /
 if (get_previous_posts_link ())
 printf ('% s'. "n", get_previous_posts_link ());
 
 / ** Länk till första sidan, plus ellipser vid behov * /
 if (! in_array ( 1, $ länkar)) {
 $ klass = 1 == $ sid? 'class = "aktiv"': '';
 
 printf ('% s'. "n", $ klass, esc_url (get_pagenum_link ( 1 )), '1');
 
 if (! in_array ( 2, $ länkar))
 kastade ut '…';
 }
 
 / ** Länk till aktuell sida, plus 2 sidor i båda riktningarna vid behov * /
 sortera ($ länkar);
 foreach ((array) $ -länkar som $ -länk) {
 $ class = $ paged == $ länk? 'class = "aktiv"': '';
 printf ('% s'. "n", $ klass, esc_url (get_pagenum_link ($ länk)), $ länk);
 }
 
 / ** Länk till sista sidan, plus ellipser vid behov * /
 if (! in_array ($ max, $ länkar)) {
 if (! in_array ($ max – 1, $ länkar))
 kastade ut '…' . "N";
 
 $ class = $ paged == $ max? 'class = "aktiv"': '';
 printf ('% s'. "n", $ klass, esc_url (get_pagenum_link ($ max)), $ max);
 }
 
 / ** Nästa inläggslänk * /
 if (get_next_posts_link ())
 printf ('% s'. "n", get_next_posts_link ());
 
 kastade ut '' . "N";
 
 }

På WPBeginner använder vi samma kod för nummerpaginering på våra arkivsidor (till exempel vår blogg eller sida med kategori för självstudier i WordPress). 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 index.php, archive.php, category.php och alla andra arkivsidesmallar för ditt tema.

Nu när vi har vår lista över numrerade sidor måste vi utforma denna lista. Vi vill få listan att visas inline block där den aktiva sidan är markerad med en annan bakgrundsfärg. För att åstadkomma 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;
 }
 

Varsågod. Vi har en numerisk sökningslista på vårt ämne som ser bra ut.

Lägg till numerisk pagination i WordPress med WP-PageNavi

Låt oss nu titta på hur du lägger till nummerpaginering i ditt WordPress-tema med hjälp av ett befintligt plugin som heter WP-PageNavi. Det första du ska göra är att installera och aktivera WP-PageNavi-plugin. Efter aktivering av plugin går du till Inställningar »PageNavi för att konfigurera insticksinställningarna.

På sidan med insticksinställningar kan du byta ut standardinställningar för text- och nummersökning 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 den äldsta och nyaste paginationen i dina arkivsidesmallar: index.php, archive.php och andra arkivmallfiler. Lägg till följande malltagg för att ersätta de tidigare taggarna föregående_posts_länk och nästa_posts_länk.

När du har lagt till wp_pagenavi-kodavsnittet är det så hur sidsökning skulle se ut:

Om du vill ändra utseendet på färger och nummerpaginationsstil i wp-pagenavi, måste du gå till Inställningar »PageNavi. Avmarkera alternativet för att använda Använd pagenavi-css.css och spara ändringarna. Gå nu till Plugins »Editor. Eftersom Välj plugin som du vill redigera rullgardinsmeny välj WP-PageNavi och klicka på Välj knapp. Redaktören laddar plugin-filerna i den högra sidofältet. Klicka på pagenavi-css.css för att öppna den i redigeraren och kopiera sedan innehållet i filen.

Då 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ärgschema och stil härifrån. Anledningen till att vi kopierar plugin-css-innehåll till tematypmallen är att undvika förlust av stiländringar i fall du uppdaterar plugin-programmet. Här är en något modifierad version av sidsökning, känn dig fri att använda den och ändra 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:

Som alltid bör du experimentera med CSS. Målet borde vara att matcha antalet sökningar med färgutseendet på din webbplats, så att den smälter bra och inte ser ut som ett konstigt placerat objekt.

Vi hoppas att den här artikeln har hjälpt dig att lägga till och visa nummerpagination i ditt WordPress-tema. Vilken metod föredrar du att använda? Gillar du numerisk pagination eller föredrar du inbyggd föregående / nästa navigering? Låt oss veta i kommentarerna nedan.