WordPressでnextpageタグをつかってページ分割する方法とその使いかた

ブログの記事を書いているときに、ひとつの記事の内容が長いなぁと思うことが多々ありまして、ニュースサイトなどのように「ひとつの記事を複数ページに分割して表示」するのはどうだろうと、WordPressでできる方法を調べてみたので、メモします。

ページ分割の方法

WordPressのCodexを見たら、以下のタグを記事本文中に挿入すると、その部分でページ分割ができるとのこと。なんてかんたん！

[code]<!–nextpage–>[/code]

投稿画面の書きかた

たとえば、投稿記事をこんなかんじで書くと、<!–nextpage–>で区切ったところでページが分割されます。

表示される記事

表示される記事内では、ページネーションがこんなかんじで表示されます。

▼ 1ページめ

▼ 2ページめ

▼ 3ページめ

と、使いかたはとてもかんたんなのですが、実際につかうにあたっていくつか気になったことがあったので、調べてみました。

気になること

ブログなどで記事を分割して表示するとなると、ページネーションのカスタマイズの可否や生成されるURLなど気になることがいろいろあるので、それぞれ調べてみました。

ページネーション表示の項目変更や見ためのカスタマイズができるかどうか

まず、<!–nextpage–>で作られる「ページネーション」について、出力されるhtmlや表示項目のカスタマイズができるのかを調べてみました。

WordPressのCodexを見てみたところ、記事内で<!–nextpage–>と書いて記事を分割するためには、記事ページのテンプレート（phpファイル）に「wp_link_pages」タグが埋め込まれている必要があるのですが、このタグの書きかたで、ページネーションの表示項目や出力されるhtmlの内容をいろいろ変えられるようです。

くわしい方法は下記のWordPressのCodexページに記載がありますが、オリジナルのclassが指定できたり、パラメータを使って表示項目を設定できたりします。

[icon-box icon=’arrow-right-2′ size=16 color=gray width=full]テンプレートタグ/wp link pages – WordPress Codex 日本語版[/icon-box][clear]

出力されるhtmlを具体的な例で見てみます。
たとえば「Twenty Twelve」テーマの場合だと、wp_link_pagesタグは下記のようにテンプレートファイルに組み込まれています。

phpコード

[code]<?php wp_link_pages( array( ‘before’ => ‘<div class=”page-links”>’ . __( ‘Pages:’, ‘twentytwelve’ ), ‘after’ => ‘</div>’ ) ); ?>[/code]

これによって記事内で出力されるhtmlコードは以下になります。

出力されるhtml（例）

[code]<div class=”page-links”>
ページ:
<a href=”https://nekonomemo.net/wordpress_test/?p=5202″>1</a>
2
<a href=”https://nekonomemo.net/wordpress_test/?p=5202&page=3″>3</a>
</div>[/code]

また、「Twenty Twelve」テーマでは、ページネーションに該当する部分の見ためがCSSでちょっとだけ調整されてます。

CSS

[code].page-links {
clear: both;
line-height: 1.714285714;
}[/code]

その結果、下記のような感じで表示されます。

表示例

phpコードのなかで項目の前後に適用するにhtmlタグを追記できるので、CSSでのスタイル指定もやりやすそうでいいですね。

ページのURLはどういったものになるか

次に、記事を分割した場合、各ページのURLがどうなるのかを調べてみました。

分割した記事の1ページめのURL

（分割していない）記事のパーマリンクと同じURL

分割した記事の2ページめ以降のURL

1. WordPressのパーマリンク設定がデフォルトのとき：
   http://〜/?p=記事ID[highlight]&page=2[/highlight]
2. WordPressのパーマリンク設定が投稿名のとき：
   http://〜/投稿名/[highlight]2/[/highlight]

たぶん、基本的にはパーマリンクの一番後ろに「/（スラッシュ） ＋ ページ番号 ＋ /（スラッシュ）」がくっつくかたちでURLが作られるけれど、最後がスラッシュじゃないURLになる場合は、「page= ＋ ページ番号」になるような気がします。

当ブログの場合は、上記の「2」のパーマリンク方式にしているので、このような「投稿名のあとに新しいディレクトリ（/2/など）が作られてるようなURL」になるのはちょっとややこしいことが起きそうな気がしてきました。。

プラグインを使って自動生成したページ目次はどのように表示されるか

また、当ブログのように記事ごとに目次を自動生成するプラグインを使っている場合、分割したページの目次の表示はどうなるのかが気になります。今回は、当ブログで使っている「Table of Contents plus」プラグインで調べてみました。

[alert]
「Table of Contents plus」の使いかたは以前こちらに記事にしておりますので、よろしければどうぞ。
→　投稿記事に目次を自動で表示するWordPressプラグイン「Table of Contents Plus」 | nekonomemo.net[/alert]

このプラグインで生成される目次は記事内の見出し（<h2>とか<h3>とか）から自動生成されるのですが、ページが分割された場合には、その分割されたページごとの目次が生成されるようです。

できれば、記事全部の目次がまとめて各分割ページにそれぞれ表示されるとうれしいので、他のプラグインを探してみたところ、下記のプラグインが良さそうだったのでちょっと使ってみました。

[icon-box icon=’arrow-right-2′ size=16 color=gray width=full]Extended Table of Contents (with nextpage support)[/icon-box][clear]

使ってみると、記事全部の目次がどの分割ページにも表示されてよかったのですが、目次に貼られたリンクがうまく動作しないものがありました。英数字が最初にくる見出しについてはちゃんとページをまたいで、該当の見出しのところに遷移するのですが、日本語には対応していないようでした。

ページごとの目次は「Table of Contents Plus」でうまく生成されるのでいいといえばいいのですが、分割された目次が表示されるほうが閲覧する人にとっては逆にわかりづらいと思うので、いっそのこと目次をつけないほうがいいのかなぁと思ったりいたしました。

[alert]
ちなみに、「Table of Contents Plus」では、同様の要望がユーザーから多く寄せられているようで、「バージョンアップで対応したいと思っている」というコメントがでていますが、いまのところは未対応のようです
→　http://www.wpsquared.com/add-a-table-of-contents-and-in-post-pagination-to-wordpress/
→　http://dublue.com/plugins/toc/comment-page-3/#comments
[/alert]

Google Analyticsではどのように計測されるか

また、Google Analyticsではどのように計測されるのかも調べてみました。結論としては、分割されたページは別ページとしてカウントされているようです。（URLがちがうからそりゃそうか）

検索エンジンではどのように評価されるか

最後に、検索エンジン対策についてもちょっと調べてみました。SEOのことはあまりくわしくないので、いろいろな記事を拝読してみたのですが、こちらの記事が特に参考になりました。

[icon-box icon=’arrow-right-2′ size=16 color=gray width=full]Google、ページネーション問題を解決するrel=“next”タグとrel=“prev”タグをサポート開始 | 海外SEO情報ブログ[/icon-box][clear]

ひと続きのコンテンツを複数のページに分割する“Pagination”（ページネーション）によって起こる可能性がある、重複コンテンツ問題に対処するために、rel=“next”要素とrel=“prev”要素のサポートをGoogleが開始しました。
– Google、ページネーション問題を解決するrel=“next”タグとrel=“prev”タグをサポート開始 | 海外SEO情報ブログ

とあるので、とりあえず「rel=“next”タグ」と「rel=“prev”タグ」が分割したページで出力されてるのか当ブログで試してみたところ、使用しているプラグイン「All in One SEO Pack」によって以下のような感じで生成されて（プラグインが入ってない状態だと該当するタグは出力されてなかったです）。

1ページめ
[code]
<link rel=’next’ href=’https://nekonomemo.net/wordpress-alpine-phototile-for-instagram/2/’ />
<link rel=”canonical” href=”https://nekonomemo.net/wordpress-alpine-phototile-for-instagram/” />
[/code]

2ページめ
[code]
<link rel=’prev’ href=’https://nekonomemo.net/wordpress-alpine-phototile-for-instagram/’ />
<link rel=”canonical” href=”https://nekonomemo.net/wordpress-alpine-phototile-for-instagram/2/” />
[/code]

なお、上記のコード内にある「rel=”canonical”」は、All in One SEO Packの設定でチェックを入れてるので生成してくれてるのだと思われます。

「rel=”canonical”」については、上記の記事内に以下のように記載があり、入っていたほうがよさそうです。

rel=“next”/rel=“prev”とrel=”canonical”は別のコンポーネントなので同時に使用できる。
※rel=”canonical”は重複コンテンツを1つの同じページだと伝える（正規化する）のが目的です。一方rel=“next”/rel=“prev”は一連の続きものページだと伝えるのが目的です。ページネーションは重複コンテンツではありません。rel=”canonical”は正規化されたページだけをインデックス（検索結果表示）します。rel=“next”/rel=“prev”は被リンクはまとめてくれますが、個々のページは残してくれます。
– Google、ページネーション問題を解決するrel=“next”タグとrel=“prev”タグをサポート開始 | 海外SEO情報ブログ

以上になります。

まとめ

だだーっと長いページはちょっと読む気をなくすような気がするので、ページを分割すれば読み込みが早くなるしいいかなぁと思ったのですが、やっぱりひとつの記事が「別のページ」として扱われる部分があるのはちょっとややこしくなりますし、目次で次のページ以降にどういうコンテンツがあるかを見せられるようにしたいので、ページ分割を実際にやるにはもう少し検討が必要かなぁと思いました。そもそも、もう少し手短にコンパクトな記事が書ければそれが一番いいので、いろいろ工夫が必要ですねぇ。