最新消息:目前该功能张戈博客已推出 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="/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 冲突了,可以【点此】看看我之前分享的文章,参考解决。
好了,本文分享到此就结束了,中意的骚年们,赶紧折腾去吧!
这个功能不错,滚动公告确实不如滚动推荐好文章,厉害
集成很简单,你也可以试试。
不错哦
欢迎回访
博主是程序员?
我是个伪开发,不懂语言还硬要去折腾的那种。
不错的功能,有监控过这块的点击情况吗
这个必须得试试, :oops:
不错,这个挺有用的
QQ邮箱订阅功能好像不开放了,上次 申请没申请上。
感觉个人博客还是要干干净净的好一点。别装载太多东西了。
确实不错
效果是不错,就是感觉是不是太小了
大小还不是随自己调整么?做网站几句CSS还是会的···
这个确实比滚动公告强多了。折腾无止境啊。
喜欢可以试用下
张哥,折腾不出来啊...你来看看 http://www.enju.xyz/,底部的波浪是我自己加的,没冲突的
没内容输出。
看到这个就怕怕咯
怎么滚动不了,而且公告条在文章页不区中,张哥不帮我看看呀、 我的网址 http://www.ailipao.com
老大你好,我想问下,文章标题没有出现该怎么解决呢,底部有条,没有字。
不能吧?<?php the_title(); ?> 这函数是WP默认的
我用你的那个插件也不显示标题,这会不会是你说的那Jquery冲突造成的呢
不是,JQ冲突只会造成不滚动等情况。不显示是这个函数没有输出内容。你把代码中的 the_title() 改成 the_title_attribute() 试试
在IE下能显示,搜狗,360,谷歌下不显示呢
那就是CSS问题了,太窄了是不会显示的,自己调试下,对a标签做一个宽度限制吧。还有问题我就不知道了。。
嗯嗯,好的,麻烦啦,谢谢
插件版已更新,解决了你的问题,建议试试。文章地址:https://zhang.ge/4718.html
另外本文的代码也已修复。
已经使用了,再次感谢!
大神,冒昧的提醒下,可能最后css代码有一丢丢的失误,bg图片地址代码应该是一个“.”吧background:url(../images/bulletin.gif)
我搞了半天都不出现小喇叭,删除一个点后发现可以了,菜鸟,说的不对,大神见谅啊 :grin:
嗯,CSS是从我插件中剥离出来的,出现了相对路径问题,属于失误,我回头改一下。
还有,就是在360浏览器极速模式,也就是谷歌内核的情况下 没有滑动提交评论的地方
我这边正常,可能是网络问题导致js资源未加载成功。
再请教一下,为什么小站加了这功能,PC显示正常,一旦缩小屏幕尺寸,或者说手机浏览,底部公告栏则会空白,大神有时间可以帮忙看下么?
这个问题在我最新的插件版已修复,回头我更新下这里的代码。
你将CSS代码中的float:left; 删除即可:
修改后如下:
有兴趣可以看看我的插件版:https://zhang.ge/4718.html
你好,根据你的指导已经修改了,现在基本上可用,但是又发现一个新问题,就是在文字滚动的时候不是从下向上滚出,而是从右边出现闪到左边,博主有时间可以来小站看下,看看是什么问题,谢谢
奇怪,我的删除了float,也不会这样。估计和主题有关。
貌似解决了,都怪我,为了更贴合我主题的底部,我修改了公告条的高度
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,全是自己折腾的,所以比较啰嗦,见谅啊
真懂?明显是宽度小于480px隐藏,否则你现在浏览器宽度明显大于480为啥不隐藏?主要是为了手机端的优化。
text-decoration:none 表示去掉下划线,有的主题给超链接加了下划线,影响美观。不懂的自己丢到百度一搜,大把的解释。
谢谢
站长您好,弱弱的问一句底部滚动条右侧的音乐播放按钮是怎么实现的,求方法!
博客站内搜索一下 有好对话框
这个效果不错,折腾试试看。
我试试看
订阅失败!
抱歉,请检查链接再重新尝试。
关闭
无法使用订阅功能,点击了没有反应
你好,请问一下,你这网站文章最下面的“赞 赏 分享”这个怎么做的?能详细教教吗?谢谢
折腾了半天,纯代码和插件都不能滚动,查与JS冲突都很难查出,于是用另一种方法与本文方法相结合,终于解决了,并把方法分享出来,文章地址:http://www.0523jz.com/1217.html
不错,能解决很好,能分享更棒!
我在用了这个代码后不显示阅读多少次,只显示评论多少次呢?是我什么地方弄错了吗,我的站www.foresthouse.cn
需要安装 wp-postviews插件
现在好了,不过在页面底部显示的是“views”次,会多一个“views”,这个要怎么删除呢,我找了了几百个views不敢删。
postview插件设置界面,把“views”删除即可
谢谢,弄好了O(∩_∩)O哈哈~带版权转载到16年1月发布。。。
博主你的评论框是怎么做的呢
这个现在还能用么?手机上不能显示??