wordpress添加打字烟花特效和wordpress美化的几个小技巧 | 芊芊精典-亚博电竞官方网址

摘要

wordpress添加打字烟花特效

今天，有人在问本站的打字特效怎么弄的，现在把代码贴出来共享。

一、首先新建一个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)p0}}{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的body前加上下面的代码保存就可以了。

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;
	}
	?>
	
权限设置
	

	

		
禁止用户登录
		
 /> 请谨慎操作，选中则禁止！
	
	
	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:  center center no-repeat;
}
.fancybox-nav {
    position: absolute;
    top: 0;
    width: 45%;
    height: 100%;
    cursor: pointer;
    background: transparent ;
 /* 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: ;
}
.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:  center center no-repeat;
}
.fancybox-nav {
    position: absolute;
    top: 0;
    width: 45%;
    height: 100%;
    cursor: pointer;
    background: transparent ;
 /* 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: ;
}
.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;}