【WordPress 美化教程】RiPro 主题和日主题如何实现网页滚动弹幕?使用 barrager 插件实现RiPro主题和日主题网页滚动弹幕
教程开始
在主题根目录下创建 server.php 文件,并上传到主题根目录下
<?php/*!
*@name server.php
*@project jquery.barrager.js
*@des 日主题弹幕插件
*@author Ernie
*@url https://www.huizhanii.com
*/require_once($_SERVER['DOCUMENT_ROOT'] . '/wp-config.php');require_once($_SERVER['DOCUMENT_ROOT'] . '/wp-includes/wp-db.php');$list = $wpdb->get_results("SELECT * FROM $wppay_table_name ORDER BY create_time DESC limit 10");$mode = intval($_GET['mode']);$barrages = array();foreach ($list as $value) { if ($value->post_id != 0) { $info = substr_replace(get_user_by('id', $value->user_id)->user_login, '**', '2') . " 刚刚下载了 " . mb_substr(get_the_title($value->post_id), 0, 8); $href = get_permalink($value->post_id); } else { $info = substr_replace(get_user_by('id', $value->user_id)->user_login, '**', '2') . " 刚刚开通了 VIP"; $href = home_url('/user?action=vip'); } $img = str_replace('http:', 'https:', get_user_meta($value->user_id)['photo'][0]); $new = array( 'info' => $info, 'img' => $img, 'href' => $href, 'speed' => 15, 'color' => '#000', 'bottom' => 70, 'close' => false ); array_push($barrages, $new);};if ($mode === 1) { echo json_encode($barrages[array_rand($barrages)]);} elseif ($mode === 2) { echo json_encode($barrages);}
全选代码
复制
创建 jquery.barrager.js 文件,并上传到主题的 js/文件下,js 内容见下方代码
(function($){$.fn.barrager=function(barrage){barrage=$.extend({close:true,bottom:0,max:10,speed:8,color:"#fff",old_ie_color:"#000000"},barrage||{});var time=new Date().getTime();var barrager_id="barrage_"+time;var id="#"+barrager_id;var div_barrager=$("<div class='barrage' id='"+barrager_id+"'></div>").appendTo($(this));var window_height=$(window).height()-100;var this_height=(window_height>this.height())?this.height():window_height;var window_width=$(window).width()+500;var this_width=(window_width>this.width())?this.width():window_width;var bottom=(barrage.bottom==0)?Math.floor(Math.random()*this_height+40):barrage.bottom;div_barrager.css("bottom",bottom+"px");div_barrager_box=$("<div class='barrage_box cl'></div>").appendTo(div_barrager);if(barrage.img){div_barrager_box.append("<a class='portrait z' href='javascript:;'></a>");var img=$("<img src='' >").appendTo(id+" .barrage_box .portrait");img.attr("src",barrage.img)}div_barrager_box.append(" <div class='z p'></div>");if(barrage.close){div_barrager_box.append(" <div class='close z'></div>")}var content=$("<a title='' href='' target='_blank' rel="noopener noreferrer"></a>").appendTo(id+" .barrage_box .p");content.attr({"href":barrage.href,"id":barrage.id}).empty().append(barrage.info);if(navigator.userAgent.indexOf("MSIE 6.0")>0||navigator.userAgent.indexOf("MSIE 7.0")>0||navigator.userAgent.indexOf("MSIE 8.0")>0){content.css("color",barrage.old_ie_color)}else{content.css("color",barrage.color)}var i=0;div_barrager.css("margin-right",0);$(id).animate({right:this_width},barrage.speed*1000,function(){$(id).remove()});div_barrager_box.mouseover(function(){$(id).stop(true)});div_barrager_box.mouseout(function(){$(id).animate({right:this_width},barrage.speed*1000,function(){$(id).remove()})});$(id+".barrage .barrage_box .close").click(function(){$(id).remove()})};$.fn.barrager.removeAll=function(){$(".barrage").remove()}})(jQuery);$.ajaxSettings.async=false;$.getJSON("https://www.你的域名/wp-content/themes/rizhuti/server.php?mode=2",function(data){var looper_time=5000;var items=data;var total=data.length;var run_once=true;var index=0;barrager();function barrager(){if(run_once){looper=setInterval(barrager,looper_time);run_once=false}$("body").barrager(items[index]);index++;if(index==total){clearInterval(looper);return false}}});
全选代码
复制
记得将 js 文件中的(网址)和(主题名)改为自己的正确路径,别忘了网址的 http/https。 修改主题的 header.php 文件,引用刚刚创建的 js 文件,在主题前插入代码
<script type='text/javascript' src='https://www.你的域名/wp-content/themes/rizhuti/js/jquery.barrager.js'></script>
全选代码
复制
在主题style.css文件里插入样式代码
.barrage{position: fixed;bottom:70px;right:-500px;display: inline-block;width: 500px;z-index: 99999}.barrage_box{background-color: rgba(0,0,0,.5);padding-right: 8px; height: 40px;display: inline-block;border-radius: 25px;transition: all .3s;}.barrage_box .portrait{ display: inline-block;margin-top: 4px; margin-left: 4px; width: 32px;height: 32px;border-radius: 50%;overflow: hidden;}.barrage_box .portrait img{width: 100%;height: 100%;}.barrage_box div.p a{ margin-right: 2px; font-size: 14px;color: #fff;line-height: 40px;margin-left: 18px; }.barrage_box div.p a:hover{text-decoration: underline;}.barrage_box .close{visibility: hidden;opacity: 0; text-align: center; width:25px;height: 25px;margin-left: 20px;border-radius: 50%;background:rgba(255,255,255,.1);margin-top:8px; background-image: url(close.png);}.barrage_box:hover .close{visibility:visible;opacity: 1;}.barrage_box .close a{display:block;}.barrage_box .close .icon-close{font-size: 14px;color:rgba(255,255,255,.5);display: inline-block;margin-top: 5px; }.barrage .z {float: left !important;}.barrage a{text-decoration:none;}
全选代码
复制
RiPro 教程
在主题根目录下创建 server.php 文件,并上传到主题根目录下
<?php/*!
*@name server.php
*@project jquery.barrager.js
*@des RiPro 弹幕插件服务端
*@author Ernie
*@url https://www.xiaobaidaxue.com
*/require_once($_SERVER['DOCUMENT_ROOT'] . '/wp-config.php');require_once($_SERVER['DOCUMENT_ROOT'] . '/wp-includes/wp-db.php');$list = $wpdb->get_results("SELECT * FROM $paylog_table_name WHERE status =1 ORDER BY pay_time DESC limit 10");$mode = intval($_GET['mode']);$barrages = array();foreach ($list as $value) { $info = substr_replace(get_user_by('id', $value->user_id)->user_login, '**', '2') . " 刚刚下载了 " . mb_substr(get_the_title($value->post_id), 0, 8); $img = str_replace('http:', 'https:', get_user_meta($value->user_id)['user_custom_avatar'][0]); $href = get_permalink($value->post_id); $new = array( 'info' => $info, 'img' => $img, 'href' => $href, 'speed' => 15, 'color' => '#fff', 'bottom' => 70, 'close' => false ); array_push($barrages, $new);};if ($mode === 1) { echo json_encode($barrages[array_rand($barrages)]);} elseif ($mode === 2) { echo json_encode($barrages);}
全选代码
复制
创建 jquery.barrager.js 文件,并上传到主题的 assets/js 文件下,js 内容见下方代码
(function($){$.fn.barrager=function(barrage){barrage=$.extend({close:true,bottom:0,max:10,speed:8,color:"#fff",old_ie_color:"#000000"},barrage||{});var time=new Date().getTime();var barrager_id="barrage_"+time;var id="#"+barrager_id;var div_barrager=$("<div class='barrage' id='"+barrager_id+"'></div>").appendTo($(this));var window_height=$(window).height()-100;var this_height=(window_height>this.height())?this.height():window_height;var window_width=$(window).width()+500;var this_width=(window_width>this.width())?this.width():window_width;var bottom=(barrage.bottom==0)?Math.floor(Math.random()*this_height+40):barrage.bottom;div_barrager.css("bottom",bottom+"px");div_barrager_box=$("<div class='barrage_box cl'></div>").appendTo(div_barrager);if(barrage.img){div_barrager_box.append("<a class='portrait z' href='javascript:;'></a>");var img=$("<img src='' >").appendTo(id+" .barrage_box .portrait");img.attr("src",barrage.img)}div_barrager_box.append(" <div class='z p'></div>");if(barrage.close){div_barrager_box.append(" <div class='close z'></div>")}var content=$("<a title='' href='' target='_blank' rel="noopener noreferrer"></a>").appendTo(id+" .barrage_box .p");content.attr({"href":barrage.href,"id":barrage.id}).empty().append(barrage.info);if(navigator.userAgent.indexOf("MSIE 6.0")>0||navigator.userAgent.indexOf("MSIE 7.0")>0||navigator.userAgent.indexOf("MSIE 8.0")>0){content.css("color",barrage.old_ie_color)}else{content.css("color",barrage.color)}var i=0;div_barrager.css("margin-right",0);$(id).animate({right:this_width},barrage.speed*1000,function(){$(id).remove()});div_barrager_box.mouseover(function(){$(id).stop(true)});div_barrager_box.mouseout(function(){$(id).animate({right:this_width},barrage.speed*1000,function(){$(id).remove()})});$(id+".barrage .barrage_box .close").click(function(){$(id).remove()})};$.fn.barrager.removeAll=function(){$(".barrage").remove()}})(jQuery);$.ajaxSettings.async=false;$.getJSON("https://你的域名/wp-content/themes/ripro/server.php?mode=2",function(data){var looper_time=5000;var items=data;var total=data.length;var run_once=true;var index=0;barrager();function barrager(){if(run_once){looper=setInterval(barrager,looper_time);run_once=false}$("body").barrager(items[index]);index++;if(index==total){clearInterval(looper);return false}}});
全选代码
复制 yyxinfa: yyxinfa: aahack: kuaishenghu: kuaishenghu:
记得将 js 文件中的(网址)和(主题名)改为自己的正确路径,别忘了网址的 http/https。 修改主题的 header.php 文件,引用刚刚创建的 js 文件,在主题前插入代码
<script type='text/javascript' src='https://www.你的域名/wp-content/themes/ripro/assets/js/jquery.barrager.js'></script>
全选代码
复制
在主题 assets/css/diy.css 文件里插入样式代码
.barrage{position: fixed;bottom:70px;right:-500px;display: inline-block;width: 500px;z-index: 99999}.barrage_box{background-color: rgba(0,0,0,.5);padding-right: 8px; height: 40px;display: inline-block;border-radius: 25px;transition: all .3s;}.barrage_box .portrait{ display: inline-block;margin-top: 4px; margin-left: 4px; width: 32px;height: 32px;border-radius: 50%;overflow: hidden;}.barrage_box .portrait img{width: 100%;height: 100%;}.barrage_box div.p a{ margin-right: 2px; font-size: 14px;color: #fff;line-height: 40px;margin-left: 18px; }.barrage_box div.p a:hover{text-decoration: underline;}.barrage_box .close{visibility: hidden;opacity: 0; text-align: center; width:25px;height: 25px;margin-left: 20px;border-radius: 50%;background:rgba(255,255,255,.1);margin-top:8px; background-image: url(close.png);}.barrage_box:hover .close{visibility:visible;opacity: 1;}.barrage_box .close a{display:block;}.barrage_box .close .icon-close{font-size: 14px;color:rgba(255,255,255,.5);display: inline-block;margin-top: 5px; }.barrage .z {float: left !important;}.barrage a{text-decoration:none;}
转载请注明:汇站网 » 使用 barrager 插件的 RiPro 主题和日本主题网页的滚动弹幕 WordPress 美化教程
常见问题
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
相关文章
猜你喜欢
- 7B2 PRO主题5.4.2免授权版本(直接安装) 2024-05-11
- 如果WordPress搜索结果为空,自动跳转到网站首页 2024-02-01
- 浏览器缓存可以分为强缓存和协商缓存两种方式 2024-01-21
- 如何让WordPress支持上传WebP格式图片? 2024-01-20
- 利用WordPress设置API实现自定义设置页面。 2024-01-20
- WordPress api接口 版本历史 2024-01-20
- WordPress用户密码加密和验证的详细解释 2024-01-19
- WordPress禁用媒体附件页面教程 2024-01-19
- WordPress修改了文章的默认密码保护提示 2024-01-19
- WordPress配置(站群)多站点详细教程方法 2024-01-19
热门评论
看看咋样 111111111111111111111111111111111111111111111111111111111111
热门文章
- 2021-08-21970
- 2021-11-071,048
- 2021-08-111,013
- 2021-08-121,060
- 2021-04-291,003
热门标签
- 网络爬虫网页全自动制作生成系统源码自动生成temp-write-test文件魔众商城系统html网页模板下载CMS网站源码WordPress复制文本并自动添加版权信息杰奇WAP小说模板thinkphp自动采集响应式小说站程序人人夺宝程序源码海洋CMS仿非凡在线影院蘑菇种植合成RiPro小八子子主题国际交友营销系统源码I盲盒抽奖系统源码twitter社区推特PHP源码赞片网苹果CMSV10手机模板loldytt原创全集网源代码电子科技手机配件营销网站获取文章或页面的最后更新时间YGBOOK自动采集短视频去水印小程序Argon博客主题LOGO制作网站源代码短视频点赞源码响应式电影网站模板苹果cms手机版mp3播放器样式图文展示闲逛销售商城源码二次元风格发卡源码数字藏品