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

スマホ用サイトに「LINEで送る」ボタンを設置してみる

この記事は約 1 分で読めます。 スマホ向けに情報を発信しているサイトなど、あると便利なシェアボタン。 いつの間にかに「LINEで送る」ボタンが出来ていたのですね。 ひとまず自分用に記述方法を2種類メ …

no image

Chromeの拡張機能FireBugとSnifferを入れてみた♪

この記事は約 1 分で読めます。Webサイト作っている時、大活躍しているのがFirefoxの「FireBug」です。 私が確認しているブラウザは、IE,Firefox,Safari,Chromeですが …

no image

XAMPP(Bitnami)で簡単にWordPressローカル環境を構築してみた。(for Windows)

この記事は約 1 分で読めます。 以前、「WordPressテスト環境をXAMPPで作ってみた♪ for Windows」でWindowsにXAMMPでローカル環境を作ってWordPressを入れてみ …

no image

軽量で簡単に設置出来るjQueryスライダー「FlexSlider」。

この記事は約 1 分で読めます。 今までいくつかのjQueryスライダーライブラリを利用しました。今回も軽量で簡単に設置が出来る「FlexSlider」を見つけたので、早速メモです。 スマートフォンで …

no image

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

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