Skip to content
WONGCW 網誌
  • 首頁
  • 論壇
  • 微博
  • 壁紙下載
  • 免費圖床
  • 視頻下載
  • 聊天室
  • SEO工具
  • 支援中心
  • 表格製作
  • More
    • 在線名片
    • 網頁搜索
    • 天氣預報
    • 二維碼生成器
    • WordPress 插件及主題下載
  • Search Icon

WONGCW 網誌

記錄生活經驗與點滴

WordPress代码实现文章点赞功能

WordPress代码实现文章点赞功能

2018-12-09 Comments 0 Comment

这篇是群员定制文章,哈哈哈,开玩笑,正好以前没写,趁群员提起需要我就顺手写了。WordPress的文章点赞功能很多主题都有,我知道的国产售卖的主题几乎都有,也有很多这类的插件,用插件很多“大佬”都说不好,在你没有修改代码能力前提下,使用插件是最快最简单让你拥有文章点赞功能的方式,不过使用插件免不了会给你多增加几个http请求,比如样式、js等等。

羊毛党之家 WordPress代码实现文章点赞功能  https://yangmaodang.org

其实WordPress文章点赞功能很简单,与WordPress文章阅读数量统计功能一样,都是对数据的一种保存读取操作而已。只是相对于WordPress文章阅读数量统计来说,点赞功能的实现稍微复杂一点,因为需要和前端交互,我们一般采用ajax进行无刷新交互操作,按照下面的步骤一起来实现一下,实现代码来自大前端dux主题功能部分修改,大品牌代码质量有保证。

WordPress代码实现文章点赞功能实现步骤

用户需要点击按钮才能实现点赞操作,这里需要准备几个东西。第一个就是点赞用的按钮,按钮的样式大家自己选,注意设置一个class名称,后面ajax交互时需要使用。第二个就是保存点赞数量与读取点赞数量的操作方法了,保存读取这个东西我们可以把它写成接口,方便我们前端ajax调用。这个接口可能有朋友不会写,没关系,我会将大前端DUX主题的接口放在文章末尾,需要的直接下载下来按照本文教程即可实现。

将文章末尾的接口文件放入主题目录下的action目录中,没有的自己建立个文件夹即可。

在主题functions.php文件中写入输出点赞按钮功能代码,如下:

<?php  
//点赞
function hui_get_post_like($class='', $pid='', $text=''){
    $pid = $pid ? $pid : get_the_ID();
    $text = $text ? $text : __('赞', 'haoui');
    $like = get_post_meta( $pid, 'like', true );
    if( hui_is_my_like($pid) ) {
        $class .= ' actived';
    }
    return '<a href="javascript:;" etap="like" class="'.你的css.'" data-pid="'.$pid.'">点赞'.$text.'('.($like ? $like : 0).')</a>';
}
?>

然后在文章结束地方,或者你需要输出点赞数据的地方,写上如下代码

<?php  echo hui_get_post_like($class='post-like action action-like');  ?>

这样就会生成一个带有文章id号的点赞按钮,当然,你也可以不用在functions.php文件中写输出点赞按钮的方法,直接写在文章页模板single.php中也是一样的,然后我们使用jQuery对其进行ajax操作发送post请求,请求接口文件添加点赞数量。jQuery代码如下:

//点赞
	$('.你的点赞按钮class名称').on('click', function(e){
		var _ta=$(this)
		 var pid = _ta.attr('data-pid')
		 var islike=getCookie(pid+'like')//保存cookies防止未登录用户重复点赞
		 if(islike==1) {return alert('你已赞!')}else{
		  $.ajax({
                url: '你的主题路径/action/like.php', //接口文件地址,文末有
                type: 'POST',
                dataType: 'json',
                data: {
                    key: 'like',
                    pid: pid
                },
                success: function(data, textStatus, xhr) {
                    if (data.error) return false;
                    _ta.toggleClass('actived')
                    _ta.find('span').html(data.response)
		    var time=24*60*30;//设置cookies过期时间
		    setCookie(pid+'like',1,time)//设置cookies
					 
                }
            });
		 }
    });

JavaScript操作cookies代码功能方法:

//取cookies
function getCookie(cookieName){  
        var cookieValue="";  
        if (document.cookie && document.cookie != '') {   
            var cookies = document.cookie.split(';');  
            for (var i = 0; i < cookies.length; i++) {   
                 var cookie = cookies[i];  
                 if (cookie.substring(0, cookieName.length + 2).trim() == cookieName.trim() + "=") {  
                       cookieValue = cookie.substring(cookieName.length + 2, cookie.length);   
                       break;  
                 }  
             }  
        }   
        return cookieValue;  
    }
//设置cookies
function setCookie(name, value, liveMinutes) {  
	if (liveMinutes == undefined || liveMinutes == null) {
		liveMinutes = 60 * 2;
	}
	if (typeof (liveMinutes) != 'number') {
		liveMinutes = 60 * 2;//默认120分钟
	}
	var minutes = liveMinutes * 60 * 1000;
	var exp = new Date();
	exp.setTime(exp.getTime() + minutes + 8 * 3600 * 1000);
	//path=/表示全站有效,而不是当前页
	document.cookie = name + "=" + value + ";path=/;expires=" + exp.toUTCString();
}

到此,WordPress文章点赞功能完成了,具体效果如本站的点赞功能,虽然对未登录用户的验证有些薄弱,但也只能做到如此了,反正不是每个用户都知道清理cookies。

分享此文:

  • 分享到 Twitter(在新視窗中開啟)
  • 按一下以分享至 Facebook(在新視窗中開啟)
  • 分享到 WhatsApp(在新視窗中開啟)
  • 按一下以分享到 Telegram(在新視窗中開啟)
  • 分享到 Pinterest(在新視窗中開啟)
  • 分享到 Reddit(在新視窗中開啟)
  • 按一下即可分享至 Skype(在新視窗中開啟)
  • 按一下即可以電子郵件傳送連結給朋友(在新視窗中開啟)
  • 點這裡列印(在新視窗中開啟)

相關


WordPress資訊

Post navigation

PREVIOUS
wordpress主题新建页面链接改为.html方法
NEXT
WordPress自动为文章中的关键词添加链接

發表迴響 取消回覆

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料。

More results...

Generic filters
Exact matches only
Search in title
Search in content
Search in excerpt
Filter by 分類
網站公告
Featured
限時免費
ESET NOD32
WINDOWS 10 &11 INSIDER PREVIEW
Windows 軟件下載
系統軟件
辦公軟件
圖像處理
影音媒體
網絡軟件
應用軟件
Mac 軟件下載
安卓軟件下載
網絡資訊
Mac資訊
Linux資訊
VPS資訊
NASA資訊
金融資訊
WhatsApp Stickers教學
WordPress資訊
WeChat資訊
PHP資訊
Plesk資訊
TensorFlow
教學資源
開源程序
網頁工具
SEO工具
醫療健康
旅遊及消閒
其他資訊
Content from
Content to
2018 年 12 月
一 二 三 四 五 六 日
 12
3456789
10111213141516
17181920212223
24252627282930
31  
« 11 月   1 月 »

分類

  • 網站公告
  • 限時免費
  • ESET NOD32
  • WINDOWS 10 &11 INSIDER PREVIEW
  • Windows 軟件下載
  • 系統軟件
  • 辦公軟件
  • 圖像處理
  • 影音媒體
  • 網絡軟件
  • 應用軟件
  • Mac 軟件下載
  • 安卓軟件下載
  • 網絡資訊
  • Mac資訊
  • Linux資訊
  • VPS資訊
  • NASA資訊
  • WhatsApp Stickers教學
  • WordPress資訊
  • WeChat資訊
  • PHP資訊
  • Plesk資訊
  • TensorFlow
  • 教學資源
  • 開源程序
  • 網頁工具
  • SEO工具
  • 醫療健康
  • 旅遊及消閒
  • 其他資訊

彙整

近期文章

  • 倫理學家回擊”AI暫停發展”信件稱其過於戲劇化以至於忽略了現實危害 2023-04-01
  • 聯邦貿易委員會準備就兒童隱私被侵犯的案件起訴亞馬遜 2023-04-01
  • 一款Jetson電動滑板在發生火災導致兩名兒童死亡後被宣布召回 2023-04-01
  • iPhone自帶天氣App出現大面積bug 用戶無法獲得數據 2023-04-01
  • 蘋果中國開賣官方翻新版iPad mini 6:4419元起 2023-04-01
  • 吉田修平:很想看到獨立開發者對於生成AI技術的應用 2023-04-01
  • Xbox高管認為Game Pass業務不會顛覆行業模式 2023-04-01
  • 《羅布樂思》將為13歲以下兒童隱藏遊戲內廣告 2023-04-01
  • 驗證碼攔不住機器人谷歌AI已能精準識別模糊文字GPT-4則裝瞎求人幫忙 2023-04-01
  • Twitter正式“開源” 馬斯克警告:會發現很多尷尬問題 2023-04-01

熱門文章與頁面︰

  • ESET NOD32 LICENSE KEY (UPDATED 2023-01-17)
  • 打車叫到特斯拉不會開門很尷尬?官方介紹開關門方法
  • DP vs HDMI 誰才是遊戲玩家最佳選擇?
  • 世界上有多少個國家
  • Explorer Patcher:讓Windows 11恢復Windows 10的行為特徵
  • Autodesk AutoCAD 2021 正式版註冊版-簡體/繁體中文/英文版
  • 盜版Windows 7還能免費升級Windows 10嗎?
  • PS5實際上擁有網頁瀏覽器但玩家無法隨意訪問
  • 常用硬碟接口IDE、SATA、mSATA、M.2SATA、M.2PCIE NVMe講解
  • Bandicam v4.5.0.1587 多語言中文​​註冊版附註冊機

投遞稿件

歡迎各界人士投遞稿件到admin@wongcw.com

請提供以下資料:

1.你的名字

2.你的電郵

3.分類目錄

4.文章標題

5.文章摘要

6.文章內容

7.文章來源

 

聯繫我們

查詢,投稿,商務合作:
​admin@wongcw.com
​技術支援:
​support@wongcw.com
​客户服務:
​cs@wongcw.com

QQ群:833641851

快帆

MALUS

極度掃描

DMCA.com Protection Status

WONGCW 網誌

  • 免責聲明
  • 捐助我們
  • ThemeNcode PDF Viewer
  • ThemeNcode PDF Viewer SC
  • Events

服務器提供

本站使用之服務器由ikoula提供。

聯繫我們

查詢,投稿,商務合作:
​admin@wongcw.com
​技術支援:
​support@wongcw.com
​客户服務:
​cs@wongcw.com

QQ群:833641851

© 2023   All Rights Reserved.