Question

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

#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 li到float:left，但主页除外。

Answer 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(...);
}
?>

Answer 2

大多数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

主页上的CSS不同

2 个答案: