WordPressテーマに数値ページ送りを追加したいですか？
WordPressのデフォルト設定では、アーカイブページの下部に「次へ」「前へ」のリンクが追加されている。課題は、それがあまりユーザーフレンドリーではないということだ。そのため、多くの人気ブログでは、訪問者がアーカイブページをナビゲートしやすいように、数字によるページ送りを採用している。
この投稿では、WordPressテーマに数値ページ送りを追加する方法を紹介します。
なぜWordPressテーマに数値ページ送りを追加するのか？
ほとんどのテーマには、投稿のリストを表示するアーカイブページがあります。WordPressブログの投稿を公開するにつれて、アーカイブページは複数のページにまたがるようになります。
ページ送りリンクは、訪問者がアーカイブページ間を移動するのに役立ち、通常WordPressサイトの下部に表示されます。
WordPressテーマの中には、ページ送りに「過去の投稿」と「新しい投稿」のリンクを使うものがある。しかし、これでは訪問者は1ページ分しか前後に移動できません。
また、アーカイブ内の訪問者の現在位置も表示されません。これは、訪問者があなたのブログのアーカイブをナビゲーションすることを難しくします。
そこで登場するのが数字ページ送りだ。
数字ページ送りでは、「古い」「新しい」リンクを表示する代わりに、訪問者がアーカイブの特定のページにジャンプできるよう、一連の数字を表示します。
数字によるページ送りでは、ハイライトや異なる色を使って現在のページ番号を表示することもできるため、訪問者は自分がアーカイブのどこにいるのかを常に正確に把握することができます。
WPBeginnerでは、数字によるページ送りを採用し、現在のページ番号をオレンジ色で強調しています。また、訪問者の現在のページを囲む4つのページへの直接リンクも提供しています。
また、アーカイブの最後のページへのリンクも用意しており、訪問者は次の画像にあるように、クイックポストを簡単に見ることができる。
私たちの経験では、このような数字によるページ送りは、初期設定の「過去の投稿」や「新しい投稿」リンクに比べ、サイトをナビゲートしやすくします。
WordPressテーマに「古いページ送り」と「新しいページ送り」がある場合は、数値ページ送りに置き換えることをお勧めします。
このガイドでは、WordPressテーマに数値ページ送りを追加する2つの異なる方法を説明します。特定の方法にすぐに飛びつきたい場合は、以下のリンクをご利用ください。
方法1.WP-PageNaviを使ってWordPressに数値ページ送りを追加する方法
WordPressで数値ページ送りを追加する最も簡単な方法は、WP-PageNaviプラグインを使うことです。
このプラグインを使用するには、テーマのコードを変更する必要がありますが、WP-PageNaviはサイトのページ送りを完全にコントロールできるため、完全なコードによる方法よりもはるかに簡単です。
まず最初に、WP-PageNaviプラグインをインストールして有効化します。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。
プラグインを有効化した後、設定 ” PageNaviでプラグインの設定を行います。
ここでは、初期設定のページ送りテキストを独自の文言に置き換えることができます。例えば、あなたのサイトが「最初のページ」と「最後のページ」のリンクに使用するテキストを変更することができます。
数字ページ送りリンクのカスタマイズも可能です。
Number Of Pages To Show’（表示するページ数）セクションでは、プラグインがサイトのページ送りセクションに表示するページ数を選択できます。
初期設定では5ページに設定されており、WP-PageNaviは5ページへの直接リンクを表示します。
下のスクリーンショットでわかるように、もしあなたが4ページ目にいる場合、2、3、4、5、6ページ目へのリンクが表示されます。
より多くのページを表示したい場合もあれば、より少ないページを表示したい場合もあるでしょう。この変更を行うには、「表示するページ数」フィールドに新しい数を入力するだけです。
初期設定では、プラグインはいくつかの大きな数字を表示します。これにより、訪問者はワンクリックで複数のページを進むことができます。
初期設定では、プラグインは毎回10ずつ増える3つの大きな数字を表示する。例えば、10、20、30。
5や20など、別の間隔を使いたいですか？その場合は、「ページ番号を倍数で大きく表示」フィールドに新しい間隔を入力するだけです。
WordPressサイトはそれぞれ異なるので、どのページ送りが一番効果的か、いろいろな設定を試してみるのがよいでしょう。
WP-PageNaviの設定を変更した場合は、忘れずにページを一番下までスクロールし、「変更を保存」ボタンをクリックしてください。
次に、WordPressテーマにテンプレートタグを追加する必要があります。これを行うには、子テーマを作成し、子テーマのコードを編集することをお勧めする。
子テーマを作成することで、カスタマイザーのページ送りを失うことなく、WordPressテーマを安全に更新することができます。さらに詳しく知りたい方は、WordPressの子テーマを作成する方法のステップバイステップガイドをご覧ください。
親テーマと子テーマのどちらを編集するにしても、FTPクライアントが必要です。初めてFTPを使用する場合は、FTPを使用してサイトに接続する方法についての完全なガイドを参照してください。
FTPでWordPressホスティングアカウントに接続したら、WordPressテーマのコードを編集する準備ができました。
これらの手順はWordPressテーマによって異なります。しかし、通常はindex.phpまたはarchive.phpファイルのコードを編集し、WordPressテーマの他のアーカイブテンプレートファイルも編集する必要があります。
これらのファイルを開き、previous_posts_linkタグとnext_posts_linkタグを検索するだけだ。
これらのタグを見つけたら、以下のコード・スニペットで置き換えてください：
<?php wp_pagenavi(); ?>
テーマによってはprevious_posts_linkタグやnext_posts_linkタグがない場合があります。
テーマ内にこれらのタグが見つからない場合は、代わりにthe_posts_navigationを探してください。例えば、Twenty Twenty-Oneテーマのarchive.phpファイルには以下のように記述されています：
<?php /*twenty_twenty_one_the_posts_navigation();*/
この行を次のコード・スニペットで置き換えることができる：
<?php wp_pagenavi(); ?>
これらの変更を行った後、保存し、開いているWordPressテーマファイルをすべて閉じます。
これで、WordPressのアーカイブページにアクセスすると、あなたのサイトに新しい数字ページ送りが表示されているはずです。
この時点で、テーマやサイトのブランディングに合うように、数字ページ送りの色やスタイルを変更することができます。
プラグインのコードを編集することで可能です。
しかし、WP-PageNaviのコードをテーマのstyle.cssファイルに貼り付け、テーマファイル内で変更することをお勧めします。これにより、WP-PageNaviプラグインを更新してもカスタマイザーが失われることはありません。
プラグインのコードをコピーするには、設定 ” PageNaviにアクセスしてください。そして「pagenavi-css.cssを使用する」セクションを見つけ、その横にある「いいえ」のラジオボタンをクリックしてください。
変更を保存するために「変更を保存」ボタンをクリックすることを忘れないでください。
次に、プラグイン ” プラグインファイルエディターに進みます。
そして、「編集するプラグインを選択」のドロップダウンを開き、「WP-Page Navi」を選択します。その後、「選択」をクリックすれば準備完了です。
右側のメニューで、pagenavi-css.cssファイルをクリックします。
次に、このファイルのコードをすべてコピーする。
次に、外観 ” テーマファイルエディターを開きます。
右側のメニューで、テーマのstyle.cssファイルをクリックする。
pagenavi-css.cssのコードをテーマのstyle.cssファイルに貼り付けて、変更を開始します。
例を見てみよう。以下は、テーマのstyle.cssファイルに追加できる、数値ページ送りのコードの修正版です：
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;
}
次の画像では、この数字ページ送りがあなたのサイトでどのように見えるかを見ることができる。
あなたのWordPressサイトに何が一番似合うか、いろいろなスタイルを試してみる価値がある。
ページ送りが完成したら、「ファイルを更新」ボタンをクリックして変更を保存します。
方法2.WordPressテーマに手動で数値ページ送りを追加する方法
もう一つのオプションは、WordPressテーマにコードを使用して手動で数値ページ送りを追加することです。
多くのWordPressテーマには、「Older」と「Newer」リンク、または初期設定の数値ページ送りがビルトインされています。例えば、人気のあるAstraテーマは、次の画像で見ることができるように、アーカイブページに独自の数値ページ送りを自動的に追加します。
この方法は、テーマにビルトインされているページ送りをカスタマイズするために使うことができます。例えば、あなたのサイトに適したスタイルに変更することができます。
手動で数値ページ送りを追加するには、テーマのfunctions.phpファイルを開きます。ここでは、FTPクライアントまたはWordPressホスティングサービスcPanelのファイルマネージャを使用することができます。FTPを使用している場合は、FTPを使用してサイトに接続する方法についての完全なガイドを参照してください。
サイトへの接続に成功したら、functions.phpファイルを開き、以下のコードを追加します：
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";
}
このコードはページ数を取得し、WordPressテーマで表示できるようにします。
次のステップはテーマによって異なります。
もしあなたのテーマに初期設定のビルトインがない場合は、index.php、archive.php、category.phpなど、数値ページ送りを表示したいページに以下のテンプレートタグを追加するだけです。
<?php wpbeginner_numeric_posts_nav(); ?>
ただ、このコードをどこに追加するかによって、数字ページ送りがサイト上のどこに表示されるかが変わることに注意してください。
通常、アーカイブページの下部にページ送りを表示したいので、フッターコードにテンプレートタグを追加します。
あなたのテーマには、すでに「過去の投稿」や「新しい投稿」のようなページ送りがありますか？
この場合、ページ送りのコードを見つけて、上のスニペットで置き換える必要がある。
例えば、Asheは 最高の無料WordPressブログテーマの一つで、すでにアーカイブページに「最初のページ」と「最後のページ」のページ送りリンクを追加している。
これらのビルトインリンクを数値ページ送りに置き換えるには、テーマのtemplates/grid.phpとtemplates/blog-pagination.phpファイルを編集する必要があります。
これらのファイルのそれぞれで、以下のセクションを見つけるだけだ：
<?php get_template_part( 'templates/grid/blog', 'pagination' ); ?>
この行を次のコード・スニペットで置き換えることができる：
<?php wpbeginner_numeric_posts_nav(); ?>
コードを追加したら、変更を保存するのを忘れないでください。
次のステップは、カスタマイザーの数字ページ送りのスタイリングです。
訪問者がアーカイブをナビゲートしやすいように、現在のページ番号を別の色で強調表示します。これを行うには、テーマのstyle.cssファイルを開き、次のコードをこのファイルに貼り付けます：
.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;
}
すべて完了したら、「ファイルを更新」ボタンをクリックして変更を保存します。
これで、アーカイブページにアクセスすると、あなたのサイトに数字によるページ送りが表示される。
この投稿が、WordPressテーマに数字ページ送りを追加する方法を学ぶのにお役に立てば幸いです。また、WordPressでオンラインブログでお金を稼ぐ方法や、コードを書かずにカスタムWordPressテーマを作成する方法についてのガイドもご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and 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.
管理者
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
管理者
FloJDM says
Very Helpful Thx !
WPBeginner Support says
You’re welcome
管理者
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
管理者
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.
管理者
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.
管理者
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