ワードプレスでユーザーがログイン中のときのみ、サイトのヘッダーにJAVASCRIPTやCSSを出力する

ワードプレスでユーザーがログイン中のときのみ、サイトのヘッダーにJSやCSSを出力するコードをご紹介いたします。

ワードプレスのヘッダーに任意のコードを出力するには？

ワードプレスのヘッダーに任意のコードを出力するには、wp_headアクションを使います。
※アクションとはワードプレスに組み込まれている様々な処理に割り込むことができる仕組みです。

下記のようなPHPコードをテーマのfucntions.phpなどに追加することで任意のコードをheadタグの間に出力することができます。

add_action('wp_head', 'my_code_header');
function my_code_header(){
    echo "<style>お好きなスタイルシート</style>";
    echo "<script>お好きなJSコード</script>";
};

ログインユーザーにのみサイトのヘッダーにJSやCSSを挿入する

ログインしているユーザーにのみ、何らかの機能を提供したり、CSSをつかして要素を隠したりすることも可能です、上記のコードにログイン中かどうかという場合分けを作ればいいことになります。

ログイン中の判定にはワードプレスの組み込み関数　is_user_logged_in()　を使用します。

add_action('wp_head', 'my_code_header');
function my_code_header(){
    if(is_user_logged_in()){
        //このコードはユーザーがログイン中のときのみ出力されます
        echo "<style>お好きなスタイルシート</style>";
        echo "<script>お好きなJSコード</script>";
    }
};

WordPress ワードプレスのテーマやプラグインの制作カスタマイズのご依頼ご相談はワードプレスドクターでお気軽にお送りください