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

我正在研究Wordpress主题,并希望选择盒装布局和全宽布局 。</ p>

为此我在header.php中创建了一个变量:</ p>

 &lt; head&gt; 
&lt;?php \ n $ isBoxedLayout = true;
?>&gt;
...
&lt; / head&gt;
</ code> </ pre>

我正在询问变量是否在体内 set:</ p>

 &lt;?php if($ isBoxedLayout){echo'&lt; div id =“boxed”&gt;';  }?&gt; 
...
&lt;?php if($ isBoxedLayout){echo'&lt; / div&gt;'; }?&gt;
</ code> </ pre>

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

 &lt; head&gt; 
&lt;?php
$ isBoxedLayout = 如果($ isBoxedLayout){
echo'&lt; style type =“text / css”&gt;';
echo'#container {width:999px;} ';
echo'&lt; / style&gt;';
}
&lt; / head&gt;
</ code> </ pre>

但我认为这不是很好的编程,因为我的标题 如果我要添加一些其他选项,.php文件很快就会充满代码并且会让人感到困惑。 所以逻辑上我应该在functions.php文件中创建一个变量或数组,并将我的代码外包如下:</ p>

  $ isBoxedLayout = true; 

if($ isBoxedLayout ){
function boxed_css_styles(){
echo'&lt; style type =“text / css”&gt;';
echo'#container {width:999px;}';
echo'&lt; / style&gt; ';
}
}
</ code> </ pre>

我的想法是否正确? 如果是这样,我将如何访问我在index.php或header.php中创建的函数。 或者它可以在functions.php中打印样式吗?</ p>

最好的问候</ p>
</ div>

展开原文

原文

I am working on a Wordpress theme and want to give the option to choose between a boxed layout and a full width layout.

For this purpose I created a variable in my header.php:

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

Down in the body I am asking if the variable is set:

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

This works fine so far. But now I also want to change some css styles if this variable is set. My problem is that I am not so good in PHP yet so my solution would be something like this:

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

But I think this is not good programming because my header.php file would soon be full of code and confusing if I would add some other options. So logically I should create a variable or an array maybe in the functions.php file and outsource my code like this:

$isBoxedLayout = true;

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

Is my thinking right? And if so how would I access the functions I create in my index.php or header.php or whatever. Or would it work to print the styles in the functions.php?

best regards

doujia6503
doujia6503 我建议你只制作两个模板,一个带有“盒装布局”,另一个没有。然后,用户可以在管理区域中选择他们希望的模板
5 年多之前 回复
dongzi1397
dongzi1397 我会考虑为两种情况分别使用类,并通过简单的if子句将它们分配给相关元素。这样你就得写很少的PHP。
5 年多之前 回复
doushou9028
doushou9028 欢迎来到Stackoverflow。我认为你的帖子看起来不错,但它应该发布在专用于Wordpress的Stack中。您也可以在那里搜索相关答案。
5 年多之前 回复

2个回答



通过尝试通过PHP添加样式,不要过度复杂化。 通过PHP添加ID ...但不是样式本身。 </ p>

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

换句话说 ,把它放在你的CSS样式表中,忘了它:</ p>

  #boxed {
width:999px;
}
</ code> </ pre> \ n </ div>

展开原文

原文

Don't over-complicate this by trying to add styles via PHP. Add the ID via PHP...but not the styles themselves.

Since you only apply the boxed ID when the boxed layout is in effect, you can simply define some #boxed CSS styles. These styles will ONLY be applied if the ID exists in your markup...which means they won't come into effect when the ID isn't applied by your PHP.

In other words, put this in your CSS stylesheet, and forget about it:

#boxed {
    width: 999px;
}

doulu5717
doulu5717 谢谢这是一个很好的解决方案:)
5 年多之前 回复
doumaojin4008
doumaojin4008 如果页脚未嵌套,则当boxed处于活动状态时,可以为所有元素添加一个类,以执行类似的操作。 这个问题有很多解决方案。
5 年多之前 回复
dtrgqjcd877528
dtrgqjcd877528 然后将其添加到CSS ...例如,如果要在框中激活时更改段落<p>,则可以在CSS中将其定义为:#boxed p {font-size:16px}。 或者......#boxed #footer {/ * some styles * /}假设页脚是嵌套的。
5 年多之前 回复
dqeq885710
dqeq885710 但是如果我想在添加盒装元素时更改其他元素的样式怎么办? 例如,如果我有一个宽度为980px的#footer并且添加了#boxed,那么#footer应该有100%的宽度。
5 年多之前 回复



灵活的选项是使用 body_class()</ code>函数为body标签添加一个额外的类 。 这将允许您相应地调整样式范围:</ p>

.boxed section {
/ 样式此处 /
}
.full-width section {
/ < / em>这里的样式
/
} </ p>

通过在正文中添加类,您可以有效地定位所有内容。 这样您就可以将样式与标记分开。 </ p>

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

展开原文

原文

A flexible option would be to use the body_class() function to add an additional class to your body tag. This would allow you to scope your styles accordingly:

.boxed section { /* Styles here / } .full-width section { / Styles here */ }

By adding the class on the body you can effectively target everything. This way you're keeping your styles separate from your markup.

Another option would be to keep your universal styles in one stylesheet and then load an additional stylesheet for your full-width/boxed specific styles. This can be handy for organisational purposes, by does add an extra http request, so you'd need to consider bear that in mind.

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐