用户登录

03-06-在主题中显示导航菜单

在模板文件里使用 wp_nav_menu() 这个函数可以显示在后台定制的导航菜单的内容。 打开 header.php ,在我们设计的主导航菜单的地方,输入 <?php wp_nav_menu(); ?> ...

在这个函数里,我们可以再添加一些参数 ... 比如你可以设置菜单的位置,也就是我们在 functions.php 里注册的菜单位置,你也可以指定显示具体的菜单。

这些参数和参数的值都在一个数组里,在函数的大括号里,输入 array() ... 先输入想要定制的参数 ... 放在一组引号里 .. 'theme_location' => 'primary',

这里我们设置了 theme_locations 这个参数的值为 primary ... 意思就是我们要让 wp_nav_menu() 这个函数显示指定在 primary 这个位置的菜单 ... 这个位置是我们在 functions.php 里注册的一个菜单的位置 ...

如果你不设置 theme_locations 参数的话, 函数会显示在 menu 参数里指定的具体的某个菜单 ... 如果没设置 menu 参数,就会显示我们在后面创建的第一个菜单里的内容 ... 如果没创建菜单 ... 会显示 fallback_cb 里设置的内容 ,默认是页面的菜单 ...

保存一下 ... 回到前台 ... 刷新 ... 你会看到 mainmenu 这个菜单里的内容 ... 因为我们在后台指定这个菜单显示在了 primary 这个位置上。

不过这个菜单的样式并没有按照我们设计的显示 ... 想让它完全跟我们的设计一样,你需要在特定的条件或者环境下使用我们设计的 css 类或者元素。

就相当于我们重新设计了 WordPress 的导航菜单 ... 我们可以自己创建一个 Walker Class ...

这里我借用了 the bootstrap 主题里定制的 Walker Class ... 开源的好处就是你可以随便使用或者修改它们的代码...

http://wordpress.org/extend/themes/the-bootstrap

打开课程的资料包 ... xx-xx ... 复制一下这里的代码 ...

然后回到主题项目 ,打开 functions.php ... 粘贴到这里 ... 这段代码是针对 Bootstrap 架构的导航菜单设计的,如果你想使用在自己的主题里,要确定你的主题使用了 Bootstrap 架构 ... 你还要把这里出现的所有的 fenikso 这个字符,换成你自己的主题的名称 ...

再回到 header.php ,我们再给 wp_nav_menu() 定制几个参数 ... 在我们的设计里,导航菜单的无序列表标签上有个 nav 类,我们要把它添加到导航菜单里 ...

另起一行 'menu_class' => 'nav', 我们把 menu_class 这个参数,也就是导航菜单的类参数的值设置为了 nav,这个类会添加到 ul 标签上 ...

默认的导航菜单会使用 <div> 标签包装无序列表,这里我们不需要这个容器,可以去掉它 ...

再另起一行,输入 ... 'container' => false, 这里我们把 container 参数设置为了 false,表示我们不想使用这个容器包装导航菜单。

最后还要指定我们自己定义的那个 walker ...

'walker' => new fenikso_Nav_Walker,

保存 ... 回到网站首页 ... 刷新 ... 现在导航菜单就会变成我们设计好的样子了 ... 点击有子菜单的菜单项 ... 会弹出下拉菜单 ... 显示这个子菜单 ....

在主题中显示导航菜单《 WordPress 主题开发 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点