wordpress博客知更鸟begin主题美化部分合集

  • A+
所属分类：知更鸟begin美化

知更鸟begin主题作为wordpress博客主题深受各位博主的喜爱，很多博主都通过自己的方法美化了begin知更鸟主题，使博客既好看有可以吸引用户。而有很多新手不知道美化代码，总是达不到自己预期的美化效果。今天马找钱就分享部分美化教程合集，更多的知更鸟主题美化教程请关注知更鸟begin美化专栏。

wordpress博客知更鸟begin主题美化部分合集

1、知更鸟主题美化，顶部导航菜单两种美化方法

首先看下效果图：

wordpress博客知更鸟begin主题美化部分合集
第一种，整体渐变背景色：打开Style.css，查找 #top-header(最新版主题是 #header-top)，将背景色 background:#e7e7e7; 修改为

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

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

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

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

2、知更鸟主题美化，页脚彩色滚动横条

wordpress博客知更鸟begin主题美化部分合集
　　将下面的代码添加到style.css或外观→自定义样式里面。

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

3、知更鸟主题美化，导航菜单加大字体、间距

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

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

调整间距

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

4、知更鸟主题美化，首页布局添加蓝色边框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. }

5、知更鸟主题美化，给缩略图添加圆角及背影效果

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

6、知更鸟主题美化，侧边栏添加广告小工具

wordpress博客知更鸟begin主题美化部分合集
小工具→增强文本，添加以下代码：

  1. <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 文件， 代码只对未登录用户的评论设置了限制。

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

8、知更鸟主题美化，Tab组合分类改三列平分居中显示

效果如图：

wordpress博客知更鸟begin主题美化部分合集
在Style.css 中分别查找 .tab-hd-con 跟 .tab-hd .current，将 width: 100px 分别修改为 width: 33.3333333%

9、知更鸟主题美化，评论回复“@某人”时添加彩色背景边框

在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. }

10、知更鸟主题美化，小工具中 1 2 3 序号修改颜色

wordpress博客知更鸟begin主题美化部分合集
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. }

11、知更鸟主题美化，正文标题加底色修改

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. }

12、知更鸟主题美化，H2、H3(二、三级)标题加底色修改

效果如图

知更鸟主题美化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. }

13、知更鸟主题美化，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%

14、知更鸟主题美化，鼠标移动到图片外发光

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

15、知更鸟主题美化，正文摘要样式修改

效果展示：

wordpress博客知更鸟begin主题美化部分合集

  1.  /* 正文摘要修改 */
  2. /* 修改 */
  3. .abstract fieldset {
  4. margin: 0 0 10px;
  5. padding: 5px 15px;
  6. border: 4px solid #ddd;
  7. border-radius: 10px;
  8. }
  9. /* 修改 */
  10. .abstract legend {
  11. padding: 0 5px;
  12. color: #999;
  13. font-weight: bold;
  14. font-size: 15px;
  15. }

16、知更鸟主题美化，为文章添加获取当前目录分类目录

效果图及方法：

wordpress博客知更鸟begin主题美化部分合集
查找 wp-content/themes/begin/inc 路径找到文件 post-meta.php 文件将

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

替换为：

  1. if ( ! is_single() ) :
  2. echo '<span class="date"><i class="zm zm-rili1"></i> ';
  3. time_ago( $time_type ='post' );
  4. echo '</span>';
  5. echo '<span class="format-cat"><i class="zm zm-fenlei5"></i> ';
  6. zm_category();
  7. echo '</span>';

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

未完待续，其余有关知更鸟begin主题美化请在'知更鸟begin美化'专栏查找。

  • 我的微信
  • 技术支持添加二维码
  • weinxin
  • 我的QQ二维码
  • 教程下载请扫二维码
  • weinxin
马找钱

发表评论

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