如何将父菜单描述添加到我的Wordpress菜单?

时间:2015-03-25 09:31:58

标签: php wordpress submenu

我已将描述输入到Wordpress中的父菜单项中,但它们没有显示在我的主题上。

我知道可以使用walker类来更改菜单,但我不知道如何编写它。

这是我想要实现的目标:

<nav id="main-menu" role="navigation">
<div class="menu-main-menu-container">
    <ul id="menu-main-menu" class="menu">
        <!-- REPEATING MENU ITEM START -->
        <li class="menu-parent-item"><a>Face</a>
        <ul class="sub-menu">
            <li class="menu-image-container">
                <div class="menu-image"></div>
                <div class="menu-description">[Face menu item description]</div>
            </li>
            <li class="heading">Face</li>
            <ul class="sub-menu">
                <li class="menu-item">Sub menu 1</li>
                <li class="menu-item">Sub menu 2</li>
                <li class="menu-item">Sub menu 3</li>
            </ul>
            <li class="heading">Ear</li>
            <ul class="sub-menu">
                <li class="menu-item">Sub menu 1</li>
                <li class="menu-item">Sub menu 2</li>
                <li class="menu-item">Sub menu 3</li>
            </ul>
            <li class="heading">Eyes</li>
            <ul class="sub-menu">
                <li class="menu-item">Sub menu 1</li>
                <li class="menu-item">Sub menu 2</li>
                <li class="menu-item">Sub menu 3</li>
            </ul>
        </ul>
        </li>
        <!-- REPEATING MENU ITEM END -->
    </ul>
</div>

如您所见,我只想显示父菜单项的描述,但它必须位于父列表项中的第一个ul.sub-menu内。

如何对使用start_lvlstart_elend_lvl的助手进行编码以有效处理此问题?

2 个答案:

答案 0 :(得分:2)

好吧,我不确定这是否是万无一失的,但这是我的尝试:

因此您需要确保在管理菜单控制台中显示说明(在&#39;屏幕选项&#39;下拉列表中)

你的第一个菜单项应该是Face then Face再次作为它的孩子然后sub neu项目作为孩子。

希望这有帮助!

你的functions.php中的

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 $args    Additional strings.
     * @return void
     */
     function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output )
{
    $id_field = $this->db_fields['id'];
    if ( is_object( $args[0] ) ) {
        $args[0]->has_children = ! empty( $children_elements[$element->$id_field] );
    }
    return parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
}
function start_lvl( &$output, $depth=0, $args=array() ) {
    // depth dependent classes
    $indent = ( $depth > 0  ? str_repeat( "\t", $depth ) : '' ); // code indent
    $display_depth = ( $depth); // because it counts the first submenu as 0
    $classes = array('sub-menu');
    $class_names = implode( ' ', $classes );

    // build html
    $output .= "\n" . $indent . '<ul class="' . $class_names . '">' . "\n";
}
    function start_el(&$output, $item,  $depth = 0, $args = array(), $current_object_id = 0)
    {

        $classes     = empty ( $item->classes ) ? array () : (array) $item->classes;

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

        if ($args->has_children && $depth == 0){
        ! empty ( $class_names )
            and $class_names = ' class="menu-parent-item"';
        }else if($depth == 1){
         ! empty ( $class_names )
            and $class_names = ' class="heading"';
        }else{
         ! 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 )
            ? '<div class="menu-description">' . esc_attr( $item->description ) . '</div>' : '';

        $title = apply_filters( 'the_title', $item->title, $item->ID );
        if (  $depth == 0) {//top level items
         $item_output = $args->before.$title.'</li><ul class="sub-menu"><li class="menu-image-container"><div class="menu-image"></div>'.$description.'</li>';  
        }
        else if(  $depth == 1){
             $item_output = $args->before.$title.'</li>';
        }
        else{//everything else
        $item_output = $args->before
            . "<a $attributes>"
            . $args->link_before
            . $title
            . '</a> '
            . $args->link_after
            . $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
        );

    }
}
标题中的

(或菜单所在的位置)

<nav id="main-menu" role="navigation"><?php wp_nav_menu( array('menu' => 'Main', 'container' => 'div', 'container_class' => 'menu-main-menu-container', 'menu_id' => 'menu-main-menu', 'walker' => new Description_Walker )); ?></nav>

答案 1 :(得分:0)

我设法让菜单像以前一样显示,同时将父菜单描述添加到我想要的位置,只需添加到我已经拥有的内容。

我已经有一个助手创建了子菜单图像容器和描述容器

// Submenu walker to add image
class submenu_walker extends Walker_Nav_Menu {
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class='sub-menu'><li class='menu-image-container'><div class='menu-image'></div><div class='menu-description'></div></li>\n";
    }
    function end_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent<li><div class='clear'></div></li></ul>\n";
    }
}

然后我设法找到一个使用start_el的函数,并且可以将描述分配给变量,但不输出它,然后正常输出$item_output

function add_menu_description( $item_output, $item, $depth, $args ) {
    $description = __( $item->post_content );
    return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'add_menu_description', 10, 4);

当然现在我需要在我的其他子菜单walker函数中使用$description,所以我只在两者中创建了一个全局变量,输出正是我所追求的!

最终输出

function add_menu_description( $item_output, $item, $depth, $args ) {
    global $description;
    $description = __( $item->post_content );
    return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'add_menu_description', 10, 4);

// Submenu walker to add image
class submenu_walker extends Walker_Nav_Menu {
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        global $description;
        $output .= "\n$indent<ul class='sub-menu'><li class='menu-image-container'><div class='menu-image'></div><div class='menu-description'>".$description."</div></li>\n";
    }
    function end_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent<li><div class='clear'></div></li></ul>\n";
    }
}