用好WordPress标签生成的样式
来源: 阅读:725 次 日期:2014-08-27 11:11:23
温馨提示: 小编为您整理了“用好WordPress标签生成的样式”,方便广大网友查阅!

还在考虑Wordpress主题中那些类、ID怎么命名吗?其实wordpress输出标签生成的代码中默认已经自动生成了一些class和id,本文就一些常见的代码中的生成的样式列出来:

wp_nav_menu()生成的菜单(代码略)

最外面层的class=”menu-nav-container”

无序列表ul样式id=”menu-nav” class=”menu”如果是二级菜单则样式为class=”sub-menu”

内部列表项li样式 id=”menu-item-7″ class=”menu-item menu-item-type-taxonomy menu-item-object-category menu-item-7″

说明:

1、class=”menu-item menu-item-type-taxonomy menu-item-object-category menu-item-7″其实是调用了“menu-item”、“menu-item-type-taxonomy” 、“menu-item-object-category”、“menu-item-7”四个样式,它们中间是用空格分开的。

2、“menu-item”在这个所有菜单项是一样,“menu-item-type-taxonomy menu-item-object-category” 这个在菜单里面是不一样的,如果是这一菜单项是类别生成的就是这段代码,如果这一菜单项是调用的页面则生成的这段代码会变成“

menu-item-type-post_type menu-item-object-page”,如果这一菜单项是自定义的则为“menu-item-type-custom menu-item-object-custom”。

3、列表项中每一项“menu-item-7”后面的数字不一样

4、在主题类别页当前类别的菜单项中还会多出一个“current-menu-item”。

生成的类别列表li中带有class=”cat-item cat-item-4″,其中“cat-item”中通用的,“cat-item-4”后面的数字对应类别名称,文章列表页主题中如果是当前主题,还会多出“ current-cat”样式

生成的类别列表li中带有class=”page_item page-item-71″,其中“page_item”中通用的,“page-item-71”后面的数字对应页面ID

特色图像the_post_thumbnail() 带有class=”Thumbnail thumbnail ”

系统默认评论模板wp-includescomment-template.php也已经为我们添加好了对应的样式。

一些插件也会生成的特有样式代码

breadcrumb插件id=”breadcrumb”

get the image插件生成的图片中class=”attachment-100×100 wp-post-image”

其实这些命名都是有规律的,例如“menu-item”翻译过来就是“菜单项”,“current-menu-item”翻译过来就是“当前菜单项”,如果你的英文不错的话就很简单了。

在制作主题的时候我们只要给这些已经取好名字的class和id上添加上样式属性就行了。

例如:

在导航菜单中我们可以给访问的当前类别添加不同的样式以示区分,那只需要给“current-menu-item”添加上不同的样式就行了。

更多信息请查看IT技术专栏

更多信息请查看网络编程
由于各方面情况的不断调整与变化, 提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:
咨询QQ:526150442(9:00—18:00)版权所有:
云南网警报警专用图标
Baidu
map