使用知更鸟begin主题后的网站折腾记录

2017年5月22日15:37:01 3 1,360 views

知更鸟begin主题,大家也都知道怎么样,知更鸟官网售价299元,价格也不算贵。而且作者对这个主题一直在更新,很多朋友都在使用这个主题。在这里朱曙明要说下,虽说Begin主题的功能很强大,但对于一般的中小站长来说,其实很多功能是用不上的。所以没有必要来换主题哦。

使用也有一段时间了,也折腾了好久 ,刚开始用的是begin2.0主题,前段时间收集的4.2,便又开始了折腾。

1、给博客新加了个说说页面

不过貌似现在出现了些问题,等有空再来修复下 。(可以查看这篇文章 WordPress教程:给知更鸟主题增加说说页面

说说页面现已修复。具体效果请点击——>闻声细语

2、主题页脚两栏更换成三栏。

style.css中找到以下代码

  1. .footer-widget .widget {
  2.     background#555;
  3.     floatleft;
  4.     width: 50%;
  5.     padding: 0 20px;
  6.     bordernone;
  7.     box-shadow: none;
  8. }

width:50%修改成width:33.33%

3、修改了评论框提示。

comments.php文件中。找到以下代码

  1. <p class="comment-form-comment"><textarea id="comment" name="comment" rows="4" tabindex="4"></textarea></p>

修改为

  1. <p class="comment-form-comment"><textarea placeholder="欢迎来到朱曙明博客,评论前请先仔细阅读文章内容,禁止留言垃圾评论" id="comment" name="comment" rows="4" tabindex="4" onKeyDown="xx(this.form.comment,this.form.total,this.form.used,this.form.remain);" onKeyUp="xx(this.form.comment,this.form.total,this.form.used,this.form.remain);"></textarea></p><!-- 修改提示语言 -->

4、在首页左上角加上了当前日期。

将以下代码加在user-profile.php文件中的合适位置。

  1. <script language="Javascript" type="text/javascript">
  2. <!--
  3. var enabled = 0; today = new Date();
  4. var day; var date;
  5. if(today.getDay()==0) day = " 星期日"
  6. if(today.getDay()==1) day = " 星期一"
  7. if(today.getDay()==2) day = " 星期二"
  8. if(today.getDay()==3) day = " 星期三"
  9. if(today.getDay()==4) day = " 星期四"
  10. if(today.getDay()==5) day = " 星期五"
  11. if(today.getDay()==6) day = " 星期六"
  12. date = (today.getFullYear()) + "年" + (today.getMonth() + 1 ) + "月" + today.getDate() + "日" + day +"";
  13. document.write(date);
  14. // -->
  15. </script>

效果图如下

使用知更鸟begin主题后的网站折腾记录

5、给菜单加上了个性化图标。

在菜单前面加上 i 标签就可以了,也可以在css类里面加。图标可以查看网址收藏中的个性图标

使用知更鸟begin主题后的网站折腾记录

注:begin4.6版本之前都可以使用。之后的貌似不能使用这个。

6、添加了网站发布文章自动同步了新浪微博。

WordPress如何将网站文章自动同步到新浪微博

具体效果可以查看我的微博。

7、添加了博客历史上的今天。

WordPress教程:为站点添加历史上的今天功能

需要网站运行在1年以上,这个功能才会出现效果,感觉还是不错的,对老博客有好处。目前本站还未满1年,所以看不到效果图。

8、添加了博客统计小工具。

WordPress教程:给网站边栏添加博客统计小工具

已经加了小工具,还一直没找到好的位置放出来。没有效果图。

9、修改了blockquote的css代码

效果展示效果展示效果展示效果展示

将blockquote的css代码修改成以下代码,左角图片可以在本站下载。

  1. blockquote {
  2.     color#7da33c;
  3.     background#ecf2d6 url('/wp-content/uploads/2017/04/sc_notice.png') -1px -1px no-repeat;
  4.     border1px solid #aac66d;
  5.     padding15px 15px 5px 35px;
  6.     margin: 0 0 15px 0;
  7.     width: 98%;
  8. }

10、修改code的css代码

效果展示 效果展示 效果展示

将code的css代码修改成以下代码。

  1. .single-content code {
  2.     padding2px 4px;
  3.     color#d14;
  4.     background-color#fbfbfb;
  5.     border1px solid #e1e1e8;
  6.     word-break: break-all;
  7.     word-wrap: break-word;
  8.     font-size14px;
  9. }

11、给网站评论添加UA信息  

( WordPress教程:给评论者添加UA信息和IP地址

这个研究了好久才完成,哈哈。

使用知更鸟begin主题后的网站折腾记录

12、给网站添加了鼠标样式

WordPress自定义鼠标样式方法

效果图就看网站的鼠标了~~这里就没有截图了

13、网站调用了一言API

纯代码让你的WordPress更显文艺

这个还是不错的。调用了一下,给网站添加了一些文艺气息~~~

使用知更鸟begin主题后的网站折腾记录

14、给网站添加了一个多彩侧边栏

WordPress多彩推荐侧边栏

又是一个亮点推荐~~~

使用知更鸟begin主题后的网站折腾记录

15、给文章H标签添加了背景色

 

查找文章中的H标签的代码,在css中加上以下背景色就可以了效果如下图。

  1. background#ebebeb;

使用知更鸟begin主题后的网站折腾记录

在begin中文章H标签的是 .single-content h3 、h1-h4。在主题文件css中搜索下就可以找到,在你需要加的H标签中加上背景色就可以的,本站只是加在了H2和H3中。

16、给网站评论增加了一个打字特效

 

使用知更鸟begin主题后的网站折腾记录

先下载一个JS,放到主题的JS文件夹中。提取密码: iqm2

  1. <?php if (is_single() || is_page() ) { ?>
  2. <script src="<?php bloginfo('template_directory'); ?>/js/activate-power-mode.js "></script>
  3. <script>
  4. POWERMODE.colorful = true;
  5. POWERMODE.shake = false;
  6. document.body.addEventListener('input', POWERMODE);
  7. </script>
  8. <?php }?>

将以上代码添加到footer中。文件路径可以自己调整。

17、修改关于本站css

  1. .about-img {
  2.     text-aligncenter;
  3.     backgroundurl(http://imgs.zhushuming.cn/wp-content/uploads/2017/09/20170906100932100.jpg) center center no-repeat;
  4.     background-size: cover;
  5.     height120px;
  6.     margin0px 0 40px 0;
  7. }
  8. .about-img img {
  9.     width120px;
  10.     heightauto;
  11.     margin35px 0px 0 0;
  12.     padding2px;
  13.     border-radius: 50%;
  14.     border2px solid #f8f8f8;
  15. }
  16. .about-name {
  17.     font-size16px;
  18.     font-weight: 700;
  19.     text-aligncenter;
  20. }

18、修改友情链接、文章内标签边框css

在友情链接边框 .link-f a 、文章内标签边框 .single-tag li a  下添加以下属性

  1. border-radius: 20px;

待续。。。

更多的折腾可以查看知更鸟的使用指南知更鸟的常见问题

weinxin
博客之家
博客之家,欢迎各位来加入,一起来交流!本站资源全部上传在群里,有需要的也可以加群来免费下载。
如果本站内容对你有所帮助,请帮忙点击下页面上的广告,帮助下网站发展,谢谢大家!
朱曙明

发表评论

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

目前评论:3   其中:访客  2   博主  1

    • avatar 木禾网 1

      大佬的方法很实用,简易懂 :wink:

      • avatar cook Admin

        cs

        • avatar 江西SEO 4

          折腾来折腾去,还不如先搞下网站