ElementorのテンプレートにInstagram風のいいね！ボタンをプラグインを使わずに実装する

2025-10-02

Elementor・Web制作

ElementorのテンプレートにInstagram風のいいね！ボタンをプラグインを使わずに実装する

個人のブログでいいね！ボタンを実装したい。そんな時いいね！ボタンのプラグインはたくさんありますが、Elementorでは競合が起きて機能しなかったり、サイトの表示速度を遅くしたり、管理を複雑にしたりすることがあります。今回ご紹介する方法は、Elementorの標準機能である「カスタムHTML」と「カスタムコード」を使うので、余計なものをインストールする必要がなく、サイトを軽快に保てます。

ステップ1：HTMLでボタンの土台を作る

まず、Elementorで投稿テンプレートを開き、いいね！ボタンを配置したい場所に**「カスタムHTML」ウィジェット**をドラッグ＆ドロップします。ウィジェットに以下のコードを貼り付けてください。

markup

<div class="like-button" data-post-id="123">
  <i class="far fa-heart"></i>
  <span class="like-text">いいね！</span>
  <span class="like-count">0</span>
</div>

<i class="far fa-heart"></i>は、Font Awesomeのアイコンです。もしアイコンが表示されない場合は、Elementorの設定でFont Awesome 4サポートの読み込みが有効になっているか確認してください。
data-post-id="123"の部分は、ブログ記事のIDに置き換えてください。このIDを元に、投稿ごとのクリック数を管理します。

ステップ2：CSSで見た目とアニメーションを整える

次に、ボタンのデザインを設定します。Elementorの「カスタムCSS」セクションに以下のコードを貼り付けます。このCSSが、ボタンの色やアイコンの動きを制御します。

css

.like-button {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  color: #ccc;
  transition: color 0.3s ease;
}

.like-button .fa-heart {
  font-size: 28px;
  transition: transform 0.3s ease;
}

.like-button .like-text,
.like-button .like-count {
  font-size: 16px;
  font-weight: bold;
}

/* いいね！された時のスタイル */
.like-button.liked {
  color: #ff385c;
}

.like-button.liked .fa-heart {
  transform: scale(1.2);
}

.like-button.liked:active .fa-heart {
  transform: scale(1.1);
}

/* 10回押された後のスタイル */
.like-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

color: #ccc;が初期のボタンの色です。likedクラスが付くと#ff385cに変わり、色が変化するアニメーションが発動します。
.disabledクラスは、後述のJavaScriptによって追加され、ボタンを無効化します。

ステップ3：JavaScriptでクリック回数のロジックを実装する

最後に、ボタンのクリック回数をカウントし、10回で停止するロジックを実装します。このコードは、サイト全体に適用させるのがベストです。

WordPressのダッシュボードで、左メニューの「Elementor」→「カスタムコード」に進みます。「新規追加」をクリックし、以下の設定を行います。

タイトル: 「いいね！ボタン用JS」など分かりやすい名前をつけます。
場所: 「Body End」 を選択します。
コード: 以下のJavaScriptコードを貼り付けます。
条件: 「Entire Site」 を選択し、サイト全体に適用します。

javascript

<script>
document.addEventListener('DOMContentLoaded', () => {
    const likeButtons = document.querySelectorAll('.like-button');
    const MAX_CLICKS = 10;

    const likedCounts = JSON.parse(localStorage.getItem('likedCounts')) || {};

    likeButtons.forEach(button => {
        const postId = button.dataset.postId;
        const count = likedCounts[postId] || 0;
        const countElement = button.querySelector('.like-count');

        countElement.textContent = count;

        if (count >= MAX_CLICKS) {
            button.classList.add('disabled');
        }
    });

    likeButtons.forEach(button => {
        button.addEventListener('click', () => {
            const postId = button.dataset.postId;
            const isDisabled = button.classList.contains('disabled');
            
            if (isDisabled) {
                return;
            }

            likedCounts[postId] = (likedCounts[postId] || 0) + 1;
            localStorage.setItem('likedCounts', JSON.stringify(likedCounts));

            const currentCount = likedCounts[postId];
            const countElement = button.querySelector('.like-count');
            countElement.textContent = currentCount;
            
            button.classList.add('liked');
            setTimeout(() => {
                button.classList.remove('liked');
            }, 500);

            if (currentCount >= MAX_CLICKS) {
                button.classList.add('disabled');
            }
        });
    });
});
</script>