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

知更鸟 WordPress202.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

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

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

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

WordPress

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

  1. function category_id_class($classes) {
  2.      global $post;
  3.           foreach((get_the_category($post->ID)) as $category)
  4.                $classes [] = 'cat-' . $category->cat_ID . '-id';
  5.      return $classes;
  6. }
  7. add_filter('post_class', 'category_id_class');
  8. 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

  1. .cat-6-id, #top_hot {
  2.     displaynone;
  3.     }

一举反三,可以定义其它任意位置的文字大小,背景颜色等与其它分类不同。文章源自知更鸟-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

weinxin
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
评论  20  访客  18  作者  1  引用  1
    • 磁县百科
      磁县百科 1

      不明觉厉!

        • 虎子
          虎子 0

          @ 磁县百科 把我这评论删了吧

        • 优团聚
          优团聚 1

          很好,正在学习中,支持。

          • kpopcomedy
            kpopcomedy 6

            鸟哥,请问你的class=logo这个是在哪个位置定义的?,想把logo这个class改小点

              • 知更鸟
                知更鸟

                @ 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;

              • wmtimes
                wmtimes 7

                看来文章也可以这么来了。

                • 润
                  5

                  鸟哥。首页友情链接超过20个了,添加其他的连接。首页不显示。怎么办呢?

                  • kpopcomedy
                    kpopcomedy 6

                    鸟哥,导航栏下方的字怎么去掉呢?我把head.php里对应显示时间的哪行代码删掉之后,只剩下“登录”两个字了,可是代码没有直接显示登录,然后就不晓得怎么办了。

                    • 风口上的树
                      风口上的树 3

                      鸟哥的主页最近怎么老是变来变去的啊

                      • kpopcomedy
                        kpopcomedy 6

                        把微博去掉了,把class(logo)也改小了,但是logo图片旁边还是有一块空白区域是首页链接呢

                        • hjrhclan
                          hjrhclan 0

                          如果一篇文章有很多分类呢?

                          • 小林子
                            小林子 1

                            鸟哥 ,求Wordpress首页不显示指定首页的文章的解决办法?最新文章列表仍显示

                            • 龙笑天
                              龙笑天 5

                              你好,请问这个分类id数字6加到这个函数的哪个地方呢?

                                • 龙笑天
                                  龙笑天 5

                                  @ 龙笑天 哦,知道了,这个函数的意思是给 所有的 分类及分类文章的body加上cat-id数字-id这个class………

                                • 郝
                                  1

                                  我想请教下,我建分类目录时候,ID怎么都不是2怎么办呢?新建分类目录 1345678 都有就是分类目录ID没有2,是什么原因呢?谢谢

                                匿名

                                发表评论

                                匿名网友 填写信息

                                :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

                                确定