Hiromuブログ

最近はこちら(https://zenn.dev/hiromu)が本体

ナビゲーション(次の記事、前の記事)の実装

今回はページ下によくあるナビゲーション(次の記事、前の記事)について。

どのサイトにもだいたいあるごく普通のものですがWordPressのテーマとして実装するにはそれなりに苦労しました。

実装したものは以下のようになっています。

blog014

まず一番上が通常の状態。前の記事と次の記事のURLをWordPressの関数で取得しリンクを張っています。

なお、ポイントとして記事のタイトルが長すぎると記事タイトルの表示が2行になってしまいレイアウトが崩れてしまうため、mb_substr関数で文字数を調整しています。(試してないもののcssのdisplay:noneでもいいかも)

 

そして2番目の次の記事がない状態、つまり最新記事の場合です(最初の記事も前の記事がない状態なので同様)。

この場合うまく処理をいれないとただの空白になってしまいます。そうすると見た目のバランスがいまいちよくないので、リンクなしのスタイルを変えたテキストと調整用のbrタグを入れました(brタグで調整とかいけてないかもしれませんが・・・簡単だったので)。

 

3番目のマウスのフォーカス処理についてはaタグでうまく全体を囲うことでhoverにより簡単に実装できました。

blog015

 

以下ソースです。

single.php
<?php
    $prev_post = get_previous_post();
    $next_post = get_next_post();
    if( $next_post || $prev_post ):
?>

<?php endif; ?>

 

style.css

.navigation{
    padding:30px 15px 30px 15px;
    font-size:90%;
}
    .navigation .alignleft{/*前の記事があるとき*/
        padding:5px;
        float:left;
        text-align:left;
        width:288px;
        border:#008FFF 1px solid;
        background:#9FE1FF;
    }
    .navigation .alignleft2{/*前の記事がないとき*/
        padding:5px;
        float:left;
        text-align:left;
        width:288px;
        border:#aaa 1px dotted;
        background:#fff;
        color:#aaa;
    }
    .navigation .alignright{/*次の記事があるとき*/
        padding:5px;
        float:right;
        text-align:right;
        width:288px;
        border:#008FFF 1px solid;
        background:#9FE1FF;
    }
    .navigation .alignright2{/*次の記事がないとき*/
        padding:5px;
        float:right;
        text-align:right;
        width:288px;
        border:#aaa 1px dotted;
        background:#fff;
        color:#aaa;
    }
    .navigation a:hover{
        background: #008FFF;
        color: #fff;
        text-decoration: none;
    }
    .navigation .alignleft {
        display: block;
    }
        .navigation .alignleft:hover{
            background: #008FFF;
            color: #fff;
            text-decoration: none;
        }
    .navigation .alignright {
        display: block;
    }
        .navigation .alignright:hover{
            background: #008FFF;
            color: #fff;
            text-decoration: none;
        }