礼花绽放式WordPress评论特效

来来来,给wordpress评论框输入评论加特效啦,有时候确实感觉评论框很乏味,每个文章写出来都是花费了很多心血的,但是得不到肯定的评论,或者基本是没有评论,那么这么吸引用户评论呢,这里我们来给评论框加个特效吧,

这让写文章的作者有些心灰意冷的感觉,也希望大家多多评论才好呀,那么想让别人多多评论,肯定是需要一些勾引的,比如内容评论可见,

或者是让访客主动评论,既然有这个需求,那么对于我们的评论功能肯定也是需要加强和美化一番的,这里就给我的评论框加入一个礼花震动特效吧,当你输入的时候就会有这种特效了,

WordPress评论框礼花震动特效

首先是特效的效果图:
礼花绽放式WordPress评论特效
还是美美哒的,想必有些站长看到这里就肯定,必须要加入这种特效了,确实很好看,无聊的时候自己娱乐都可以玩一下了,
礼花绽放式WordPress评论特效
下面让我们开始代码教程吧,请在开始之前做好相对应的备份,到时候如果出现问题直接替换即可
首先,将下面的js代码保存起来,命名mcbke.js,并上传到网站根目录js文件夹(若无直接新建该文件夹)。

/**
 * 给WordPress博客网站添加评论输入礼花及震动特效
 * https://www.mcbke.com/wpjzlhtx/
 */
(function webpackUniversalModuleDefinition(root,factory){if(typeof exports==='object'&&typeof module==='object')module.exports=factory();else if(typeof define==='function'&&define.amd)define([],factory);else if(typeof exports==='object')exports["POWERMODE"]=factory();else root["POWERMODE"]=factory()})(this,function(){return(function(modules){var installedModules={};function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={exports:{},id:moduleId,loaded:false};modules[moduleId].call(module.exports,module,module.exports,__webpack_require__);module.loaded=true;return module.exports}__webpack_require__.m=modules;__webpack_require__.c=installedModules;__webpack_require__.p="";return __webpack_require__(0)})([function(module,exports,__webpack_require__){'use strict';var canvas=document.createElement('canvas');canvas.width=window.innerWidth;canvas.height=window.innerHeight;canvas.style.cssText='position:fixed;top:0;left:0;pointer-events:none;z-index:999999';window.addEventListener('resize',function(){canvas.width=window.innerWidth;canvas.height=window.innerHeight});document.body.appendChild(canvas);var context=canvas.getContext('2d');var particles=[];var particlePointer=0;POWERMODE.shake=true;function getRandom(min,max){return Math.random()*(max-min)+min}function getColor(el){if(POWERMODE.colorful){var u=getRandom(0,360);return'hsla('+getRandom(u-10,u+10)+', 100%, '+getRandom(50,80)+'%, '+1+')'}else{return window.getComputedStyle(el).color}}function getCaret(){var el=document.activeElement;var bcr;if(el.tagName==='TEXTAREA'||(el.tagName==='INPUT'&&el.getAttribute('type')==='text')){var offset=__webpack_require__(1)(el,el.selectionStart);bcr=el.getBoundingClientRect();return{x:offset.left+bcr.left,y:offset.top+bcr.top,color:getColor(el)}}var selection=window.getSelection();if(selection.rangeCount){var range=selection.getRangeAt(0);var startNode=range.startContainer;if(startNode.nodeType===document.TEXT_NODE){startNode=startNode.parentNode}bcr=range.getBoundingClientRect();return{x:bcr.left,y:bcr.top,color:getColor(startNode)}}return{x:0,y:0,color:'transparent'}}function createParticle(x,y,color){return{x:x,y:y,alpha:1,color:color,velocity:{x:-1+Math.random()*2,y:-3.5+Math.random()*2}}}function POWERMODE(){{var caret=getCaret();var numParticles=5+Math.round(Math.random()*10);while(numParticles--){particles[particlePointer]=createParticle(caret.x,caret.y,caret.color);particlePointer=(particlePointer+1)%500}}{if(POWERMODE.shake){var intensity=1+2*Math.random();var x=intensity*(Math.random()>0.5?-1:1);var y=intensity*(Math.random()>0.5?-1:1);document.body.style.marginLeft=x+'px';document.body.style.marginTop=y+'px';setTimeout(function(){document.body.style.marginLeft='';document.body.style.marginTop=''},75)}}};POWERMODE.colorful=false;function loop(){requestAnimationFrame(loop);context.clearRect(0,0,canvas.width,canvas.height);for(var i=0;iparseInt(computed.height))style.overflowY='scroll'}else{style.overflow='hidden'}div.textContent=element.value.substring(0,position);if(element.nodeName==='INPUT')div.textContent=div.textContent.replace(/\s/g,"\u00a0");var span=document.createElement('span');span.textContent=element.value.substring(position)||'.';div.appendChild(span);var coordinates={top:span.offsetTop+parseInt(computed['borderTopWidth']),left:span.offsetLeft+parseInt(computed['borderLeftWidth'])};if(debug){span.style.backgroundColor='#aaa'}else{document.body.removeChild(div)}return coordinates}if(typeof module!="undefined"&&typeof module.exports!="undefined"){module.exports=getCaretCoordinates}else{window.getCaretCoordinates=getCaretCoordinates}}())}])});

然后,将以下代码添加到主题的footer.php文件适当的位置。
当然,你也可以加一个判断is_singular(),让下面的js只在文章页和页面中加载即可。



代码中有开关,大家可以自己设置开启或者关闭,到此教程结束,是不是很简单,如果你也想要这样的特效,就快点加入吧。

想试试效果直接在本文章末评论即可

😳

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

MC百科 Wordpress教程 礼花绽放式WordPress评论特效 https://www.mcbke.com/wpjzlhtx.html

科技迷、外设控、Minecraft爱好者,科技改变生活!

上一篇:

已经没有上一篇了!

常见问题

相关文章

评论
暂无评论
礼花绽放式WordPress评论特效-海报

分享本文封面