如何根据wp_NAV_MENU中的项目数除以2来显示两个相等的li列?

时间:2011-12-13 作者:Larry4Design

我想在侧边栏中显示自定义3.0菜单。我希望列表按名称的顺序排列,列表按顺序向下排列,从左栏的列表向下排列,然后向下排列到右栏。

enter image description here

我目前正在使用css和浮动li,但问题是列表从左到右列来回移动,而不是按顺序向下移动列表。

我正在使用

<?php wp_nav_menu(\'menu=canon-camcorders\'); ?> in my sidebar.php
然后,#侧栏ul#菜单佳能摄像机li。菜单项{宽度:89px;浮点:左;边距右:18px;}

我想做的是数一数有多少个列表项,然后将其分成两个,并从中创建两个ul。我的php能力是在没有任何正式培训的情况下拼凑起来的,所以我有点迷路了。我知道一些jquery,但不知道如何用这两种方式来实现。

我读了这篇帖子:How to count nav menu items? 但是,我无法满足我的需要。

非常感谢您的帮助。

谢谢你,拉里

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

您需要注册自己的自定义walker,但这很简单,因为您只需要一个函数(start_el) 在定制助行器内。

我们必须从您引用的线程中添加代码,以计算出有多少项,然后计算出有多少项,并在满足该值时结束当前列表,然后开始另一项。

我并不总是擅长解释这些事情,所以首先看看我为你写的这个助行器。它基于默认的导航菜单遍历器,因此没有什么特别的地方,除了这里和那里的几行代码,可以确定何时创建新列表。

class example_nav_walker extends Walker_Nav_Menu {

    var $current_menu = null;
    var $break_point  = null;

    function start_el(&$output, $item, $depth, $args) {

        global $wp_query;

        if( !isset( $this->current_menu ) )
            $this->current_menu = wp_get_nav_menu_object( $args->menu );

        if( !isset( $this->break_point ) )
            $this->break_point = ceil( $this->current_menu->count / 2 ) + 1;    

        $indent = ( $depth ) ? str_repeat( "\\t", $depth ) : \'\';

        $class_names = $value = \'\';

        $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="\' . esc_attr( $class_names ) . \'"\';

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

        if( $this->break_point == $item->menu_order )
            $output .= $indent . \'</li></ul><ul><li\' . $id . $value . $class_names .\'>\';
        else
            $output .= $indent . \'<li\' . $id . $value . $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;
        $item_output .= \'</a>\';
        $item_output .= $args->after;

        $output .= apply_filters( \'walker_nav_menu_start_el\', $item_output, $item, $depth, $args );
    }
}
我在类中创建了两个变量,第一个$current_menu 将保留menu对象,我们不希望每次迭代都获取该菜单项,所以我给它一个默认的null值,并在未设置该变量时获取menu对象,这确保它只进行一次调用。第二个变量$break_point 将保留断点,即用于确定何时结束当前列表并开始另一个列表的值,同样,我们不想在每次迭代中都不需要解决这个问题,因此它只在第一个项目的迭代中设置。

断点总是加1,因为我们不使用通常在迭代结束时递增的传统计数器(因此该值比您预期的高一个),并且调用ceil 处理菜单中项目数量奇数的情况,即如果您有9个项目,它将在第5个之后开始新列表。

基本上,这个助行器唯一的定制部件是。。

    var $current_menu = null;
    var $break_point  = null;
。。还有这个。。

if( !isset( $this->current_menu ) )
    $this->current_menu = wp_get_nav_menu_object( $args->menu );

if( !isset( $this->break_point ) )
    $this->break_point = ceil( $this->current_menu->count / 2 ) + 1; 
。。最后这个。。

if( $this->break_point == $item->menu_order )
    $output .= $indent . \'</li></ul><ul><li\' . $id . $value . $class_names .\'>\';
else
    $output .= $indent . \'<li\' . $id . $value . $class_names .\'>\';
我在指出它们,所以可以关注重要的部分,而不想知道是否还有其他相关内容。

最后,您还需要设置wp_nav_menu 调用以使用自定义walker,这也意味着您需要将参数作为数组传递,下面是一个示例。

<?php wp_nav_menu( array(
    \'menu\' => \'your-menu\',
    \'walker\' => new example_nav_walker
) ); ?>
您可以将此助行器与您喜欢的任何菜单一起使用,只需确保在使用时按照上面所示的方式操作(设置助行器和菜单参数)。

大部分代码(walker)可以进入主题的函数文件,如果这对您来说最简单的话,我也在这里测试了它。

希望这会有所帮助,如果您有任何问题,请告知。

结束

相关推荐

Wordpress Custom Menus Issue

在我的模板中,我使用这样的调用来输出一些自定义菜单:<?php wp_nav_menu(array(\'container_class\' => \'secondary-navigation\', \'theme_location\' => \'secondary\')); ?> 自从升级到WordPress 3.1.4后,我就可以获得完整的页面列表,而不是自定义菜单我看到修复程序(通过谷歌)说我应该添加以下内容来修复此问题:\'fallback_cb\' => f