ゆるくはじめるWordPress.

ページ移動するためのページャーを設置する【WordPressテーマ作り STEP10】

pager-top

ページャーとはページが複数分かれている時に、前後のページに移動したりするためのナビゲーションの事。ページネーションとも呼ばれてたりします。
今回は条件分岐と組み合わせて2種類のページャーを設置する例をまとめました。最低限ブログには必要な機能なので忘れずに入れておきましょう!

一覧ページ用のページャーを設置する

ホームページやカテゴリーページなど、記事が並んでいる一覧ページにページャーを設置するならposts_nav_link()というタグがあります。

<?php posts_nav_link(); ?>

これを表示させたい場所に入れておくだけで前後のページへのリンクを下の画像のような形で出力してくれます。

pager-sample

1ページに何件表示させるかは設定>表示設定で指定できます。

表示設定画面

シンプルでちょっと味気ないですが、難しい設定もなく手軽に設置できるので、とりあえず入れておくには便利です。ただ、残念ながら単一の記事ページではこれは表示されないので、そちらでは別の方法で設置する必要があります。その方法は次に。


単一記事ページ用のページャーを設置する

単一記事(single)ページでは前のページへのリンクprevious_post_link()と次のページへのリンクnext_post_link()、別々のタグを使います。

<p class="prev"><?php previous_post_link(); ?></p>
<p class="next"><?php next_post_link(); ?></p>

こんな感じにしておけば前後の記事のタイトルをリンク付きで表示してくれます。

似た名前のprevious_posts_link()next_posts_link()というタグがありますが、これは単一記事ページでは表示されない全く別のタグなので注意。


カスタマイズしてみる

ちょっとカスタマイズして下の画像のような形にしてみたいと思います。

記事ページのページャー例
<div class="pager">
  <?php if( get_previous_post() ): ?>
      <p class="prev"><?php previous_post_link('%link'); ?></p>
  <?php endif; ?>
  <?php if( get_next_post() ): ?>
      <p class="next"><?php next_post_link('%link'); ?></p>
  <?php endif; ?>
</div>

前の記事、次の記事がそれぞれある時だけ表示されるよう条件を付け、'%link'で頭についてくる記号を表示しないようにしてます。

CSS

.pager {
  width: 100%;
  padding: 10px 5px;
  overflow: hidden;
}
.prev, .next {
  width: 50%;
  position:relative;
  font-weight: bold;
}
.prev {
  float: left;
  padding: 0 20px 0 2em;
  border-right: 1px dotted #999;
}
.next {
  float: right;
  padding: 0 2em 0 20px;
  text-align: right;
}
.prev::before, .next::before {
  font-size: 180%;
  line-height: 1em;
  color: #b3afad;
  font-family: FontAwesome;
  position: absolute;
  top: 25%;
}
.prev::before {
  content: " \f053";
  left: 0;
}
.next::before {
  content: " \f054";
  right: 0;
}

FontAwesomeのアイコンを使って装飾してみました。これは一例ですが、CSSで整えてみるとぐっと見やすく、使いやすくなるのでお試しください~。


index.phpに設置してみる

そして上で紹介した2つのページャーを条件分岐を使ってindex.phpに設置してみたいと思います。

<?php if( is_single() ): ?>
  <div class="pager">
    <?php if( get_previous_post() ): ?>
      <p class="prev"><?php previous_post_link('%link'); ?></p>
    <?php endif; ?>
    <?php if( get_next_post() ): ?>
      <p class="next"><?php next_post_link('%link'); ?></p>
    <?php endif; ?>
  </div>
<?php else: ?>
  <div class="pager"><?php posts_nav_link(); ?></div>
<?php endif; ?>

これで単一記事ページでは2つ目のページャが、それ以外のページでは1つめのページャーが表示されるようになりました。

ここまでやればindex.phpだけの簡単なブログのできあがりです!
後は表示の仕方を変えたい部分でテンプレートファイルを追加したり、プラグインを入れてみたり、カスタマイズしていけばどんどん自分の理想のオリジナルテーマに近づいていくと思うので、ぜひチャレンジしてみてください。
今後もコメント欄の追加などの記事も増やしていきますので、よければそちらも参考にしていただければと思います。


スポンサーリンク

公開日: