知更鸟主题 知更鸟主题修改教程 [2]添加一体化订阅边栏

使用WordPress建站的人很多，一般都会到网络上下载一款免费的主题使用，而知更鸟的Hot News主题就是众多免费WP主题中的一款，相信也有很多人正在使用它，本文就来介绍下该主题的修改方法，希望对广大站长能有所帮助

电脑一台

WordPress默认自带有订阅小工具，但是功能非常单一且外观简单，无法满足我们的日常需要。最近在一个网站中发现一个订阅小工具不错，集成了QQ聊天、新浪微博、腾讯微博、邮件订阅、RSS订阅等多种订阅方式于一身，相比系统自带的订阅方式，不仅功能更加强大且更加的美观（如下图）

先下载几个必要的文件，下载地址：http://pan.baidu.com/share/link?shareid=134819&uk=1426351191，文件包内包括feed_email.php(小工具主文件)、contact.png(对应图标文件)、Theme_options.php(后台主题设置文件)、widget.php(widget调用文件)。

将对应文件上传到网站上对应的目录

feed_email.php上传到wp-contentthemesHotNewsproincludeswidget目录；

contact.png上传到wp-contentthemesHotNewsproimages目录；

Theme_options.php和widget.php上传到wp-contentthemesHotNewsproincludes目录。

将下面的代码添加到style.css文件中（可根据个人喜好进行调整设置）：

/*---订阅XXX---*/

.box_c {

background: #fff;

width:224px;

padding: 5px 0 5px 10px;

border-left: 1px solid #ccc;

border-right: 1px solid #ccc;

}

#contact-li li{float:left;margin:0 1px;}

#contact-li li a{display:block;width:40px;height:40px;background:url(images/contact.png) no-repeat;text-indent:-9999px;}

#contact-li li.twitter a{background-position:0 -40px;}

#contact-li li.qqmblog a{background-position:0 -80px;}

#contact-li li.sinamblog a{background-position:0 -120px;}

#contact-li li.qq a{background-position:0 -160px;}

#contact-li li.rss a{background-position:0 -200px;}

.feed-mail{

border-radius:4px;

border:#dbdbdb 1px solid;

padding:12px 0 12px 12px;

box-shadow:0 0 4px #eee;

margin-bottom:10px

}

.feed-mail-input{

width:145px;

height:25px;

line-height:20px;

padding:4px;

vertical-align:middle;

border:#dbdbdb 1px solid;

background-color:#fff

}

.feed-mail-btn{

width:55px;

height:25px;

vertical-align:middle;

border:#dbdbdb 1px solid;

margin-left:4px;

cursor:pointer

}

通过以上操作，就完成了！下面到后台→外观→小工具，里面就会看到名为“订阅XXX”的小工具(“订阅xxx”这几个字在feed_email.php文件中修改)，我们将其拖到想要显示的位置，再到后台的主题设置中，展开“微博及订阅设置”即可进行相关设置

如果发现添加插件后网站变形，将widget.php文件用Notepad++打开，点击“格式”，选择“以UTF-8无BOM格式编码”，再保存文件即可解决

以上方法也同样适用于其他WP主题，具体可根据自己的需要调整相应参数即可

爱华网本文地址 » http://www.aihuau.com/a/8104420103/265960.html