网站建设

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

Jager · 11月2日 · 2014年 3765次已读

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

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

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

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

下面是实现方法:

一、PHP代码

<div id="gg">
  <div class="wp_close"><a href="javascript:void(0)" onclick="$('#gg').slideUp('slow');" title="关闭">×</a>
    <div id="feedb"><a href="//zhang.ge/goto/aHR0cDovL2xpc3QucXEuY29tL2NnaS1iaW4vcWZfaW52aXRlP2lkPTcxYTJmMjhkZmY2MzM0OGMzMDFkZWQ5ODJiMGEwODM4NTdiZTI1Mzg5MWU5YmFlOA==" target="_blank" rel="nofollow" target="_blank" title="欢迎使用QQ邮箱订阅张戈博客" class="image"><img alt="订阅图标按钮" src="<?php bloginfo('template_directory'); ?>/images/feed.gif" style="width:23px;height:23px;" /></a></div>
      <div class="bulletin">
	<ul>
	<?php wp_reset_query();query_posts( array ( 'orderby' => 'rand', 'showposts' => 5, 'ignore_sticky_posts' => 10 ) ); while ( have_posts() ) : the_post();?>
	<li><a href="<?php the_permalink(); ?>" target="_blank" title="细看 <?php the_title(); ?>">
	<?php echo '随机推荐:《';the_title();echo '》';if(function_exists('the_views')) {print '( 阅读';the_views();print '次 |</a>';}comments_popup_link('坐等沙发','1条评论','%条评论'); ?>)</li>
	<?php endwhile; ?>
        </ul>
	</div>
</div>
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/gg.js" ></script>

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

二、CSS和JS

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

①、js代码

function turnoff(obj) {
	document.getElementById(obj).style.display = "none";
}
// 文字滚动
(function($) {
	$.fn.extend({
	Scroll: function(opt, callback) {
	if (!opt) var opt = {};
		var _this = this.eq(0).find("ul:first");
		var lineH = _this.find("li:first").height(),
		line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10),
		speed = opt.speed ? parseInt(opt.speed, 10) : 7000, //卷动速度,数值越大,速度越慢(毫秒)
                timer = opt.timer ? parseInt(opt.timer, 10) : 7000; //滚动的时间间隔(毫秒)
		if (line == 0) line = 1;
		var upHeight = 0 - line * lineH;
		scrollUp = function() {
			_this.animate({
				marginTop: upHeight
			}, speed, function() {
				for (i = 1; i <= line; i++) {
					_this.find("li:first").appendTo(_this);
					}
					_this.css({
					marginTop: 0
					});
				});
			}
			_this.hover(function() {
				clearInterval(timerID);
			}, function() {
				timerID = setInterval("scrollUp()", timer);
			}).mouseout();
		}
	})
})(jQuery);
$(document).ready(function() {
	$(".bulletin").Scroll({
		line: 1,
		speed: 1000,
		timer: 5000
	}); //修改此数字调整滚动时间
});

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

②、CSS代码

#gg{position:fixed;bottom:0;background:#000;width:100%;height:23px;line-height:23px;z-index:9999;opacity:.60;filter:alpha(opacity=60);_bottom:auto;_width:100%;_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));-webkit-box-shadow:10px 0 5px #000;-moz-box-shadow:10px 0 5px #000;box-shadow:10px 0 5px #000}
#gg a{color:#fff;letter-spacing:2px;text-shadow:0px 1px 0px #000}
.wp_close a{float:right;margin:0 10px 0 0}
.bulletin{height:23px;color:#fff;margin:0 0 0 20px;background:url(./images/bulletin.gif) no-repeat;min-height:23px;overflow:hidden}
.bulletin a{float:left}
.bulletin li{height:23px;padding-left:25px}

将以上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冲突了,可以【点此】看看我之前分享的文章,参考解决。

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

55 条回应
  1. 梦轩丽人2014-11-2 · 22:21

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

    • Jager2014-11-3 · 10:49

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

  2. 风色番茄2014-11-2 · 22:40

    不错哦

  3. 8云资讯网2014-11-2 · 23:51

    欢迎回访

  4. 小Z2014-11-3 · 10:48

    博主是程序员?

    • Jager2014-11-3 · 10:49

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

  5. 中国历史2014-11-3 · 11:46

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

  6. 陌小雨2014-11-3 · 12:40

    这个必须得试试, 😳

  7. 飞哥博客2014-11-3 · 14:01

    不错,这个挺有用的

  8. 上海保险网2014-11-3 · 14:30

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

  9. 夏日博客2014-11-3 · 15:29

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

  10. 软件酷(Softku)2014-11-3 · 16:13

    确实不错

  11. 龙三公子2014-11-3 · 19:40

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

    • Jager2014-11-3 · 21:24

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

  12. 大肥羊2014-11-3 · 20:52

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

    • Jager2014-11-3 · 21:23

      喜欢可以试用下

  13. enju2014-11-5 · 21:20
    • Jager2014-11-5 · 22:09

      没内容输出。

  14. 户外家具厂家2014-11-21 · 17:43

    看到这个就怕怕咯

  15. donkey2014-12-11 · 17:18

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

  16. IT米粒网2015-3-2 · 18:42

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

    • Jager2015-3-3 · 12:58

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

      • IT米粒网2015-3-3 · 13:00

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

        • Jager2015-3-3 · 13:03

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

          • IT米粒网2015-3-3 · 13:43

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

            • Jager2015-3-3 · 13:44

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

              • IT米粒网2015-3-3 · 13:46

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

                • Jager2015-3-4 · 13:14

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

                  • IT米粒网2015-3-4 · 13:21

                    已经使用了,再次感谢!

  17. 雅兮网2015-5-4 · 22:29

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

    • Jager2015-5-4 · 23:19

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

  18. 雅兮网2015-5-4 · 22:30

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

    • Jager2015-5-4 · 23:20

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

  19. 雅兮网2015-5-4 · 22:47

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

    • Jager2015-5-4 · 23:24

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

      .bulletin{float:left;height:23px;color:#fff;margin:0 0 0 20px;background:url(../images/bulletin.gif) no-repeat;min-height:23px;overflow:hidden}
      

      修改后如下:

      .bulletin{height:23px;color:#fff;margin:0 0 0 20px;background:url(../images/bulletin.gif) no-repeat;min-height:23px;overflow:hidden}
      

      有兴趣可以看看我的插件版:https://zhang.ge/4718.html

      • 雅兮网2015-5-5 · 10:39

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

        • Jager2015-5-5 · 13:32

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

          • 雅兮网2015-5-5 · 14:26

            貌似解决了,都怪我,为了更贴合我主题的底部,我修改了公告条的高度
            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,全是自己折腾的,所以比较啰嗦,见谅啊

            • Jager2015-5-5 · 23:56

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

  20. [email protected]2015-5-28 · 16:26

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

    • Jager2015-5-28 · 16:38

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

  21. 番茄2015-7-24 · 21:11

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

  22. 交通事故律师2015-7-28 · 23:45

    我试试看

  23. 交通事故律师2015-7-28 · 23:46

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

  24. Leveyai2015-8-2 · 0:14

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

  25. 杰创官方博客2015-9-20 · 22:14

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

    • Jager2015-9-20 · 23:31

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

  26. 回梦博客2015-12-11 · 2:01

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

    • Jager2015-12-11 · 12:50

      需要安装 wp-postviews插件

      • 森林之家2015-12-11 · 21:54

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

        • Jager2015-12-11 · 22:02

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

      • 森林之家2015-12-11 · 22:52

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

  27. 转运女王2016-11-30 · 14:33

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

  28. 莫斯科2019-3-13 · 19:30

    这个现在还能用么?手机上不能显示??