GIV株式会社
〒350-1123
埼玉県川越市脇田本町７番地６
ダイゴビル６階
埼玉県川越市脇田本町７番地６
ダイゴビル６階
TEL ： 049-293-2513
FAX： 049-293-2514
ページネーションをWEBサイトに設置すると、ユーザーがWEBサイトで記事を見つけやすくなります。今回はWordPressでページネーションを設置する方法を解説します。
ページネーションとは下記の画像のように、投稿ページのリンクを複数表示する機能です。
多くのWEBサイトで使われているので、目にした人も多いかと思います。ページネーションがあれば、投稿の数が多い場合でも、ユーザーが記事を探しやすくなります。ページが多いWEBサイトなら特に設置ほしい機能ですね。
ではページネーションを作成する方法を解説します。特に難しい操作はなく、すぐに設置することができますよ。
下記のコードを表示させたい箇所に記述するだけで、ページネーションを設置できます。
<?php the_posts_pagination( ); ?>
上記のコードを記述すると下記の画像のように表示されます。
ただこれだけだとユーザーにとっては見にくいままでしょう。そこでCSSで見やすくします。生成されたページネーションのclassに合わせて、ページネーションのデザインを変更しましょう。
以下にてCSSのコードを載せたので参考にしてみてください。
▢ CSSのコード
/* ページネーション*/
.pagenation {
width : 900px;
margin : 0 auto;
margin-top: 40px;
nav {
.nav-links {
.prev {
background-color: #f5f5f5;
}
.next {
background-color: #f5f5f5;
}
a {
padding: 10px 10px;
background-color: #f5f5f5;
color: #000000;
text-decoration: none;
}
.current {
padding: 10px 10px;
background-color: #e0ffff;
}
}
}
}
上記のCSSを適用すると以下のようにページネーションが見やすくなりました。
次に下記のコードで「前へ」と「次へ」を「前のページへ」と「次のページへ」と変更してみます。
<?php the_posts_pagination(
array(
'mid_size' => 2,
'prev_next' => true,
'prev_text' => ('< 前のページへ'),
'next_text' => ('次のページへ >'),
)
); ?>
mid_sizeでは左右に並ぶ、ページ番号の数を設定できます。「’prev_next’ => true,」は前のページと次のページのリンクを表示する設定をしています。falseならリンクは表示されません。
これまでページネーションの作成方法を説明してきましたが、固定ページで同じようにコードを記述してもページネーションは表示されません。
固定ページでページネーションを表示させる場合は以下のようなコードを記述しましょう。
<div class="pagenation">
<?php
if ($the_query->max_num_pages > 1) {
echo paginate_links(array(
'total' => $the_query->max_num_pages,
'mid_size' => 2,
'prev_next' => true,
'prev_text' => ('< 前のページへ'),
'next_text' => ('次のページへ >'),
));
}
wp_reset_postdata();?>
</div>
▢CSSのコード
.pagenation {
width : 900px;
margin : 0 auto;
margin-top: 40px;
.prev {
background-color: #f5f5f5;
}
.next {
background-color: #f5f5f5;
}
a {
padding: 10px 10px;
background-color: #f5f5f5;
color: #000000;
text-decoration: none;
}
.current {
padding: 10px 10px;
background-color: #e0ffff;
}
}
GIV株式会社は、埼玉県川越市にあるWEB（ホームページ）制作会社です。お困りごと、ご相談、お気軽にご連絡ください。お問い合わせは、こちらから。