WordPress 個別記事にページナビ[前の記事][次の記事]をつける方法

個別記事の前後の記事に関連性がある場合、「前の記事へ」「次の記事へ」などの
ページナビ(ページネーション)があった方が便利ですよね。

ここではWordPressの個別記事ページにページナビを表示する方法をご紹介します。

 

ページナビを設置してユーザビリティを上げる

WP-PageNaviなどのプラグインで、トップページやカテゴリページ、アーカイブなどに
ページナビを表示することはできますが、個別記事には表示されません。

前後の記事に特に関連性のない「ごちゃまぜトレンドブログ」などの場合
ページナビは特に必要ありません。

しかし、ドラマや漫画などの記事を書いている場合は
「第1話~最終回」のように話が続くので、前の話や次の話などに
誘導してくれるページナビがあった方が便利です。

設置するページナビはこんな表示になります。

ページナビ

 

前後の記事のタイトルを表示することもできます。

ここで紹介する方法は、同じカテゴリ内の前後の記事にリンクする方法です。

例えばカテゴリが次のような場合、ドラマの感想が第1話から順に読めます。
他のカテゴリの記事が途中に入らないので読みやすいですね。

  • ドラマ感想
  • キャスト
  • 主題歌、その他

 

個別記事にページナビを設置する

特にプラグインは必要なく、簡単に設置できますので、早速やってみましょう。

WordPress管理画面>外観>テーマ編集をクリックします。

WordPress pagenavi

 

右のメニューの「単一記事の投稿(single.php)」をクリックします。

単一記事の投稿(single.php)

 

 

「前の記事」「次の記事」と表示する

個別記事ページの好きなところに下のコードをコピーします。

  貼り付けたら「ファイルを更新」をクリックします。

 

例えば賢威テンプレートで、本文のすぐ下に設置する場合は次の箇所です。

ページナビ

 

「前の記事へ」「次の記事へ」という言葉を変えたい場合は、記述している文字を変更するだけでOKです。

 

次に右のメニューの「design.css」をクリックして、任意の場所に次のコードを記述します。

内容的には、/*●ページネーション WP用*/と/*コメントナビ*/の間あたりでいいと思います。

賢威テンプレートであれば、1~25行目までコピーしておきましょう。

貼り付けたら「ファイルを更新」をクリックして設置完了です。

 

「前の記事」や「次の記事」がない場合どうなるかというとこんな感じです。

「前の記事」がない場合
ページナビ

「次の記事」がない場合
ページナビ

 

前後の記事タイトルを表示する

前後のタイトルを表示したい場合は、「単一記事の投稿(single.php)」に記述したコードの「前の記事へ」「次の記事へ」の箇所を「%title」に変更するだけです。

次のコードをそのまま上書きしても大丈夫です。

 

スマホで文字がはみ出る場合

スマホで文字がはみ出て、折り返している場合などは、design.cssに追加したコードの
幅の箇所を調整してみてください。

ページナビ スマホ

幅の変更は水色マーカーの箇所の割合(%)を調整します(合計100%)。

 

こちらの記事も参考になります

One Response to “WordPress 個別記事にページナビ[前の記事][次の記事]をつける方法”

コメントを残す

サブコンテンツ

このページの先頭へ