wordPressに実装したハートにいいねをしたときの効果

ネットで見つけたハートにエフェクトを付けるコードを見つけましたが、そのままでは、使えないようです。
https://zenn.dev/spacemarket/articles/414fcbccaec950

上記に書かれていたコード

const heartBeat = keyframes({
  '50%': { transform: 'scale(1.2)' },
})

を使って見たいとChatGPTに相談したら、このように回答して来ました。

おそらくCSS-in-JSのライブラリを使用しているスタイルのものと思われます。しかし、WordPressのテーマやプラグインの中で直接このスタイルを使用するのは少し難しいかもしれません。

それで、ChatGPTと相談しながら、ハートをクリックしたときに大きさを変えることは出来ないけど、ハートの四方に光の玉を出すことができるようにコードを書くことができました。

ハートのアイコンにクラス名で、like-iconを設定してください。
このクラス名は、自由に変更できます。
変更したときは、CSSとJavascriptで同じクラス名を使っているところを修正して、クラス名を合わせてください。

コードをそのままコピペしても、動かないと思います。
ハートのアイコンを表示している要素に、クラス名で、like-iconを設定してください。
また、いいねの数を表示するHTMLの部分は、各自作ってください。
そこで書いたコードに合わせて、要素の名前を変えてください。

下記のコードで、-2pxの部分を調整すると、エフェクトの中心をハートのアイコンの中心に合わせる際に楽だと思います。

/* いいねのアニメーション */

.like-icon {
  position: relative;
}

.particle {
  position: absolute;
  width: 5px;
  height: 5px;
  background-color: red;
  border-radius: 50%;
  opacity: 1;
  top: calc(50% - 2px); /* 親要素の高さの50%の位置より2px上に配置 */
  left: calc(50% - 2px); /* 親要素の幅の50%の位置より2px左に配置 */
  transform: translate(-50%, -50%);
}

@keyframes particleAnimation0 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.1;
    transform: translate(0px, -10px) scale(1.4);
  } /* 上方向 */
}
@keyframes particleAnimation1 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.1;
    transform: translate(10px, -10px) scale(1.4);
  } /* 右上方向 */
}
@keyframes particleAnimation2 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.1;
    transform: translate(10px, 0px) scale(1.4);
  } /* 右方向 */
}
@keyframes particleAnimation3 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.1;
    transform: translate(10px, 10px) scale(1.4);
  } /* 右下方向 */
}
@keyframes particleAnimation4 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.1;
    transform: translate(0px, 10px) scale(1.4);
  } /* 下方向 */
}
@keyframes particleAnimation5 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.1;
    transform: translate(-10px, 10px) scale(1.4);
  } /* 左下方向 */
}
@keyframes particleAnimation6 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.1;
    transform: translate(-10px, 0px) scale(1.4);
  } /* 左方向 */
}
@keyframes particleAnimation7 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.1;
    transform: translate(-10px, -10px) scale(1.4);
  } /* 左上方向 */
}

Javascriptのコードです。
このコードは、ハートのアイコンをクリックしたことを検知するところ、ハートのアイコンをクリックしたことで発火するイベントの中に書いて下さい。

var heartElement = $(this);

    const numberOfParticles = 8; // 生成するパーティクルの数
    const particleColors = [
      "red",
      "orange",
      "yellow",
      "green",
      "blue",
      "indigo",
      "violet",
      "pink",
    ];

    for (let i = 0; i < numberOfParticles; i++) {
      const particle = $('<div class="particle"></div>');
      particle.css("background-color", particleColors[i]);
      particle.css("animation", `particleAnimation${i} 0.25s`);

      heartElement.append(particle);

      particle.on("animationend", function () {
        particle.remove();
      });
    }

一応おまけで、実際の様子を掲載します。
ハートのアイコンをクリックして、いいねのカウントができるコードです。

//ハートのクリック
jQuery(document).ready(function ($) {
  $(".like-icon").on("click", function () {
    //  console.log("Before ajax request:", $(this).attr("src")); //デバッグ用
    var likeCountElement = $(this).next(".like-count");
    var currentCount = parseInt(likeCountElement.text(), 10);

    // カウントが9999以上の場合、処理を終了
    if (currentCount >= 9999) {
      return;
    }

    var heartElement = $(this);

    const numberOfParticles = 8; // 生成するパーティクルの数
    const particleColors = [
      "red",
      "orange",
      "yellow",
      "green",
      "blue",
      "indigo",
      "violet",
      "pink",
    ];

    for (let i = 0; i < numberOfParticles; i++) {
      const particle = $('<div class="particle"></div>');
      particle.css("background-color", particleColors[i]);
      particle.css("animation", `particleAnimation${i} 0.25s`);

      heartElement.append(particle);

      particle.on("animationend", function () {
        particle.remove();
      });
    }

    /* ここまで　*/

    var commentID = heartElement
      .siblings(".comment-details")
      .find(".comment-id-hidden")
      .val();

    var likeCountElement = heartElement.siblings(".like-count");
    var commentTextElement = heartElement
      .closest(".comment-info")
      .siblings(".comment-text");

    $.ajax({
      type: "POST",
      url: MyAjax.ajaxurl,
      data: {
        action: "increment_like",
        comment_id: commentID,
      },
      dataType: "json",
      success: function (response) {
        //  console.log("In success callback:", $(this).attr("src")); //デバッグ用
        if (response.success) {
          var newCount = response.newCount;
          likeCountElement.text(newCount);
          // ここで色を更新する
          updateLikeColor(
            newCount,
            likeCountElement,
            commentTextElement,
            heartElement
          );

          var afterClickIconURL = response.afterClickIconURL;
          $(this).attr("src", afterClickIconURL);
        }
      }.bind(this),
      error: function () {
        // エラーが発生した場合、アイコンを「クリック前」の画像に戻す
        console.log("In error callback:", $(this).attr("src")); //デバッグ用
        var defaultIconUrl = getOptionValue("like_icon_url_before");
        heartElement.attr("src", defaultIconUrl);
        //console.log("Error:", textStatus, errorThrown);
      },
    });
    //  console.log("After ajax request:", $(this).attr("src")); //デバッグ用
  });
});

今回は、wordPressの中で実装できる「いいねのハートをクリックしたときのエフェクト」について、記事を書きました。
このコードが、wordPressでいいねを実装したい人のお役に立つことを祈っています。