LoginSignup
0
0

いいね機能(jsを使った実装)

Posted at

functions.php

// いいね機能
add_action('wp_ajax_nopriv_get_like_count', 'get_like_count');
add_action('wp_ajax_get_like_count', 'get_like_count');
function get_like_count() {
    if (!isset($_POST['post_id'])) {
        wp_die('Post ID is missing');
    }

    $post_id = intval($_POST['post_id']);
    $likes = get_post_meta($post_id, 'likes_count', true);
    $likes = $likes ? (int)$likes : 0;

    wp_send_json(array('likes' => $likes));
}
add_action('wp_head', 'my_ajaxurl');
function my_ajaxurl() {
    echo '<script type="text/javascript">
        var ajaxurl = "' . admin_url('admin-ajax.php') . '";
    </script>';
}

add_action('wp_ajax_nopriv_process_like_cookie', 'process_like_cookie');
add_action('wp_ajax_process_like_cookie', 'process_like_cookie');

function process_like_cookie() {
    if (!isset($_POST['post_id'])) {
        wp_die('Post ID is missing');
    }

    $post_id = intval($_POST['post_id']);
    $likes = get_post_meta($post_id, 'likes_count', true);
    $likes = $likes ? (int)$likes : 0;

    error_log("Initial likes for post {$post_id}: {$likes}");

    // Check if cookie exists
    if (isset($_COOKIE['liked_' . $post_id])) {
        // Cookie exists, user has already liked this post, so we "unlike" it
        if ($likes > 0) {
            $likes--;
            update_post_meta($post_id, 'likes_count', $likes);
            setcookie('liked_' . $post_id, '', time() - 3600, '/'); // Remove the cookie
            error_log("User unliked post {$post_id}, new likes: {$likes}");
        } else {
            error_log("User tried to unlike post {$post_id}, but likes are already 0");
        }
    } else {
        // No cookie, user hasn't liked this post, so we "like" it
        $likes++;
        update_post_meta($post_id, 'likes_count', $likes);
        setcookie('liked_' . $post_id, 'yes', time() + 86400 * 30, '/'); // 30 days
        error_log("User liked post {$post_id}, new likes: {$likes}");
    }

    echo $likes;
    wp_die();
}

header.php

< link の記載が連続してあるので、その後ろに以下を追加。

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet">	

同じように <script の記載が連続してあるので、その後ろに以下を追加。

<script>
jQuery(document).ready(function($) {
    function updateLikeButton(post_id) {
        var $likeIcon = $('.like-button[data-postid="' + post_id + '"]').find('i');
        if (getCookie('liked_' + post_id)) {
            $likeIcon.removeClass('far').addClass('fas');
        } else {
            $likeIcon.removeClass('fas').addClass('far');
        }
    }

    function getCookie(name) {
        var value = "; " + document.cookie;
        var parts = value.split("; " + name + "=");
        if (parts.length === 2) return parts.pop().split(";").shift();
    }

    $('.like-button').each(function() {
        var post_id = $(this).data('postid');
        updateLikeButton(post_id);
    });

    $('.like-button').on('click', function(e) {
        e.preventDefault();
        var $likeButton = $(this);
        var post_id = $likeButton.data('postid');
        var $likeCount = $('#like-count-' + post_id);
        var currentCountText = $likeCount.text();
        var is999Plus = currentCountText === '999+';
        var currentCount = parseInt(currentCountText);
        var buttonOffset = $likeButton.offset();
        var buttonHeight = $likeButton.outerHeight();
		var wasLiked = getCookie('liked_' + post_id);

        if ($likeButton.data('processing')) {
            return;
        }

        $likeButton.data('processing', true);

        $.ajax({
            type: "POST",
            url: ajaxurl,
            data: {
                action: "process_like_cookie",
                post_id: post_id,
            },
            success: function(response) {
                var newCount = parseInt(response);
                updateLikeButton(post_id);

                if (newCount > 999) {
                    $likeCount.text('999+');
                } else {
                    $likeCount.text(newCount);
                }

                if (newCount > currentCount && newCount > 999) {
                    $likeCount.animate({
                        fontSize: '1.8rem'
                    }, 500, function() {
                        $(this).animate({
                            fontSize: '1.6rem'
                        }, 500);
                    });
                }
				if (!wasLiked) {
					$('#like-message').css({
						'position': 'absolute',
						'top': (buttonOffset.top + buttonHeight + 5) + 'px',
						'left': buttonOffset.left + 'px',
						'display': 'block'
					}).fadeIn(500).delay(2000).fadeOut(500, function() {
						$(this).css('display', 'none');
					});
				}
                $likeButton.data('processing', false);
            }
        });
    });
});
</script>

style.css

.like-button i {
    color: #FF2F40; 
}

.like-button {
	    font-size: 24px;
    background: none; /* 背景色を透明に */
    border: none; /* 枠線を削除 */
    padding-left: 20px;
    padding-right: 0px;
    margin: 10px; /* マージンを削除 */
    color: inherit; /* ボタンのテキスト色を親要素から継承 */
}

.like-button:hover {
    cursor: pointer; /* マウスカーソルをポインターに変更 */
    opacity: 0.7; /* ホバー時にボタンを少し透明にする */
}

/* いいねされた時のメッセージ */
#like-message {
    display: none;
    position: absolute; /* 固定位置から絶対位置に変更 */
    background-color: #ff8793; /* ピンク色 */
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    z-index: 1000;
    font-size: 16px;
}

functions.phpで強制読み込みを実施

footer.php

htmlの閉じタグの直前に以下を追加
(ブログによってカスタマイズする場合はメッセージを変える)

<div id="like-message" style="display: none;">ありがとうございます!</html>

single.php

<?php the_content(); ?>

のすぐ下に

<?php
echo '<button class="like-button" data-postid="'.get_the_ID().'">';
echo '<i class="far fa-heart"></i>';
echo '</button>';
?>

<span id="like-count-<?php echo get_the_ID(); ?>"></span>
<script>
var postId = <?php echo get_the_ID(); ?>;
var initialLikeCount = <?php echo get_post_meta(get_the_ID(), 'likes_count', true) ?: 0; ?>;
</script>
<script src="<?php echo get_template_directory_uri(); ?>/like-count.js?v=<?php echo filemtime(get_template_directory() . '/like-count.js'); ?>"></script>	

以上

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0