WordPress-本站主题修改记录-清秋blog

2017年11月30日 22.75k 次阅读 117 条评论

发篇文章记录一下主题修改和添加的地方,防止以后出现问题找不到原因。陆续补充中哦…

如果有什么疏漏,希望发现问题的朋友可以留言感知一下哟 ( ̄▽ ̄)好人一生平安

网站加抖动文字特效[目前已取消]

网站加抖动文字特效

下面是文字抖动特效演示 

网站抖动文字特效

使用技巧: 网站加抖动文字特效-wp添加主题style.css

编辑器插入代码加在你想出现效果的位置:

#div class="shaky"想说的话<#/div#    把里面的#换成<>

抖动代码:

.shaky { display: inline-block; padding: 1px; font-size: 12px; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-animation-name: shaky-slow; -ms-animation-name: shaky-slow; animation-name: shaky-slow; -webkit-animation-duration: 4s; -ms-animation-duration: 4s; animation-duration: 4s; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes shaky-slow { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg) } 2% { -webkit-transform: translate(-1px, 1.5px) rotate(1.5deg) } 4% { -webkit-transform: translate(1.3px, 0px) rotate(-0.5deg) } 6% { -webkit-transform: translate(1.4px, 1.4px) rotate(-2deg) } 8% { -webkit-transform: translate(-1.3px, -1px) rotate(-1.5deg) } 10% { -webkit-transform: translate(1.4px, 0px) rotate(-2deg) } 12% { -webkit-transform: translate(-1.3px, -1px) rotate(-2deg) } 14% { -webkit-transform: translate(1.5px, 1.3px) rotate(1.5deg) } 16% { -webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg) } 18% { -webkit-transform: translate(1.3px, -1.3px) rotate(-2deg) } 20% { -webkit-transform: translate(1px, 1px) rotate(-0.5deg) } 22% { -webkit-transform: translate(1.3px, 1.5px) rotate(-2deg) } 24% { -webkit-transform: translate(-1.4px, -1px) rotate(2deg) } 26% { -webkit-transform: translate(1.3px, -1.3px) rotate(0.5deg) } 28% { -webkit-transform: translate(1.6px, -1.6px) rotate(-2deg) } 30% { -webkit-transform: translate(-1.3px, -1.3px) rotate(-1.5deg) } 32% { -webkit-transform: translate(-1px, 0px) rotate(2deg) } 34% { -webkit-transform: translate(1.3px, 1.3px) rotate(-0.5deg) } 36% { -webkit-transform: translate(1.3px, 1.6px) rotate(1.5deg) } 38% { -webkit-transform: translate(1.3px, -1.6px) rotate(1.5deg) } 40% { -webkit-transform: translate(-1.4px, -1px) rotate(-0.5deg) } 42% { -webkit-transform: translate(-1.4px, 1.3px) rotate(-0.5deg) } 44% { -webkit-transform: translate(-1.6px, 1.4px) rotate(0.5deg) } 46% { -webkit-transform: translate(-2.1px, -1.3px) rotate(-0.5deg) } 48% { -webkit-transform: translate(1px, 1.6px) rotate(1.5deg) } 50% { -webkit-transform: translate(1.6px, 1.6px) rotate(1.5deg) } 52% { -webkit-transform: translate(-1.4px, 1.6px) rotate(0.5deg) } 54% { -webkit-transform: translate(1.6px, -1px) rotate(-2deg) } 56% { -webkit-transform: translate(1.3px, -1.6px) rotate(-2deg) } 58% { -webkit-transform: translate(-1.3px, -1.6px) rotate(0.5deg) } 60% { -webkit-transform: translate(1.3px, 1.6px) rotate(-0.5deg) } 62% { -webkit-transform: translate(0px, 0px) rotate(-1.5deg) } 64% { -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg) } 66% { -webkit-transform: translate(1.6px, -1.6px) rotate(0.5deg) } 68% { -webkit-transform: translate(0px, -1.6px) rotate(-2deg) } 70% { -webkit-transform: translate(-1.6px, 1px) rotate(1.5deg) } 72% { -webkit-transform: translate(-1.6px, 1.6px) rotate(2deg) } 74% { -webkit-transform: translate(1.3px, -1.6px) rotate(-0.5deg) } 76% { -webkit-transform: translate(1.4px, 1px) rotate(-0.5deg) } 78% { -webkit-transform: translate(-1px, 1.4px) rotate(2deg) } 80% { -webkit-transform: translate(1.4px, 1.6px) rotate(2deg) } 82% { -webkit-transform: translate(-1.6px, -1.6px) rotate(-0.5deg) } 84% { -webkit-transform: translate(-1.4px, 1.4px) rotate(-2deg) } 86% { -webkit-transform: translate(1px, 1.4px) rotate(-2deg) } 88% { -webkit-transform: translate(-1.4px, 1.4px) rotate(-1.5deg) } 90% { -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg) } 92% { -webkit-transform: translate(-1.6px, 1.6px) rotate(2deg) } 94% { -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg) } 96% { -webkit-transform: translate(-1.4px, 1.3px) rotate(-2deg) } 98% { -webkit-transform: translate(1.3px, 1px) rotate(-0.5deg) } } @keyframes shaky-slow { 0% { transform: translate(0px, 0px) rotate(0deg) } 2% { transform: translate(-1px, 1.5px) rotate(1.5deg) } 4% { transform: translate(1.3px, 0px) rotate(-0.5deg) } 6% { transform: translate(1.4px, 1.4px) rotate(-2deg) } 8% { transform: translate(-1.3px, -1px) rotate(-1.5deg) } 10% { transform: translate(1.4px, 0px) rotate(-2deg) } 12% { transform: translate(-1.3px, -1px) rotate(-2deg) } 14% { transform: translate(1.5px, 1.3px) rotate(1.5deg) } 16% { transform: translate(1.5px, -1.5px) rotate(-1.5deg) } 18% { transform: translate(1.3px, -1.3px) rotate(-2deg) } 20% { transform: translate(1px, 1px) rotate(-0.5deg) } 22% { transform: translate(1.3px, 1.5px) rotate(-2deg) } 24% { transform: translate(-1.4px, -1px) rotate(2deg) } 26% { transform: translate(1.3px, -1.3px) rotate(0.5deg) } 28% { transform: translate(1.6px, -1.6px) rotate(-1.5deg) } 30% { transform: translate(-1.3px, -1.3px) rotate(-1.5deg) } 32% { transform: translate(-1px, 0px) rotate(2deg) } 34% { transform: translate(1.3px, 1.3px) rotate(-0.5deg) } 36% { transform: translate(1.3px, 1.6px) rotate(1.5deg) } 38% { transform: translate(1.3px, -1.6px) rotate(1.5deg) } 40% { transform: translate(-1.4px, -1px) rotate(-0.5deg) } 42% { transform: translate(-1.4px, 1.3px) rotate(-0.5deg) } 44% { transform: translate(-1.6px, 1.4px) rotate(0.5deg) } 46% { transform: translate(-2.1px, -1.3px) rotate(-0.5deg) } 48% { transform: translate(1px, 1.6px) rotate(1.5deg) } 50% { transform: translate(1.6px, 1.6px) rotate(1.5deg) } 52% { transform: translate(-1.4px, 1.6px) rotate(0.5deg) } 54% { transform: translate(1.6px, -1px) rotate(-2deg) } 56% { transform: translate(1.3px, -1.6px) rotate(-2deg) } 58% { transform: translate(-1.3px, -1.6px) rotate(0.5deg) } 60% { transform: translate(1.3px, 1.6px) rotate(-0.5deg) } 62% { transform: translate(0px, 0px) rotate(-1.5deg) } 64% { transform: translate(-1.6px, -1.6px) rotate(-2deg) } 66% { transform: translate(1.6px, -1.6px) rotate(0.5deg) } 68% { transform: translate(0px, -1.6px) rotate(-2deg) } 70% { transform: translate(-1.6px, 1px) rotate(1.5deg) } 72% { transform: translate(-1.6px, 1.6px) rotate(2deg) } 74% { transform: translate(1.3px, -1.6px) rotate(-0.5deg) } 76% { transform: translate(1.4px, 1px) rotate(-0.5deg) } 78% { transform: translate(-1px, 1.4px) rotate(2deg) } 80% { transform: translate(1.4px, 1.6px) rotate(2deg) } 82% { transform: translate(-1.6px, -1.6px) rotate(-0.5deg) } 84% { transform: translate(-1.4px, 1.4px) rotate(-2deg) } 86% { transform: translate(1px, 1.4px) rotate(-2deg) } 88% { transform: translate(-1.4px, 1.4px) rotate(-1.5deg) } 90% { transform: translate(-1.6px, -1.6px) rotate(-2deg) } 92% { transform: translate(-1.4px, 1.6px) rotate(2deg) } 94% { transform: translate(-1.6px, -1.6px) rotate(-2deg) } 96% { transform: translate(-1.4px, 1.3px) rotate(-2deg) } 98% { transform: translate(1.3px, 1px)

 

更新二:烟花点击特效[目前已取消]

下面代码插入到主题页脚

下面代码插入到主题页脚(footer.php)里面即可

[mark]<script type="text/javascript" src="https://haremu.com/wp-content/themes/Siren/OwO/meme.js"></script>
<!-- Click the effect -->
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 99999999; pointer-events: none;" ></canvas>
<script type="text/javascript" src="https://cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
<script type="text/javascript" src="https://haremu.com/wp-content/themes/Siren/js/fireworks.js"></script>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js">
<script src="//cdn.bootcss.com/jquery.pjax/1.9.6/jquery.pjax.min.js">
<script>[/mark]

 

更新三:更换博客评论表情包

由原来的emoji表情更换到emoji-Q版表情

 

 

更新四:全站链接新建标签页打开代码

代码如下

在主题header.php的<head></header>之间添加如下代码:

<base target="_blank">即可。

具体文章参照:百度经验

打开效果可以参考本页面或者其他站内链接

 

更新五:给图片和图片所在的div添加css样式

代码如下

这种方法一劳永逸,而且不仅适用于图片,还适用于卡片。

①用浏览器打开网页,F12审查元素,找到想添加特效的图片或卡片所在的div和其css属性名称!

②在浏览器中添加代码,预览效果。

③在源代码中添加代码!

所有边框圆角10个像素:border-radius: 10px;

左上部边框圆角10个像素:border-top-left-radius: 10px;

右上部边框圆角10个像素:border-top-right-radius: 10px;

左下部边框圆角10个像素:border-bottom-left-radius: 10px;

右下部边框圆角10个像素:border-bottom-right-radius: 10px

 

更新六:添加文章内容有更新提示

代码如下

将下面的代码添加到(functions.php)中
/**
文章内容有更新提示

*/
function is_modified(){

global $post;
$punish_time = get_the_date('U');
$modified_time = get_the_modified_date('U');
$time = time();
if( ( $modified_time > $punish_time) && ( $time - $modified_time < 3600*24*7 ) )
return true;

将下面的代码添加到:content.php

<?php if( is_modified() ) : ?> 本文内容有更新<?php endif;?>

双流小程 2018-1-31 13:12:49
<?php if( is_modified() ) : ?><i class="fa fa-heart"></i> 有更新<?php endif;?>

 

更新七:添加OwO表情包

将文件解压至主题根目录

 owo            点击名称下载文件即可

将文件解压至inc文件里

 OwO.json          点击名称下载文件即可   

在Comments(comments.php)

中添加已下代码

<script src="<?php bloginfo('template_directory'); ?>/owo/OwO.min.js "></script>
<script>
var OwO_demo = new OwO({
logo: 'OωO表情',
container: document.getElementsByClassName('OwO')[0],
target: document.getElementsByClassName('OwO')[0],
api: '<?php echo get_stylesheet_directory_uri();?>/inc/OwO.json',
position: 'down',
width: '90%',
maxHeight: '250px'
});
function grin(tag) {
var myField;
tag = ' ' + tag + ' ';
if (document.getElementById('comment') && document.getElementById('comment').type == 'textarea') {
myField = document.getElementById('comment');
} else {
return false;
}
if (document.selection) {
myField.focus();
sel = document.selection.createRange();
sel.text = tag;
myField.focus();
} else if (myField.selectionStart || myField.selectionStart == '0') {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
var cursorPos = endPos;
myField.value = myField.value.substring(0, startPos)
+ tag
+ myField.value.substring(endPos, myField.value.length);
cursorPos += tag.length;
myField.focus();
myField.selectionStart = cursorPos;
myField.selectionEnd = cursorPos;
var owoopen = document.getElementsByClassName('OwO OwO-open')[0];
owoopen.className = "OwO";
} else {
myField.value += tag;
myField.focus();
}
}
</script>

插入引入代码

在<div class="OwO"></div>

引入CSS代码

<link href="<?php bloginfo('template_directory'); ?>/owo/OwO.min.css" rel="stylesheet" type="text/css" />

在编辑器中插入OwO表情

在Post.php加入

/**
* 文章评论表情
*/
add_filter('smilies_src','custom_smilies_src',1,10);
function custom_smilies_src ($img_src, $img, $siteurl){
return get_bloginfo('template_directory').'/images/smilies/'.$img;
}
function disable_emojis_tinymce( $plugins ) {
return array_diff( $plugins, array( 'wpemoji' ) );
}
function smilies_reset() {
global $wpsmiliestrans, $wp_smiliessearch, $wp_version;
if ( !get_option( 'use_smilies' ) || $wp_version < 4.2)
return;
$wpsmiliestrans = array(
':hehe:' => 'hehe.png',
':haha:' => 'haha.png',
':tushe:' => 'tushe.png',
':a:' => 'a.png',
':ku:' => 'ku.png',
':nu:' => 'nu.png',
':kaixin:' => 'kaixin.png',
':han:' => 'han.png',
':lei:' => 'lei.png',
':heixian:' => 'heixian.png',
':bishi:' => 'bishi.png',
':bugaoxing:' => 'bugaoxing.png',
':zhenbang:' => 'zhenbang.png',
':qian:' => 'qian.png',
':yiwen:' => 'yiwen.png',
':yinxian:' => 'yinxian.png',
':tu:' => 'tu.png',
':yi:' => 'yi.png',
':weiqv:' => 'weiqv.png',
':huaxin:' => 'huaxin.png',
':hu:' => 'hu.png',
':xiaoyan:' => 'xiaoyan.png',
':leng:' => 'leng.png',
':taikaixin:' => 'taikaixin.png',
':huaji:' => 'huaji.png',
':huaji2:' => 'huaji2.png',
':huaji3:' => 'huaji3.gif',
':huaji4:' => 'huaji4.png',
':huaji5:' => 'huaji5.gif',
':huaji6:' => 'huaji6.png',
':huaji7:' => 'huaji7.png',
':huaji8:' => 'huaji8.png',
':huaji9:' => 'huaji9.png',
':huaji10:' => 'huaji10.png',
':huaji11:' => 'huaji11.png',
':huaji12:' => 'huaji12.png',
':huaji13:' => 'huaji13.png',
':huaji14:' => 'huaji14.png',
':huaji15:' => 'huaji15.png',
':huaji16:' => 'huaji16.gif',
':huaji17:' => 'huaji17.png',
':huaji18:' => 'huaji18.png',
':huaji19:' => 'huaji19.png',
':huaji20:' => 'huaji20.gif',
':huaji21:' => 'huaji21.gif',
':huaji22:' => 'huaji22.png',
':huaji23:' => 'huaji23.png',
':huaji01:' => 'huaji01.gif',
':mianqiang:' => 'mianqiang.png',
':kuanghan:' => 'kuanghan.png',
':guai:' => 'guai.png',
':shuijiao:' => 'shuijiao.png',
':jingku:' => 'jingku.png',
':shengqi:' => 'shengqi.png',
':jingya:' => 'jingya.png',
':pen:' => 'pen.png',
':aixin:' => 'aixin.png',
':xinsui:' => 'xinsui.png',
':meigui:' => 'meigui.png',
':liwu:' => 'liwu.png',
':caihong:' => 'caihong.png',
':xxyl:' => 'xxyl.png',
':sun:' => 'sun.png',
':money:' => 'money.png',
':bulb:' => 'bulb.png',
':cup:' => 'cup.png',
':cake:' => 'cake.png',
':music:' => 'music.png',
':haha2:' => 'haha2.png',
':win:' => 'win.png',
':good:' => 'good.png',
':bad:' => 'bad.png',
':ok:' => 'ok.png',
':huaji01:' => 'huaji01.gif',

);
}
smilies_reset();

效果展示

在维应小哥哥的热心指导下,成功添加OwO表情,在这里特别感谢一下@维应

更新八:添加首页新样式

插到index.php里

根据需求自己修改链接

<style>
.kratos-cover {background-size:cover;position:relative;background-position:center center}
.kratos-cover.kratos-cover_2 {height:240px}
.kratos-cover .desc {padding-left:15px;padding-right:15px}
.kratos-cover .desc2 {margin-top:-25px}
.kratos-cover .desc h2 {font-size:30px;font-weight:200}
.kratos-cover .desc p,.kratos-cover .desc span {font-size:21px}
.kratos-cover .desc {top:50%;position:absolute;width:100%;margin-top:0px;z-index:2;color:#fff;}
.kratos-cover .desc h2 {color:#000;text-transform:none;font-size:30px;margin-bottom:10px;display:inline-block;text-shadow:0 0 0.2em #fff,-0 -0 0.2em #fff;}
.kratos-cover .desc span {color:#000;margin-bottom:30px;font-size:15px;letter-spacing:1px;display:inline-block;font-weight: 400;text-shadow:0 0 0.2em #fff,-0 -0 0.2em #fff;}
.touxiang{height:100px;width:100px; margin:0 auto; margin-top:50px; border-radius:50%;text-shadow:0px 0px 6px #fff;}
.touxiang img{height:100px; width:100px; border-radius:50%;  -webkit-transition:-webkit-transform 1s;border: 2px solid #000;}
.touxiang img:hover{-webkit-transform:rotate(360deg);box-shadow:0 0 8px #000;}
</style><div class="kratos-cover kratos-cover_2 text-center">
<div class="touxiang">
<img src="https://s1.ax2x.com/2018/01/02/Qa72a.jpg"></div>
<div class="desc desc2 animate-box fadeInUp animated"><a href="https://blog.zwying.com">
<h2>纸 莺 鸢 梦</h2>
<br>
<span>A plant may produce new flowers; man is young but once.</span>
</a>
</div>
</div>

效果展示

评论框添加网站链接

'url' => '<div class="col-md-6">
<label class="sr-only">url</label>
<div class="input-group mb-md-0 mt-2">
<div class="input-group-addon">
<i class="ravenclaw v3-links"></i>
</div>
<input type="text" class="form-control" placeholder="网站(站长选填)" id="url" name="url" value="'. esc_attr( $commenter['comment_author_url'] ) .'">
</div>
</div>',


更新九:添加网站背景图片代码

添加网站背景图片代码粘贴到样式表中

body {
background-image: url(http://odsacbjyv.bkt.clouddn.com/a15b4afely1fnvca1zz4ij211h0p17bb.jpg
);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

更新十:首页和文章侧边栏添加了阿里云云大使优惠劵

图片链接

https://i.loli.net/2018/03/03/5a9a6553deea6.png

https://promotion.aliyun.com/ntms/act/ambassador/sharetouser.html?userCode=wyxevc79&utm_source=wyxevc79

伪·更新十

更改小工具名称

更新十一:彻底禁止wordpress自动裁剪缩略图功能

代码如诗

然后打开WordPress上帝模式(/wp-admin/options.php),Ctrl+F搜索medium_large_size_w ,将其值改为 0

//彻底禁止WordPress缩略图
add_filter( 'add_image_size', create_function( '', 'return 1;' ) );


更新十二:删除评论框底部主题自带表情

删除主题自带表情

主题第40行找到comment-smilies mt-2然后删除

更新十三:删除导航菜单Fon图标

删除导航菜单

首页:i classfa fa-home aria-hiddentruei left 0px

博客:i classfa fa-wordpress aria-hiddentruei fa-spin

QQ:fa fa-qq fa-cog

福利:fa fa-share-alt-square fa-spin

更新十四:导航栏透明

PC端移动端导航栏显示透明效果

主题文件目录

ravenclaw.min.css (css/ravenclaw.min.css)

第126行为PC端

.ravenclaw-nav{position:fixed;top:0;right:0;left:0;z-index:1070;padding:1.2rem 0;background: rgba(17, 17, 17, 0.68);}

第174行为移动端

@media screen and (max-width:768px){.ravenclaw-nav{padding:.8rem 0;background: rgba(17, 17, 17, 0.77);}

清秋暖冬

本该吃苦的年纪怎么选择安逸

  1. 大白说道:

    Kraots主题,请问一下,那个更换背景图片,只需要在style.css里面添加那些代码就可以了吗?我添加了那些代码还是不行,背景并没有改变 :cry: :guai: 还需要修改什么地方啊

    1. 清秋暖冬说道:

      在主题设置里有站点配置里有一个背景颜色,把背景颜色改一下就显示图片了

      1. 大白说道:

        可是他一直优先显示的背景是颜色,而不是背景图片,背景颜色怎么关或者应该设置为什么值 :weiqv:

      2. 大白说道:

        解决了,谢谢大佬 :lol:

  2. 煮只鸡说道:

    不错不错,三击666 :mrgreen: