Web制作
「the_post_navigation()」を、CSSでアレンジ【WordPress】

「the_post_navigation()」を、CSSでアレンジ【WordPress】

2022.02.09

WordPressの記事中に、次の記事や前の記事へのリンクを設定する方法はいくつかありますが、『the_post_navigation()』が一番ラクなような気がします。

でも、記事のタイトルが長いときに、若干見た目が崩れてしまうので、CSSを使ってアレンジしてみました。自分でオリジナルテーマを作成している方は、よろしければ参考にしてみてください。

the_post_navigation()の確認

これは、WordPressにもともと用意されている関数で、記事のループ内に設置すれば、前後の記事へのリンクを自動で表示してくれます。

実際に設置されるタグは、こんな感じです。

<nav class="navigation post-navigation" aria-label="投稿">
    <div class="nav-links">
        <div class="nav-previous">
            <a href="#" rel="prev">ここに前のタイトル</a>
        </div>
        <div class="nav-next">
            <a href="#" rel="next">ここに次の記事のタイトル</a>
        </div>
    </div>
</nav>

前後のリンクを囲うように「.nav-links」のdivタグがありますし、その直下に前の記事と次の記事へのリンクがdivタグで追加されるので、ものすごく扱いやすい構成になっています。今回は、このクラスを使ってカスタマイズしていきます。

広い画面用のレイアウト

最初に、PCやタブレットなど、広い画面用のレイアウトとして、前後のリンクを左右に配置してみましょう！

先ほど確認したように、「.nav-links」の中に前後のリンクがあるので、「.nav-links」を親要素としてflexを設定します。あと、このままでは読みづらいので、子要素の前後に、とりあえず隙間を空けると、こんな感じの見た目になります。

ただ、前後の記事のタイトルの長さが揃っていれば問題なさそうですが、今回のサンプルのように、一方が長く一方が短い場合、高さの差が激しくなり、見た目が悪くなってしまいます。

こんな時は、PHPを使って文字数を制御するのが常套手段ですが、今回はCSSで見た目を調整してみます。

題名を一行で表示させて、はみ出した部分を三点リーダーで表示

今回、ここで使うCSSは、こちらです。

flex: 0 0 10rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

各CSSについて説明をしていくと

「flex: 0 0 10rem;」・・・flexの子要素として、左右に並ばせています。
「white-space: nowrap;」・・・改行させないようにします。
「overflow: hidden;」・・・flexで指定した長さをはみ出したときに、そのはみ出した部分を隠します。
「text-overflow: ellipsis;」・・・テキストがはみ出したときに、末尾に三点リーダーを表示させます。

このパターンでレイアウトしたのが、こちらです。

「text-overflow」というプロパティを使うと、こんな風に端っこに三点リーダーが表示されます。ただ、今回のCSSでは改行を無効にしているので、行を増やすことはできません。

とはいえ、行数を増やしたいときもあると思いますので、今回は、複数行での設定もしてみます。ただ、ネットで検索すると、すぐに方法は見つかるのですが、チョット注意点があるので気をつけてください。

題名を二行で表示させて、はみ出した部分を三点リーダーで表示

まず、わたしのWordPressでも使っていますが、今回使うCSSがこちらです。

flex: 0 0 10rem;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;

ここで使っているCSSは、こちらです。

「display: -webkit-box;」・・・divタグの設定です。
「-webkit-box-orient: vertical;」・・・コンテンツの中身を、縦方向にレイアウトします。
「-webkit-line-clamp: 2;」・・・表示させる行数を決めます。
「overflow:hidden;」・・・先ほどと同様にはみ出した部分を隠します。

このCSSでレイアウトしたのが、こちらになります。

まず「display:-webkit-box;」について、初めて見た方が多いと思いますが、これは昔のflexボックスの指定方法です。

今は、レイアウトを指定するときにflexを使いますが、CSSの中では最近のものです。ですので、今の形に決まるまで、いろいろと時間がかかり、複数のflexボックスのプロパティが存在します。そして、今回使っている「display:-webkit-box;」は、そのいろいろある形の中の一つです。

ただ、「-webkit」というベンダープレフィックスが付いていることからわかるとおり、過去の仕様で、逆に今の「display:flex;」で指定すると、わたしの環境ではきちんと動作しませんでした。ですので、今回の「display:-webkit-box;」は、過去ユーザーのための対応なのかなと思っています。

そして、「-webkit-box-orient」、「-webkit-line-clamp」も、ベンダープレフィックスが付いていることから、非推奨のプロパティとも言えると思います。

そのため、今はキチンと表示されてたとしても、今後、ブラウザのアップデートでプロパティが変わったり、無効になる可能性もあります。ただ、先ほどふれたように、わたしのブログでもこのプロパティを使っています。というのも、これまで二行だったのが急に三行やそれ以上になったとしても、あまり大きな影響もないので、まあ、気付いたらなおそうかなあ、という気持です。

ただ、お客さんのサイトで使う場合は、突然見た目が変わると、最悪クレームにつながる可能性もあるので、もしそういったクライアントのサイトで使う場合は、リスクがあることもしっかり認識しておいてください。

スマートフォンなど、小さな画面用のレイアウト

次に、スマホなど小さな画面用のレイアウトですが、flexと子要素のCSSを調整して、縦方向に並ぶようにします。

.nav-links {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.nav-previous,
.nav-next {
    flex: 0 0 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

@media (min-width: 500px) {
    .nav-links {
        flex-direction: row;
        justify-content: space-between;
    }

    .nav-previous,
    .nav-next {
        flex: 0 0 10rem;
    }

}

こちらは、ブレイクポイントを500pxで設定したサンプルですが、特別説明は必要ないかと思います。

一応、サンプルはこんな見た目になります。