ページネ―ションの設定方法【賢威6.2】

lisakara / Pixabay

lisakara / Pixabay

以前、使用していたテンプレートでは

ページネ―ション(ページャー)が

初めから表示されていました。

 

ところが賢威では、トップページの一番下に

「以前の記事へ」という表示しかなく

全体でどのくらい記事数があるのか分かりませんでした。

 

仕方なくカテゴリの項目の横に数を表示していました^^

 

それに以前の記事を見たい場合は

「以前の記事へ」を何度もクリックして

少々使い勝手が悪いと感じていました。

 

やはり番号があった方が見栄えもいいですし

前から気にはなっていたのです。

 

 

訪問者に少しでも多く記事を読んで頂きたいのは当然ですが

使いやすさ(ユーザビリティ)の向上や巡回率も

上げたいですよね。

 

ちょっとしたことですが

こういった工夫をする事も重要だと考えています。

 

 

ということで

おススメのWordPressプラグイン【WP-PageNavi】を

ご紹介致します。

 

 

WP-PageNavi

このプラグインを使用すれば

簡単にページネ―ション(ページャー)を設置できます。

 

インストール方法

WordPress管理画面 ⇒ プラグイン → 新規追加 ⇒

【WP-PageNavi】で検索

 

wp-PageNavi01

「今すぐインストール」をクリックしてください。

 

 

wp-PageNavi02

「プラグインを有効化」をクリックしてください。

 

 

(functions.php)を編集

【WP-PageNavi】は、有効化しただけでは使用できません。

ページネ―ションを表示するために

PHPのコードを編集する必要があります。

 

 

wp-PageNavi03

WordPress管理画面 ⇒ 外観 ⇒ テーマ編集

 

 

wp-PageNavi04

右のメニューに【テーマのための関数(functions.php)】を

クリックしてください。

 

wp-PageNavi07

この部分を探して下さい。下の方です。

「ページャーを表示する」の下のコードを

コピペして頂ければOKです。

 

コードは、PDFにしました。

 

 

※非常に繊細な部分ですので

必ずバックアップを取って下さい。

 

貼り付けたら「ファイルを更新」をクリックで終了です。

するとこのようになります。

 

wp-PageNavi08

 

ご覧のように

ページネ―ションがフッターと近すぎますね。

その様な場合は下記のコードを追加して頂ければ

ご自分の好きな間隔に調整することができます。

 

WordPress管理画面 ⇒ 外観 ⇒ テーマ編集

右メニューの「design.css」をクリックします。

 

wp-PageNavi09

この部分を探して頂きます。

margin-bottom: 1.5em;

赤枠に上記のコードを追加することでお好きな間隔に

調整できます。

 

wp-PageNavi10

先程の画像と比べると少し間隔が広がったのが分かりますね。

margin-bottom: 2.5em;

私の場合、2.5に変更してみました。

 

WP-PageNaviの設定の変更

デフォルトのままでも支障はございませんが

文字や記号を変更できますので

私の場合は、英語表記にしたいと思います^^

wp-PageNavi13

こんな感じです。

 

設定方法

WordPress管理画面 ⇒ 設定 ⇒ PageNavi

 

wp-PageNavi14

赤字のように変更して下さればOKです。

 

wp-PageNavi15

pagenavi-css.css を使用
CSS をカスタマイズする場合はチェックをはずして下さい。

 

Page Navigation スタイル
通常のページナビにするかプルダウンのページナビにするか

です。通常でいいと思います。

 

常にページナビゲーションを表示
1ページで終わるときでもページナビを表示するかどうかです。

 

表示するページ数
ページが多くて省略されるときでも表示される

ページの数です。

3にするとこんな表示になります。(赤字のところが3つ
Page 1 of 100 1 2 3 … 10 20 30 … Next › Last »
5にするとこんな表示になります。(赤字のところが5つ
Page 1 of 100 1 2 3 4 5 … 10 20 30 … Next › Last »

 

省略表示するページ数
1にするとこんな表示になります。(赤字のところが1つ
Page 1 of 100 1 2 3 4 5 … 10 … Next › Last »
3にするとこんな表示になります。(赤字のところが3つ
Page 1 of 100 1 2 3 4 5 … 10 20 30 … Next › Last »

赤字の部分、省略文字の間に表示されるページの数です。

 

省略ページを以下の倍数で表示
10にすると、赤字の箇所のように10の倍数です。
Page 1 of 100 1 2 3 4 5 … 10 20 30 … Next › Last »

5にすると、5の倍数です。
Page 1 of 100 1 2 3 4 5 … 10 15 20 … Next › Last »

 

geralt / Pixabay

それでは続いて

もう少しデザインを変更したいと思います。

 

WP Pagenavi Style

このプラグインを使用することで

かなりオシャレなデザインにすることができます。

 

インストール方法は、先程と同じです。

WordPress管理画面 ⇒ プラグイン → 新規追加 ⇒

WP Pagenavi Style】で検索

インストールし有効化してご利用ください。

 

 

wp-PageNavi11

有効化して頂くと管理画面に赤枠のように

「PageNavi Style」と表示されますので

そちらをクリックしてください。

 

ご自分のお好きなデザインを選ぶだけですので

安心してご使用いただけます。

 

もちろん細かく設定して頂けますが

デザインの種類は、全部で34種類ありますので

この中から選択して頂くことで十分でしょう。

 

色々と試してくださいね^^

 

wp-PageNavi12

「Select Style From Our Collection 」の

プルダウンメニューを選択すると、

プレビューにデザインが表示されます。

 

ページナビを表示する位置「左・中央・右」も選べます。

選び終えたら「Save Settings」をクリックして完了です。

 

また「 Select StyleSheet 」の「Custom」を選択すると

ページナビをカスタマイズすることも可能です。

 

 

レスポンシブ表示の設定

『WP-PageNavi』では、ページ数が多いと表示が崩れます。

 

なのでレスポンシブデザイン用のコードを

追加しなければなりません。

 

WordPress管理画面 ⇒ 外観 ⇒ テーマ編集

右メニューの「design.css」をクリックします。

 

wp-PageNavi03

 

wp-PageNavi16

先程のフッターとの間隔を空けるときに追加したコードの下に

レスポンシブ用のコードを追加してください。

 

こちらのコードを貼り付けてください。

/*●ページネーション レスポンシブルデザイン用*/
#main-contents .cont-menu-wp a,
#main-contents .cont-menu-wp span {
display: inline-block;
margin-bottom: 0.5em;
}

wp-PageNavi17

赤枠の部分です。

問題がなければ「ファイルを更新」をクリックで完了です。

 

 

ページネ―ションを利用し、ページ数を明確にすることにより

ユーザビリティの向上にも繋がりますのでこの機会にどうぞ!

 

最後にもう一度

※非常に繊細な部分ですので

必ずバックアップを取って下さい。

 

最後までありがとうございました。

 

ヒロ

14 Responses to “ページネ―ションの設定方法【賢威6.2】”

  1. ひーちゃん より:

    ヒロさん、こんにちは。

    いつもお世話になっています。

    コメント、ありがとうございました。

    とても、勇気付られました。

    これからも宜しくお願いいたします。

    • ヒロ ヒロ より:

      ひーちゃんさん、こんばんは!
      いつもお世話になっております。
      コメントありがとうございます^^

      >とても、勇気付られました。

      良かったです^^
      それにしても桜綺麗ですよw
      北海道はこれからですね^^

      またお越し下さいね。

      こちらこそよろしくお願い致します。

  2. キムラ より:

    ヒロさん、こんばんは。
    キムラです。

    いつもお世話になっています。

    ページネーションっていうんですね。
    たまに見かけますが
    プラグインでできるとは・・・
    興味深かったです。

    あまり多くのプラグインは入れたくないのですが
    滞在率など成果があれば知りたいです。

    応援ポチです。

    • ヒロ ヒロ より:

      キムラさん、こんばんは!
      いつもお世話になっております。

      コメントありがとうございます^^

      >あまり多くのプラグインは入れたくないのですが

      おっしゃる通りでプラグインの入れ過ぎには
      注意されたほうがいいですね。

      正直、自己満足の世界です^^

      訪問者様が少しでも使いやすく便利であれば
      いいと考えていますので
      このプラグインでの成果は望んでいません。

      またお越し下さいね。
      応援ありがとうございます。

  3. まわりみち より:

    ヒロさん、こんばんは!

    WPは無料ながらホントにいろいろな機能を
    内蔵していたり、他からもインストールでき
    たりすごいですよね。

    皆さんが記事にして下さるお蔭でどんどん
    新しいことができるようになります。(笑)

    ありがとうございました。

    応援完(^^)ノ

    • ヒロ ヒロ より:

      まわりみちさん、こんばんは!
      いつもお世話になっております。
      コメントありがとうございます^^

      少しでもお役に立てるような記事にしたくて
      頑張っています。

      お役に立てたのなら光栄です。

      またお越しくださいね^^
      応援ありがとうございます。

  4. Toshikinuyo より:

    ヒロ様 おはようございます。

    ブログへの訪問有難うこざいました。

    このプラグインは私も入れて使っています。

    本当はページ毎に入るようにしたかったのですが 設定の仕方が判らずに
    今は5ページ毎に表示されるようです。

    カテゴリー分けをちゃんとすれば
    もう少し見やすいブログにできると思いますがその面倒さをページナビで誤魔化そうとしたところがあります。

    横着はいけませんね。

    今後とも宜しくお願いします。

    Toshikinuyo

  5. ヒロ ヒロ より:

    Toshikinuyoさん、おはようございます!
    いつもお世話になっております。
    コメントありがとうございます^^

    私も今になってカテゴリなど
    訪問者にとって見やすいブログにするために
    整理しているところです^^

    お互い頑張りましょうねw
    またお越し下さい。

    これからもよろしくお願い致します。

  6. めいこ より:

    ヒロさん、こんにちは。

    私もこの数字表記のやつがやりたいなぁと
    思っていたので助かります!

    ページネーションっていうのですね。

    ページ数があるほうがブログにきた人も
    どこらへんから読もうか検討も付けやすいと思います。

    役立つ情報を教えてくれてありがとうございます。
    応援完了です。
    またきます

    • ヒロ ヒロ より:

      めいこさん、こんにちは!
      いつもお世話になっております。
      コメントありがとうございます^^

      >私もこの数字表記のやつがやりたいなぁと
      思っていたので助かります!

      そう言って頂けると嬉しいです!
      タイミングが合って良かったです^^

      またお越しくださいね^^
      応援ありがとうございます!

  7. 加南 より:

    ヒロさん、

    こんにちは。
    加南です。

    ブログにお越しいただき、
    コメントありがとうございました。

    「ページネ―ション」の設置、
    とても勉強になりました。

    そして、ブログに訪問してくださる人への
    ユーザビリティを
    常に考えられているところに、

    ネットビジネスのあり方というものを
    感じました。
    ビジネスは思いやりの心が大切ですね。

    応援完了です。

    加南

    • ヒロ ヒロ より:

      加南さん、こんにちは!
      いつもお世話になっております。
      コメントありがとうございます^^

      加南さんのブログには
      必要ありませんでしたね。

      以前、私も同じテンプレートを使用していたもので^^

      ネットビジネスに限らず思いやりは
      大切ですね。

      加南さんのコメントにも思いやりを感じます。

      またお越しくださいね^^
      応援ありがとうございます!

  8. ヒロさん

    こんばんは。きりんです^ ^
    いつもお世話になっていますm(_ _)m

    今回のヒロさんの記事、
    非常に参考になりました。

    私も「以前の記事へ」しかないので、
    ずっとクリックするしかなく
    不便を感じていました。

    これさえあれば読者さんも
    あっちこっち自由に読んで
    行くことができるので便利ですよね^ ^

    このような役立つ情報を
    教えていただき感謝です!
    早速私もセットしようと思います^ ^

    応援完了しました!
    またおじゃましますね^ ^

    トーストきりん

    • ヒロ ヒロ より:

      きりんさん、こんにちは!
      いつもお世話になっております。
      コメントありがとうございます^^

      実は私も不便に感じていたのですが
      今になりました^^

      見た目もいいですし
      やっぱり便利ですよね^^
      おススメですw

      またお越しくださいね^^
      応援ありがとうございます!

コメントを残す

サブコンテンツ

ヒロのプロフィール!



2016年9月
サクセスアフィリ塾リーダー

大阪生まれ大阪育ちの会社員アフィリエイターです!

このブログでは、会社員をしながらアフィリエイトで安定して稼ぐ方法を解説しています!

詳しいプロフィールは
こちらからどうぞ!

タグクラウド

このページの先頭へ