WordPressプラグイン

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

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

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

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

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

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

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

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

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

賢威7で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>"; 
}</pre>

 

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

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

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

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

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

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

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

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

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

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

〜PC1台で”生き方”を”働き方"へ〜
ABOUT ME
MAI
MAI
webマーケター・コンサルタント 某マンモス出版社勤務後、フリーのダンサー・ヨガインストラクターとして独立するも「好きな仕事」の現実に直面しゼロから起業。 ブログ収入は累計350万円突破。▶︎さらに詳しいプロフィール ▶︎ブログ起業入門講座