WordPressで自作「いいねボタン」プラグインを作ってみた!仕組みと注意点まとめ

はじめに

今回はWordPressで自作した「いいねボタン」プラグインの作り方や仕組み、気をつけたポイントをまとめました。
「いいね」機能を手軽に導入したいけど、どう作ればいいのか分からない…という方の参考になれば嬉しいです。


1. プラグインの概要

  • 投稿に「いいね」ボタンを追加
  • ボタンをクリックするとAJAXでカウントを更新
  • ログインユーザーは1投稿につき1回までいいね可能に制限
  • 非ログインユーザーもブラウザのlocalStorageで重複防止を試みる

2. 仕組みのポイント

PHP側(サーバー)

  • wp_ajax_my_like_buttonwp_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の実装
  • ボタンデザインやアニメーションの強化

おわりに

自作プラグインで基礎的な「いいね」機能は十分実装できました。
シンプルだけど拡張性もあり、学びも多かったです。
もし興味があれば、コードも公開しているのでぜひ試してみてくださいね。


追記:コードのサンプルリンク

Lightning G3でホームページを作成します G3無料テーマでプラグインを追加して作成します

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です