主页上的CSS不同

时间:2015-03-31 02:34:07

标签: css

我的样式表中有这段代码:

#social-icons {
    width:100%;
}
#social-icons li {
    float:right;
    display: inline;
    list-style-type:none; 
    padding: 10px 10px 10px 10px;
    width:50px;
    height:50px;
    text-decoration: none;
}

我希望所有网页上都#social-icons lifloat:left,但主页除外。

2 个答案:

答案 0 :(得分:1)

在主题的header.php文件中,在</head>代码之前,只需输入以下代码:

<?php
if(!is_homepage())
{
?>
    <style type="text/css">
    #social-icons li {float:left}
    </style>
<?php
}
?>

如果您不想触摸主题,可以使用wp_head action hook

在Bruno Toffolo发表评论之后

如果您不喜欢内联css,可以将主页特定的css规则放到另一个css文件(如homepage.css)中,然后使用is_homepage()条件标记将此css文件排入队列。

<?php
if(!is_homepage())
{
    wp_enqueue_style(...);
}
?>

答案 1 :(得分:1)

大多数WordPress主题通过向body标记添加不同的类来为主页提供CSS挂钩以及许多其他因素。尝试比较主页和其他页面上的body标记。

在我正在处理的网站上,这是主页的标记:

<body class="home page page-id-33 page-template-default">

这里是内部页面:

<body class="page page-id-285 page-parent page-template page-template-page-market page-template-page-market-php">

附加到<body>的类允许我根据页面是否在这种情况下编写不同的CSS:

  • 主页,
  • 一个页面(而不是帖子),
  • 包含子项的页面(页面层次结构中的后代),
  • 包含默认模板的页面,或
  • 包含特定页面模板的页面。

要定位主页,在您的情况下,您会写:

#social-icons li {
  float: left;
}

.home #social-icons li {
  float: right;
}

这应该会在除家庭以外的所有网页上为您float: left float: right

如果您没有看到主页与其他网页之间的body标记存在差异,那么您当前的主题未包含此功能。您必须编辑包含该功能的任何文件body标记。大多数主题遵循标准做法,只需在 header.php 中包含一次。

无论您在哪里找到body标签,请将<body>替换为

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

如果您愿意,可以在函数中包含一串文本,如下所示:

<body <?php body_class('sammich'); ?> >

这会将'sammich'添加到body标签中的类中。

注意:如果您对主题执行此操作,然后更新主题,则您的编码更改将会丢失。考虑快速Child Theme

了解详情@ http://codex.wordpress.org/Function_Reference/body_class