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

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

2019.11.24
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コードを当てはめていきます。

<?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);
if($myposts->have_posts()): while($myposts->have_posts()): $myposts->the_post();
?>

<ul>

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

</ul>

<?php endwhile; endif; wp_reset_postdata(); ?>

投稿タイプを指定する

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

'post_type' => 'post',

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

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

表示件数を指定する

 続いて4行目にある

'posts_per_page' => 6,

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

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

WP-PageNaviを表示させる

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

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

<?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);
if($myposts->have_posts()): while($myposts->have_posts()): $myposts->the_post();
?>

<ul>

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

</ul>

<?php endwhile; endif; wp_reset_postdata(); ?>

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

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

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

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

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

を追記した

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

<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>

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

まとめ

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

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

関連記事

スポンサーリンク
検 索