CSS: fit-contentを使ってWordPressのカテゴリリストを二階層・タブレット二列表示でsidebar.phpに配置

ページ内には広告が含まれます広告ポリシー

WordPressのサイドバーに、親カテゴリと子カテゴリを親子関係のまま表示し、モバイル・PCでは1列、タブレットでは2列など、画面幅に合わせてCSSを切り替える手順をまとめて紹介します。

WordPressで投稿カテゴリーをサイドバーに表示するとき、ただカテゴリ名を並べるだけなら簡単です。

しかし、親カテゴリと子カテゴリをきちんと二階層で表示しようとしたり、画面幅によって1列・2列を切り替えようとすると、意外とレイアウトが崩れやすくなります。

この記事では、sidebar.phpにカテゴリ一覧を表示し、CSSでモバイル・タブレット・PC向けに見た目を調整する方法をまとめます。

sidebar.phpに表示したカテゴリ一覧の完成例 — モバイル・PCでは1列で表示

カテゴリ一覧をsidebar.phpに表示する

まずは、カテゴリ一覧を表示するPHPコードを作成します。以下のコードをsidebar.phpの任意の場所に貼り付けます。

<ul class="categories">
    <?php
    $parent_categories = get_categories([
        'taxonomy'   => 'category',
        'parent'     => 0,
        'hide_empty' => false,
        'orderby'    => 'name',
        'order'      => 'ASC'
    ]);

    foreach ($parent_categories as $parent_cat) {
        echo '<li>';
        echo '<a href="' . esc_url(get_category_link($parent_cat->term_id)) . '">'
            . esc_html($parent_cat->name) . ' (' . esc_html($parent_cat->count) . ')</a>';

        $child_categories = get_categories([
            'taxonomy'   => 'category',
            'parent'     => $parent_cat->term_id,
            'hide_empty' => false,
            'orderby'    => 'name',
            'order'      => 'ASC'
        ]);

        if (!empty($child_categories)) {
            echo '<ul class="child-categories">';

            foreach ($child_categories as $child_cat) {
                echo '<li>';
                echo '<a href="' . esc_url(get_category_link($child_cat->term_id)) . '">'
                    . esc_html($child_cat->name) . ' (' . esc_html($child_cat->count) . ')</a>';
                echo '</li>';
            }

            echo '</ul>';
        }

        echo '</li>';
    }
    ?>
</ul>

このコードで、親カテゴリと子カテゴリを二階層のリストとして表示できます。

親カテゴリはparent => 0で取得
子カテゴリは親カテゴリのterm_idを使って取得
カテゴリ名の横に記事数を表示
カテゴリ名は名前順で表示
子カテゴリがある場合のみ、子カテゴリ用のリストを表示

hide_emptyをfalseにしているため、記事が0件のカテゴリも表示されます。記事が入っているカテゴリだけ表示したい場合は、trueに変更してください。

CSSでカテゴリ一覧の見た目を調整する

次にCSSで見た目を整えます。今回はモバイルファーストで基本の1列表示を作り、その後にタブレット向けの2列表示、PC向けの1列表示を追加します。

モバイル向けの基本CSS

モバイル向けにカテゴリリンクをタップしやすくしたCSS設定例 — モバイルではリンク全体をタップしやすくする

まずは、スマホでも見やすい1列表示を作ります。

aside ul.categories{
    margin: 0 1em 0 1.5em;
}

aside ul.categories li a{
    padding: .25em 0; /* タップしやすいように、縦幅を少し広げる */
    display: block; /* 要素全体をタップ可能にする */
}

aside ul.categories ul.child-categories{
    margin-left: 1em;
}

aタグにdisplay: block;を指定すると、リンクの反応範囲が横幅いっぱいに広がります。

文字だけでなく行全体をタップしやすくなるため、特にモバイル向けのサイドバーやメニューでは必須と言える設定です。

タブレットでは2列表示にする

タブレット向けにカテゴリ一覧を2列で表示した例 — タブレットではカテゴリ一覧を2列で表示

タブレットのように横幅が少し広い画面では、1列のままだと右側に余白ができすぎることがあります。

そこで、画面幅が767px以上になったらカテゴリ一覧を2列に切り替えます。

@media screen and (min-width: 767px){
    aside ul.categories{
        column-count: 2;
        column-gap: 2em;
        width: fit-content;
        min-width: 100%;
    }

    aside ul.categories > li{
        break-inside: avoid;
    }
}

column-count: 2;を指定すると、リストを2列に分けて表示できます。

さらにwidth: fit-content;を指定することで、中身に合わせた自然な幅を取りやすくなります。今回のように、カテゴリ名の長さがバラバラなリストでは便利です。

また、break-inside: avoid;を親カテゴリのliに指定しておくと、親カテゴリと子カテゴリのまとまりが途中で分断されにくくなります。

PCでは1列表示に戻す

PC表示では、サイドバー自体の横幅が限られていることが多いため、2列のままだとかえって窮屈に見える場合があります。

そのため、PC幅では再び1列表示に戻します。

@media screen and (min-width: 1025px){
    aside ul.categories{
        column-count: 1;
    }

    aside ul.categories li a{
        padding: 0;
        display: inline;
    }
}

タブレット向けに2列にしたカテゴリ一覧を、PCでは1列に戻す
モバイル向けに広げていたリンクのタップ範囲を、PCでは自然な文字幅に戻す
サイドバー内で間延びしない見た目に整える

完成版のCSS

最後に、ここまでのCSSをまとめます。

aside ul.categories{
    margin: 0 1em 0 1.5em;
}

aside ul.categories li a{
    padding: .15em 0;
    display: block;
}

aside ul.categories ul.child-categories{
    margin-left: 1em;
}

@media screen and (min-width: 767px){
    aside ul.categories{
        column-count: 2;
        column-gap: 2em;
        width: fit-content;
        min-width: 100%;
    }

    aside ul.categories > li{
        break-inside: avoid;
    }
}

@media screen and (min-width: 1025px){
    aside ul.categories{
        column-count: 1;
    }

    aside ul.categories li a{
        padding: 0;
        display: inline;
    }
}