WordPressで記事にページャーをつけたい!単一記事を複数ページに分割する方法
記事の本文が長くなると、当然ながらスクロールする回数も増えます。マウスで延々こりこり、スワイプでしゃっしゃさせなければ欲しい情報にたどり着けないサイトは見づらいという印象を受けてしまいます。
コンテンツにもよりますが、記事がある程度の長さまで行ったらページを分割するのがおすすめです。
WordPressではこのページ分割がデフォルトで備わっています。
今回はWordPressで長い記事本文を複数に分割させる方法を紹介します。
記事の本文にコードを追加
追記文を書く場合では、本文内で
を使いますが、ページ分割の場合は
を使います。
追記分のmore同様、!をなくしたり半角スペースを入れると無効になるためご注意ください。
...
<!--nextpage-->
2ページ目
...
<!--nextpage-->
3ページ目
...
ページテンプレートにページ分割用のページャーを追加
単一記事ページで分割用のページャーを表示させるため、
the_content(); の下にコードを記載します。
single.php
<?php the_content(); ?> <?php wp_link_pages(); // ページ分割用ページャー ?>
...
ページ: 1 2 3
デフォルトではこんな風に表示されます。
ページャーの詳細設定
文字列を変えたりタグをパラメーターから指定することができるので、
CSSを指定すればおしゃれなページャーも表示できます。
<?php $arg = array( 'before' => '<div id="single_pager">', // ページャーの前に表示させる文字列(デフォルト: '<p>ページ:') 'after' => '</div>', // ページャーの後ろに表示させる文字列(デフォルト: '</p>') 'link_before' => '<span class="num">', // リンクテキストの前の文字列 'link_after' => '</span>', // リンクテキストの後の文字列 'next_or_number' => 'number', // ページ番号を使用するかどうか(デフォルト: 'number') 'separator' => ' ', // ページ番号の間の文字列 'nextpagelink' => '次のページ', // 次ページへのリンクテキスト 'previouspagelink' => '前のページ', // 前ページへのリンクテキスト 'pagelink' => '%', // ページ番号のフォーマット。%がページ番号(デフォルト: '%') 'echo' => 1, // 表示させるかHTMLとして取得するか(デフォルト: 1) ); wp_link_pages($arg); ?>
重複コンテンツ問題の対処
このページ分割はタイトルやディスクリプションが変わらないため、Googleから重複コンテンツとみなされるケースがあります。
せっかくコツコツ書いたページが重複扱いにされてしまうのは非常にもったいないです。
単一記事ではページ別にタイトルやディスクリプションを変更したり、headで rel="next" 等を入れるようにしましょう。
get_query_var('page') でページ数を取得することができます。
header.php
<title> ...(略)... <?php if ( is_single() && get_query_var('page') ): echo ' Page: '. get_query_var('page'); endif; ?> </title>
ページ分割のまとめ
デフォルトで備わっているだけあって、簡単に実装ができました。
WordPressは便利ですね。
サイトの記事本文のページ分割には賛否両論あると思います。SEOを考えれば強みになりますが、
コンテンツを分けてしまうことはユーザー側にクリックやタップを強要してしまうことにも繋がります。
ただ、あまりにも長い記事に含まれた欲しい情報のために延々とスクロールを強いるのもまた負担になってしまいます。そういうときはページ分割をすれば記事の中盤が見たいのか、終盤が見たいのかなど、ユーザー側に見たいものを大まかに選択させることができるページ分割をおすすめします。
コンテンツに合わせたページ作りをしていけるといいですね。