通过functions.php中的javascript将自定义CSS添加到wordpress

Question

我正在尝试通过 CSS 为已登录和未登录的用户隐藏/显示按钮。我可以通过 Javascript DOM 属性为主题中的按钮执行此操作。但是这里的按钮是第三方插件的，我试图以与主题按钮相同的方式实现它，但我做不到。这是我的代码

add_action('wp_head', 'stylebutton', 1, 1);

function stylebutton() {

     if (!is_user_logged_in()) { 

     ?>

    <script type="text/javascript">

    window.addEventListener('load', function() {

    var div = document.getElementsByClassName("bw-widget__cta");

    div[0].style.display = "none";

    });

    </script>

<?php   

 }

}

?>

Answer 1

使用 CSS 隐藏元素的工作原理如下：add_action('wp_head', 'stylebutton');function stylebutton() {&nbsp; if (!is_user_logged_in()) {&nbsp;&nbsp; ?>&nbsp; <style type="text/css">&nbsp; &nbsp; .bw-widget__cta {&nbsp; &nbsp; &nbsp; display: none !important;&nbsp; &nbsp; }&nbsp; </style>&nbsp; <?php&nbsp; &nbsp;&nbsp; }}?>不过要小心。由于我不知道第三方插件的 CSS 长什么样，所以我添加了一个!important强制覆盖它。如果万一这不起作用，您可能必须使用浏览器的开发人员工具来检查按钮元素并查看哪个 CSS 规则具有优先权。