导航菜单链接的构造由start_el() 的方法Walker_Nav_Menu 班可以通过扩展Walker_Nav_Menu 并替换start_el() 使用自己的方法。然后，您可以通过设置walker 的参数wp_nav_menu().

因此，第一步是创建一个新类（我们称之为Box_Link_Walker), 以及整个start_el() 的方法Walker_Nav_Menu 其中（我删除了原始方法的所有内联文档，以节省此答案中的空间）：

class Box_Link_Walker extends Walker_Nav_Menu {
    public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        if ( isset( $args->item_spacing ) && \'discard\' === $args->item_spacing ) {
            $t = \'\';
            $n = \'\';
        } else {
            $t = "\\t";
            $n = "\\n";
        }
        $indent = ( $depth ) ? str_repeat( $t, $depth ) : \'\';

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes[] = \'menu-item-\' . $item->ID;

        $args = apply_filters( \'nav_menu_item_args\', $args, $item, $depth );

        $class_names = join( \' \', apply_filters( \'nav_menu_css_class\', array_filter( $classes ), $item, $args, $depth ) );
        $class_names = $class_names ? \' class="\' . esc_attr( $class_names ) . \'"\' : \'\';

        $id = apply_filters( \'nav_menu_item_id\', \'menu-item-\'. $item->ID, $item, $args, $depth );
        $id = $id ? \' id="\' . esc_attr( $id ) . \'"\' : \'\';

        $output .= $indent . \'<li\' . $id . $class_names .\'>\';

        $atts = array();
        $atts[\'title\']  = ! empty( $item->attr_title ) ? $item->attr_title : \'\';
        $atts[\'target\'] = ! empty( $item->target )     ? $item->target     : \'\';
        $atts[\'rel\']    = ! empty( $item->xfn )        ? $item->xfn        : \'\';
        $atts[\'href\']   = ! empty( $item->url )        ? $item->url        : \'\';

        $atts = apply_filters( \'nav_menu_link_attributes\', $atts, $item, $args, $depth );

        $attributes = \'\';
        foreach ( $atts as $attr => $value ) {
            if ( ! empty( $value ) ) {
                $value = ( \'href\' === $attr ) ? esc_url( $value ) : esc_attr( $value );
                $attributes .= \' \' . $attr . \'="\' . $value . \'"\';
            }
        }

        $title = apply_filters( \'the_title\', $item->title, $item->ID );

        $title = apply_filters( \'nav_menu_item_title\', $title, $item, $args, $depth );

        $item_output = $args->before;
        $item_output .= \'<a\'. $attributes .\'>\';
        $item_output .= $args->link_before . $title . $args->link_after;
        $item_output .= \'</a>\';
        $item_output .= $args->after;

        $output .= apply_filters( \'walker_nav_menu_start_el\', $item_output, $item, $depth, $args );
    }
}

我们唯一需要担心的是这一部分：

$atts[\'title\']  = ! empty( $item->attr_title ) ? $item->attr_title : \'\';
$atts[\'target\'] = ! empty( $item->target )     ? $item->target     : \'\';
$atts[\'rel\']    = ! empty( $item->xfn )        ? $item->xfn        : \'\';
$atts[\'href\']   = ! empty( $item->url )        ? $item->url        : \'\';

您只需添加一行即可添加box-link 锚元素的类别：

$atts[\'class\']  = \'box-link\';

本节：

$item_output = $args->before;
$item_output .= \'<a\'. $attributes .\'>\';
$item_output .= $args->link_before . $title . $args->link_after;
$item_output .= \'</a>\';
$item_output .= $args->after;

只需重新排列即可将标题移到锚元素之外：

$item_output = $args->before;
$item_output .= \'<a\'. $attributes .\'>\';
$item_output .= \'</a>\';
$item_output .= $args->link_before . $title . $args->link_after;
$item_output .= $args->after;

现在，您可以通过设置walker 的参数wp_nav_menu():

wp_nav_menu( array(
    \'theme_location\' => \'primary-menu\',
    \'menu_id\'        => \'primary-menu\',
    \'walker\'         => new Box_Link_Walker(),
) );

顺便说一句，我觉得我应该指出，以这种方式构建链接对可访问性有害，对于屏幕阅读器和搜索引擎机器人来说，链接似乎没有标签。我建议不要实施这一点。无论您尝试应用何种CSS效果，几乎可以肯定，都不会破坏链接的可访问性。