时间戳

首页 > 解决方案 > 通过functions.php中的javascript将自定义CSS添加到wordpress中的第三方插件

javascript - 通过functions.php中的javascript将自定义CSS添加到wordpress中的第三方插件

问题描述

我正在尝试通过 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   
 }
}
?>

标签： javascriptphpcsswordpress

解决方案

使用 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 规则具有优先权。

推荐阅读