【有用】WordPressで「次の記事・前の記事」や「ページめくり」ってどうやるの？

ブログでよく見る、ページをめくる機能

ブログサイトには、よくページの下に「次の記事・前の記事」というリンクがあります。新しい記事が読みたい場合は次の記事、以前の記事が読みたい場合は前の記事をクリックすることで、ページを移動できる機能です。

このページをめくる機能は、「ページめくり」または「ページネーション」と呼ばれ、訪問者がサイトを快適に閲覧するための機能です。

ひとつのページで文量があまりにも多いと読みづらい場合もあるため、ユーザビリティの観点からページを分けて、なおかつページ同士の移動をスムーズにさせるための手段として有効です。

ページ同士が行き来しやすければ、ユーザビリティが上がり、サイトの滞在時間や回遊率が上がることが期待できます。

テーマの機能で、自動的にこの「ページめくり」「ページネーション」が出てくる場合もあると思いますが、ここでは独自につけたい場合などのために説明します。

改めてこの機能を付け加えるためには、ソースコードの編集やプラグインの使用が必要になります。

プラグインを使う方法

Cresta Posts Box

Cresta Posts Boxを使うと、次の記事・前の記事がポップアップのような感じで現れるようになるので、デザインに見栄えが出ます。無料版とプロ版がありますが、無料版で十分使えます。ちなみにプロ版はシングルサイトで年間12.99ユーロ出せば使えます。

プラグインを有効化するとボックスの文字サイズや幅を好きに決めたり、影を足したりすることができます。またモバイルやタブレットで表示するかどうかなど、無料でここまでできるの？というくらいにカスタマイズに柔軟性があります。

WordPressの管理画面（ダッシュボード）から「プラグイン」→「新規追加」→「Cresta Posts Box」を検索してインストールできます。

WP-PageNavi

WP-PageNaviは、高度なページ送りナビゲーション用のインターフェースを追加できるプラグインです。

有効化後、WP-PageNaviの設定から編集を行います。テキスト量の多い記事はページ数が表示されるようになります。またテキスト量がそれほど多くない記事でも←→で次の記事・前の記事へ移動できるようにカスタマイズされます。

WordPressの管理画面（ダッシュボード）から「プラグイン」→「新規追加」→「WP-PageNavi」を検索してインストールできます。

テンプレートを編集する方法(1)

プラグインを使わなくても、テンプレートファイルであるsingle.phpに、下記のようなコードを表示させたいところに貼り付けるだけで、「次の記事・前の記事」が表示されます。

「次の記事・前の記事」という言葉は、「Next」「Prev」など、他の言葉に置き換えることも可能です。コード上の文章を書き換えればいいだけなので、お好きなキーワード言葉を入れてみてください。

<div class="navigation clearfix">
    <p class="navileft">
        <?php previous_post_link('« %link', '前の記事', TRUE, ''); ?>
    </p>
    <p class="navitop">
        │<a href="<?php echo home_url(); ?>">HOME</a>│
    </p>
    <p class="naviright">
        <?php next_post_link('%link »', '次の記事', TRUE, ''); ?>
    </p>
</div>

上記のコードでは最も基本的なページめくりの表示がされるだけなので、カスタマイズしようと思ったらもっと複雑なコード入力が必要になります。また、見栄えを整えるのにもCSSの記述が必要です。

インターネット上には、それらのコードは様々なサイトで紹介されていますが、自分なりにカスタマイズしようと思ったら、最低限HTMLやCSSの知識は必要です。

初級者の方で、周りにソースコードの修整を頼める人がいない場合、自力で簡単に表示できる方法といえば、プラグインの導入がよいかもしれません。

テンプレートを編集する方法(2)

プラグインを使わず、テンプレートファイルを編集するもう一つの方法を紹介します。今度はfunctions.phpと、表示する側のsingle.phpやindex.phpあるいはarchive.phpなどを編集します。

【functions.phpへの記述】

function pagination($pages = '', $range = 3) {
 $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 "".$paged."/".$pages."";
  if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "...";
  if($paged > 1 && $showitems < $pages) echo "

前

";
  for ($i=1;
   $i <= $pages;
   $i++)
  {
   if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
   {
    echo ($paged == $i)? "".$i."":"

".$i."

";
   }
  }
  if ($paged < $pages && $showitems < $pages) echo "

次

";
  if ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) echo "...";
  echo "\n";
 }
}

【single.phpやindex.phpあるいはarchive.phpへの記述】

<?php if (function_exists("pagination")):?>
<?php pagination($additional_loop->max_num_pages);?>
<?php endif;?>

これで、基本的な「ページめくり」は表示されます。「テンプレートを編集する方法(1)」よりも「テンプレートを編集する方法(2)」の方が、より細部のカスタマイズができる形です。

CSSへの記述はここでは割愛しますが、CSSのカスタマイズによって「次」「前」のリンクをボタンにしたり、テキストにしたり、並びや色を変えたりなど、様々な見せ方が可能になります。

このように、カスタマイズの深度が深まるほど、操作はより複雑に専門的になってきます。ソースの編集は、確かに初級者の人にとっては最初はタッチしづらい領域かも知れませんが、WordPressのカスタマイズを追求する限り、いつかは通る道かもしれません。

あなたがサイトのコンテンツ運営に重点をおいているのならば、ご自身がプログラマーになる必要はありません。しかし、少しだけソースをいじってカスタマイズをしたいと思うなら、恐れずに、最初はサンプルコードをコピー&ペーストでそのまま使うので十分です。

やがて慣れてきたら、できるところから自分の好みに変えていくのでよいのです。