菜单项说明?Wp_NAV_MENU()的自定义遍历

时间:2011-04-05 作者:Wordpressor

普通Wordpress菜单如下所示:

主页|博客|关于我们|联系方式

但我看到许多页面在这些链接下有描述:

主页|我们的博客|关于我们|联系
。。。。与我们会面阅读更多|基本信息|联系方式

如何做到这一点?

(我希望它成为我所有主题的核心功能,所以请不要使用插件,我只想知道它是如何完成的)

4 个回复
最合适的回答,由SO网友:fuxia 整理而成

导航菜单需要定制助行器。

基本上,您可以添加一个参数\'walker\'wp_nav_menu() 选项并调用增强类的实例:

wp_nav_menu(
    array (
        \'menu\'            => \'main-menu\',
        \'container\'       => FALSE,
        \'container_id\'    => FALSE,
        \'menu_class\'      => \'\',
        \'menu_id\'         => FALSE,
        \'depth\'           => 1,
        \'walker\'          => new Description_Walker
    )
);
班级Description_Walker 扩展Walker_Nav_Menu 并更改功能start_el( &$output, $item, $depth, $args ) 寻找$item->description.

一个基本示例:

/**
 * Create HTML list of nav menu items.
 * Replacement for the native Walker, using the description.
 *
 * @see    https://wordpress.stackexchange.com/q/14037/
 * @author fuxia
 */
class Description_Walker extends Walker_Nav_Menu
{
    /**
     * Start the element output.
     *
     * @param  string $output Passed by reference. Used to append additional content.
     * @param  object $item   Menu item data object.
     * @param  int $depth     Depth of menu item. May be used for padding.
     * @param  array|object $args    Additional strings. Actually always an 
                                     instance of stdClass. But this is WordPress.
     * @return void
     */
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 )
    {
        $classes     = empty ( $item->classes ) ? array () : (array) $item->classes;

        $class_names = join(
            \' \'
        ,   apply_filters(
                \'nav_menu_css_class\'
            ,   array_filter( $classes ), $item
            )
        );

        ! empty ( $class_names )
            and $class_names = \' class="\'. esc_attr( $class_names ) . \'"\';

        $output .= "<li id=\'menu-item-$item->ID\' $class_names>";

        $attributes  = \'\';

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

        // insert description for top level elements only
        // you may change this
        $description = ( ! empty ( $item->description ) and 0 == $depth )
            ? \'<small class="nav_desc">\' . esc_attr( $item->description ) . \'</small>\' : \'\';

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

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

        // Since $output is called by reference we don\'t need to return anything.
        $output .= apply_filters(
            \'walker_nav_menu_start_el\'
        ,   $item_output
        ,   $item
        ,   $depth
        ,   $args
        );
    }
}
或者,或者as @nevvermind commented, 您可以继承父级的所有功能start_el 函数,只需将描述附加到$output:

function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) 
{
    parent::start_el( $output, $item, $depth, $args );
    $output .= sprintf( 
        \'<i>%s</i>\', 
        esc_html( $item->description ) 
    );
}
示例输出:

enter image description here

现在启用中的描述字段wp-admin/nav-menus.php 获取编辑此字段的功能。如果你没有WP,只需将你的完整帖子内容放入其中即可。

enter image description here

进一步阅读:

就是这样。

SO网友:Joost

自从WordPress 3.0, 您不再需要定制助行器了!

这里有walker_nav_menu_start_el 过滤器,请参见https://developer.wordpress.org/reference/hooks/walker_nav_menu_start_el/

示例:

function add_description_to_menu($item_output, $item, $depth, $args) {

   if (strlen($item->description) > 0 ) {
      // append description after link
      $item_output .= sprintf(\'<span class="description">%s</span>\', esc_html($item->description));
    
      // or.. insert description as last item inside the link ($item_output ends with "</a>{$args->after}")
      // $item_output = substr($item_output, 0, -strlen("</a>{$args->after}")) . sprintf(\'<span class="description">%s</span >\', esc_html($item->description)) . "</a>{$args->after}";
   }   
   return $item_output;
}
add_filter(\'walker_nav_menu_start_el\', \'add_description_to_menu\', 10, 4);

SO网友:mrwweb

这并不比其他建议好或坏;只是不同而已。它又短又甜。

而不是使用描述字段作为@toscho 建议您可以在每个菜单项的“标题”字段中填入所需的文本,然后使用以下CSS:

.menu-item a:after { content: attr(title); }

它也很容易使用jQuery 但文本具有足够的装饰性,因此CSS似乎是合适的。

SO网友:Markus

您还可以编写<span> 元素,并使用以下CSS规则更改其display 设置(它是inline 默认情况下):

span {display:block}

结束

相关推荐

Menu API not switching menus?

我正在使用菜单API,我想切换到其他菜单,但出于某种原因,它保留了第一个菜单这是我的密码在函数中。php add_action( \'init\', \'register_my_menus\',10 ); function register_my_menus() { register_nav_menu(\'main-navigation\', \'Main Navigation\'); } 下面是我的主题文件(header.ph