博客折腾记录

2017年11月18日00:42:40 8 8,677
目录

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

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、页脚彩色滚动横条

博客折腾记录-4

将下面的代码添加到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. }
  10. .single-content h3 {
  11.     font-size: 16px;
  12.     font-size: 1.6rem;
  13.     line-height: 190%;
  14.     margin: 2px -21px 10px -21px;
  15.     padding: 0 44px;
  16.     border-left: 5px solid #3690cf;
  17. }

修改为:

  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. }
  11. .single-content h3 {
  12.     font-size: 16px;
  13.     font-size: 1.6rem;
  14.     line-height: 190%;
  15.     margin: 2px -20px 10px -20px;
  16.     padding: 0 44px;
  17.     border-left: 5px solid #3690cf;
  18.     background-color: #ebebeb;
  19.     border-bottom: 1px solid #3690cf;
  20. }

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、为文章添加获取当前目录分类目录

第一种,自行研究,效果不太好,已弃用。 现在采用第二种方法!!!

效果图、添加路径及CSS代码如下:

<!--获取文章分类目录--><span class="format-cat"><i class="be be-folder"></i> <?php zm_category(); ?></span><!--获取文章分类目录-->

 

第二种效果图及方法:

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

if ( ! is_single() ) :
echo '<span class="date">';
time_ago( $time_type ='post' );
echo '</span>';

替换为

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”两处图标,根据网站使用的图标库情况自行修改,本站采用阿里云图标库。

 

 

 

未完,待续!

 

 

 

weinxin
星光博客 站长语录
星光博客,欢迎各位来访!这是我的QQ,扫一扫,加好友。大家一起交流博客建站技术,分享前沿资讯!

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:8   其中:访客  6   博主  2

    • 星光 星光 1 来自天朝的朋友 火狐浏览器 Windows 7 山东省潍坊市 移动

      人生在于折腾

      • 久伴博客 久伴博客 3 来自天朝的朋友 谷歌浏览器 Windows 7 湖南省长沙市 鹏博士长城宽带

        不错,记录一下,防止日后自己都不知道折腾了那里

        • 蓝亚之舟 蓝亚之舟 3 来自天朝的朋友 谷歌浏览器 Windows 10 北京市 北京宽带通电信技术有限公司

          相当赞!感谢分享!

          • pony pony 0 来自天朝的朋友 谷歌浏览器 Windows 10 甘肃省武威市 电信

            为文章添加获取当前目录分类目录–放到日期后面就完美了,貌似要修改post-meta.php

            • 集训季 集训季 0 来自天朝的朋友 QQ浏览器  Android 8.0.0 MI 5s Build/OPR1.170623.032 重庆市 电信

              博主手机移动端的底部导航菜单怎么设置的,感觉你这个优化得不错,有教程分享吗?谢谢

                • BG4PGR BG4PGR  博主 来自天朝的朋友 火狐浏览器 Windows 10 中国 移动

                  @集训季 主题支持四个菜单(主要菜单、顶部菜单、移动端菜单和移动端页脚菜单),菜单操作使用方法:
                  1、进入WP后台→外观→菜单,点击创建新菜单。
                  2、首先输入一个菜单名称,并保存菜单。
                  3、菜单支持添加单篇文章、分类、标签、页面、自定义链接及自定义文章类型(公告、图片、商品)等,如果发现缺少项目,可以打开右上角的“显示选项”勾选相应的项目。
                  4、添加菜单项,选择一个分类或者页面,点击添加至菜单,可以多选,用鼠标向右拖动已添加的菜单项,可以形成二级下拉菜单。 具体操作如图:
                  评论
                  注:顶部和移动端菜单不支持二级下拉菜单,否则会错位。
                  如果不想显示顶部的的菜单,可以新建一个“空的”菜单,也就是新建个菜单,不向里面添加任何菜单项目,然后选择这个”空的”菜单。
                  移动端菜单只在移动浏览器上可见,需要到主题选项—-基本设置中,勾选“启用单独移动端导航菜单”,但WP自带的判断移动设备的函数,很多浏览器并不能识别这个移动菜单,可以将移动浏览器的标识(UA)改成iPhone,另外如果开启了静态缓存也可能不会生效。

                • 倚楼听风雨 倚楼听风雨 0 来自天朝的朋友 谷歌浏览器 Windows 7 福建省 电信

                  谢谢星光分享!页脚彩色滚动横条代码拿走了。 :wink:

                    • BG4PGR BG4PGR  博主 来自天朝的朋友 谷歌浏览器  EDI-AL10 Build/HUAWEIEDISON-AL10 山东省潍坊市 联通

                      @倚楼听风雨 不用客气啦!分享就是让大家去使用的,美化自己的博客。