!
也想出现在这里? 联系我们
广告位

wordpress 调用自定义菜单/子菜单

WordPress 3.0 中,你将会在管理控制面板的 Appearance(外观) 菜单下见到一个被称为 Menus 的菜单系统。下图展示了该页面的 4 个主要元素。每个菜单条目都有它自己的配置选项。添加了条目之后,你就可以打开它,对其属性(这些属性在 WordPress 3.1 中进行了调整,请参考后面的留言)进行编辑。那么要将某个特定的菜单添加到主题中的某个位置,需要将该菜单登记进去。否则,我们就不知道哪个菜单应该在哪个位置上出现。该函数有两种使用方式(注意有一个 s 的区别):

  • register_nav_menu(): 注册一个单一的菜单位置。
  • register_nav_menus(): 注册多个菜单位置。

在下面的例子中,我们将在主题的 functions.php 函数中注册一个称为 Primary Menu 的菜单

  1. add_action( 'init', 'register_my_menu' );
  2. function register_my_menu() {
  3. register_nav_menu( 'primary-menu', __( 'Primary Menu' ) );
  4. }

其中 “primary-menu” 是我们在代码中用于标识该菜单的别名。“Primary Menu” 是我们在控制面板中用于标识该菜单的标签。当然,我们也可以利用类似的方式注册多个菜单。

  1. add_action( 'init', 'register_my_menus' );
  2. function register_my_menus() {
  3. register_nav_menus(
  4. array(
  5. 'primary-menu' => __( 'Primary Menu' ),
  6. 'secondary-menu' => __( 'Secondary Menu' ),
  7. 'tertiary-menu' => __( 'Tertiary Menu' )
  8. )
  9. );
  10. }

大多数主题都会在 header.php 模板中调用一个导航栏,但是 MENUS 能够放在主题的任何位置。调用自定义导航菜单的最简单形式为:

  1. <?php wp_nav_menu(); ?>

该语句将会加载用户创建的菜单或者如果导航菜单不存在的话就调用一个标准的页面列表。我们可能想对这个调用进行更多的控制。如果从前面提到的 Primary Menu 来调用一个导航菜单,可以这么做:

  1. <?php
  2. wp_nav_menu( array(
  3. 'theme_location' => '',//导航别名
  4. 'menu' => '', //期望显示的菜单
  5. 'container' => 'div', //容器标签
  6. 'container_class' => '',//ul父节点class值
  7. 'container_id' => '', //ul父节点id值
  8. 'menu_class' => 'menu', //ul节点class值
  9. 'menu_id' => '', //ul节点id值
  10. 'echo' => true,//是否输出菜单,默认为真
  11. 'fallback_cb' => 'wp_page_menu', //菜单不存在时,返回默认菜单,设为false则不返回
  12. 'before' => '', //链接前文本
  13. 'after' => '', //链接后文本
  14. 'link_before' => '', //链接文本前
  15. 'link_after' => '',//链接文本后
  16. 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>', //如何包装列表
  17. 'depth' => 0, //菜单深度,默认0
  18. 'walker' => '' //自定义walker
  19. ) );
  20. ?>

当然,不止是文本,也可以输出 HTML 标签,所以灵活使用这四个参数,可以打造出别具一格的导航菜单。但是这种菜单的输出都是 WordPress 格式化的,有些时候我们开发主题的时候需要完全自定义菜单的输出那么就需要用到一下方法,比如我需要生成的 html:

  1. <ul class="main-nav">
  2. <li class="item">
  3. <a href="http://example.com/?p=123" class="title">Title</a>
  4. <a href="http://example.com/?p=123" class="desc">Description</a>
  5. <ul class="sub-menu">
  6. <li class="item">
  7. <a href="http://example.com/?p=123" class="title">Title</a>
  8. <a href="http://example.com/?p=123" class="desc">Description</a>
  9. </li>
  10. </ul>
  11. </li>
  12. <li class="item">
  13. <a href="http://example.com/?p=123" class="title">Title</a>
  14. <a href="http://example.com/?p=123" class="desc">Description</a>
  15. </li>
  16. </ul>

我目前使用 wp_get_nav_menu_items 从我的菜单中获取所有的项目作为数组。现在我可以使用下面的代码生成上面的 html 没有子菜单:

  1. <?php
  2. $menu_name = 'main-nav';
  3. $locations = get_nav_menu_locations()
  4. $menu = wp_get_nav_menu_object( $locations[ $menu_name ] );
  5. $menuitems = wp_get_nav_menu_items( $menu->term_id, array( 'order' => 'DESC' ) );
  6. foreach ( $menuitems as $item ):
  7. $id = get_post_meta( $item->ID, '_menu_item_object_id', true );
  8. $page = get_page( $id );
  9. $link = get_page_link( $id ); ?>
  10. <li class="item">
  11. <a href="<?php echo $link; ?>" class="title">
  12. <?php echo $page->post_title; ?>
  13. </a>
  14. <a href="<?php echo $link; ?>" class="desc">
  15. <?php echo $page->post_excerpt; ?>
  16. </a>
  17. </li>
  18. <?php endforeach; ?>
  19. //如果有子菜单,向下钻取,如果我们到达子菜单和菜单的末尾,关闭。完整代码解释,首先将菜单项作为一个平面数组:
  20. <?php
  21. $menu_name = 'main_nav';
  22. $locations = get_nav_menu_locations();
  23. $menu = wp_get_nav_menu_object( $locations[ $menu_name ] );
  24. $menuitems = wp_get_nav_menu_items( $menu->term_id, array( 'order' => 'DESC' ) );
  25. ?>
  26. //然后在菜单项的数组上进行迭代:
  27. <nav>
  28. <ul class="main-nav">
  29. <?php
  30. $count = 0;
  31. $submenu = false;
  32. foreach( $menuitems as $item ):
  33. // set up title and url
  34. $title = $item->title;
  35. $link = $item->url;
  36. // item does not have a parent so menu_item_parent equals 0 (false)
  37. if ( !$item->menu_item_parent ):
  38. // save this id for later comparison with sub-menu items
  39. $parent_id = $item->ID;
  40. ?>
  41. //撰写第一个父项目li:
  42. <li class="item">
  43. <a href="<?php echo $link; ?>" class="title">
  44. <?php echo $title; ?>
  45. </a>
  46. <?php endif; ?>
  47. //检查此项目的父ID是否与存储的父ID匹配:
  48. <?php if ( $parent_id == $item->menu_item_parent ): ?>
  49. //开始子菜单< ul>并将$ submenu标志设置为true以供稍后参考:
  50. <?php if ( !$submenu ): $submenu = true; ?>
  51. <ul class="sub-menu">
  52. <?php endif; ?>
  53. //编写子菜单项:
  54. <li class="item"><a href="<?php echo $link; ?>" class="title"><?php echo $title; ?></a></li>
  55. //如果下一个项目不具有相同的父ID,并且已经声明了子菜单,则关闭子菜单ul
  56. <?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id && $submenu ): ?>
  57. </ul>
  58. <?php $submenu = false; endif; ?>
  59. <?php endif; ?>
  60. //再次,如果数组中的下一个项目不具有相同的父标识关闭li
  61. <?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id ): ?>
  62. </li>
  63. <?php $submenu = false; endif; ?>
  64. <?php $count++; endforeach; ?>
  65. </ul>
  66. </nav>

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

lightgallery 给你的网站快速实现图片灯箱效果

2023-12-15 14:08:05

WordPress教程

WordPress文章防复制的2种方法

2023-12-15 14:08:20

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索