WordPress 記事を分割(ページネーション)表示する必要全手順

      2017/05/19

記事を書いていると、思いの外長くなってしまって重くなってしまう事があります。そんな時は1記事を分割して「<前 1 2 3 次>」表示する方法があります。Yahooなどのコラム系記事を見ているとよく出てくると思いますが、ページネーション(ページャー、ページ送り)と呼ばれるものです。

個人的にはあまり1記事をページ分割をしているサイトは好きではありません。ですが、下の記事はアクセスも多くYoutubeなどのリンクが多く表示に時間がかかり重いので、なんとかユーザビリティを上げたいと想いから実験的に導入してみました。

【保存版】Londoner厳選 UKロックおすすめバンド50
イギリスロンドン(一時期はAbbey Road Studio近くにも)に長い間住んでいた音楽バカが選

調べるとfunctions.phpやsingle.php、CSSカスタマイズなどたくさんあります。しかし今回は実験的導入ということもあり、初心者でも簡単にWordPressのプラグインを使って記事を分割し表示させる方法と、注意点を説明していきます。

Sponsored Link

TinyMCE Advanceを使って記事を分割する

プラグインを使わなくても分割は可能ですが、TinyMCE Advanceというプラグインは、ボタン一つで分割出来るだけでなく、記事投稿の編集で他にも使い勝手がいいのでこちらをダウンロードしておきましょう。

「プラグイン」→「新規追加」→「TinyMCE Advance」→「インストール」→「有効化」

ここは説明とくに必要ないので、有効化まで進めて「設定項目」へ移動。

赤枠の「改ページ」というボタンがあるので「使用しないボタン」の方に有る場合は上へドラッグして変更を保存します。

投稿画面に「改ページ」のページマークボタンがあるので記事を分割したい箇所に入れます。

「PAGE BREAK」と表示されればOKです。

HTMLテキスト画面ではこのようになります。

簡単に言うとこのコードが入っていればページ分割してくれるようになっています。

ですがボタンの方が簡単なので「TinyMCE Advance」を使っています。

出来上がりはこうなります。しかしこのままだと目立ちにくく、クリックもしにくいのでちょっとデザインを変えていきます。

検索するとphpコードをいじってCSSでデザインする方法もありますが、極力簡単でコードも少しで済む方法を説明します。

プラグイン「Number My Post Pages」をインストールする

「WordPress ページネーション プラグイン」で検索すると、いろいろな方法が出てきますが、その中で「WP-PageNavi」というプラグインが出てきます。こちらは記事分割用ではなく、ページ単位用(カテゴリ内の記事など)なので、今回インストールするのは「Number My Post Pages」です。

先ほどと同じように、「プラグイン」の「新規追加」から「Number My Posy Pages」をインストールし、有効化します。

写真を見ればお分かりでしょうが、最終更新が7年前です。ですが、問題なく動作しましたのでご安心下さい。

それでは、設定していきます。

phpコードを入れる

一カ所だけphpコードを変更する必要があります。

子テーマの編集についてはこちらを参照ください。

WPカスタマイズは必ず子テーマで!作成方法全手順【図解】
 今回は、エックスサーバーで子テーマの作成手順に付いて説明していきます。 WordPressで子テ

<?php wp_link_pages();?>というコードを下記のコードに差し替えます。

 

私の使用しているテーマ「Giraffe」の場合はsingle.phpの中程

ここにあるのでこれを差し替え。

少し良くなりました。CSSでデザイン変更も可能ですが、その場合は先ほどの設定画面内の「Use default stylesheet」を「No」に変更してください。とりあえず、今回は実験なので以上です。最後に重要な事を一つ。

*4/27追記:CSSデザインも変更しました。記事下にリンク貼ってありますので興味があれば。

1ページを分割する際の注意点

1記事を分割すると、Googleに重複ページとみなされ低品質サイトを認識されてしまうので、重要な設定をしておきます。

WordPressで必ず入れておきべきプラグインとして「All in One SEO Pack」がよく紹介されていますので、すでにインストール済みかと思いますが、もしまだの場合は必ず入れておいて下さい。

All in One SEO Pack の一般設定を開いて下さい。

一番上の「Canonical URL」こちらに必ずチェック入れておいて下さい。

これをチェックすることで、ページ分割した記事を重複と見ないようにクローラーに伝えることが出来ます。

「ページネイションをCanonical URLsにしない」こちらは、分割した2ページ目以降をCanonical URLにするかどうかを決める箇所です。チェック無しでOKです。

 

WordPressで記事を分割(ページネーション)する方法は以上です。

CSSのデザインを変更したい場合は

WordPress Number My Post Pages(ページネーション)のCSSデザインをカスタマイズする
WordPressで1記事を分割して「<前 1 2 3 次>」と表示する方法を以前ご紹介

こちらを参考にして下さい。

こんなデザインを載せてあります。

 - WordPress, プラグイン