本文参考了 张戈博客的WordPress集成底部滚动推荐条,让好文章不再被埋没的文章,开始按上面去做,但是怎么搞底部滚动推荐条都不能够滚动,折腾了半天,都没找到JQ冲突的地方,于是放弃了这种方法,取其CSS样式,另外重新找办法解决。
我前面在网上搜索整理了一篇jQuery插件一行或多行文字向上滚动textSlider,看能不能利用文字向上滚动来解决张戈的与JS冲突问题,于是又折腾了几个小时,终于解决了这个问题,现把这个方法分享出来。
步骤如下:
一、PHP代码
<!--. WordPress集成底部滚动推荐条start --> <div id="gg"> <div class="wp_close"><a href="javascript:void(0)" onclick="$('#gg').slideUp('slow');" title="关闭">×</a> <div id="feedb"><a href="http://list.qq.com/cgi-bin/qf_invite?id=270ff4eabe66ccf9404f5c7b511b1ca70a468ea8efecc097 " 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"> $(document).ready(function(){ $(".bulletin").textSlider({line:1,speed:500,timer:3000}); }); </script> <!--. WordPress集成底部滚动推荐条end --> |
将以上代码中的QQ邮箱订阅链接地址修改成你自己博客的订阅地址,然后粘贴到WordPress主题目录的footer.php的</body>之前保存即可。
二、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当中。
三、引用jQuery.textSlider.js
<!--jQuery插件一行或多行文字向上滚动textSlider --> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/jQuery.textSlider.js"></script> |
在头部添加如上代码
四、上传图标和JS,如图:
把bulletin.gif和feed.gif上传到主题文件夹的images文件夹当中,如果没有这个文件夹。把jQuery.textSlider.js上传到主题目录下。这些文件王桂明在文章结束打包上传供下载。
刷新一下网页在看效果:

纯代码免插件制作loper主题底部滚动推荐条
如果张戈的方法或插件不好使,试试这种方法也许行的。折腾好了,文件打包提供下载:
» 本文链接:
http://www.0523jz.com/1217.html
» 订阅本站:
http://www.0523jz.com/feed
» 转载请注明来源:王桂明's Blog
» 《纯代码免插件制作loper主题底部滚动推荐条》
已经有6个回复
Comment (6)
Trackbacks (0)
-
还没有Trackbacks
我在用了这个代码后不显示阅读多少次,只显示评论多少次呢?www.foresthouse.cn
在帮别的朋友调试发现不能滚动,查找原因发现少调了一个js,因为我的主题本身就有没有发现这个问题,如果别的朋友没有jquery-1.4.2.min.js,就网上下载一个调用一下,或联系博主传给你。
看起来不错啊,效果竟然一样的,最关键是不会跟其他JS冲突,挺给力的
@懿古今: 折腾了大半天才搞出来
@拽立网: 这只是个方法,具体到自己网站要调试的