【初心者向け】WordPressでプラグイン不要の「いいねボタン」を実装！functions.phpだけでCookie重複防止もOK【徹底解説】

TAGU｜17work

この記事では、WordPressの投稿ページに「いいねボタン」をプラグインなし・functions.phpへの追記だけで実装する方法を紹介します。さらに、Cookieを利用して同じユーザーが重複して「いいね」を押せないようにする仕組みも組み込みます。

「JavaScriptファイルを別途用意するのはハードルが高い…」という初心者の方でも安心してください。ポイントを押さえれば意外とシンプルに実装できますので、ぜひトライしてみましょう！

1. この記事でできること

  • 投稿ページに「いいねボタン」を表示し、クリックすると「いいね数」が増加。

  • Cookieを使い、同じブラウザ・同じ端末では二重で「いいね」を押せない仕組みを実装。

  • 必要なコードはすべてfunctions.php にまとめて書くだけ。別ファイルを用意する必要なし！

2. 事前準備

2-1. 子テーマのfunctions.phpを使おう（推奨）

  • 親テーマのfunctions.phpを直接編集すると、テーマのアップデートで上書きされる可能性があります。

  • できれば子テーマを作成し、そこにコードを追記する形がベストです。

2-2. バックアップやテスト環境の利用

  • コードを誤って書いてしまうと、サイトが真っ白になるなどのトラブルが起こる場合も。

  • 事前にバックアップを取るか、テスト環境で試してから本番に反映すると安心です。

3. コード全体の流れ

  1. データの保管場所

    • 「いいね数」は記事（投稿）のメタ情報（post meta）として保存します。

    • WordPressの標準関数update_post_meta()でカウントを管理。

  2. Cookieで二重押しを防止

    • ユーザーがある投稿に対して「いいね」を押したら、その投稿IDをキーとしたCookie（例：liked_123=true）をセット。

    • 同じCookieがある場合は再度押せないようにする。

  3. JavaScriptでイベント処理

    • ボタンがクリックされるとAjax通信が走り、サーバー側(admin-ajax.php)にリクエスト。

    • サーバー側で「いいね数」を+1し、新しい数を返して画面に即時反映させます。

これらの処理をfunctions.phpの中でまとめて書いていきます。

4. 実装手順

4-1. functions.phpに下記コードを追記

下記コードは、Cookieによる重複防止と、Ajax通信によるいいね数の更新をセットで実装したものです。子テーマのfunctions.phpの最後あたりに追記してください。

/**
 * いいねボタン機能を実装（Cookieで二重押し防止、Ajaxで更新）
 */
function my_enqueue_like_button_script() {
    // jQueryが読み込まれている前提
    // ここでは別ファイルを用意せずに inline script で完結させます。
    wp_add_inline_script('jquery', "
        jQuery(function($) {
            // いいねボタンのクリックイベント
            $(document).on('click', '.my-like-button', function(e) {
                e.preventDefault();
                var btn = $(this);
                var postId = btn.data('post-id');

                // Cookieチェック：liked_投稿ID が存在するか
                if (document.cookie.indexOf('liked_' + postId) !== -1) {
                    alert('この投稿は既に「いいね」済みです。');
                    return;
                }

                // Ajax通信
                $.ajax({
                    url: '" . admin_url('admin-ajax.php') . "',
                    type: 'POST',
                    data: {
                        action: 'my_like_button', 
                        post_id: postId
                    },
                    success: function(response) {
                        // Cookie設定（1年間有効とする例）
                        var date = new Date();
                        date.setTime(date.getTime() + (365*24*60*60*1000)); // 365日
                        document.cookie = 'liked_' + postId + '=true; expires=' + date.toUTCString() + '; path=/';

                        // ボタンに表示されているいいね数を更新
                        btn.find('.my-like-count').text(response);
                    },
                    error: function() {
                        alert('エラーが発生しました。');
                    }
                });
            });
        });
    ");
}
add_action('wp_enqueue_scripts', 'my_enqueue_like_button_script');

/**
 * いいねボタンが押された際に実行される処理（Ajaxコールバック）
 */
function my_like_button_callback() {
    if (!isset($_POST['post_id'])) {
        wp_die();
    }

    $post_id = intval($_POST['post_id']);
    // 現在のいいね数を取得（まだない場合は0）
    $current_likes = get_post_meta($post_id, 'my_like_count', true);
    if (empty($current_likes)) {
        $current_likes = 0;
    }

    // いいね数を+1して保存
    $new_likes = $current_likes + 1;
    update_post_meta($post_id, 'my_like_count', $new_likes);

    // 新しいいいね数を返す
    echo $new_likes;
    wp_die(); // Ajax処理終了
}
add_action('wp_ajax_my_like_button', 'my_like_button_callback');
add_action('wp_ajax_nopriv_my_like_button', 'my_like_button_callback');

コードのポイント

  • wp_add_inline_script('jquery', "...")

    • これにより、jQueryが読み込まれた後にインラインスクリプトとして追加されます。

    • 別ファイル不要で済むので、functions.php だけで完結。

  • .my-like-button

    • いいねボタンに付与するクラス名。このクラスにクリックイベントを登録しています。

  • Cookieのキー

    • liked_投稿ID という形でCookieをセットすることで、投稿ごとに重複押しをチェック可能。

  • Ajax部分

    • url: admin_url('admin-ajax.php') を指定、actionパラメータで処理を特定。

    • 成功時に返ってきた「新しいいいね数」をボタンの表示上で更新しています。

4-2. テンプレート側で「いいねボタン」を表示

次に、実際に「いいねボタン」が表示されるようにテーマ内のテンプレートにコードを追加します（例：single.php や、投稿ループがある箇所など）。

例）投稿のループ内にボタンを表示する場合

<?php
// 現在のいいね数を取得（まだなければ0）
$post_id     = get_the_ID();
$current_like_count = get_post_meta($post_id, 'my_like_count', true);
if (empty($current_like_count)) {
    $current_like_count = 0;
}
?>
<button class="my-like-button" data-post-id="<?php echo esc_attr($post_id); ?>">
    いいね！ <span class="my-like-count"><?php echo esc_html($current_like_count); ?></span>
</button>

  • class="my-like-button" と data-post-id を必ずセットする。

  • ボタンの中に <span class="my-like-count"> で現在のいいね数を表示。

もし「ボタン」ではなく「リンク」にしたい場合は、<a href="..." class="my-like-button" ...> のようにしてもOKです。見た目は自由にカスタマイズしてください。

5. 動作テスト & トラブルシューティング

  1. 投稿ページを開いてボタンをクリック

    • 初めて押すと、いいね数が+1されるはずです。

    • クッキーがブラウザにセットされ、同じ投稿では再度押せない仕組みになります。

  2. Cookieの確認

    • ブラウザの開発者ツールでCookieをチェックし、「liked_投稿ID=true」のCookieがあるかを確認してみてください。

  3. もし動かない場合

    • jQueryが有効になっていない可能性があります。ほとんどのテーマで標準的に読み込まれているはずですが、テーマによってはjQueryを読み込んでいないことも。

    • 子テーマの場合、wp_enqueue_scriptsの順番やタイミングを再度チェック。

    • 同様のいいねプラグインや他のAjax処理と競合していないか。

6. カスタマイズ例

  • いいね数の初期値を1にしたい

    • コールバック関数内で $current_likes = 1; に書き換える。

  • クッキーを7日間にしたい

    • date.setTime(date.getTime() + (7*24*60*60*1000)); のように変更。

  • 重複押しを全く防止しない

    • Cookieチェックの部分とCookieを設定する部分を削除すれば、何度でも「いいね」を押せる仕様にできます。

  • ログインユーザーだけを対象にする

    • Ajaxコールバックで is_user_logged_in() を使って判定し、未ログインなら弾くようにカスタマイズ可能。

まとめ

  1. functions.phpだけで「いいねボタン」を実現できる。

  2. Cookieを活用すれば、同じユーザーが何度も押せないようにブロックできる。

  3. いいね数はpost_metaで管理し、柔軟に集計やカスタマイズが可能。

プラグインを入れずに自力で実装しておくと、テーマのアップデートやプラグインの停止に左右されず安心です。また、自分で機能を作り込むことで「WordPressとPHPの仕組み」を学べるのも大きなメリット。ぜひチャレンジしてみてくださいね！

追伸
さらなる応用としては、いいね数が多い投稿を人気記事としてウィジェットに表示したり、ユーザーのIPアドレスをチェックして重複防止したりなど、拡張アイデアは尽きません。カスタマイズの幅が広い分、ぜひ基本の実装を押さえてから、いろいろ試してみてください。

いいなと思ったら応援しよう！