WordPress 個別記事にページナビ[前の記事][次の記事]をつける方法
個別記事の前後の記事に関連性がある場合、「前の記事へ」「次の記事へ」などの
ページナビ(ページネーション)があった方が便利ですよね。
ここではWordPressの個別記事ページにページナビを表示する方法をご紹介します。
ページナビを設置してユーザビリティを上げる
WP-PageNaviなどのプラグインで、トップページやカテゴリページ、アーカイブなどに
ページナビを表示することはできますが、個別記事には表示されません。
前後の記事に特に関連性のない「ごちゃまぜトレンドブログ」などの場合
ページナビは特に必要ありません。
しかし、ドラマや漫画などの記事を書いている場合は
「第1話~最終回」のように話が続くので、前の話や次の話などに
誘導してくれるページナビがあった方が便利です。
設置するページナビはこんな表示になります。
前後の記事のタイトルを表示することもできます。
ここで紹介する方法は、同じカテゴリ内の前後の記事にリンクする方法です。
例えばカテゴリが次のような場合、ドラマの感想が第1話から順に読めます。
他のカテゴリの記事が途中に入らないので読みやすいですね。
- ドラマ感想
- キャスト
- 主題歌、その他
個別記事にページナビを設置する
特にプラグインは必要なく、簡単に設置できますので、早速やってみましょう。
WordPress管理画面>外観>テーマ編集をクリックします。
右のメニューの「単一記事の投稿(single.php)」をクリックします。
「前の記事」「次の記事」と表示する
個別記事ページの好きなところに下のコードをコピーします。
1 2 3 4 5 6 7 8 9 10 11 |
<div class="navigation clearfix"> <p class="navileft"> <?php previous_post_link('« %link', '前の記事へ', TRUE, ''); ?> </p> <p class="navitop"> │<a href="<?php echo home_url(); ?>">HOME</a>│ </p> <p class="naviright"> <?php next_post_link('%link »', '次の記事へ', TRUE, ''); ?> </p> </div> |
貼り付けたら「ファイルを更新」をクリックします。
例えば賢威テンプレートで、本文のすぐ下に設置する場合は次の箇所です。
「前の記事へ」「次の記事へ」という言葉を変えたい場合は、記述している文字を変更するだけでOKです。
次に右のメニューの「design.css」をクリックして、任意の場所に次のコードを記述します。
内容的には、/*●ページネーション WP用*/と/*コメントナビ*/の間あたりでいいと思います。
賢威テンプレートであれば、1~25行目までコピーしておきましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/*●個別記事のページナビ*/ .navigation { text-align: center; padding: 1em 0; width: 100%; } .navitop { float:left; width:12%; text-align:center; } .navileft { float:left; width:44%; text-align:left; word-break:break-all; line-height:1.5em; } .naviright { float:right; width:44%; text-align:right; word-break:break-all; line-height:1.5em; } |
貼り付けたら「ファイルを更新」をクリックして設置完了です。
「前の記事」や「次の記事」がない場合どうなるかというとこんな感じです。
前後の記事タイトルを表示する
前後のタイトルを表示したい場合は、「単一記事の投稿(single.php)」に記述したコードの「前の記事へ」「次の記事へ」の箇所を「%title」に変更するだけです。
次のコードをそのまま上書きしても大丈夫です。
1 2 3 4 5 6 7 8 9 10 11 |
<div class="navigation clearfix"> <p class="navileft"> <?php previous_post_link('« %link', '%title', TRUE, ''); ?> </p> <p class="navitop"> │<a href="<?php echo home_url(); ?>">HOME</a>│ </p> <p class="naviright"> <?php next_post_link('%link »', '%title', TRUE, ''); ?> </p> </div> |
スマホで文字がはみ出る場合
スマホで文字がはみ出て、折り返している場合などは、design.cssに追加したコードの
幅の箇所を調整してみてください。
幅の変更は水色マーカーの箇所の割合(%)を調整します(合計100%)。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/*●個別記事のページナビ*/ .navigation { text-align: center; padding: 1em 0; width: 100%; } .navitop { float:left; width:14%; text-align:center; } .navileft { float:left; width:43%; text-align:left; word-break:break-all; line-height:1.5em; } .naviright { float:right; width:43%; text-align:right; word-break:break-all; line-height:1.5em; } |
[…] このサイトでもやっとだ、参考サイト […]
[…] 続けて読めないことが不便だなと思ったので即検索、ページナビのつけ方を「WordPress×賢威で稼ぐトレンド講座」のゆどの様に教えてもらいました。説明通りに入力しただけで出来ました […]