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

2017年5月22日15:37:01 7 5,784

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

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

2017年9月16号开始采用正版begin主题。

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

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

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

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

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><!-- 修改提示语言 -->

:本站已取消效果、WordPress修改评论框提示或给评论框添加图片

四、首页左上角加上当前日期。

将以下代码加在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主题后的网站折腾记录

再加上问候语

  1. <script type="text/javascript">today=new Date();var day; var date; var hello;hour=new Date().getHours();if(hour < 6){ hello=' 凌晨好! ';}else if(hour < 9){ hello=' 早上好!';}else if(hour < 12){ hello=' 上午好!';}else if(hour < 14){ hello=' 中午好! ';}else if(hour < 17){ hello=' 下午好! ';}else if(hour < 19){ hello=' 傍晚好!';}else if(hour < 22){ hello=' 晚上好! ';}else{ hello='夜深了! ';}function GetCookie(sName) { var arr = document.cookie.match(new RegExp("(^| )"+sName+"=([^;]*)(;|$)")); if(arr !=null){return unescape(arr[2])}; return null;}var Guest_Name = decodeURIComponent(GetCookie('author'));var webUrl = webUrl;if (Guest_Name != "null" ){ hello = Guest_Name+' , '+hello+' 欢迎回来。';}document.write(' '+hello);</script>

好多小伙伴问这个文件在哪里,在之前的版本是直接在主题文件夹下,不知道从哪个版本开始,已经是放到 inc/users 下了。

然后,这个代码加在什么位置,这里也就说下本站加的位置,具体你们自己可以折腾。这里是加在倒数第五行前面的。

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

五、菜单加上个性化图标。

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

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

注:begin4.6版本之前都可以使用。之后的版本已经采用阿里图标。阿里图标使用方法(知更鸟主题)

六、网站发布文章自动同步到新浪微博。

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

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

:本站已取消效果、据说效果已经不能同步了

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

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

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

:本站已取消效果

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

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

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

:本站已取消效果、begin自带统计小工具,这个可以在其他主题上使用。

九、修改了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. }

十、修改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. }

十一、网站评论添加UA信息  

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

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

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

:本站已取消效果

十二、网站添加鼠标样式

WordPress自定义鼠标样式方法

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

十三、网站调用一言API

纯代码让你的WordPress更显文艺

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

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

十四、网站添加多彩侧边栏

WordPress多彩推荐侧边栏

又是一个亮点推荐~~~

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

十五、文章H标签添加背景色

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

  1. background#ebebeb;

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

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

十六、网站评论增加打字特效

 

使用知更鸟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中。文件路径可以自己调整。

:本站已取消效果

十七、美化关于本站

将下面样式代码添加主题选项→定制风格,在“自定义样式”中:

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

注:盗版begin主题使用,这个css需要自己改动,不然头像不居中。

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

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

  1. border-radius: 20px;

十九、更改TAB小工具css

正常tab小工具显示四栏,因为评论栏显示和其他三栏不对齐,于是这里便利用css去掉了一栏。

找到 .zm-tabs-nav a 这将其下的 width值 25% 修改为 33.3% 即可。

廿、首页布局添加边框css

将下面样式代码添加主题选项→定制风格,在“自定义样式”中:

  1. .post:hover, .tao-box:hover, .picture-box:hover, .picture-h:hover, .tab-site:hover, .cat-box:hover {
  2.  border1px dashed #39c;
  3. }

效果如下图
使用知更鸟begin主题后的网站折腾记录

这里添加的是把网站里一些需要改的位置都添加进去了,可以根据个人所好修改。

廿一、网站添加“富强、民主、和谐”鼠标点击特效

给网站添加“富强、民主、和谐”鼠标点击特效   查看这个就好。

廿二、改变右则滑动模块颜色

将下面样式代码添加主题选项→定制风格,在“自定义样式”中:

  1. #scroll li a {
  2.     color#ff0000;
  3. }

廿三、缩略图添加圆角和背影特效

将下面样式代码添加主题选项→定制风格,在“自定义样式”中:

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

廿四、网站头部添加彩色条

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

将上面样式代码添加主题选项→定制风格,“自定义样式”中。也可以自己修改css文件中的代码。

待续。。。

廿五、网站顶部导航美化

将以下css添加到主题选项→定制风格→自定义样式中

  1. /** 顶部菜单特效 **/
  2. .mcnmq{background:#b485e2;color:#fff;padding:2px 8px;border-radius:2px}.mcnmw{background:#74d62f;color:#fff;padding:2px 8px;border-radius:2px}

再在导航菜单中添加

  1. <span class="mcnmq"> 导航名称一 </span>
  2. <span class="mcnmw"> 导航名称二 </span>

本站已取消特效。

廿六、添加显示查询次数和耗时

具体如何操作,请查看:WordPress显示页面查询次数和耗时

廿七、修改首页cms布局栏目文章随机显示

具体如何操作,请查看:修改知更鸟主题首页分类文章为随机排序 让好文章不再埋没

廿八、美化标签云

具体如何操作,请查看:美化知更鸟标签云小工具

廿九、网站右上角梅花飘落

具体如何操作,请查看:网站右上角添加梅花飘落

:悬浮面积过大,影响熊掌号收录,已取消。

卅、网站左下角蒲公英

具体如何操作,请查看:WordPress给网站左下角添加蒲公英

卅一、网站下雪特效

具体如何操作,请查看:WordPress圣诞特效插件和雪花代码

卅二、文章中添加表情

具体如何操作,请查看:给WordPress文章中插入表情

卅三、熊掌号改造

具体如何操作,请查看:WordPress如何配置百度熊掌号

卅四、关闭网站rss

具体如何操作,请查看:WordPress如何关闭rss订阅

未完、待续。

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



版权声明:本文由江西SEOSEO原创或整理发布,欢迎分享! 更多优化知识请查看 SEO教程

本文链接:https://www.zhushuming.cn/2395.html

  • 博客之家
  • 博客之家,本站的资源收集于群里以便下载。当然,更多的是建站知识交流~
  • weinxin
  • SEO优化交流群
  • SEO优化交流群,交流seo优化技巧。860716446
  • weinxin

发表评论

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

目前评论:7   其中:访客  4   博主  3

    • 江西SEO 江西SEO 4

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

      • cook cook Admin

        cs

        • 木禾网 木禾网 1

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

          • 神 0

            好文,我也有一篇跟你差不多,也是把每个特效写成一个标题一个标题的,不过咱们两个有的有,有的没有,基本不一样吧,也差不多,我写的都是我在用的,怕那天不小心删掉,所以记录一下!

              • cook cook Admin

                @ 一样,我自己折腾的,网站都会有记录,这个集合在一起的是为了大家,好寻找一些

              • abcdocker abcdocker 1

                七、添加了博客历史上的今天。
                这个页面好像有点问题。

                  • cook cook Admin

                    @abcdocker 代码没有问题,以上这些都是我自己使用过的。