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.
Tom
You really helpped me. Thanks !
Sam
Thanks very helpful
lucky cabarlo
how can i adjust the numbers to show in the custom numeric pagination
spongie
how do you limit the page number to say up to 2 only then show ellipsis?
krishma
can i use this plugin for custom post type
Astra
Of course mate. You just need to put this code into your page-custom.php
Med
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
how can i prevent whole page reload when clicking on next link, only want to refresh that particular section… Please help….
Luis Eduardo Braschi
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
Hi how do you get just the next and previous links only. thanks.
Barry
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
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
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
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
how can i change “Next Page” & “Previous page” text?
TimParkerRD
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
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
thanks a lot
gosukiwi
Awesome, it works like a charm, I did some changes to fix my code though but the code is nice and well organized
Agarwalls
Thanks, Very helpful for me.
SJ
echo paginate_links( $args );
Why this one doesn’t do the job? I’m just curious
SJ
Why this one doesn’t do the job? I’m just curious
Baba agba
I tried it and its not working for me. Can you paste a simple example of your “paginated posts” code here
Nick
Has anyone had any luck getting this working with a custom WP_Query? It works perfect with the standard loop, but does not show up with a custom query. Any help would be great.
Thanks.
Marx
Have you tried the custom query examples noted from the codex?
http://codex.wordpress.org/Function_Reference/paginate_links
Hope that helps.
SJ
Well this one doesn’t work for me
Don’t know why
Mufaddal
Thanks so much, I tried your solution it worked for me.
Timberland
You have 2 options to do that, First is to use query_posts instead of Wp_Query
or the Second is to name your custom query “wp_query” as $wp_query = new WP_Query( $args );
important part in both approaches is to pass the ‘paged’ => $paged argument in your query otherwise won’t work,
//////////////////////////////////////With Wp_Query
$args = array( ‘cat’ => 3, ‘paged’ => $paged );
$wp_query = new WP_Query( $args );
if ( $wp_query->have_posts() ) :
while ( $wp_query->have_posts() ) {
$wp_query->the_post();
get_template_part( ‘content’, get_post_format() ); }
else :
echo “No post to show”;
endif;
wpbeginner_numeric_posts_nav();
wp_reset_postdata(); }
//////////////////////////////////////With Query_Posts
$args = array( ‘cat’ => 3, ‘paged’ => $paged );
query_posts( $args );
if ( have_posts() ) :
while ( have_posts() ) {
the_post();
get_template_part( ‘content’, get_post_format() ); }
else :
echo “No post to show”;
endif;
wpbeginner_numeric_posts_nav();
wp_reset_query(); }
[Hope that helps]
DavidCWebs
Try this native WP function: http://codex.wordpress.org/Function_Reference/paginate_links There’s an example on that codex page showing how to use it with WP_Query.
Hope this helps
Tim
Do this pagination have page number limits or does it automatically detect when more pages are required? Works really nicely
Akash Funde
Thanks for sharing this it helps a lot
Thanks you so Much
adrian
I’ve been using this successful for search results, archives, categories.. but it’s not working for tags. I suspect it could be a permalink issue. The first page works fine, but subsequent pages return 404s. Should this work for tags by default.?
Bubu
search results, archives are ok but in categories same error here. the first page is ok, second page return with 404.
need some help to solve this issue thx
Caroline
Thanks for this, it came in real handy making pagination Foundation framework-ready.
Hiro
I added this to my site and it shows up properly but doesn’t display the proper content on page 2. Tried it both manually and with the plugin. Both times, the pagnation links appear, and when i click to go to page 2, the url changes to page 2 but the content on the page shows only content from page 1 (or index). Please advise
Steve
I am new to Genesis but you say if we are using it that the function is already in there but when I tried adding the php to the hooked area, nothing would display so… I added the above code to my genesis functions.php and added the php call to my hooked area and now the pagination displays but it does not work. When I click the 2nd page, it just reloads the current page.
WPBeginner Support
please contact genesis support
管理者
Tyler
Does this work for wordpress.com sites? I have this blog that is set up via wordpress.com, not the installed version and I need to add pagination for the blog. Is there a way to do that? Thanks for any future help!
WPBeginner Support
No this tutorial is mean for Self hosted WordPress.org sites. As a WordPress.com user you can not directly edit themes.
管理者
Crear Cuenta Outlook
thank you so much
Rajavenkateshwaran
Am facing issues when i use the function within the custom page template. I created a custom page template to loop 4 of the posts, this function works well in Homepage and it doesnshow any sign of navigation links in page template.
Best Regards,
Raja
WPBeginner Support
If you are using a custom WP_Query then please check pagination parameters.
管理者
aklavya
thanx ……………… this code is very helpful
Dejan
Thank you for this code of pagination it is working with WP 3.7.1
Eli Overbey
Any thoughts on how to get archived pagination on Category Blog Page? (in Genesis)
I was able to create a page entitled ‘counseling-blog’, so now we have a Category Blog page at
But here’s the problem… No pagination. The /blog/ has the pagination from Genesis WP. All we have on that new Category Page page is:
”
There is no rel=”next” or rel=”prev”… Any thoughts on how to add next and prev to the Category Blog Page?
I thought the page would add those tags because the template is set as blog.
Big V
Nice post, but I’m having issues with /page/2 not working in my custom theme. Any advice?
Jeremy
WordPress has a core function for doing this.
http://codex.wordpress.org/Function_Reference/paginate_links
Gohar ul Islam
I am searching code (or any kind of help) which uses paginate_links in Wp_query. Do u have any code like this?
Dmitry
Thanks!
Mzer Michael Terungwa
I tried to implement this pagination on the single.php page but it did not show up. Is this only for theme’s index.php, archive.php, category.php, and any other archive page template?
Michael
It appears that Multiple Posts Pagination is quite different from single post pagination and would require different template tags to create them.
WPBeginner Support
Yes this code is only for index and archive pages.
管理者
Felipe Gangrel
Awesome. Thanks a lot!!!
Talha
Great code, thanks bro
Shaghayeggh
Thank you very very much
Marko
Hi,
thanks for great tutorial!
I had to add ul in front of every li in style.css, otherwise this worked perfectly.
(.navigation ul li a,) etc…
elvinson
i have installed wp-pagenavi plugin, but it was not showing in archives , so i have used your coding manually it is working well. Thanks.
Don
what about pagination for a single post that contains numerous pages .. i.e.- this is about A SINGLE POST – that was too long and had to be divided into multiple pages ! … the wp codex for this type of single post pagination is done with the command ( ) … unfortunately none of the plugins out there provides a good solution for this type of pagination ….. or they simple avoid it all together … the wp-pagenavi mentionned it very briefly…. but does not work for single post pagination on 95 % of the wp themes out there….
if there is such a plugin that provides a good alternative for wp_link_pages with good styling and other options for single post pagination …. please share !!!
Editorial Staff
Genesis theme has that option. We are using that on our site http://list25.com/
管理者
Chinmoy Paul
Thanks for sharing this. I will use this in my next project.
Robert Smith
Thanks for this guys! Been looking for a simple solution like this all evening and this was gold!!
Keep up the great work on your site, as it is a regular resource of mine
Thanks,
Rob
Arilton Freitas
To me, the best way to include numeric pagination in WordPress is use the paginate_links() function. Simple and core-based.
http://codex.wordpress.org/Function_Reference/paginate_links
Editorial Staff
Didn’t even know that existed. Thanks for pointing this out.
-Syed
管理者
Mattia
Indeed this is awesome, but… The pagination always appear, also if not needed… Ho do you prevent this?
If mu limit is 10 posts per page, but I only have written 5, the paginations appears and sends me to an empty “page 2″… ;(
Mattia
I checked another of my sites and this error doesn’t appear. In this late site I am building, strangely pagination appears also if not needed! Does someone know which could be the cause? Many thanks!
Jacob
WordPress already has this baked in with a function called paginate_links (http://codex.wordpress.org/Function_Reference/paginate_links).
Upendra Shrestha
Hi, Previously I used wp pagenavi plugin in genesis framework. But it didn’t work with the framework. After adding the code “”, it just worked. I didn’t realize that I had to add this code.
Thanks.
Alex Sancho
and what about the Wordpress function paginate_links? http://codex.wordpress.org/Function_Reference/paginate_links
Connie
for those who want to style differently but are not CSS-savy, there are at least 2 additional plugins available:
WP Visual Pagination, http://wordpress.org/extend/plugins/wp-visualpagination/
or
WP PageNavi Style , http://wordpress.org/extend/plugins/wp-pagenavi-style/
Cheers,
Connie
Editorial Staff
Thanks for letting us know Connie.
管理者
Azim
Isn’t it going to be a heavy SQL query, esp. on blogs with lots and lots of posts? I had to get rid of such pagination on one of my projects (containing over 10K posts), because hoster claimed it consumed too much of a CPU and SQL resources. Basically, what it did is selected ALL posts (over 10K, remember?) and then just divided them into multiple pages with 20 (or whatever you specify in admin) posts per page…
Editorial Staff
WordPress is dividing the posts in those pages to begin with using the WP_Query posts_per_page parameter. All this query is doing is looking at those pages and creating a numeric display. I’m sure there was more going on that your host didn’t bother explaining.
-Syed
管理者