※記事内に商品プロモーションを含む場合があります
こんにちは@eaxjpです。
大手メディアも実装済みらしいのでいじって楽しむブログでも実装してみました。
前の記事・次の記事へのリンク
実際のコードはこちらのサイトを参考にしました。
大手メディアも実装済み！Wordpressの個別記事ページ(single.php)に｢次の記事｣｢前の記事｣のリンクを表示する方法 | gori.me（ゴリミー）
コードはphpなのでsingle.php中の好きな場所にコピペするだけです。
一応コードも載せときます。
<?php previous_post_link('%link', '%title', TRUE, ''); ?>
<?php next_post_link('%link', '%title', TRUE, ''); ?>
上の行は前の記事。下の行が次の記事へのリンクとなります。
同一カテゴリ内記事しか表示しないのと、次・前の記事は無い場合は空白となります。
なので、その辺はCSSやPHP ifなどで変更するしか無いと思います。
レイアウト
phpコードは直接aタグを出力するのでそのままだど見栄えが悪いです。
なのでBLOGEではul li タグを使ってレイアウトしました。
<ul class="ct-navi-div">
<li class="ct-navi-div-i">
<?php previous_post_link('%link', '%title', TRUE, ''); ?>
</li>
<li class="ct-navi-div-i">
<?php next_post_link('%link', '%title', TRUE, ''); ?>
</li>
</ul>
CSS
/*------------------------------------------------------------
個別記事 前次NAVI
-------------------------------------------------------------*/
.ct-navi-div{
margin-top:5px;
list-style-type:none;
text-align:center;
}
.ct-navi-div-i{
background-color:#CFDCFE;
display:inline-block;
width:270px;
padding:5px;
margin:0px;
border: solid 1px #b8b8b8;
}
本当は高さも揃えたかったのですがline-hightも効かず
Chormeの要素の検証でもダメだったので高さは諦めました。
最初はDIV要素でレイアウトをしていましたがどうにもダメだったので
ul li要素にしました、クラス名はその時の名残です。
今回はフロートは使わずdisplay:inline-block;を使ったので
楽にレイアウトできました。
最後にCSSに丸角とホバーを付けて完成にしました。
まとめ
ちなみに、後日記事にしようと思ってますが
レスポンシブデザインの場合、親ブロック（上のCSSではct-navi-div）に
Widthで幅を指定するとiPhone上で表示した時そこのブロックだけ画面サイズを
突き破って表示され、全体を見ようと縮小すると他のブロックが小さくなるので
レスポンシブデザインの場合は注意してください。
