wordpress如何分开输出顶级菜单和子菜单？

Question

wordpress如何分开输出顶级菜单和子菜单？

发布于
2017-02-28

更新于
2017-02-28

如同下图，顶级菜单和子菜单分开输出，但wordpress默认输出的结构是把子菜单输出到顶级菜单内，如何分开输出顶级菜单和子菜单（或者说让子菜单和顶级菜单同级）

<ul>
    <li>
        <a>顶级菜单</a>
        <ul class="sub-menu">
            <li>子菜单</li>
            <li>子菜单</li>
            <li>子菜单</li>
        </ul>
    </li>
</ul>

上面为wordpress默认的菜单结构

图片描述

上图演示地址

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<title>jquery仿腾讯云下拉导航</title>
<link media="screen" rel="stylesheet" href="demo.css"/>

<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
    var qcloud={};
    $('[_t_nav]').hover(function(){
        var _nav = $(this).attr('_t_nav');
        clearTimeout( qcloud[ _nav + '_timer' ] );
        qcloud[ _nav + '_timer' ] = setTimeout(function(){
        $('[_t_nav]').each(function(){
        $(this)[ _nav == $(this).attr('_t_nav') ? 'addClass':'removeClass' ]('nav-up-selected');
        });
        $('#'+_nav).stop(true,true).slideDown(200);
        }, 150);
    },function(){
        var _nav = $(this).attr('_t_nav');
        clearTimeout( qcloud[ _nav + '_timer' ] );
        qcloud[ _nav + '_timer' ] = setTimeout(function(){
        $('[_t_nav]').removeClass('nav-up-selected');
        $('#'+_nav).stop(true,true).slideUp(200);
        }, 150);
    });
});
</script>

</head>
<body>
<div class="head-v3">
    <div class="navigation-up">
        <div class="navigation-inner">
            <div class="navigation-v3">
                <ul>
                    <li class="nav-up-selected-inpage" _t_nav="home">
                        <h2>
                            <a href="http://www.16sucai.com/">首页</a>
                        </h2>
                    </li>
                    <li class="" _t_nav="product">
                        <h2>
                            <a href="http://www.16sucai.com">云产品</a>
                        </h2>
                    </li>
                    <li class="" _t_nav="wechat">
                        <h2>
                            <a href="http://weixin.qcloud.com/market">微信建站</a>
                        </h2>
                    </li>
                    <li class="" _t_nav="solution">
                        <h2>
                            <a href="http://www.16sucai.com/">行业解决方案</a>
                        </h2>
                    </li>
                    <li class="" _t_nav="cooperate">
                        <h2>
                            <a href="http://www.16sucai.com">合作伙伴</a>
                        </h2>
                    </li>
                    <li _t_nav="support">
                        <h2>
                            <a href="http://www.16sucai.com">帮助与支持</a>
                        </h2>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="navigation-down">
        <div id="product" class="nav-down-menu menu-1" style="display: none;" _t_nav="product">
            <div class="navigation-down-inner">
                <dl style="margin-left: 100px;">
                    <dt>计算机与网络</dt>
                    <dd>
                        <a hotrep="hp.header.product.compute1" href="http://www.16sucai.com">云服务器</a>
                    </dd>
                    <dd>
                        <a hotrep="hp.header.product.compute2" href="http://www.16sucai.com/?product/product.php?item=cee">弹性Web引擎</a>
                    </dd>
                    <dd>
                        <a hotrep="hp.header.product.compute3" href="http://www.16sucai.com/?product/product.php?item=balance">负载均衡</a>
                    </dd>
                </dl>
                <dl>
                    <dt>存储与CDN</dt>
                    <dd>
                        <a hotrep="hp.header.product.storage1" href="http://www.16sucai.com/?product/product.php?item=cdb">云数据库</a>
                    </dd>
                    <dd>
                        <a hotrep="hp.header.product.storage2" href="http://www.16sucai.com/?product/product.php?item=cmem">NoSQL高速存储</a>
                    </dd>
                    <dd>
                        <a hotrep="hp.header.product.storage4" href="http://www.16sucai.com/?product/product.php?item=cos">对象存储服务(beta)</a>
                    </dd>
                    <dd>
                        <a hotrep="hp.header.product.storage3" href="http://www.16sucai.com/?product/product.php?item=cdn">CDN</a>
                    </dd>
                </dl>
                <dl>
                    <dt>监控与安全</dt>
                    <dd>
                        <a hotrep="hp.header.product.monitoring1" href="http://www.16sucai.com/?product/product.php?item=monitor">云监控</a>
                    </dd>
                    <dd>
                        <a hotrep="hp.header.product.monitoring2" href="http://www.16sucai.com/?product/product.php?item=safe">云安全</a>
                    </dd>
                    <dd>
                        <a hotrep="hp.header.product.monitoring3" href="http://www.16sucai.com/?product/product.php?item=cat">云拨测</a>
                    </dd>
                </dl>
                <dl>
                    <dt>数据分析</dt>
                    <dd>
                        <a hotrep="hp.header.product.analysis1" href="http://www.16sucai.com/?">腾讯云分析</a>
                    </dd>
                    <dd>
                        <a hotrep="hp.header.product.analysis2" href="http://www.16sucai.com/?product/product.php?item=keyfactor">关键因子</a>
                    </dd>
                </dl>
                <dl>
                    <dt>开发者工具</dt>
                    <dd>
                        <a hotrep="hp.header.product.devtool1" href="http://www.16sucai.com/?product/product.php?item=mna">移动加速</a>
                    </dd>
                    <dd>
                        <a hotrep="hp.header.product.devtool2" href="http://www.16sucai.com/?product/product.php?item=appup">应用加固</a>
                    </dd>
                    <dd>
                        <a hotrep="hp.header.product.devtool3" href="http://www.16sucai.com/?product/product.php?item=dove">信鸽推送</a>
                    </dd>
                </dl>
                <dl>
                    <dt>开发者服务</dt>
                    <dd>
                        <a hotrep="hp.header.product.service1" href="http://www.16sucai.com/?special/security.php">安全认证服务</a>
                    </dd>
                    <dd>
                        <a hotrep="hp.header.product.service2" href="http://www.16sucai.com/?">域名备案</a>
                    </dd>
                </dl>
            </div>
        </div>
        <div id="solution" class="nav-down-menu menu-3 menu-1" style="display: none;" _t_nav="solution">
            <div class="navigation-down-inner">
                <dl style="margin-left: 380px;">
                    <dd>
                        <a class="link" hotrep="hp.header.solution.1" href="http://weixin.qcloud.com/">微信</a>
                    </dd>
                </dl>
                <dl>
                    <dd>
                        <a class="link" hotrep="hp.header.solution.2" href="http://www.16sucai.com/?">游戏</a>
                    </dd>
                </dl>
                <dl>
                    <dd>
                        <a class="link" hotrep="hp.header.solution.3" href="http://www.16sucai.com/">移动应用</a>
                    </dd>
                </dl>
            </div>
        </div>
        <div id="support" class="nav-down-menu menu-3 menu-1" style="display: none;" _t_nav="support">
            <div class="navigation-down-inner">
                <dl style="margin-left: 610px;">
                    <dd>
                        <a class="link" hotrep="hp.header.support.1" href="http://www.16sucai.com/?wiki.php">资料库</a>
                    </dd>
                </dl>
                <dl>
                    <dd>
                        <a class="link" hotrep="hp.header.support.2" href="http://www.16sucai.com/?forum.php">论坛</a>
                    </dd>
                </dl>
                <dl>
                    <dd>
                        <a class="link" hotrep="hp.header.support.3" href="http://www.16sucai.com/?fuchi2014.php">亿元扶持</a>
                    </dd>
                </dl>
            </div>
        </div>
        <div id="cooperate" class="nav-down-menu menu-3 menu-1" style="display: none;" _t_nav="cooperate">
            <div class="navigation-down-inner">
                <dl style="margin-left: 480px;">
                    <dd>
                        <a hotrep="hp.header.partner.1" href="http://www.16sucai.com/?agent/agent.php">代理商</a>
                    </dd>
                </dl>
                <dl>
                    <dd>
                        <a hotrep="hp.header.partner.2" href="http://www.16sucai.com/?apply/apply.php">微信服务商</a>
                    </dd>
                </dl>
                <dl>
                    <dd>
                        <a hotrep="hp.header.partner.3" href="http://www.16sucai.com/?special/venture.php?from=qcloud.banner">创投机构</a>
                    </dd>
                </dl>
            </div>
        </div>
    </div>
</div>

</body>
</html>

wordpress php

阅读 5.1k

1 个回答

madthumb

我之前写过一个插件用来解决这个问题，你可以试一试：
用法很简单：

$menu = array(
    'theme_location' => 'main_menu',
    'level' => 2,    // 打算输出的菜单级别
    'child_of' => '关于我们', // 对应主菜单的名字或者ID
);

wp_nav_menu( $menu ); // 调用核心功能直接打印

我的插件如下：

/*
Plugin Name: wp_nav_menu增强版
Description: 优化wp_nav_menu() 功能.
Version: 1.0.2
Author: Madthumb
Author URI: https://github.com/Madthumb
Text Domain: mad-nav-menu
*/

defined( 'ABSPATH' ) or die( '玩呢，朋友！' );

/**
 * Main Class
 */
class MadNavMenu {

    // 变量
    private $_menu_items = array();

    /**
     * Constructor
     */
    public function __construct() {
        add_action( 'init', array( $this, 'init' ), 1 );
    }

    /**
     * 初始化
     */
    public function init() {
        // 添加过滤
        add_filter( 'wp_nav_menu_objects', array( $this, 'wp_nav_menu_objects' ), 10, 2 );
    }

    /**
     * 优化函数
     *
     * @param array   $sorted_menu_items
     * @param object  $args
     * @return array
     */
    public function wp_nav_menu_objects( $sorted_menu_items, $args ) {
        // Add additional args
        if ( ! isset( $args->level ) )
            $args->level = 0;
        if ( ! isset( $args->child_of ) )
            $args->child_of = '';

        if ( ! $sorted_menu_items || ( $args->level == 0 && $args->child_of == '' ) )
            return $sorted_menu_items;

        // 建立菜单
        $this->_menu_items = $sorted_menu_items;
        $temp_array = array();
        foreach ( $this->_menu_items as $item ) {
            $temp_array[ $item->menu_item_parent ][] = $item;
        }
        $tree = $this->build_items_tree( $temp_array, $temp_array[0] );

        $updated_items = $this->get_level_items( $tree, $args->level, $args->child_of );

        $updated_items = array_filter( array_merge( array( 0 ), $updated_items ) );

        return $updated_items;
    }

    /**
     * 建立菜单链
     * 
     * @param  array  $list
     * @param  object $parent
     * @return array
     */
    private function build_items_tree( &$list, $parent, $level = 1 ) {
        $tree = array();
        
        foreach ( $parent as $k => $l ) {
            if ( isset( $list[ $l->ID ] ) )
                $l->children = $this->build_items_tree( $list, $list[ $l->ID ], $level + 1 );

            $l->level = $level;
            $tree[] = $l;
        }
        
        return $tree;
    }

    /**
     * 根据level不同 得到菜单链
     * 
     * @param  array   $tree
     * @param  integer $level
     * @param  string  $child_of
     * @return array
     */
    private function get_level_items( $tree, $level = 1, $child_of = '' ) {
        $items = array();
        
        foreach ( $tree as $item ) {
            $child_of_flag = false;

            if ( $child_of != '' ) {
                if ( gettype( $child_of ) == 'integer' && $item->menu_item_parent != $child_of )
                    $child_of_flag = true;
                elseif ( gettype( $child_of ) == 'string' && $item->menu_item_parent != $this->get_menu_id_from_title( $child_of ) )
                    $child_of_flag = true;
            }
            
            if ( $item->level == $level && ! $child_of_flag ) {
                unset( $item->children );
                $items[] = $item;
            }

            if ( isset( $item->children ) && $item->children )
                $items = $items + $this->get_level_items( $item->children, $level, $child_of );
        }
        
        return $items;
    }

    /**
     * 得到菜单ID
     * 
     * @param  string $name
     * @return string
     */
    private function get_menu_id_from_title( $name = '' ) {
        foreach ( $this->_menu_items as $item ) {
            if ( $item->title == $name )
                return $item->ID;
        }

        return '';
    }

}

new MadNavMenu();

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

wordpress如何分开输出顶级菜单和子菜单？

你尚未登录，登录后可以

求java/php大佬帮帮忙？

新人求看下如何用php对接第三方接口?

Hyperf Swagger 如何使用？

Laravel Framework 11.38.2 版本路由调用api接口报错404？

在Windows下开发的gin项目如何不是linux下的宝塔？

为什么viewsource:网址和直接访问看打的不一样?

在宝塔里这种情况下怎么使用80端口？

wordpress如何分开输出顶级菜单和子菜单？

你尚未登录，登录后可以

求java/php大佬帮帮忙？

新人求看下如何用php对接第三方接口?

Hyperf Swagger 如何使用？

Laravel Framework 11.38.2 版本 路由调用api接口报错404？

在Windows下开发的gin项目如何不是linux下的宝塔？

为什么viewsource:网址和直接访问看打的不一样?

在宝塔里这种情况下怎么使用80端口？

Laravel Framework 11.38.2 版本路由调用api接口报错404？