Question

我正在研究Wordpress主题，并希望选择盒装布局和全宽布局。

为此，我在header.php中创建了一个变量：

<head>
    <?php
        $isBoxedLayout = true;
    ?>
...
</head>

我正在询问是否设置了变量：

<?php if($isBoxedLayout) { echo '<div id="boxed">'; } ?>
...
<?php if($isBoxedLayout) { echo '</div>'; } ?>

到目前为止，此工作正常。但是如果设置了这个变量，现在我也想改变一些css样式。我的问题是我在PHP方面不是很好，所以我的解决方案是这样的：

<head>
    <?php
        $isBoxedLayout = true;
    ?>
    ...
    if ($isBoxedLayout) {
        echo '<style type="text/css">';
        echo '#container {width:999px;}';
        echo '</style>';
    }
</head>

但我认为这不是一个好的编程，因为我的header.php文件很快会充满代码而且如果我要添加其他选项会让人感到困惑。所以逻辑上我应该在functions.php文件中创建一个变量或数组，并将我的代码外包成这样：

$isBoxedLayout = true;

if ($isBoxedLayout) {
    function boxed_css_styles() {
        echo '<style type="text/css">';
        echo '#container {width:999px;}';
        echo '</style>';
    }
}

我的想法是对的吗？如果是这样，我将如何访问我在index.php或header.php中创建的函数。或者它可以在functions.php中打印样式吗？

最好的问候

Answer 1

通过尝试通过PHP添加样式，不要过度复杂化。通过PHP添加ID ...但不是样式本身。

由于您只在框装布局生效时才应用boxed ID，因此您只需定义一些#boxed CSS样式即可。只有当您的标记中存在ID时才会应用这些样式...这意味着当您的PHP未应用ID时它们将不会生效。

换句话说，把它放在你的CSS样式表中，忘了它：

#boxed {
    width: 999px;
}

Answer 2

灵活的选项是使用body_class()函数为您的body标签添加其他类。这将允许您相应地调整样式的范围：

.boxed section { / *样式在这里 / } .full-width section { / 这里的样式* / }

通过在身体上添加课程，您可以有效地定位所有内容。这样您就可以将样式与标记分开。

另一种选择是将通用样式保存在一个样式表中，然后为全角/盒装特定样式加载其他样式表。这对于组织目的来说非常方便，通过添加额外的http请求，因此您需要考虑到这一点。

有条件地在Wordpress中打印CSS样式

2 个答案: