0

<span>以下のコードに示すように、WordPress メニュー内に2 つのタグを配置したいと考えています。

<ul>
    <li><a href="#!"><span>Home</span><span>Home</span></a></li>
    <li><a href="#!"><span>About</span><span>About</span></a></li>
    <li><a href="#!"><span>Contact</span><span>Contact</span></a></li>
</ul>
4

1 に答える 1

1

まず、Walker を使用できます。 新しいクラスを作成するには、start_el という関数が必要です (wp-includes/class-walker-nav-menu.php 内にあります)。すべてをコピーするだけの最も簡単な方法。$item_output を変更する必要があります

class Your_Walker extends Walker_Nav_Menu {
public function start_el( &$output, $item, $depth = 0, $args = null, $id = 0 ) {
// Code here
        $item_output  = $args->before;
        $item_output .= '<a' . $attributes . '>';
        $item_output .= $args->link_before . $title . $args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;
}
}

アンカー タグとその中に $title (リンク タイトル) を指定できます。次のように、$title を span にラップして 2 倍にすることができます。

class Your_Walker extends Walker_Nav_Menu {
public function start_el( &$output, $item, $depth = 0, $args = null, $id = 0 ) {
// Code here
        $item_output  = $args->before;
        $item_output .= '<a' . $attributes . '>';
        $item_output .= $args->link_before . '<span>' . $title . '</span>' . $args->link_after;
        $item_output .= $args->link_before . '<span>' . $title . '</span>' . $args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;
}
}

$args->link_before/after は wp_nav_menu を呼び出すことで使用でき、余分なスパンを追加する必要がないことに注意してください (以下で説明します)。

2 番目の方法: 少しトリッキーですが、より単純で、うまくいきます。次のように wp_nav_menu を呼び出します。

wp_nav_menu(array(
    'theme_location'    => 'your_location',
    'link_before'       => '<span>', // This will wrap your title
    'link_after'        => '</span>',
 ));

そしてあなたの functions.php で

function add_double_span_to_menu( $item_output, $item, $depth, $args ){
    
    // replace closing '</a>' with '<span>Links Title</span></a>'
    $replace = $args->link_before . $item->title . $args->link_after . '</a>';
    $item_output = str_replace('</a>', $replace, $item_output);

    return $item_output;
}
add_filter('walker_nav_menu_start_el', 'add_double_span_to_menu', 10, 4);
于 2020-10-14T15:22:23.897 に答える