在wp_NAV_MENU链接锚标记内添加SPAN类

时间：2012-11-15 作者：chris_r

我发现了一些例子，比如在顶级项目中添加一个类，这样我们就可以在带有子项目的菜单项中显示箭头，但处理已经内置的WordPress类似乎很糟糕，不能在当前和css悬停的情况下显示箭头，这只会破坏所有状态。

当前导航菜单如下所示<li><a>Text</a></li>

有没有办法添加 在父级内<a></a> 改为标记？

实例

添加（&R）； 内部（&R）；<a/></a> 标签

因此&rArr；<li><a>Text</a></li> 这就是家长。

当前代码添加 标签位于<a></a> 父级标记

class My_Walker_Nav_Menu extends Walker_Nav_Menu {
    function start_lvl(&$output, $depth, $args) {
        $indent = str_repeat("\\t", $depth);
        if(\'primary\' == $args->theme_location && $depth ==0){
            $output .=\'&lt;span class="arrow">&lt;/span>\';
        }
        $output .= "\\n$indent<ul class=\\"sub-menu\\">\\n";
    }
}

原始问题标题编辑自：add span class inside <a>“

3 个回复

最合适的回答,由SO网友:chris_r 整理而成

这实际上创建了两个实例，其中在主要和次要级别的标记中显示了一个span类，因此您可以为span类添加不同的图像，以用于设计和导航目的。

这有助于用户和开发人员显示标题菜单是否有下拉菜单，并使其更容易在网站中导航。

1. Add this code below to your functions.php first.

class Nav_Walker_Nav_Menu extends Walker_Nav_Menu {
     function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        global $wp_query;
        $indent = ( $depth ) ? str_repeat( "\\t", $depth ) : \'\';

        $class_names = \'\';

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

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

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

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

        $attributes  = ! empty( $item->attr_title ) ? \' title="\'  . esc_attr( $item->attr_title ) .\'"\' : \'\';
        $attributes .= ! empty( $item->target )     ? \' target="\' . esc_attr( $item->target     ) .\'"\' : \'\';
        $attributes .= ! empty( $item->xfn )        ? \' rel="\'    . esc_attr( $item->xfn        ) .\'"\' : \'\';
        $attributes .= ! empty( $item->url )        ? \' href="\'   . esc_attr( $item->url        ) .\'"\' : \'\';

        $item_output = $args->before;
        $item_output .= \'<a\'. $attributes .\'>\';
        $item_output .= $args->link_before . apply_filters( \'the_title\', $item->title, $item->ID ) . $args->link_after;

        if ( \'primary\' == $args->theme_location ) {
            $submenus = 0 == $depth || 1 == $depth ? get_posts( array( \'post_type\' => \'nav_menu_item\', \'numberposts\' => 1, \'meta_query\' => array( array( \'key\' => \'_menu_item_menu_item_parent\', \'value\' => $item->ID, \'fields\' => \'ids\' ) ) ) ) : false;
            $item_output .= ! empty( $submenus ) ? ( 0 == $depth ? \'<span class="arrow"></span>\' : \'<span class="sub-arrow"></span>\' ) : \'\';
        }
        $item_output .= \'</a>\';
        $item_output .= $args->after;

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

2. Add code below to your header.php where your wp_nav_menu is installed.

下面解释的是代码，因此它安装了新的自定义菜单，在这种情况下将是Nav\\u Walker\\u Nav\\u menu。

<?php wp_nav_menu( array( \'container_class\' => \'menu-header\', \'theme_location\' => \'primary\', \'walker\' => new Nav_Walker_Nav_Menu() ) ); ?>

3. Add some CSS

因此，它能够在主要和次要级别的标记中显示新的跨距箭头图像。

#menu-header-menu li span.arrow { height:12px;background-image: url("images/nav-arrows.png");background-position: -8px -3px;background-repeat: no-repeat;float: right;margin: 0 0px 0 10px;text-indent: -9999px;width: 12px;}
#menu-header-menu li a:hover span.arrow{ height:12px;background-image: url("images/nav-arrows.png");background-position: -39px -3px;background-repeat: no-repeat;float: right;margin: 0 0px 0 10px;text-indent: -9999px;width: 12px;}
#menu-header-menu ul.sub-menu li span.sub-arrow { height:12px;background-image: url("images/nav-arrows.png");background-position: -8px -39px;background-repeat: no-repeat;float: right;margin: -2px 0px 0 10px;text-indent: -9999px;width: 12px;}
#menu-header-menu ul.sub-menu li a:hover span.sub-arrow{ height:12px;background-image: url("images/nav-arrows.png");background-position: -39px -39px;background-repeat: no-repeat;float: right;margin: -2px 0px 0 10px;text-indent: -9999px;width: 12px;}

希望对您有所帮助！：）

SO网友:Adam

您是否尝试过使用before 或link_before 声明wp_nav_menu 作用

注：使用after 或link_after 相反的效果。

实例

wp_nav_menu(

    //normal arguments here....etc

    \'before\'    => \'<span class="arrow"></span>\',

    //or \'link_before\' => \'<span class="arrow"></span>\',


);

抄本：

$before
(string) (optional) 在链接的前输出文本默认值：无

   e.g. \'before\'    => \'\'

或。。。

$link_before
(string) (optional) 在链接文本之前输出文本默认值：无

   e.g. \'link_before\'    => \'\'

支持资源：

http://codex.wordpress.org/Function_Reference/wp_nav_menu

SO网友:luukvhoudt

userabuser和wordpress\\u designer发布的两个答案都很棒，但我想发布一个答案，即两者的结合。

有了这个答案，您可以使用逻辑来定义您不希望link_before 待应用。以及您要在链接文本之前放置的内容。

首先创建一个非常简单的类，如下所示。这个类实际上只负责在元素不是子菜单时进行检查($depth <= 0) 用于清洁和记忆link_before 价值

if ( ! class_exists(\'PREFIX_Menu_Walker\')) {
    class PREFIX_Menu_Walker extends Walker_Nav_Menu {
        public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
            $before = property_exists($args, \'link_before\') ? $args->link_before : \'\';

            // Empty the `link_before` when walking over a root level element
            if ($depth <= 0 && !empty($before)) {
                $args->link_before = \'\';
            }

            // Continue with the default/core wordpress nav menu walker class
            parent::start_el( $output, $item, $depth, $args, $id );

            // Remember what `link_before` $args where set.
            $args->link_before = $before;
        }
    }
}

您必须做的第二件事是应用walker 参数和link_before 与您的wp_nav_menu 数组，如下所示：

wp_nav_menu([
    \'link_before\' => \'<span>Hello</span>\',
    \'walker\' => new PREFIX_Menu_Walker()
]);

结束

小码农CODE

在wp_NAV_MENU链接锚标记内添加SPAN类

相关推荐

WordPress菜单自定义Walker类