目次
はじめに
今回はWordPressの投稿ページの前後の記事のページネーションを表示するソースコードをご紹介します。
ページネーションを表示させるためのソースコード例
PR
<div class="pagination">
<div class="btn-square pagination-prev <?php echo !get_previous_post() ? 'is-hidden' : ''; ?>">
<?php previous_post_link(
'%link',
'<span class="icon-left">前の記事へ</span>',
);
?>
</div>
<div class="btn-square btn-wide btn-bg">
<a href="<?php echo home_url('記事一覧のスラッグ') ?>">記事一覧へ</a>
</div>
<div class="btn-square pagination-next <?php echo !get_next_post() ? 'is-hidden' : ''; ?>">
<?php
next_post_link(
'%link',
'<span class="icon-right">次の記事へ</span>',
);
?>
</div>
</div>.pagination {
text-align: center;
}
.pagination .is-hidden {
opacity: 0;
visibility: hidden;
}
.pagination .btn-square {
width: 100%;
}
.pagination .btn-square a {
position: relative;
display: block;
width: 100%;
max-width: 280px;
line-height: 60px;
font-size: 16px;
font-weight: 700;
color: #333;
border: 1px solid #333;
}
.pagination .btn-wide a {
max-width: 380px;
}
.pagination .btn-bg a {
color: #fff;
background-color: #094;
border-color: #094;
letter-spacing: 0.1em;
}
.pagination .btn-square a {
display: block;
margin-left: auto;
margin-right: auto;
}
.pagination .pagination-prev a {
margin-left: 0;
margin-right: auto;
}
.pagination .pagination-next a {
margin-left: auto;
margin-right: 0;
}
.pagination .icon-left::before,
.pagination .icon-right::before {
content: "";
position: absolute;
top: 50%;
width: 8px;
height: 8px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
}
.pagination .icon-left::before {
left: 20px;
transform: translate(0%,-50%) rotate(-135deg);
}
.pagination .icon-right::before {
right: 20px;
transform: translate(0%,-50%) rotate(45deg);
}
@media screen and (min-width: 768px) {
.pagination {
display: flex;
align-items: center;
justify-content: space-between;
padding: 40px 0;
}
.pagination .btn-square a {
transition: all 0.3s
}
.pagination .btn-square a:hover {
color: #fff;
background-color: #333;
}
.pagination .btn-square a:hover .icon-left,
.pagination .btn-square a:hover .icon-right {
border-color: #fff;
}
.pagination .btn-bg:hover {
color: #094;
background-color: #fff;
}
}
@media screen and (max-width: 767px) {
.pagination {
display: block;
}
.pagination .btn-square:nth-of-type(n+2) {
margin-top: 20px;
}
}ページネーションを表示させるためのWordPressの関数について
get_previous_post()（get_next_post()）
現在の記事より前（次）の記事が存在する場合に true を返します。
previous_post_link()（next_post_link()）
前（次）の記事へのリンクを生成します。
第一引数の「%link」で前の記事へのリンク（<a>タグ）を生成します。
第二引数は<a>タグの中に入るテキストやアイコンのHTMLを指定します。
ページネーションのレイアウト
前後の記事が存在する時のページネーションのレイアウト
前後の記事が存在する時に出力されるページネーションのHTML
<div class="pagination">
<div class="btn-square pagination-prev">
<a href="#">
<span class="icon-left">前の記事へ</span>
</a>
</div>
<div class="btn-square btn-wide btn-bg">
<a href="#">記事一覧へ</a>
</div>
<div class="btn-square pagination-next">
<a href="#">
<span class="icon-right">次の記事へ</span>
</a>
</div>
</div>前の記事が存在しない時のページネーションのレイアウト
前の記事が存在しない時に出力されるページネーションのHTML
<div class="pagination">
<div class="btn-square pagination-prev is-hidden">
</div>
<div class="btn-square btn-wide btn-bg">
<a href="#">記事一覧へ</a>
</div>
<div class="btn-square pagination-next">
<a href="#">
<span class="icon-right">次の記事へ</span>
</a>
</div>
</div>次の記事が存在しない時のページネーションのレイアウト
次の記事が存在しない時に出力されるページネーションのHTML
<div class="pagination">
<div class="btn-square pagination-prev">
<a href="#">
<span class="icon-left">前の記事へ</span>
</a>
</div>
<div class="btn-square btn-wide btn-bg">
<a href="#">記事一覧へ</a>
</div>
<div class="btn-square pagination-next is-hidden">
</div>
</div>まとめ
cssやget_previous_link()の条件分岐の位置はサイトによって変わると思うので適宜ご調整ください。
他のHTML・CSS ・JavaScriptソースコード紹介記事まとめ
ソースコードまとめ
実務経験で作成したレイアウトのHTML・CSS ・JavaScriptソースコードを紹介した記事まとめています。
