WordPress 次の記事・一つ前の記事へのリンクの配置方法

WordPressオリジナルテーマを作成した際にちょっと詰まったりした部分を順次公開して行こうと思います。しばらくはこれでネタに困らない！

半分は自分のための備忘録として。
半分はこれからテーマを作ろうとしているみなさんのお役に立てればと。

次の記事/一つ前の記事へのリンク

最初に説明するのは、ブログ記事下に表示する「次の記事」とか「一つ前の記事」へのリンクについて。

リンク配置自体は簡単で、次の記事へのリンクの場合は…

<?php next_post_link(); ?>

一つ前の記事へのリンクの場合は…

<?php previous_post_link(); ?>

それぞれをループの中に貼り付けるだけ。ループの説明してないですね。また今度書きます！

なにか「箱」に入れたい場合

これだけだと簡単なのですが、ぼくが悩んだのは「次の記事/前の記事が無い場合」の表示。

divという箱に入れて、マウスが上に来た時に背景色を変えたかったくて…

単純に上記のコードをdiv要素で囲むと、こんなの”«”とか、こんなの”»”が勝手に付与されて、CSSで思うように弄れず、ちょっと悩むことに…。

最終的にぼくの目的が満たせるコードは以下のような形になりました。

<div class="pagination-single">
  <div>
    <?php previous_post_link('<div class="previous-post">%link</div>'); ?>
  </div>
  <div>
    <?php next_post_link('<div class="next-post">%link</div>'); ?>
  </div>
</div>

コード内容解説

ちょっと分かりづらいですが、最初の

<div class="pagination-single">

は、「新しい記事」と「一つ前の記事」全体を囲う箱です。

一つ階層が下のdiv要素2つは、左右均等に(width=50%で)分かれるようにしたかったので、CSSのfloatプロパティを使用して並べています。

で、肝心のPHPコード部分ですが。
previous_post_link()の()内に値がない場合、出力される内容は…

« <a href="ひとつ前の記事のURL">記事のタイトル</a>

となります。
やっかいなのが、”«”が勝手に付与されることと、それがa要素内に含まれないこと(CSSが適用出来なかった)。

そこで、()内の引数に出力フォーマットを指定することで、任意のフォーマットで出力でき、更に、一つ前の記事が無い場合に余計な要素が出力されずに済ますことができます。(next_post_link()でも同様)

ちなみに、ぼくがどこに詰まったのかっていいますと、てっきり記事の有り無しを判断するための関数か、if文的なもので分岐できると思い込んでまして…
しばらく悩みました。

それぞれの関数の詳細は以下を参考。
テンプレートタグ/next post link – WordPress Codex 日本語版
テンプレートタグ/previous post link – WordPress Codex 日本語版

余談:伝えるって難しいですね…

上で書いた記事は、自分で気付いた時は「すげー！！大発見っ！！」なんて思ったりしたんですが、記事にしてみるといたって単純な内容ですね。
あと…解説するのって難しいですねX( ちゃんと伝わるのかな？

みんなのWordPressのPHPソースが見れればこんなに悩まなかったかも知れないのに！！
ってことで、ぼくは洗いざらい吐いていこうと思います:D