通过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() {

  if (!is_user_logged_in()) { 

  ?>

  <style type="text/css">

    .bw-widget__cta {

      display: none !important;

    }

  </style>

  <?php   

  }

}

?>

不过要小心。由于我不知道第三方插件的 CSS 长什么样，所以我添加了一个!important强制覆盖它。如果万一这不起作用，您可能必须使用浏览器的开发人员工具来检查按钮元素并查看哪个 CSS 规则具有优先权。