WordPressの次の記事・前の記事のボタンをアイキャッチ付きにする方法

今まで投稿(single.php)の下の方につける次の記事・前の記事はpost_linkで単純に出力していたのですが、LIGブログさんの記事下にあるようなアイキャッチ付きの次・前の記事が見やすくて良いな〜と思っていたのでちょいと調べて作ってみました。


使用するテンプレートタグ

僕が昔からコピペで多用していたテンプレートタグは「next_post_link」と「previous_post_link」です。このタグを使うと単純に次の記事・前の記事のテキストリンクが出力出来ますが、アイキャッチは出せません(出せない・・・はず)。

そこで、他に良さげなテンプレートタグが無いか調べてみたら発見しました。その素敵なテンプレートタグは「get_adjacent_post()」というやつです!

この子は ”現在の投稿記事の前後の投稿記事情報を取得する” 能力を持っています。これを使えば記事の前後のpost情報が出てくるはずなので、アイキャッチはもちろん、LIGのように最新の記事やで的な画像なりテキストも出せるはず。

get_adjacent_post()の使い方

Codex:get_adjacent_post()によると、テンプレートタグとパラメータはこんなの。

という事で、このタグを使って隣接する記事の情報を取得してみます。普通の記事用に使うので、カテゴリに関係なく隣接する記事情報を取得して適当な変数に入れます。

まずは次へボタンから。とりあえず$nextpostという変数に格納してみます。次へなので3番目のパラメータはfalseにすればOKすね。

これで$nextpostに次の記事の情報が入っているるはずなので確認してみます。最近var_dumpとかprint_rを覚えたので変数の中身を出力してみるのがマイブームです。

とりあえずprint_rでどんな情報が入ったか出力テストすると、無事に次の投稿の情報を格納していました!格納された情報が色々と出てきましたね。これでタイトル、パーマリンク、アイキャッチ画像が取得出来ます。

各種情報の出力

まずはタイトルの表示。タイトルの表示は簡単ですね。

次に記事のURL(パーマリンク)。この情報は入っていないので、投稿IDからパーマリンクを取得出来るテンプレートタグ、get_permalink()を使って取得&出力します。

最後にアイキャッチ。この情報も入っていないので、投稿IDからアイキャッチの画像IDを返すテンプレートタグ、get_post_thumbnail_id()と、画像IDから画像のURLを取得するwp_get_attachment_url()を使って引っ張ってきます。

次に前の記事(previous)の情報を取得しましょう。デフォルトで前の記事を引っ張ってくるようになってますのでそのままでOKですね。適当に$prevpostという変数に入れておきましょう。

これで必要なパーツは全てそろいました!

htmlで肉付けしたらこんな感じ?aをdisplay blockにして、みたいな。まぁ、後はお好みに装飾してもらえればOKですね!!※肉付けは適当なので、お好みのhtmlxcssでお願いしまする。

ただ、これだけだとアイキャッチが無い時や次・前の記事が無い時の挙動が微妙なので、今度の記事ではこれを改造して条件分岐を各所に盛り込んでみたいと思います。