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.ne2207.com"?rel="nofollow"?target="_blank"?data-original-title="網吧無盤"?title="網吧無盤"><img?class="?aligncenter"?src="http://www.ne2207.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: