一种简单的方法,在循环和单一类别中以不同的方式设置单一类别的帖子样式

时间:2017-01-19 作者:CoderScissorhands

我有一个特定类别的帖子(假设类别是punk-rockers) 我想:

与我的主循环中的其他帖子(index.php)的样式不同,并且有单个帖子(single.php),这些帖子的样式不同于我的其他帖子

默认循环(例如。punk-rockers 循环样式)

  • 默认单篇文章
  • 特殊类别单篇文章(例如。punk-rockers 单一样式)
  • 重要的是,样式#2和#4不仅与#1和#3不同,而且彼此也不同。所以不仅仅是类别的帖子punk-rockers 在主循环中与其他帖子看起来不同,但这些帖子也会有单独的帖子,其自己的样式会有所不同,这取决于它是出现在主循环中还是出现在单独的帖子中。

    我知道我可以使用现有的category类.category-punk-rockers 在CSS中修改此类帖子,但我的问题是:I\'m not sure how about the easiest way to stylize them differently on the loop and the single.

    如果你们都能告诉我你们认为实现这一目标的最优雅的选择方法,我会很高兴的。

    谢谢

    注:答案this question 使用php可以解决一些内容不同(而不仅仅是样式)的类似问题,但我认为如果我只想更改样式,可能会有一种更简单、只使用CSS的方法。

    3 个回复
    最合适的回答,由SO网友:CK MacLeod 整理而成

    我不确定我是否理解这个问题,因为答案似乎很简单,假设使用标准模板-可以想象,你的主题没有提供你所要求的课程类型,但IMO会很奇怪。

    主题作者的标准做法是包含该功能body_class() 它将不同的类添加到页面的html正文标记中,具体取决于所显示的帖子或页面的类型。这些课程包括:

    • archive (对于存档页),
    • blog (对于博客或主循环),
    • home (对于主回路或主回路),
    • single/single-post (对于单曲),
    • category/category-[cat-#] (用于类别)
    根据应用的不同,您将看到不同的列表。

    如果您想知道页面的类是什么,可以查看源代码,并查看<body> 标签位于顶部。

    所以你可以.category-punk-rockers 打造朋克摇滚乐风格。一般来说.home .category-punk-rockers 对于主回路,.archive .category-punk-rockers 对于类别档案,.single-post .category-punk-rockers 对于单篇文章等,根据安装使用的小部件和附加组件的类型,您可能需要进一步区分。

    SO网友:Henning Fischer

    在“single.php”中,检查是否为类别:

    is_category( \'Punk-Rockers\' );
    
    然后做

    get_template_part( \'punkrockers\' );
    
    有了这个,你可以做很多事情。顺便说一句,这个条件标签提供了很多:https://codex.wordpress.org/Conditional_Tags

    SO网友:CoderScissorhands

    我找到了一个可推广的解决方案(这意味着您可以将其用于其他类别,而无需为每个类别编写特定代码),但您确实需要向索引中添加一些代码。php文件和单个。php文件。

    在索引页中,而不仅仅是:

    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    
    您可以添加类main-index 通过向函数添加一个参数来添加帖子post_class(), 像这样:

    <article id="post-<?php the_ID(); ?>" <?php post_class(\'main-index\'); ?>>
    
    在您的单个页面中,而不仅仅是:

    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    
    您可以添加类single-post 相反,使用相同的方法,如下所示:

    <article id="post-<?php the_ID(); ?>" <?php post_class(\'single-post\'); ?>>
    
    样式表的CSS选择器:

    然后您可以使用

    .main-index.category-punk-rockers {/*CSS*/}
    
    单曲样式为

    .single-post.category-punk-rockers {*/CSS*/}
    

    相关推荐

    通过主题定制器编辑style.css

    直到现在,在我的Wordpress主题中,我在主题定制器中实现了一些必要的样式选项,这些选项将编辑CSS并通过将CSS输出到头部内部来覆盖它<style> 标记,例如,这里我实现了颜色选择器,如果默认状态发生更改,我会输出样式:function dc_get_gradient_colors() { $first_color = get_theme_mod( \'primary_color_1\' ); if ( $link_color != \'#0