WordPress 記事のページを分割する方法

こんにちは、koheiです。

WordPressで記事を書いてる時、記事が長くなると、ページを分割したくなりますよね。
ということで、今日はWordPressでページを分割して投稿する方法を紹介します。

1.記事にnextpageタグを入れる

まず、ページを分割するには、記事中の分割したい箇所に
nextpageタグを記載します。

WordPress記事投稿ページ画面

<!--nextpage-->

2.ページリンクを表示させる

つづいて、ページリンクを表示させるために、コンテンツを表示しているphpファイルに以下(3行目〜12行目）を記載します。
コンテンツ表示関数のthe_content()の後に記載するとよいでしょう。
※以下は、index.phpのthe_content()の後に記載した例。

        <?php if (is_single() ): ?>
          <?php the_content(); ?>
          <?php
          // ページングの表示
          $args = array(
              'before' => '<ul class="link_page_navi">',
              'after' => '</ul>',
              'link_before' => '<li>',
              'link_after' => '</li>'
          );
          wp_link_pages( $args );
          ?>

        <?php else: ?>

ul要素のクラス名は、link_page_naveにしています。
これは、この後説明するCSSで使用します。

3.CSSで装飾する

ページリンクをCSSで装飾しましょう。
以下にサンプルのCSSコードを記載しています。
色やサイズなどはお好みでカスタマイズしてください。

/* 投稿複数ページボタン */
.link_page_navi {
  padding: 0;
  max-width: 300px;
  width: 100%;
  list-style: none;
  margin: 0 auto;
}

.link_page_navi::after {
  content: "";
  display: block;
  clear: both;
}

.link_page_navi li:first-child {
  margin-left: 5px;
}

.link_page_navi li {
  float: left;
  width: 64px;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 20px;
  border: 1px solid #161514;
  text-align: center;
  padding: 8px 12px;
  color: #fff;
  background-color: #161514;
}

.link_page_navi a li {
  border: 1px solid #555;
  color: #555;
  background-color: #fff;
}

.link_page_navi a li:hover {
  background-color: #161514;
  color: #fff;
  opacity: 0.7;
}

4.rel=”next” rel=”prev”タグで重複記事を防ぐ

さて、先ほどまでの手順でページ分割はできますが、ここで一つ問題があります。
複数ページにすると、検索エンジン的には重複ページとみなされ、SEO的に不利になるようです。
重複問題を防ぐには、headタグ内にrel=”next” rel=”prev”タグを記載します。
headタグ内に以下のコードを記載しましょう。

<?php $pages = count( explode('<!--nextpage-->', $post->post_content) ) ; ?>
<?php if ( $pages > 1 ) { ?>
	<?php if ( $page == $pages ) { ?>
		<?php if ( $page == 2 ) { ?>
			<link rel="prev" href="<?php the_permalink(); ?>">
		<?php } else { ?>
			<link rel="prev" href="<?php the_permalink(); ?><?php echo $page - 1; ?>/">
		<?php } ?>
	<?php } else { ?>
		<?php if ( $page == 0 ) { ?>
			<link rel="next" href="<?php the_permalink(); ?><?php echo $page + 2; ?>/">
		<?php } else { ?>
			<?php if ( $page == 2 ) { ?>
				<link rel="prev" href="<?php the_permalink(); ?>">
			<?php } else { ?>
				<link rel="prev" href="<?php the_permalink(); ?><?php echo $page - 1; ?>/">
			<?php } ?>
			<link rel="next" href="<?php the_permalink(); ?><?php echo $page + 1; ?>/">
		<?php } ?>
	<?php } ?>
<?php } ?>

※5、7、11、14、16、18行目のlinkタグは、WordPressのパーマリンク設定によって、記載方法が若干変わりますので、ご自分の設定に合わせてください。
実装後は、ページのソースを表示して、意図通りのlinkタグが出力されているか確認しておきましょう。

最後に

以上、WordPressの記事ページ分割の方法を紹介しました。
記事が長くなると、ページの読み込み時間も長くなり、可読性も悪いので、
是非ページ分割を活用しましょう！

それでは！