【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について
フィルターフック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を設定する方法については、以下のリンク先を参考にしてみてください。
フィルターフック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を付与しています。