无作为
不仅仅是一种态度!
当前位置: 无作为 » 技术教程 » wordpress技术经验 » WordPress底部滚动随机文章推荐条

WordPress底部滚动随机文章推荐条

可以看到无作为的下面添加了底部随机文章推荐的功能,调用的是文章随机调用行数,配合简单的网页html+css设计,使其在网站下方显示随机文章推荐的功能,以及调用了显示评论的功能,WordPress底部滚动随机文章推荐条

这么一来用户浏览的时候可以吸引眼球,让更多的好文章被看到,以下就为大家分享这么一段实现代码:

WordPress底部滚动随机文章推荐条

这里调用的是随机文章代码,大家可以自己在代码中换,比如你想调用热门文章的话,也可以自己更换即可,代码非常灵活,可以自定义设置随机文章的推荐个数,默认是五篇,

PHP代码,加入foot的</body>之前即可:

<div id="gg">
 <div class="wp_close"><a href="javascript:void(0)" onclick="$('#gg').slideUp('slow');" title="关闭">×</a>
 <div id="feedb"><a rel="nofollow" href="http://www.wuzuowei.net/link?url=aHR0cDovL3dwYS5xcS5jb20vbXNncmQ/dj0zJmFtcDt1aW49ODM0NzIzNzk3JmFtcDtzaXRlPXFxJmFtcDttZW51PXllcw==" rel="nofollow" target="_blank" title="在线QQ聊天" class="image"><img alt="订阅图标按钮" src="<?php bloginfo('template_directory'); ?>/img/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号码。

CSS和JS代码

将对于的代码放入主题文件即可,这里是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}

样式大家可以自己修改,放入主题style.css即可。

js代码如下,将下列JS代码保存为gg.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
 }); //修改此数字调整滚动时间
});

相对应的效果都在上面有注明了,大家可以自己修改。

对应图标,大家自己下载吧,也可以自己替换哦。

教程到此结束,演示为本站下方的公告栏,会显示随机文章,下方可以下载图标了JS文件。


历史上的今天:

所有免费资源、福利、电影、破解软件未经允许不得转载:www.wuzuowei.net无作为 » WordPress底部滚动随机文章推荐条
分享到:更多 (0)

来句评论吧! 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

无作为-不仅仅是一种态度

我要提问查看分享