Question

我有一个WordPress网站，在整个网站上使用了相同的颜色。

如果用户已登录，我希望此颜色更改。

到目前为止我的解决方案：

我可以编写一个条件PHP语句，以便在用户登录时将二级样式表排入队列
如果用户已登录，我可以添加另一个body类，然后定位存在此类的某些类。

两者看起来都不优雅，需要编写大量的CSS。

关于替代方法的任何想法？感觉Javascript可能是更好的选择吗？

Answer 1

您提供的任何一种解决方案都比使用Javascript设置页面颜色更好。通过使用JS来改变颜色，您可以有效地将样式从CSS /样式表层（它所属的位置）移动到控制层中。

如果用户登录，加载不同的样式表绝对不是优雅的，这是一个完全可以接受的解决方案。最好在CSS中使用不同的颜色方案并有条件地使用它们。

同样添加额外的标签也不是一个糟糕的解决方案，但会使CSS规则集复杂化。

Answer 2

这两种颜色可以有两个类，并使用PHP输出类。

您在CSS中需要的只是两个类，指定两种颜色：

.color-anonymous {
    background-color:  #888;
}

.color-logged-in {
    background-color: #909;
}

在PHP文件中添加一个变量$color，该变量将根据用户是否登录来保存CSS颜色类的值，并使用它在HTML中输出正确的类。

<?php
    $color = '';
    if ( is_user_logged_in() ) {
        $color = 'color-logged-in';
    } else {
        $color = 'color-anonymous';
}

//elsewhere
<div class="some-other-class <?= $color ?>">Hello</div>

＆GT;

Answer 3

是的，你可以使用javascript动态插入css样式表：

  <script>
      if(<?php$_SESSION['logedIN']?>=="yes"){
           var filename="loged.css";
      }else{
          var filename="notloged.css";
        }
      var head = document.head;
      var link = document.createElement('link')
      link.setAttribute(type ,'text/css');
      link.setAttribute(rel,'stylesheet');
      link.setAttribute(href, fileName);
      head.appendChild(link);

</script>

Answer 4

需要对jQ和WordPress有所了解：

在function.php中：

function your_theme_localize(){
       $login_in = is_user_logged_in(); // return true or false
       wp_localize_script( 'your-js-file', 'variable-for-js', $login_in );
       //your-js-file is a handler for Your .js file  
}
add_action( 'wp_enqueue_scripts', 'your_theme_localize' );

然后在＆＃34; your-js-file.js＆＃34;：

function some_function(){
    var is_logged_in = variable-for-js;
}

如果用户已登录，请使用Javascript更改css样式表

4 个答案: