CSS-чейнджер в PHP - PullRequest
Новая
       3

CSS-чейнджер в PHP

0 голосов
/ 17 мая 2019

Исходя из настройщик макета живого предварительного просмотра , снимаю шляпу к этому сообщению. Я долго искал живого чейнджера для WordPress. Это прекрасно работает, однако я хотел бы знать, есть ли более удобный способ написания CSS в этой функции PHP? Я изучил, возможно, загрузку / выгрузку таблиц стилей, но это требует слишком много запросов. Также я заметил, что это добавляет пустые, повторяющиеся элементы в правилах инструментов разработки.

Вот код, любая помощь в правильном направлении приветствуется: 

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

1 Ответ

0 голосов
/ 17 мая 2019

Ваш код был бы намного более компактным и читабельным, если бы вы использовали один условный 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>

Это также может быть записано только при выводе PHP в href: 

<head>
  <link rel="stylesheet" type="text/css" href="layout<?php echo $options['site_layout'];?>.css">
</head>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...