用小工具创建 WordPress 超级菜单

知更鸟 2022年5月9日13:53:26WordPress1 203阅读模式

所谓的超级菜单,就是有别于正常样式简单的 WordPress 菜单,添加更加丰富的自定义内容,在WordPress后台安装插件页面搜索”mega menu“,会找到一堆相关的插件。文章源自知更鸟-https://zmingcx.com/create-wordpress-mega-menus-with-widgets.html

文章源自知更鸟-https://zmingcx.com/create-wordpress-mega-menus-with-widgets.html

用小工具创建 WordPress 超级菜单

用小工具创建 WordPress 超级菜单

文章源自知更鸟-https://zmingcx.com/create-wordpress-mega-menus-with-widgets.html

为了让菜单样式有变化,还可以直接用图片HTML代码:文章源自知更鸟-https://zmingcx.com/create-wordpress-mega-menus-with-widgets.html

<img alt="img" class="图片链接">

替换菜单项“导航标签”的标题。文章源自知更鸟-https://zmingcx.com/create-wordpress-mega-menus-with-widgets.html

并利用 WordPress 菜单的选项中“CSS类”,通过编写特定的样式,改变每个菜单项的结构样式,从而打造一个超级菜单。文章源自知更鸟-https://zmingcx.com/create-wordpress-mega-menus-with-widgets.html

本文分享一个更神奇的方法,通过动态创建侧边栏(小工具),为菜单添加任意小工具,从而实现自定义菜单内容。文章源自知更鸟-https://zmingcx.com/create-wordpress-mega-menus-with-widgets.html

section

一、注册专用菜单

将代码添加到当前主题函数模板 functions.php 中:文章源自知更鸟-https://zmingcx.com/create-wordpress-mega-menus-with-widgets.html

// 注册专用菜单
function zm_register_mega_menu() {
	register_nav_menus( array(
		'mega_menu' => '小工具菜单'
	) );
}
add_action( 'after_setup_theme', 'zm_register_mega_menu' );

之后在菜单设置页面,显示位置中会新增“小工具菜单”文章源自知更鸟-https://zmingcx.com/create-wordpress-mega-menus-with-widgets.html

用小工具创建 WordPress 超级菜单文章源自知更鸟-https://zmingcx.com/create-wordpress-mega-menus-with-widgets.html

 文章源自知更鸟-https://zmingcx.com/create-wordpress-mega-menus-with-widgets.html

section

二、注册动态侧边栏(小工具)

将代码添加到当前主题函数模板 functions.php 中:文章源自知更鸟-https://zmingcx.com/create-wordpress-mega-menus-with-widgets.html

// 注册动态侧边栏(小工具)
function zm_register_widget_menu() {
	$location = 'mega_menu';
	$css_class = 'has-mega-menu';
	$locations = get_nav_menu_locations();
	if ( isset( $locations[ $location ] ) ) {
		$menu = get_term( $locations[ $location ], 'nav_menu' );
		if ( $items = wp_get_nav_menu_items( $menu->name ) ) {
			foreach ( $items as $item ) {
				if ( in_array( $css_class, $item->classes ) ) {
					register_sidebar( array(
						'id'   => 'mega-menu-widget-area-' . $item->ID,
						'name' => $item->title . ' - 菜单小工具',
					) );
				}
			}
		}
	}
}

add_action( 'widgets_init', 'zm_register_widget_menu' );

但当你进入WP小工具页面,会发现没有什么变化。文章源自知更鸟-https://zmingcx.com/create-wordpress-mega-menus-with-widgets.html

下面是见证奇迹的时刻了。文章源自知更鸟-https://zmingcx.com/create-wordpress-mega-menus-with-widgets.html

新一个菜单,随便添加一个菜单项,在"CSS类"中添加:has-mega-menu文章源自知更鸟-https://zmingcx.com/create-wordpress-mega-menus-with-widgets.html

并在显示位置勾选“小工具菜单”,最后,记得不要忘记保存菜单。文章源自知更鸟-https://zmingcx.com/create-wordpress-mega-menus-with-widgets.html

用小工具创建 WordPress 超级菜单文章源自知更鸟-https://zmingcx.com/create-wordpress-mega-menus-with-widgets.html

 文章源自知更鸟-https://zmingcx.com/create-wordpress-mega-menus-with-widgets.html

打开WP后台 → 外观 → 小工具页面,会发现自动生成一个名称为“小工具菜单A - 菜单小工具”的侧边栏(小工具),与正常的侧边栏操作一样,可向里面添加小工具。文章源自知更鸟-https://zmingcx.com/create-wordpress-mega-menus-with-widgets.html

用小工具创建 WordPress 超级菜单文章源自知更鸟-https://zmingcx.com/create-wordpress-mega-menus-with-widgets.html

如果再加一个菜单项,同样在"CSS类"中添加:has-mega-menu,就会再增加一个小工具“菜单B - 菜单小工具”的侧边栏(小工具)文章源自知更鸟-https://zmingcx.com/create-wordpress-mega-menus-with-widgets.html

用小工具创建 WordPress 超级菜单文章源自知更鸟-https://zmingcx.com/create-wordpress-mega-menus-with-widgets.html

除了添加特定的类,关键要勾选专用的菜单位置“小工具菜单”。文章源自知更鸟-https://zmingcx.com/create-wordpress-mega-menus-with-widgets.html

二、前端调用小工具菜单

添加主题到主题适当位置,一般是header.php模板文件。文章源自知更鸟-https://zmingcx.com/create-wordpress-mega-menus-with-widgets.html

<ul class="mega-menu">
	<?php
		$locations = get_nav_menu_locations();
		if ( isset( $locations[ 'mega_menu' ] ) ) {
			$menu = get_term( $locations[ 'mega_menu' ], 'nav_menu' );
			if ( $items = wp_get_nav_menu_items( $menu->name ) ) {
				foreach ( $items as $item ) {
					echo "<li>";
						echo "<a href=\"{$item->url}\">{$item->title}</a>";
						if ( is_active_sidebar( 'mega-menu-widget-area-' . $item->ID ) ) {
							echo "<div id=\"mega-menu-{$item->ID}\" class=\"mega-menu\">";
							dynamic_sidebar( 'mega-menu-widget-area-' . $item->ID );
							echo "</div>";
						}
					echo "</li>";
				}
			}
		}
	?>
</ul>

配合WP目前大力强推的区块小工具编辑器,可以打造出符合自己要求的超级菜单。文章源自知更鸟-https://zmingcx.com/create-wordpress-mega-menus-with-widgets.html

本文仅起到抛砖引玉的作用,至于如何实际运用这个方法,就看你的想像力了。文章源自知更鸟-https://zmingcx.com/create-wordpress-mega-menus-with-widgets.html

 文章源自知更鸟-https://zmingcx.com/create-wordpress-mega-menus-with-widgets.html

weinxin
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
WordPress 评论显示用户角色 WordPress

WordPress 评论显示用户角色

通过本文的方法,可以在WordPress每条评论显示注册用户角色标签。 代码一,自动在评论者名称后面添加 代码添加到当前主题函数模板 functions.php 中: if ( ! class_exi...
在 WordPress 后台直接复制文章 WordPress

在 WordPress 后台直接复制文章

在 WordPress 后台文章列表中,如果能直接复制一篇文章或页面,然后重新编辑后发表,是不是很方便。那为什么不全选复制文章内容,然后粘贴到新建文章中呢?这是因为这样做仅复制了文章内容,并未同时把原...
评论  1  访客  1
    • 易
      3

      :wink: 学习了

    匿名

    发表评论

    匿名网友 填写信息

    :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

    确定