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

Photoshop で入力したテキストの「縦書き」「横書き」を変更する方法

この記事は約 1 分で読めます。 Photoshopを使うようになってもう何年も経つのに、意外と知らずに無駄な事をしていたり・・・が多かったりします。。。 効率よく作業するには、やっぱり便利な方法は活 …

no image

WordPress 「この記事は●分で読めます」をプラグインなしで表示させたい時

この記事は約 1 分で読めます。 よく他の方のブログで記事の冒頭に「この記事は●分で読めます」という表示がされているのを見かけます。 これがあると、その記事を読むかブックマークするかを判断出来て便利だ …

no image

サイトのどこを見られているかを可視化出来る「User Heat」を試してみた♪

この記事は約 1 分で読めます。 「GoogleAnalytics」など様々なアクセス解析ツールがあります。 その中でとても興味深く、これからサイトを制作するのに役立ちそうな「User Heat」とい …

no image

レスポンシブサイト制作にチャレンジ。

この記事は約 1 分で読めます。最近、気になっているのが「レスポンシブWebサイト」。 1つのHTMLで、スマートフォンやタブレットなど小さな画面とパソコンなどの大きな画面で見た場合と見た目を切り替え …

no image

WordPressのコメント欄にオリジナルアバター画像を表示させてみた♪

この記事は約 1 分で読めます。 WordPressで投稿されたコメント欄で、よくデフォルトの「ミステリーマン」を見掛けます。 何となくそのままでは面白くないので、今回はオリジナルアバターを作って表示 …