欢迎访问我们的网站

选择语言

  • English
  • 简体中文
  • 日本語
  • 한국어
  • Français
  • Deutsch
  • Español
  • Português
  • Italiano
  • Русский
  • العربية
  • Nederlands
  • Türkçe
  • Polski
  • Svenska
  • Dansk

WordPress系列

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

09.09.2025 15

www.cknone.com

头部栏目底部栏目调用

1.注册导航菜单位置(需放在functions.php中)

TEXT
12345678910111213
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等模板文件)

TEXT
12345678910
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.带响应式设计的导航调用

TEXT
1234567
wp_nav_menu(array(
    'theme_location'  => 'mobile_menu',
    'container'       => false,
    'menu_class'      => 'mobile-nav',
    'walker'          => new Mobile_Menu_Walker()
));

4.自定义导航菜单

TEXT
1234567891011
              <?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中
              //自己定义导航菜单
TEXT
1234567891011
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前端调用

TEXT
1234567891011
<?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后台多级类
TEXT
12345678910111213141516171819202122232425262728293031323334353637383940414243444546
                  
// 多级导航菜单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>';
		}
		// 三级菜单不需要额外结束标签
	}
}

微信二维码
抖音二维码