WordPressで「前の記事へ」、「次の記事へ」をカスタマイズする

 訪問してくれた人がブログを気に入ってくれて、日付をさかのぼって順番に記事を読んでもらうのに便利なパーツです。当ブログのように検索流入でやってきて関連する記事だけを読んで離脱してしまう場合にはあまり効果がありませんが、日記形式のブログなどでは威力を発揮します。

 SEO やソーシャルネットワークによる拡散などに貢献しないため、カスタマイズ的にもあまり重要視されませんが、ユーザビリティのためには配置しておきたいパーツです。

テンプレートタグprevious_post_linkとnext_post_link

WordPress で「前の記事へ」と「次の記事へ」を実現するには、テンプレートタグである「previous_post_link」と「next_post_link」があるので、自分でリンクを作成しなくても済みます。記事を表示するための single.php を編集します。

基本的な使い方は次のとおりです。

テンプレートタグの get_previous_post と get_next_post を使って if 文を構成していますが、これは一番古い記事と一番新しい記事には前の記事と次の記事が存在しないため、余計な HTML を出力させないためのものです。

全体を post-navigation クラスの div タグで囲んでいますが、なくても問題はありません。ただ、後ほどスタイルシートで float を使用するため、あったほうがなにかと便利だと思います。

このように表示されます。

これは次のように指定しても同じ結果になります。

これは言い換えると、previous_post_link と next_post_link はこのような初期設定になっているということです。

テキストを「前の記事へ」と「次の記事へ」に

ここで、タイトルの文字の長さがまちまちだとデザインの統一感が損なわれると感じるかもしれません。そこで、今出力されているタイトルを「前の記事へ」と「次の記事へ」と変更したい場合には、次のように指定すればよいです。

これで表示されるテキストが変更されます。

CSSの編集

CSS を編集してデザインをカスタマイズしましょう。

左右横並びに配置するために、prev と next にそれぞれ float:left; と float:right; を指定しています。float を解除するために、post-navigation クラスに overflow:hidden; を指定します。float の解除には clearfix などいくつか方法がありますが、個人的にはこの方法が一番好みです。

結果はこうなります。

さらなる応用へ

このままでも十分実用的ですが、もう少しユーザビリティ向上のためにカスタマイズしてみることにします。

作成した「前の記事へ」と「次の記事へ」リンクの上にマウスをもってきてみてください。今のままだとテキスト部分だけがリンクになっていますが、prev と next クラスの div 領域全体がリンクになっていれば、訪問してくれた人にとってもっと便利になると思います。

いろいろ方法はあると思いますが、私は CSS の記述がシンプルにできることから次のようにしました。まずは先ほど編集した single.php を次のように変更します。

こうするとなにがよいのかというと、「≪」や「≫」の部分までリンクになるということです。「≪」や「≫」がテキストのままですと、CSS の記述が複雑になるので私はいつもこのように設定しています。これをスタイルシートで次のように指定します。

こうすることで、「前の記事へ」や「次の記事へ」のテキスト以外の div 領域全体がリンクとなるので、ユーザーにとって使いやすいナビゲーションになるのではないでしょうか。

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP