Webの記録

WordPressプラグイン「WP-PageNavi」でページナビゲーションを表示♪

投稿日:

この記事は約 2 分で読めます。

このサイトを作り始めて1年になりました。

WordPress初心者で、毎日「?」の繰り返しでした。

そんな私も、気がつくと・・・投稿記事が100を超え、「新しい記事へ」「古い記事へ」ではページの推移もちょっと大変になってきました。

そこでページナビゲーションを分りやすく表示させてくれる、Wordpressプラグイン「WP-PageNavi」を導入してみようと思います。

【追記】
「Wp Pagenavi Style」というプラグインを合せて使うと、よりキレイにページナビゲーションを表示出来る事を教えて頂いたので、こちらも試してみました♪

導入方法

プラグインの「新規追加」で「WP-PageNavi」を検索して有効化します。

ダッシュボードの「設定」→「PageNavi」で設定をします。(そのままでも表示出来ます!)

WP-PageNaviの設定画面

表示させたい部分に以下を記述します。(テーマによって違いがあると思います。私の場合「index.php」に記述しました。)

<?php wp_pagenavi(); ?>

見た目が気になる場合はcssで整えます♪

導入イメージ

導入前の私の表示。(一部のページでは、このままで表示しています。)

WP-PageNavi導入前のイメージ

導入後の表示。
WP-PageNavi導入後のイメージ

「今見ているページ」が何ページ目で、あとどの位ページがあるのかが分りやすくなりました!

(追記)「Wp Pagenavi Style」も導入♪

「WP-PageNavi」が有効化されている状態で、「Wp Pagenavi Style」をプラグインの「新規追加」で「WP-PageNavi」を検索して有効化します。

ダッシュボードの「設定」→「PageNavi Style」で設定をします。ここでお好みのデザインを設定する事で、よりキレイなページナビゲーションが表示されます。

Wp-Pagenavi-Styleを導入したイメージ

Tsuruta Kotaroさん、教えてくださってありがとうございます♪

-Webの記録
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

関連記事

no image

WordPress 子テーマを作ってみた。

この記事は約 1 分で読めます。 WordPressで公開されているテーマを自分なりにカスタマイズしたいとき、2通りの方法があると思います。 1つ目は直接テーマをいじる方法。2つ目は、「子テーマ」を作 …

no image

WordPressプラグイン「Simple Map」でスマホ対応GoogleMapを簡単設置。

この記事は約 1 分で読めます。 GoogleMapは、いろいろとお世話になっています。ただスマホで時々面倒だと思うのが、スクロールしていてGoogleMapに何気に指が触れてしまった時。 画面の横幅 …

no image

WordPressテンプレートタグをメモ【コンテンツ編】

この記事は約 1 分で読めます。WordPressにはたくさんのテンプレートタグがあります。 似たようなものや、同じ結果なのに記述の仕方が何通りもあったりするので、後で「何だっけ?」って思う事もしばし …

no image

WordPress ローカル環境で作ったサイトの記事を簡単に本番サイトへ移す方法

この記事は約 2 分で読めます。 WordPressでサイト制作をする時。 XAMPPやMANPなどローカル環境で作ったサイトの記事を簡単に本番サイトへ移す方法をメモします。 ※Wordpressは既 …

no image

WordPressテスト環境をXAMPPで作ってみた♪ for Windows

この記事は約 2 分で読めます。 WordPressのテーマ作りなどをする時、いきなり本番サイトでは試せないので、テスト環境をWindowsのパソコンに作りました。 「XAMPP for Window …