gpt4 book ai didi

php - PHP 中的 CSS 转换器

转载 作者:行者123 更新时间:2023-11-27 23:57:40 25 4
gpt4 key购买 nike

基于 customizer live preview layout picker ,向那个帖子致敬。我一直在寻找适用于 WordPress 的实时布局更改器。这非常有效,但是我想知道是否有更方便的方法在此 PHP 函数中编写 CSS?我研究了可能加载/卸载样式表,但这需要太多请求。我还注意到这会在开发工具规则中添加空白的重复元素。

这是代码,感谢任何正确方向的帮助:

$options = get_option( 'layout_selector_option' ); ?>

<style type="text/css">

/* Layout #1 */

.layout { <?php if( $options['site_layout'] == '1' ) { ?>
display: flex; <?php } ?>
}
.posts { <?php if( $options['site_layout'] == '1' ) { ?>
order: 1; <?php } ?>
}
.sidebar { <?php if( $options['site_layout'] == '1' ) { ?>
order: 2; <?php } ?>
}
@media (max-width: 800px) {
.layout { <?php if( $options['site_layout'] == '1' ) { ?>
display: flex;
flex-direction: column; <?php } ?>
}
}

</style>

最佳答案

如果您对布局使用单个 PHP if 条件并将 所有 CSS 规则包装在其中,您的代码将更加紧凑和可读:

<?php $options = get_option('layout_selector_option'); ?>

<style type="text/css">

/* Layout #1 */

<?php if ($options['site_layout'] == '1') { ?>

.layout {
display: flex;
}
.posts {
order: 1;
}
.sidebar {
order: 2;
}
@media (max-width: 800px) {
.layout {
display: flex;
flex-direction: column;
}
}

<?php } ?>

</style>

或者,如果这似乎是您正在更改的整个布局,您可以使用不同的样式表(例如layout1.css),并根据条件引用那些:

<head>
<?php
if ($options['site_layout'] == '1') {
?> <link rel="stylesheet" type="text/css" href="layout1.css"> <?php
}
?>
</head>

它甚至可以直接使用 $options['site_layout'] 的输出,完全删除条件的需要:

<head>
<?php echo '<link rel="stylesheet" type="text/css" href="layout' . $options['site_layout'] . '.css">'; ?>
</head>

也可以这样写,只输出href中的PHP:

<head>
<link rel="stylesheet" type="text/css" href="layout<?php echo $options['site_layout'];?>.css">
</head>

关于php - PHP 中的 CSS 转换器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56177447/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com