wp虽然已经给我们提供了菜单调用的方法，但是这种方法太过死板，ul li 都是写死的，没有办法如自己定义样式。在我们做主题开发或者仿站的时候，菜单样式不一定是ul li层级，也有可能是div层级或者的tr td层级，网上找了很久，都没有找到wordpress自定义菜单导航样式的方法，打大部分都讲的是默认的方法，哪怎么办呢？经过了我的一番摸索办法总算是想出来了，那就是分类与单页组合成菜单导航，具体代码如下。
1、顶级分类栏目与顶级单页组合-自定义菜单导航样式
获取顶级分类目录
<?php
$terms = get_terms( 'category',array('orderby'=>'id','parent'=>'0','hide_empty'=>false));
if(count($terms) > 0){
foreach ($terms as $term) {
$post_id = "category_".$term->term_id;//自定义字段
$imgioc=get_field('img-ioc',$post_id);//自定义字段
echo '<li class="menu-item"><a href="'.get_term_link($term, $term->slug).'"><figure><img class=" ls-is-cached lazyloaded" src=" '.$imgioc.'"></figure>'.$term->name.'</a><i></i></li>';
}
}
?>
获取顶级单页目录
<?php
$mypages = get_pages(array('parent'=>'0','number'=>'2'));
if(count($mypages) > 0){
foreach($mypages as $page) {
$imgid=get_post_meta($page->ID, 'img-ioc', true);//自定义字段
$img=wp_get_attachment_image_src($imgid);
echo '<li class="menu-item"><a href="'.get_page_link($page->ID).'"><figure><img class="ls-is-cached lazyloaded" src="'.$img[0].'"></figure>'.$page->post_title.'</a><i></i></li>';
}
}
?>上面代码由获取到的一级分类（列：产品中心，新闻中心）与一级单页（列：关于我们，联系我们）组合而成形成一个自定义菜单导航。其中还包括了分类栏目，与单页的自定义字段，几乎能满足你平时wordpress主题的菜单导航的需求。
2、分类栏目与单页组合二级循环菜单-wordpress自定义菜单导航样式
<?php
$terms = get_terms( 'category',array('orderby'=>'id','parent'=>'0','hide_empty'=>false));
if(count($terms) > 0){
foreach ($terms as $term) {
$post_id = "category_".$term->term_id;//自定义字段
$imgioc=get_field('img-ioc',$post_id);//自定义字段
echo '<li class="menu-item"><a href="'.get_term_link($term, $term->slug).'"><figure><img class=" ls-is-cached lazyloaded" src=" '.$imgioc.'"></figure>'.$term->name.'</a><i></i>';
echo'<ul class="sub-menu">'; //下面是二级循环
$childrens = get_term_children($term->term_id, 'category');
foreach($childrens as $cat) {
echo '<li><a href="' . get_category_link($cat) . '">' . get_cat_name($cat) . '</a></li>';
}
echo'</ul>';
echo '</li>';
}
}
?>
<?php
$mypages = get_pages(array('parent'=>'0'));
if(count($mypages) > 0){
foreach($mypages as $page) {
$imgid=get_post_meta($page->ID, 'img-ioc', true);//自定义字段
$img=wp_get_attachment_image_src($imgid);
echo '<li class="menu-item"><a href="'.get_page_link($page->ID).'"><figure><img class="ls-is-cached lazyloaded" src="'.$img[0].'"></figure>'.$page->post_title.'</a><i></i>';
$mypages = get_pages(array('parent'=>$page->ID));//下面是二级循环
echo'<ul class="sub-menu">';
foreach($mypages as $page) {
echo '<li><a href="' . get_page_link($page->ID). '">' .$page->post_title. '</a></li>';
}
echo'</ul>';
echo '</li>';
}
}
?>
有时候回,只有顶级菜单，并不一定能满足我们网站的需求，比如有些分类需要做下拉二级菜单导航，哪上面的上方就比较适合您。
?
?
注意：有时候分类和单页组成的wordpress自定义菜单导航，也有他的不足之处，就是菜单之间不方便排序，可以根据自己的需求选择默认菜单调用，还是自定义菜单调用。
3、wordpress菜单导航调用
<?php
wp_nav_menu( array(
'theme_location' => 'nav', //导航别名
'menu' => 'nav', //期望显示的菜单
'container' => '', //容器标签
'container_class' => '', //ul父节点class值
'container_id' => '', //ul父节点id值
'menu_class' => 'menu', //ul节点class值
'menu_id' => '', //ul节点id值
'echo' => true, //是否输出菜单，默认为真
'fallback_cb' => 'wp_page_menu', //菜单不存在时，返回默认菜单，设为false则不返回
'before' => '', //链接前文本
'after' => '', //链接后文本
'link_before' => '', //链接文本前
'link_after' => '', //链接文本后
'items_wrap' => '%3$s', //如何包装列表
'depth' => 2, //菜单深度，默认0
'walker' => '' //自定义walker
) );
?>