知更鸟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里面,样式如下
- .mcnmq{background:#b485e2;color:#fff;padding:2px 8px;border-radius:2px}.mcnmw{background:#74d62f;color:#fff;padding:2px 8px;border-radius:2px}
第二步,在把调用代码到你想要添加的地方,如顶部导航菜单→菜单结构→导航标签里面。
- <span class="mcnmq"> 导航 </span>
- <span class="mcnmw"> 导航 </span>
注意:“mcnmq”和“mcnmw”要隔开用,否则出来的菜单效果就是一个颜色了。
22、页脚彩色滚动横条

将下面的代码添加到style.css或外观→自定义样式里面。
- #footer-widget-box {
- background: #1d1626 url(https://wx2.sinaimg.cn/large/006VCrUsgy1fjmflwl7rog30ag004dfs.gif) repeat-x scroll 0 100%;
- }
23、导航菜单加大字体、间距
加大字体,将下面的代码添加到style.css或外观→自定义样式里面。
- #site-nav .down-menu li {
- font-size:15px;
- }
调整间距
- #site-nav .down-menu a {
- padding: 0 8px;
- }
24、首页布局添加蓝色边框CSS
- .post:hover, .tao-box:hover, .picture-box:hover, .picture-h:hover, .tab-site:hover, .cat-box:hover {
- border: 1px dashed #39c;
- }
25、给缩略图添加圆角及背影效果
- .thumbnail {
- border-radius: 6px;
- box-shadow: rgba(0,0,0,0.5) 3px 3px 3px;
- }
26、右下角滚屏按钮美化
效果及操作步骤,请查看:知更鸟Begin主题右下角滚屏快捷方式美化
27、侧边栏添加广告小工具
小工具→增强文本,添加以下代码:
- <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 文件, 代码只对未登录用户的评论设置了限制。代码来源 龙笑天下
- /**
- * 为WordPress评论功能增加字数长度限制 - 龙笑天下
- * https://www.ilxtx.com/limit-wordpress-comment-length.html
- */
- function lxtx_set_comments_length($commentdata) {
- $minCommentlength = 5; //最少字數限制,建议设置为5-10个字
- $maxCommentlength = 220; //最多字數限制,建议设置为150-200个字
- $pointCommentlength = mb_strlen($commentdata['comment_content'],'UTF8'); //mb_strlen 一个中文字符当做一个长度
- if ( ($pointCommentlength < $minCommentlength) && !is_user_logged_in() ){
- err('抱歉,您的评论字数过少,最少输入' . $minCommentlength .'个字(目前字数:'. $pointCommentlength .')【登录后无此限制】');
- exit;
- }
- if ( ($pointCommentlength > $maxCommentlength) && !is_user_logged_in() ){
- err('抱歉,您的评论字数过多,最多输入' . $maxCommentlength .'个字(目前字数:'. $pointCommentlength .')【登录后无此限制】');
- exit;
- }
- return $commentdata;
- }
- 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 及其代码,修改为以下:
- .at, .at a {
- color: #fff;
- font-size: 13px;
- margin-right: 5px;
- padding: 1px 5px;
- background: #1abc9c;
- border-radius: 3px;
- }
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查找:
- /** 序号 **/
- .li-icon-1,
- .li-icon-2,
- .li-icon-3 {
- background: #c40000;
- }
修改为:
- .li-icon-1 {
- background: #c40000;
- }
- .li-icon-2 {
- background: #0cf;
- }
- .li-icon-3 {
- background: #03bf03;
- }
33、正文标题加底色修改
Style.css查找:
- /** 正文 **/
- .entry-header h1 {
- position: relative;
- font-size: 20px;
- font-size: 2.0rem;
- line-height: 30px;
- text-align: center;
- margin: 35px 0 0 0;
- padding: 5px 0;
- }
修改为:
- .entry-header h1 {
- position: relative;
- font-size: 20px;
- font-size: 1.8rem;
- line-height: 30px;
- text-align: center;
- margin: 35px -20px 0 -20px;
- padding: 5px 20px;
- height: auto;
- color: #fff;
- text-transform: inherit;
- background-color: #1ba1e2;
- border-bottom: 1px solid #ddd;
- }
34、H2、H3(二、三级)标题加底色修改
效果如图
二级标题式样
三级标题式样
Style.css查找:
- /** 排版样式 **/
- .single-content h2 {
- font-size: 17px;
- font-size: 1.7rem;
- line-height: 190%;
- margin: 10px -21px;
- padding: 0 44px;
- border-left: 5px solid #e40000;
- }
- .single-content h3 {
- font-size: 16px;
- font-size: 1.6rem;
- line-height: 190%;
- margin: 2px -21px 10px -21px;
- padding: 0 44px;
- border-left: 5px solid #3690cf;
- }
修改为:
- .single-content h2 {
- font-size: 17px;
- font-size: 1.7rem;
- line-height: 190%;
- margin: 10px -20px;
- padding: 0 44px;
- border-left: 5px solid #e40000;
- background-color: #ebebeb;
- border-bottom: 1px solid #e40000;
- }
- .single-content h3 {
- font-size: 16px;
- font-size: 1.6rem;
- line-height: 190%;
- margin: 2px -20px 10px -20px;
- padding: 0 44px;
- border-left: 5px solid #3690cf;
- background-color: #ebebeb;
- border-bottom: 1px solid #3690cf;
- }
35、TAB组合小工具四栏改三栏
Style.css查找:
- /** TAB组合 **/
- .zm-tabs-nav a {
- background: #f8f8f8;
- float: left;
- color: #999;
- text-align: center;
- width: 25%;
- border-right: 1px solid #ddd;
- }
将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;}
未完,待续!
- 1、网站空间与域名之折腾
- 2、关于本站四个联系图标美化
- 3、关于本站头像居中添加背景美化
- 4、头部显示日期与问候语
- 5、为评论框添加背景图片
- 6、热门标签固定与凌乱显示
- 7、使用阿里云图标方法
- 8、面包屑导航栏美化
- 9、自定义鼠标指针样式
- 10、评论前三名“沙发 板凳 地板”添加背景色
- 11、文章中插入表情图
- 12、文章中增加彩色边框
- 13、页脚添加查询耗时自定语
- 14、后台登陆失败邮件提醒
- 15、有新评论微信提醒管理员
- 16、侧边栏显示自定义滚动问候语
- 17、后台登录页面添加运算验证码
- 18、折叠时光轴记录网站发展
- 19、网站优化之Robots.txt优化
- 20、虚拟主机无法发送邮件解决办法
- 21、顶部导航菜单两种美化方法
- 22、页脚彩色滚动横条
- 23、导航菜单加大字体、间距
- 24、首页布局添加蓝色边框CSS
- 25、给缩略图添加圆角及背影效果
- 26、右下角滚屏按钮美化
- 27、侧边栏添加广告小工具
- 28、为评论功能增加字数限制
- 29、Tab组合分类改三列平分居中显示
- 30、评论回复“@某人”时添加彩色背景边框
- 31、修复评论自动获取QQ昵称
- 32、小工具中 1 2 3 序号修改颜色
- 33、正文标题加底色修改
- 34、H2、H3(二、三级)标题加底色修改
- 35、TAB组合小工具四栏改三栏
- 36、文章底部点赞分享按钮添加颜色
- 37、给评论头像添加旋转变圆特效
- 38、鼠标悬停位移效果+点击提示
- 39、为评论者添加国籍、操作系统、浏览器和IP信息显示
- 40、把站长标志Admin改成博主
- 41、美化回复邮件显示样式
- 42、鼠标移动到图片外发光
- 43、正文摘要样式修改
- 45、页脚添加公安备案号和域名备案号
- 46、页脚添加网站运行时长显示
- 47、Begin主题面包屑导航栏修改
- 未完,待续!