按WordPress分类ID为页面添加相应的class

1910
文章

2014年5月7日 16:25:25WordPress202.9K阅读模式

这段代码通过判断WordPress分类ID，自动在分类页面和文章页面的<body> 标签中添加“cat-6-id”例如：

<body class="archive category category-wordpress category-6 logged-in custom-background cat-6-id">文章源自知更鸟-https://zmingcx.com/add-category-id-body-post-class-wordpress.html

其中数字为该分类的ID号，前提是主题模板必须使用函数：文章源自知更鸟-https://zmingcx.com/add-category-id-body-post-class-wordpress.html

<body <?php body_class(); ?>>

有了这个非常方便的功能，你就可以针对不同的分类定义不同的样式风格。文章源自知更鸟-https://zmingcx.com/add-category-id-body-post-class-wordpress.html

WordPress

将以下代码添加到您当前主题的 functions.php 文件:文章源自知更鸟-https://zmingcx.com/add-category-id-body-post-class-wordpress.html

function category_id_class($classes) {
global $post;
foreach((get_the_category($post->ID)) as $category)
$classes [] = 'cat-' . $category->cat_ID . '-id';
return $classes;
}
add_filter('post_class', 'category_id_class');
add_filter('body_class', 'category_id_class');

文章源自知更鸟-https://zmingcx.com/add-category-id-body-post-class-wordpress.html

应用实例：文章源自知更鸟-https://zmingcx.com/add-category-id-body-post-class-wordpress.html

比如：HotNewspro主题，在分类ID为6的分类归档和文章页面隐藏热点文章（顶部的四张图片），可在主题样式文件style中添加：文章源自知更鸟-https://zmingcx.com/add-category-id-body-post-class-wordpress.html

.cat-6-id, #top_hot {
display: none;
}

一举反三，可以定义其它任意位置的文字大小，背景颜色等与其它分类不同。文章源自知更鸟-https://zmingcx.com/add-category-id-body-post-class-wordpress.html

原代码出处：http://www.trickspanda.com/2014/04/add-category-id-body-post-class-wordpress/文章源自知更鸟-https://zmingcx.com/add-category-id-body-post-class-wordpress.html 文章源自知更鸟-https://zmingcx.com/add-category-id-body-post-class-wordpress.html

我的微信

本站原创文章转载请注明文章出处及链接，谢谢合作！

获取本主题

598845006

咨询主题请加Q：598845006

多功能主题 Begin

WordPress
Wordpress教程
WordPress主题

598845006

咨询主题请加Q：598845006

多功能主题 Begin

评论 20 访客 18 作者 1

磁县百科 1
2014年5月7日 17:30:31 山西省阳泉市 1F
回复
不明觉厉！
- 虎子 0
  2014年5月17日 11:36:19 上海市长宁区 B1
  回复
  @ 磁县百科把我这评论删了吧
优团聚 1
2014年5月9日 23:08:28 广东省湛江市 2F
回复
很好，正在学习中，支持。
kpopcomedy 6
2014年5月10日 14:36:31 重庆市铜梁县 3F
回复
鸟哥，请问你的class=logo这个是在哪个位置定义的？，想把logo这个class改小点
- 知更鸟
  2014年5月11日 09:22:39 中国 B1
  回复
  @ kpopcomedy 打开主题style样式文件：
  1. .logo {
  2. background:url(images/logo.png) no-repeat;
  3. float: left;
  4. width: 350px;
  5. height: 53px;
  6. margin: 5px 0 0 5px;
  7. text-indent: –10000px;
  8. cursor:pointer;
  9. }
  修改其中的：
  width: 350px;
  height: 53px;
  - kpopcomedy 6
    2014年5月13日 00:37:37 重庆市 B2
    回复
    @ 知更鸟谢谢，我先自己试试看能不能缩小点
    - kpopcomedy 6
      2014年5月14日 00:24:57 重庆市 B3
      回复
      @ kpopcomedy 鸟哥，找了一下，没找到logo这个class，不在css和styles这两个文件夹里
  - kpopcomedy 6
    2014年5月14日 00:26:15 重庆市 B2
    回复
    @ 知更鸟搜索了下，找到了。
wmtimes 7
2014年5月10日 15:33:26 江西省新余市 4F
回复
看来文章也可以这么来了。
润 5
2014年5月10日 22:28:25 北京市 5F
回复
鸟哥。首页友情链接超过20个了，添加其他的连接。首页不显示。怎么办呢？
kpopcomedy 6
2014年5月14日 00:18:43 重庆市 6F
回复
鸟哥，导航栏下方的字怎么去掉呢？我把head.php里对应显示时间的哪行代码删掉之后，只剩下“登录”两个字了，可是代码没有直接显示登录，然后就不晓得怎么办了。
风口上的树 3
2014年5月15日 21:49:06 江西省吉安市 7F
回复
鸟哥的主页最近怎么老是变来变去的啊
- 我爱上QQ 6
  2014年5月18日 18:12:42 广东省深圳市 B1
  回复
  @ 风口上的树来得够勤快…
kpopcomedy 6
2014年5月16日 20:13:54 重庆市铜梁县 8F
回复
把微博去掉了，把class（logo）也改小了，但是logo图片旁边还是有一块空白区域是首页链接呢
hjrhclan 0
2014年7月1日 10:38:48 北京市 9F
回复
如果一篇文章有很多分类呢？
小林子 1
2015年1月15日 22:33:09 四川省德阳市 10F
回复
鸟哥，求Wordpress首页不显示指定首页的文章的解决办法？最新文章列表仍显示
龙笑天 5
2015年12月24日 00:54:35 江苏省南京市 11F
回复
你好，请问这个分类id数字6加到这个函数的哪个地方呢？
- 龙笑天 5
  2015年12月24日 01:00:29 江苏省南京市 B1
  回复
  @ 龙笑天哦，知道了，这个函数的意思是给所有的分类及分类文章的body加上cat-id数字-id这个class………
郝 1
2017年6月18日 17:52:54 陕西省西安市 12F
回复
我想请教下，我建分类目录时候，ID怎么都不是2怎么办呢？新建分类目录 1345678 都有就是分类目录ID没有2，是什么原因呢？谢谢