賢威7のページネーションを数字(番号付き)表示するプラグインWP-PageNaviの設定方法

どうも。葉です。

あなたは、賢威7のページネーションを編集していますか?

デフォルトのままでも大きな問題はないのですが、過去記事へのアクセスしやすさを考えると、番号付きでアクセスできたほうが訪問者にとって便利ですよね。

そこで、この記事では、賢威7の「記事一覧ページ」や「カテゴリーページ」などで、ページネーションを数字で表示するプラグイン「WP-PageNavi」の設定方法について解説していきます。

プラグインWP-PageNavi導入でページネーションがどのように変化するのか?

まずは、プラグイン「WP-PageNavi」を導入することで、ページネーションがどのように変化するのかを確認してみましょう!

賢威7のデフォルトのページネーションは、下図のように「新しい記事」「以前の記事」とだけ表示されていて少しさみしいです。

賢威7デフォルトのページネーション

ところが、プラグイン「WP-PageNavi」を導入すると、ページネーションが次のように数字で表示されるようになります。

WP-PageNaviのページネーション

このように、ページネーションを番号付きで表示すると、過去の記事へも簡単にアクセスできるようになり、便利です。また、Googleのクローラにとってもクロールしやすい構造となります。

もし、あなたが番号付きのページネーションを気に入ったのであれば、今ここで導入してしまいましょう。

プラグインWP-PageNaviのインストール手順

では、実際にプラグイン「WP-PageNavi」をインストールしていきます。

まず、WordPressの管理画面左メニューより、「プラグイン→新規追加」をクリックします。

プラグインWP-PageNaviのインストール手順1

次に、プラグインの検索窓に「WP-PageNavi」と入力します。すると、WordPressが、プラグインを検索してくれます。検索結果に「WP-PageNavi」と表示されるので、「今すぐインストール」をクリックします。

プラグインWP-PageNaviのインストール手順2

すると、プラグインのインストールが始まります。インストールが完了したら「有効化」をクリックします。

プラグインWP-PageNaviのインストール手順3

これで、プラグイン「WP-PageNavi」のインストール・有効化は完了です。最後に、「インストール済みのプラグイン」よりプラグイン「WP-PageNavi」の背景がうっすらと青色になっているかを確認します。

プラグインWP-PageNaviのインストール手順4

賢威7のphpコードを編集して、ページネーションを変更

プラグイン「WP-PageNavi」は、残念ながら、インストールしただけでページネーションを数字で表示できるわけではありません。

コードの変更が必要になります。具体的には、賢威7のデフォルトのページネーションを表示OFFにして、プラグイン「WP-PageNavi」のページネーションを表示させなければなりません。

そのコードの編集手順を解説していきます。

まず、WordPressの管理画面左メニューより「外観→テーマの編集」をクリックします。

プラグインWP-PageNaviの設定手順1

次に「テーマのための関数(functions.php)」をクリックして開きます。

プラグインWP-PageNaviの設定手順2

すると、「functions.php」のコードが表示されるので、そこで、「ページャーを表示する」とう項目の中の次のコードの部分をコメントアウト(OFF)します。

コメントアウトとは、記述されている内容をなかったコトにするという意味です。コードの先頭に「//」をつけることでできます。

プラグインWP-PageNaviの設定手順3

先程コメントアウトした部分のすぐ下に、次のWP-PageNaviのページネーションを表示するコードを書いてし「ファイルを更新」をクリックします。

if(function_exists('wp_pagenavi')) { wp_pagenavi(); }

プラグインWP-PageNaviの設定手順4

この状態で、WordPressのトップページにの最下部を確認すると、次のようにページネーションが番号付きで表示されています。

WP-PageNaviのページネーション

これで、プラグイン「WP-PageNavi」による番号付きのページネーションが表示されました。

スマホでの表示崩れに対応

しかし、プラグイン「WP-PageNavi」には、1つ問題点があり、次のようにスマホで表示した際にページネーションの表示が崩れてしまいます。

WP-PageNaviをスマホに対応させる手順1

そこで、「base.css」を編集して、デザインの修正を行います。

まず、WordPress管理画面の左メニューより「外観→テーマの編集」をクリックします。

WP-PageNaviをスマホに対応させる手順2

次に、「base.css」をクリックします。

WP-PageNaviをスマホに対応させる手順3

開いた「base.css」の最下部に次のコードを貼り付け、「ファイルを更新」をクリックします。

/*●wp-pagenaviスマホ対応*/
.wp-pagenavi {
width: 100%;
}
.wp-pagenavi a, .wp-pagenavi span {
display: inline-block;
}

WP-PageNaviをスマホに対応させる手順4

すると次のようにスマホでもページネーションの表示が崩れません。

WP-PageNaviをスマホに対応させる手順5

これで、プラグイン「WP-PageNavi」の基本的な使い方の解説は、完了です。

ページネーションのデザインを編集

次に表示させたページネーションのデザインを変更する方法もお話しておきます。ここでは、

  • プラグイン「WP-PageNavi Style」を使う方法
  • 「cssコード」を自分で編集する方法

の2つを紹介していきます。コードについて詳しくない方は、プラグインを使い方法を選ぶと簡単ですよ。

方法1:プラグイン「WP-PageNavi Style」で編集

WP-PageNavi Style

ここからさらに、ページネーションを編集したい場合は、プラグイン「WP-PageNavi Style」を使用することで、テンプレートデザインの中から、ページネーションのデザインを選択できます。

まずは、プラグイン「WP-PageNavi Style」をインストール・有効化します。

すると、WordPress管理画面の左メニュー内に「PageNavi Style」という項目が出現するのでそれをクリックします。

プラグイン「WP-PageNavi Style」の設定方法1

次に表示された画面で「Select Style Form Our Collection:」の項目より、ページネーションのデザインを編集することができます。

プラグイン「WP-PageNavi Style」の設定方法2

「Black」だと次のようなデザインになりました。

プラグイン「WP-PageNavi Style」の設定方法3

いろいろ試してお好みのデザインを選択してくださいね。

方法2:「CSS」コードを自分で編集する

次に、自分で、「CSS」を編集してデザインを変更する方法を紹介します。こちらは、CSSの知識がない人にはおすすめしません。

まず、WordPress管理画面の左メニューより「設定→PageNavi」をクリックします。

プラグインWP-PageNaviのデザイン編集1

「pagenavi-css.cssを使用」の「いいえ」を選択肢、「変更を保存」をクリックします。

プラグインWP-PageNaviのデザイン編集2

次に、WordPress管理画面の左メニューより「外観→テーマの編集」をクリックします。

プラグインWP-PageNaviの設定手順1

「base.css」をクリックします。

プラグインWP-PageNaviのデザイン編集3

「base.css」内に、ページネーションを編集するコードを書き込めばデザインの変更ができます。

デザイン変更用のコードは、こちらのサイトでたくさん紹介されています。参考にさせていただきましょう。

Wp-PageNavi デザイン変更 CSS 一覧 – Taniweb制作

まとめ

この記事では、

  • プラグインWP-PageNaviのインストール手順
  • 賢威7にWP-PageNaviのページネーションを表示させる手順
  • ページネーションのデザインを変更する方法

について丁寧に解説しました。

ページネーションは、人によっては、プラグイン無しで自分で変えてしまう人もいますが、プログラムの知識がない人にとっては、少しハードルが高いです。

しかし、プラグイン「WP-PageNavi」であれば、簡単に数字で表示されたページネーションを作れるのでほんとに助かります。

ページネーションを変更し、過去記事を見つけやすいブログに変身させましょう(^^)

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします