【WordPress】カスタムメニューのid・classを削除・追加

WordPressには、管理画面からメニューの項目や表示する場所を設定できるカスタムメニューの機能があります。

そのカスタムメニューのliタグには、id・classの値がデフォルトでいくつか指定してありますが、その値が多いと感じる場合があるかもしれません。

今回はそのような場合に、id・classの値を削除・追加して、シンプルにカスタマイズする例となります。

カスタムメニューのid・classの値をシンプルにカスタマイズする例

今回の例では、カスタムメニューのliタグにデフォルトで設定されているid・classの値を削除し、現在のページのliタグにcurrentが値となるclassを追加します。また、管理画面からメニューにclassを設定した場合は適用されるようにします。

管理画面からメニューにclassを設定する方法については、以下のリンク先を参考にしてみてください。

【WordPress】カスタムメニューのliタグに任意のclassを設定する方法

idをカスタマイズ｜nav_menu_item_id

カスタムメニューには、始めからliタグにidの値が設定されていますが、その値はフィルターフックnav_menu_item_idでカスタマイズが可能です。

今回の例ではすべてのidを削除します。以下がソースコードの例となりfunctions.phpに記述します。

function my_nav_menu_id( $menu_id ){
	// liタグのidを削除
	$id = NULL;
    return $id;
}
add_filter( 'nav_menu_item_id', 'my_nav_menu_id' );

フィルターフックnav_menu_item_idについて

フィルターフックnav_menu_item_idのコールバック関数では、メニュー項目毎のidの値が第1引数に格納され扱えるため、idの値をカスタマイズできます。

例では、idの値が格納されている$menu_idにNULLを代入し、すべてのメニュー項目のidを削除しています。

classをカスタマイズ｜nav_menu_css_class

カスタムメニューのliタグのclassにも始めから値が設定されていますが、その値はフィルターフックnav_menu_css_classでカスタマイズが可能です。

今回の例では、デフォルトのclassの値を削除し、現在のページのliタグにcurrentが値となるclassを追加します。また、管理画面からメニューにclassを設定した場合には、そのclassは適用させます。

以下がソースコードの例となり、functions.phpに記述します。

function my_nav_menu_class( $classes, $item ){
	// 管理画面からメニューにclassを設定した場合
    if( $classes[0] ){
    	// 管理画面から設定したclass以外を削除
        array_splice( $classes, 1 );
    }else{
		// 上記以外の場合は、すべてのclassを削除
		$classes = [];
	}
    
	// 現在のページのliタグの場合
    if( $item -> current == true ){
		// classの値にcurrentを付与
        $classes[] = 'current';
    }
		
    return $classes;
}
add_filter( 'nav_menu_css_class', 'my_nav_menu_class', 10, 2 );

また、管理画面からメニューに任意のclassを設定する方法については、以下のリンク先を参考にしてみてください。

【WordPress】カスタムメニューのliタグに任意のclassを設定する方法

フィルターフックnav_menu_css_classについて

フィルターフックnav_menu_css_classのコールバック関数では、メニュー項目毎のclassの値と、メニューのオブジェクトを扱えるため、liタグのclassをカスタマイズできます。

そのコールバック関数の第1引数には、liタグのclassの値が配列で格納され例では$classes、第2引数にはメニューのオブジェクトが格納され例では$itemとしています。

以下、classをカスタマイズするソースコード例のポイントとなる箇所の説明となります。

管理画面から設定したclassの値は残して、それ以外のclassの値は削除

ソースコード2行目からは、管理画面から設定したliタグのclassの値は残して、それ以外のclassの値は削除しています。

管理画面からclassの値を設定すると$classesの配列の先頭に格納されます。そのため、$classesの先頭に値がある場合には、array_splice関数を使い$classesの先頭以外を削除します。

そして、$classesの先頭が空の場合には、配列をすべて空にして、すべてのclassを削除しています。

メニュー項目が現在のページの場合、classの値にcurrentを付与

ソースコード11行目からは、メニュー項目が現在のページの場合、$classesの配列にcurrentを追加することで、現在のページのliタグにclassの値としてcurrentを付与しています。

【WordPress】カスタムメニューのid・classを削除・追加｜シンプルにカスタマイズ