web関連
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
しかし、これだけだとカスタムメニューの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を削除したときのコードを使用
あんま需要ないと思うけど…
結局使わなかったけどもったいないからメモ
ul > li > a
に「CSS class (オプション)」で振ったclassが出力された。