ユーザーがログインしている場合は、Javascriptを使用してCSSスタイルシートを変更してください。

Question

サイト全体で同じ色を使用するWordpressウェブサイトがあります。

私はユーザーがログインしている場合は、この色を変更したい

私の解決策これまでに：。

• ユーザーであれば、二次スタイルシートがエンキューされるように、私は条件付きPHP文を書くことができますログインしました

• ユーザがログインしている場合は別のボディクラスを追加して、そこにある特定のクラスをターゲットにすることができます。

どちらも控えめで、CSSの読み込みが必要です。

代替アプローチに関する考えはありますか？それはJavascriptがここでより良いオプションかもしれないように感じる？

Answer 1

あなたが提示した解決策のいずれかが、Javascriptを使用してページの色を設定するよりも優れています。 JSを使用して色を変更することで、スタイリングを効果的にCSS/Stylesheetレイヤー（所属）からコントロールレイヤーに移動します。

ユーザーがログインしている場合は、別のスタイルシートを読み込むことは間違いなく非効率的ではありませんが、これは完全に容認できる解決策です。 CSSでさまざまな色のスキームを保持し、条件付きで使用することをお勧めします。

同様に、追加のタグを追加することは悪い解決策ではありませんが、CSSルールセットを少し複雑にします。

Answer 2

2色のクラスを2つ用意し、PHPで出力することができます。

あなたのCSSに必要となるすべては、2つの色を指定する二つのクラスです：

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

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

あなたのPHPファイルでは、ユーザーがあるかどうかに基づいてCSSの色のクラスの値を保持しなければならない変数$colorを追加ログインしているかどうかを確認し、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> 

>

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のワードプレスのためのいくつかの理解必要です：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'); 

「あなたの-JS-file.js」で3210

、その後：

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