WEBマーケティングのトータルサポートならディーエムソリューションズ株式会社
0120-934-226受付時間 平日9:00~18:00

ページネーションをWordPressで実装するポイント

このエントリーをはてなブックマークに追加

皆さんは「ページネーション」という言葉を耳にしたことがあるでしょうか? Webマーケティングに携わる方だけでなく、WebやIT分野に携わったことがある方ならば、一度は見聞きしたことがあるかもしれません。

「ページネーション」とは、一言でいうとWebページにおける「ページ分割」のこと。文字数が多く、ユーザーのスクロール負担が大きくなるようなページで設定されることの多い機能です。

記事では、そんな「ページネーション」の概要や必要性、設定するうえでのポイントやWordPressで設定する方法についてまとめてお伝えします。「ページネーション」に関わる全体の概要を知りたい方は是非続きをご覧ください。

ページネーションとは

ページネーションとは、Webサイトにおける「ページ分割機能」のことです。特に、記事を取り扱うWebメディアなど読み物のページで設定されます。Webサイトを人気CMS「WordPress」で構築している場合はプラグインで簡易に、自ら実装する場合もテンプレートコードのコピペで設定できるのが特徴です。

実装するポイント

イメージが掴めないという方は、上記画像がページネーションのイメージです。一つ目の画像は、よくあるWebメディアのページネーション。全部の記事を一覧にすると長くなってしまうので、指定した記事数でページが分割されます。二つ目の画像は、皆さんにも馴染み深いであろうGoogleのページネーションです。このように、実際にご覧いただくとご理解いただきやすいかと思います。

ページネーションの概要についてご説明しましたが、ではページネーションはどんな理由から必要となるのでしょうか。次に「ページネーションの必要性」についてご説明したいと思います。

ページネーションの必要性は、大きくユーザビリティとSEO効果の2点から考えることができます。なお、ユーザビリティとは平たく「ユーザーの使いやすさ」と理解してください。

まず前者のユーザビリティの観点から。これは、ここまで記事を読まれた方であれば大方予想がつくのではないでしょうか。ユーザビリティから考えると「1ページの読み込み速度」と「読了の負担」が関係します。

Webページは読み込みたいページのデータ量が多ければ多いほど、ページの表示が完了するまでの表示時間は遅くなります。Google検索画面のページネーションを設定することができますので、試しに「設定」→「検索の設定」の「ページあたりの表示件数」を100にしてみてください。

ページあたりの表示件数

すでに、調整箇所に「速い」「遅い」と表記されていますが、実際に100にして何かGoogle検索してみると、その表示速度が遅くなることがわかるでしょう。(Googleのデフォルトページあたりの表示件数は10件)

ユーザビリティの2つ目の観点は「読了の負担」。ユーザーの個人差はもちろんありますが、一般的に1ページが5,000文字を越えると、ユーザーは一読するのに負担を感じるといわれています。

昨今人気のメディアプラットフォーム「note」など、ページネーションの機能を持たないWebページやメディアも存在しますが、ページネーション機能を持たせる持たせないは、Webサイトやメディアの運営方針との折り合いによって方針は変わります。メディアの広告収益がある場合は、PV数を多くした方が広告収益が高くなることもあるので、戦略次第となります。
ただし、1ページあたりの情報量を減らし、ページネーション設定をすることでユーザビリティの向上が期待できるのも一つの効果があることは念頭に入れておきましょう。

ページネーションとSEOの関係

ページネーションで記事を分割する場合、従来のGoogleSEO対策では、タグにrel=prevとrel=nextを設定するのがSEOのベストプラクティスでした。ただし、以下のようにGoogleはrel=prev/nextのサポートを終了しました。

そのため、今はrel=prev/nextが不要です。ただし、Bingはrel=prev/nextのサポートを継続しているので、rel=prev/nextの設定を対応するかどうかは検討が必要です。

rel=prev/nextの代わりとなるベストプラクティスの発表はGoogleから現時点でありません。しかしページネーションをする場合は、以下に注意しながらページが分割されていることを分かりやすくしてあげましょう。

  • 分割されたページ番号をアンカーテキストに含める
  • 前後のページのリンクを設置する
  • タイトル・見出しに○○ページ目と入れる

また、ページネーションによって分割されたページは、しっかりとクロールできることが必要です。各分割ページにno indexやno followの設定を避け、表示されているページのURL自身にcanonicalを設定するようにしましょう。

ページネーションのポイント

ページネーションがユーザビリティの観点、そしてSEO観点から必要性のある設定であることをお伝えしてきました。では、実際にページネーションの設定を行う際、なにかポイントはあるのでしょうか。次はページネーションのポイントについて解説いたします。

適度にページを分割

ページネーションで一番意識していただきたいのが「適度にページを分割する」ということ。先ほどもご説明したように、「ページネーションを設定すればSEO効果が高まる」「ページネーションを設定することでPV数を効率的に稼ぐことができる」という考えから、過度に設定されているWebサイトをたまに散見します。

しかし、あくまでも一番に向き合うのは「ユーザー」。その次に「SEO効果」という順であるべき。1ページの情報量(一般的には文字数)がどれくらいに達すればページネーションするべきか、は各Webサイトの運営方針によっても違ってきます。

ですから統一された基準はありませんが、おおよそ1ページの文字数が3,000〜5,000文字に達するのであれば、ページネーションをするべきと考えるべきでしょう。

現在の閲覧ページが分かるようにする

二つ目のポイントは「現在の閲覧ページが分かるようにする」ということ。これは、普段からWebサイトを閲覧する機会の多い方なら、当然のようにご存知であろうUI(ユーザーインターフェイス)面のポイントです。

現在の閲覧ページが分かるようにする

具体的にどういうことかというと、上の画像をご覧いただければすぐ分かると思います。上の画像では、「2ページ目」を表す「2」を囲う四角が黒色で表示されています。このように、ページネーションでは現在閲覧しているページが何ページ目であるかをページ番号のデザインを変えることで、ユーザーに伝えるのが通例です。

このデザインの機能は、後ほど説明するWordPressでページネーションを設定する場合はデフォルト(標準)で搭載されていることが多く、自らコーディングする際もそう複雑な記述は必要ありません。

前後のページへのリンクを設置する

三つ目のポイントは「前後のページへのリンクを設置する」ということ。こちらも先ほどの「現在の閲覧ページが分かるようにする」と同じく、Webサイトの利用機会の多い方であれば、想像に難くないポイントです。

前後のページへのリンクを設置

具体的には、上の画像にあるページネーションの「前へ」「次へ」のボタンをクリックすることで、現在閲覧しているページ前後のページへ移動できる設定のことを指します。

当然ではありますが、ページネーションは本でいう「ページをめくる機能」のようなものですので、前後のページはもちろん、指定するページへ移動できないとそもそもページネーションとしてユーザビリティの視点から基準を満たしていません。(指定したページへの移動は、各ページ番号をクリックすることで移動できます)

なお、こちらも後ほどご説明しますが、WordPressで設定する場合も自らコーディングする場合も設定の作業は難しくはありません。

ページネーションを設置する方法

最後に、Webサイトで実際にページネーションを設置する方法について解説したいと思います。ここでは、国内外問わず人気のCMSツール「WordPress」をベースに、WordPressのプラグインを利用したケース、プラグインに頼らず実装するケースの2つの方法別にお伝えいたします。

プラグインを利用する場合

WordPressでページネーションを設定するプラグインには、メジャーなもので「WP-PageNavi」「WP-Paginate」「WP Page Numbers」の3つがあります。そのなかから、記事ではもっとも親しまれている「WP-PageNavi」のプラグインの導入手順についてご説明します。

「WP-PageNavi」はWordPressの管理画面 > 「プラグインを検索」より検索しインストール。または公式サイトよりダウンロードすることで使用可能です。なお、管理画面からインストールした方が後の設定が簡単であることを抑えておきましょう。

管理画面からインストールし終えたら、次に「有効化」します。「有効化」することで、管理画面の「設定」>「PageNavi」より詳細の設定が可能になります。以下はPageNavi設定の設定画面です。

プラグインを利用する場合

プラグインを利用する場合

WordPressの管理画面では、ページネーションのテキスト(文章)設定や簡易的なデザインや表示設定を行うことができます。そのうえで、どのページに表示させるのか、細かなデザイン(CSS)の変更についての設定は、使用テーマに関する各ファイルの記述を適宜書き換える必要があります。

詳細の作業内容につきましては、説明が長くなりますので、以下「WORDPRESS.ORG」の「使い方」に従って進めてください。

参考元:WORDPRESS.ORG 日本語「WP-PageNavi」

phpファイルでページネーションを設定する場合

ページネーションはWordPressのプラグインをインストールするだけでなく、phpファイルの設定で自ら実装することもできます。Wordpressはプラグイン同士が干渉して不具合が起きることもあるので、phpファイルでページネーションを設定すると、表示速度の最適化ができ、今後の開発作業に柔軟性が生まれやすくなるというメリットがあります。

一方で、開発スキルに自信がない方からすると、少し作業が難しく感じられるかもしれないデメリットがあります。以下でご紹介する実装方法は、以下に紹介するコードを基本的にはコピペするだけです。ただし、誤ったphpファイルの記述をするとサイトの表示がされない可能性もあるので、十分な配慮が必要です。

はじめに、全ページに反映される関数を定義するファイル「function.php」を管理画面の「外観」>「テーマの編集」より選択し開きます。そして「function.php」内に以下コードをコピペします。

function the_pagination() {
global $wp_query;
$bignum = 999999999;
if ( $wp_query->max_num_pages <= 1 )
return;
echo '<nav class="pagination">';
echo paginate_links( array(
'base' => str_replace( $bignum, '%#%', esc_url( get_pagenum_link($bignum) ) ),
'format' => '',
'current' => max( 1, get_query_var('paged') ),
'total' => $wp_query->max_num_pages,
'prev_text' => '&larr;',
'next_text' => '&rarr;',
'type' => 'list',
'end_size' => 3,
'mid_size' => 3
) );
echo '</nav>';
}

Webサイトごとに調整が必要だと考えられる箇所は、「prev_text」「next_text」「end_size」「mid_size」引数と「=>」の右側のオプション部分のみ。

それぞれ、「prev_text」と「next_text」では前後のページへのリンクテキストを指定しています。オプションには「&larr」「&rarr」が記述されていますが、これは画面上では「←」「→」と表示されることを指示しています。

また、「end_size」引数ではページ番号のリスト両端にいくつの数字を表示するのか。「mid_size」引数では現在閲覧しているページの両端にいくつの数字を表示するのか(ただし現在閲覧中のページは含まない)を指示しています。

このように「function.php」ファイルに上記コードをコピペしたら、実際にページネーションを表示させたい画面のファイルの表示箇所を示す箇所に以下コードをコピペします。

<?php if( function_exists("the_pagination") ) the_pagination(); ?>

基本的にWordPressであれば、「archive.php」や「category.php」「index.php」がコピペするファイルに該当するかと思います。

一見すると複雑そうに感じられる自ら実装する方法ですが、ご説明したように既存コードのコピペで済みます。もちろん、別の記述法で紹介されているコードもありますし、可能な方は完全にイチから書いてみても構いません。リソースや要件を鑑みて、適切な作業方法を選択されてみてください。

おわりに

ページネーションは情報量の多いWebサイト・ページでは設定を検討すべき機能です。Webデザインの観点からも、ユーザーに長らく親しまれている機能ですので、文字数が多いWebページでは設定を心がけるようにしましょう。

ただし、SEO効果やPV数獲得が期待できるからといって、ユーザーの視点から見て違和感があるような過度な設定はご法度。あくまで、ユーザー視点にたってページネーション設定が必要か判断してください。

 

このエントリーをはてなブックマークに追加
The following two tabs change content below.
digital-marketing

digital-marketing

デジタルマーケティング研究所では、デジタルマーケティングの施策・広告・技術を、分析・実装・検証して、WEB担当者・マーケティング担当者の方の役立つ情報を発信していきます。
SNSでフォロー

Contact

Webマーケティングに関わる施策全般をワンストップでご提供します。
お気軽にご相談ください。

Webマーケティング最新情報をお届け
東京営業所
東京都新宿区西新宿1丁目6-1 新宿エルタワー3階
電話番号 03-6374-1393 FAX番号 0422-57-2761
大阪営業所
大阪府大阪市北区堂島1丁目5-30 堂島プラザビル10F
電話番号 06-7176-3367 FAX番号 06-7176-3368
Copyright © 2020 DM SOLUTIONS Co.,Ltd. All rights reserved.