04头部栏目底部栏目调用–新手小白,快速使用静态页面建立wordpress主题

www.cknone.com
头部栏目底部栏目调用
1.注册导航菜单位置(需放在functions.php中)
function register_my_menu() { register_nav_menus(array( 'header-menu' => __('Header Menu'),//顶部菜单 'footer-menu' => __('Footer Menu'),//底部菜单 'thesame-menu' => __('thesame Menu'),//通用菜单 'other-menu' => __('other Menu')//通用菜单 )); } add_action('init', 'register_my_menu'); //可以使用,也可以不使用,具体看自己需求,这个属于代码注册,也可以直接后台设置导航菜单
2.基础导航调用(放在header.php等模板文件)
wp_nav_menu(array( 'theme_location' => 'header_menu', 'menu' => 'header_menu', 'container' => 'nav', 'container_class'=> 'main-navigation', 'menu_class' => 'menu-list', 'depth' => 3, 'fallback_cb' => 'wp_page_menu' ));
theme_location: 指定菜单位置为 ‘header_menu’(顶部导航栏)
container: 使用 标签作为菜单容器
container_class: 为容器添加 CSS 类名 ‘main-navigation’
menu_class: 为菜单列表添加 CSS 类名 ‘menu-list’
depth: 限制菜单显示层级为3层
fallback_cb: 当指定菜单不存在时,使用 ‘wp_page_menu’ 作为备用显示方式
3.带响应式设计的导航调用
wp_nav_menu(array( 'theme_location' => 'mobile_menu', 'container' => false, 'menu_class' => 'mobile-nav', 'walker' => new Mobile_Menu_Walker() ));
4.自定义导航菜单
<?php // 显示头部菜单 wp_nav_menu(array( 'theme_location' => 'header-meru-jcfw-1', 'menu' => 'header-meru-jcfw-1', 'walker' => new My_Custom_top_menu(), 'container' => '', 'container_class' => '', 'menu_class' => '' )); ?>
上面的代码放入到模板文件中,然后就可以在页面中调用了
wolker: 自定义的导航菜单要放入到functions.php中
//自己定义导航菜单
class My_Custom_top_menu extends Walker_Nav_Menu { function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) { $output .= '<li >'; $output .= '<a href="' . $item->url . '" data-hover="' . $item->title . '" >'; $output .= '' . $item->title; $output .= '</a></li>'; } }
5.多级导航参考例子
5.1前端调用
<?php // 显示头部菜单 wp_nav_menu(array( 'theme_location' => '', 'menu' => 'header-meru-jcfw', 'walker' => new Mega_Menu_Walker(), 'container' =>false, 'container_class' => '', 'items_wrap' => '<div class="nav-menu">%3$s</div>' )); ?>
5.2后台多级类
// 多级导航菜单Walker类 class Mega_Menu_Walker extends Walker_Nav_Menu { function start_lvl(&$output, $depth = 0, $args = array()) { if ($depth == 0) { $output .= '<div class="mega-menu"><div class="mega-menu-content"><div class="mega-menu-inner">'; } else if ($depth == 1) { $output .= '<ul>'; } } function end_lvl(&$output, $depth = 0, $args = array()) { if ($depth == 0) { $output .= '</div></div></div>'; } else if ($depth == 1) { $output .= '</ul>'; } } function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) { if ($depth == 0) { // 一级菜单 $output .= '<li class="nav-item has-dropdown">'; $output .= '<a href="' . $item->url . '">' . $item->title . ' <i class="fas fa-caret-down"></i></a>'; } else if ($depth == 1) { // 二级菜单(标题) $output .= '<div class="mega-menu-column">'; $output .= '<h3>' . $item->title . '</h3>'; } else if ($depth == 2) { // 三级菜单(具体链接) $output .= '<li><a href="' . $item->url . '">' . $item->title . '</a></li>'; } } function end_el(&$output, $item, $depth = 0, $args = array()) { if ($depth == 0) { // 一级菜单结束 $output .= '</li>'; } else if ($depth == 1) { // 二级菜单结束 $output .= '</div>'; } // 三级菜单不需要额外结束标签 } }
下一篇: 05通用调用文件–新手小白,快速使用静态页面建立wordpress主题 »