WordPress集成底部滚动推荐条,让好文章不再被埋没

最新消息:目前该功能张戈博客已推出WordPress插件,欢迎安装使用!详细介绍=>>

这个功能最开始叫底部滚动公告条,部分Wordpress主题集成自带,比如知更鸟主题。主题没集成的还可以使用万戈牌公告栏插件来实现这个功能。不过以往插件或主题集成的公告栏功能都只会滚动公告,即后台会有一个公告撰写栏,可以编辑数条公告然后在前台底部滚动显示。

最开始,张戈博客也是用了知更鸟主题特有的公告功能来发布一些公告,后来在我折腾中国博客联盟展示导航的时候,发现原来要实现滚动其他内容也是非常简单的!

因此,我就将鸟哥主题的公告栏代码修改了一下,实现了目前博客的公告栏效果:随机滚动数篇历史文章,并显示评论和浏览数目,用了几天了,感觉还不错!就来分享一下,也许会有朋友喜欢!

下面是实现方法:

一、PHP代码

将以上代码中的QQ邮箱订阅链接地址修改成你自己博客的订阅地址,然后粘贴到WordPress主题目录的footer.php的</body>之前保存即可。

二、CSS和JS

做完第一步,现在需要部署相关js和css了。

①、js代码

将以上代码保存为gg.js,然后上传到WordPress主题目录。

②、CSS代码

将以上CSS代码添加到主题的style.css当中。

三、相关图标

可以看到滚动条的左侧和右侧都有一个小图标,所以你需要下载这2个图片,然后上传到WordPress主题目录下的images文件夹当中,如果没有这个文件夹,那就新建一个好了。

①、小喇叭图标://res.zgboke.com/wp-content/themes/HotNewspro/images/bulletin.gif

②、订阅图标://res.zgboke.com/wp-content/themes/HotNewspro/images/feed.gif

好了,现在刷新博客应该就能看到效果了!

四、可选调整

①、本文分享的滚动条默认是随机显示5篇文章,如果你想修改这个数目,只要将第一步PHP代码中的  'posts_per_page' => 5 修改成你要的数值即可;

②、滚动速度可以修改第二步分享的JS代码来调整,里面都有详细注释,我就不赘述了。

③、如果发现底部的滚动条无法滚动,那可能是Jquery冲突了,可以【点此】看看我之前分享的文章,参考解决。

好了,本文分享到此就结束了,中意的骚年们,赶紧折腾去吧!

发表评论

gravatar

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

刷新评论

目前评论:54   其中:访客  36   博主  18

  1. 梦轩丽人 6 来自天朝的朋友 火狐浏览器 Windows XP 北京市 联通云BGP数据中心

    这个功能不错,滚动公告确实不如滚动推荐好文章,厉害

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 上海市 奇虎360科技电信CDN节点

      集成很简单,你也可以试试。

  2. 风色番茄 1 来自天朝的朋友 火狐浏览器 Windows 7 山东省青岛市 奇虎360科技联通CDN节点

    不错哦

  3. 8云资讯网 2 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省南京市 奇虎360科技电信CDN节点

    欢迎回访

  4. 小Z 2 来自天朝的朋友 谷歌浏览器 Windows XP 山东省青岛市 奇虎360科技联通CDN节点

    博主是程序员?

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 上海市 奇虎360科技电信CDN节点

      我是个伪开发,不懂语言还硬要去折腾的那种。

  5. 中国历史 6 来自天朝的朋友 火狐浏览器 Windows XP 河北省石家庄市 奇虎360科技联通CDN节点

    不错的功能,有监控过这块的点击情况吗

  6. 陌小雨 5 来自天朝的朋友 谷歌浏览器 Windows 7 广西贵港市 奇虎360科技电信CDN节点

    这个必须得试试, :oops:

  7. 飞哥博客 5 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省南京市 移动

    不错,这个挺有用的

  8. 上海保险网 4 来自天朝的朋友 谷歌浏览器 Windows 8 北京市 联通云BGP数据中心

    QQ邮箱订阅功能好像不开放了,上次 申请没申请上。

  9. 夏日博客 5 来自天朝的朋友 谷歌浏览器 Windows XP 广西贵港市 奇虎360科技电信CDN节点

    感觉个人博客还是要干干净净的好一点。别装载太多东西了。

  10. 软件酷(Softku) 2 来自天朝的朋友 谷歌浏览器 Windows XP 浙江省宁波市 奇虎360科技电信CDN节点

    确实不错

  11. 龙三公子 6 来自天朝的朋友 谷歌浏览器 Windows XP 北京市 电信通

    效果是不错,就是感觉是不是太小了

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 电信

      大小还不是随自己调整么?做网站几句CSS还是会的···

  12. 大肥羊 4 来自天朝的朋友 火狐浏览器 Windows 7 广东省肇庆市 电信

    这个确实比滚动公告强多了。折腾无止境啊。

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 电信

      喜欢可以试用下

  13. enju 0 来自天朝的朋友 谷歌浏览器 Windows 7 河北省秦皇岛市 联通

    张哥,折腾不出来啊…你来看看 http://www.enju.xyz/,底部的波浪是我自己加的,没冲突的

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 电信

      没内容输出。

  14. 户外家具厂家 0 来自天朝的朋友 谷歌浏览器 Windows 7 广东省佛山市 电信

    看到这个就怕怕咯

  15. donkey 2 来自天朝的朋友 搜狗浏览器 Windows 7 北京市 中电华通

    怎么滚动不了,而且公告条在文章页不区中,张哥不帮我看看呀、 我的网址 www.ailipao.com

  16. IT米粒网 2 来自天朝的朋友 谷歌浏览器 Windows 7 山东省临沂市 联通

    老大你好,我想问下,文章标题没有出现该怎么解决呢,底部有条,没有字。

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 8.1 广东省深圳市 电信

      不能吧?<?php the_title(); ?> 这函数是WP默认的

      • IT米粒网 2 来自天朝的朋友 谷歌浏览器 Windows 7 山东省临沂市 联通

        我用你的那个插件也不显示标题,这会不会是你说的那Jquery冲突造成的呢

        • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 8.1 广东省深圳市 电信

          不是,JQ冲突只会造成不滚动等情况。不显示是这个函数没有输出内容。你把代码中的 the_title() 改成 the_title_attribute() 试试

          • IT米粒网 2 来自天朝的朋友 谷歌浏览器 Windows 7 山东省临沂市 联通

            在IE下能显示,搜狗,360,谷歌下不显示呢

            • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 8.1 广东省深圳市 电信

              那就是CSS问题了,太窄了是不会显示的,自己调试下,对a标签做一个宽度限制吧。还有问题我就不知道了。。

              • IT米粒网 2 来自天朝的朋友 谷歌浏览器 Windows 7 山东省临沂市 联通

                嗯嗯,好的,麻烦啦,谢谢

                • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 8.1 广东省深圳市 电信

                  插件版已更新,解决了你的问题,建议试试。文章地址:http://zhangge.net/4718.html
                  另外本文的代码也已修复。

                  • IT米粒网 2 来自天朝的朋友 谷歌浏览器 Windows 7 山东省临沂市 联通

                    已经使用了,再次感谢!

  17. 雅兮网 3 来自天朝的朋友 Internet Explorer Windows 7 广东省珠海市 电信

    大神,冒昧的提醒下,可能最后css代码有一丢丢的失误,bg图片地址代码应该是一个“.”吧background:url(../images/bulletin.gif)
    我搞了半天都不出现小喇叭,删除一个点后发现可以了,菜鸟,说的不对,大神见谅啊 :grin:

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 联通

      嗯,CSS是从我插件中剥离出来的,出现了相对路径问题,属于失误,我回头改一下。

  18. 雅兮网 3 来自天朝的朋友 Internet Explorer Windows 7 广东省珠海市 电信

    还有,就是在360浏览器极速模式,也就是谷歌内核的情况下 没有滑动提交评论的地方

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 联通

      我这边正常,可能是网络问题导致js资源未加载成功。

  19. 雅兮网 3 来自天朝的朋友 Internet Explorer Windows 7 广东省珠海市 电信

    再请教一下,为什么小站加了这功能,PC显示正常,一旦缩小屏幕尺寸,或者说手机浏览,底部公告栏则会空白,大神有时间可以帮忙看下么?

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 联通

      这个问题在我最新的插件版已修复,回头我更新下这里的代码。
      你将CSS代码中的float:left; 删除即可:

      修改后如下:

      有兴趣可以看看我的插件版:http://zhangge.net/4718.html

      • 雅兮网 3 来自天朝的朋友 Internet Explorer Windows 7 广东省珠海市 电信

        你好,根据你的指导已经修改了,现在基本上可用,但是又发现一个新问题,就是在文字滚动的时候不是从下向上滚出,而是从右边出现闪到左边,博主有时间可以来小站看下,看看是什么问题,谢谢

        • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 电信

          奇怪,我的删除了float,也不会这样。估计和主题有关。

          • 雅兮网 3 来自天朝的朋友 Internet Explorer Windows 7 广东省珠海市 电信

            貌似解决了,都怪我,为了更贴合我主题的底部,我修改了公告条的高度
            height:24px;line-height:24px
            问题就出在这个line-height上,改为24就出现了上述问题,现已改回23px,只怪自己不懂css, :!:
            还有,我分析了你的插件,CSS多了 @media screen and (max-width:480px){#gg{display: none;}} 这个我懂,宽度大于480时,自动隐藏。
            但 text-decoration:none !important; 这段代码看不懂,请问有必要添加到现有的css里么
            没学过css,全是自己折腾的,所以比较啰嗦,见谅啊

            • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 电信

              真懂?明显是宽度小于480px隐藏,否则你现在浏览器宽度明显大于480为啥不隐藏?主要是为了手机端的优化。
              text-decoration:none 表示去掉下划线,有的主题给超链接加了下划线,影响美观。不懂的自己丢到百度一搜,大把的解释。

              • 雅兮网 3 来自天朝的朋友 谷歌浏览器 Windows 7 广东省珠海市 电信

                谢谢

  20. xiaoben@007 1 来自天朝的朋友 Internet Explorer Windows 7 安徽省芜湖市 电信

    站长您好,弱弱的问一句底部滚动条右侧的音乐播放按钮是怎么实现的,求方法!

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 电信

      博客站内搜索一下 有好对话框

  21. 番茄 2 来自天朝的朋友 谷歌浏览器 Windows 7 天津市 电信

    这个效果不错,折腾试试看。

  22. 交通事故律师 4 来自天朝的朋友 搜狗浏览器 Windows XP 广东省 电信

    我试试看

  23. 交通事故律师 4 来自天朝的朋友 搜狗浏览器 Windows XP 广东省 电信

    订阅失败!
    抱歉,请检查链接再重新尝试。
    关闭
    无法使用订阅功能,点击了没有反应

  24. Leveyai 0 来自天朝的朋友 QQ浏览器 Windows 8.1 广东省东莞市 电信

    你好,请问一下,你这网站文章最下面的“赞 赏 分享”这个怎么做的?能详细教教吗?谢谢

  25. 杰创官方博客 1 来自天朝的朋友 谷歌浏览器 Windows XP 江苏省泰州市兴化市 电信

    折腾了半天,纯代码和插件都不能滚动,查与JS冲突都很难查出,于是用另一种方法与本文方法相结合,终于解决了,并把方法分享出来,文章地址:http://www.0523jz.com/1217.html

    • 张戈 [博主] 来自天朝的朋友 Safari浏览器  Android 4.4.4 M463C Build/KTU84P 广东省深圳市 联通

      不错,能解决很好,能分享更棒!

  26. 回梦博客 2 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省南京市 电信

    我在用了这个代码后不显示阅读多少次,只显示评论多少次呢?是我什么地方弄错了吗,我的站www.foresthouse.cn

    • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Windows 7 广东省广州市 电信

      需要安装 wp-postviews插件

      • 森林之家 2 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省南京市 电信

        现在好了,不过在页面底部显示的是“views”次,会多一个“views”,这个要怎么删除呢,我找了了几百个views不敢删。

        • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Mac OS X 10_11_1 广东省深圳市 电信

          postview插件设置界面,把“views”删除即可

      • 森林之家 2 来自天朝的朋友 谷歌浏览器 Windows 7 江苏省南京市 电信

        谢谢,弄好了O(∩_∩)O哈哈~带版权转载到16年1月发布。。。

  27. 转运女王 1 来自天朝的朋友 谷歌浏览器 Windows 10 云南省曲靖市 电信

    博主你的评论框是怎么做的呢

加载中,请稍候...