pagination002

キュレーションサイトでよく見るページネーションが使いやすそうだったので、当サイトのトップページのスマートフォン向けデザインで導入してみました。WordPressユーザーであれば比較的簡単に導入できるので方法を紹介します。

スポンサードリンク

ページネーションのデザイン

今回は2つのページネーションのデザインを準備しました。

ページネーション1

See the Pen Page Navigation 2 by Kentaro (@kentaro) on CodePen.

ページネーション2

See the Pen Page Navigation by Kentaro (@kentaro) on CodePen.

総ページ数と現在のページ数の表示

今回作るページネーションでは真ん中に総ページ数と現在のページ数の表示があります。これは下記のコードをfunctions.phpに記述して、任意の場所で表示できるようにします。

//現在のページ数の取得
function show_page_number() {
    global $wp_query;
    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
    $max_page = $wp_query->max_num_pages;
    echo $paged;  
}
//総ページ数の取得
function max_show_page_number() {
    global $wp_query;
    $max_page = $wp_query->max_num_pages;
    echo $max_page;  
}

[参考] WordPressで現在のページ数と総ページ数を取得・表示する方法

ページ遷移を行うリンクを表示する関数

アーカイブページでのページ遷移なのでprevious_posts_linknext_posts_linkを使用します。それぞれ記事一覧ページで日付が新しいページと日付が古いページに移動するリンクを表示します。

<?php previous_posts_link(); ?> <!-- 前のページヘのリンクを表示 -->
<?php next_posts_link(); ?>     <!-- 次のページヘのリンクを表示 -->

ページネーション実装のためのコード

ページネーションのデザインで示したHTMLにWordPressの関数を埋め込んだものが下記のコードです。

ページネーション1

<div class="pagenav">
  <span class="prev">
    <?php previous_posts_link(''); ?>
  </span>
  <span class="pagenum">
    <?php show_page_number(''); ?>/<?php max_show_page_number(''); ?>
  </span>
  <span class="next">
    <?php next_posts_link(''); ?>
  </span>
</div>

ページネーション2

<div class="pagenav">
  <span class="prev">
    <?php previous_posts_link('前へ'); ?>
  </span>
  <span class="pagenum">
    <?php show_page_number(''); ?>/<?php max_show_page_number(''); ?>
  </span>
  <span class="next">
    <?php next_posts_link('次へ'); ?>
  </span>
</div>

ページネーションのデザインCSS

ページネーションのスタイル適用に必要なCSSです。”前へ”と”次へ”のリンクにアイコンフォントを使用しているので、事前にFont Awesomeの使用ができるように準備をしておく必要があります。

ページネーション1

.pagenav {
  display: table;
  width: 100%;
  background: #eee;
}

.pagenav span {
  display: table-cell;
  text-align: center;
}

.prev {
  width: 30%;
}

.prev a {
  display: block;
  color: #666;
  padding: 15px 10px;
  border-radius: 5px;
}

.prev a:before {
  font-family: 'FontAwesome';
  content: '\f104';
  font-size: 25px;
  vertical-align: middle;
  margin-right: 10px;
}

.prev a:hover {
  text-decoration: none;
}

.next {
  width: 30%;
}

.next a {
  display: block;
  color: #666;
  padding: 10px 10px;
  border-radius: 5px;
}

.next a:after {
  font-family: 'FontAwesome';
  content: '\f105';
  font-size: 25px;
  vertical-align: middle;
  margin-left: 10px;
}

.next a:hover {
  text-decoration: none;
}

.pagenum {
  width: 40%;
  color: #666;
  vertical-align: middle;
}

ページネーション2

.pagenav {
  display: table;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
}

.pagenav span {
  display: table-cell;
  text-align: center;
}

.prev {
  width: 30%;
}

.prev a {
  background: #3498db;
  color: #fff;
  padding: 10px 10px;
  border-radius: 5px;
  text-decoration: none;
}

.prev a:before {
  font-family: 'FontAwesome';
  content: '\f104';
  font-size: 20px;
  vertical-align: middle;
  margin-right: 10px;
  display: inline-block;
  margin-top: -2px;
}

.prev a:hover {
  text-decoration: none;
}

.next {
  width: 30%;
}

.next a {
  background: #3498db;
  color: #fff;
  padding: 10px 10px;
  border-radius: 5px;
  text-decoration: none;
}

.next a:after {
  font-family: 'FontAwesome';
  content: '\f105';
  font-size: 20px;
  vertical-align: middle;
  margin-left: 10px;
  display: inline-block;
  margin-top: -2px;
}

.next a:hover {
  text-decoration: none;
}

.pagenum {
  width: 40%;
}

さいごに

CSSをカスタマイズしてそれぞれのWebサイトのデザインに合うように調整すると良い感じになると思います。

この記事をシェアする

この記事と同じカテゴリーの記事

この記事を書いた人

naremo [ナレモ]はWebサービスやアプリ、カメラ、プログラミングについて紹介するブログです。