訪問してくれた人がブログを気に入ってくれて、日付をさかのぼって順番に記事を読んでもらうのに便利なパーツです。当ブログのように検索流入でやってきて関連する記事だけを読んで離脱してしまう場合にはあまり効果がありませんが、日記形式のブログなどでは威力を発揮します。
SEO やソーシャルネットワークによる拡散などに貢献しないため、カスタマイズ的にもあまり重要視されませんが、ユーザビリティのためには配置しておきたいパーツです。
テンプレートタグprevious_post_linkとnext_post_link
WordPress で「前の記事へ」と「次の記事へ」を実現するには、テンプレートタグである「previous_post_link」と「next_post_link」があるので、自分でリンクを作成しなくても済みます。記事を表示するための single.php を編集します。
基本的な使い方は次のとおりです。
1 2 3 4 5 6 7 8 9 10 11 12 | <div class="post-navigation"> <?php if (get_previous_post()): ?> <div class="prev"><?php previous_post_link(); ?></div> <?php endif; if (get_next_post()): ?> <div class="next"><?php next_post_link(); ?></div> <?php endif; ?> </div> |
テンプレートタグの get_previous_post と get_next_post を使って if 文を構成していますが、これは一番古い記事と一番新しい記事には前の記事と次の記事が存在しないため、余計な HTML を出力させないためのものです。
全体を post-navigation クラスの div タグで囲んでいますが、なくても問題はありません。ただ、後ほどスタイルシートで float を使用するため、あったほうがなにかと便利だと思います。
このように表示されます。
これは次のように指定しても同じ結果になります。
1 2 3 4 5 6 7 8 9 10 11 12 | <div class="post-navigation"> <?php if (get_previous_post()): ?> <div class="prev"><?php previous_post_link('« %link', '%title'); ?></div> <?php endif; if (get_next_post()): ?> <div class="next"><?php next_post_link('%link »', '%title'); ?></div> <?php endif; ?> </div> |
これは言い換えると、previous_post_link と next_post_link はこのような初期設定になっているということです。
テキストを「前の記事へ」と「次の記事へ」に
ここで、タイトルの文字の長さがまちまちだとデザインの統一感が損なわれると感じるかもしれません。そこで、今出力されているタイトルを「前の記事へ」と「次の記事へ」と変更したい場合には、次のように指定すればよいです。
1 2 3 4 5 6 7 8 9 10 11 12 | <div class="post-navigation"> <?php if (get_previous_post()): ?> <div class="prev"><?php previous_post_link('« %link', '前の記事へ'); ?></div> <?php endif; if (get_next_post()): ?> <div class="next"><?php next_post_link('%link »', '次の記事へ'); ?></div> <?php endif; ?> </div> |
これで表示されるテキストが変更されます。
CSSの編集
CSS を編集してデザインをカスタマイズしましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .post-navigation { overflow: hidden; padding: 12px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; } .prev { float: left; } .next { float: right; } |
左右横並びに配置するために、prev と next にそれぞれ float:left; と float:right; を指定しています。float を解除するために、post-navigation クラスに overflow:hidden; を指定します。float の解除には clearfix などいくつか方法がありますが、個人的にはこの方法が一番好みです。
結果はこうなります。
さらなる応用へ
このままでも十分実用的ですが、もう少しユーザビリティ向上のためにカスタマイズしてみることにします。
作成した「前の記事へ」と「次の記事へ」リンクの上にマウスをもってきてみてください。今のままだとテキスト部分だけがリンクになっていますが、prev と next クラスの div 領域全体がリンクになっていれば、訪問してくれた人にとってもっと便利になると思います。
いろいろ方法はあると思いますが、私は CSS の記述がシンプルにできることから次のようにしました。まずは先ほど編集した single.php を次のように変更します。
1 2 3 4 5 6 7 8 9 10 11 12 | <div class="post-navigation"> <?php if (get_previous_post()): ?> <div class="prev"><?php previous_post_link('%link', '« 前の記事へ'); ?></div> <?php endif; if (get_next_post()): ?> <div class="next"><?php next_post_link('%link', '次の記事へ »'); ?></div> <?php endif; ?> </div> |
こうするとなにがよいのかというと、「≪」や「≫」の部分までリンクになるということです。「≪」や「≫」がテキストのままですと、CSS の記述が複雑になるので私はいつもこのように設定しています。これをスタイルシートで次のように指定します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | .post-navigation { overflow: hidden; padding: 12px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; } .prev a { position: relative; float: left; width: 50%; } .next a { position: relative; float: right; width: 50%; text-align: right; } |
こうすることで、「前の記事へ」や「次の記事へ」のテキスト以外の div 領域全体がリンクとなるので、ユーザーにとって使いやすいナビゲーションになるのではないでしょうか。
Comment