WordPressの投稿を「<!--nextpage-->」で複数のページに分割する方法
  • WordPressの投稿を「<!--nextpage-->」で複数のページに分割する方法
  • 記事公開:2018/09/16
  • 最終更新:2018/09/17

WordPressの投稿を「<!--nextpage-->」で複数のページに分割する方法

しっかりと作り込んだ記事は、どうしても縦長になってしまうことがあります。 必要な情報を詰め込んだ結果なので、仕 ...

この記事は約 9 分で読めます。

しっかりと作り込んだ記事は、どうしても縦長になってしまうことがあります。
必要な情報を詰め込んだ結果なので、仕方が無いことではあるのですが、情報量の多いページは訪問者に「読むのが面倒」との印象を与えがちです。

そんなとき便利なのが、WordPressに備わっている投稿を複数のページに分割できる機能。
長いページを複数に分割すれば、以下の様なメリットを得ることができます。

  • ページが縦長になることを回避できるので、訪問者の「長くて読むのが面倒くさい」を回避できる。
  • スクロール量を減らすことができるので、訪問者の「スクロールが面倒くさい」を回避できる。
  • 結果として、訪問者の離脱率を下げることができる。
  • しっかしと、コンテンツを読んでもらうことができる。

「ちょっと文字数が多すぎるかな・・・」と思う際には、ぜひ活用したい機能です。

今回は、WordPressの投稿を複数のページに分割する方法ご紹介していきます。

<!--nextpage-->を使って投稿を分割する

WordPressの投稿を分割するのは非常に簡単で、小難しいカスタマイズなどは不要です。

投稿を作成する際、ここでページを分割したいと思う箇所に、以下のコードを記述するだけです。

<!--nextpage-->

上記のコードを記述されている箇所でページが分割され、コード以下に記述している内容は2ページ目に表示されるようになります。

上記のコードは、投稿内で何回でも記述することができます。
つまり、何ページにでも分割することができるわけです。

各ページへのリンクを表示する方法

この項目は、お使いのテーマで必要不必要が変わります。

試しに投稿のページを分割して、その投稿を表示してみてください。
その時、次のページへのリンク「ページネーション」が表示されているなら、この項目のカスタマイズは不要です。

「ページネーション」が表示されていない場合は、「ページネーション」が表示されるようにテーマをカスタマイズしなければなりません。ページネーションが表示されない状態では、ページを分割しても1ページ目しか見ることができないからです。

ページネーションを表示させるためには、テーマ本体をカスタマイズします。

ページネーションを表示させたい位置に、以下のコードを記述してください。

<?php wp_link_pages(); ?>

このコードを記述することで、その部分にページネーションが表示されるようになります。

このコードをテーマのどこに記述すれば良いかという問題ですが、これはお使いのテーマ構造によって異なってきます。「テーマのどこどこにコードを記述してください」とお教えすることができません。

投稿ページは、ほとんどのテーマの場合「single.php」で管理されているかと思います。
テーマの「single.php」を開いて、表示位置を試しながらコードを記述してみてください。

一般的な構造のテーマであれば、「single.php」の中にある【<?php the_content(); ?>】の上下辺りに設置してやればよいかと思います。

お使いのテーマに「single.php」というファイルがあり、その中に【<?php the_content(); ?>】というコードがある場合は、まずその上下にコードを記述して表示箇所を確認してください。

重複コンテンツを回避する方法

ワードプレスのページを分割すると、分割ページが検索エンジンに「重複コンテンツ」と認識されてしまう可能性があります。
私もこのことを最近になって知ったのですが、確かに重複コンテンツと認識されるケースがあるようです。

この重複コンテンツをどう回避したらよいか調べてみたのですが、ありがたいことに対策方法を紹介しているコンテンツが見つかりましたので、ご紹介をしておきます。

以下のコードを、<head>〜</head>内に記述しておくだけでOKです

<?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 } ?>

参考記事:【WordPress】投稿記事を複数ページに分割する「<!--nextpage-->記法」の使い方

上記のコードを記述するとどうして重複コンテンツと認識されるのを回避することができるのか?
詳しくは参考記事を確認してください。

上記のコードですが、サイトによってはコードの一部を修正する必要があるようです。
このサイトでも、コードを一部編集する必要がありました。

コードをコピペして終わりではなく、正しいコードを吐き出されるか確認をしてください。
吐き出されるコードがおかしい場合は、上記のコードを修正する必要があります。

この辺りは、吐き出されるコードを見ながら調整をしてください。

まとめ

WordPressの投稿を「<!--nextpage-->」で複数のページに分割する方法をご紹介しました。

情報量の多いコンテンツを作成している方には、ページ分割は役立つかと思います。
簡単に覚えられる方法ですので、この機会にやり方を覚えておくのも無駄ではないでしょう。

この記事が気に入ったら【いいね】しよう!

Wordpressサイトのカスタマイズで
お困りではありませんか?

あなたのWordpressサイトを、ご希望に沿ってカスタマイズいたします。
次に該当する方は、お気軽にご相談下さい。

  • Wordpressサイトをカスタマイズしたいが、やり方が分からないで困っている。カスタマイズの知識が豊富な人に任せたい。
  • Wordpressサイトをカスタマイズしたいが、自分でカスタマイズする暇がない。カスタマイズが得意な人に丸投げしたい。
  • Wordpressサイトをカスタマイズしてみたが、上手くカスタマイズできなかった。カスタマイズ経験が豊富な人に任せたい。
  • Wordpressサイトをカスタマイズしてみたら、バグが発生して困っている。正常に動作するように正しくカスタマイズしてほしい。

一つでも該当する方は、以下のリンクからチェックしてみてください。

詳細を確認する

現在、上記サービスは別ドメインで運用しております。
ドメインは異なりますが、わたしが提供させていただいているサービスです。

著者:takaya kondo

岡山在住のWebディレクターです。Wordpressを使ったWEBサイト制作を中心に10年間ほど活動させていただいています。

Wordpress関連の記事でお役に立てれば幸いです。

【関連記事】あなたが興味のありそうな関連記事をご紹介します。

  • 2015-11-11

    コンタクトフォーム7に確認用チェックボックスを追加するだけで得られる2つの効果!!

    コンタクトフォーム7に確認用チェックボックスを追加するだけで得られる2つの効果をご紹介しています。確認用チェックボックスの必要性に関して真剣に考えたことがない方は読んでみてください。 記事を読む

  • 2015-11-18

    WordPressのアイキャッチのパスだけを取得するコード

    WordPressのアイキャッチのパスだけを取得するコードをご紹介します。アイキャッチ画像のURLだけを取得したい方は参考にしてください。たった1分でアイキャッチの画像パスだけを取得する方法が分かります。 記事を読む

  • 2016-09-10

    WordPressのパスワード保護ページをカスタマイズする方法

    WordPressのパスワード保護ページをカスタマイズする方法をご紹介します。パスワード保護ページのタイトルや本文をカスタマイズする方法です。興味のある方は、3分間だけこのコンテンツを見てください。カスタマイズ方法をマスターできます。 記事を読む

  • 2015-02-10

    WordPress管理画面の投稿一覧ページに投稿IDを表示させる方法

    WordPress管理画面の投稿一覧ページに投稿IDを表示させる方法をご紹介します。必要を感じてカスタマイズしましたが地味に便利です。参考にしてください。 記事を読む

  • 2016-01-23

    WordPress管理画面の投稿一覧にカスタムフィールドの値を表示させる方法

    WordPress管理画面の投稿一覧にカスタムフィールドの値を表示させる方法をご紹介しています。カスタムフィールドの値を投稿一覧から確認できると便利だと思いませんか?興味のある方は参考にしてください。5分後には投稿一覧にカスタムフィールドの値が表示されています。 記事を読む

コメントを残す


(必須)