WordPressプラグイン

【賢威７】WP Page naviでページャーを表示させる方法＆使い方を分かりやすく解説！

  /

WordPressブログサイトの下にあるページ送り機能、ページャー。

例えばブログサイト内の記事数が多くなってきた時に、「次のページ」を１回１回クリックするのは面倒ですが、ページャーを設置して一気に移動させることが出来れば、読者さんにも分かりやすいですよね。サイト回遊率も上がりますし、ユーザビリティ向上にもつながります。

今回はWordPressブログサイト記事下に、専用プラグイン「WP−Page-Navi」を使ってページナビゲーションを表示させる方法を紹介していきます。

ページャーとは？SEOやサイト滞在時間のメリットは？

ブログサイトのページャーとは、例えばこのようなページ送りのことです。

もしあなたが作成中のブログ記事がまだ数記事〜数十記事の場合は「わざわざこんなページ送り作らなくても、、、」と思うかもしれませんが、ブログ記事というのは1日1記事のペースで更新していくとあっという間に数百記事を超えます。

例えばそうなった時に、あなたのサイトの常連読者さんが「一番最初に書いていた記事をもう１回読みたい」と思った時に、１回１回「次のページ」ボタンを押さなくてはいけない状態だと、読者さんに手間をかけてしまう所か離脱されてしまう可能性がありますよね。

そんな時、ページャーがあれば一気にいきたいページ数までジャンプすることが可能になりますし、サイト滞在時間が長くなるとSEOも強くなりますので、是非参考にされてみてください。

賢威７でWP-Page-Naviを設定する方法を分かりやすく解説！

まずはダッシュボードから専用プラグイン「WP-PageNavi」をインストール＆有効化します。

 参考記事：WordPressにプラグインをインストール＆有効化する方法

 

「外観」→「テーマの編集」で「functions.php」をクリックします。

 

コードが出てきたら、HTMLコードを編集するので、必ず事前にバックアップを取っておきましょう！

特にfunctions.phpは編集をかけるとサイトが真っ白になってしまった、というケースがよくありますので、必ず子テーマから編集を行っていきましょう。

参考：子テーマのダウンロード方法＆使い方
参考：WordPressテーマ編集でサイトが真っ白に！FTPでもエラーが戻らない時の対処方法

 

バックアップが終わったら、コード編集をしていきます。

ctrl＋Fで検索バーを開き、「ページャーを表示する」と入力して検索をかけます。

 

すると一箇所ヒットすると思いますので、こちらの項目を丸々削除します。

 

削除した部分に、こちらのコードをまるっと貼り付けます。

//---------------------------------------------------------------------------
//  ページャーを表示する
//---------------------------------------------------------------------------
function pager_keni() {
 
    $pager = "";
 
    global $wp_query;
    $max_page = $wp_query->max_num_pages;
    $now_page = get_query_var('paged');
    if ($now_page == 0) {
        $now_page =1;
    }
//  if ($max_page > $now_page) {
//      $pager .= "<li class=\"nav-prev\">". get_next_posts_link('以前の記事へ') ."</li>\n";
//  }
 
//  if (is_paged()) {
//      $pager .= "<li class=\"nav-next\">". get_previous_posts_link('新しい記事へ')."</li>\n";
//  }
 
//  if ($pager != "") {
//      echo "<div class=\"cont-menu-wp\">\n<ul>\n".$pager."</ul>\n</div>\n";
//  }
    echo "<div class=\"cont-menu-wp\">";
    wp_pagenavi();
    echo "</div>"; 
}&lt;/pre&gt;</pre>

 

ファイル更新ボタンを押す前に、必ず正しいコードが貼り付けられているかしっかり確認しましょう！

確認できたらファイル更新ボタンを押します。

すると、ブログサイトの下部分にページャーが追加されているはずです。

賢威７でWP-Page-Naviのデザインをカスタマイズする方法は？カスタムCSSで簡単に変更可能！

ブログサイトに表示されるデフォルトのデザインのままでも十分おしゃれだけど、やっぱり自分でボタンデザインをカスタマイズしたい！という場合は、カスタムCSSを使えば簡単に変更が可能です。

やり方は、カスタムCSSに自分の気に入ったデザインのCSSコードを貼り付けるだけ。

参考記事：カスタムCSSの使い方！テーマ編集をしないでCSSを簡単に変更する方法

ちなみに私はこちらのサイトを参考にしました＾＾

参考サイト：Tani webさんのページ

他にも、「設定」→「WP-Page-Navi」から、表示するページや省略ページなども好きな様にカスタマイズ可能です。いろいろ試しながら自分の好みとサイトの状態とあわせて試してみてくださいね。

RELATED POST