よつば手帖

メニュー
よつば手帖 よつばデザイン後藤の日々の記録

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

LINEで送る
Pocket

zengo-kiji
WordPressのテーマ制作はベースとなるものを自分で作って、そこからカスタマイズしてます。
テンプレートタグも非推奨のものは使わないように、Codexや書籍などを参考にしながら見直してます。(query_postsは卒業)
CSSはSassで書いてるのですが、最近Bootstrapがバージョン3になったり、Font-Awesomeがバージョン4になったりしたのもあり、ベーステーマを作りなおしました。
その際、前後の記事へのリンクが結構カスタマイズ出来ると知ったのでご紹介します。
 
 

前後の記事へのリンクを追加する

「前の記事へ」や「次の記事へ」ののリンクを呼び出すタグは下記。(nextも同じように使うので省略してます)

tag-1
 
次の記事って新しいの?古いの?って一瞬迷いません?
 
 

前後の記事へのリンクの記述方法その1:シンプルな書き方

普通に記述すると下記のようになります。

このテンプレートタグは()の中に記述する事でカスタマイズ出来ます。
tag-2

意味的にはこのような感じ。
tag-3

綠色の部分はどのような形式で出力するか?通常は%linkを使用
黄色の部分は出力されるテキスト「次の記事へ」等
水色の部分はカテゴリー内でのリンクにするかどうか?
ピンク色の部分はカテゴリーを除外したい場合のIDを指定
 
 

前後の記事へのリンクの記述方法その2:リンク部分を装飾する

 

ソースコードは次のようになります。

タグで囲われます。
 
 

前後の記事へのリンクの記述方法その2:リンク部分の文章を変更する

%linkの後に,で区切って”で囲った部分に書いた文字がリンクになります。

下記のようになります。

テキストの内容は自由です。

 
 

前後の記事へのリンクの記述方法その3:カテゴリー内の記事にリンクする

全体の投稿では無く、例えば最新情報のカテゴリーの記事だけで前後のリンクを貼る場合などはtrueを記述します。

 
 

前後の記事へのリンクの記述方法その4:特定のカテゴリーを除外する

特定のカテゴリーの記事にはリンクしたくない場合はカテゴリーIDを指定する事で除外できます。(カテゴリーID=3の記事を除外する場合)

 
 

前後の記事へのリンクの記述方法その5:アイコンフォントを使用して、アイコンにもリンクを貼る

前後の記事リンクの前にアイコンフォントを入れる方法です。

FontAwasomeを利用しているので、下記の矢印のアイコンフォントを利用します。
yajirushi

下記のように書くとアイコン自体にはリンクが貼られません。

これは気持ち悪い。

 
このように書けばアイコンも含めてリンクになります。%titleで記事のタイトルを表示します。その直前にアイコンフォントの表示指定をします。

tag-4

 
 

前後の記事へのリンクの記述方法その6:一番新しい記事の時、一番古い記事の時に表示を変更する

一番新しい記事や一番古い記事になったときに表示を変える方法です。
(CSSは省いているので、各自追加してください)

下記の条件分岐を使えば可能となります。(以前の記事がある場合)

タグの意味は下記のような感じです。

実際に使用しているもの。

このような感じで表示されます。

post-navi-pc
スマホ版ではボタンっぽく表示されるように加工しています。
post-navi

まとめ:前後リンクのカスタマイズは楽しい

テンプレートタグを理解していけば、それぞれのWebサイトにあった体裁で使えるようになります。
PHPとか苦手でもちょっとだけやってみると意外と出来ちゃったりするのがWordPressの良いところだと思います。
他のテンプレートタグもCodexを参考にしながらやってみると表現の幅が広がりますよー。

参考リンク

Function Reference/previous post link « WordPress Codex

テンプレートタグ/previous post link – WordPress Codex 日本語版

前後の記事へのナビゲーションカスタマイズメモ // understandard

この記事を書いている途中にほぼ同じ内容がエビスコムさんの書籍にも掲載されていて、公開しようかどうか迷いました。
アイコンフォントを使うところまでかぶってました。p117あたりに事例とともに詳しく解説されてるので、ぜひ書籍でもチェックしてみてください。
WordPress ステップアップブック (STEP UP BOOK)
WordPress ステップアップブック (STEP UP BOOK)

こちらの書籍もよろしくお願いします。
現場でかならず使われているWordPressデザインのメソッド
現場でかならず使われているWordPressデザインのメソッド

ps:関連記事を表示するプラグインを「WordPress Related Posts」にしてみました。
WordPress › WordPress Related Posts « WordPress Plugins

この記事を書いた人
後藤賢司 よつばデザイン 代表
Webディレクター・デザイナー 日本, 東京&大分
著書
WordPressプロフェッショナル養成読本 [Webサイト運用の現場で役立つ知識が満載! ] (Software Design plus)
WordPressプロフェッショナル養成読本 2014年10月のすごいコンピュータ書で1位
現場でかならず使われているWordPressデザインのメソッド
現場でかならず使われているWordPressデザインのメソッド AmazonのWebデザイン、デザイン、デザイン・グラフィックスで1位