WordPress集成底部滚动推荐条,让好文章不再被埋没
最新消息:目前该功能张戈博客已推出 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="http://list.qq.com/cgi-bin/qf_invite?id=71a2f28dff63348c301ded982b0a083857be253891e9bae8" 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 冲突了,可以【点此】看看我之前分享的文章,参考解决。
好了,本文分享到此就结束了,中意的骚年们,赶紧折腾去吧!
- 几个实现分页的方法
- 如何识别IDA反汇编中动态链接库中的函数
- Kali Linux安装TL-WN821N USB无线网卡驱动(make失败)
- Cookie、Session登陆验证相关介绍和用法
- 题型分析
- .NET CORE 框架ABP的代码生成器(ABP Code Power Tools )使用说明文档
- Lua编写wireshark插件初探——解析Websocket上的MQTT协议
- 在Ubuntu 16.04环境下安装Docker-CE(附视频教程)
- 修改HTML5 input placeholder 颜色及修改失效的解决办法
- 设置同样字体大小,chrome浏览器有时字体偏大的解决办法(转)
- 手机端调用系统相册并上传图片
- select自定义小三角样式
- 一个非常好用的文字滚动的案例,鼠标悬浮可暂停
- localstorage和sessionstorage上手使用记录
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 聊聊dubbo-go的failfastCluster
- 一分钟学Python|Python的循环语句
- OpenCV4.4 中SIFT特征匹配调用演示
- 这些Python库虽然冷门,但功能真的很强大!
- SQL查找是否"存在",别再count了,很耗费时间的
- 采用 Vue 编写的功能强大的 Swagger-ui 页面
- SQL 计算中位数
- SQL 打印成绩单
- TypeScript 快速入门
- ES的新特性
- PHP设计模式|观察者模式
- JavaScript 中 this 的错误认识、绑定规则、常见问题讲解
- 实践:SpringBoot实现定时任务的动态增删启停
- Java并发编程的艺术[3]
- R语言 | 根据数据框的顺序进行筛选