Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

WordPress カスタム投稿タイプのアーカイブをカスタムメニューで追加してCSSクラスもいい感じに付与

More than 3 years have passed since last update.

歴史的経緯

  • カスタム投稿タイプ自体は ver 2.9から実装されている
  • 脚光を浴び始めたのは ver 3.0 ぐらいから
  • カスタム投稿タイプはアーカイブが持てる、かつそのアーカイブへのリンクを作成する関数もあるのに、なぜか外観>メニューのカスタムメニューでは追加できなかった。
    • ただし、メニューの「カスタムリンク」を使えばリンク自体は作成できたが、カスタムリンクなので current-menu-item といったCSSクラスは付与されなかった。
  • よってカスタムメニューでカスタム投稿タイプのアーカイブを追加(かつ current などのCSSクラスが適切に付与される)ためにはプラグインを利用する必要があった

ver 4.4以降

リリースノートにコメントとして記載されていないが、この機能はver 4.4で実装されている。

https://core.trac.wordpress.org/ticket/16075

  • トラックにあるように 'has_archive' => trueであれば出てくる
  • 文字列をいい感じにしたい場合は labelsarchives の値を設定しておく

https://codex.wordpress.org/Function_Reference/register_post_type

こうやって作成したメニューではカスタム投稿タイプのアーカイブを表示してる時、そのメニュー要素に current-menu-item クラスが付与されている。

ところが

カスタム投稿タイプの各投稿を表示してる時、カスタム投稿タイプのアーカイブのメニュー要素には current-post-parentcurrent-post-ancestor といった「この投稿の親(先祖)に当たる要素につくべきCSSクラス」が付与されない。
(ちなみに、投稿の場合、その投稿が所属するカテゴリーがメニューにあればそのメニューには付与されている)
なんてこった。

どうすんの

nav_menu_css_class フィルターフックで。
付与する CSS クラスは ドキュメント見てよしなに。
https://developer.wordpress.org/reference/functions/wp_nav_menu/

※ただしこのコードは将来的なコアの実装でいらなくなる可能性あります

<?php
function my_special_nav_class( $classes, $item ) {
    // カスタム投稿タイプ special の投稿が表示されてる時カスタム投稿タイプアーカイブがメニューにあればCSSクラスを追加。
    if ( is_singular( 'special' ) && $item->type === 'post_type_archive' && $item->object === 'special' ) {
        if ( ! in_array( 'current-post-ancestor', $classes ) ) {
            $classes[] = 'current-post-ancestor';
        }
    }
    return $classes;
}

add_filter( 'nav_menu_css_class', 'my_special_nav_class', 10, 2 );

現場からは以上です。

gatespace
仙台で働く(株)デジタルキューブ(め組)の Director。 _s Contributor / JAWS-UG 東北 / 網元起動隊
https://gatespace.jp/
digitalcubeinc
デジタルキューブは AWS Partner Network (APN) アドバンスドテクノロジーパートナーです。
https://ja.amimoto-ami.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away