WordPressで「前の記事」「次の記事」ナビのカスタマイズ

ワードプレスではよく投稿ページの下に「<< 前の記事」「次の記事 >>」のリンク(ナビゲーション)が表示されていますが、テーマによっては最初から準備されていなかったり、または意図した通りに設定されていなかったりという場合があります、、

今回は前後の記事のリンク(ナビゲーション)をつける方法を探してみたのですが、あまりにも基本的な機能のためかプラグインではそれらしい物は見つけられませんでした?

基本的には記事ページ(single.php)にテンプレートタグ/previous post linkを記述するようで、以下のようなコードを single.php の表示させたい場所に記述します。

基本的には

または

リンクのテキストを変更する場合は

Webフォントの矢印アイコンを使う場合は

同一カテゴリーで前後の記事

3つ目の引数に「ture」を追加することで、記事と同じカテゴリー内で前の記事、次の記事へのリンクとなります。

除外する記事を設定する

リンクで除外したい記事がある場合は、4つ目の引数に記事のIDを記入します。
複数ある場合はカンマで区切ります。

条件分岐を入れたコード

前後の記事が存在しない時には非表示になります。

前の記事のサムネイル、次の記事のサムネイルを表示

 

なんとなく理屈は判ったような気はするのですが、、、気がするだけかもしれません ^^;)

実際にページに載せる場合はCSSで見栄えを整えてやらねばならないでしょうし、やはり大変な作業かもしれません、、、

参考:ITTIさま WordPress:「前の記事」「次の記事」7つのカスタマイズ方法

 

美しいナビを見つけました

LIVE YOUR LIFEさまの WordPressで前の記事&次の記事へのリンクをサムネイル画像付きで表示する方法

に自分好みの美しいレイアウトのソースを見つけました。

個別投稿(single.php)

追加CSS

 

ただ、自分の好みとしては、記事が存在しないときの  ホーム の表示が不要に思えたので #prev_next_home{  以下の部分に display: none; を追加して非表示にすることにしました。

必要になったらdisplay: none;を消せば良いかなと、、、

ホームの表示をブロック

 

実際の表示例

  • 前に投稿ページが無い場合
  • 前後に投稿ページがある場合
  • 次に投稿ページが無い場合

 

PHPとか触るのは凄く怖かったのですがやってみると(コピペですが)意外に面白そうな気がしてきました^^;)、、、もちろんsingle.phpは子テーマから編集しました

今回は備忘録と言うよりも、ほぼブックマークですね~ ^^;)

参考にさせていただいた

大変勉強になりました。ありがとうございました。

 


スポンサーリンク