1. gatespace

    Posted

    gatespace
Changes in title
+WordPress カスタム投稿タイプのアーカイブをカスタムメニューで追加してCSSクラスもいい感じに付与
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,47 @@
+# 歴史的経緯
+
+- カスタム投稿タイプ自体は 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`であれば出てくる
+- 文字列をいい感じにしたい場合は `labels` で `archives` の値を設定しておく
+
+https://codex.wordpress.org/Function_Reference/register_post_type
+
+こうやって作成したメニューではカスタム投稿タイプのアーカイブを表示してる時、そのメニュー要素に `current-menu-item` クラスが付与されている。
+
+# ところが
+カスタム投稿タイプの各投稿を表示してる時、カスタム投稿タイプのアーカイブのメニュー要素には `current-post-parent` や `current-post-ancestor` といった「この投稿の親(先祖)に当たる要素につくべきCSSクラス」が付与されない。
+(ちなみに、投稿の場合、その投稿が所属するカテゴリーがメニューにあればそのメニューには付与されている)
+なんてこった。
+
+# どうすんの
+`nav_menu_css_class` フィルターフックで。
+付与する CSS クラスは ドキュメント見てよしなに。
+https://developer.wordpress.org/reference/functions/wp_nav_menu/
+
+※ただしこのコードは将来的なコアの実装でいらなくなる可能性あります
+
+```php
+<?php
+function my_special_nav_class( $classes, $item ) {
+ // カスタム投稿タイプ special の投稿が表示されてる時カスタム投稿タイプアーカイブがメニューにあればCSSクラスを追加。
+ if ( is_singular( 'special' ) && $item->type === 'post_type_archive' && $item->object === 'special' ) {
+ $classes[] = 'current-post-ancestor';
+ }
+ return $classes;
+}
+
+add_filter( 'nav_menu_css_class', 'my_special_nav_class', 10, 2 );
+```
+
+現場からは以上です。