仅在主页上设置样式

时间:2013-12-04 作者:MrS1ck

我对Wordpress比较陌生,但我相信有一种方法可以做我想做的事情。

我的模板中有一个容器,在主页上我想为这个元素指定稍微不同的填充。

我当前的CSS如下:

#main_content .container {
position: relative;
padding: 120px 0;
}
如果我在主页上,我想将填充降低到80px,否则保持这种方式。

这是我必须在模板中完成的事情,还是有一些花哨的“仅限WordPress”CSS技巧我目前还不知道?

根据我有限的经验,我认为我应该能够指定页面是否is_home 或类似的,并在header.php 主页的文件。大概是吧!important 在我为CSS更改填充后。

我能知道方向吗?我通过搜索找到的结果并不是我想要做的。

2 个回复
最合适的回答,由SO网友:Mayeenul Islam 整理而成

WordPressbody_class($class) 是一种很好的动态加载样式的方法,js用于特定的正文内容。如果您的主题不支持body类,请简单添加:

打开header.php (或包含<body> 标记)编辑<body> 标记并使其<body <?php body_class(); ?>> &mdash;您完成了!:)现在,当您在:

  • Home 第页,您的正文标记将呈现<body class="blog">
  • Front Page, 您的主体标记将呈现<body class="home">single.php), 您的主体标记将呈现<body class="single">page.php), 您的主体标记将呈现<body class="page">

    body.home #main_content .container {
       position: relative;
       padding: 120px 0;
    }
    
    对于内部CSS,WordPress中有一个条件检查器,名为is_home(), 另一个是is_front_page(). 使用这两个选项,您可以检查“您”是在主页还是在首页,然后可以加载您的内部CSS代码:

    <?php if( is_home() || is_front_page() ) : ?>
    <style id="my-internal-css">
        #main_content .container {
           position: relative;
           padding: 120px 0;
        }
    </style>
    <?php endif; ?>
    
    类似地is_single(), is_page(), is_category(), is_archive(), is_day(), ... 等等。。。

SO网友:saifur

检查body标签的类,主页有一个名为home的类。我希望下面的css将帮助您。

.home #main_content .container {
position: relative;
padding: 120px 0;
}

结束

相关推荐

如何根据容器宽度自动调整图像大小服务器端/无css

是否有人知道如何调整所服务图像的大小,以便图像具有内容容器宽度所决定的宽度。我的意思不是通过100%宽度的css调整图像大小,而是调整图像本身的实际尺寸和大小。例如:文章中的图像,其尺寸为400px × 300px. 但在概述中,我只需要200px × 150px. 但我不想编辑我的主题的每一部分,因为有很多不同的大小。是否有可能自动工作?