用小工具创建 WordPress 超级菜单

所谓的超级菜单,就是有别于正常样式简单的 WordPress 菜单,添加更加丰富的自定义内容,在 WordPress 后台安装插件页面搜索”mega menu“,会找到一堆相关的插件。为了让菜单样式有变化,还可以直接用图片 HTML 代码:

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

替换菜单项“导航标签”的标题。

并利用 WordPress 菜单的选项中“CSS 类”,通过编写特定的样式,改变每个菜单项的结构样式,从而打造一个超级菜单。

本文分享一个更神奇的方法,通过动态创建侧边栏(小工具),为菜单添加任意小工具,从而实现自定义菜单内容。

一、注册专用菜单

将代码添加到当前主题函数模板 functions.php 中:

  1. // 注册专用菜单
  2. function zm_register_mega_menu() {
  3. register_nav_menus( array(
  4. 'mega_menu' => '小工具菜单'
  5. ) );
  6. }
  7. add_action( 'after_setup_theme', 'zm_register_mega_menu' );

之后在菜单设置页面,显示位置中会新增“小工具菜单”
用小工具创建 WordPress 超级菜单

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

将代码添加到当前主题函数模板 functions.php 中:

  1. // 注册动态侧边栏(小工具)
  2. function zm_register_widget_menu() {
  3. $location = 'mega_menu';
  4. $css_class = 'has-mega-menu';
  5. $locations = get_nav_menu_locations();
  6. if ( isset( $locations[ $location ] ) ) {
  7. $menu = get_term( $locations[ $location ], 'nav_menu' );
  8. if ( $items = wp_get_nav_menu_items( $menu->name ) ) {
  9. foreach ( $items as $item ) {
  10. if ( in_array( $css_class, $item->classes ) ) {
  11. register_sidebar( array(
  12. 'id' => 'mega-menu-widget-area-' . $item->ID,
  13. 'name' => $item->title . ' - 菜单小工具',
  14. ) );
  15. }
  16. }
  17. }
  18. }
  19. }
  20. add_action( 'widgets_init', 'zm_register_widget_menu' );

但当你进入 WordPress 小工具页面,会发现没有什么变化。

下面是见证奇迹的时刻了。新一个菜单,随便添加一个菜单项,在"CSS 类"中添加:has-mega-menu

并在显示位置勾选“小工具菜单”,最后,记得不要忘记保存菜单。
用小工具创建 WordPress 超级菜单
打开 WordPress 后台 → 外观 → 小工具页面,会发现自动生成一个名称为“小工具菜单 A - 菜单小工具”的侧边栏(小工具),与正常的侧边栏操作一样,可向里面添加小工具。
用小工具创建 WordPress 超级菜单
如果再加一个菜单项,同样在"CSS 类"中添加:has-mega-menu,就会再增加一个小工具“菜单 B - 菜单小工具”的侧边栏(小工具)

除了添加特定的类,关键要勾选专用的菜单位置“小工具菜单”。

二、前端调用小工具菜单

添加主题到主题适当位置,一般是 header.php 模板文件。

  1. <ul class="mega-menu">
  2. <?php
  3. $locations = get_nav_menu_locations();
  4. if ( isset( $locations[ 'mega_menu' ] ) ) {
  5. $menu = get_term( $locations[ 'mega_menu' ], 'nav_menu' );
  6. if ( $items = wp_get_nav_menu_items( $menu->name ) ) {
  7. foreach ( $items as $item ) {
  8. echo "<li>";
  9. echo "<a href=\"{$item->url}\">{$item->title}</a>";
  10. if ( is_active_sidebar( 'mega-menu-widget-area-' . $item->ID ) ) {
  11. echo "<div id=\"mega-menu-{$item->ID}\" class=\"mega-menu\">";
  12. dynamic_sidebar( 'mega-menu-widget-area-' . $item->ID );
  13. echo "</div>";
  14. }
  15. echo "</li>";
  16. }
  17. }
  18. }
  19. ?>
  20. </ul>

配合 WordPress 目前大力强推的区块小工具编辑器,可以打造出符合自己要求的超级菜单。

本文仅起到抛砖引玉的作用,至于如何实际运用这个方法,就看你的想像力了。

给TA打赏
共{{data.count}}人
人已打赏
WordPress教程

WordPress 菜单添加自定义选项打造超级菜单

2022-5-26 5:00:02

WordPress教程

移除 WordPress 5.9 内联样式

2022-5-26 8:01:55

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索