wordpress自定义菜单导航样式

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
  ) );

?>