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

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

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

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

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

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

管理画面からメニューに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のコールバック関数では、メニュー項目毎の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 ) {
    if( $classes[0] ){
    	// 管理画面からメニューにclassの値を設定した場合には、その値以外を削除
        array_splice( $classes, 1 );
    }else{
		// 管理画面からメニューにclassの値を設定していない場合には、すべてのclassを削除
		$classes = array();
	}
    
    // 現在のページのliタグに、classの値としてcurrentを付与
    if( $item -> current == true ) {
        $classes[] = 'current';
    }
		
    return $classes;
}
add_filter( 'nav_menu_css_class', 'my_nav_menu_class', 10, 2 );

フィルターフック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の先頭が空の場合には、array()で配列をすべて空にして、すべてのclassを削除しています。

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

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

参照サイト・書籍

コメントまたはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。Twitterで返信する場合はコチラから。