応援クリックよろしくお願いします！
どうも、Aji(@LoglogMe)です。
カスタム投稿一覧でページ送り（ページネーション）が表示されずに苦労しました。
こういつやつですね。
このブログでは通常の投稿タイプを使わずにカスタム投稿タイプをつかって記事投稿してます。
archive.phpでは表示されてたんですけど、トップページ (index.php) だけ表示されずで、まぁとりあえずいいやと後回しにして放置してたら記事数が増えていくうちに案の定不便になりました。笑
調べると同じ悩みの方は結構多く、僕も丸1日くらいかかってしまいましたので備忘録に残しときます。
ページネーションのコードに関しては、僕が使ってるコードをcss付きで記載しておくのでお好みでカスタマイズしてください。
カスタム投稿タイプを通常の投稿タイプ（post）として扱わせる
function.phpに以下を記入
add_action('pre_get_posts', 'home_posts_type');
function home_posts_type($wp_query)
{
if (!is_admin() && $wp_query->is_main_query() && $wp_query->is_home()) {
$wp_query->set('post_type', array('post', 'news'));// newsの部分にカスタム投稿のスラッグ名
$wp_query->set('posts_per_page', 10); // 10件ずつ表示
}
}カスタム投稿タイプを通常の投稿タイプ（post）として扱う設定です。
僕の場合はカスタム投稿のスラッグを「news」にしてるので、表示させたい投稿タイプに合わせて変更してください。
どうやらホームでは通常のポスト数でページ数を判断してるようで、これが原因でいくらカスタム投稿数が多くてもトップページのみページ送りが表示されていなかったみたいです。
ページネーションのコード
こちらはページネーションのコードです。こちらもfunction.phpにコピペしてください。
// ページネーション
function pagination($pages = '', $range = 2)
{
$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 "<div class=\"pager\">\n";
echo "<ul class=\"pagination\">\n";
//Prev：現在のページ値が１より大きい場合は表示
if ($paged > 1) echo "<li class=\"pre\"><a href='" . get_pagenum_link($paged - 1) . "'><span>«</span></a></li>\n";
for ($i = 1; $i <= $pages; $i++) {
if (1 != $pages && (!($i >= $paged + $range + 1 || $i <= $paged - $range - 1) || $pages <= $showitems)) {
//三項演算子での条件分岐
echo ($paged == $i) ? "<li><a class=\"active\" href='" . get_pagenum_link($i) . "'><span>" . $i . "</span></a></li>\n" : "<li><a href='" . get_pagenum_link($i) . "'><span>" . $i . "</span></a></li>\n";
}
}
//Next：総ページ数より現在のページ値が小さい場合は表示
if ($paged < $pages) echo "<li class=\"next\"><a href=\"" . get_pagenum_link($paged + 1) . "\"><span>»</span></a></li>\n";
echo "</ul>\n";
echo "</div>\n";
}記事（10件ずつ）の表示
以下がカスタム投稿記事の一覧をトップページに表示させるコードです。
<?php
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$args = array(
'post_type' => 'news',//カスタム投稿名
'posts_per_page' => 10,//記事表示件数
'paged' => $paged
);
$the_query = get_posts($args);
$max_num_pages = $my_query->max_num_pages;
?>
<?php $my_posts = get_posts($args); ?>
<?php global $post;
foreach ($my_posts as $post) :
setup_postdata($post);
?>
// ループ処理を記述
<?php
endforeach;
wp_reset_postdata();
?>
//ページネーション
<?php
if (function_exists("pagination")) {
pagination($additional_loop->max_num_pages);
}ワードプレス管理画面側の表示設定も「1ページに表示する最大投稿数」を10件に設定してます。
ページネーションはfuncction.phpで作成した関数を呼び出す形に。
cssで見た目を調整
/* ページナビゲーション */
.pager {padding-top: 40px; width: 100%;}
.pager .pagination {text-align: center;line-height: 0;}
.pager .pagination li {display: inline;margin: 0 2px;padding: 0;display: inline-block;width: 40px;height: 40px;overflow: hidden;text-align: center;position: relative;border-radius: 2px;}
.pager .pagination li a {vertical-align: middle;position: absolute;top: 0;left: 0;width: 100%;height: 100%;text-align: center;display: table;text-decoration: none;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: al0.3s ease;}
.pager .pagination li a span {display: table-cell;vertical-align: middle;transform: none;}
.pager .pagination li a:hover {color: #fff;background: #830000;}
.pager .pagination li .active {color: #fff;background: #000;}
@media (max-width: 750px) {
.pager .pagination li {display: none;}
.pager .pagination .pre,
.pager .pagination .next {display: inline-block;width: 40%;height: 50px;text-align: center;}
.pager .pagination .pre a,
.pager .pagination .next a {width: 100%;text-align: center;}
.pager .pagination .pre span:after {content: " 前のページ";}
.pager .pagination .next span:before {content: " 次のページ ";}
}
cssはクラスの階層がみやすい記入スタイルなので自動整形ツールなのでご自由に変えてください。もちろんそのままコピペでも動きます。
レスポンシブ（スマホ）対応もしております。
出力されるページネーションのhtml
<div class="pager">
<ul class="pagination">
<li><a class="active" href=""><span>1</span></a></li>
<li><a href=""><span>2</span></a></li>
<li><a href=""><span>3</span></a></li>
<li><a href=""><span>4</span></a></li>
<li><a href=""><span>5</span></a></li>
<li class="next"><a href=""><span>»</span></a></li>
</ul>
</div>ご参考まで出力されるhtmlです。
まとめ
結構苦労しました。。できるだけプラグインは使いたくないので今後のサイト制作にも役立つと思い、なんとか実装できました。
ご参考までに。
ではでは。
応援クリックよろしくお願いします！
