メニュー

WEBMEMOする。とあるクリエイターの個人的な備忘録。

ほとんどのサイトで実装することになるであろうページャー機能。WordPressでページャーといえば WP-PageNavi ですが、毎回毎回調べ直しているとすごく面倒ですよね。

また、思い通りに動いてくれないこともよくあり、その度にグーグル先生に質問する羽目に。

今回は、そんな無駄な時間をなくすために必要な情報をまとめていこうと思います。

目次

    基本的な設定

    プラグイン側で設定できる基本設定がいくつかありますね。

    「設定」-> 「PageNavi」を選択すると、設定画面に移動します。

    何を表示するか、何ページ分表示するか、デフォルトのcssを使うか?といったことが設定できるのですが、この辺の基本的な設定についてはどこにでも書いてあるので、割愛します。

    とりあえず、この画面があるよーとだけ覚えておいて、あとはサイトごとに設定していきましょう。

    安定して動作させるために覚えておくこと

    WP-PageNaviを使うなら、覚えておかなければならない大事なことがあります。

    表示設定の「1ページに表示する最大投稿数」を 「1」 に設定する

    まずはこれです。管理画面の「設定」->「表示設定」を選択し、「1ページに表示する最大投稿数」を1にしておきましょう。

    これはなぜかというと、コード側のposts_per_pageで指定している数がここの「1ページに表示する最大投稿数」で設定してある数より低い場合にページ数が合わなくなって、うまく動作しない場合があるからです。

    表示数は全てposts_per_pageで指定するように統一する

    先ほど、「1ページに表示する最大投稿数」を「1」に設定しましたが、ここの設定はposts_per_pageで数を指定しない場合に有効になってきます。

    なのでposts_per_pageを指定するところとしていないところをごっちゃにしていると、大変な目に合うわけです。

    *もちろん、posts_per_pageを指定しない方向で統一するのもOKです。その場合、最初の表示最大数を1にするという設定は必要ありません。表示したい数を指定しておきましょう。

    制作現場でこの辺が適当になっているのであれば、統一するように提案してみましょう。

     

    使い方

    基本的な使い方はクエリに必要な情報を渡して、wp_pagenavi()を呼び出すだけです。

    基本的に覚えておくことは、

    • posts_per_pageで表示数を指定すること
    • pagedというキーに現在表示中のページ数を指定してあげること

    これくらいでしょうか。

    注意すべきことは、archive.phpなどのテンプレートファイルにおける通常のメインループでの場合と、固定ページなどの好きな場所でWP_Queryを使用したサブループの場合では少し違いがあるという点です。

    メインループの場合

    archive.phpなどでのコード基本形

    <?php
      $paged = get_query_var('paged') ? get_query_var('paged') : 1;
      query_posts( $query_string.'&posts_per_page=20&paged='.$paged);
    
      if(have_posts()):
        while(have_posts()): the_post();
    
        //アーカイブページの表示内容
    
        endwhile;
        //wp_pagenaviの記述
        if(function_exists('wp_pagenavi')):
         wp_pagenavi();
        endif;
      endif;
      wp_reset_query();

    メインループの場合、

    1. query_posts()で必要な情報を指定する
    2. ページャーの呼び出しはシンプルにwp_pagenavi()
    3. クエリリセットにはwp_reset_query()

    という手順になります。

    サブループの場合

    WP_Query使用時のコード基本形

    <?php
      $paged = get_query_var('paged')? get_query_var('paged') : 1;
      $args = array(
        'post_type' => 'post',
        'posts_per_page' => 20,
        'paged' => $paged,
      );
      $the_query = new WP_Query($args);
      if ($the_query->have_posts()) :
        while ($the_query->have_posts()) : $the_query->the_post();
        //ループ内容
        endwhile;
      endif;
      //wp_pagenaviの記述
      if(function_exists('wp_pagenavi')):
        wp_pagenavi(array('query'=>$the_query));
      endif;
       wp_reset_postdata();

    こちらの場合は、

    1. WP_Queryに必要な情報を指定する
    2. ページャーの呼び出しはwp_pagenavi()に引数の指定が必要
    3. クエリリセットにはwp_reset_postdata()

    という感じですね。

    ページャーの呼び出し時に、’query’というキーを持った配列を渡さなければなりません。

    指定する値は、WP_Queryを代入している変数です。上の例だと、$the_query = new WP_Query($args);$the_queryですね。

    出力されるHTMLの構造を知っておく

    さて、WP-PageNaviを実際に使用すると、デフォルトでは以下のような表示なるはずです。(「pagenavi-css.css を使用する」が「はい」の場合)

    この時のソースは以下のようになっています。

    WP-PagiNaviの出力内容

    <div class="wp-pagenavi">
      <span class="pages">2 / 4</span>
      <a class="previouspostslink" rel="prev" href="http://bhf-blancmarche.com/blogs/">«</a>
      <a class="page smaller" title="Page 1" href="http://bhf-blancmarche.com/blogs/">1</a>
      <span class="current">2</span>
      <a class="page larger" title="Page 3" href="http://bhf-blancmarche.com/blogs/page/3/">3</a>
      <a class="page larger" title="Page 4" href="http://bhf-blancmarche.com/blogs/page/4/">4</a>
      <a class="nextpostslink" rel="next" href="http://bhf-blancmarche.com/blogs/page/3/">»</a>
    </div>

     

    デフォルトのcssを作成しておく

    どのようなクラスが使われているかは先ほど確認したので、コピペだけでよく使うデザインにできるように、デフォルトのcssを用意しておきましょう。

    ページャー用cssの例(sass)

    #content{
      .wp-pagenavi{
        text-align: center;
        .pages{
          display: none;
        }
      span, a{
        /*数字部分の共通CSS 大きさなど*/
        display: inline-block;
        margin: 4px;
        padding: 10px 12px;
        color: #fff;
        line-height: 1;
        font-size: 14px;
        text-decoration: none;
        background: $color_main;
        border: 1px solid $color_main;
    
        &.current, &:hover{
          /*現在のページ*/
          color: $color_main;
          background: #fff;
        }
      }
      /*その他、必要があれば以下のクラスにcssを指定する*/
      .previouspostslink{}
      .nextpostslink{}
      .first{}
      .last{}
      .smaller{}
      .larger{}
      }
    }
    

    サイトのメインカラーを$color_mainという変数に入れておくと、上記をコピペするだけでそのサイトにあった色のページャーがすぐに出来上がります。

    #content{}で囲ってあるのは、「pagenavi-css.css を使用する」を「はい」に設定した時にそのcssの方が優先度が高くなるためです。

    以下のような見た目になると思います。(多少違うかもしれません)

    まとめ

    いかがだったでしょうか。以上が僕がPageNaviを使用する時に使いまわしている内容です。

    • 基本設定は管理画面から。
    • 不具合防止のために、最大表示件数を1にし、posts_per_pageで表示件数を指定する。
    • cssはコピペ。

    こんな感じで実装が一瞬で終わります!

    - Thank you for reading this to the end. -

    コメントする

    CAPTCHA


    TOPへ Top