2024.07.19
ChatGPTにクラス名を付けてもらってみた
- コーディング
お客様の様々なニーズに答えていくには、WPをフルカスタムしたり、固定ページや静的ページに記事ループやページネーション(ページャー)を設置するという場面が多々ありますよね。
そんな固定ページでよくある不具合が、そう、ページネーションです。
ループはちゃんと動いているのに、肝心のページネーションがうまく作動しない!!
ここでつまずいて、大幅なタイムロス・・・なんて経験ありませんか?
この記事では固定ページに設置したページネーションを確実に作動させる方法をご紹介します。
そもそもWPの記事用のテンプレートファイル(index.php , single.php , archive.php , category.phpなど)にループを組む場合は、いわゆる通常のページネーション設置タグで何の問題もなく作動するはずです。
しかし、固定ページはカスタムテンプレートであるため、そもそも記事ループやページネーションを組むような想定がないため、通常のページネーション設置タグでは正常に動作する設定がなされていないのです。
そこで今回紹介する方法を簡単に説明すると、ページネーションはページネーションで 記事とは独立したループとして組んで設置してしまう という少々強引なワザになります。笑
コードは下記になります。クラス名や表示条件はアレンジしてご利用ください。
<!--固定ページ、静的ページにページャーを付ける-->
<div class="pagination">
<?php
$paged = (int) get_query_var('paged');
$args = array(
'paged' => $paged, //ページネーション用
'post_type' => 'post', //投稿タイプ(記事ループと条件にする)
'posts_per_page' => 10, //表示投稿数(記事ループと条件にする)
'orderby' => 'post_date', //表示順条件(記事ループと条件にする)
'order' => 'DESC', //降順(記事ループと条件にする)
'post_status' => 'publish' //公開済みのみ表示(記事ループと条件にする)
);
$the_query = new WP_Query($args);
if ( $the_query->have_posts() ) :
while ( $the_query->have_posts() ) : $the_query->the_post();
get_template_part( 'content', get_post_format() );
endwhile;
else:
get_template_part( 'content', 'none' );
endif;
if ($the_query->max_num_pages > 0) {
echo paginate_links(array(
'base' => get_pagenum_link(1) . '%_%',
'format' => 'page/%#%/',
'current' => max(1, $paged),
'total' => $the_query->max_num_pages,
'prev_text' => '<<', //次への表示指定
'next_text' => '>>' //前への表示指定
));
}
wp_reset_postdata();
?>
</div><!-- pagination -->
いかがでしたか?
是非ご活用ください(^o^)/
WordPressについての関連記事はこちら
株式会社スピカデザイン
渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。
© 2020 spiqa design