WordPressのテーマ作成でページネーションを追加する方法(コピペOK)

Programming

今回は、WordPress(ワードプレス)のテーマ作成で必ず必要になってくるページネーションについての解説です。

ページネーションとは、アーカイブページを数ページに分割した時に「次のページ」もしくは数ページ目に行くための仕組みです。何だか小難しいプログラムが必要なイメージがありますが、WordPress(ワードプレス)では標準で関数が用意されているので簡単に実装することが出来ます。今回はそれを使った方法になります。

WordPressのテーマ作成でページネーションを作成する方法

まず初めに「pagination.php」を作成して下さい。そのファイルを「template-parts」フォルダに入れます。(必ずtemplate-partsフォルダを用意する必要はないが、後から管理しやすくするためにこうしています。

用意した「pagination.php」に以下の記述をします。(コピペで大丈夫です。)

<!-- ページネーション -->
<div class="pagination">
    <?php global $wp_rewrite;
    $paginate_base = get_pagenum_link(1);
    if(strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()){
        $paginate_format = '';
        $paginate_base = add_query_arg('paged','%#%');
    }
    else{
        $paginate_format = (substr($paginate_base,-1,1) == '/' ? '' : '/') .
        user_trailingslashit('page/%#%/','paged');;
        $paginate_base .= '%_%';
    }
    echo paginate_links(array(
        'base' => $paginate_base,
        'format' => $paginate_format,
        'total' => $wp_query->max_num_pages,
        'mid_size' => 1,
        'current' => ($paged ? $paged : 1),
        'prev_text' => '«',
        'next_text' => '»',
    )); ?>
</div>

これだけでページネーションは完成です。

ページネーションを使用したい場所に以下の記述をして呼び出します。(template-partsフォルダに入れていない場合は、カッコ内はpagenationのみの記述で大丈夫です。)

<!-- ページネーション -->
<?php get_template_part( '/template-parts/pagenation' ); ?>

あとはCSSで形を整えて完成です。以下に簡単なサンプルも貼り付けておきます。

.pagination {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 2em;
}
.pagination span {
  padding: 0 1em;
}
.pagination .page-numbers {
  padding: 0 1em;
}
.pagination .next {
  padding: 0 1em;
}

実際の表示はこんな感じです。シンプルですがしっかりとページ遷移が機能しています。

また、一覧ページの投稿の最大数(ページ数の調整)はWordPressの管理画面から行います。

設定表示設定にある1ページに表示する最大投稿数の数値で調整して下さい。

*注意
上記の設定ページで1ページに表示する最大投稿数の設定をしたら、実際に表示する投稿を呼び出す数を必ず合わせて下さい。ここがずれるとエラーになったり、2ページ目以降が真っ白だったり、ページ数が合わなかったりしますので注意。

<?php
  $args = array(
    'posts_per_page' => '12', //ここの値を必ず合わせる
    'post_type' => 'Photo',
    'post_status' => 'publish',
    'orderby' => 'post_date',
    'paged' => $paged,
  );
  $customPosts = get_posts($args);
  if ($customPosts) : foreach ($customPosts as $post) : setup_postdata($post);
  $terms = get_the_terms($post->ID, 'category_name');
  foreach ($terms as $term) {
    $term_slug = $term->slug;
  }?>

以上が「WordPressのテーマ作成でページネーションを追加する方法(コピペOK)」でした。

カテゴリー、タグ、投稿、検索結果一覧などのアーカイブページ全般に使って下さい。

この記事を書いた人
KEITO

AI × IT × WEB3|関東在住。本職はディレクター 。AIを活用してビジネス開拓。仕事の依頼はTwitterからお願いします。YouTube、Twitter、Instagramもお願い致します。

Programming
この記事を共有する
スポンサーリンク
スポンサーリンク
KT LIFE
スポンサーリンク

暗号資産投資するなら以下

Bybit

国内人気No.1!屈強なサーバー/信頼性抜群!トレーダー御用達の取引所。

通貨数338種以上
レバレッジ最大100倍
現物取引手数料Maker:0%〜0.1%
Taker:0.02%〜0.1%
先物取引手数料Maker:0%〜0.01%
Taker:0.03%〜0.06%
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり・JPY利用可
特典下記から登録で初回ボーナスあり
登録リンクBybitへの登録は こちら
招待コード22295
レビュー記事レビュー記事は こちら
BigBoss&CRYPTOS

最大レバレッジ1111倍・日本円換金ルート

通貨数BigBoss:15種以上
CRYPTOS:15種以上
レバレッジ最大1111倍
スポット手数料Maker:0.02%〜0.18%
Taker:0.05〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設少し敷居が高い
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクBigBossへの登録は こちら
招待コード6690951
レビュー記事レビュー記事は こちら
Nexo

高APYでのステーキング&レンディング

通貨数60種以上
レバレッジ
スポット手数料Maker:0.04%〜0.20%
Taker:0.03%〜0.20%
先物取引手数料
操作性スマホでも取引・入金できる
口座開設簡単に口座開設できる
日本語対応日本語対応あり
特典下記から登録で初回ボーナスあり
登録リンクNexoへの登録は こちら
招待コード
レビュー記事レビュー記事は こちら

他おすすめ取引所はこちら

タイトルとURLをコピーしました