今天,有人在问本站的打字特效怎么弄的,现在把代码贴出来共享。
一、首先新建一个js文件,粘贴下面的代码,并上传到你用的主题的js文件夹中
/** * 给WordPress博客网站添加评论输入礼花及震动特效 * https://myqqjd.com */ (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;i<particles.length;++i){var particle=particles[i];if(particle.alpha<=0.1)continue;particle.velocity.y+=0.075;particle.x+=particle.velocity.x;particle.y+=particle.velocity.y;particle.alpha*=0.96;context.globalAlpha=particle.alpha;context.fillStyle=particle.color;context.fillRect(Math.round(particle.x-1.5),Math.round(particle.y-1.5),3,3)}}requestAnimationFrame(loop);module.exports=POWERMODE},function(module,exports){(function(){var properties=['direction','boxSizing','width','height','overflowX','overflowY','borderTopWidth','borderRightWidth','borderBottomWidth','borderLeftWidth','borderStyle','paddingTop','paddingRight','paddingBottom','paddingLeft','fontStyle','fontVariant','fontWeight','fontStretch','fontSize','fontSizeAdjust','lineHeight','fontFamily','textAlign','textTransform','textIndent','textDecoration','letterSpacing','wordSpacing','tabSize','MozTabSize'];var isFirefox=window.mozInnerScreenX!=null;function getCaretCoordinates(element,position,options){var debug=options&&options.debug||false;if(debug){var el=document.querySelector('#input-textarea-caret-position-mirror-div');if(el){el.parentNode.removeChild(el)}}var div=document.createElement('div');div.id='input-textarea-caret-position-mirror-div';document.body.appendChild(div);var style=div.style;var computed=window.getComputedStyle?getComputedStyle(element):element.currentStyle;style.whiteSpace='pre-wrap';if(element.nodeName!=='INPUT')style.wordWrap='break-word';style.position='absolute';if(!debug)style.visibility='hidden';properties.forEach(function(prop){style[prop]=computed[prop]});if(isFirefox){if(element.scrollHeight>parseInt(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的body前加上下面的代码保存就可以了。
<script src="<?php bloginfo('template_directory'); ?>/js/activate-power-mode.js "></script> <script> POWERMODE.colorful = true; // make power mode colorful POWERMODE.shake = false; // turn off shake document.body.addEventListener('input', POWERMODE); </script>
POWERMODE.colorful = true; // ture 为启用礼花特效
POWERMODE.shake = false; // false 为禁用震动特效
over!效果看本站!
WordPress 禁止某些用户登录
对于饱受沧桑的老站长一定深感做站不易,尤其是我们小站长在发展中有时难免有坏坏来捣蛋,让站长愁困许久四处请大神,今天呢咱们说个WordPress 禁止某些用户登录让捣蛋者禁止登陆不让他捣蛋耍坏坏、、、
以下代码丢到函数文件functions.php:
/** * WordPress 禁止某些用户登录 */ //在资料页面添加选项 function lxtx_rc_admin_init(){ // 编辑用户资料 add_action( 'edit_user_profile', 'lxtx_rc_edit_user_profile' ); add_action( 'edit_user_profile_update', 'lxtx_rc_edit_user_profile_update' ); } add_action('admin_init', 'lxtx_rc_admin_init' ); //在个人资料页面添加一个复选框 function lxtx_rc_edit_user_profile() { if ( !current_user_can( 'edit_users' ) ) { return; } global $user_id; // 用户不能禁止自己 $current_user = wp_get_current_user(); $current_user_id = $current_user->ID; if ( $current_user_id == $user_id ) { return; } ?> <h3>权限设置</h3> <table class="form-table"> <tr> <th scope="row">禁止用户登录</th> <td><label for="lxtx_rc_ban"><input name="lxtx_rc_ban" type="checkbox" id="lxtx_rc_ban" <?php if (lxtx_rc_is_user_banned( $user_id )){echo 'checked="checked"';} ?> /> 请谨慎操作,选中则禁止!</label></td> </tr> </table> <?php } //添加一个函数来将这个选项的值保存到数据库中 function lxtx_rc_edit_user_profile_update() { if ( !current_user_can( 'edit_users' ) ) { return; } global $user_id; // 用户不能禁止自己 $current_user = wp_get_current_user(); $current_user_id = $current_user->ID; if ( $current_user_id == $user_id ) { return; } // 锁定 if( isset( $_POST['lxtx_rc_ban'] ) && $_POST['lxtx_rc_ban'] = 'on' ) { lxtx_rc_ban_user( $user_id ); } else { // 解锁 lxtx_rc_unban_user( $user_id ); } } //禁止用户 function lxtx_rc_ban_user( $user_id ) { $old_status = lxtx_rc_is_user_banned( $user_id ); // 更新状态 if ( !$old_status ) { update_user_option( $user_id, 'lxtx_rc_banned', true, false ); } } //解禁用户 function lxtx_rc_unban_user( $user_id ) { $old_status = lxtx_rc_is_user_banned( $user_id ); // 更新状态 if ( $old_status ) { update_user_option( $user_id, 'lxtx_rc_banned', false, false ); } } //判断用户是否被禁止 function lxtx_rc_is_user_banned( $user_id ) { return get_user_option( 'lxtx_rc_banned', $user_id, false ); } //阻止已禁止的用户登录 function lxtx_rc_authenticate_user( $user ) { if ( is_wp_error( $user ) ) { return $user; } // 如果用户被禁止,则返回错误提示 $banned = get_user_option( 'lxtx_rc_banned', $user->ID, false ); if ( $banned ) { return new WP_Error( 'lxtx_rc_banned', __('抱歉,该用户被禁止登录!请联系站长解禁。', 'rc') ); } return $user; } //将该函数挂载到 wp_authenticate_user 钩子 add_filter( 'wp_authenticate_user', 'lxtx_rc_authenticate_user', 1 );
然后,管理员在后台“编辑用户”菜单里看到我们增加的这个选项了,可以禁止某用户登陆。选中后,则会禁止该用户登录!并且该用户在登录时,会看到这个提示信息:“抱歉,该用户被禁止登录!请联系站长解禁。”
知更鸟Begin主题打赏、分享、点赞按钮美化 —— WordPress美化
代码部署:
用Notepad++打开知更鸟Begin主题(5.2版本)样式表 (style.css),大概在6269行(不同版本的主题,也许行数不一样),找到下面的代码
/** 喜欢分享 **/ #social { position: relative; margin: 50px auto; } .social-main { position: relative; margin: 0 auto; width: 243px; } .social-main span { float: left; } .social-main a { color: #999; line-height: 36px; border-radius: 2px; } .share-s a, .shang-s a { text-align: center; } .like a { float: left; padding-left: 15px; } .social-main a:hover { background: #f1f1f1; color: #444; transition: all 0.2s ease-in 0s; } .like a { background: #fff; width: 120px; display: block; border: 1px solid #ddd; } .share-s a { background: #fff; width: 120px; display: block; padding-left: 15px; border: 1px solid #ddd; } .social-main i { color: #999; margin: 0 5px 0 0; } /** 赏 **/ .shang-empty { position: absolute; left: 90px; top: 0px; width: 62px; height: 38px; overflow: hidden; } .shang-empty span { background: #fff; width: 60px; height: 60px; display: block; margin: -10px 0 0 0; border-radius: 60px; border: 1px solid #ddd; } .shang-p a { position: absolute; background: #fff; left: 96px; top: -5px; width: 48px; height: 48px; font-size: 16px; line-height: 45px; display: block; border: 1px solid #ddd; border-radius: 40px; left: 101px\9; top: 0\9; width: 38px\9; height: 38px\9; line-height: 35px\9; } .shang-s { height: 37px; } #shang { width: 280px; display: block; } .shang-img { float: left; } .shang-img img { width: 140px; height: auto; } .shang-main h4 { font-size: 15px; font-size: 1.5rem; text-align: center; margin-bottom: 10px; } .shang-main i { color: #ff0000; } /** 分享 **/ #share { position: absolute; top: -60px; rightright: -29px; width: 302px; height: 68px; display: none; z-index: 999; } #share a { float: left; background: #999; font-size: 20px !important; color: #fff; width: 40px; height: 40px; line-height: 40px; margin-left: 4px; padding-left: 0; text-align: center; border-radius: 3px; background: rgba(128, 128, 128, 0.9); } #share .be-addbox:hover { background: #7ab951 !important; } #share .be-qzone:hover { background: #ff7400 !important; } #share .be-stsina:hover { background: #ff0000 !important; } #share .be-tqq:hover { background: #46c0e6 !important; } #share .be-renren:hover { background: #3b68ac !important; } #share .be-weixin:hover { background: #006f1d !important; } .bd_weixin_popup { height: 250px !important; } .bd_weixin_popup_foot { display: none; } /** 弹窗 **/ .fancybox-wrap { position: absolute; top: 0; left: 0; z-index: 8020; } .fancybox-skin { position: relative; background: #fff; color: #444; text-shadow: none; border-radius: 4px; } .fancybox-opened { z-index: 8030; } .fancybox-opened .fancybox-skin { box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5); } .fancybox-outer, .fancybox-inner { position: relative; } .fancybox-inner { overflow: hidden; } .fancybox-error { padding: 30px; whitewhite-space: nowrap; } .fancybox-image, .fancybox-iframe { display: block; width: 100%; height: 100%; } .fancybox-image { max-width: 100%; max-height: 100%; } #fancybox-loading { position: fixed; top: 50%; left: 50%; margin: -22px 0 0 -22px; z-index: 8060; } #fancybox-loading div { width: 79px; height: 10px; background: url(img/infinite.gif) center center no-repeat; } .fancybox-nav { position: absolute; top: 0; width: 45%; height: 100%; cursor: pointer; background: transparent url(img/blank.gif); /* helps IE */ -webkit-tap-highlight-color: rgba(0,0,0,0); z-index: 8040; } .fancybox-prev { left: 0; } .fancybox-next { rightright: 0; } .fancybox-nav span { position: absolute; top: 50%; width: 30px; height: 30px; margin-top: -18px; cursor: pointer; z-index: 8040; visibility: hidden; } .fancybox-nav .be { font-size: 30px !important; } .fancybox-prev span { left: 10px; } .fancybox-next span { rightright: 10px; } .fancybox-nav:hover span { visibility: visible; } .fancybox-tmp { position: absolute; top: -99999px; left: -99999px; visibility: hidden; max-width: 99999px; max-height: 99999px; overflow: visible !important; } .fancybox-overlay { position: absolute; top: 0; left: 0; overflow: hidden; display: none; z-index: 8010; background: url(img/fancy.png); } .fancybox-overlay-fixed { position: fixed; bottombottom: 0; rightright: 0; } .fancybox-overlay { overflow: auto; overflow-y: scroll; } #fancybox-buttons { position: fixed; left: 0; width: 100%; z-index: 8050; } #fancybox-buttons.top { top: 10px; } #fancybox-buttons.bottombottom { bottombottom: 10px; } #fancybox-buttons ul { background: #000; background: rgba(0, 0, 0, 0.1); display: block; width: 177px; height: 31px; margin: 0 auto; border: 1px solid #999; border-radius: 2px; } #fancybox-buttons ul li { float: left; margin: 0; padding: 0; } #fancybox-buttons a { display: block; color: #fff; width: 35px; height: 30px; line-height: 30px; text-align: center; outline: none; } #fancybox-buttons a:hover { color: #04a4cc; } #fancybox-buttons .be { font-size: 15px !important; } #fancybox-buttons .be-arrowright { border-right: 1px solid #999; } #fancybox-buttons .be-cross { border-left: 1px solid #999; } .btnDisabled { cursor: default; opacity: 0.4; filter: alpha(opacity=40); } .icon-fancy-close { position: absolute; top: -20px; rightright: -20px; width: 24px; height: 24px; color: #e50000; font-size: 18px; line-height: 24px; cursor: pointer; } .fancybox-close { position: absolute; background: #cf0000; top: -25px; rightright: 0; color: #fff; padding: 0 8px; border-radius: 5px 5px 0 0; } .fancybox-close:hover { color: #ccc; }
修改成以下
/** 喜欢分享 **/ #social { position: relative; margin: 50px auto; } .social-main { position: relative; margin: 0 auto; width: 243px; } .social-main span { float: left; } .social-main a { color: #fff; line-height: 36px; border-radius: 40px; } .share-s a, .shang-s a { text-align: center; } .like a { float: left; padding-left: 15px; } .social-main a:hover { background: #696969; color: #fff; transition: all 0.2s ease-in 0s; } .like a { background: #FF0000; width: 120px; display: block; border: 1px solid #ddd; } .share-s a { background: #0000FF; width: 120px; display: block; padding-left: 15px; border: 1px solid #ddd; } .social-main i { color: #fff; margin: 0 5px 0 0; } /** 赏 **/ .shang-empty { position: absolute; left: 90px; top: 0px; width: 62px; height: 38px; overflow: hidden; } .shang-empty span { background: #fff; width: 60px; height: 60px; display: block; margin: -10px 0 0 0; border-radius: 60px; border: 1px solid #ddd; } .shang-p a { position: absolute; background: #ffab2e; left: 96px; top: -5px; width: 48px; height: 48px; font-size: 16px; line-height: 45px; display: block; border: 1px solid #ddd; border-radius: 40px; left: 101px\9; top: 0\9; width: 38px\9; height: 38px\9; line-height: 35px\9; } .shang-s { height: 37px; } #shang { width: 280px; display: block; } .shang-img { float: left; } .shang-img img { width: 140px; height: auto; } .shang-main h4 { font-size: 15px; font-size: 1.5rem; text-align: center; margin-bottom: 10px; } .shang-main i { color: #ff0000; } /** 分享 **/ #share { position: absolute; top: -60px; rightright: -29px; width: 302px; height: 68px; display: none; z-index: 999; } #share a { float: left; background: #999; font-size: 20px color: #fff; width: 40px; height: 40px; line-height: 40px; margin-left: 4px; padding-left: 0; text-align: center; border-radius: 20px; background: rgba(128, 128, 128, 0.9); } #share .be-addbox { color: #7ab951; border: 1px solid #7ab951; background: #fff; } #share .be-addbox:hover { background: #7ab951 !important; color: #fff !important; } #share .be-qzone { color: #ff7400; border: 1px solid #ff7400; background: #fff; } #share .be-qzone:hover { background: #ff7400 !important; color: #fff !important; } #share .be-stsina { color: red; border: 1px solid red; background: #fff; } #share .be-stsina:hover { background: #ff0000 !important; color: #fff !important; } #share .be-tqq { color: #46c0e6; border: 1px solid #46c0e6; background: #fff; } #share .be-tqq:hover { background: #46c0e6 !important; color: #fff !important; } #share .be-renren { color: #3b68ac; border: 1px solid #3b68ac; background: #fff; } #share .be-renren:hover { background: #3b68ac !important; color: #fff !important; } #share .be-weixin { color: #006f1d; border: 1px solid #006f1d; background: #fff; } #share .be-weixin:hover { background: #00ff43 !important; color: #fff !important; } .bd_weixin_popup { height: 250px !important; } .bd_weixin_popup_foot { display: none; } /** 弹窗 **/ .fancybox-wrap { position: absolute; top: 0; left: 0; z-index: 8020; } .fancybox-skin { position: relative; background: #fff; color: #444; text-shadow: none; border-radius: 4px; } .fancybox-opened { z-index: 8030; } .fancybox-opened .fancybox-skin { box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5); } .fancybox-outer, .fancybox-inner { position: relative; } .fancybox-inner { overflow: hidden; } .fancybox-error { padding: 30px; whitewhite-space: nowrap; } .fancybox-image, .fancybox-iframe { display: block; width: 100%; height: 100%; } .fancybox-image { max-width: 100%; max-height: 100%; } #fancybox-loading { position: fixed; top: 50%; left: 50%; margin: -22px 0 0 -22px; z-index: 8060; } #fancybox-loading div { width: 79px; height: 10px; background: url(img/infinite.gif) center center no-repeat; } .fancybox-nav { position: absolute; top: 0; width: 45%; height: 100%; cursor: pointer; background: transparent url(img/blank.gif); /* helps IE */ -webkit-tap-highlight-color: rgba(0,0,0,0); z-index: 8040; } .fancybox-prev { left: 0; } .fancybox-next { rightright: 0; } .fancybox-nav span { position: absolute; font-size: 30px; top: 50%; width: 30px; height: 30px; margin-top: -18px; cursor: pointer; z-index: 8040; visibility: hidden; } .fancybox-prev span { left: 10px; } .fancybox-next span { rightright: 10px; } .fancybox-nav:hover span { visibility: visible; } .fancybox-tmp { position: absolute; top: -99999px; left: -99999px; visibility: hidden; max-width: 99999px; max-height: 99999px; overflow: visible !important; } .fancybox-overlay { position: absolute; top: 0; left: 0; overflow: hidden; display: none; z-index: 8010; background: url(img/fancy.png); } .fancybox-overlay-fixed { position: fixed; bottombottom: 0; rightright: 0; } .fancybox-overlay { overflow: auto; overflow-y: scroll; } #fancybox-buttons { position: fixed; left: 0; width: 100%; z-index: 8050; } #fancybox-buttons.top { top: 10px; } #fancybox-buttons.bottombottom { bottombottom: 10px; } #fancybox-buttons ul { background: #000; background: rgba(0, 0, 0, 0.1); display: block; width: 177px; height: 31px; margin: 0 auto; border: 1px solid #999; border-radius: 8px; } #fancybox-buttons ul li { float: left; margin: 0; padding: 0; } #fancybox-buttons a { display: block; font-size: 20px; color: #fff; width: 35px; height: 30px; line-height: 30px; text-align: center; outline: none; } #fancybox-buttons a:hover { color: #04a4cc; } #fancybox-buttons .be-arrowright { border-right: 1px solid #999; } #fancybox-buttons .be-cross { border-left: 1px solid #999; } .btnDisabled { cursor: default; opacity: 0.4; filter: alpha(opacity=40); } .icon-fancy-close { position: absolute; top: -20px; rightright: -20px; width: 24px; height: 24px; color: #e50000; font-size: 18px; line-height: 24px; cursor: pointer; } .fancybox-close { position: absolute; background: #cf0000; top: -25px; rightright: 0; color: #fff; padding: 0 8px; border-radius: 5px 5px 0 0; } .fancybox-close:hover { color: #ccc; }
美化后的效果图
WordPress开启CDN后评论失败怎么办?
WordPress 博客如果将静态资源如 JS 文件等采用 CDN 加速的话,一般都会出现评论不成功的情况,这是因为评论时所获取的 commonts-ajax.js 路径不正确导致,所以解决的办法有两个:
方法一:在 CDN 中设置不缓存 commonts-ajax.js 文件即可;
方法二:修改 commonts-ajax.js 文件,打开当前主题所使用的 commonts-ajax.js 文件,找到以下代码:
var i = 0, got = -1, len = document.getElementsByTagName('script').length; while ( i <= len && got == -1){ var js_url = document.getElementsByTagName('script')[i].src, got = js_url.indexOf('comments-ajax.js'); i++ ; }
在后面添加一句
js_url = js_url.replace('res.yigujin.cn','www.yigujin.cn');
变成
var i = 0, got = -1, len = document.getElementsByTagName('script').length; while ( i <= len && got == -1){ var js_url = document.getElementsByTagName('script')[i].src, got = js_url.indexOf('comments-ajax.js'); i++ ; } js_url = js_url.replace('res.yigujin.cn','www.yigujin.cn');
保存好文件并刷新该文件的缓存后即可解决评论失败的问题。如果 CDN 的域名不唯一经常变动,那么可以直接把前面那段代码改成:
var i = 0, got = -1, len = document.getElementsByTagName('script').length; while ( i <= len && got == -1){ var js_url = document.getElementsByTagName('script')[i].src, got = js_url.indexOf('comments-ajax.js'); i++ ; var dm = js_url.match(/http:\/\/([^\/]+)\//i); js_url = js_url.replace(dm[1],'www.yigujin.cn'); }
其中 a.yigujin.cn 就是所谓的 CDN 地址,www.yigujin.cn 是站点地址,记得修改成自己的地址哦。
知更鸟begin主题公告美化-面包屑导航样式美化记录
把以下css代码添加到主题的自定义样式就OK
.breadcrumb{border-width:1px; background-color:rgb(255, 255, 255); margin-Bottom:5px;border-radius:2px;margin-top:5px;}