神奈川県伊勢原市在住のkusuのサイトです!ホームページ制作のご依頼等承っております!

【WordPress】固定ページにてWP-PageNaviがちゃんと動く記事一覧を表示させるには??

2019.12.05
WordPress

 固定ページにて記事一覧を表示させる際、プラグインのWP-PageNaviを動かそうとしてもうまく動かない…という状況が起こります。

そこで今回は固定ページでもちゃんとWP-PageNaviが動く記事一覧の表示方法についてまとめたいと思います!

表示設定の件数を1にする

 まずphpファイルを作成する前に、WordPressの管理画面に入り

設定 → 表示設定

のページにいきましょう。

表示設定の画面にいくと、以下の画像のように“1ページに表示する最大投稿数”がデフォルトでは10件になっています。

サイトのデザインによっては1ページにつき10件以下で記事を一覧表示させたい…といった場合に、設定画面での件数より少ない数字だと2ページ目がうまく取得できない…といった現象が起きてしまうので、まず初めに以下の画像のように“1ページに表示する最大投稿数”を1件に変更しましょう。

固定ページとなるphpファイルに記事一覧のphpを記述する

 表示件数の設定が完了したら、次に固定ページとなるphpファイルに一覧ページ用のphpを記述しましょう。

今回は例として

1ページにつき6件、投稿記事を表示させる

という条件で設定したいと思います。

まず、デフォルトとなるHTMLを以下のように記述しました。

<ul>

	<li><a href="記事ページへURL">記事タイトル</a></li>
	<li><a href="記事ページへURL">記事タイトル</a></li>
	<li><a href="記事ページへURL">記事タイトル</a></li>
	<li><a href="記事ページへURL">記事タイトル</a></li>
	<li><a href="記事ページへURL">記事タイトル</a></li>
	<li><a href="記事ページへURL">記事タイトル</a></li>

</ul>

続いて、上記コードを元に固定ページで投稿記事を取得・表示してくれるphpコードを当てはめていきます。

<ul>

	<?php
		$paged = get_query_var('paged')? get_query_var('paged') : 1;
		$args = array(
			'post_type' => 'post',
			'posts_per_page' => 6,
			'paged' => $paged
		);
		$myposts = new WP_Query($args);
	?>
	<?php if($myposts->have_posts()): ?>

		<?php while($myposts->have_posts()): $myposts->the_post(); ?>

			<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>

		<?php endwhile; ?>

	<?php endif; wp_reset_postdata(); ?>

</ul>

投稿タイプを指定する

 上記phpコードの解説としては、まず6行目にある

'post_type' => 'post',

こちらで投稿タイプを指定しています。

今回は【投稿】の記事を表示させたいので“post”としています。

表示件数を指定する

 続いて7行目にある

'posts_per_page' => 6,

にて表示件数を指定しています。

今回は1ページにつき6件、記事を表示させたいので“6”と指定しています。

WP-PageNaviを表示させる

 上記コードで、固定ページでも記事一覧が表示できるようになりました。

そのうえで、WP-PageNaviがちゃんと動くようにするには、以下のようにコードを付け加えます。

<ul>

	<?php
		$paged = get_query_var('paged')? get_query_var('paged') : 1;
		$args = array(
			'post_type' => 'post',
			'posts_per_page' => 6,
			'paged' => $paged,
		);
		$myposts = new WP_Query($args);
	?>
	<?php if($myposts->have_posts()): ?>

		<?php while($myposts->have_posts()): $myposts->the_post(); ?>

			<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>

		<?php endwhile; ?>

	<?php endif; wp_reset_postdata(); ?>

</ul>

<?php if(function_exists('wp_pagenavi')): ?>
	<?php wp_pagenavi(array('query' => $myposts)); ?>
<?php endif; ?>

上記コードの24〜29行目のコードを記述してあげることで、WP-PageNaviのページャーを表示させることが可能になります!

補足コメントとしましては、本来アーカイブページでは

<?php if(function_exists('wp_pagenavi')): ?>
	<?php wp_pagenavi(); ?>
<?php endif; ?>

と記述することでページャーを表示させることが可能なのですが、固定ページでページャーを表示させるには

<?php if(function_exists('wp_pagenavi')): ?>
	<?php wp_pagenavi(array('query' => $myposts)); ?>
<?php endif; ?>

と記述する必要があります。

まとめ

 以上が固定ページでWP-PageNaviがちゃんと動く記事一覧を表示させる方法でした。

作成するページによってはページャーがうまく表示されなかったりすることが結構あったりするので、今回ご紹介した方法がお役に立てれば…と思います!

スポンサーリンク
検 索