Volete aggiungere la paginazione numerica al vostro tema WordPress?
Come predefinito, i temi di WordPress aggiungono i colleghi Next / Previous in fondo alle pagine degli archivi. Il problema è che non sono molto facili da usare per gli utenti. Per questo motivo, molti blog famosi utilizzano la paginazione numerica per facilitare la navigazione delle pagine di archivio.
In questo articolo vi mostreremo come aggiungere la paginazione numerica nel vostro tema WordPress.
Perché aggiungere la paginazione numerica nel tema WordPress?
La maggior parte dei temi ha una pagina di archivio che mostra un elenco di articoli. Man mano che si pubblicano altri articoli del blog WordPress, la pagina dell’archivio si estende su più pagine.
I colleghi di paginazione aiutano i visitatori a spostarsi tra le pagine dell’archivio e di solito appaiono nella parte inferiore del sito web WordPress.
Alcuni temi di WordPress utilizzano i colleghi “Articoli meno recenti” e “Articoli più recenti” per la paginazione. Tuttavia, questo permette al visitatore di spostarsi in avanti e indietro solo di una pagina.
Inoltre, non mostra la posizione attuale del visitatore nell’archivio. Questo può rendere più difficile ai visitatori la navigazione nell’archivio del blog.
È qui che entra in gioco la paginazione numerica.
Invece di mostrare i colleghi “Più vecchio” e “Più nuovo”, la paginazione numerica mostra una serie di numeri che permettono ai visitatori di saltare a una pagina specifica dell’archivio.
La paginazione numerica può anche utilizzare delle evidenziazioni o dei colori diversi per mostrare il numero della pagina corrente, in modo che il visitatore sappia sempre esattamente dove si trova nell’archivio.
In WPBeginner, utilizziamo la paginazione numerica e mettiamo in evidenza il numero della pagina corrente in arancione. Inoltre, forniamo collegamenti diretti alle 4 pagine che circondano la pagina corrente del visitatore.
Abbiamo anche un collega all’ultima pagina del nostro archivio, in modo che i visitatori possano vedere rapidamente e facilmente i nostri primi articoli, come si può vedere nell’immagine seguente.
Secondo la nostra esperienza, questo tipo di paginazione numerica rende il sito più facile da navigare rispetto ai collegamenti predefiniti “Articoli meno recenti” e “Articoli più recenti”.
Se il tema WordPress ha la paginazione “Older” e “Newer”, consigliamo sempre di sostituirla con una paginazione numerica.
In questa guida copriremo due modi diversi per aggiungere la paginazione numerica nel vostro tema WordPress. Se preferite passare direttamente a un metodo particolare, potete utilizzare i colleghi qui sotto.
- Metodo 1. Come aggiungere la paginazione numerica in WordPress utilizzando WP-PageNavi
- Metodo 2. Come aggiungere manualmente la paginazione numerica nel tema di WordPress
Metodo 1. Come aggiungere una paginazione numerica in WordPress usando WP-PageNavi
Il modo più semplice per aggiungere la paginazione numerica in WordPress è utilizzare il plugin WP-PageNavi.
Per utilizzare questo plugin, dovrete comunque apportare alcune modifiche al codice del vostro tema, ma è molto più facile rispetto al metodo del codice completo, perché WP-PageNavi vi dà il controllo completo sulla paginazione del vostro sito.
La prima cosa da fare è installare e attivare il plugin WP-PageNavi. Per maggiori dettagli, consultate la nostra guida passo passo su come installare un plugin di WordPress.
Dopo aver attivato il plugin, andare su Impostazioni ” PageNavi per configurare le impostazioni del plugin.
Qui è possibile sostituire il testo predefinito della paginazione con un testo proprio. Ad esempio, è possibile modificare il testo che il sito web utilizza per i colleghi “Prima pagina” e “Ultima pagina”.
È possibile personalizzare anche i link della paginazione numerica.
Nella sezione “Numero di pagine da mostrare” è possibile scegliere quante pagine il plugin mostrerà nella sezione di paginazione del sito web.
L’impostazione predefinita è 5, il che significa che WP-PageNavi mostrerà i collegamenti diretti a 5 pagine.
Come si può vedere nello screenshot qui sotto, se ci si trova sulla pagina 4, si vedranno i colleghi alle pagine 2, 3, 4, 5 e 6.
È possibile che si vogliano mostrare più pagine o meno pagine. Per modificare questa impostazione, è sufficiente digitare il nuovo numero nel campo “Numero di pagine da mostrare”.
Di default, il plugin mostra diversi numeri più grandi. Ciò consente ai visitatori di avanzare di più pagine, facendo un solo clic.
Di default, il plugin mostra tre numeri più grandi che aumentano di 10 ogni volta. Ad esempio, 10, 20 e 30.
Volete usare un intervallo diverso, come 5 o 20? Basta digitare il nuovo intervallo nel campo “Mostra numeri di pagina più grandi in multipli di”.
Ogni sito WordPress è diverso dall’altro, quindi è bene provare diverse impostazioni per vedere quali sono le impostazioni di paginazione che funzionano meglio per voi.
Se avete apportato delle modifiche alle impostazioni di WP-PageNavi, non dimenticate di scorrere fino in fondo alla pagina e di fare clic sul pulsante Salva modifiche.
Successivamente, è necessario aggiungere un template tagga nel tema di WordPress. A tale scopo, si consiglia di creare un tema child e di modificare il codice del tema child.
Creando un tema child, è possibile aggiornare il tema di WordPress in modo sicuro senza perdere la paginazione numerica personalizzata. Per saperne di più, consultate la nostra guida passo passo su come creare un tema child di WordPress.
Indipendentemente dal fatto che si scelga di modificare un tema child o genitore, è necessario un client FTP. Se è la prima volta che usate l’FTP, potete consultare la nostra guida completa su come connettersi al vostro sito usando l’FTP.
Una volta collegati al vostro account di hosting WordPress tramite FTP, siete pronti a modificare il codice del vostro tema WordPress.
Questi passaggi variano a seconda del tema di WordPress. Tuttavia, in genere è necessario modificare il codice del file index.php o archive.php, oltre a qualsiasi altro template del tema WordPress.
Basta aprire questi file e cercare i tagga previous_posts_link e next_posts_link.
Se si trovano questi tag, sostituirli con il seguente frammento di codice:
<?php wp_pagenavi(); ?>
Alcuni temi potrebbero non avere un tagga previous_posts_link o next_posts_link.
Se non riuscite a trovare questi tag nel vostro tema, cercate invece the_posts_navigation. Ad esempio, nel file archive.php del tema Twenty Twenty-One si trova quanto segue:
<?php /*twenty_twenty_one_the_posts_navigation();*/
Si può quindi sostituire questa riga con il seguente frammento di codice:
<?php wp_pagenavi(); ?>
Dopo aver apportato queste modifiche, salvare e chiudere tutti i file aperti del tema WordPress.
Ora, visitando la pagina dell’archivio di WordPress, si dovrebbe vedere la nuova paginazione numerica sul sito web.
A questo punto si può cambiare il colore e lo stile della paginazione numerica, in modo che si adatti meglio al tema o al brand del sito web.
È possibile farlo modificando il codice del plugin.
Tuttavia, si consiglia di incollare il codice di WP-PageNavi nel file style.css del tema e di apportare le modifiche all’interno del file del tema. In questo modo non si perderanno i personalizzati quando si aggiorna il plugin WP-PageNavi.
Per copiare il codice del plugin, andare su Impostazioni ” PageNavi. Trovare la sezione “Usa pagenavi-css.css” e fare clic sul pulsante “No” accanto.
Non dimenticate di fare clic sul pulsante “Salva le modifiche” per salvare le modifiche.
Quindi, andare su Plugin ” Editore di file di plugin.
Si può quindi aprire il menu a discesa “Seleziona plugin da modificare” e scegliere “WP-Page Navi”. Dopodiché, siete pronti a fare clic su “Seleziona”.
Nel menu di destra, fate clic sul file pagenavi-css.css.
Quindi, copiare tutto il codice in questo file.
Successivamente, basta andare su Aspetto ” Editore dei file del tema.
Nel menu di destra, fate clic sul file style.css del tema.
Ora è possibile incollare il codice pagenavi-css.css nel file style.css del tema e iniziare ad apportare le modifiche.
Vediamo un esempio. Ecco una versione modificata del codice di paginazione numerica da aggiungere al file style.css del 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;
}
Nell’immagine seguente, si può vedere come apparirà la paginazione numerica sul sito.
Vale la pena di provare diversi stili per vedere qual è il migliore sul vostro sito web WordPress.
Quando si è soddisfatti dell’aspetto della paginazione numerica, fare clic sul pulsante Aggiorna file per salvare le modifiche.
Metodo 2. Come aggiungere manualmente la paginazione numerica nel tema di WordPress
Un’altra opzione è quella di aggiungere manualmente la paginazione numerica nel tema di WordPress utilizzando il codice.
Molti temi di WordPress sono dotati di collegamenti “Più vecchio” e “Più nuovo” integrati o di una paginazione numerica predefinita. Ad esempio, il popolare tema Astra aggiunge automaticamente la propria paginazione numerica alle pagine degli archivi, come si può vedere nell’immagine seguente.
È possibile utilizzare questo metodo per personalizzare la paginazione integrata di un tema. Ad esempio, si può cambiare lo stile per adattarlo meglio al proprio sito.
Per aggiungere manualmente la paginazione numerica, aprire il file functions.php del tema. Qui potete utilizzare un client FTP o il file manager del cPanel del vostro hosting WordPress. Se utilizzate l’FTP, potete consultare la nostra guida completa su come connettersi al vostro sito utilizzando l’FTP.
Una volta effettuata la connessione al sito, aprire il file functions.php e aggiungere il seguente codice:
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";
}
Questo codice ottiene il numero di pagine, pronto per essere mostrato nel tema di WordPress.
I passi successivi variano a seconda del tema.
Se il tema non ha un modulo di paginazione predefinito, si può semplicemente aggiungere il seguente template nel file index.php, archive.php, category.php o in qualsiasi altra pagina in cui si voglia mostrare la paginazione numerica.
<?php wpbeginner_numeric_posts_nav(); ?>
Si tenga presente che il punto in cui si aggiunge il codice influisce sulla visualizzazione della paginazione numerica sul sito web.
In genere, si vuole mostrare la paginazione in fondo alle pagine dell’archivio, quindi di solito si vuole aggiungere il template tag al codice del footer.
Il tema ha già qualche modulo di paginazione, come ad esempio i link “Articoli meno recenti” e “Articoli più recenti”?
In questo caso, è necessario trovare il codice di paginazione e sostituirlo con lo snippet qui sopra.
Ad esempio, Ashe è uno dei migliori temi gratuiti per blog WordPress e aggiunge già i link di paginazione “Prima” e “Ultima pagina” alle pagine degli archivi.
Per sostituire questi collegamenti integrati con la paginazione numerica, è necessario modificare i file template/grid.php e template/blog-pagination.php del tema.
In ognuno di questi file, è sufficiente trovare la seguente sezione:
<?php get_template_part( 'templates/grid/blog', 'pagination' ); ?>
Si può quindi sostituire questa riga con il seguente frammento di codice:
<?php wpbeginner_numeric_posts_nav(); ?>
Una volta aggiunto il codice, non dimenticate di salvare le modifiche.
Il passo successivo è la creazione di una paginazione numerica personalizzata.
Per aiutare i visitatori a navigare nell’archivio, metteremo in evidenza il numero della pagina corrente con un colore diverso. A tale scopo, aprire il file style.css del tema e incollarvi il seguente codice:
.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;
}
Dopo tutto ciò, è sufficiente salvare le modifiche facendo clic sul pulsante Aggiorna file.
Ora, se visitate la pagina dell’archivio, vedrete la paginazione numerica in diretta sul vostro sito web.
Speriamo che questo articolo vi abbia aiutato a capire come aggiungere la paginazione numerica nel vostro tema WordPress. Potete anche consultare la nostra guida su come fare soldi online facendo blog con WordPress e su come creare un tema personalizzato per WordPress senza scrivere alcun codice.
Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Sujal says
There’s little bug in last lines which shows next link. You’re missing $ sign at two places get_next_posts_link() . Can you please fix that so code works well for new visitors
/** Next Post Link */
if ( $get_next_posts_link() )
printf( ‘%s’ . “\n”, $get_next_posts_link() );
Sandipan says
Not working. . After adding the code index.php links not working
WPBeginner Support says
Your theme may have some custom styling, you would want to reach out to your theme’s specific support and they should be able to assist.
Admin
Quy says
thanks.
Normally, home.php will show up the loop content for Post page, but since my theme does not provide home.php by default so I put the wpbeginner_numeric_posts_nav(); at index.php (below endwhile;) and it works.
WPBeginner Support says
Thanks for sharing how you were able to solve the issue
Admin
FloJDM says
Very Helpful Thx !
WPBeginner Support says
You’re welcome
Admin
Alexandre says
Awesome article, simple and straight to the point!
It worked perfectly for me, thanks a lot!!
WPBeginner Support says
Glad our guide was helpful
Admin
ModGirl says
I’m using the wordpress theme “X Blog” and I’m trying to figure out how to add this to that theme. everything I try keeps giving me errors. not sure why the theme won’t work with this. any help would be appreciated. thanks
Adam says
This is a really useful tutorial, thanks. I used the genesis code example with success!
My one issue was that simply copying and pasting the code from this site caused an encoding error for where the ellipses go in the numbered pagination. So on the site it displayed a diamond/question mark character instead of the ellipsis. I ended up using the HTML Entity (decimal) ellipsis: … instead which fixed this error. This only occurred on one of the two sites implemented this code on probably due to differences in meta charset or something.
Ilya says
Greetings from 2018! I have something cool for you, WordPress core the_posts_pagination() function.
jagadeesh says
i have added the code but displaying at the top of website
Sijo says
Pagination not working after page2. It’s showing 404 page when click 3 ,4 etc… I have used the same code above. How can i resolve this ?
Jean Braithwaite says
I am using your manual method for pagination, and you say “add the following template tag in your theme’s index.php, archive.php, category.php, and any other archive page template”.
The site is a regular website along with a blog which uses a custom post type.
It worked well on my archive.php page, but I would also like to use it on my blog page, which is a page template, page-blog.php. I can’t get it to work there at all. Why is that? Is there something I can do to get it working?
ziru says
hello, I added to some templates and my wordpress couldn’t work anymore, not even login in and my homepage turn to a blank page and seems the whole website break down, what can I do?
Turab says
Love u for this. U’re a lifesaver.
Subroto says
Thank you very much for this post.
Ingy Anees says
This is working fine with me in custom post type but can’t get it to work with search results .. nothing is shown at all. and advice ?
souno says
Very nice article and i have a question.
How to show total number of pages at last? In your demo it shows “9”
Thank You!
renee says
awesome code – worked like a charm! thank you for sharing it
Azamat says
How can I add pagination to the custom taxonomy terms list?
Andy says
Like Rajath I had a few problems with the pagination not rendering well on mobiles. In my case the lines overlapped. I resolved this by adding a line height to the CSS:
line-height: 2.5em;
mostafa says
Hi, I ‘ve used this code for my theme (without wp-nav plugin) ,it works other pages except in front page .what is exactly the problem?
Rajath says
Hi i`m using this pagination in my theme and it works fine in all pages and categories except in the pages where i`m using custom wp_query. I`ve read that you are using a code similar to the one in genesis framework and i`ve used wp_reset_query() but it isn`t working. Thanks in advance for the help.
anuj sharma says
hi
i m using your given code and paste in function .php and also add css in style.css but this shows pagination design but its not working
JM says
Hello! First off, I want to thank you for posting this. I know that this post is now pretty old, but it is still very useful!
The pagination displays and functions fine for the most part; but the first and last page links are missing for me. It does not matter which page I am on (first, second, third, etc.), no first page or last page links show up. Any ideas on how I can fix this?
Thanks in advance for any help!
Syed Hamza says
Numeric Pagination shows only on PC but doesn’t show on mobile. I want to show this pagination on both versions.
How I can fix it?
JeffD says
Thank you so much for the excellent tutorial. I want to use the non-plugin solution (the php script), but with no truncation/ellipses for page links (instead of 1…2 3 4 5 6…10, I want to just show all pages all the time – 1 2 3 4 5 6 7 8 9 10). How can I modify the script to do this? Should be easy for you experts but not for me! Thank you in advance for any helps!
Nelson says
This code is not working for me, are there any pointers
Youssef says
Hi I want return default wp pagination in my theme” freshlife by theme junkie I don’t Like the numeric pagination because it show the total posts in my website . please wpbeginne help
Bilal says
i want to paginate my products how can i do it
Rajath says
Hi, NIce tutorial and your website have helped me in many issues while developing my own theme. I have opted for the manual pagination shown here instead of plugin. But the pagination is not responsive and looks bad when the screen size is reduced. How to make it responsive or are there any other alternatives(no plugins please).I`m not going to publish this theme so i`m building it just to suit my need…
WPBeginner Support says
Look at your WordPress theme’s stylesheet. Study how your theme handles responsiveness. Some themes use media queries to detect screen width and then adjust different elements accordingly. Some themes use relative widths to make sure that all elements inside their design layout are responsive to the screen width.
Admin
Rajath says
I’m developing the theme. I’m unable to make the pagination responsive. So I just removed the padding around the links which make them to look like a button. Instead I left them like numbers which works fine in small screens too. Thank You for the reply.
javad says
hi
i used first code in function but WP language changed to unreadable words why????
Gabriel Tellez says
Thanks man, is great.
James says
I’m trying to remove the pagination from my homepage found below each summary post, to me it doesn’t look great, is there a way to do this.
WPBeginner Support says
Please contact your WordPress theme developer. They will be able to guide you better.
Admin
Aryan says
Actually i am new to wordpress but i know php good……i want to add a pagination from custom table in data base……
Fasih says
the numbered pagination without the plugin is working fine on localhost but when i upload the files i cant see anything but when i check the inspect element, the only thing i found was an empty div containing the classes but with nothing inside it. i have uploaded all the files correctly and double checked but not successful. please guide me
Abraham says
Cool!
Marco Riesco says
Excelent!! thanx
Moustafa says
This script does not work in the new WordPress 4.3.1
omdat bij de oude versie heeft die script wel gewerkt en nu niet meer
Pleas help…
Tom says
You really helpped me. Thanks !
Sam says
Thanks very helpful
lucky cabarlo says
how can i adjust the numbers to show in the custom numeric pagination
spongie says
how do you limit the page number to say up to 2 only then show ellipsis?
krishma says
can i use this plugin for custom post type
Astra says
Of course mate. You just need to put this code into your page-custom.php
Med says
Hello,
I found this very useful and I placed it to my new site. The problem is that it works perfect on the first page of the category, and after clicking on the “Next” link the url changes to /page/2/ but the highlighted page number is aways “1” and the content is always the first 10 articles (always in the first page).
I think there is something missing in my query:
<a href="”>
‘aligncenter’));
} else {
echo ”;
}
?>
Preeti Bhandari says
how can i prevent whole page reload when clicking on next link, only want to refresh that particular section… Please help….
Luis Eduardo Braschi says
Because “the goal is to replace the default Older and Newer pagination links at the bottom of archive pages” – and this is what “your” function does – “with easy to navigate page numbers.”.
Tony says
Hi how do you get just the next and previous links only. thanks.
Barry says
How can i use the wpbeginner_numeric_posts_nav(); for my Custom Post type?
I have replaced global $wp_query for
$args = array(
‘post_type’ => ‘my-cpt’,
‘meta_key’=>’cpt_detail’,
‘orderby’=>’meta_value’,
‘order’ => ‘ASC’,
‘paged’ => $paged
);
$cpt_query = new WP_Query($args);
and replaced $wp_query reference with $cpt_query but it doesn’t work
igloobob says
Hi, did you ever figure this out please? I’m trying to get this working myself and struggling. Would appreciate your help very much if you got it working…
Ashley Michèlle says
Using the ‘wpbeginner_numeric_posts_nav’ method, how would one change the navigation brackets? I’m not a huge fan of the ‘»’.
Thanks!
James George Dunn says
Hello Ashley,
You can set a value in the brackets of get_previous_posts_link() and get_next_posts_link(). For example, get_next_posts_link(‘Next Post’) will show “Next Post” instead of the default “Next Page »”.
AmirMasoud says
how can i change “Next Page” & “Previous page” text?
TimParkerRD says
If you’re using the wpbeginner_numeric_posts_nav function, you can pass custom text to the get_next_posts_links() and get_previous_posts_link(), like so:
get_previous_posts_link(“Go Back”);
Daniel Ortiz says
since Genesis Framework is not an open-source framework, are we allowed to use this code, commercially or not?( and are you allowed to distribute it?)
mr anon says
thanks a lot