【Simplicity】下部のページ送りの表示をWp Pagenaviプラグインと置き換える方法 | Knowledge Base

【Simplicity】下部のページ送りの表示をWp Pagenaviプラグインと置き換える方法

2017/10/29 Simplicity

Simplicityというテーマは実によくできていますね。本当に至れり尽くせりで有効化するだけで基本的なことは全て備わっているというのが使用させていただいている私の印象です。

ただ、どんなに良いテーマでも少し位はカスタマイズして独自のものにしたい！と思うのは当然のこと。

今回は一覧の一番下に表示されるページナビ（ページ送り）を他のプラグインを使った表示に切り替える方法です。

ページ送りを表示するプラグインで有名なものに「Wp Pagenavi」があります。たくさんページがある場合には１．２．３．４．５．１０．２０．３０・・・みたいに数字を省略して表示できるのが魅力のプラグインです。

ただ、これを導入要領通りに設定してもSimplicityでは表示が置き変わらず、また、表示できてもテーマで設定されている情報が優先されて「Wp Pagenavi」のオプションが適用されません。これを解消してきちんと表示する方法を紹介します。

Simplicityでページ送りの表示をWp Pagenaviプラグインと置き換える方法

置き換え作業の手順は

  1. 「Wp Pagenavi」プラグインをインストールする
  2. Simplicityの標準ページャーを非表示にする
  3. 「Wp Pagenavi」が表示されるようにする

になります。順を追って説明しますが、１はプラグインの追加で検索すれば出てくるのでインストールして有効化すれば終了です。

２と３は同じ部分をカスタマイズしますから同時に行うといいです。

  1. ダッシュボードから「外観」→「テーマの編集」をクリックします
  2. 子テーマを使っている場合はテーマを「Simplicity2」へ変更します
  3. 一覧から「list.php」をクリックします
  4. 以下のコードを削除します

    5. Simplicity標準のページャーを表示するコードです。テストではこれを削除しないと２重に表示されるばかりではなく、「Wp Pagenavi」のオプション設定もスキップされてしまいます。

    <?php
////////////////////////////
//エントリーのページャー
////////////////////////////
if ( is_list_pager_type_responsive() ) {
  //レスポンシブタイプのページャー関数の呼び出し
  responsive_pagination();
} else {
  //旧タイプのページャー
  get_template_part('pager-paginate-links');
}
?>
  5. 以下のコードを追加します

    6. 「Wp Pagenavi」を設置するためのPHPコードを先ほど削除した場所へ挿入します。言語の違いによる問題を解決するために

    <?php wp_pagenavi( array( 'options' => PageNavi_Core::$options->get_defaults() ) ); ?>
    というコードを挿入します（公式ページ上で紹介されています）

    もしもSimplicityの標準ページャーと同じように中央表示したい場合は

    <div align="center"><?php wp_pagenavi( array( 'options' => PageNavi_Core::$options->get_defaults() ) ); ?></div>
    を挿入します

  6. 変更を保存します

これで設定は完了です。あとは「Wp Pagenavi」の設定で調整してくださいね。

気を付けること

きっちりテストしてませんが、Simplicityに搭載されているページャーはレスポンシブ対応なのですが、ひょっとすると「Wp Pagenavi」は対応しておらず、ページ幅に収まらないことがあるかもしれません。

ページャーそのものを変更するのではなく、標準で表示されるのは４ページ分と前後への矢印、これを少しだけカスタマイズしたい場合にはfunctions.phpの以下の記述を修正します。

かなり下のほうにありますから根気よく探してください

//レスポンシブなページネーションを作成する
if ( !function_exists( 'responsive_pagination' ) ):
function responsive_pagination($pages = '', $range = 4){
  $showitems = ($range * 2)+1;
  global $paged;
  if(empty($paged)) $paged = 1;
  //ページ情報の取得
  if($pages == '') {
    global $wp_query;
    $pages = $wp_query->max_num_pages;
    if(!$pages){
      $pages = 1;
    }
  }
  if(1 != $pages) {
    echo '<ul class="pagination" role="menubar" aria-label="Pagination">';
    //先頭へ
    echo '<li class="first"><a href="'.get_pagenum_link(1).'"><span>First</span></a></li>';
    //1つ戻る
    echo '<li class="previous"><a href="'.get_pagenum_link($paged – 1).'"><span>Previous</span></a></li>';
    //番号つきページ送りボタン
    for ($i=1; $i <= $pages; $i++)     {
      if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) ))       {
        echo ($paged == $i)? '<li class="current"><a>'.$i.'</a></li>':'<li><a href="'.get_pagenum_link($i).'" class="inactive" >'.$i.'</a></li>';
      }
    }
    //1つ進む
    if ( $pages == $paged ) {
      $next_page_num = $paged;
    } else {
      $next_page_num = $paged + 1;
    }
    echo '<li class="next"><a href="'.get_pagenum_link($next_page_num).'"><span>Next</span></a></li>';
    //最後尾へ
    echo '<li class="last"><a href="'.get_pagenum_link($pages).'"><span>Last</span></a></li>';
    echo '</ul>';
  }
}
endif;

長いコードですが、コードの上の方にある「4」という数字が表示するページの数になっています。これを任意の数字に変更することで表示数が変更できます。

ついでに「次へ」「前へ」「先頭へ」「末尾へ」などの表示を行う記号も変更できますよ。

※functions.phpの編集に失敗すると一切の作業ができなくなりますから慎重に行ってくださいね。

トップへ戻る