WordPressで自作「いいねボタン」プラグインを作ってみた!仕組みと注意点まとめ
Contents
はじめに
今回はWordPressで自作した「いいねボタン」プラグインの作り方や仕組み、気をつけたポイントをまとめました。
「いいね」機能を手軽に導入したいけど、どう作ればいいのか分からない…という方の参考になれば嬉しいです。
1. プラグインの概要
- 投稿に「いいね」ボタンを追加
- ボタンをクリックするとAJAXでカウントを更新
- ログインユーザーは1投稿につき1回までいいね可能に制限
- 非ログインユーザーもブラウザのlocalStorageで重複防止を試みる
2. 仕組みのポイント
PHP側(サーバー)
wp_ajax_my_like_button
とwp_ajax_nopriv_my_like_button
でログイン・非ログイン両対応のAJAX処理- nonceによるセキュリティチェック
- ログインユーザーのIDを使って、同じユーザーが複数回いいねできないようにpost metaで管理
- いいね数はカスタムフィールドで保存・更新
JavaScript側(ブラウザ)
- jQueryでボタンクリックを検知し、AJAXリクエスト送信
- 成功時は画面上のいいね数を更新
- localStorageに「いいね済み」フラグを保存し、重複クリックをブラウザ単位で防止
3. 制限と課題
- ログインユーザーは確実に1回だけいいね可能
- 非ログインユーザーはlocalStorageによる重複防止だが、ブラウザを変えたりCookieを消すとリセットされる
- IPアドレスやCookie、サーバー側の記録を使った厳格な制限は別途実装が必要
- それでも多くのケースでは十分な抑止効果あり
4. セキュリティ面の配慮
- WordPressの
check_ajax_referer
でnonceチェックを実施 - 入力値は必ずサニタイズ(
absint
など) - AJAXのレスポンスはJSON形式で返し、クライアント側で適切に処理
5. 今後の改善案
- いいねの取り消し機能の追加
- IP制限やCookie連携で非ログインユーザーの多重いいねをより厳密に管理
- いいねしたユーザーの一覧を管理画面で確認できるUIの実装
- ボタンデザインやアニメーションの強化
おわりに
自作プラグインで基礎的な「いいね」機能は十分実装できました。
シンプルだけど拡張性もあり、学びも多かったです。
もし興味があれば、コードも公開しているのでぜひ試してみてくださいね。
追記:コードのサンプルリンク
2