web関連

WordPressのカスタムメニュー「CSS class (オプション)」をaタグ反映させる方法

WordPressのカスタムメニュー「CSS class (オプション)」をaタグ反映させる方法

カスタムメニューの「CSS class (オプション)」という項目に入れたclassはliタグに自動で出力されるのだが、その下の要素のaタグに出力をしたかった時のメモ

aタグ「CSS class (オプション)」のクラスを振るコード

以下のコードをfunction.phpに書けばカスタムメニューの「CSS class (オプション)」がliタグの下のaタグに出力されます。

add_filter('walker_nav_menu_start_el', 'add_class_on_link', 10, 4);
function add_class_on_link($item_output, $item){
$css_class = esc_attr( $item->classes[0] );
if ($css_class) {
return preg_replace('/(<a.*?)/', '$1' . " class='" . $css_class . "'", $item_output);
}else{
return $item_output;
}
}

参考

▼WordPressのカスタムメニューのaタグに任意のクラスを付ける:メモ
https://webutubutu.com/webdesign/3692

これでul > li > aに「CSS class (オプション)」で振ったclassが出力された。

しかし、これだけだとカスタムメニューのliタグにも「CSS class (オプション)」で設定したclassが出力されてしまうので出力されないようにするのと余計なコードも一緒に削除します。

完成版

下記コードで「CSS class (オプション)」をliタグではなくaタグだけに出力できます。

// ① liの「CSS class (オプション)」と余計なコードの削除するコード
add_filter( 'nav_menu_css_class', 'remove_to_currentClass', 10, 2 );
function remove_to_currentClass( $classes, $item ) {
$classes = array();
$classes[] = 'nav';
if( $item -> current == true ) {
$classes[] = 'current';
}
if( !empty( $custom_class ) ){
$classes[] = $custom_class;
}
return $classes;
}

// ② 前述したaタグに「CSS class (オプション)」を反映するコード
add_filter('walker_nav_menu_start_el', 'add_class_on_link', 10, 4);
function add_class_on_link($item_output, $item){
var_dump($item->classes[0]);
$css_class = esc_attr( $item->classes[0] );
if ($css_class) {
return preg_replace('/(<a.*?)/', '$1' . " class='" . $css_class . "'", $item_output);
}else{
return $item_output;
}
}

過去に、カスタムメニュー周りの余計なclassを削除したときのコードを使用

あんま需要ないと思うけど… 結局使わなかったけどもったいないからメモ