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

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/89543

WordPress安全防护插件
服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

电子邮件地址不会被公开。 必填项已用*标注

51建站客服微信二维码
点击这里购买