WordPress不同分类文章显示不同样式图标，兼容文章属于多个分类

分类栏目：用户体验 - 视觉设计

版权信息： 原创作品、版权所有，禁止匿名转载，分享请注明版权。

22869

发布于 10 条评论

不同分类图标

你是否有在首页或者某个分类下显示不同的样式的需要？你是否厌烦了每个分类下日志的样式(图标)都是一样？那我们就来点不同的东西吧！每个分类下的样式（图标）有所区别，这是非常有助于用户识别的，可以提高用户体验，再者，不同的样式（图标）可以为你的网页设计起到点缀的作用，正好符合网站统一性中的个性化差异的特点。为你的网站添加一点精彩吧！这是一个小技巧，没有什么技术含量，希望可以帮到有需要的童鞋。老鸟可以在此飞过了……

其实这个效果是很简单的，我们来看看设计思路：

  • 判断文章属于哪一个分类
  • 不同分类输出不同样式

代码如下：

<div
<?php
  if (in_category('A'))
    {echo 'class="type_a"';}
  if (in_category('B))
    {echo 'class="type_b"';}
  if (in_category('C'))
    {echo 'class="type_c"';}
  if (in_category('D'))
    {echo 'class="type_d"';}
  if (in_category('E'))
    {echo 'class="type_e"';}
  else
    {echo 'class="type"';}
?>
</div>

这段代码的意思就是：

  • 分类为A的话就输出<div class=”type_a”></div>
  • 分类为B的话就输出<div class=”type_b”></div>
  • 分类为C的话就输出<div class=”type_c”></div>
  • 分类为D的话就输出<div class=”type_d”></div>
  • 分类为E的话就输出<div class=”type_e”></div>
  • 其他分类就输出<div class=”type”></div>

只要把这段代码放到你想要定义不同样式的地方就行了。是不是很简单呢？

代码放好后，样式也写完整了，那么快点到前台刷新看看吧。

wordpress-icon

如果细心的朋友们就能发现一个问题，如果我这篇文章是属于两个分类或者两个分类以上的，那怎么显示相对应的分类样式（图标）呢？依照上面的方法，默认情况下是显示第一个分类的。在首页的时候看起来没什么大问题，但是当你点击到分类页面的时候，发现那些属于两个或两个以上分类的文章是不是样式和其他的不一样，这点看起来是非常的不舒服的，但是万事都有解决的办法。

因为是在分类页面，那么我们就可以利用 if 的判断语句来解决，看代码：

<?php if ( is_category() ) { ?>
<?php
  if (is_category('A'))
    {echo 'class="type_a"';}
  if (is_category('B))
    {echo 'class="type_b"';}
  if (is_category('C'))
    {echo 'class="type_c"';}
  if (is_category('D'))
    {echo 'class="type_d"';}
  if (is_category('E'))
    {echo 'class="type_e"';}
  else
    {echo 'class="type"';}
?>
<?php } else { ?>
<?php
  if (in_category('A'))
    {echo 'class="type_a"';}
  if (in_category('B'))
    {echo 'class="type_b"';}
  if (in_category('C'))
    {echo 'class="type_c"';}
  if (in_category('D'))
    {echo 'class="type_d"';}
  if (in_category('E'))
    {echo 'class="type_e"';}
  else
    {echo 'class="type"';}
?>
<?php } ?>

这样子一来就解决了上面的问题了，具体效果可以看我博客的首页和分类页面。但我感觉上面的代码是采用比较基本的方法来解决的，不知道还有没有更加方便的方法，还望高手指点，如果有更加简洁的实现方法，请跟我分享，我万分感谢！

相关推荐

全部评论 / 10

  1. jiaoyou

    其实，最好的办法就是使用＂模板选择器＂，不同的个分类指定不同的自定义分类模板就好了！如果系统没有生成独立的头部样式ＩＤ的话，那么就在当前的模板用ＪＳ生成自定义的样式ＩＤ加到ＢＯＤＹ当中，这样就可以通过ＣＳＳ单独设置这个分类的样式了！

    jiaoyou 2012-09-21
    20

  2. 不错，正好找这个！

    chasonma 2012-09-21
    19

  3. 博主你好，还是不太清楚这段代码该放哪个位置。我用这段代码调用了我的主分类：，那定义各个分类的图片那串代码我该放在哪个位置啊？还有class就写在style.css中是吗？谢谢。

    容力 2012-09-21
    18
    1. Javin

      这里的代码只是讲个原理，具体放在什么地方就看你要在什么地方显示图标了。现在的代码也只是一个示例代码，需要你自己修改后才能被你使用的。分类为A的话就输出<div class=”type_a”></div>
      分类为B的话就输出<div class=”type_b”></div>      定义的图标样式就直接放到style.css文件里面，和其他的样式代码一样的。

      1号 Javin 2012-09-21

      1. 还是不懂呀，原来我输的那条代码没显示，是这样的，我要在导航栏调用我的主分类，用代码《?php wp_list_categories(‘depth=1&title_li=0’); ?》，有两个主分类，一个ID是1，一个ID是2.我要给1和2指定不同的图标，class分别定义为div1和div2.。那这条代码我要放哪里：《?php
        if (in_category(‘1’))
        {echo ‘class=”div1″‘;}
        if (in_category(‘2’))
        {echo ‘class=”div2″‘;}
        ？》
        试了都不行啊。

        容力 2012-09-21
    2. Javin

      @容力 :

      还是不懂呀，原来我输的那条代码没显示，是这样的，我要在导航栏调用我的主分类，用代码《?php wp_list_categories(‘depth=1&title_li=0′); ?》，有两个主分类，一个ID是1，一个ID是2.我要给1和2指定不同的图标，class分别定义为div1和div2.。那这条代码我要放哪里：《?php
      if (in_category(’1′))
      {echo ‘class=”div1″‘;}
      if (in_category(’2′))
      {echo ‘class=”div2″‘;}
      ？》
      试了都不行啊。

      《?php wp_list_categories(‘depth=1&title_li=0′); ?》这个会自动输出html结构，默认状态下你是不能修改的，所以用上方这个方法添加是很麻烦的。

      1号 Javin 2012-09-21

  4. 我觉得这几个图标很不错。

    wmtimes 2012-09-21
    17

  5. 这个教程不错，可以深入修改源代码啦！

    沐雪狼 2012-09-21
    16
    1. Javin

      感谢支持。

      1号 Javin 2012-09-21

  6. 这个东西我找了好久，终于被我找到了，鸡冻啊

    多出的一只猪 2012-09-21
    15