本文参考了 张戈博客的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,如图：
纯代码免插件制作loper主题底部滚动推荐条

纯代码免插件制作loper主题底部滚动推荐条

把bulletin.gif和feed.gif上传到主题文件夹的images文件夹当中，如果没有这个文件夹。把jQuery.textSlider.js上传到主题目录下。这些文件王桂明在文章结束打包上传供下载。

刷新一下网页在看效果：

纯代码免插件制作loper主题底部滚动推荐条

纯代码免插件制作loper主题底部滚动推荐条

如果张戈的方法或插件不好使，试试这种方法也许行的。折腾好了，文件打包提供下载：

» 订阅本站： http://www.0523jz.com/feed
Tags: , , , 相关文章 分享
Twitter 开心网 人人网 豆瓣 饭否 新浪微博 腾讯微博
已经有6个回复
Comment (6)
Trackbacks (0)
  1. 森林之家 　( 2015.12.11 02:04 ) : #-5

    我在用了这个代码后不显示阅读多少次，只显示评论多少次呢？www.foresthouse.cn

    Reply
  2. 王桂明 　( 2015.09.21 21:45 ) : #-4

    在帮别的朋友调试发现不能滚动，查找原因发现少调了一个js,因为我的主题本身就有没有发现这个问题，如果别的朋友没有jquery-1.4.2.min.js，就网上下载一个调用一下，或联系博主传给你。

    Reply
  3. 懿古今 　( 2015.09.21 09:33 ) : #-3

    看起来不错啊，效果竟然一样的，最关键是不会跟其他JS冲突，挺给力的

    Reply
  4. 拽立网 　( 2015.09.21 00:19 ) : #-2

    :eek: :eek: :eek: :eek: 大哥原来是JS代码问题呀，学习了！不愧是大哥技术超赞！ :smile: 我也赶紧收藏使用！ :mad:

    Reply
  1. 还没有Trackbacks