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主题 »

