主要利用wp_postmeta,wp_commentmeta进行记录数据.
再利用indexDB进行本地记录判断,代替以往的cookies方式记录.
当然他的缺点比cookies的安全性更致命!
随便来个C语言大佬可以一句代码刷爆你的赞数.
要安全性最好还是记录IP.O(∩_∩)O.
大概比较适合小站!
流程
- 后台文件 /wp-content/themes/[风格文件]/functions.php
<?php
//绑定 /wp-admin/admin-ajax.php 行为事件
add_action('wp_ajax_nopriv_like_click', 'like_click');
add_action('wp_ajax_like_click', 'like_click');
function like_click(){
$id = $_POST["id"];
if(!$id) ShowJson($json);
$actionKey = $_POST["key"];
if(!$actionKey) ShowJson($json);
$actionKey = explode ('_',$actionKey);
if(!$actionKey[1]) ShowJson($json);
else $key = 'likeClick_'.$actionKey[1];
if($actionKey[2]) $key .= ucfirst($actionKey[2]);
$json = array('result'=>false);
if($actionKey[1]=='post')$likeClick_raters = intval(get_post_meta($id,$key,true));
if($actionKey[1]=='comment')$likeClick_raters = intval(get_comment_meta($id,$key,true));
if(!isset($likeClick_raters)) ShowJson($json);
if ( $actionKey[0] == 'add'){
$likeClick_raters += 1;
$json['num'] = $likeClick_raters;
$json['result'] = true;
}else if ( $actionKey[0] == 'remove'){
$likeClick_raters-=1;
$json['num'] = $likeClick_raters;
}
if($actionKey[1]=='post')update_post_meta($id, $key, $likeClick_raters);
if($actionKey[1]=='comment')update_comment_meta($id, $key, $likeClick_raters);
ShowJson($json);
exit;
}
function ShowJson($json)
{
echo json_encode($json);
exit;
}
?>
- 模板调用
这是一个自定义HTML 符合两个英文之间有个横线的格式 the_ID() 是文章的ID
<like-click data-id="post-<?php the_ID(); ?>">
<span class="likes_count"><?php echo intval(get_post_meta(get_the_ID(),'likeClick_post',true));?></span>
</like-click>
<!-- 自启动并且执行一次 不绑定点击事件 -->
<like-click data-id="post_view-<?php the_ID(); ?>" data-once="1">
<span class="likes_count"><?php echo intval(get_post_meta(get_the_ID(),'likeClick_postView',true));?></span>
</like-click>
- Javacript处理
NengeNet = new class NengeApp{
//localForage http://localforage.docschina.org/
DB = localForage.createInstance({'name': NengeNet,'storeName': "IndexPage"});
constructor() {
this.DB.keys().then(db_list => {
this.DB_Ready();
});
}
DB_Ready(){
let N = this;
/*创建一个自定义HTML元素映射 */
N.createElement('like-click',function(type,element){
let tagName = element.tagName.toLowerCase(),
id = element.getAttribute('data-id'),
once = element.getAttribute('data-once')&&true,
func = (id)=>{
let data = N.CustomElemtData[tagName]||{};
if(data[id]){
//发现本地记录,HTML为点赞状态
element.querySelector('.like-words')&&(element.querySelector('.like-words').innerHTML='取消赞');
element.classList.add('active');
}else if(once){
console.log('运行一次');
N._Click_like(element)
}
};
if(!once)element.onclick = ()=>{N._Click_like(element);};
if(N.CustomElemtData[tagName]){
if(id){
func(id);
}
return ;
}
N.DB.getItem(tagName,(err,data)=>{
N.CustomElemtData[tagName] = data;
if(id){
func(id);
}
});
});
}
_Click_like(elm) {
let tagName = elm.tagName.toLowerCase(),
dataId = elm.getAttribute('data-id'),
dataArr = dataId.split('-'),
dataNum = parseInt(dataArr[1]),
dataKey = ['post','post_view','comment_zan','comment_cai'].includes(dataArr[0])&&dataArr[0],
tagData = this.CustomElemtData[tagName]||{},
isData = tagData[dataId];
if(elm.getAttribute('data-lock'))return ;
elm.setAttribute('data-lock',1);
if (dataNum&&dataKey) {
let setData = {
'action': tagName.replace('-','_'),
'id': dataNum,
'key': (isData==true ? 'remove':'add')+'_'+dataKey
},
bodyData = new FormData();
for (var i in setData) {bodyData.append(i, setData[i]);}
fetch(new Request('/wp-admin/admin-ajax.php', {
'method': "POST",
'body': bodyData
})).then(response => response.json()).then(v => {
let elmTxt = elm.querySelector('.like-words'),
elmc = elm.querySelector('.likes_count');
if(v.result==true){
elm.classList.add('active');
elmc&&(elmc.innerHTML = v.num);
elmTxt&&(elmTxt.innerHTML='取消赞');
// 这里可以记录一个时间,这样可以设置多久后又能点赞~
tagData[dataId] = true;
this.DB.setItem(tagName,tagData,function(){});
}else if(!isNaN(v.num)){
elm.classList.remove('active');
elmc&&(elmc.innerHTML = v.num);
elmTxt&&(elmTxt.innerHTML='赞一个');
// 取消点赞就删掉记录
tagData[dataId] = false;
this.DB.setItem(tagName,tagData,function(){});
}
elm.removeAttribute('data-lock');
}).catch(e=>{
elm.removeAttribute('data-lock');
});
}
}
CustomElemtData = {};
createElement(myelement, func,func2) {
let N = this;
class MyElement extends HTMLElement {
CALLFUNC = func;
CLOSEFUNC = func2;
connectedCallback() {
//一旦初始化后就会立即运行
if(this.getAttribute('data-install'))return;
this.setAttribute('data-install',true);
this.CALLFUNC('connect', this);
}
disconnectedCallback() {
this.CLOSEFUNC&&this.CLOSEFUNC('remove', this);
}
}
window.customElements.define(myelement, MyElement);
}
}