- A+
所属分类:知更鸟begin美化
- 1、知更鸟主题美化,顶部导航菜单两种美化方法
- 2、知更鸟主题美化,页脚彩色滚动横条
- 3、知更鸟主题美化,导航菜单加大字体、间距
- 4、知更鸟主题美化,首页布局添加蓝色边框CSS
- 5、知更鸟主题美化,给缩略图添加圆角及背影效果
- 6、知更鸟主题美化,侧边栏添加广告小工具
- 7、知更鸟主题美化,为评论功能增加字数限制
- 8、知更鸟主题美化,Tab组合分类改三列平分居中显示
- 9、知更鸟主题美化,评论回复“@某人”时添加彩色背景边框
- 10、知更鸟主题美化,小工具中 1 2 3 序号修改颜色
- 11、知更鸟主题美化,正文标题加底色修改
- 12、知更鸟主题美化,H2、H3(二、三级)标题加底色修改
- 13、知更鸟主题美化,TAB组合小工具四栏改三栏
- 14、知更鸟主题美化,鼠标移动到图片外发光
- 15、知更鸟主题美化,正文摘要样式修改
- 16、知更鸟主题美化,为文章添加获取当前目录分类目录
知更鸟begin主题作为wordpress博客主题深受各位博主的喜爱,很多博主都通过自己的方法美化了begin知更鸟主题,使博客既好看有可以吸引用户。而有很多新手不知道美化代码,总是达不到自己预期的美化效果。今天马找钱就分享部分美化教程合集,更多的知更鸟主题美化教程请关注知更鸟begin美化专栏。
1、知更鸟主题美化,顶部导航菜单两种美化方法
首先看下效果图:

- background:linear-gradient(-30deg,rgba(255, 213, 60, 0.71) 10%,rgba(161, 230, 243, 0.78)) no-repeat;
第二种,导航菜单背景颜色交替:第一步,先把css样式添加到外观→自定义→额外css里面,样式如下
- <span class="mcnmq"> 导航 </span>
- <span class="mcnmw"> 导航 </span>
注意:“mcnmq”和“mcnmw”要隔开用,否则出来的菜单效果就是一个颜色了。
2、知更鸟主题美化,页脚彩色滚动横条

- #footer-widget-box {
- background: #1d1626 url(https://wx2.sinaimg.cn/large/006VCrUsgy1fjmflwl7rog30ag004dfs.gif) repeat-x scroll 0 100%;
- }
3、知更鸟主题美化,导航菜单加大字体、间距
加大字体,将下面的代码添加到style.css或外观→自定义样式里面
- #site-nav .down-menu li {
- font-size:15px;
- }
调整间距
- #site-nav .down-menu a {
- padding: 0 8px;
- }
4、知更鸟主题美化,首页布局添加蓝色边框CSS
- .post:hover, .tao-box:hover, .picture-box:hover, .picture-h:hover, .tab-site:hover, .cat-box:hover {
- border: 1px dashed #39c;
- }
5、知更鸟主题美化,给缩略图添加圆角及背影效果
- .thumbnail {
- border-radius: 6px;
- box-shadow: rgba(0,0,0,0.5) 3px 3px 3px;
- }
6、知更鸟主题美化,侧边栏添加广告小工具

- <div style="position: relative;"><a href="http://www.mazhaoqian.com" rel="nofollow" target="_blank" data-original-title="网吧无盘" title="网吧无盘"><img class=" aligncenter" src="http://www.mazhaoqian.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>
7、知更鸟主题美化,为评论功能增加字数限制
将下面的代码添加到当前主题的 functions.php 文件, 代码只对未登录用户的评论设置了限制。
- /**
- * 为WordPress评论功能增加字数长度限制
- */
- 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');
8、知更鸟主题美化,Tab组合分类改三列平分居中显示
效果如图:

9、知更鸟主题美化,评论回复“@某人”时添加彩色背景边框
在Style.css 中查找 .at, .at a 及其代码,修改为以下:
- .at, .at a {
- color: #fff;
- font-size: 13px;
- margin-right: 5px;
- padding: 1px 5px;
- background: #1abc9c;
- border-radius: 3px;
- }
10、知更鸟主题美化,小工具中 1 2 3 序号修改颜色

- /** 序号 **/
- .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;
- }
11、知更鸟主题美化,正文标题加底色修改
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;
- }
12、知更鸟主题美化,H2、H3(二、三级)标题加底色修改
效果如图
知更鸟主题美化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;
- }
13、知更鸟主题美化,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%
14、知更鸟主题美化,鼠标移动到图片外发光
- /*鼠标移动图片外发光*/
- .single-content img:hover {
- box-shadow:0px 0px 4px 4px #6dae78 ;
- }
15、知更鸟主题美化,正文摘要样式修改
效果展示:
- /* 正文摘要修改 */
- /* 修改 */
- .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;
- }
16、知更鸟主题美化,为文章添加获取当前目录分类目录
效果图及方法:

- 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”两处图标,根据网站使用的图标库情况自行修改,本站采用阿里云图标库。
未完待续,其余有关知更鸟begin主题美化请在'知更鸟begin美化'专栏查找。
- 我的微信
- 技术支持添加二维码
-
- 我的QQ二维码
- 教程下载请扫二维码
-