Walker_Nav_Menu：将自定义代码放在特定<li>

时间：2017-02-17 作者：Pierre Smith

我正在尝试将我的徽标添加到导航栏的中间，而在查看导航学步课程时，我不知道最好的方法是什么。

所以我的问题是我该怎么做。Walker\\u Nav\\u Menu（）方法start\\u el（）似乎只构建了一个li，所以它在哪里迭代所有li并将其写入文件。

3 个回复

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

您需要创建自己的walker菜单（我猜您已经知道了），我认为最好的方法是重写ends 每个菜单项end_el :

class logo_in_middle_Menu_Walker extends Walker_Nav_Menu {

    public $menu_location = \'primary\';

    function __construct($menu_location_var) {
        // parent class doesnt have a constructor so no parent::__construct();
        $this->menu_location = $menu_location_var;
    }

    public function end_el(&$output, $item, $depth = 0, $args = array()) {
        $locations = get_nav_menu_locations(); //get all menu locations
        $menu = wp_get_nav_menu_object($locations[$this->menu_location]); //one menu for one location so lets get the menu of this location
        $menu_items = wp_get_nav_menu_items($menu->term_id);

        $top_lvl_menu_items_count = 0; //we need this to work with a menu with children too so we dont use simply $menu->count here
        foreach ($menu_items as $menu_item) {
            if ($menu_item->menu_item_parent == "0") {
                $top_lvl_menu_items_count++;
            }
        }

        $total_menu_items = $top_lvl_menu_items_count;

        $item_position = $item->menu_order;

        $position_to_have_the_logo = ceil($total_menu_items / 2);

        if ($item_position == $position_to_have_the_logo && $item->menu_item_parent == "0") { //make sure we output for top level only
            $output .= "</li>\\n<img src=\'PATH_TO_YOUR_LOGO\' alt=\'\' />"; //here we add the logo
        } else {
            $output .= "</li>\\n";
        }
    }
}

我假设如果它是一个项目数量不均匀的菜单，比如说5，那么徽标将位于第三个元素之后，而且这仅适用于顶部元素。

您必须在菜单位置中这样使用它：

<?php
    wp_nav_menu(array(
            \'theme_location\' => \'footer\',
            "walker" => new logo_in_middle_Menu_Walker(\'footer\'),
    ));
?>

您必须提供主题位置的名称。

这里有4项：

这里有5个：

SO网友:Logic Design

修改了David Lees的nav walker类，因为出于某种原因，它不太适合我的子菜单链接。未经验证，但认为这是由于菜单项没有整齐/连续的menu\\u顺序值。

<?php 

class logo_in_middle_Menu_Walker extends Walker_Nav_Menu {

    public $menu_location = \'primary\';

    function __construct($menu_location_var) {
        $this->menu_location = $menu_location_var;
    }

    public function end_el(&$output, $item, $depth = 0, $args = array()) 
    {
        $locations = get_nav_menu_locations();
        $menu = wp_get_nav_menu_object($locations[$this->menu_location]);
        $menu_items = wp_get_nav_menu_items($menu->term_id);

        $top_level_items = [];
        foreach ( $menu_items as $menu_item ) {
            if ( $menu_item->menu_item_parent == 0 ) {
                $top_level_items[] = $menu_item;
            }
        }

        $logo_position = ceil(count($top_level_items) / 2);

        if ( $item->menu_item_parent == 0 ) {
            $current_position = 0;
            foreach ( $top_level_items as $index => $top_level_item ) {
                if ( $top_level_item->ID == $item->ID ) {
                    $current_position = $index + 1;
                }
            }
    
            if ( $current_position == $logo_position ) {
                $output .= \'</li>\' . "\\n";
                $output .= \'<li class="logo">\' . "\\n";
                    $output .= \'<img src="PATH_TO_YOUR_LOGO" alt="LOGO ALT" />\' . "\\n";
            }
        }
        
        $output .= "</li>\\n";
    }
}

SO网友:Den Isahac

实现所需功能的最佳方法是，通过转到Appearance > Menus, 并将菜单项的类别设置为徽标。

要在菜单中启用自定义CSS类，请单击Screen Options 然后检查CSS Classes 复选框。

假设您有一个预先确定的li 共5项。

<ul>
  <li class="logo">LOGO</li>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

然后设置主ul 元素css显示属性flex:

ul {
  display: flex
}

以及li 订单号如下：

ul li { order: 4; } 
ul li:nth-of-type(2) { order: 1; } /* For Item 1 */
ul li:nth-of-type(3) { order: 2; } /* For Item 2 */

然后对于徽标类：

ul li.logo {
  order: 3;
}

您可以了解order 的属性Flexible Box Layout

小码农CODE

Walker_Nav_Menu：将自定义代码放在特定<li>

相关推荐

在walker参数上使用字符串而不是对象类实例化会中断wp_NAV_MENU