固定ページに投稿一覧とページネーションを設置する、3分で

現在フリーのweb製作者として活動しているしょーご（@samuraibrass）です。

Aさん

固定ページに！

Bくん

投稿一覧を！

しょーご

ページネーション付きで実装したいんだろ？よし行くよ！

しょーごさん@samuraibrass のブログ見ながらやったら意外とあっさり固定ページのページネーションできた！
ありがとうございました🙏✨

固定ページに投稿一覧とページネーションを設置する、3分で – しょーごログ https://t.co/ME7eclYyBm @samuraibrassより
— はるか@ホームページ制作・運用・MEO (@rururuka_run) October 8, 2021

✔️卒業制作

８割ほどWordPress化済み。
「固定ページにページネーションを設置する」で
indexやarchiveなら簡単にできるのに固定ページは厄介😟で悩みましたが@samuraibrass さんの記事のおかげで実装できました🙏
あとはカスタム投稿とお問合せ

参考https://t.co/plOa9u7tyU #web制作 #デイトラ
— em_web | Web制作・Webデザイン (@em_webcreative) October 21, 2022

しょーご

この記事を書いたのは
しょーご（@samurabrass）

このブログ「しょーごログ」の運営者。エンジニアとしてサイト制作やシステム開発を行いつつ、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う。

＼現役エンジニアのレビュー付き／

実践レベルのコーディング課題公開中

【駆け出しコーダーに捧ぐ】2022年以降のポートフォリオ戦略&レビュー付きデザインカンプからのコーディング課題について解説 — 販売ページはこちら

デザインカンプからのコーディングを経験したい
現役エンジニアのレビューを受けてみたい
即戦力級のポートフォリオを用意したい

コーディングを学習中の方はぜひご活用ください。

＼無料の入門編から本格企業サイトまで／

課題を見てみる

固定ページで投稿、ページネーションするコード
- 固定ページはサブループをWP_Queryで回す
- paginate_links ページネーション内処理
実績一覧や商品一覧によく使う
実案件レベルのWordPress課題を出しています

固定ページで投稿、ページネーションするコード

<?php
 $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
 $the_query = new WP_Query( array(
     'post_status' => 'publish',
     'paged' => $paged,
     'posts_per_page' => 5, // 表示件数
     'orderby'     => 'date',
     'order' => 'DESC'
 ) );
  
  
 if ($the_query->have_posts()) :?><?php
    while ($the_query->have_posts()) : $the_query->the_post();?>
//コンテンツ
<?php　endwhile;?><?php endif; ?>
<!-- pagenation -->
<div class="pagenation">
<?php 
if ($the_query->max_num_pages > 1) {
    echo paginate_links(array(
        'base' => get_pagenum_link(1) . '%_%',
        'format' => 'page/%#%/',
        'current' => max(1, $paged),
        'mid_size' => 1,
        'total' => $the_query->max_num_pages
    ));
}
wp_reset_postdata();?>
</div><!-- /pagenation -->