Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressテーマに数値ページ送りを追加する方法

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

WordPressテーマに数値ページ送りを追加したいですか?

WordPressのデフォルト設定では、アーカイブページの下部に「次へ」「前へ」のリンクが追加されている。課題は、それがあまりユーザーフレンドリーではないということだ。そのため、多くの人気ブログでは、訪問者がアーカイブページをナビゲートしやすいように、数字によるページ送りを採用している。

この投稿では、WordPressテーマに数値ページ送りを追加する方法を紹介します。

How to add numeric pagination in your WordPress theme

なぜWordPressテーマに数値ページ送りを追加するのか?

ほとんどのテーマには、投稿のリストを表示するアーカイブページがあります。WordPressブログの投稿を公開するにつれて、アーカイブページは複数のページにまたがるようになります。

ページ送りリンクは、訪問者がアーカイブページ間を移動するのに役立ち、通常WordPressサイトの下部に表示されます。

WordPressテーマの中には、ページ送りに「過去の投稿」と「新しい投稿」のリンクを使うものがある。しかし、これでは訪問者は1ページ分しか前後に移動できません。

また、アーカイブ内の訪問者の現在位置も表示されません。これは、訪問者があなたのブログのアーカイブをナビゲーションすることを難しくします。

そこで登場するのが数字ページ送りだ。

数字ページ送りでは、「古い」「新しい」リンクを表示する代わりに、訪問者がアーカイブの特定のページにジャンプできるよう、一連の数字を表示します。

数字によるページ送りでは、ハイライトや異なる色を使って現在のページ番号を表示することもできるため、訪問者は自分がアーカイブのどこにいるのかを常に正確に把握することができます。

WPBeginnerでは、数字によるページ送りを採用し、現在のページ番号をオレンジ色で強調しています。また、訪問者の現在のページを囲む4つのページへの直接リンクも提供しています。

また、アーカイブの最後のページへのリンクも用意しており、訪問者は次の画像にあるように、クイックポストを簡単に見ることができる。

Numeric pagination links on the WPBeginner website

私たちの経験では、このような数字によるページ送りは、初期設定の「過去の投稿」や「新しい投稿」リンクに比べ、サイトをナビゲートしやすくします。

WordPressテーマに「古いページ送り」と「新しいページ送り」がある場合は、数値ページ送りに置き換えることをお勧めします。

このガイドでは、WordPressテーマに数値ページ送りを追加する2つの異なる方法を説明します。特定の方法にすぐに飛びつきたい場合は、以下のリンクをご利用ください。

方法1.WP-PageNaviを使ってWordPressに数値ページ送りを追加する方法

WordPressで数値ページ送りを追加する最も簡単な方法は、WP-PageNaviプラグインを使うことです。

このプラグインを使用するには、テーマのコードを変更する必要がありますが、WP-PageNaviはサイトのページ送りを完全にコントロールできるため、完全なコードによる方法よりもはるかに簡単です。

まず最初に、WP-PageNaviプラグインをインストールして有効化します。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

プラグインを有効化した後、設定 ” PageNaviでプラグインの設定を行います。

How to add numeric pagination in WordPress

ここでは、初期設定のページ送りテキストを独自の文言に置き換えることができます。例えば、あなたのサイトが「最初のページ」と「最後のページ」のリンクに使用するテキストを変更することができます。

数字ページ送りリンクのカスタマイズも可能です。

Number Of Pages To Show’(表示するページ数)セクションでは、プラグインがサイトのページ送りセクションに表示するページ数を選択できます。

The WP-PageNavi WordPress plugin

初期設定では5ページに設定されており、WP-PageNaviは5ページへの直接リンクを表示します。

下のスクリーンショットでわかるように、もしあなたが4ページ目にいる場合、2、3、4、5、6ページ目へのリンクが表示されます。

An example of numeric pagination in WordPress

より多くのページを表示したい場合もあれば、より少ないページを表示したい場合もあるでしょう。この変更を行うには、「表示するページ数」フィールドに新しい数を入力するだけです。

初期設定では、プラグインはいくつかの大きな数字を表示します。これにより、訪問者はワンクリックで複数のページを進むことができます。

初期設定では、プラグインは毎回10ずつ増える3つの大きな数字を表示する。例えば、10、20、30。

5や20など、別の間隔を使いたいですか?その場合は、「ページ番号を倍数で大きく表示」フィールドに新しい間隔を入力するだけです。

Customizing the WordPress pagination settings

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を使用する」セクションを見つけ、その横にある「いいえ」のラジオボタンをクリックしてください。

変更を保存するために「変更を保存」ボタンをクリックすることを忘れないでください。

Changing your WordPress pagination styling

次に、プラグイン ” プラグインファイルエディターに進みます。

そして、「編集するプラグインを選択」のドロップダウンを開き、「WP-Page Navi」を選択します。その後、「選択」をクリックすれば準備完了です。

The WordPress code editor

右側のメニューで、pagenavi-css.cssファイルをクリックします。

次に、このファイルのコードをすべてコピーする。

The WordPress plugin editor

次に、外観 ” テーマファイルエディターを開きます。

右側のメニューで、テーマのstyle.cssファイルをクリックする。

The WordPress theme editor

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;
}

次の画像では、この数字ページ送りがあなたのサイトでどのように見えるかを見ることができる。

Custom numeric pagination in a WordPress theme

あなたのWordPressサイトに何が一番似合うか、いろいろなスタイルを試してみる価値がある。

ページ送りが完成したら、「ファイルを更新」ボタンをクリックして変更を保存します。

方法2.WordPressテーマに手動で数値ページ送りを追加する方法

もう一つのオプションは、WordPressテーマにコードを使用して手動で数値ページ送りを追加することです。

多くのWordPressテーマには、「Older」と「Newer」リンク、または初期設定の数値ページ送りがビルトインされています。例えば、人気のあるAstraテーマは、次の画像で見ることができるように、アーカイブページに独自の数値ページ送りを自動的に追加します。

Pagination in the Astra WordPress theme

この方法は、テーマにビルトインされているページ送りをカスタマイズするために使うことができます。例えば、あなたのサイトに適したスタイルに変更することができます。

手動で数値ページ送りを追加するには、テーマの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;
}

すべて完了したら、「ファイルを更新」ボタンをクリックして変更を保存します。

これで、アーカイブページにアクセスすると、あなたのサイトに数字によるページ送りが表示される。

Manually adding numeric pagination in WordPress

この投稿が、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.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

117件のコメント返信を残す

  1. 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!

  2. 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 ”;

    }

    ?>


  3. Preeti Bhandari says

    how can i prevent whole page reload when clicking on next link, only want to refresh that particular section… Please help….

  4. 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.”.

  5. 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…

    • 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 »”.

    • 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”);

  6. 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?)

  7. gosukiwi says

    Awesome, it works like a charm, I did some changes to fix my code though but the code is nice and well organized :)

  8. Baba agba says

    I tried it and its not working for me. Can you paste a simple example of your “paginated posts” code here

  9. Nick says

    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.

    • Timberland says

      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]

  10. Tim says

    Do this pagination have page number limits or does it automatically detect when more pages are required? Works really nicely :)

  11. adrian says

    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 says

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

  12. Hiro says

    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

  13. Steve says

    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.

  14. Tyler says

    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!

  15. Rajavenkateshwaran says

    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

  16. Eli Overbey says

    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.

    • Gohar ul Islam says

      I am searching code (or any kind of help) which uses paginate_links in Wp_query. Do u have any code like this?

  17. Mzer Michael Terungwa says

    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?

  18. Marko says

    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…

  19. elvinson says

    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.

  20. Don says

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

  21. Robert Smith says

    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

    • Mattia says

      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 says

        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!

  22. Upendra Shrestha says

    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.

  23. Azim says

    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 says

      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

      管理者

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。