如何將 class 添加到 wordpress 按鈕

Question

我想將 class 添加到我的 wordpress 站點的所有帖子的下載按鈕中，但不必在每個帖子中都這樣做

我正在運行 umami 軟件，我在其中跟蹤我的流量，我想在每次有人按下下載按鈕時添加事件

要注冊該事件，我必須將 class “umami--click--download-button” 添加到每個按鈕。

我已經嘗試了很多方法，但似乎沒有任何效果我做的最后一件事是添加以下腳本，但它也不起作用

<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

您需要測試整個 class 列表。 請參見下面的示例。 這會將 class 添加到 <div> 標簽而不是 <a> 標簽。

 $("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>

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>