wordpress js 运行短代码_WP模板开发中,怎样给wordpress网站的文章,添加点赞功能?...

news/2024/5/15 23:30:35/文章来源:https://blog.csdn.net/weixin_39968640/article/details/111142845

我们在网上浏览某些网站的文章时,在文章的结尾处,都会有一个点赞的按钮,如果觉得文章内容非常不错,就可以点击这个“点赞”按钮,给之篇文章进行点赞一下。在wordpress网站的模板主题开发中,我们可不可以也为我们wordpress网站的文章添加上这个“点赞”功能呢?答案是肯定的。那么,怎样给wordpress网站的文章添加“点赞”功能呢?看我是怎样实现的吧。

0eb73c2769f09f47ba71b9f1dcdeeb79.png

​第一步:在wordpress模板的头部文件header.php中引入jquery。

为了在点击“点赞”按钮时,能够向后台传递数据,我们这里要用到jquery的AJAX处理函数,所以,我们要先在wordpress模板的头部文件中引入这个jquery文件,我这里是jquery1.7.2版本,其它版本也可以。代码如下:

<script src="<?php bloginfo("template_url"); ?>/js/jquery-1.7.2.min.js"></script>

第二步:在wordpress文章内容下方添加“点赞”按钮。代码如下:

<div class="item single_praise">
点赞:
<span class="dashicons-before dashicons-heart"></span>
<span class="praise_num">
<?php
$praise_num = get_post_meta($post->ID,'post_praise')[0]; //获取点赞数
echo $praise_num ? $praise_num : 0;
?>
</span>
</div>

第三步:添加点击“点赞”的事件处理代码。

我们要给这个“点赞”按钮添加一个事件,只要一点击这个“点赞”按钮,就弹出相应的事件处理,把当前文章的ID号通过AJAX传递到single_praise.php文件中。代码如下:

<script type="text/javascript">
$(function(){
var pid = <?php echo $post->ID; ?>; //文章ID
var user = '<?php echo wp_get_current_user()->user_login; ?>'; //当前登录的用户名
$(".single_praise").click(function(){
$.ajax({
type:'post',
url:'<?php bloginfo("template_url"); ?>/include/single_praise.php',
data:{ pid:pid,user:user },
success:function(e){ console.log(e)
var num = e ? e : 0;
$(".praise_num").html(num); //把点赞重新写入
}
})
})
})
</script>

384d82e1b4cf41b50e340253887907d3.png

第四步:向wordpress数据库中的对应文章添加“点赞”数据。

在wordpress模板目录下的include目录的下面,创建一个single_praise.php文件,用来接收AJAX传递过来的数据,然后,向wordpress数据库里添加或修改数据(文章的点赞数据)。代码如下:

<?php
define('BASE_PATH',str_replace( '' , '/' , realpath(dirname(__FILE__).'/../../../../')));//获取根目录
require(BASE_PATH.'/wp-load.php' );
$postid = esc_sql($_POST['pid']);
$user = esc_sql($_POST['user']);
$u_ip = $_SERVER["REMOTE_ADDR"];
if($postid==0 ){ //如果文章ID=0
exit("非法操作");
}
//向数据库中添加点赞数据
$praise_num = get_post_meta($postid,'post_praise')[0];
$user_views = !empty($praise_num) ? $praise_num : 0;
update_post_meta($postid,'post_praise',$user_views+1);
print_r($praise_num); exit;

bd71b66494499f2c37b2c3d6cc626162.png


通过上面的五步,我们就给wordpress网站的文章添加了点赞功能,我们每点击一次,就会给文章的点赞数据+1。这样,我们就基本上完成了操作。但是,有一个美中不足的地方,同一个用户,如果连续点击这个“点赞”按钮,就会不停地增加点赞数,这样不太友好。一般情况下,我们只让一个用户一天之内,只能点赞一次,这个功能,我们在下一章中再做相应的介绍,敬请期待,我们下一章再见

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_717349.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java如何制作浪漫表白界面_表白网页在线制作详细教程-我要表白网-最浪漫的表白网页在线生成网站...

如何制作表白网页&#xff1f;如何提取背景音乐&#xff0c;图片链接呢&#xff1f;不要着急&#xff0c;答案全在这里 …编辑文字看到这个页面之后我们就开始制作只属于自己的表白网页了~把鼠标放到 点此编辑 这里就可以编辑文字了时间比如你跟TA是3月22日恋爱的&#xff0c;那…

python 爬带端口的网站_5分钟带你用Python爬完《剑来》小说(附完整代码)!

Python资源共享群&#xff1a;484031800思路&#xff1a;step 1 &#xff1a;请求《剑来》小说站点&#xff0c;获取两个东西小说名称——在Python程序同目录下&#xff0c;以小说名称创建文件夹每章小说的链接地址step 1 对应代码中的 get_url()函数 &#xff0c;该函数还包括…

php与apache整合404,PHP网站从Apache转移到Nginx后产生404错误的原因和解决办法

这是转载的别人的解决方法&#xff1a;原案例分析&#xff1a;1、原来的网站在wamp环境下搭建完成&#xff0c;一切正常&#xff0c;上传到虚拟主机环境为lnmp&#xff0c;结果访问时可以打开主页&#xff0c;然后点其他页面全部报404错误&#xff1b;2、经分析得出原因&#x…

iis添加网站外网无法访问_2秒钟实现在IIS上面新建站点并发布Web应用

>> 点击上方 懒人MES 关注我们之前有写过一篇"教你两分钟使用ASP.NET CORE创建并发布一个Web应用“&#xff0c;今天分享一篇Powershell实例“只需2秒钟实现在IIS上面新建站点并发布Web应用”。在过去的一年工作中接触到很多服务器上应用迁移的任务&#xff0c;其中…

mysql 替换网址_mysql语句:网站批量http替换https技巧

网站开启https非常简单&#xff0c;先申请一个ssl证书&#xff1b;DigiCert 免费版 SSL证书可以通过阿里云、DNSPOD进行申请。通常30分钟左右即可申请成功&#xff0c;免费时间一年&#xff0c;第二年可以续签。将申请成功的证书安装在服务器端&#xff0c;成功开启SSL后&#…

php gb2312网站源码,闻名 PHP 企业网站系统 weenCompany v5.3.0 简体中文 GB2312

weenCompany闻名企业网站系统(免费开源)是一个功能强大, 使用简单的中英文企业智能建站系统, 您只需要一些基本的计算机知识就可以利用此系统完成中小型企业网站的建设; 是低成本企业网站架设方案之首选CMS系统, 也适合建设个人网站。weenCompany闻名企业网站系统功能&#xff…

前端设计类网站汇总

设计前端类网站汇总 一、素材类 1、图片 其实国内对图片版权保护这块的意识不是很够&#xff0c;在免费的素材库和收费素材库都能找到同一张图片&#xff0c;但作者署名却都不一样。所以小编现在基本不用国内这些图库网&#xff0c;跟大家推荐几个免费又没有版权纠纷的图库网站…

阿里云ecs怎么搭建网站

一、首先在阿里云开通一台服务器 二、开通服务器之前最好确定你的服务器用linux还是windows&#xff0c;这里小编推荐大家用linux的服务器&#xff0c;因为linux服务器稳定而且性能也比windows好&#xff01; 三、安装网站环境 小编推荐宝塔面板&#xff0c;比较方便快捷&#…

图片优化_怎么优化图片?网站图片优化方法有哪些?

在搜索引擎算法不断的进步&#xff0c;算法不断的升级变化的情况下&#xff0c;很多站长纷纷表示无路可走&#xff0c;其实有时候换一种角度想一想&#xff0c;之所以搜索引擎实施一定的打压&#xff0c;那也正是说明了&#xff0c;做SEO还有别的路可走。为何有人表示说无路可走…

file 选择的图片作为背景图片_我用100行代码做了个网站,帮人PS旅行图片,赚个鸡腿吃!...

虽然不能出门&#xff0c;但是我们可以利用python来带领大家出去旅游&#xff0c;今天小编就带领大家利用python和Flask实现旅游的小目标&#xff0c;让大家足不出户&#xff0c;就能晒出自己的旅游照。01功能简介我们今天实现的小功能就是&#xff0c;利用python来提取我们的人…

debian8 php7,Debian8环境安装Apache/PHP7/MariaDB网站环境

一、添加PHP7数据源以及更新系统安装好的Debian后还不能使用sudo,需要使用root用户登陆后安装sudo命令apt-get install sudo添加PHP7数据源以及更新系统echo"deb http://repos.zend.com/zend-server/early-access/php7/repos ubuntu/" >> /etc/apt/sources.lis…

php网站iis7.5 session,IIS 7.5 asp Session超时时间设置方法

IIS 7.5 asp Session超时时间设置方法有时候在web.config设置sessionState 或者类文件里设置Session.Timeout&#xff0c;在IIS里访问时每次都是达不到时间就超时,原因是因为在IIS中设置了超时时间那么我们如何设置超时时间呢&#xff1f;1.IIS图形界面设置IIS6 在IIS里面右键点…

中国程序员开发的神奇网站:变量命名神器,这个有点意思!

有一种痛&#xff0c;不是程序员可能不懂&#xff0c;但如果是程序员一定懂&#xff0c;那就是给变量或函数命名。回想一下起名字这条路&#xff0c;刚开始学某个编程语言的时候&#xff0c;26 个字母还能解决问题&#xff0c;26 个不够还能用字母与数字的组合?。但是&#xf…

java相关技术网站,看完这一篇你就懂了

灵魂发问&#xff1a;我们为什么要学习SpringBoot&#xff1f;&#xff1f;&#xff1f; 官方对 Spring Boot 的定位&#xff1a;Build Anything&#xff0c; Build 任何东西。Spring Boot 旨在尽可能快地启动和运行&#xff0c;并且只需最少的 Spring 前期配置。 同时我们也来…

FBI 网站都被黑了?

来源&#xff1a;快科技news.mydrivers.com/1/622/622871.htm4月13日&#xff0c;据外媒报道&#xff0c;一个黑客组织通过黑进数个联邦调查局&#xff08;FBI&#xff09;的附属网站&#xff0c;获取了成千上万条联邦特工和执法人员的个人信息&#xff0c;并计划出售。据悉&am…

你社交网站上的照片也许已经被用来训练人工智能了

毫无疑问&#xff0c;这张家庭照片是非常可爱的:照片中的爸爸留着短须&#xff0c;戴着无框眼镜&#xff0c;棕色头发的妈妈咧着嘴笑着。他们正和两个蹒跚学步的女儿一起嬉戏&#xff0c;同时品尝着冰淇淋。但是&#xff0c;这张照片于2013年被上传到照片分享网站Flickr上时&am…

@前端工程师,节约网站流量用这一招就够了!

作者 | 桃翁随着 Web 的发展&#xff0c;网站资源的流量也变得越来越大。据统计&#xff0c;60%的网站流量均来自网站图片&#xff0c;可见对图片合理优化可以大幅影响网站流量&#xff0c;减小带宽消耗和服务器压力。有时候你花大力气去配置 WebPack 使打包体积减少&#xff0…

有什么学习java的网站

前言 大数据、算法项目在任何大厂无论是面试还是工作运用都是非常广泛的&#xff0c;我们精选了50个百度、腾讯、阿里等大厂的大数据、算法落地经验甩给大家&#xff0c;千万不要做收藏党哦&#xff0c;空闲时间记得随时看看&#xff01; 如果你没有大厂项目经验&#xff0c;…

树展示 移动端_网站SEO优化中如何做好移动端的网站适配工作

随着移动互联网的发展&#xff0c;我们越来越多的网站都开始积极面向移动端设备开发。如果现在还有那家网站只能方便电脑端展现&#xff0c;对移动端展现不够友好的话&#xff0c;那么都是不利于SEO搜索引擎优化与用户的阅览体验的。而对于使用H5技术建设的网站来说&#xff0c…

tomcat vue 不用 前后端_Django rest framework加Vue打造前后端分离的网站

我曾记录过用django rest framework和vue的文章&#xff0c;如下链接。还在持续更新中。后端是django rest framework&#xff0c;前端是vue.js&#xff0c;数据库用了mysql&#xff0c;部署会用上uwsgi加nginx。Django restframework加Vue打造前后端分离的网站(一)环境准备Dja…