WordPressテーマに数値ページネーションを追加する方法

WordPressテーマに数値ページネーションを追加したいですか?

デフォルトでは、WordPress テーマはアーカイブページの最後に次/前のリンクを追加します。課題は、それらが非常にユーザーフレンドリーではないことです。そのため、多くの人気ブログでは、訪問者がアーカイブページを簡単にナビゲートできるように数値ページネーションを使用しています。

この記事では、WordPressテーマに数値ページネーションを追加する方法を説明します。

WordPressテーマに数値ページネーションを追加する方法

WordPressテーマに数値ページネーションを追加する理由

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

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

一部のWordPressテーマでは、ページネーションに「古い投稿」と「新しい投稿」のリンクが使用されています。ただし、これでは訪問者は1ページずつしか前後に移動できません。

また、訪問者の現在の場所をアーカイブに表示しません。これにより、訪問者がブログのアーカイブをナビゲートするのが難しくなる可能性があります。

そこで数値ページネーションが登場します。

「古い」と「新しい」リンクを表示する代わりに、数値ページネーションは、訪問者がアーカイブ内の特定のページにジャンプできる一連の番号を表示します。

数値ページネーションは、現在のページ番号を示すためにハイライトや異なる色を使用することもあり、訪問者はアーカイブ内のどこにいるかを常に正確に把握できます。

WPBeginnerでは、数値ページネーションを使用し、現在のページ番号をオレンジ色で強調表示しています。また、訪問者の現在のページを囲む4ページへの直接リンクも提供しています。

アーカイブには最後のページへのリンクさえ含まれているため、訪問者は最も古い投稿をすばやく簡単に見ることができます。次の画像で確認できます。

WPBeginnerウェブサイトの数値ページネーションリンク

私たちの経験では、この種の数値ページネーションは、デフォルトの「古い投稿」と「新しい投稿」のリンクと比較して、サイトのナビゲーションを容易にします。

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

このガイドでは、WordPressテーマに数値ページネーションを追加する2つの異なる方法を説明します。特定のメソッドに直接ジャンプしたい場合は、以下のリンクを使用できます。

方法1. WP-PageNavi を使用して WordPress に数値ページネーションを追加する方法

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

このプラグインを使用するには、テーマのコードにいくつかの変更を加える必要がありますが、WP-PageNaviはサイトのページネーションを完全に制御できるため、完全なコードメソッドよりもはるかに簡単です。

First thing you need to do is install and activate the WP-PageNavi plugin. For more details, please see our step by step guide on how to install a WordPress plugin.

プラグインを有効化した後、設定 » PageNaviに移動してプラグインの設定を行います。

WordPressに数値ページネーションを追加する方法

ここでは、デフォルトのページネーションテキストを独自の言葉に置き換えることができます。たとえば、ウェブサイトで使用されている「最初のページ」や「最後のページ」リンクのテキストを変更できます。

数値ページネーションのリンクをカスタマイズすることもできます。

「表示するページ数」セクションでは、ウェブサイトのページネーションセクションにプラグインが表示するページ数を選択できます。

WP-PageNavi WordPressプラグイン

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

下のスクリーンショットで見られるように、ページ4にいる場合、ページ2、3、4、5、6へのリンクが表示されます。

WordPressでの数値ページネーションの例

表示するページ数を増減させたい場合は、「表示するページ数」フィールドに新しい番号を入力するだけです。

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

デフォルトでは、プラグインは10ずつ増加する3つの大きな数字を表示します。たとえば、10、20、30です。

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

WordPressのページネーション設定のカスタマイズ

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

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

WordPressのページネーションのスタイルを変更する

次に、プラグイン » プラグインファイルエディターに移動します。

次に、「編集するプラグインを選択」ドロップダウンを開き、「WP-Page Navi」を選択します。その後、「選択」をクリックする準備が整いました。

WordPressコードエディター

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

次に、このファイル内のすべてのコードをコピーしてください。

WordPressプラグインエディター

次に、外観 » テーマファイルエディターに移動します。

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

WordPressテーマエディター

これで、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テーマでのカスタム数値ページネーション

さまざまなスタイルを試して、WordPressウェブサイトで最も見栄えの良いものを見つける価値はあります。

数値ページネーションの外観に満足したら、ファイルを更新ボタンをクリックして変更を保存してください。

方法2. WordPressテーマに数値ページネーションを手動で追加する方法

WordPressテーマにコードを使用して数値ページネーションを手動で追加するという別の方法もあります。

多くのWordPressテーマには、組み込みの「古い」と「新しい」リンク、またはデフォルトの数値ページネーションが付属しています。たとえば、人気のAstraテーマは、次の画像で見られるように、アーカイブページに独自の数値ページネーションを自動的に追加します。

Astra WordPressテーマのページネーション

この方法を使用して、テーマに組み込まれているページネーションをカスタマイズできます。たとえば、サイトに合わせてスタイルを変更することもできます。

数値ページネーションを手動で追加するには、テーマの 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ブログテーマの1つであり、アーカイブページにすでに「最初」と「最後」のページネーションリンクを追加しています。

これらの組み込みリンクを数値ページネーションに置き換えるには、テーマの 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でブログを書いてオンラインでお金を稼ぐ方法や、コードなしでカスタムWordPressテーマを作成する方法に関するガイドも参照してください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterFacebookでもフォローできます。

開示:当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、当社が手数料を得る可能性があることを意味します。WPBeginnerがどのように資金提供されているか、それがなぜ重要か、そしてどのように私たちをサポートできるかについては、こちらをご覧ください。当社の編集プロセスはこちらです。

究極のWordPressツールキット

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

読者とのインタラクション

121 CommentsLeave a Reply

  1. Hello,

    これは非常に役立ちました。新しいサイトに配置しました。問題は、カテゴリの最初のページでは完璧に機能し、「次へ」リンクをクリックした後、URLは/page/2/に変わりますが、ハイライトされたページ番号は常に「1」であり、コンテンツは常に最初の10記事(常に最初のページ)です。

    クエリに何か不足していると思います。

    <a href="”>

    ‘aligncenter’));

    } else {

    echo "";

    }

    ?>


  2. 次のリンクをクリックしたときにページ全体の再読み込みを防ぎ、特定のセクションのみを更新するにはどうすればよいですか…助けてください…

  3. 「目標は、アーカイブページの最下部にあるデフォルトの「古い」および「新しい」ページネーションリンクを、「簡単にナビゲートできるページ番号」に置き換えること」であり、「あなたの」関数はこれを実行します。

  4. Custom Post typeで wpbeginner_numeric_posts_nav(); を使用するにはどうすればよいですか?

    global $wp_query を置き換えました

    $args = array(

    ‘post_type’ => ‘my-cpt’,

    ‘meta_key’=>’cpt_detail’,

    ‘orderby’=>’meta_value’,

    ‘order’ => ‘ASC’,

    ‘paged’ => $paged

    );

    $cpt_query = new WP_Query($args);

    $wp_query参照を$cpt_queryに置き換えましたが、うまくいきません

    • こんにちは、この問題を解決できましたか?私もこれを機能させようとして苦労しています。もし機能したのであれば、大変助かります…

  5. 「wpbeginner_numeric_posts_nav」メソッドを使用して、ナビゲーションの括弧を変更するにはどうすればよいですか?「»」はあまり好きではありません。

    ありがとうございます!

    • こんにちは、Ashleyさん。

      get_previous_posts_link() および get_next_posts_link() の括弧内に値を設定できます。たとえば、get_next_posts_link(‘Next Post’) は、デフォルトの「Next Page »」の代わりに「Next Post」を表示します。

    • wpbeginner_numeric_posts_nav 関数を使用している場合、get_next_posts_links() および get_previous_posts_link() にカスタムテキストを渡すことができます。例:

      get_previous_posts_link("戻る");

  6. Genesis Frameworkはオープンソースフレームワークではないので、このコードを商用利用または非商用利用で利用することは許可されていますか?(そして、配布することは許可されていますか?)

  7. 試しましたが、うまくいきませんでした。「ページ分割された投稿」の簡単なコード例をここに貼り付けていただけますか?

  8. カスタムWP_Queryでこれを機能させた人はいますか?標準ループでは完璧に機能しますが、カスタムクエリでは表示されません。何か助けがあれば幸いです。

    ありがとう。

    • 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,

      //////////////////////////////////////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 “投稿がありません”;
      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(); }

      [お役に立てば幸いです]

  9. 検索結果、アーカイブ、カテゴリにはこの方法が成功して使っていましたが、タグでは機能しません。パーマリンクの問題ではないかと疑っています。最初のページは正常に表示されますが、それ以降のページは404エラーを返します。これはデフォルトでタグでも機能するはずですか?

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

  10. これをサイトに追加したところ、正しく表示されますが、ページ2のコンテンツが正しく表示されません。手動とプラグインの両方で試しました。どちらの場合も、ページネーションリンクは表示され、ページ2に移動するためにクリックするとURLはページ2に変わりますが、ページ上のコンテンツはページ1(またはインデックス)のコンテンツのみを表示します。アドバイスをお願いします。

  11. Genesisは初めてですが、使用している場合は機能がすでに組み込まれているとのことですが、フックされた領域にPHPを追加しようとしたところ、何も表示されませんでした。そのため、上記のコードをgenesis functions.phpに追加し、PHP呼び出しをフックされた領域に追加したところ、ページネーションが表示されましたが、機能しませんでした。2ページ目をクリックすると、現在のページがリロードされるだけです。

  12. これはwordpress.comサイトでも機能しますか?インストール版ではなく、wordpress.comで設定したブログがあり、ブログにページネーションを追加する必要があります。それを行う方法はありますか?今後のヘルプに感謝します!

  13. カスタムページテンプレート内でこの関数を使用すると問題が発生しています。投稿を4つループさせるカスタムページテンプレートを作成しましたが、この関数はホームページではうまく機能し、ページテンプレートにはナビゲーションリンクが表示されません。

    敬具、
    Raja

  14. カテゴリブログページ(Genesisの場合)のアーカイブページネーションを取得する方法について、何か考えはありますか?

    「counseling-blog」というタイトルのページを作成できたので、これでカテゴリブログページができました。

    しかし、問題はここにあります…ページネーションがありません。/blog/にはGenesis WPからのページネーションがあります。その新しいカテゴリページには、次のものしかありません。

    rel="next" または rel="prev" がありません…カテゴリブログページに次へ/前へを追加する方法について何か考えはありますか?

    テンプレートがブログとして設定されているため、ページにこれらのタグが追加されると思いました。

  15. 投稿は良いのですが、カスタムテーマで /page/2 が機能しない問題が発生しています。何かアドバイスはありますか?

    • Wp_queryでpaginate_linksを使用するコード(またはあらゆる種類のヘルプ)を探しています。そのようなコードはありますか?

  16. single.phpページにこのページネーションを実装しようとしましたが、表示されませんでした。これはテーマのindex.php、archive.php、category.php、およびその他のアーカイブページテンプレート専用ですか?

  17. こんにちは、

    素晴らしいチュートリアルをありがとうございます!

    style.cssで、すべてのliの前にulを追加する必要がありました。そうでなければ、これは完璧に機能しました。
    (.navigation ul li a,) など…

  18. wp-pagenaviプラグインをインストールしましたが、アーカイブに表示されなかったので、あなたのコードを直接使用したところ、うまく機能しました。ありがとうございます。

  19. 多数のページを含む単一の投稿のページネーションについてはどうですか?つまり、これは単一の投稿に関するもので、長すぎて複数のページに分割する必要がありました!…このタイプの単一投稿のページネーションに関するWP Codexは、()コマンドで処理されます…残念ながら、現在利用可能なプラグインのいずれも、このタイプのページネーションの良い解決策を提供していません…または、単にすべてを回避しています…wp-pagenaviは非常に簡単に言及しましたが、95%のWPテーマで単一投稿のページネーションでは機能しません…
    wp_link_pagesの優れた代替手段を提供するプラグインで、単一投稿のページネーションのための優れたスタイリングやその他のオプションがある場合…共有してください!

  20. これ、ありがとう!こんな簡単な解決策をずっと探していました。本当に助かりました!!

    Keep up the great work on your site, as it is a regular resource of mine :-)

    ありがとうございます、
    Rob

    • 確かにこれは素晴らしいですが…必要ない場合でも、ページネーションは常に表示されます…これを防ぐにはどうすればよいですか?

      1ページあたりの投稿数が10件に制限されているのに、5件しか書いていない場合、ページネーションが表示されて空の「2ページ目」に飛ばされます… ;(

      • 他のサイトを確認したところ、このエラーは表示されませんでした。現在構築中のこの最近のサイトでは、必要ない場合でも奇妙なことにページネーションが表示されます!原因を知っている人はいますか?よろしくお願いします!

  21. こんにちは。以前はGenesisフレームワークでwp pagenaviプラグインを使用していました。しかし、フレームワークでは動作しませんでした。コード「」を追加した後、正常に動作しました。このコードを追加する必要があることに気づきませんでした。
    ありがとうございます。

  22. 特に投稿がたくさんあるブログでは、重いSQLクエリになるのではないでしょうか?ホスティングプロバイダーがCPUとSQLリソースを過剰に消費していると主張したため、10,000件以上の投稿があるプロジェクトでそのようなページネーションを削除する必要がありました。基本的に、それは(覚えておいてください、10,000件以上の)すべての投稿を選択し、それらを20件(または管理画面で指定した数)の投稿ごとに複数のページに分割していました…

    • WordPressは、まずWP_Queryのposts_per_pageパラメータを使用して、それらのページに投稿を分割しています。このクエリが行っているのは、それらのページを見て数値表示を作成することだけです。ホストが説明するのを面倒くさがらなかった、もっと多くのことが起こっていたに違いありません。

      -Syed

      管理者

コメントを残す

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