その他

2022.07.27

【WordPress】固定ページにページネーションを効かせる方法(プラグインなしで簡単)

お客様の様々なニーズに答えていくには、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についての関連記事はこちら

[card url=”https://note.spiqa.design/wp/book06/”]

[card url=”https://note.spiqa.design/wp/wordpress-loop/”]

この記事をシェアする

関連記事

  • 2024.03.22

    Webデザインにおけるアニメーションについて考えてみた〜実例編〜

    その他

  • 2024.03.12

    Webデザインにおけるアニメーションについて考えてみた〜メリット・デメリット編〜

    その他

  • 2024.02.02

    Webデザインにおけるアニメーションについて考えてみた〜目的編〜

    その他

おすすめ記事

  • 2021.03.17

    ACFでカテゴリーにカスタムフィールドを紐づける方法【WordPress】

    その他

  • 2021.07.09

    【サイトレビュー#48】ユーザビリティに優れたデザイン!個人投資家のための信託サイト

    その他

  • 2023.11.02

    デザイナーにとって大事な姿勢って?

    その他

TAG

×