博客折腾美化过程全记录及实用技巧

发布时间：

博客折腾美化过程全记录及实用技巧

知更鸟Begin主题，从开始建站就在使用 博客折腾美化过程全记录及实用技巧 。不过那时候用的还是破解版。因为一开始建站，作为一名小菜虫，什么都不懂，就从破解版下了手。其实，到现在，也还是一事无成，没整明白 博客折腾美化过程全记录及实用技巧 。随着建站的深入与细化，就换成正版主题，也是对“鸟哥”的一种支持。这个主题一直在更新，很多朋友都在使用这个主题。期间，星光站长也尝试换用了其他版本的各类Wordpress主题。这类主题的突出点就是主题特点鲜明，极具观赏感。相比之下，Begin主题就显得有点平淡了，暗灰色系一撸到底 博客折腾美化过程全记录及实用技巧 。但是，这类主题的功能有点差强人意，体验后感觉不是那么很爽。最后，换来换去，还是又回到了知更鸟主题，毕竟咱是正统之版。站长是一个强迫症与完美主义患者，回到知更鸟后就开始了美化与扒代码的折腾之旅，并始终牢记毛爷爷的“自己动手，丰衣足食”。向被我扒过的各位站长一并表示感谢 博客折腾美化过程全记录及实用技巧 。从他们那里学到了好多细节的美化与修改。在此，分享给像我一样的小白们使用。

博客折腾美化过程全记录及实用技巧

1、网站空间与域名之折腾

展开隐藏

昨天，阿里云域名、独享虚拟主机备案成功。我是首次备案用了18天，都说山东备案速度慢，自我感觉是还能接受吧。其实，备案挺简单的，一路下来按照要求填写就可以了。我是从一开始的黑群晖NAS自建服务器，因443端口被封而转战到老薛香港主机，再到后来的阿里云独享虚拟主机，小白一路摸索而来，感慨颇多，网站前前后后重做了好多次，自己都记不清次数了。首先，自建服务器，用着不错，存储空间够大，可惜使用了不足半月，因为“19d”的召开，443被运营商给封锁了。没办法，网站建设正在开始阶段，兴头之上呢，急速之下，转战到了老薛主机。我选择的是“香港2号”主机，因为自己优化不够，总感觉有点“卡”。一怒之下，直接购买了阿里云的“独享虚拟主机”，就开始了漫长的等待中。好在在预期之中完成了备案，剩下的就是欢快的建站路程了。有时间再写点，太困了，睡觉去。。。

其余记录，在“发展历程”中有详细说明。

2、关于本站四个联系图标美化

效果及操作步骤，请查看：知更鸟主题“关于本站–微信、QQ、微博、订阅”四个图标美化

3、关于本站头像居中添加背景美化

效果及操作步骤，请查看：知更鸟主题“关于本站”小工具头像的居中布局美化

4、头部显示日期与问候语

效果及操作步骤，请查看：WordPress顶部显示问候语和日期的完美解决方法

5、为评论框添加背景图片

效果及操作步骤，请查看：让评论框不再单调，为评论框添加背景图片

6、热门标签固定与凌乱显示

效果及操作步骤，请查看：WordPress修改右侧边栏彩色标签为固定显示

7、使用阿里云图标方法

效果及操作步骤，请查看：WordPress知更鸟主题使用阿里云图标方法

8、面包屑导航栏美化

效果及操作步骤，请查看：知更鸟begin主题面包屑导航栏美化

9、自定义鼠标指针样式

效果及操作步骤，请查看：WordPress博客自定义鼠标指针样式

10、评论前三名“沙发 板凳 地板”添加背景色

效果及操作步骤，请查看：美化评论“沙发 板凳 地板”添加背景色

11、文章中插入表情图

效果及操作步骤，请查看：WordPress在文章中插入表情图，实现丰富多彩效果

12、文章中增加彩色边框

效果及操作步骤，请查看：WordPress文章编辑器增加彩色边框代码

13、页脚添加查询耗时自定语

效果及操作步骤，请查看：知更鸟主题页脚添加查询耗时及自定语代码

14、后台登陆失败邮件提醒

效果及操作步骤，请查看：WordPress登陆失败自动发送邮件提醒

15、有新评论微信提醒管理员

效果及操作步骤，请查看：WordPress有新评论微信提醒管理员

16、侧边栏显示自定义滚动问候语

效果及操作步骤，请查看：一段自定义滚动显示问候语代码

17、后台登录页面添加运算验证码

效果及操作步骤，请查看：为你的博客用户登录页面添加十以内运算验证码

18、折叠时光轴记录网站发展

效果及操作步骤，请查看：使用折叠功能的时光轴记录网站发展历程

19、网站优化之Robots.txt优化

效果及操作步骤，请查看：利用Robots.txt优化你的WordPress站点

20、虚拟主机无法发送邮件解决办法

效果及操作步骤，请查看：WordPress使用阿里云主机无法发送邮件问题的解决办法

21、顶部导航菜单两种美化方法

效果如图：博客折腾美化过程全记录及实用技巧

展开隐藏

第一种，整体渐变背景色：打开Style.css，查找 #top-header（最新版主题是 #header-top），将背景色 background:#e7e7e7; 修改为

background:linear-gradient(-30deg,rgba(255, 213, 60, 0.71) 10%,rgba(161, 230, 243, 0.78)) no-repeat;

第二种，导航菜单背景颜色交替：第一步，先把css样式添加到外观→自定义→额外css里面，样式如下

  1. .mcnmq{background:#b485e2;color:#fff;padding:2px 8px;border-radius:2px}.mcnmw{background:#74d62f;color:#fff;padding:2px 8px;border-radius:2px}

第二步，在把调用代码到你想要添加的地方，如顶部导航菜单→菜单结构→导航标签里面。

  1. <span class="mcnmq"> 导航 </span>
  1. <span class="mcnmw"> 导航 </span>

注意：“mcnmq”和“mcnmw”要隔开用，否则出来的菜单效果就是一个颜色了。

22、页脚彩色滚动横条

博客折腾美化过程全记录及实用技巧

将下面的代码添加到style.css或外观→自定义样式里面。

  1. #footer-widget-box {
  2. background: #1d1626 url(https://wx2.sinaimg.cn/large/006VCrUsgy1fjmflwl7rog30ag004dfs.gif) repeat-x scroll 0 100%;
  3. }

23、导航菜单加大字体、间距

加大字体，将下面的代码添加到style.css或外观→自定义样式里面。

  1. #site-nav .down-menu li {
  2. font-size:15px;
  3. }

调整间距

  1. #site-nav .down-menu a {
  2. padding: 0 8px;
  3. }

24、首页布局添加蓝色边框CSS

  1. .post:hover, .tao-box:hover, .picture-box:hover, .picture-h:hover, .tab-site:hover, .cat-box:hover {
  2. border: 1px dashed #39c;
  3. }

25、给缩略图添加圆角及背影效果

  1. .thumbnail {
  2. border-radius: 6px;
  3. box-shadow: rgba(0,0,0,0.5) 3px 3px 3px;
  4. }

26、右下角滚屏按钮美化

效果及操作步骤，请查看：知更鸟Begin主题右下角滚屏快捷方式美化

27、侧边栏添加广告小工具

博客折腾美化过程全记录及实用技巧

小工具→增强文本，添加以下代码：

  1. <div style="position: relative;"><a href="https://www.xgboke.com" rel="nofollow" target="_blank" data-original-title="网吧无盘" title="网吧无盘"><img class=" aligncenter" src="https://www.xgboke.com/wp-content/uploads/2018/06/2018062408582789.jpg" alt="网吧无盘" style=" margin-left: 0px; padding: 1px;margin-bottom: 1px; border-radius: 4px;" width="360" height="120"></a><span style="position: absolute;bottom:-1px;right:-1px;"><img src="/wp-content/uploads/2018/06/2018062409142517.png"></span></div>

右下角“广告”二字，png格式 下载。

28、为评论功能增加字数限制

将下面的代码添加到当前主题的 functions.php 文件， 代码只对未登录用户的评论设置了限制。代码来源 龙笑天下

  1. /**
  2.  * 为WordPress评论功能增加字数长度限制 - 龙笑天下
  3.  * https://www.ilxtx.com/limit-wordpress-comment-length.html
  4.  */
  5. function lxtx_set_comments_length($commentdata) {
  6.     $minCommentlength = 5; //最少字數限制，建议设置为5-10个字
  7.     $maxCommentlength = 220; //最多字數限制，建议设置为150-200个字
  8.     $pointCommentlength = mb_strlen($commentdata['comment_content'],'UTF8'); //mb_strlen 一个中文字符当做一个长度
  9.     if ( ($pointCommentlength < $minCommentlength) && !is_user_logged_in() ){
  10.     err('抱歉，您的评论字数过少，最少输入' . $minCommentlength .'个字（目前字数：'. $pointCommentlength .'）【登录后无此限制】');
  11.     exit;
  12.     }
  13.     if ( ($pointCommentlength > $maxCommentlength) && !is_user_logged_in() ){
  14.     err('抱歉，您的评论字数过多，最多输入' . $maxCommentlength .'个字（目前字数：'. $pointCommentlength .'）【登录后无此限制】');
  15.     exit;
  16.     }
  17.     return $commentdata;
  18. }
  19. add_filter('preprocess_comment', 'lxtx_set_comments_length');

29、Tab组合分类改三列平分居中显示

效果如图：博客折腾美化过程全记录及实用技巧

在Style.css 中分别查找 .tab-hd-con 跟 .tab-hd .current，将 width: 100px 分别修改为 width: 33.3333333%

30、评论回复“@某人”时添加彩色背景边框

在Style.css 中查找 .at, .at a 及其代码，修改为以下：

  1. .at, .at a {
  2.     color: #fff;
  3.     font-size: 13px;
  4.     margin-right: 5px;
  5.     padding: 1px 5px;
  6.     background: #1abc9c;
  7.     border-radius: 3px;
  8. }

31、修复评论自动获取QQ昵称

依次打开主题页面/js/qq-info.php

第二十八行也就是$nameurl = "

全行替换为$nameurl = "http://users.qzone.qq.com/fcg-bin/cgi_get_portrait.fcg?uins=".$qq;

32、小工具中 1 2 3 序号修改颜色

博客折腾美化过程全记录及实用技巧

Style.css查找：

  1. /** 序号 **/
  2. .li-icon-1,
  3. .li-icon-2,
  4. .li-icon-3 {
  5.     background: #c40000;
  6. }

修改为：

  1. .li-icon-1 {
  2.     background: #c40000;
  3. }
  4. .li-icon-2 {
  5.     background: #0cf;
  6. }
  7. .li-icon-3 {
  8.     background: #03bf03;
  9. }

33、正文标题加底色修改

Style.css查找：

  1. /** 正文 **/
  2. .entry-header h1 {
  3.     position: relative;
  4.     font-size: 20px;
  5.     font-size: 2.0rem;
  6.     line-height: 30px;
  7.     text-align: center;
  8.     margin: 35px 0 0 0;
  9.     padding: 5px 0;
  10. }

修改为：

  1. .entry-header h1 {
  2.     position: relative;
  3.     font-size: 20px;
  4.     font-size: 1.8rem;
  5.     line-height: 30px;
  6.     text-align: center;
  7.     margin: 35px -20px 0 -20px;
  8.     padding: 5px 20px;
  9.     height: auto;
  10.     color: #fff;
  11.     text-transform: inherit;
  12.     background-color: #1ba1e2;
  13.     border-bottom: 1px solid #ddd;
  14. }

34、H2、H3（二、三级）标题加底色修改

效果如图

二级标题式样

三级标题式样

Style.css查找：

  1. /** 排版样式 **/
  2. .single-content h2 {
  3.     font-size: 17px;
  4.     font-size: 1.7rem;
  5.     line-height: 190%;
  6.     margin: 10px -21px;
  7.     padding: 0 44px;
  8.     border-left: 5px solid #e40000;
  9. }
  11. .single-content h3 {
  12.     font-size: 16px;
  13.     font-size: 1.6rem;
  14.     line-height: 190%;
  15.     margin: 2px -21px 10px -21px;
  16.     padding: 0 44px;
  17.     border-left: 5px solid #3690cf;
  18. }

修改为：

  1. .single-content h2 {
  2.     font-size: 17px;
  3.     font-size: 1.7rem;
  4.     line-height: 190%;
  5.     margin: 10px -20px;
  6.     padding: 0 44px;
  7.     border-left: 5px solid #e40000;
  8.   background-color: #ebebeb;
  9.     border-bottom: 1px solid #e40000;
  10. }
  12. .single-content h3 {
  13.     font-size: 16px;
  14.     font-size: 1.6rem;
  15.     line-height: 190%;
  16.     margin: 2px -20px 10px -20px;
  17.     padding: 0 44px;
  18.     border-left: 5px solid #3690cf;
  19.     background-color: #ebebeb;
  20.     border-bottom: 1px solid #3690cf;
  21. }

35、TAB组合小工具四栏改三栏

Style.css查找：

  1. /** TAB组合 **/
  2. .zm-tabs-nav a {
  3.     background: #f8f8f8;
  4.     float: left;
  5.     color: #999;
  6.     text-align: center;
  7.     width: 25%;
  8.     border-right: 1px solid #ddd;
  9. }

将width: 25% 修改为33.3333%

36、文章底部点赞分享按钮添加颜色

效果及操作步骤，请查看：知更鸟主题修改文章底部点赞分享按钮颜色

37、给评论头像添加旋转变圆特效

效果及操作步骤，请查看：知更鸟主题给评论头像添加旋转变圆特效

38、鼠标悬停位移效果+点击提示

效果及操作步骤，请查看：知更鸟主题鼠标悬停位移效果+点击提示

39、为评论者添加国籍、操作系统、浏览器和IP信息显示

效果及操作步骤，请查看：知更鸟主题为评论者添加国籍、操作系统、浏览器和IP信息显示

40、把站长标志Admin改成博主

效果及操作步骤，请查看：知更鸟主题把站长标志Admin改成博主

41、美化回复邮件显示样式

效果及操作步骤，请查看：美化知更鸟主题回复邮件显示样式

42、鼠标移动到图片外发光

 /*鼠标移动图片外发光*/
.single-content img:hover {
box-shadow:0px 0px 4px 4px #6dae78 ;
}

43、正文摘要样式修改

 /* 正文摘要修改 */
/* 修改 */
.abstract fieldset {
margin: 0 0 10px;
padding: 5px 15px;
border: 4px solid #ddd;
border-radius: 10px;
}
/* 修改 */
.abstract legend {
padding: 0 5px;
color: #999;
font-weight: bold;
font-size: 15px;
}

44、为文章添加获取当前目录分类目录

效果图及方法：

博客折腾美化过程全记录及实用技巧

1、第一处修改后，效果只在 文章 形式 为“标准”模式下才能显示添加的小图标

查找 wp-content/themes/begin/inc 路径找到文件 post-meta.php 文件将  //文章信息

// 文章信息
function begin_entry_meta() {
if ( ! is_single() ) :
echo '<span class="date">';
time_ago( $time_type ='post' );
echo '</span>';
}

替换为

// 文章信息
function begin_entry_meta() {
if ( ! is_single() ) :
echo '<span class="date"><i class="zm zm-rili1"></i> ';
time_ago( $time_type ='post' );
echo '</span>';
echo '<span class="format-cat"><i class="zm zm-fenlei5"></i> ';
zm_category();
echo '</span>';
}

其中：“zm zm-rili1”跟“zm zm-fenlei5”两处图标，根据网站使用的图标库情况自行修改，本站采用阿里云图标库。

2、第二处修改后，文章 形式 在“日志、视频、软件、链接”模式下都可以显示小图标。将 //日志信息

// 日志信息
function begin_format_meta() {
echo '<span class="date">';
time_ago( $time_type ='post' );
echo '</span>';
echo '<span class="format-cat"><i class="be be-folder"></i> ';
zm_category();
echo '</span>';
}

修改为

// 日志信息
function begin_format_meta() {
echo '<span class="date"><i class="zm zm-rili1"></i> ';
time_ago( $time_type ='post' );
echo '</span>';
echo '<span class="format-cat"><i class="zm zm-fenlei5"></i> ';
zm_category();
echo '</span>';
}

45、页脚添加公安备案号和域名备案号

将代码添加到主题选项---SEO最下面的“页脚第二行信息”中，添加时需要将编辑器切换到文本模式。

Copyright © 2017-2019 <a title="星光博客欢迎您的来访，希望您再次光临！" href="https://www.xgboke.com" target="_blank" rel="noopener">星光博客</a> 版权所有 <a href="http://www.miitbeian.gov.cn/" target="_blank" rel="nofollow noopener"><img style="margin-bottom: -4px;" src="https://www.xgboke.com/wp-content/uploads/2017/12/2017122803514939.png" /><span style="height: 20px; line-height: 20px;"> 鲁ICP备17049621号-2</span></a> <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=37078302000268" target="_blank" rel="nofollow noopener"><img style="margin-bottom: -4px;" src="https://www.xgboke.com/wp-content/uploads/2017/12/201712280258307.png" /><span style="height: 20px; line-height: 20px;"> 鲁公网安备37078302000268号</span></a>

 

46、页脚添加网站运行时长显示

打开 footer.php ，将代码添加到  </div><!-- .site-info --> 上面。其中，(Date.UTC(2017, 08, 09, 0, 0, 1)) 为建站日期与时间，根据需要自行修改。

<!--页脚运行时长开始--> 
Theme by <a href="http://zmingcx.com" target="_blank" rel="nofollow noopener" marked="1">知更鸟</a> · 托管于 <a href="https://www.aliyun.com" target="_blank" rel="nofollow noopener" marked="1">阿里云</a> · 网站已运行：<span id="htmer_time" style="color: #0196e3;"></span>
<script>
function secondToDate(second) {
if (!second) {
return 0;
}
var time = new Array(0, 0, 0, 0, 0);
if (second >= 365 * 24 * 3600) {
time[0] = parseInt(second / (365 * 24 * 3600));
second %= 365 * 24 * 3600;
}
if (second >= 24 * 3600) {
time[1] = parseInt(second / (24 * 3600));
second %= 24 * 3600;
}
if (second >= 3600) {
time[2] = parseInt(second / 3600);
second %= 3600;
}
if (second >= 60) {
time[3] = parseInt(second / 60);
second %= 60;
}
if (second > 0) {
time[4] = second;
}
return time;
}
</script>
<script type="text/javascript" language="javascript">
function setTime() {
var create_time = Math.round(new Date(Date.UTC(2017, 08, 09, 0, 0, 1)).getTime() / 1000);
var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
currentTime = secondToDate((timestamp - create_time));
currentTimeHtml = currentTime[0] + '年' + currentTime[1] + '天'
+ currentTime[2] + '时' + currentTime[3] + '分' + currentTime[4]
+ '秒';
document.getElementById("htmer_time").innerHTML = currentTimeHtml;
}
setInterval(setTime, 1000);
</script>
<!--结束-->

 

47、Begin主题面包屑导航栏修改

原先的修改方法已不适应新版主题，每次查找替换代码都很费劲，这次升级主题时顺便记录下。

新版主题面包屑导航栏代码

.bread{width:1122px;height:25px;line-height:25px;margin:0 auto;padding-left:10px;white-space:nowrap;word-wrap:normal;text-overflow:ellipsis;overflow:hidden;}

替换为以下代码

.bread{margin: 10px auto;border: 1px solid #ddd;border-radius: 2px;background-color: #fff;padding-top: 4px;padding-bottom: 4px;padding-left: 10px;}

 

未完，待续！

 

 

 

目录