这里主要是用于模板制作的,一般前端已经写好了,我们只要将前端的内容套用WordPress后台就可以了。
所以我们在模板制作过程中,需要自定义WordPress菜单。
在functions.php文件中加入
if(function_exists('register_nav_menus')){ register_nav_menus( array( 'header-menu' => __( '导航自定义菜单' ), 'footer-menu' => __( '页角自定义菜单' ), 'sider-menu' => __('侧边栏菜单') ) ); }
我们就可以在WordPress后台外观中自定义菜单了。
然后我们在前台调菜单出来
php wp_nav_menu( array( 'theme_location' => '' //指定显示的导航名,如果没有设置,则显示第一个 'menu' => 'header-menu', 'container' => 'nav', //最外层容器标签名 'container_class' => 'primary', //最外层容器class名 'container_id' => '',//最外层容器id值 'menu_class' => 'sf-menu', //ul标签class 'menu_id' => 'topnav',//ul标签id 'echo' => true,//是否打印,默认是true,如果想将导航的代码作为赋值使用,可设置为false 'fallback_cb' => 'wp_page_menu',//备用的导航菜单函数,用于没有在后台设置导航时调用 'before' => '',//显示在导航a标签之前 'after' => '',//显示在导航a标签之后 'link_before' => '',//显示在导航链接名之后 'link_after' => '',//显示在导航链接名之前 'items_wrap' => '
- %3$s
里面的数组是wp_nav_menu默认的,是可以根据我们的需求进行修改的。
一般WordPress默认的菜单,在前台是这样显示的
class="menu-header-container">
我们需要将里面的id和class修改成前端工程师设置好的样子。
所以我们就需要修改 wp_nav_menu 里默认的内容。
但是如果我们需要去除li标签的id和class
就需要用到下面这段代码了,将这段代码加到functions.php文件中,就可以移除调多余的css选择器了。
/** * 移除菜单的多余CSS选择器 * From http://www.wpdaxue.com/remove-wordpress-nav-classes.html */ add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1); add_filter('nav_menu_item_id', 'my_css_attributes_filter', 100, 1); add_filter('page_css_class', 'my_css_attributes_filter', 100, 1); function my_css_attributes_filter($var) { return is_array($var) ? array() : ''; }