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

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

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

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

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

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

get_adjacent_post()の使い方

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

[crayon]//Usage

//Parameters
$in_same_cat //隣接記事が同じカテゴリの場合取得。デフォルトは取得しないfalse
(boolean) (optional) Whether post should be in same category.
Default: false

$excluded_categories //隣接記事が特定のカテゴリの場合は取得しない。カテゴリIDで指定するみたい
(string) (optional) Excluded categories IDs.
Default: ''

$previous //前後どちらの隣接記事を取得するか。デフォルトはtrueで前の記事。falseなら次の記事。
(boolean) (optional) Whether to retrieve previous post.
Default: true
[/crayon]

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

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

[crayon][/crayon]

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

[crayon]

[/crayon]

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

[crayon]WP_Post Object
(
[ID] => 1292
[post_author] => 2
[post_date] => 2013-12-29 14:57:54
[post_date_gmt] => 2013-12-29 05:57:54
[post_content] => 次のコンテンツの中身が入ってました！長いので省略・・・
[post_title] => WordPressの投稿・カスタム投稿・固定ページの全件数を表示する方法
[post_excerpt] =>
[post_status] => publish
[comment_status] => open
[ping_status] => closed
[post_password] =>
[post_name] => wordpress%e3%81%ae%e6%8a%95%e〜長いので省略・・・
[to_ping] =>
[pinged] =>
[post_modified] => 2013-12-31 17:21:22
[post_modified_gmt] => 2013-12-31 08:21:22
[post_content_filtered] =>
[post_parent] => 0
[guid] => https://thecontent.jp/?p=1292
[menu_order] => 0
[post_type] => post
[post_mime_type] =>
[comment_count] => 0
[filter] => raw
)[/crayon]

各種情報の出力

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

[crayon]post_title ;?>[/crayon]

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

[crayon]ID);?>[/crayon]

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

[crayon]ID));?>[/crayon]

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

[crayon][/crayon]

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

[crayon]
//次の記事の情報取得
post_title ;?> //次の記事のタイトルを表示
ID);?> //次の記事のURLを表示
ID));?> //次の記事のアイキャッチ画像URLを表示

//前の記事の情報取得
post_title;?> //前の記事のタイトルを表示
ID);?> //前の記事のURLを表示
ID));?> //前の記事のアイキャッチ画像URLを表示
[/crayon]

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

[crayon]

[/crayon]

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