Question

以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>

Answer 1

如果您使用单个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中的CSS转换器

1 个答案: