WordPress で wp_list_pages() 及び wp_nav_menu() で現在のページ並びに子孫のページで付加される class について

WordPress で現在のページもしくは子孫のページに居る時に、親や子などを CSS 色付けしたい場合はありませんか。今回はその方法についてご紹介します。

wp_list_pages() のページ一覧で色つけをしたい

wp_list_pages() でページ一覧を出している状態で、現在のページの部分に色をつける方法をご紹介します。

ページ一覧の作り方

まずページ一覧は以下のように普通に作れば良いです。

1

<ul><?php wp_list_pages('title_li='); ?></ul>

色を付ける方法

この関数で作ったページ一覧で、現在のページに当たるものには .current_page_item という class が付加されます。また、現在のページの親に当たるものには .current_page_ancestor という class が付加されます。つまり、この class に対して style を設定しておけば良いわけです。

現在のページに色を付ける

例えば現在のページに色を付ける際は以下のようにします。内包されている子要素がある場合にその要素まで影響しないように、内包されている要素の色は明示的にリセットします。この点はご自分の環境に合わせてカスタマイズしてください。

1
2
3
4
5
6

.current_page_item a {
    background: #ffe3db;
}
.current_page_item ul li a {
    background: none;
}

これで現在のページに当たる要素の色が変わります。

親ページに色を付ける

親の子、内包されているページにアクセスした場合、現在のページに色を付けるのではなく、親だけに対して色を付ける場合は以下のように親の色を変えるスタイルを指定します。

1
2
3
4
5
6

.current_page_ancestor a {
    background: #ffe3db;
}
.current_page_ancestor ul li a {
    background: #fff;
}

wp_nav_menu() のページ一覧で色つけをしたい

wp_nav_menu() は WordPress の管理画面のメニューより自由にページ一覧を構築できる機能です。この機能で作ったページ一覧にも class が付加されますが、先ほどの wp_list_pages() と付加される class 名が違い、.current-menu-item と .current-page-ancestor が付加されます。

現在のページに色を付ける

現在のページに色を付ける際は .current-menu-item を使います。

1
2
3
4
5
6

.current-menu-item a {
    background: #ffe3db;
}
.current-menu-item ul li a {
    background: none;
}

親ページに色を付ける

親だけに対して色を付ける場合は以下のように .current-page-ancestor を使います。

1
2
3
4
5
6

.current-page-ancestor a {
    background: #ffe3db;
}
.current-page-ancestor ul li a {
    background: #fff;
}

おわりに

それぞれ class のスペルが違うかハイフンなのかアンダーバーなのかの違いとなります。統一して欲しいものですが、バラバラの方が便利の場合もあるのかもしれません。このように自動で付加される class にスタイルを当てれば現在のページ等を色付けすることは可能です。また、独自で実装するページ一覧などもこの class 名を真似して付加しておくと、他の人が弄るときや同時にスタイルを設定することができたりして便利かもしれません。