【WPプラグイン】WP ULikeのボタンにアニメーションをつける

WordPressプラグイン「WP ULike」で作成したボタンにアニメーションをつけるカスタマイズについての備忘録です。

 

クリックしたときにボタン自体が縮小、拡大するアニメーション(bound)と、クリックしたポイントを起点に水色の三本線が放射状に広がるアニメーション(particle)をつけています。

右下にあるボタンで実際の動きを確認できます。

 

すでにWP ULikeのボタンの見た目などに手を加えているので、デフォルトの状態ではありません。過去のカスタマイズについては以下のブログに記載しています。

【WPプラグイン】WP ULikeで拍手ボタンを作る

【WPプラグイン】WP ULikeのローディング画像を変更する

 

 

CSSの編集

以下のCSSをWordpressメニュー「外観」→「カスタマイズ」→「追加CSS」にコピペします。

過去にWPUlike関係でカスタマイズに追加したCSSがある場合は、以下を一番後ろに追加するのが無難だと思います。

.wp_ulike_btn {
    position: relative;
    overflow: visible; /* パーティクルをボタンの外側にも表示させる */
}


.bound-animation {
    animation: bound 0.5s ease-out; /* アニメーション(bound)を0.5秒間再生する */
}


.particle {
position: absolute;
width: 4px; /* ここから4行でパーティクルの形と色を設定 */
height: 15px;
background-color: #41bcfe;
border-radius: 2px;
transform-origin: center; /* 変形の起点を設定 */
opacity: 0; /* 初期状態を透明に設定 */
animation: particle 0.5s ease-out forwards;
animation-delay: 0.1s /* アニメーション再生を0.1秒遅らせる */
}


@keyframes particle {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(1) rotate(var(--angle));
    }
    20% {
        opacity: 1;
        transform: translate(var(--x), var(--y)) scale(1) rotate(var(--angle));
    }
    100% {
        opacity: 1;
        transform: translate(var(--x), var(--y)) scale(0.5) rotate(var(--angle));
    }
}


@keyframes bound {
    0% { transform: scale(1); }
    20% { transform: scale(0.8); }
    60% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

positionについてはよく分かっていませんが、これでいい感じに動くのであえて消さずに残しています。動くなら消してもいいと思います。

 

JavaScriptの編集

WordPressの子テーマ(EASELを使っている場合は「canvas on EASEL」)にjsファイルを追加します。

WordPressメニューの「テーマファイルエディタ―」上でファイルを作成することもできるようですが、FTPやWEBマネージャーなどからファイルをアップロードするほうが楽だと思います。

参考までに、当サイトの現在の子テーマのファイル構成の一部です。

今回追加する「click.js」は「js」という名前のフォルダに入れています。

 

「click.js」の内容は以下の通りです。

document.addEventListener('DOMContentLoaded', () => {
const likeButtons = document.querySelectorAll('.wp_ulike_btn'); // WP ULikeのボタンを選択

likeButtons.forEach(button => {
button.addEventListener('click', function () {
// バウンド
if (this.classList.contains('bound-animation')) {
this.classList.remove('bound-animation');
void this.offsetWidth; // クラスリセット
}
this.classList.add('bound-animation');

// パーティクル
const rect = this.getBoundingClientRect();
const x = rect.width / 2; // ボタンの中央
const y = rect.height / 2; // ボタンの中央
const angles = [0, -30, 30]; // 真上、左30°、右30°
           const distance = 40; // 移動距離

angles.forEach(angle => {
const particle = document.createElement('div') ;// 新しいパーティクル要素を作成
particle.className = 'particle'; // パーティクル用のクラスを追加 

const rad = (angle * Math.PI) / 180;
const offsetX = Math.sin(rad) * distance;
const offsetY = -Math.cos(rad) * distance;

particle.style.left = `${x}px`;
particle.style.top = `${y}px`;
particle.style.setProperty('--x', `${offsetX}px`);
particle.style.setProperty('--y', `${offsetY}px`);
particle.style.setProperty('--angle', `${angle}deg`);

this.appendChild(particle); // ボタン要素の子要素としてパーティクルを追加

setTimeout(() => {
particle.remove();
              }, 600); // アニメーション時間
});
});
});
});

バウンドについて、クラスを追加したり削除したりしていますが、ボタンを連打したときに動きがおかしくならないようにする処理です。パーティクルについては特に何もしなくても連打に対応できていたのでバウンドのような処理はしていません。

最後の600という数字は、CSSで設定したアニメーション時間(1000で1秒)と揃えています。パーティクルはディレイ0.1秒+アニメーション0.5秒なので、合計の0.6秒に合わせて600と入力しています。

 

最後にこのjsファイルをサイト上で動かすためにPHPに追記します。

 

PHPの編集

子テーマの「functions.php」の、編集していい場所に以下をコピペします。

EASEL(canvas on EASEL)の場合は「// PHPを追記する場合はここより下に書いてください。」というコメントアウトがあるので、その直後に記載しています。

function link_scripts() {
// click.js を読み込む
wp_enqueue_script(
'click',
get_stylesheet_directory_uri() . '/js/click.js',
array(), // 依存関係がなければ空配列
'', // バージョン番号(設定してない)
true // フッターで読み込む
);

}
add_action('wp_enqueue_scripts', 'link_scripts');

ほかにもjsファイルを読み込む必要があるときは、10行目以降に同様の形式で追加してください。

 

ここまでうまくいっていれば、サイト上のボタンにアニメーションがついていると思います。

お疲れさまでした!