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

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

这段代码通过判断WordPress分类ID，自动在分类页面和文章页面的<body> 标签中添加“cat-6-id”例如：文章源自知更鸟-https://zmingcx.com/add-category-id-body-post-class-wordpress.html

<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

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

获取本主题

售前咨询加Q：598845006

多功能主题 Begin

获取本主题

售前咨询加Q：598845006

多功能主题 Begin

评论 20 访客 18 作者 1 引用 1

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