如何向wordpress按钮添加类

Question

我想在我的wordpress站点的所有帖子的下载按钮中添加一个类，但不必在每个帖子中都这样做。

我有运行umami软件，在这里我跟踪我的流量，我想添加事件，每次有人按下下载按钮。

要注册该事件，我必须在每个按钮中添加“umami--单击--下载--按钮”类。

我已经在很多方面尝试过了，但是似乎没有什么奏效，我做的最后一件事就是添加下面的脚本，但它也不起作用

<script>
$( "div" ).addClass(function( index, currentClass ) {
  var addedClass;
 
  if ( currentClass === "wp-block-button" ) {
    addedClass = "umami--click--download-button";
  }
 
  return addedClass;
});
</script>   

在元素检查器中，按钮显示如下

<div class="wp-block-button has-custom-font-size has-large-font-size">
<a class="wp-block-button__link has-white-color 
has-vivid-cyan-blue-to-vivid-purple-gradient-background 
has-text-color has-background wp-element-button" href="https://earnlink.click/" 
style="border-radius:10px" target="_blank"
rel="noreferrer noopener">DOWNLOAD</a></div>

非常感谢您的回答。

Answer 1

您需要测试整个类列表。见下面的例子。这将将类添加到标记中，而不是标记中。

​

$("div").addClass(function(index, currentClass) {
  var addedClass;

  if (currentClass === "wp-block-button has-custom-font-size has-large-font-size") {
    addedClass = "umami--click--download-button";
  }

  return addedClass;
});

.umami--click--download-button {
  color: red;
}

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

<div class="wp-block-button has-custom-font-size has-large-font-size">this is a test
  <a class="wp-block-button__link has-white-color 
has-vivid-cyan-blue-to-vivid-purple-gradient-background 
has-text-color has-background wp-element-button" href="https://earnlink.click/" style="border-radius:10px" target="_blank" rel="noreferrer noopener">DOWNLOAD</a></div>


<div class="wp-block-button has-custom-font-size has-large-font-size">this is a test another test</div>

<div class="wp-block-button ">and another</div>

​

Answer 2

这是正确的代码。试试这个，让我知道它是否有效。如果您在控制台中看到任何错误，请提供用于调试的错误消息。

<script>
    (function ($) {
        $('div.wp-block-button .wp-block-button__link').each(function () {
            const classToAdd = 'umami--click--download-button';
            const button = $(this);
            if (!button.hasClass(classToAdd)) {
                button.addClass(classToAdd);
            }
        });
    })(jQuery);
</script>