欢迎访问 夜阑小雨 我的学习碎片档案,这里记录了我的学习内容和工作中经验,希望给您带去帮助。

转主题技巧: WordPress 导航菜单

Web前端 夜阑小雨 535℃ 0评论

导航菜单早已 “深入民心”, 在博客上的应用日益重要且多样. 从本文开始, 我将开展几个关于 WordPress 导航菜单的话题, 讨论如何在 WordPress 上使用和加强导航菜单, 话题间有一定的承接关系, 难度也会逐步增加.

WordPress 上的导航菜单一般有两种, 页面导航菜单和分类导航菜单.
可曾记得? WordPress 是可以撰写独立页面的, 页面导航菜单就是以首页和各个独立页面组成的菜单. 而分类导航菜单则是以首页和各个分类组成的菜单.

这是效果演示

相关话题:

WordPress 导航菜单
二级导航菜单
淡出淡入导航菜单
滚动导航菜单
点选式导航菜单 (待定话题)
三级导航菜单 (待定话题)

作业分析:

既然菜单由首页和独立页面列表或首页和分类列表所组成, 我们就需要处理两个环节, 即首页菜单项和其他菜单项.
另外, 我们还需要处理菜单项的三个状态, 即一般状态, 当前菜单项状态 (如: 在首页中, 首页菜单项就是当前菜单项) 和选中菜单项状态.
也就是说, 我们共需要处理 3 个事情:
1. 首页外的其他菜单项
2. 首页菜单项
3. 菜单项处于不同状态时的视觉效果

预想结构: 123456789 <div id=”menubar”> <ul class=”menus”> <li class=”…”><a href=”http://…/”>Home</a></li> <li class=”…”><a href=”http://…/”>菜单项1</a></li> <li class=”…”><a href=”http://…/”>菜单项2</a></li> <li class=”…”><a href=”http://…/”>菜单项3</a></li> … </ul></div> 页面导航菜单:

1. 独立页面列表作为菜单项
调用 wp_list_pages 获取独立页面列表, 并使用以下参数:
depth: 列表深度(层的最大数量), 本文讨论的是一级菜单, 故最大深度为 1
title_li: 标题字符串, 这里不需要, 设为 0
sort_column: 列表项的排序方式, 根据创建页面时所设定的 order 进行升序排列
打印独立页面菜单项的语句是:

1 <?php wp_list_pages(‘depth=1&title_li=0&sort_column=menu_order’); ?>

2. 首页菜单项
由于一般独立页面的 class 是 page_item, 当前独立页面的 class 是 current_page_item. 当页面是首页时, 首页菜单项的 class 应该是 current_page_item, 其他情况则是 page_item. 为此, 我们需要一段分支代码来为它确定 class:

1234567891011 <?php // 如果是首页, class 是 current_page_itemif (is_home()) { $home_menu_class = ‘current_page_item’;// 如果不是首页, class 是 page_item} else { $home_menu_class = ‘page_item’;} ?>

打印首页菜单项的语句是:

123 <li class=”<?php echo($home_menu_class); ?>”> <a title=”Home” href=”<?php echo get_settings(‘home’); ?>/”>Home</a></li>

3. 菜单的样式
这是一个从普遍到特殊的处理过程, 一般菜单项的样式放前面, 当前和选中菜单项的样式放在后面, 当后者条件满足就会覆盖前者的样式, 从而改变外观.

12345678910111213141516171819202122 /* 菜单项 */#menubar ul.menus li { float:left; /* 靠左浮动 */ list-style:none; /* 清空列表风格 */ margin-right:1px; /* 右侧的间隔 */}/* 菜单项链接 */#menubar ul.menus li a { padding:5px 10px; /* 内边距 */ display:block; /* 显示为块 */ color:#FFF; /* 文字颜色 */ background:#67ACE5; /* 背景颜色 */ text-decoration:none; /* 没有下横线 */}/* 当前菜单项链接 */#menubar ul.menus li.current_page_item a { background:#5495CD; /* 背景颜色 */}/* 选中菜单项链接 */#menubar ul.menus li a:hover { background:#4281B7; /* 背景颜色 */} 分类导航菜单:

1. 分类列表作为菜单项
调用方法 wp_list_categories 获取分类列表, 并使用以下参数:
depth: 列表深度(层的最大数量), 本文讨论的是一级菜单, 故最大深度为 1
title_li: 标题字符串, 这里不需要, 设为 0
orderby: 列表项的排序方式, 根据创建页面时所设定的 order 进行升序排列
show_count: 是否显示该分类的文章数量, 这里不需要显示, 设为 0
打印分类菜单项的语句是:

1 <?php wp_list_categories(‘depth=1&title_li=0&orderby=name&show_count=0’); ?>

2. 首页菜单项
与页面导航菜单相似, 只是菜单项的 class 有所不同.
page_item 更改为 cat-item
current_page_item 更改为 current-cat

3. 菜单的样式
因为菜单项的 class 略有不同, 所以也需稍作修改.
current_page_item 更改为 current-cat

演示主题:

以 WordPress 自带主题 default 为基础, 仅做学习参考使用, 修改过的文件有 header.phpstyle.css
主题已包含了页面导航菜单和分类导航菜单两个菜单栏. 为了演示方便, 我使用了 class=”menubar” 来定义两个菜单栏的样式. 而正式使用只有一个菜单栏, 用 id 定义更为合适.

下载主题: default_with_menubar.zip

转载请注明:夜阑小雨 » 转主题技巧: WordPress 导航菜单

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址