wordpressの投稿にページ送り(next page,pagenation)を表示する方法

2013/12/17 2014/11/22

wordpressブログで１つの投稿を複数のページに分割して表示する方法をご紹介します。
ブログやニュースサイトなどをを閲覧していて、
最近よく見かけるになりつつある[1][2][3]などのページ分割[pagenation]の方法は、
wordpressでも簡単に導入することができます。

はじめに

この[1][2][3]などの１投稿を複数のページで分割する仕組み。

記事を読む側としてはスクロールが減って見やすいと感じる人もいるかもしれません。
しかし、１つの記事を読むのにページ送りをする必然性はないと私は感じています。

これは単に直帰率を下げるための１テクニックでしかないのかなと思うところです。

個人的にはこの見せ方は好きではありませんが、
wordpressでも簡単に１記事を複数に分けて表示することは可能です。

設定方法

まずは、投稿のすべての内容を通常通り１つの投稿に対して入力します。

投稿本文の作成

ざっと入力が終わったら、テキストエディタの画面に切り替え、
ページの分割を行いたい部分を確認します。

テキストエディタでページを分割

ページの分割を行いたい行の最後に以下のコメントタグを貼り付けます。

ページ分割位置にタグ挿入

テキストエディタからビジュアルエディタに戻って確認すると、
ページ送りを示す[next page]を示す水平線が表示されます。
※ここでは例としてmoreタグも併せて挿入しています。moreタグ詳細

ビジュアルエディタのページ分割表示

後は、そのまま公開すればページ送りが設定された投稿が表示されます。

以下はトップページの表示です。
「続きを読む(moreタグ)」と併用してページ送りを設定した場合、
テーマにもよりますが、抜粋表示でページ送りが表示され、
抜粋が１ページ目であるように表示されてしまいます。

これはテーマファイルを修正するか、CSSなどで隠すなどの微調整が必要かと思います。

TOPページのページ送り表示と抜粋表示

続きを読むをクリックし、個別投稿のページを確認すると、
１ページ目のみが表示されます。
URLは以下のような形式です。
[http://domain/dir/2013/12/17/parmalink/]

１ページ目の表示

２ページ目の[2]をクリックすると２ページ目を表示することができます。
[http://domain/dir/2013/12/17/parmalink/2/]

２ページ目の表示

３ページ目の[3]をクリックすると３ページ目を表示することができます。
[http://domain/dir/2013/12/17/parmalink/3/]

３ページ目の表示

特に難しいことはないと思いますが、
ページ送りの[1][2][3]の表示は、CSSなどでサイズやデザインを調整するとしても、
続きがあることが少しわかりにくいかなといった印象です。

もう少し、続きの内容（次ページ）といった表記が行えるように、
テーマの編集などを行ってから実装する方がいいかなと思うところです。

さいごに

このページ分割による表示。
個人的にはあまり利用することはないかなと思うところではありますが、
上手に使えば簡単で非常に便利な機能ではないかと思います。

WordPress™はWordPress Foundation の登録商標（第５０４９９６５号）です。
WordPressロゴ、アイコンその他のマーク等はWordPress Foundation の商標であり、
WordPress Foundation の著作物です。
WordPress.comはWordPress Foundation が管理運営を行うドメインならびにサービスの名称です。
WordPress.com、WordPress.net、WordPress.org、WordPress.tv、
WordPressFoundation.orgはWordPress Foundationが
管理運営を行なう正式なトップレベルドメインであるとともに、
WordPress Foundationが運営を行うサービスの名称です。

Jetpack by WordPress.comはAutomattic, IncのCreative Commonsによってライセンスされています。