今回はプラグインを使わずにページネーションを実装したので自分用の振り返りメモとして残していきます。
目次
やった事
・固定ページにページネーションをつける
・ページネーションの番号によって、記事の内容を変化させる。
がメインです。
ページネーションを実装
ここでは固定ページに関数を呼び出す記述を書き、functions.phpの中に書かれている(書いていく)関数が動いてページネーションを表示する流れになっています。
コードを。viewはbootstrapを使用しています。
<?php if(have_posts()) :?>
<?php pagination( array(
'mid_size' => 2,
'prev_text' => '<i class="fas fa-chevron-left mr-2"></i>PREV',
'next_text' => 'NEXT<i class="fas fa-chevron-right ml-2"></i>',));
?>
<?php endif; ?>// ページネーション
function pagination( $args = array() ) {
$navigation = '';
$paged = ( get_query_var( 'paged' ) ) ? absint( get_query_var( 'paged' ) ) : 1;
$news_args = array(
'post_status' => 'publish',
'posts_per_page' => 2,
'orderby' => 'post_date',
'order' => 'DESC',
'paged' => $paged
);
$query = new WP_Query($news_args );
// 1ページのみの場合は出力しない
if ( $query->max_num_pages > 1) {
$args = wp_parse_args(
$args,
array(
'mid_size' => 2,
'prev_text' => _x( 'Previous', 'previous set of posts' ),
'next_text' => _x( 'Next', 'next set of posts' ),
'screen_reader_text' => __( 'Posts navigation' ),
'type' => 'list', //リストとしてマークアップ
)
);
// type に list 以外が指定されていたら list に強制
$args['type'] = 'list';
// これが無いとページネーション自体が表示されなかった。
$args['total']=$query->max_num_pages;
// paginate_links() を使ってリンクを生成
$links = paginate_links( $args );
if ( $links ) {
$patterns = array(
'#<li><a class=([\'\"]([^\'\"]*)[\'\"]) ([^>]*>[^<]*)</a></li>#',
'#<li><span class=([\'\"]([^\'\"]*)[\'\"])\s?([^>]*>[^<]*)</span></li>#',
'#<li><span (aria-current=[\'\"]([^\'\"]*)[\'\"]) class=([\'\"]([^\'\"]*)[\'\"])\s?([^>]*>[^<]*)</span></li>#',
);
$replacements = array(
'<li class="page-item"><a class="$2 page-link" $3</a></li>',
'<li class="page-item disabled"><span class="$2 page-link" $3</span></li>',
'<li class="page-item active"><span $1 class="$4 page-link" $5</span><span class="sr-only">(現在のページ)</span></li>',
);
ksort($patterns);
ksort($replacements);
$links = preg_replace($patterns, $replacements, $links);
//_navigation_markup() は使わずに nav 要素でマークアップ
$navigation = '
<nav class="navigation %s" role="navigation" aria-label="%s">
<div class="nav-links">%s</div>
</nav>';
//nav 要素の aria-label の値には screen_reader_text の値を設定
$navigation = sprintf( $navigation, 'pagination', esc_html( $args['screen_reader_text'] ), $links );
}
}
echo $navigation;
}$query = new WP_Query($news_args );で記事を取得してきています。$news_argsには取得する条件が書かれています。
$args[‘total’]=$query->max_num_pages;ここでtotalを指定してあげないとページネーション自体が表示されなかった。
固定ページのメインクエリのmax_num_pagesはデフォルトが1なので、totalが指定されなければpaginate_linksは何も出力しません。確かにif文でechoしても値返ってこないな〜って思ってたら。。。
paginate_linksにはtotalの指定を書けてあげないとデフォルトの1になってしまうのでページネーションが作られなくなってしまう。
ページネーション番号によって、記事一覧の中身を変える
<?php
$paged = ( get_query_var( 'paged' ) ) ? absint( get_query_var( 'paged' ) ) : 1;
$news_args = array(
'post_status' => 'publish',
'posts_per_page' => 2,
'orderby' => 'post_date',
'order' => 'DESC',
'paged' => $paged
);
$information= get_posts($news_args);
if( $information):
?>
<?php
foreach( $information as $post ):
setup_postdata( $post );
?>
<div class="container row my-4 w-auto mx-auto">
<div class="date text-light col-md-4 h-50">
<p class="text-center"><?php the_time('Y/m/d'); ?></p>
</div>
<div class="news-line col-md-8">
<p class="pt-2 mb-0"> <a class="text-dark" href="<?php the_permalink(); ?>"> <?php the_title(); ?></a></p>
</div>
</div>
<?php
endforeach;
wp_reset_postdata();
?>
<?php else: ?>
<p>表示できる情報はありません。</p>
<?php endif; ?>ここでは最初に$pagedを取得してきます。これがページネーションの何番目にいるのかを取得してくれるようなものとして理解しています。
$pagedが無いとうまく動かないと思います。
あとは$information= get_posts($news_args);で記事を取得してきて、foreachで回して表示しているといった形です。
なのでどんな記事を取得したいのかによって、$news_argsの中身が色々変わってくるのかなと思います。
学んだ事
viewでfunctionsの関数を発火させる。関数の中ですることは、記事を取得してきてpage_links()関数を使ってページネーションを作ること。
大事なのはtotalを指定してあげないとページネーションが表示されなくなってしまうところです。
また、ページネーションにリンクした記事一覧を表示させるためには$pagedを使ったりしながらページネーションの何番目に関連する記事を取得してくることです。
ただのget_posts()だけを使ったりしてしまうと、ページネーションの部分とリンクしなくて中身が1ページ目と変わらない！なんてことになってしまいます。(なりましたw)
参考にしたサイト
ほとんど上記からコードを拝借しました。
totalとか細かいところは付け加えたりしてますが…
まとめ
普通にチャチャっとできるな〜とか考えていましたが苦労しましたw
自分でコードを書いていない部分が多かったので流れを理解するのに時間がかかったんだと思います。
ですが、初めてだったのでとても良い学びになりました。
もっとここはこうした方が良いよ、などアドバイスありましたらぜひ教えてください！
では、そんな感じで！
以上！
