登录
  • 欢迎访问【望星湖畔】,WordPress信息,WordPress教程,推荐使用最新版火狐浏览器或Chrome浏览器访问本网站,欢迎加入官方QQ群 QQ群
  • 【望星湖畔】因搬家不慎将数据弄丢,现在各项资料恢复中,还请大家海涵!!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏【望星湖畔】吧

知更鸟Hot News主题添加漂亮实用的订阅侧边栏工具

WP应用 admin 1190次浏览 未收录 0个评论

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

ythdyfa-jt-01

本站采用的是知更鸟制作的Hot News主题,本教程的具体参数仅适用于本主题,对于其他主题可自己进行适当调整。此订阅工具有以下几个特点:集成多种订阅方式(QQ、新浪微博、腾讯微博、RSS、邮件等)、可后台设置对应参数、图标美观且可自定义。下面就来看看具体的制作步骤吧!

第一步:先下载几个必要的文件(下载地址一 | 下载地址二),包括feed_email.php(小工具主文件)、contact.png(对应图标文件)、Theme_options.php(后台主题设置文件)、widget.php(widget调用文件)。

第二步:将对应文件上传到对应目录。

feed_email.php上传到\wp-content\themes\HotNewspro\includes\widget目录;

contact.png上传到\wp-content\themes\HotNewspro\images目录;

Theme_options.php和widget.php上传到\wp-content\themes\HotNewspro\includes目录。

第三步:将下面的代码添加到style.css文件中(可根据个人喜好进行调整设置):

  1. /*—订阅品品—*/  
  2.   
  3. .box_c {  
  4.   
  5. background#fff;  
  6.   
  7. width:224px;  
  8.   
  9. padding5px 0 5px 10px;  
  10.   
  11. border-left1px solid #ccc;  
  12.   
  13. border-right1px solid #ccc;  
  14.   
  15. }  
  16.   
  17.    
  18.   
  19. #contact-li li{float:left;margin:0 1px;}  
  20.   
  21. #contact-li li a{display:block;width:40px;height:40px;background:url(images/contact.png) no-repeat;text-indent:-9999px;}  
  22.   
  23. #contact-li li.twitter a{background-position:0 –40px;}  
  24.   
  25. #contact-li li.qqmblog a{background-position:0 –80px;}  
  26.   
  27. #contact-li li.sinamblog a{background-position:0 –120px;}  
  28.   
  29. #contact-li li.qq a{background-position:0 –160px;}  
  30.   
  31. #contact-li li.rss a{background-position:0 –200px;}  
  32.   
  33.    
  34.   
  35. .feed-mail{  
  36.   
  37. border-radius:4px;  
  38.   
  39. border:#dbdbdb 1px solid;  
  40.   
  41. padding:12px 0 12px 12px;  
  42.   
  43. box-shadow:0 0 4px #eee;  
  44.   
  45. margin-bottom:10px  
  46.   
  47. }  
  48.   
  49.    
  50.   
  51. .feed-mail-input{  
  52.   
  53. width:145px;  
  54.   
  55. height:25px;  
  56.   
  57. line-height:20px;  
  58.   
  59. padding:4px;  
  60.   
  61. vertical-align:middle;  
  62.   
  63. border:#dbdbdb 1px solid;  
  64.   
  65. background-color:#fff  
  66.   
  67. }  
  68.   
  69.    
  70.   
  71. .feed-mail-btn{  
  72.   
  73. width:55px;  
  74.   
  75. height:25px;  
  76.   
  77. vertical-align:middle;  
  78.   
  79. border:#dbdbdb 1px solid;  
  80.   
  81. margin-left:4px;  
  82.   
  83. cursor:pointer  
  84.   
  85. }  

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

ythdyfa-jt-02

特别说明:之前按照本教程修主题的朋友应该遇到了一个问题吧!就是在IE浏览器下页面变形,本站也未能幸免,这里感谢网友锋锐、蛰伏的提醒,这里特表示感谢!其实解决方法非常简单:将widget.php文件用Notepad++打开,点击“格式”,选择“以UTF-8无BOM格式编码”,再保存文件即可解决。编辑其他文件后出现此类问题也可用此方法解决。文中提供的下载文件已更新为修改好的,可直接下载使用。对于原教程给各位带来的问题,本站表示非常抱歉!请各位多多原谅……


望星湖畔 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明知更鸟Hot News主题添加漂亮实用的订阅侧边栏工具
喜欢 (0)
[loveinghu@qq.com]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址