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

コピペで簡単にできるレスポンシブ対応GoogleMapの設置方法

この記事は約 1 分で読めます。 ショップなどのサイトだと、地図は必須ツール。GoogleMapを利用する機会が多いです。 今回、スマホ対応サイトでGoogleMapを設置する機会がありました。 細か …

no image

無料で簡単!アイコンフォント「Font Awesome」を使ってみた

この記事は約 1 分で読めます。 先日SNSアイコンをつけた時に、アイコンフォント「Font Awesome」を使用しました。 無料で、初めてでも簡単に使えるアイコンフォント「Font Awesome …

no image

WordPress カテゴリごとに部分的デザインを変えたい時

この記事は約 1 分で読めます。 WordPressで自分なりにテーマをカスタマイズしていると、カテゴリごとにデザインを変えたい!ということがあります。 ページまるごとデザイン(表示)を変える場合と、 …

no image

パソコンでスマホやタブレットの表示を確認出来るGoogle Choromeデベロッパーツール

この記事は約 1 分で読めます。Webサイトを制作する時、コーディングしながら都度いろんなブラウザで表示確認をします。 レスポンシブサイトとなると、今まで以上に表示をいろいろ確認しながら・・・の作業に …

no image

slideshow.jsを使って画像のスライドショーにチャレンジ。 

この記事は約 1 分で読めます。画像数枚のスライドショーをjQueryのライブラリを使って作ってみたいと思います。 たくさん方法があると思うので、いくつか試してみるつもりです。 まず今回は、「slid …