今回はWP-PageNavi ページナビゲーション作成について
の解説になります!
こんな方に読んでほしい
- WordPressを学び始めた方へ
- WordPressのページナビゲーションについて解説していきます。
- 今回はWordPressの「WP-PageNavi プラグイン」について解説しております。
WP-PageNaviとは
「WP-PageNavi」 は、WordPressのプラグインになります。
WP-PageNaviとは、1ページ、2ページ目とナビゲーションの役割をしてくれます。
例として、記事の件数が合計10件あり、1ページ目に5件表示し、残り5件は2ページ目に表示させるため、
ナビゲーションを表示してくれます。
このプラグインを紹介する理由は3つあります。
- POINT
- 初期設定が必要ありません、コードの埋め込みは必要になります。
- 投稿タイプ、カスタム投稿タイプのカテゴリーにも対応できます。
- CSSで自由にデザインの変更が可能です。
以上の理由が上げられます、CSSで自由にデザインの変更ができるので、オススメします。
公式サイトは以下になります。
プラグインのインストール方法は上記の「プラグイン導入方法」からご確認ください。
次に使用についての解説です。
WP-PageNaviの使い方
- ●1:プラグインをインストール
- プラグインをインストール後、「有効化」を選択
- ●2:最大投稿数の設定
- 1:管理画面の「設定 > 表示設定の1ページに表示する最大投稿数」を設定します。
2:posts_per_page
で最大投稿数を指定する、1、2のどちらかで指定します。
- ●3:コードを入力
?php if ( function_exists( 'wp_pagenavi' ) ) { wp_pagenavi(); } ?
を任意の場所に貼ります。
- ●4:デザインを変更する場合
- 「wp-content > plugins > wp-pagenavi > pagenavi-css.css」のCSSファイルを変更してください。
WP-PageNavi コードの例
今回は基本的なループに対してposts_per_page
で最大投稿数を指定します。
以下のようになります。
<ul>
<?php
$args = array(
'post_type' => 'post',
'paged' => $paged, // 表示するページ数
'posts_per_page' => 5,
); ?>
<?php $wp_query = new WP_Query( $args ); ?>
<?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
<li>
<?php the_category(); ?>
<h2>タイトルが入ります</h2>
<p>本文が入ります。</p>
<!--以下省略-->
</li>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php if ( function_exists( 'wp_pagenavi' ) ) { wp_pagenavi(); } ?>
</ul>
ループを指定する際には、必ず'paged' => $paged,
が必須になります。
「paged」の指定がない場合は、ナビゲーションが表示しない場合があります。
最後に「wp_pagenavi」用のコードを指定します。
下記のようになれば完了になります。
CSSでデザイン変更について
上記のイメージ図は、色や文字の大きさを変更してみました。
実際には角丸なども可能になります。
CSSを変更する際には以下のファイルで変更してください。
「wp-content > plugins > wp-pagenavi > pagenavi-css.css」のCSSファイルを変更してください。
「pagenavi-css.css」のデフォルトは以下のようになります。
/*--下記はデフォルトになります。--*/
.wp-pagenavi {
clear: both;
}
.wp-pagenavi a, .wp-pagenavi span {
text-decoration: none;
border: 1px solid #BFBFBF;
padding: 3px 5px;
margin: 2px;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
border-color: #000;
}
.wp-pagenavi span.current {
font-weight: bold;
}
変更後は以下のようになります。
背景色と文字色、余白を変更しました。
/*--下記は変更後になります。--*/
.wp-pagenavi {
clear: both;
}
.wp-pagenavi a, .wp-pagenavi span {
text-decoration: none;
padding: 10px 14px;
margin: 2px;
color: #fff;
background: #2C74A0;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
border-color: #000;
}
.wp-pagenavi span.current {
font-weight: bold;
}
かなり自由度が高いので一度CSSに触れてみてください。
まとめ
今回はこれで以上です。
- POINT
- WordPressページナビゲーションを作成するプラグインについて解説しました。
- WP-PageNaviの公式サイトはコチラから。
- 初期設定が必要ありません。コードの埋め込みは必要になります。
- 投稿タイプ、カスタム投稿タイプのカテゴリーにも対応できます。
- CSSで自由にデザインの変更が可能です。
- ループを指定する際には、必ず
'paged' => $paged,
が必須になります。 - CSSで変更する際には「pagenavi-css.css」のファイルで変更してみてください。
- プラグインのインストールから設定の方法までの流れはコチラから。
スポンサーリンク

SHU
1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。
最新記事
関連記事