也想出现在这里?联系我们

纯代码WordPress文章添加点赞功能

2024.02.01 wordpress教程
  • 文章介绍
  • 升级版本
  • 评价&建议

要在WordPress文章中添加点赞功能,你可以使用以下步骤:

  1. 编辑主题文件: 首先,你需要编辑你的WordPress主题文件,以便在文章中添加点赞按钮。通常,你会编辑单个文章模板文件(single.php)或文章循环文件(loop.php),具体取决于你的主题。

  2. 添加点赞按钮HTML: 在你选择的文章模板文件中,找到你希望添加点赞按钮的位置,并插入以下HTML代码:

<div class="likebutton">
    <a href="#" class="likepost">点赞</a>
    <span class="likecount">0</span>
</div>

这个代码包括一个点赞按钮和一个显示点赞数的元素。你可以根据你的主题和设计自定义样式。

  1. 添加JavaScript代码: 接下来,你需要添加JavaScript代码来处理点赞功能。你可以在主题的JavaScript文件中添加以下代码,或者使用WordPress的wp_enqueue_script函数将其添加到你的主题中:
jQuery(document).ready(function($) {
    $('.likepost').on('click', function(e) {
        e.preventDefault();
        var post_id = $(this).data('postid');
        var like_count = parseInt($('.likecount').text());

        $.ajax({
            type: 'post',
            url: ajaxurl,
            data: {
                action: 'like_post',
                post_id: post_id
            },
            success: function(response) {
                like_count;
                $('.likecount').text(like_count);
                $('.likepost').addClass('liked');
            }
        });
    });
});

这个JavaScript代码会使用Ajax来处理点赞按钮的点击事件。当用户点击按钮时,它会向WordPress发送一个请求,将点赞计数增加1,并更新显示的点赞数。

  1. 处理点赞的后端代码: 现在,你需要在主题的functions.php文件中添加PHP代码来处理点赞的后端逻辑。以下是一个示例:
function like_post() {
    $post_id = $_POST['post_id'];
    $current_likes = get_post_meta($post_id, '_likes', true);

    if (!$current_likes) {
        $current_likes = 0;
    }

    $new_likes = $current_likes  1;
    update_post_meta($post_id, '_likes', $new_likes);
    die();
}

add_action('wp_ajax_like_post', 'like_post');
add_action('wp_ajax_nopriv_like_post', 'like_post');

这段代码会增加一个名为like_post的Ajax处理程序。当点赞按钮被点击时,它会更新文章的点赞数,并将新的点赞数存储在WordPress的自定义字段中。

  1. 样式化点赞按钮: 最后,你可以使用CSS来样式化点赞按钮和点赞计数,以使其与你的主题风格匹配。

这就是如何在WordPress文章中添加点赞功能的基本步骤。请根据你的具体需求和主题进行定制。请确保在修改主题文件之前备份它们,并在代码中使用适当的安全性措施,以防止不良行为。

有用2
  • 2024.02.01初次和大家见面了!

等待您对该主题的建议

发表评论

还能输入240个字

Hi, 欢迎加入Wordpress技术交流群,带你装逼带你飞!

我要入群
也想出现在这里?联系我们
wordpress加速

我来推荐一个更牛逼的给你看看?

  • 猛戳我吧