wordpress巧用分类栏目ID打造不同css栏目样式

关注公众号

今天一大早就要把昨晚折腾了半夜的方法记录,以备后用。

最近,承接一单业务:帮一所学校建一个网站,话说如果是简单搭建,对于队室网站来说也是小事一桩,但咱不是这样的人哪。总想着能做得漂亮和与众不同。

在栏目分类页面设计时遇到了难题:网站共有六个分类,一般的CMS都是设计成相同的风格模板,直接套用。但在一韩国网站看到每个栏目均有不同的风格样式,包括色调和背景图。每点击一个栏目均呈现不同的样式。

一开始的传统思路就是:一是使用不同的模板。(那要做六块)二是使用wordpress判断函数,调用不同的CSS样式。(后台源码中要写一大堆)

通过度娘了解,还是上述的思路居多,但是看到菜单导航可以利用分类ID形成的不同css打造高亮或是不同链接样式时,忽然想到,能不能利用分类栏目的不同ID来定义不同的css呢?

即网站栏目基本模板不变,然后在定义css样式时,对需要有不同变化的css样式加上分类栏目ID区别定义。

历尽周折,在把我的电脑积累的一大堆缓存之后,终于在知更鸟的网站找到了方法:(大虾就是不一样)

通过一段代码判断WordPress分类ID,自动在分类页面和文章页面的<body> 标签中添加类似“cat-*-id”(*即是分类ID)例如:
<body class="archive category category-wordpress category-6 logged-in custom-background cat-6-id">数字“6”就栏目的ID。

第一步:添加源码:<body <?php body_class(); ?>>

第二步:将以下代码添加到您当前主题的 functions.php 文件:

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');

我的应用举例:

在分类ID为11和72的分类归档页面使用不同的边框颜色和背景图片,可在主题样式文件style中添加:

/*---校园新闻----*/
.cat-11-id .ban-bg {background: url('images/xyxw-bg.jpg') no-repeat 0 0;}
.cat-11-id .cat-xybg {background: url('images/cat-xy.jpg') no-repeat 0 0;}
.cat-11-id .color-2 {border-color:#9ebf16;color:#9ebf16;}
.cat-11-id .color-2 a:hover {color:#9ebf16;}
.cat-11-id .daohang a {color:#9ebf16;}
/*-----德育之窗------*/
.cat-72-id .ban-bg {background: url('images/dyzc.jpg') no-repeat 0 0;}
.cat-72-id .cat-xybg {background: url('images/cat-dy.png') no-repeat 0 0;}
.cat-72-id .color-2 {border-color:#349d95;color:#349d95;}
.cat-72-id .color-2 a:hover {color:#349d95;}
.cat-72-id .daohang a {color:#349d95;}

前台呈现效果截图:

wordpress巧用分类栏目ID打造不同css栏目样式

校园新闻栏目页面

wordpress巧用分类栏目ID打造不同css栏目样式

德育之窗栏目页面

发布日期:2014年10月28日  所属分类:队室闲谈

相关文章:

您可以选择一种方式赞助本站

微信钱包扫描赞助

少先队室

发表评论

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