前言
- 本页主题美化内容是彩豆博客在建站时一个一个测试过无任何错误的记录合集，使用之前先参考本站，若觉得实用就拿去用吧，我会持续的更新。
主题美化说明：
- 主题美化、小工具可能会有一定程度使网站加载缓慢、CSS 全局污染等等一系列的问题，请一定要测试后在进行美化。
- 主题美化可能会对主题文件进行修改，更新时请及时备份主题美化的文件，或者收藏本站，以免一些主题页面或美化效果丢失。
必要说明：（核心重点）
↓↓↓↓↓↓↓↓↓↓不会添加代码的看下面↓↓↓↓↓↓↓↓↓
（最新版子比主题） CSS 代码添加到后台：子比主题设置—>自定义代码—>自定义 CSS 样式 （最新版子比主题） JS 即 javascript 代码添加到：后台子比主题设置—>自定义代码—>自定义 javascript 代码 （最新版子比主题） 没有特殊说明的小工具，自定义 HTML 小工具：添加网站后台—>外观–>小工具–>点击【自定义 HTML】选择放置的位置—>把代码复制进去，保存即可。 ↑↑↑↑↑↑不会添加代码的看上面↑↑↑↑↑↑ - 其他添加方式的，我会在教程里告知，若只需添加 CSS+JS 的教程，我可能不重复告知了，请注意看上面的方法。
- 有些美化教程本站已经发布的，本文章将不再进行编写教程，直接跳转到文章页面。
美化教程
1.网站底部添加 CTRL+D 收藏按钮
前言
这个小东西估计大家都很熟悉，一般就是引导用户收藏网站用途，因此分享给大家
添加教程
-
- 1、将下面的代码添加在网站页脚底部或者在 wp 后台添加小工具，效果展示是一样的我是添加在小工具的
-
- 2、添加路径：在后台—》外观—》小工具—》自定义 HTML—》 选择你需要放的位置
-
- 社长是放在 所有页面-页脚区内部 添加下方代码
<!---CTRL+D 收藏小工具开始--->
<style type="text/css">
#go-fav {
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
background: #3d3d3d;
font-size: 14px;
font-weight: 400;
color: rgba(255, 255, 255, 1)
}
#go-fav span {
padding: 5px 10px;
background: rgba(255, 197, 0, 1);
border-radius: 5px;
color: #202020;
margin: 0 5px
}
#go-fav a {
color: #aeaeae
}
#go-fav a:hover {
color: var(--focus-color)
}
</style>
<div id="go-fav"> 赶紧收藏我们,查看更多心仪的内容？按<span>Ctrl</span>+<span>D</span>收藏我们 或<a class="find-more" href="/" rel="nofollow noopener" target="_blank"> 发现更多</a></div>
<!---CTRL+D 收藏小工具结束-彩豆博客 www.521cd.cn--->展示效果
2.给网站底部添加数据库查询和页面加载耗时功能
前言：
有朋友联系想要这个效果功能，因为最近比较忙，一直没有分享，正好趁着这次分享一次性分享给大家
使用方法
1、在 zibll 主题目录下，themes/zibll/footer.php文件中的顶部添加下面添加下面的代码：
<!---给网站数据库查询&页面加载耗时功能--->
<center>
<p> 本次数据库查询：<?php echo get_num_queries(); ?>次 页面加载耗时<?php timer_stop(3); ?> 秒</p>
</center>
<!---网站数据库查询&页面加载耗时功能 彩豆博客 www.521cd.cn--->展示效果
3.网站右下角悬浮按钮美化
前言：
这个功能适用于喜欢一些二次元的朋友，具体本站就添加效果了，可查看下面的预览截图
使用教程
-
- 1.子比主题设置—>自定义代码—>自定义 CSS 样式：,添加以下 CSS 代码：
-
- 2.在代码 28 行 background: url(）括号内填写你需要显示的图片链接
/*悬浮按钮美化开始 彩豆博客 www.521cd.cn*/
span.float-btn.more-btn.hover-show.nowave {
margin-top: 0px
}
.float-right.round.position-bottom {
background: #fff;
border-radius: var(--main-radius);
transition: 0s;
right: 1px;
bottom: 170px;
border-radius: 20px 0 0 20px;
box-shadow: -5px 3px 10px 0px rgb(5 5 5 / 15%)
}
.float-right.round .float-btn {
border-radius: 8px 0px 0px 17px
}
.float-right .float-btn {
background: #fff
}
.float-right.round.position-bottom::before {
content: '';
width: 30px;
height: 60px;
background: url(填写你显示的图片链接);
background-size: cover;
display: block;
margin: 5px 3px 0 7px;
}
.dark-theme .float-right.round.position-bottom {
background: #414141;
border: 1px solid #4a4a4a;
transition: 0s
}
.dark-theme .float-right .float-btn {
background: #414141
}
.dark-theme .float-right.round.position-bottom a:hover {
background: #505255;
--this-color: var(--muted-2-color)
}
.dark-theme .float-right.round.position-bottom span:hover {
background: #505255;
--this-color: var(--muted-2-color)
}
span.newadd-btns.hover-show.float-btn.add-btn .hover-show-con.dropdown-menu.drop-newadd>a:hover {
background-color: #d8d8d836;
border-radius: 8px
}
a.float-btn.ontop.fade {
display: none
}
/*悬浮按钮美化结束*/展示效果
4.子比主题切换【早/晚】模式 layer 样式提示弹窗
此功能无需过多赘述，具体效果查看下发效果预览
使用教程：
1.子比主题设置—>自定义代码—>自定义 javascript 代码：,添加以下 JS 代码：
// 早夜间模式切换提示弹窗
$(".toggle-theme").click(function() {
var toggleThemeText = "当前为早间亮白模式";
if (!$("body").hasClass('dark-theme')) {
toggleThemeText = "当前为晚间暗黑模式";
$("body").css("background-image","none");
}
layer.msg(toggleThemeText, {
time: 2000,
anim: 1
});
});
// 早夜间模式切换提示弹窗结束 彩豆博客 www.521cd.cn展示效果
5.网站侧边栏添加类似导航联系方式的小工具模块
这个功能本身类似一个用户中心的样式，也可以认为是导航和投稿的样式，具体使用可自行根据自己需求修改代码中的链接和图片
使用教程：
-
- 1、将下面的代码添加在网站页脚底部或者在 wp 后台添加小工具，效果展示是一样的我是添加在小工具的
2、添加路径：在后台—》外观—》小工具—》自定义 HTML—》 选择你需要放的位置
- 1、将下面的代码添加在网站页脚底部或者在 wp 后台添加小工具，效果展示是一样的我是添加在小工具的
-
- 3、我是添加在首页侧边栏
-
- 4、修改代码中的链接以及图片地址，
<style type="text/css">
#update_version img{margin:0px 0 15px }#update_version a{width:30%;height:35px;border-radius:3px;text-align:center;line-height:35px;font-size:9pt;color:#fff;font-weight: 700;}.blog_link{background-color:#2ba9fa}.blog_link,.cms_link{float:left;margin-right:5%}.cms_link{background-color:#ff6969}.grid_link{float:left;background-color:#70c041}
</style>
<div id="update_version">
<a href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=931106824@qq.com" target="_blank" rel="noopener"><img title="彩豆博客" src="添加你需要展示的图片" alt="图片" style="border-radius:5px;"></a>
<a class="blog_link" href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=931106824@qq.com" target="_blank" style="background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);" rel="noopener">发送邮件</a>
<a class="cms_link" href="https://www.521cd.cn/?random" target="_blank" style="background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);" rel="noopener">随便看看</a>
<a class="grid_link" href="https://www.521cd.cn/" target="_blank" style="background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);" rel="noopener">友情链接</a>
</div>
<div>
<hr>
<a href="/" target="_blank" rel="noopener">点击在线投稿</a>
<br>
投稿邮箱：<b>931106824@qq.com</b>
<br>
交流 QQ：<b><a href="https://wpa.qq.com/wpa_jump_page?v=3&uin=931106824&site=qq&menu=yes" target="_blank" rel="noopener">931106824</a></b>
</div>展示效果
6.首页显示两边灯笼样式
代码放在，子比主题设置<自定义代码<自定义底部HTML代码
<!-- 灯笼样式开始 -->
<style>
.onlymobile{display: none;}
@media (min-width: 950px){.nonlymobile{display:inline;} }
@media only screen and (max-width: 760px) {
.deng-box, .deng-box1 {
display:none;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.right {
float: left!important;
}
}
.deng-box {
position: fixed;
top: -30px;
left: 10px;
z-index: 999;
}
.deng-box1 {
position: fixed;
top: -30px;
right: 10px;
z-index: 999;
}
.deng-box1 .deng {
position: relative;
width: 120px;
height: 90px;
margin: 50px;
background: #d8000f;
background: rgba(216, 0, 15, 0.8);
border-radius: 50% 50%;
-webkit-transform-origin: 50% -100px;
-webkit-animation: swing 5s infinite ease-in-out;
box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}
.deng {
position: relative;
width: 120px;
height: 90px;
margin: 50px;
background: #d8000f;
background: rgba(216, 0, 15, 0.8);
border-radius: 50% 50%;
-webkit-transform-origin: 50% -100px;
-webkit-animation: swing 3s infinite ease-in-out;
box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
}
.deng-a {
width: 100px;
height: 90px;
background: #d8000f;
background: rgba(216, 0, 15, 0.1);
margin: 12px 8px 8px 10px;
border-radius: 50% 50%;
border: 2px solid #dc8f03;
}
.deng-b {
width: 45px;
height: 90px;
background: #d8000f;
background: rgba(216, 0, 15, 0.1);
margin: -4px 8px 8px 26px;
border-radius: 50% 50%;
border: 2px solid #dc8f03;
}
.xian {
position: absolute;
top: -20px;
left: 60px;
width: 2px;
height: 20px;
background: #dc8f03;
}
.shui-a {
position: relative;
width: 5px;
height: 20px;
margin: -5px 0 0 59px;
-webkit-animation: swing 4s infinite ease-in-out;
-webkit-transform-origin: 50% -45px;
background: #ffa500;
border-radius: 0 0 5px 5px;
}
.shui-b {
position: absolute;
top: 14px;
left: -2px;
width: 10px;
height: 10px;
background: #dc8f03;
border-radius: 50%;
}
.shui-c {
position: absolute;
top: 18px;
left: -2px;
width: 10px;
height: 35px;
background: #ffa500;
border-radius: 0 0 0 5px;
}
.deng:before {
position: absolute;
top: -7px;
left: 29px;
height: 12px;
width: 60px;
content: " ";
display: block;
z-index: 999;
border-radius: 5px 5px 0 0;
border: solid 1px #dc8f03;
background: #ffa500;
background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
.deng:after {
position: absolute;
bottom: -7px;
left: 10px;
height: 12px;
width: 60px;
content: " ";
display: block;
margin-left: 20px;
border-radius: 0 0 5px 5px;
border: solid 1px #dc8f03;
background: #ffa500;
background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
.deng-t {
font-family: 华文行楷;
font-size: 26px;
color: #dc8f03;
font-weight: bold;
line-height: 44px;
text-align: center;
}
.night .deng-t,
.night .deng-box,
.night .deng-box1 {
background: transparent !important;
}
@-moz-keyframes swing {
0% {
-moz-transform: rotate(-10deg)
}
50% {
-moz-transform: rotate(10deg)
}
100% {
-moz-transform: rotate(-10deg)
}
}
@-webkit-keyframes swing {
0% {
-webkit-transform: rotate(-10deg)
}
50% {
-webkit-transform: rotate(10deg)
}
100% {
-webkit-transform: rotate(-10deg)
}
}
</style>
<div class="deng-box">
<div class="deng">
<div class="xian"></div>
<div class="deng-a">
<div class="deng-b"><div class="deng-t">龙年</div></div>
</div>
<div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
</div>
</div>
<div class="deng-box1">
<div class="deng">
<div class="xian"></div>
<div class="deng-a">
<div class="deng-b"><div class="deng-t">快乐</div></div>
</div>
<div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
</div>
</div>
<!-- 灯笼样式结束 -->展示效果：
7.全站添加元素飘落效果-默认枫叶效果-优化版
前言：
-
- 这个功能其实很多朋友应该都有之前的那种樱花效果，但是用过的都知道那个樱花效果太妨碍阅读了，今天分享给大家一个优化版，减少了数量以及效果优化
安装
-
- 将下面的这段代码整合到新建 js 文件，命名 leaves.js，然后引用，就可以看到效果了，我就不上预览图了
-
- 默认效果是枫叶，如果想改成其他的可自行更换代码第三行中的文件图片矢量图，
<script src="你上传的文件路径地址/leaves.js"></script>var stop, staticx;
var img = new Image();
img.src = "https://p1.xywm.ltd/2022/07/31/62e604b42d4cf.webp";
function Sakura(x, y, s, r, fn) {
this.x = x;
this.y = y;
this.s = s;
this.r = r;
this.fn = fn
}
Sakura.prototype.draw = function(cxt) {
cxt.save();
var xc = 20 * this.s / 2;
cxt.translate(this.x, this.y);
cxt.rotate(this.r);
cxt.drawImage(img, 0, 0, 20 * this.s, 20 * this.s);
cxt.restore()
};
Sakura.prototype.update = function() {
this.x = this.fn.x(this.x, this.y);
this.y = this.fn.y(this.y, this.y);
this.r = this.fn.r(this.r);
if (this.x > window.innerWidth || this.x < 0 || this.y > window.innerHeight || this.y < 0) {
this.r = getRandom("fnr");
if (Math.random() > 0.4) {
this.x = getRandom("x");
this.y = 0;
this.s = getRandom("s");
this.r = getRandom("r")
} else {
this.x = window.innerWidth;
this.y = getRandom("y");
this.s = getRandom("s");
this.r = getRandom("r")
}
}
};
SakuraList = function() {
this.list = []
};
SakuraList.prototype.push = function(sakura) {
this.list.push(sakura)
};
SakuraList.prototype.update = function() {
for (var i = 0, len = this.list.length; i < len; i++) {
this.list[i].update()
}
};
SakuraList.prototype.draw = function(cxt) {
for (var i = 0, len = this.list.length; i < len; i++) {
this.list[i].draw(cxt)
}
};
SakuraList.prototype.get = function(i) {
return this.list[i]
};
SakuraList.prototype.size = function() {
return this.list.length
};
function getRandom(option) {
var ret, random;
switch (option) {
case "x":
ret = Math.random() * window.innerWidth;
break;
case "y":
ret = Math.random() * window.innerHeight;
break;
case "s":
ret = Math.random();
break;
case "r":
ret = Math.random() * 4;
break;
case "fnx":
random = -0.5 + Math.random() * 1;
ret = function(x, y) {
return x + 0.5 * random - 1.7
};
break;
case "fny":
random = 1.5 + Math.random() * 0.7;
ret = function(x, y) {
return y + random
};
break;
case "fnr":
random = Math.random() * 0.03;
ret = function(r) {
return r + random
};
break
}
return ret
}
function startSakura() {
requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame;
var canvas = document.createElement("canvas"),
cxt;
staticx = true;
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
canvas.setAttribute("style", "position: fixed;left: 0;top: 0;pointer-events: none;");
canvas.setAttribute("id", "canvas_sakura");
document.getElementsByTagName("body")[0].appendChild(canvas);
cxt = canvas.getContext("2d");
var sakuraList = new SakuraList();
for (var i = 0; i < 50; i++) {
var sakura, randomX, randomY, randomS, randomR, randomFnx, randomFny;
randomX = getRandom("x");
randomY = getRandom("y");
randomR = getRandom("r");
randomS = getRandom("s");
randomFnx = getRandom("fnx");
randomFny = getRandom("fny");
randomFnR = getRandom("fnr");
sakura = new Sakura(randomX, randomY, randomS, randomR, {
x: randomFnx,
y: randomFny,
r: randomFnR
});
sakura.draw(cxt);
sakuraList.push(sakura)
}
stop = requestAnimationFrame(function() {
cxt.clearRect(0, 0, canvas.width, canvas.height);
sakuraList.update();
sakuraList.draw(cxt);
stop = requestAnimationFrame(arguments.callee)
})
}
window.onresize = function() {
var canvasSnow = document.getElementById("canvas_snow")
};
img.onload = function() {
startSakura()
};
function stopp() {
if (staticx) {
var child = document.getElementById("canvas_sakura");
child.parentNode.removeChild(child);
window.cancelAnimationFrame(stop);
staticx = false
} else {
startSakura()
}
};8.网站添加一个随机预览文章随便看看功能
1、这个功能是和随机预览文章的功能，点击一次更换一次文章
2、将下面的 PHP 代码加入到主题目录下：themes/zibll/functions.php 文件中。
3、添加完成之后访问：你的域名+/?random，然后可以自己添加在菜单里面
4、具体效果可以访问查看：https://www.521cd.cn/?random
// 添加随便看看（BY www.521cd.cn）
function random_postlite() {
global $wpdb;
$query = "SELECT ID FROM $wpdb->posts WHERE post_type = 'post' AND post_password = '' AND post_status = 'publish' ORDER BY RAND() LIMIT 1";
if ( isset( $_GET['random_cat_id'] ) ) {
$random_cat_id = (int) $_GET['random_cat_id'];
$query = "SELECT DISTINCT ID FROM $wpdb->posts AS p INNER JOIN $wpdb->term_relationships AS tr ON (p.ID = tr.object_id AND tr.term_taxonomy_id = $random_cat_id) INNER JOIN $wpdb->term_taxonomy AS tt ON(tr.term_taxonomy_id = tt.term_taxonomy_id AND taxonomy = 'category') WHERE post_type = 'post' AND post_password = '' AND post_status = 'publish' ORDER BY RAND() LIMIT 1";
}
if ( isset( $_GET['random_post_type'] ) ) {
$post_type = preg_replace( '|[^a-z]|i', '', $_GET['random_post_type'] );
$query = "SELECT ID FROM $wpdb->posts WHERE post_type = '$post_type' AND post_password = '' AND post_status = 'publish' ORDER BY RAND() LIMIT 1";
}
$random_id = $wpdb->get_var( $query );
wp_redirect( get_permalink( $random_id ) );
exit;
}
if ( isset( $_GET['random'] ) )
add_action( 'template_redirect', 'random_postlite' );
// 随便看看结束（BY www.521cd.cn）9.网站内添加复制文章内容自动添加博客名称和原文地址
1、关于这个网站复制自动添加版权和原文地址的这个功能之前我也有研究过，网站百度也有很多，但是基本上都是失效的，要么能用也只是在文字内复制之后会自动添加，但是代码质量的就不会自动添加，对于如果不懂 javascript 代码的朋友来说是很头疼的，因此社长也研究了优化一版，分享给大家使用。
方法一：
教程开始
1、添加核心 JS 代码
1.1、子比主题设置—>自定义代码—>自定义底部 HTML 代码：,添加以下代码：
1.2、其他主题自行添加在主题的 head 或 food 文件底部自行测试
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.min.js"></script>
<script type="text/javascript">
/**网站内容复制自动添加版权声明和原文地址*/
$(document).on("copy", function(e) {
var selected = window.getSelection();
var selectedText = selected.toString().replace(/\n/g, "<br>");
var copyFooter =
"<br>-----------------------<br>著作权归作者所有。<br>" +
"商业转载请联系作者获得授权，非商业转载请注明出处。<br>" +
"作者：彩豆博客<br> 源地址：" +
document.location.href +
"<br>来源：彩豆博客<br>© 版权声明：本文为博主原创文章，转载请务必保留原文链接！";
if (document.location.pathname === "/") {
var copyFooter =
"<br>-----------------------<br>" +
"来源：彩豆博客<br> 源地址：" +
document.location.href +
"<br>© 版权声明：商业转载请联系作者获得授权，非商业转载请注明出处。<br>";
}
var msgContent =
'<span style="font-weight: 700;margin: 0 !important;">【彩豆博客(WWW.521CD.CN)】<br>复制成功，若要转载请务必保留原文链接</span>' + copyFooter;
layer.msg(msgContent, {
time: 2000,
shift: 2,
shade: 0.3,
skin: "wiiuii-layer-mode"
});
var copyHolder = $("<div>", {
id: "temp",
html: selectedText + copyFooter,
style: {
position: "absolute",
left: "-99999px"
}
});
$("body").append(copyHolder);
selected.selectAllChildren(copyHolder[0]);
window.setTimeout(function() {
copyHolder.remove();
}, 0);
});
</script>2、添加 css 样式代码
子比主题设置—>自定义代码—>自定义 css 代码：,添加以下代码：
/*layui 弹窗样式美化*/
.wiiuii-layer-mode{
background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
border: none !important;
border-radius: 8px !important;
}方法二：
-
- 1、将下面的 PHP 代码加入到主题目录下：
themes/zibll/header.php文件中,
- 1、将下面的 PHP 代码加入到主题目录下：
-
- 需要注意的是，需要放在
<head> 代码放置在这里</head>代码中间否则没用
- 需要注意的是，需要放在
-
- 2、其他主题同理，放置在 header.php 文件中，因为这个是全局引用文件
-
- 3、自行修改一下，文章来源出自 XXX 博客的文字内容即可
-
- 4、添加之后去赶快体验一下吧~如果教程有帮到你，，可以多推荐推荐彩豆博客哈
<!--复制内容自动添加原文地址开始 by 彩豆博客-->
<script type="text/javascript">
function addLink() {
var selection = window.getSelection();
pagelink = "</br></br>. 文章来源出自[ 彩豆博客 ] 转载请保留原文链接: " + document.location.href;
copytext = selection + pagelink;
newdiv = document.createElement('div');
newdiv.style.position = 'absolute';
newdiv.style.left = '-99999px';
document.body.appendChild(newdiv);
newdiv.innerHTML = copytext;
selection.selectAllChildren(newdiv);
window.setTimeout(function () {
document.body.removeChild(newdiv);
}, 100);
}
document.oncopy = addLink;
</script>
<!--复制内容自动添加原文地址结束 by 彩豆博客--> 10.子比主题添加文件下载提取码中一键复制功能
前言：
因为自带的子比主题的独立下载页是没有复制按钮的，如果有提取码密码的话则需要人工复制一下密码，一来很麻烦二来也容易复制错，因此找到了这个一件复制的样式，分享给大家
教程分为两步，添加 css 样式和添加 js 代码即可如下
1.子比主题设置—>自定义代码—>自定义 CSS 样式：,添加以下 CSS 代码：
/*
*by：彩豆博客 www.521cd.cn
*子比主题下载页面一键复制提取码功能 css 样式开始
*请本 CSS 代码放置子比主题设置->全局&功能->自定义 CSS 样式中即可
*/
.but-download .badg {
position: relative;
cursor:pointer;
}
.but-download .badg::after {
position: absolute;
content: " ";
width: 0;
height: 0;
top: -11px;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
border-top: 10px solid rgb(236, 235, 235);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
-webkit-transition: .3s;
-o-transition: .3s;
-moz-transition: .3s;
transition: .3s;
opacity: 0;
}
.but-download .badg::before {
content: attr(data-before);
position: absolute;
width: 100px;
height: 31px;
top: -40px;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
font-size: 14px;
line-height: 31px;
border-radius: 4px;
color: #6c6a6a;
background-color: rgb(236, 235, 235);
text-align: center;
-webkit-transition: .3s;
-o-transition: .3s;
-moz-transition: .3s;
transition: .3s;
opacity: 0;
}
.but-download .badg:hover::after,
.but-download .badg:hover::before {
opacity: 1;
}
/*
*by：彩豆博客 www.521cd.cn
*子比主题下载页面一键复制提取码功能 css 样式结束
*/2.子比主题设置—>自定义代码—>自定义 javascript 代码：,添加以下 javascript 代码：
/*
*by：彩豆博客 www.521cd.cn
*子比主题下载页面一键复制提取码功能 JavaScript 代码开始
*请本 JavaScript 代码放置子比主题设置->全局&功能->自定义 javascript 代码中即可
*/
if(document.querySelectorAll(".but-download .badg")!=undefined){
const reg = /[a-zA-z0-9]/ig;
const copy1 = document.querySelectorAll(".but-download .badg");
for (let i = 0; i < copy1.length; i++) {
copy1[i].index = i;
copy1[i].setAttribute("data-before", "点击复制");
copy1[i].addEventListener("click", copyOperation);
copy1[i].addEventListener("mouseout", copyOk);
}
function copyOperation() {
var oInput = document.createElement("input");
let text = this.innerText;
text = text.match(reg).join("");
oInput.value = text;
document.body.appendChild(oInput);
oInput.select();
document.execCommand("Copy");
oInput.className = "oInput";
oInput.style.display = "none";
this.setAttribute("data-before", "已复制");
}
function copyOk() {
setTimeout(() => {
this.setAttribute("data-before", "点击复制");
}, 300)
}
}
/*
*子比主题下载页面一键复制提取码功能 JavaScript 代码结束
*by：彩豆博客 www.521cd.cn
*/展示效果
11.首页侧边栏添加一个当前时间进度效果小工具
这个安装教程就不过多赘述了，也很简单，所有的 JS 和 css 代码都集成在本地，没有外链调用
至于如果需要自己改颜色的话，查看代码当中的注释效果即可
1、在后台—》外观—》小工具—》自定义 HTML—》 选择你需要放的位置社长是放在 首页-首页侧边栏
<!--时间进度效果小工具开始-->
<style type="text/css">
.time-schedule-main{/*background-color: white;*/border-radius: 8px;display: flex; justify-content: space-evenly; align-items: center;}.today-schedule,.toweek-schedule,.tomonth-schedule,.toyear-schedule{display: inline-block;width: 50px;height: 100px;background-color: white;border: 1px solid #eee;border-radius: 99px;}.mizhi-schedule-item{position: relative;width: 100%;height: 100%;overflow: hidden;border-radius: 99px;}.today-item,.toweek-item,.tomonth-item,.toyear-item{position: absolute;background-image: linear-gradient(to right, #a18cd1 0%, #fbc2eb 100%);width: 100%;height: 109%;bottom: 0;transition: all 1s;}.schedule-info{display: flex;color: #ff5991;position: absolute;margin: auto;top: 0;left: 0;right: 0;bottom: 0;flex-direction: column;align-items: center;justify-content: center;}.schedule-tilte{font-size: 12px;font-weight: 700;}.time-schedule-main img{background-repeat: no-repeat;max-width:unset !important;max-height:unset !important;width: 200px;height: 10px;top: 0;left: 0;position: absolute;animation: mizhi_move_wave 2s linear infinite;-webkit-animation: mizhi_move_wave 2s linear infinite;}@-webkit-keyframes mizhi_move_wave{0%{-webkit-transform: translateX(0)}50%{-webkit-transform: translateX(-25%)}100%{-webkit-transform: translateX(-50%)}}@keyframes mizhi_move_wave{0%{transform: translateX(0)}50%{transform: translateX(-25%)}100%{transform: translateX(-50%)}}
/* 今日剩余背景颜色 */
.today-item {
background-image: linear-gradient(to right, #a18cd1 0%, #fbc2eb 100%);
}
/* 本周剩余背景颜色 */
.toweek-item {
background-image: linear-gradient(to right, #ff9a9e 0%, #fad0c4 100%);
}
/* 本月剩余背景颜色 */
.tomonth-item {
background-image: linear-gradient(to right, #fbc2eb 0%, #a6c1ee 100%);
}
/* 今年剩余背景颜色 */
.toyear-item {
background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);
}
</style>
<div class="time-schedule-main">
<div class="today-schedule">
<div class="mizhi-schedule-item">
<div class="today-item">
<img src="https://s4.ax1x.com/2022/02/06/HuOUv6.png">
</div>
<div class="schedule-info">
<span class="schedule-tilte">今天仅剩</span>
<span class="today-num">100%</span>
</div>
</div>
</div>
<div class="toweek-schedule">
<div class="mizhi-schedule-item">
<div class="toweek-item">
<img src="https://s4.ax1x.com/2022/02/06/HuOUv6.png">
</div>
<div class="schedule-info">
<span class="schedule-tilte">本周还有</span>
<span class="toweek-num">100%</span>
</div>
</div>
</div>
<div class="tomonth-schedule">
<div class="mizhi-schedule-item">
<div class="tomonth-item">
<img src="https://s4.ax1x.com/2022/02/06/HuOUv6.png">
</div>
<div class="schedule-info">
<span class="schedule-tilte">本月剩余</span>
<span class="tomonth-num">100%</span>
</div>
</div>
</div>
<div class="toyear-schedule">
<div class="mizhi-schedule-item">
<div class="toyear-item">
<img src="https://s4.ax1x.com/2022/02/06/HuOUv6.png">
</div>
<div class="schedule-info">
<span class="schedule-tilte">今年还剩</span>
<span class="toyear-num">100%</span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$.extend({
mizhiSchedule: function () {
var a = new Date(),
e = 3600 * a.getHours() + 60 * a.getMinutes() + a.getSeconds(),
c = e / 86400,
b = (100 - 100 * c).toFixed(1);
c = (109 - 109 * c).toFixed(2);
$(".today-num").text(b + "%");
$(".today-item").css("height", c + "%");
b = a.getDay();
0 === b && (b = 7);
c = (e + 86400 * (b - 1)) / 604800;
b = (100 - 100 * c).toFixed(1);
c = (109 - 109 * c).toFixed(2);
$(".toweek-num").text(b + "%");
$(".toweek-item").css("height", c + "%");
b = a.getFullYear();
c = a.getMonth();
a = a.getDate();
var d = new Date(b, c + 1, 0).getDate();
d = (e + 86400 * (a - 1)) / (86400 * d);
var f = (100 - 100 * d).toFixed(1);
(109 - 109 * d).toFixed(2);
$(".tomonth-num").text(f + "%");
$(".tomonth-item").css("height", f + "%");
d = 0;
f = [
31,
(0 == b % 4 && 0 != b % 100) || 0 == b % 400 ? 29 : 28,
31,
30,
31,
30,
31,
31,
30,
31,
30,
31
];
for (var g = 0; g < c; g++) d += f[g];
a =
(e + 86400 * (d + a - 1)) /
(86400 * ((0 == b % 4 && 0 != b % 100) || 0 == b % 400 ? 366 : 365));
e = (100 - 100 * a).toFixed(1);
a = (109 - 109 * a).toFixed(2);
$(".toyear-num").text(e + "%");
$(".toyear-item").css("height", a + "%");
}
});
$.mizhiSchedule();
setInterval($.mizhiSchedule, 2e3);
});
</script>
<!--www.521cd.cn 时间进度效果小工具结束--> 展示效果
12.首页文章上方添加一个 NEW 最新发布样式
前言：
这个功能是从 ripro 的主题里面衍生过来，觉得挺好看，就拿过来优化适配了一下，具体效果可以参考本站，安装起来也很简单，不需要再 PHP 中修改，直接在外观小工具里面实现。
安装方法
1、在后台—》外观—》小工具—》自定义 HTML—》 选择你需要放的位置社长是放在 首页-首页侧边栏添加下方代码
如果觉得代码太长，可以将下面的 css 样式中的首页最新发布标题里面 css 样式代码，复制下来，放到一个 css 文件当中再引用即可，
引用代码可参考我提供的，将/css/news.css 更改成你的文件路径就可以了
<link rel='stylesheet' id='ripro_chlid_style-css' href='/css/news.css' type='text/css' media='all' /><!--NEW 最新发布样式开始-->
<style type="text/css">
/*首页最新发布标题*/
.zhankr-zx {
position: relative;
margin-bottom: 18px;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
line-height: 1;
}
.zhankr-zx:before {
margin-right: 10px;
}
.zhankr-zx:after {
margin-left: 10px
}
.zhankr-zx:before, .zhankr-zx:after {
content: "";
display: inline-block;
width: 8px;
height: 8px;
background: linear-gradient(-125deg, #f95491 0%, #2953fd 100%);
border-radius: 50%;
}
.zhankr-zx span {
font-family: Futura;
background: linear-gradient(-125deg, #f95491 0%, #2953fd 100%);
-webkit-background-clip: text;
color: transparent;
font-size: 49px;
letter-spacing: 5px;
display: inline-block;
font-weight: 700;
}
.zhankr-zx .zhankr-zx-n {
font-size: 20px;
}
.zhankr-zx .zhankr-zx-n strong {
display: block;
font-size: 20px;
background: linear-gradient(-125deg, #f95491 0%, #2953fd 100%);
-webkit-background-clip: text;
color: transparent;
}
.HhcatboxDes {
position: absolute;
opacity: 0;
z-index: 1;
align-items: center;
display: flex;
font-size: 16px;
height: 180px;
justify-content: center;
width: 100%;
color: #fff;
font-weight: 600;
background: #f95491;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
-webkit-transform: translateY(100%);
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
.HhCooltitle {
margin-top: 10px
}
/*首页最新发布标题*/
</style>
<div class="zhankr-zx">
<span>NEWS</span>
<div class="zhankr-zx-n">
<strong>最新</strong>
<strong>发布</strong>
</div>
</div>
<script>document.querySelectorAll(".zhankr-zx")[0].parentNode.parentNode.style.cssText="background:#fff0;box-shadow:0 0 0";</script>
<!--www.521cd.cn NEW 最新发布样式结束--> 展示效果
13.WP 网站文章删除时自动删除内容文章中的图片和附件内容
前言：
这个功能我还是很喜欢的因为前两天网站搬家，我检查了一下 uploads 图片文件夹，光图片就已经占用半个服务器空间，因此有了这个文章删除时自动删掉图片附件还是很香的，可以很大程度减缓服务器压力和时间成本
1、只需将下面的 PHP 代码加入到主题目录下：themes/zibll/functions.php 文件底部就可以了。
//删除文章时删除图片附件 www.521cd.cn 开始
function delete_post_and_attachments($post_ID) {
global $wpdb;
//删除特色图片
$thumbnails = $wpdb->get_results( "SELECT * FROM $wpdb->postmeta WHERE meta_key = '_thumbnail_id' AND post_id = $post_ID" );
foreach ( $thumbnails as $thumbnail ) {
wp_delete_attachment( $thumbnail->meta_value, true );
}
//删除图片附件
$attachments = $wpdb->get_results( "SELECT * FROM $wpdb->posts WHERE post_parent = $post_ID AND post_type = 'attachment'" );
foreach ( $attachments as $attachment ) {
wp_delete_attachment( $attachment->ID, true );
}
$wpdb->query( "DELETE FROM $wpdb->postmeta WHERE meta_key = '_thumbnail_id' AND post_id = $post_ID" );
}
add_action('before_delete_post', 'delete_post_and_attachments');
//删除文章时删除图片附件 www.521cd.cn 结束14.文章中自动添加关键词链接，协助收录内页优化
在写文章的时候，发布之前你会设置很多标签，比如模板啊，源码，等等，这些关键词，往往需要搜索才能找到，社长给大家分享这个是只要你的文章中包含了你网站的关键词，就会自动添加超链接，也是更好的协助网站收录优化，提高内页收录
1.将下面的 PHP 代码加入到主题目录下：themes/zibll/functions.php 文件中。
// by 彩豆博客文章添加关键词链接开始
function wpkj_auto_add_tag_link($content){
$limit = 1; // 设置同一个标签添加几次链接
$posttags = get_the_tags();
if ($posttags) {
foreach($posttags as $tag) {
$link = get_tag_link($tag->term_id);
$keyword = $tag->name;
$cleankeyword = stripslashes($keyword);
$url = '<a target="_blank" href="'.$link.'" title="'.str_replace('%s', addcslashes($cleankeyword, '$'), __('View all posts in %s')).'">'.addcslashes($cleankeyword, '$').'</a>';
$regEx = '\'(?!((<.*?)|(<a.*?)))('. $cleankeyword . ')(?!(([^<>]*?)>)|([^>]*?</a>))\'s';
$content = preg_replace($regEx,$url,$content,$limit);
}
}
return $content;
}
add_filter( 'the_content', 'wpkj_auto_add_tag_link', 1 );
// by 彩豆博客文章添加关键词链接结束展示效果
15.子比主题海报&幻灯片切换轮播图按钮样式美化
子比主题自带的轮播图按钮样式方方正正的不太好看，优化一下之后变得听贴近整个主题：如下图。
优化教程：
/*轮播幻灯片按钮样式美化开始 www.521cd.cn*/
.swiper-button-next, .swiper-button-prev{height: 70px !important;}.swiper-button-prev{border-top-right-radius: 8px;border-bottom-right-radius: 8px;}.swiper-button-next{border-top-left-radius: 8px;border-bottom-left-radius: 8px;}
/*轮播幻灯片按钮样式美化结束 www.521cd.cn*/优化后效果演示：
16.给网站右键添加自定义的按钮美化
最近看到很多朋友需要这个效果，因此分享给大家
1.将下面的 PHP 代码加入到主题目录下：themes/zibll/footer.php 文件中。
其他的主题和网站添加方式一样的，只需要添加网站全局引用的文件当中就行，或者 footer.php 文件中
自行修改一下首页和百宝箱的链接改为自己的即可
<!-- 右键美化 by 彩豆博客 -->
<style type="text/css">
a {text-decoration: none;}
div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba
(0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9; border-radius: 8px;}
div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}
div.usercm ul li{margin:0px;padding:0px;line-height:35px;}
div.usercm ul li a{color:#666;padding:0 15px;display:block}
div.usercm ul li a:hover{color:#fff;background:rgba(170,222,18,0.88)}
div.usercm ul li a i{margin-right:10px}
a.disabled{color:#c8c8c8!important;cursor:not-allowed}
a.disabled:hover{background-color:rgba(255,11,11,0)!important}
div.usercm{background:#fff !important;}
</style>
<div class="usercm" style="left: 199px; top: 5px; display: none;">
<ul>
<li><a href="https://www.521cd.cn/"><i class="fa fa-home fa-fw"></i><span>首页</span></a></li>
<li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-copy fa-fw"></i><span>复制</span></a></li>
<li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right fa-fw"></i><span>前进</span></a></li>
<li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left fa-fw"></i><span>后退</span></a></li>
<li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>刷新</span></a></li>
<li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fa fa-paw fa-fw"></i><span>百度</span></a></li>
<li><a href="javascript:void(0);" onclick="googleSearch();"><i class="fa fa-google fa-fw"></i><span>谷歌</span></a></li>
<li style="border-bottom:1px solid gray"><a target="_blank" href="https://www.521cd.cn"><i class="fa fa-refresh fa-fw"></i><span>百宝箱</span></a></li>
</ul>
</div>
<script type="text/javascript">
(function(a) {
a.extend({
mouseMoveShow: function(b) {
var d = 0,
c = 0,
h = 0,
k = 0,
e = 0,
f = 0;
a(window).mousemove(function(g) {
d = a(window).width();
c = a(window).height();
h = g.clientX;
k = g.clientY;
e = g.pageX;
f = g.pageY;
h + a(b).width() >= d && (e = e - a(b).width() - 5);
k + a(b).height() >= c && (f = f - a(b).height() - 5);
a("html").on({
contextmenu: function(c) {
3 == c.which && a(b).css({
left: e,
top: f
}).show()
},
click: function() {
a(b).hide()
}
})
})
},
disabledContextMenu: function() {
window.oncontextmenu = function() {
return !1
}
}
})
})(jQuery);
function getSelect() {
"" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("请选择需要百度的内容！") : document.execCommand("Copy")
}
function baiduSearch() {
var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
"" == a ? layer.msg("请选择需要百度的内容！") : window.open("https://www.baidu.com/s?wd=" + a)
}
function googleSearch() {
var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
"" == a ? layer.msg("请选择需要谷歌的内容！") : window.open("https://www.google.com/search?q=" + a)
}
$(function() {
for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) {
d = !1;
break
}
d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu())
});
</script>
<!-- 右键美化结束 by 彩豆博客 -->展示效果
17.网站底部的网站地图和免责声明按钮美化教程
最近比较忙更新的频率少了一些，正好有朋友说想要这个底部的美化方法，至此分享给大家
原来的样式是这样的：比较单一不好看
优化之后是这样的:
教程分为两步，添加 css 样式和添加 HTML 代码即可如下
1.子比主题设置—>自定义代码—>自定义 CSS 样式：,添加以下 CSS 代码：
/*CSS 代码网站底部按钮美化 www.521cd.cn*/
:root{--theme-color:#f04494;--focus-shadow-color:rgba(240,68,148,.4);--mian-max-width:1200px;}.github-badge {
display: inline-block;
border-radius: 4px;
text-shadow: none;
font-size: 12px;
color: #fff;
line-height: 15px;
margin-bottom: 5px;
}
.badge-subject {
display: inline-block;
background-color: #4d4d4d;
padding: 4px 4px 4px 6px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.github-badge .bg-blue {
background-color: #007ec6;
}
.github-badge .bg-brightgreen {
background-color: #4dc820;
}
.github-badge .bg-blueviolet {
background-color: #8833d7;
}
.github-badge .badge-value {
display: inline-block;
padding: 4px 6px 4px 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.github-badge .bg-orange {
background-color: orange;
}
/*CSS 代码网站底部按钮美化结束 www.521cd.cn*/2、子比主题设置—>页面&显示—>底部页脚—>板块二,添加以下 HTML 代码：
<!--网站底部按钮美化 html 开始 by 彩豆 www.521cd.cn-->
<div class="github-badge">
<span class="badge-subject bg-blue">
<a style="color:#fff" href="https://521cd.cn/links" target="_blank">友链申请</a>
</span>-
<span class="badge-subject bg-brightgreen">
<a style="color:#fff" href="https://521cd.cn/mizhi-sitemap.xml" target="_blank">网站地图</a>
</span>-
<span class="badge-subject bg-green">
<a style="color:#fff" href="https://www.521cd.cn/1057.html" target="_blank">本站主题</a>
</span>-
<span class="badge-subject bg-orange">
<a style="color:#fff" href="http://wpa.qq.com/msgrd?v=3&uin=931106824&site=qq&menu=yes" target="_blank">广告合作</a>
</span>-
<span class="badge-value bg-blueviolet">
<a style="color:#fff" href="https://521cd.cn/disclaimers" target="_blank">免责申明</a>
</span>-
</div>
<!--网站底部按钮美化 html 结束 by 彩豆 www.521cd.cn-->18.网站侧边栏添加新年倒计时小工具
1、在后台—》外观—》小工具—》自定义 HTML—》 选择你需要放的位置社长是放在 首页-首页侧边栏
<div class="gn_box">
<h2><center><font color=#E80017>2</font><font color=#D1002E>0</font><font color=#BA0045>2</font><font color=#A3005C>2</font><font
color=#8C0073>年</font><font color=#75008A>-</font><font color=#5E00A1>新</font><font
color=#4700B8>年</font><font color=#3000CF>倒</font><font color=#1900E6>计</font><font color=#0200FD>时</font>
</center></h2>
<center>
<div id="CountMsg" class="HotDate">
<span id="t_d"></span>
<span id="t_h"></span>
<span id="t_m"></span>
<span id="t_s"></span>
</div>
</center>
<script type="text/javascript"> function getRTime() {
var EndTime = new Date('2022/01/01 00:00:00');
var NowTime = new Date();
var t = EndTime.getTime() - NowTime.getTime();
var d = Math.floor(t / 1000 / 60 / 60 / 24);
var h = Math.floor(t / 1000 / 60 / 60 % 24);
var m = Math.floor(t / 1000 / 60 % 60);
var s = Math.floor(t / 1000 % 60);
document.getElementById("t_d").innerHTML = d + " 天";
document.getElementById("t_h").innerHTML = h + " 时";
document.getElementById("t_m").innerHTML = m + " 分";
document.getElementById("t_s").innerHTML = s + " 秒";
}
setInterval(getRTime, 1000);
</script>
</div>
<!--侧边栏新年倒计时 by 彩豆 www.521cd.cn-->展示效果：
19.【第二款】网站右上角添加复制弹出样式
-
- 1.子比主题设置—>
自定义代码—>自定义底部 HTML 代码：,添加以下代码：
- 1.子比主题设置—>
-
- 2.其他主题自行添加在主题的 head 或 food 文件底部即可
<!--第二款复制提示开始 by www.521cd.cn-->
<script src="https://cdn.jsdelivr.net/gh/1426239465/521cd.cn/fzts/ts.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/1426239465/521cd.cn/fzts/ts.css" />
<script type="text/javascript">
function copy_remind(){
toastr.success("撰文不易，若要转载请务必保留原文链接，谢谢！", "复制成功！");
clear_toastr(1600);
// 动态设置消息提示时间
function clear_toastr(time){
setTimeout(
function(){
toastr.clear();
}, time);
}
}
document.addEventListener("copy",function(e){
if(window.getSelection(0).toString()){
copy_remind(); //若所选文本不为空则显示
}
else{
toastr.info("啊噢...你没还没选择复制的内容呢！", "复制提示");
}
});
</script>
<!--第二款复制提示结束 by www.521cd.cn-->展示效果：
20.弹窗公告样式代码
1、子比主题本身就有公告弹窗的样式，但是有些朋友并未都是这款主题，我也正好看到有很多很好的弹窗样式，至此研究了一下集成给大家
系统公告风格
安装方法：
-
- 1、将下面代码添加知网站 head 或者 food 文件底部即可
-
- 2、子比主题用户如想添加这种样式，你关闭自带的然后再自定义底部 HTML 代码添加下面代码即可
-
- 3、修改公告中文字内容即可
<!-- 第一种：弹窗公告开始 by www.521cd.cn-->
<script src="https://cdn.bootcss.com/sweetalert/2.1.0/sweetalert.min.js" ;=""></script>
<script>
swal('通知','欢迎进入 彩豆博客','success');
</script>
<!-- 第一种：弹窗公告结束 by www.521cd.cn-->21.子比主题申请友链按钮+首页最新发布动态风车按钮美化
此教程是一位朋友在群内提出的，因为子比主题默认的是下图这个样式，不太好看，因此给大家共勉一下直接上教程
1、首先在子比主题后台—》自定义代码—》自定义底部 HTML 代码—》添加以下代码
<!--彩豆博客阿里图标库-->
<script src="//at.alicdn.com/t/font_2820512_sco5ucv703.js"></script>
<!--彩豆博客阿里图标库--> -
- 2、在后台—》外观—》小工具—》 Zibll 链接列表(新版) —》 选择你需要放的位置社长是放在 首页-底部全宽度
-
- 3、然后在下图的 —》标题右侧按钮文案 这里添加以下代码，注意要勾选上（显示框架盒子）
友情链接动态风车图标代码及放置路径：
<span class="but c-blue radius"><svg class="icon fa-spin" aria-hidden="true"><use xlink:href="#icon-fengche"></use></svg>更多友链</span></a></div>首页最新发布风车动态图标代码及放置路径：
<svg class="icon fa-spin" aria-hidden="true"><use xlink:href="#icon-fengche"></use></svg>最新发布
展示效果：
22.在评论输入框中加入【快来说点什么吧！】背景样式
1.子比主题设置—>自定义代码—>自定义 CSS 样式：,添加以下 CSS 代码：
/*评论背景图*/
textarea#comment {background-color:transparent;background:linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),url(https://imgsa.baidu.com/forum/pic/item/d439b6003af33a871f7e3f0e9b5c10385343b597.jpg) right 10px bottom 10px no-repeat;-moz-transition:ease-in-out 0.45s;-webkit-transition:ease-in-out 0.45s;-o-transition:ease-in-out 0.45s;-ms-transition:ease-in-out 0.45s;transition:ease-in-out 0.45s;}
textarea#comment:focus {background-position-y:789px;-moz-transition:ease-in-out 0.45s;-webkit-transition:ease-in-out 0.45s;-o-transition:ease-in-out 0.45s;-ms-transition:ease-in-out 0.45s;transition:ease-in-out 0.45s;}
/*评论背景图*/展示效果：
23.网站侧边栏添加一款好看的粒子当前时间
1、后台设置—>外观—>小工具—>添加自定义 HTML 代码,加到合适侧边栏即可 ：我是添加在首页侧边栏
标题文本：☀当前时间
<canvas id="canvas" style="width:100%;" width="820" height="2"></canvas>
<script src="https://cdn.jsdelivr.net/gh/1426239465/98dou.cn/clock.js"></script>
展示效果：
24.点击网页出现好看的爆炸点击效果
1、 网站管理后台—》主题设置—》自定义代码—》自定义 javascript 代码，把下面的 js 代码复制粘贴到里面即可。
2、也可在您的任意主题目录下的 foot.php 文件最后添加下面代码
<!--好看的鼠标点击爆炸效果 start-->
<!--by：觅知博客-www.521cd.cn-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/1426239465/98dou.cn/shubiaobz/meme.js"></script>
<canvas class="fireworks" style="position:fixed;left:0;top:0;z-index:99999999;pointer-events:none;"></canvas>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/1426239465/98dou.cn/shubiaobz/anime.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/1426239465/98dou.cn/shubiaobz/fireworks.js"></script>
<!--好看的鼠标点击爆炸效果 END-->展示效果：
25.文章页底部添加【感谢您的来访，获取更多精彩文章请收藏本站+图片。】
1、网站管理后台—》主题设置—》文章&列表—》文章页 —》 文章页 在文章内容后-插入内容 ，把下面的 php 代码复制粘贴到里面即可。
2、此代码理论上适用所有主题，只需要在合适的地方添加上代码就行
3、代码中的图片我托管在 jsdelivr+github，可直接引用，部分的文字可修改成自己的
<center><span style="color: #ef0c7e;; font-size: 15px"><strong>------本页内容已结束，喜欢请分享------</strong></span></span><br /></center>
<br />
<h3 class="wp-block-zibllblock-biaoti title-theme"><strong>感谢您的来访，获取更多精彩文章请收藏本站。</strong></h3>
<a href="https://521cd.cn" target="_blank" title="更多精彩文章，请关注“彩豆博客”">
<img style="display: inline-block; width: 100%; max-width: 100%; height: auto;border-radius: 9px; -webkit-border-radius: 9px; -moz-border-radius: 9px;" src="https://cdn.jsdelivr.net/gh/1426239465/98tc@d0774e08f0a0463dcd0fc072406c38534c269d00/2021/08/31/88dbbdacf7bc69c8813ebfdb22c7f7b3.png">
</a>展示效果：
26.文章内图片鼠标移动到图片外边框自动发光
1、很多时候网页背景也是白的,图片整体也是白色的,有的时候用户不好区分，这是图片还是网页,图片弄个外边框就好区分了,当然图片是鼠标移动到图片上才会显示边框
2、 网站管理后台—》子比主题设置—》自定义代码—》自定 CSS 代码，把下面的 css 代码复制粘贴到里面即可。
里面的 8px 大小可自行调节，颜色代码#63B8FF 也可自行设置
/*鼠标移动图片外发光*/
/*by：彩豆博客-www.521cd.cn*/
.wp-posts-content img:hover {
box-shadow:0px 0px 8px #63B8FF;
}展示效果：
27.防止盗用代码禁止 F12 和打开网页控制台快捷键
-
- 虽然这个功能有些鸡肋，不过是可以避免大部分的快捷键打开网站控制台，要查看你网站的源码还是要费点劲的。
-
- 网站管理后台-–》子比主题设置—》自定义代码—》自定义底部 HTML 代码，把下面的 css 代码复制粘贴到里面即可。
-
- 其他主题的话在你的主题目录下的，footer.php文件中下面添加下面的代码：
自定义 HTML 代码
<!--安全 1 开始-->
<script type="text/javascript">
window.onload = function(){
document.onkeydown = function (){
var e = window.event || arguments[0];
//F12
if(e.keyCode == 123){
return false;
//Ctrl+Shift+I
}else if((e.ctrlKey) && (e.shiftKey) && (e.keyCode == 73)){
return false;
//Shift+F10
}else if((e.shiftKey) && (e.keyCode == 121)){
return false;
//Ctrl+U
}else if((e.ctrlKey) && (e.keyCode == 85)){
return false;
}
};
document.oncontextmenu = function (){
return false;
}
}
</script>
<!--by：彩豆博客-www.521cd.cn-->
<!--安全 1 结束-->方法 二：不要扒我了
网站管理后台-–》子比主题设置—》自定义代码—》自定义底部 HTML 代码，把下面的 css 代码复制粘贴到里面即可。 其他主题的话在你的主题目录下的，footer.php文件中下面添加下面的代码：
<!--安全 2 不要扒我了开始-->
<script type="text/javascript">
((function() {
var callbacks = [],
timeLimit = 50,
open = false;
setInterval(loop, 1);
return {
addListener: function(fn) {
callbacks.push(fn);
},
cancleListenr: function(fn) {
callbacks = callbacks.filter(function(v) {
return v !== fn;
});
}
}
function loop() {
var startTime = new Date();
debugger;
if (new Date() - startTime > timeLimit) {
if (!open) {
callbacks.forEach(function(fn) {
fn.call(null);
});
}
open = true;
window.stop();
alert('不要扒我了');
window.location.reload();
} else {
open = false;
}
}
})()).addListener(function() {
window.location.reload();
});
</script>
<!--by：彩豆博客-www.521cd.cn-->
<!--安全 2 不要扒我了结束-->28.长文章分页按钮美化
wordpress自带的分页按钮是比较丑的很突兀，经过社长一段下面的 CSS 代码优化之后会变得更加美观
子比主题添加路径：网站管理后台-–》子比主题设置—》自定义代码—》自定义 CSS 样式，把下面的 css 代码复制粘贴到里面即可。
自定义 CSS 代码：
/*文章分页按钮美化*/
.post-page-numbers{padding: 4px 10px;text-align:center;display: inline; }.post-nav-links{background:0;margin-left: -50px;}展示效果：
29.友情链接右侧申请按钮动态美化
这个是一个小功能，也是为了留个备忘录，担心下次搬家这个给忘了
添加方法： 后台设置—>外观—>小工具—>添加 Zibll 链接列表(新版),加到标题右侧按钮即可
<span class="but c-blue radius"><svg class="icon fa-spin" aria-hidden="true"><use xlink:href="#icon-fengche1"></use></svg>申请友链
展示效果：
30.整站底部添加好看的蓝色波浪
在 zibll 主题目录下，themes/zibll/footer.php 文件中的“</footer>”（重要）下面添加下面的代码：
<!--底部波浪开始-->
<!--by：彩豆博客-www.521cd.cn-->
<div class="wiiuii_layout">
<svg class="editorial"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28"
preserveAspectRatio="none">
<defs>
<path id="gentle-wave"
d="M-160 44c30 0
58-18 88-18s
58 18 88 18
58-18 88-18
58 18 88 18
v44h-352z" />
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/>
<use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/>
<use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/>
</g>
</svg>
</div>
<style type='text/css'>
.parallax > use{animation: move-forever 12s linear infinite;}.parallax > use:nth-child(1){animation-delay: -2s;}.parallax > use:nth-child(2){animation-delay: -2s; animation-duration: 5s;}.parallax > use:nth-child(3){animation-delay: -4s; animation-duration: 3s;}@keyframes move-forever{0%{transform: translate(-90px, 0%);} 100%{transform: translate(85px, 0%);}}.wiiuii_layout{width: 100%;height: 40px;position: relative;overflow: hidden;z-index: 1;background: var(--footer-bg);}.editorial{display: block; width: 100%; height: 40px; margin: 0;}
</style>
<!--by：彩豆博客-www.521cd.cn-->
<!--底部波浪结束-->展示效果：
31.在网站右侧边栏添加和风天气模块
后台设置—>外观—>小工具—>添加自定义 HTML 代码,加到合适侧边栏即可
<!--by：彩豆博客-www.521cd.cn-->
<div id="he-plugin-standard"></div>
<script>
WIDGET = {
"CONFIG": {
"layout": "2",
"width": "285",
"height": "300",
"background": "1",
"dataColor": "FFFFFF",
"borderRadius": "5",
"key": "3180d3c43e524753ab8bcef69dba023a"
}
}
</script>
<script src="https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0"></script>
<!--by：彩豆博客-www.521cd.cn-->展示效果;
32.网站文章底部添加【我也是有底线的+图片】
在后台子比主题设置—自定义 CSS 样式 添加以下代码：
#percentageCounter{position:fixed; left:0; top:0; height:3px; z-index:99999; background-image: linear-gradient(to right, #339933,#FF6666);border-radius:5px;}
/*by：彩豆博客-www.521cd.cn*/
/*底部可爱底线提示*/在 zibll 主题目录下，themes/zibll/footer.php 文件中的“第一行”（重要）下面添加下面的代码：
<!--底部可爱底线提示-->
<!--by：彩豆博客-www.521cd.cn-->
<div class="app_normal window" style="padding-top:" data-reactroot=""><div class="common_container lastpagenotice_noticewrap"><img src="https://z3.ax1x.com/2021/08/25/hZZUjU.png" data-spm-anchor-id="a2ha1.14919748_WEBHOME_GRAY.0.i1"><div class="lastpagenotice_text" style="color:#6699FF;font-weight:bold;">我也是有底线哒~</div><div class="lastpagenotice_line"></div></div></div>
<!--底部可爱底线提示-->展示效果：
33.网站文章页底部添加【@版权声明】四种样式
1、在 zibll 主题设置中—文章&列表—-文章页 处找到，版权声明添加以下代码
2、如不是子比主题，样式可通用，放置在你的主题文章页底部即可
样式一：
<!--网站声明代码样式一 start-->
<!--by：彩豆博客-www.521cd.cn-->
<div>
<fieldset style=" border: 1.5px dashed #008cff; padding: 10px; border-radius: 5px; line-height: 2em;font-weight: 700;color: var(--key-color);background-color: var(--body-bg-color);">
<legend align="center" style=" margin-bottom: -2px;width: 30%;text-align: center; background-color: #008cff; border-radius: 999px; background-image: linear-gradient(to right, #FFCC99, #FF99CC);border: 1.5px dashed #008cff;" >
版权声明
</legend>
<span class="btn-info btn-xs">1</span> 本网站名称：<span style="color: #3333ff"><span style="color: #09ace2; font-size: 18px"><strong>彩豆博客</strong></span></span><br />
<span class="btn-info btn-xs">2</span> 本站永久网址：<font color="#09ace2">https://www.521cd.cn</font><br />
<span class="btn-info btn-xs">3</span> 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ<a href="http://wpa.qq.com/msgrd?v=3&uin=931106824&site=qq&menu=yes" target="_blank">931106824</a>进行删除处理。<br />
<span class="btn-info btn-xs">4</span> 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。<br />
<span class="btn-info btn-xs">5</span> 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报<br />
<span class="btn-info btn-xs">6</span> 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。<br />
</fieldset>
</div>
<!--网站声明代码样式一 end-->展示效果：
样式二：
<!--网站声明代码样式二 start-->
<!--by：彩豆博客-www.521cd.cn-->
<div>
<fieldset
style="
border: 1px dashed #008cff;
padding: 10px;
border-radius: 5px;
line-height: 2em;
color: #6d6d6d;
"
>
<legend
align="center"
style="
width: 30%;
text-align: center;
background-color: #008cff;
border-radius: 5px;
background-image: linear-gradient(to right, #0066FF, #FF99CC); text-align:center;"
"
>
文章版权声明
</legend>
<span class="btn-info btn-xs">1</span> 本网站名称：<span style="color: #3333ff"><span style="color: #09ace2; font-size: 18px"><strong>彩豆博客</strong></span></span><br />
<span class="btn-info btn-xs">2</span> 本站永久网址：<font color="#09ace2">https://www.521cd.cn</font><br />
<span class="btn-info btn-xs">3</span> 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ<a href="http://wpa.qq.com/msgrd?v=3&uin=931106824&site=qq&menu=yes" target="_blank">931106824</a>进行删除处理。<br />
<span class="btn-info btn-xs">4</span> 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。<br />
<span class="btn-info btn-xs">5</span> 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报<br />
<span class="btn-info btn-xs">6</span> 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。<br />
</fieldset>
</div>
<!--网站声明代码样式二 END--> 展示效果：
样式三
<!--网站声明代码样式三 start-->
<!--by：彩豆博客-www.521cd.cn-->
<div>
<fieldset
style="
border: 1px dashed #008cff;
padding: 10px;
border-radius: 5px;
line-height: 2em;
color: #6d6d6d;
"
>
<legend
align="center"
style="
width: 30%;
text-align: center;
background-color: #008cff;
border-radius: 5px;
background-image: linear-gradient(to right, #FFCC99, #FF99CC); text-align:center;"
"
>
文章版权声明
</legend>
<span class="btn-info btn-xs">1</span> 本网站名称：<span style="color: #3333ff"><span style="color: #09ace2; font-size: 18px"><strong>彩豆博客</strong></span></span><br />
<span class="btn-info btn-xs">2</span> 本站永久网址：<font color="#09ace2">https://www.521cd.cn</font><br />
<span class="btn-info btn-xs">3</span> 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ<a href="http://wpa.qq.com/msgrd?v=3&uin=931106824&site=qq&menu=yes" target="_blank">931106824</a>进行删除处理。<br />
<span class="btn-info btn-xs">4</span> 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。<br />
<span class="btn-info btn-xs">5</span> 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报<br />
<span class="btn-info btn-xs">6</span> 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。<br />
</fieldset>
</div>
<!--网站声明代码样式三 end-->展示效果：
样式四
<!--文章网站声明代码样式四 start-->
<head>
<style type="text/css">
.post-copyright {
box-shadow: 2px 2px 5px;
line-height: 2;
position: relative;
margin: 40px 0 10px;
padding: 10px 16px;
border: 1px solid var(--light-grey);
transition: box-shadow .3s ease-in-out;
overflow: hidden;
border-radius: 12px!important;
background-color: var(--main-bg-color);
}
.post-copyright:before {
position: absolute;
right: -26px;
top: -120px;
content: '\f25e';
font-size: 200px;
font-family: 'FontAwesome';
opacity: .2;
}
.post-copyright__title {
font-size: 22px;
}
.post-copyright_type {
font-size: 18px;
color:var(--theme-color)
}
.post-copyright .post-copyright-info {
padding-left: 6px;
font-size: 15px;
}
.post-copyright-m-info .post-copyright-a, .post-copyright-m-info .post-copyright-c, .post-copyright-m-info .post-copyright-u {
display: inline-block;
width: fit-content;
padding: 2px 5px;
font-size: 15px;
}
.muted-3-color {
color: var(--main-color);
}
/*手机优化*/
@media screen and (max-width:800px){.post-copyright-m-info{display:none}}
</style>
</head>
<body>
<div class="post-copyright" style="max-width:800px;margin:0 auto;">
<div class="post-copyright__title" style="margin:10px 10px"><span class="post-copyright_title"><strong><script>document.write(document.title);</script></strong></span></div>
<div class="post-copyright__type" style="margin:10px 10px"><span class="post-copyright_type"><script>var url = window.location.href;document.write(document.URL);</script></span></div>
<div class="post-copyright-m">
<div class="post-copyright-m-info">
<div class="post-copyright-a">
<strong>文章作者</strong>
<div class="post-copyright-cc-info">
<strong><a href="https://www.521cd.cn/">彩豆博客</a></strong>
</div>
</div>
<div class="post-copyright-c" style="margin:10px 20px">
<strong>隐私政策</strong>
<div class="post-copyright-cc-info">
<strong><a href="https://www.521cd.cn/privacy-policy">privacy-policy</a></strong>
</div>
</div>
<div class="post-copyright-u" style="margin:10px 20px">
<strong>用户协议</strong>
<div class="post-copyright-cc-info">
<strong><a href="https://www.521cd.cn/agreement">agreement</a></strong>
</div>
</div>
<div class="post-copyright-c" style="margin:10px 20px">
<strong>许可协议 </strong>
<div class="post-copyright-cc-info">
<a class="icon" rel="noopener external nofollow noreferrer" target="_blank" title="Creative Commons" href="https://creativecommons.org/"><i class="fab fa-creative-commons"></i></a>
<strong><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">NC-SA 4.0</a></strong></div>
</div>
</div>
</div>
</div>
</body>
<!--文章网站声明代码样式四 end by www.521cd.cn-->展示效果：
34.网站左上角添加 FPS 帧率显示
使用方法
你只需在网站管理后台—》主题设置—》自定义代码—》自定义 javascript 代码，把下面的 js 代码复制粘贴到里面即可。
自定义 javascript 代码：
// FPS 帧开始
// by：彩豆博客-www.521cd.cn
$('body').before('<div id="fps" style="z-index:10000;position:fixed;top:3;left:3;font-weight:bold;"></div>');
var showFPS = (function(){
var requestAnimationFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000/60);
};
var e,pe,pid,fps,last,offset,step,appendFps;
fps = 0;
last = Date.now();
step = function(){
offset = Date.now() - last;
fps += 1;
if( offset >= 1000 ){
last += offset;
appendFps(fps);
fps = 0;
}
requestAnimationFrame( step );
};
appendFps = function(fps){
console.log(fps+'FPS');
$('#fps').html(fps+'FPS');
};
step();
})();
// by：彩豆博客-www.521cd.cn
// FPS 帧结束效果展示：
35.zibll 子比主题文章标签美化
使用方法
复制 CSS 代码到后台子比主题设置—》自定义 CSS 样式—》将 CSS 代码粘贴框里，即可大功告成。
自定义 CSS 代码：
/*文章随机彩色标签开始*/
.article-tags{margin-bottom: 10px}.article-tags a{padding: 4px 10px;background-color: #19B5FE;color: white;font-size: 12px;line-height: 16px;font-weight: 400;margin: 0 5px 5px 0;border-radius: 2px;display: inline-block}.article-tags a:nth-child(5n){background-color: #4A4A4A;color: #FFF}.article-tags a:nth-child(5n+1){background-color: #ff5e5c;color: #FFF}.article-tags a:nth-child(5n+2){background-color: #ffbb50;color: #FFF}.article-tags a:nth-child(5n+3){background-color: #1ac756;color: #FFF}.article-tags a:nth-child(5n+4){background-color: #19B5FE;color: #FFF}.article-tags a:hover{background-color: #1B1B1B;color: #FFF}
/*by：彩豆博客-www.521cd.cn*/
/*文章随机彩色标签结束*/36.网站添加侧边彩色滚动条
使用方法
一般主题都会自带 自定义代码 这样主题设置的，只需在主题设置自定义 CSS 代码里面添加美化的 css 代码就即可美化啦！
如果主题没有 自定义代码 那么在 WordPress 主题目录文件里找 style.css 文件或者在 WordPress 后台里找“外观—>自定义—>额外 CSS”里面美化的 css 代码就即可美！
彩色滚动条代码 CSS：
/**彩色滚动条样式开始*/
/*by：彩豆博客-www.521cd.cn*/
::-webkit-scrollbar {
width: 10px;
height: 1px;
}
::-webkit-scrollbar-thumb {
background-color: #12b7f5;
background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #f6f6f6;
}
/*by：彩豆博客-www.521cd.cn*/
/**彩色滚动条样式结束*/37.主题 LOGO 扫光
css代码：
/* logo 扫光开始 */
/*by：彩豆博客-www.521cd.cn*/
.navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}}
/*by：彩豆博客-www.521cd.cn*/
/* logo 扫光结束 */38.导航栏标题字体加粗
添加到自定 CSS 代码：
/*导航栏字体加粗开始*/
/*by：彩豆博客-www.521cd.cn*/
ul.nav {font-weight: 700;}
/*by：彩豆博客-www.521cd.cn*/
/*导航栏字体加粗结束*/39.用户头像呼吸光环+鼠标悬停旋转放大
自定义css代码：
/*头像呼吸光环和鼠标悬停旋转放大开始*/
/*by：彩豆博客-www.521cd.cn*/
.avatar{border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s;}.avatar:hover{transform: scale(1.15) rotate(720deg);}@keyframes light{0%{box-shadow: 0 0 4px #f00;} 25%{box-shadow: 0 0 16px #0f0;} 50%{box-shadow: 0 0 4px #00f;} 75%{box-shadow: 0 0 16px #0f0;} 100%{box-shadow: 0 0 4px #f00;}}
/*by：彩豆博客-www.521cd.cn*/
/*头像呼吸光环和鼠标悬停旋转放大结束*/40.首页文章列表悬停上浮开始
自定义 CSS 代码：
/*首页文章列表悬停上浮开始*/
/*by：彩豆博客-www.521cd.cn*/
@media screen and (min-width: 980px){.tab-content .posts-item:not(article){transition: all 0.3s;}.tab-content .posts-item:not(article):hover{transform: translateY(-10px); box-shadow: 0 8px 10px rgba(255, 112, 173, 0.35);}}
/*by：彩豆博客-www.521cd.cn*/
/*首页文章列表悬停上浮结束*/41.WordPress子比主题文章卡片美化
教程简介：
子比主题文章卡片美化，我发现他是在卡片代码内插入html代码配合css实现的，增加这三个点的代码，完全可以使用before来实现这个效果
代码：
.posts-item.card::before {
content: "";
display: block;
background: #fc625d;
top: 9px;
left: 15px;
border-radius: 50%;
width: 9px;
height: 9px;
box-shadow: 16px 0 #fdbc40, 32px 0 #35cd4b;
margin: 0px 2px -7px;
z-index: 1000;
position: absolute;
}
.posts-item.card {
padding: 26px 10px 10px 10px;
}如果觉得和图片的间隔距离不够，可以将padding: 26px 10px 10px 10px;修改成padding: 35px 10px 10px 10px;
展示图片：
42.子比主题评论正则拦截验证代码
教程简介：
最近都能看到垃圾评论，纯数字纯英文有些还附带网址，现在每天几条虽然不多，但以后很难说。每次都要到后台删也是很麻烦的，又不喜欢装插件，就给子比加个正则验证吧，限制评论纯数字/纯英文/日语/俄文/韩文/阿拉伯文/泰文/链接拦截
功能说明：
//功能备注说明
$《变量名》 = '《正则表达式》';
if (preg_match($《变量名》, $_POST['comment'])) {
echo (json_encode(array('error' => 1, 'ys' => 'danger', 'msg' => '《消息提示》')));
exit();
}代码中，所有被《》包含的内容，都可以自定义，替换内容后，将《》删除
使用演示：
下方代码，可实现评论中有数字便拦截
//拦截含有数字的评论
$Ijsz = '/[0-9]/u';
if (preg_match($ljsz, $_POST['comment'])) {
echo (json_encode(array('error' => 1, 'ys' => 'danger', 'msg' => '您的评论不能含有数字')));
exit();
}将代码放到/wp-content/themes/zibll/action/comment.php文件，搜索“内容合规性判断”，将代码放到上方即可！
//拦截评论规则
$comment = $_POST['comment'];
$error_msg = '';
if (preg_match('/^[0-9]+$/u', $comment)) {
$error_msg = '您的评论不能完全由数字组成';
} elseif (preg_match('/^[a-zA-Z]+$/u', $comment)) {
$error_msg = '您的评论不能完全由英文字母组成';
} elseif (!preg_match('/[一-龥0-9a-zA-Z]/u', $comment)) {
$error_msg = '您的评论必须包含汉字、数字或英文字母';
} elseif (preg_match('/(.)\\1{2}/u', $comment)) {
$error_msg = '您的评论不能包含连续出现3次及以上的相同字符';
} elseif (preg_match('/[ぁ-ん]+|[ァ-ヴ]+/u', $comment)) {
$error_msg = '您的评论不能包含日文';
}
if ($error_msg) {
echo json_encode([
'error' => 1,
'ys' => 'danger',
'msg' => $error_msg,
]);
exit();
}相关图片：
43.下载自动识别按钮网盘名称
教程简介：
在子比主题编辑器添加下载资源的时候，一般添加百度云、腾讯微云、蓝奏云等网盘链接的时候，不用填自定义按钮文案就可以在发布文章后自动识别名称
相关图片：
教程如下：
此处隐藏内容
1、找到文件所在地址：/zibll/zibpay/functions/zibpay-download.php
2、打开文件，ctrl+f搜索“蓝奏云”你会看到这段代码，作为参考
很多人不知道怎么搞，我跟举例一个简单的例子，你看里面有很多if语句，然后每一个if语句代表一个网盘识别，可能还是不懂，那就更详细一下，我平常用的123网盘分享的资源，所以以下代码就是识别123盘的代码
if (stripos($down_v['link'], '123pan') || stripos($down_v['link'], 'sharepoint')) {
$down_name = $down_v['name'] ? $down_v['name'] : '123盘';
$class .= ' 123pan';
$icon = zib_get_svg('onedrive');
}大家可以看看上面的代码，看$class后面跟着123pan的这个是什么意思呢，就是这个网盘的主域名，我们要修改的是两个部分，一个是名字。看上面代码中文字可以看到吧，然后把网盘名字改成你常用的，然后上面123pan改成主域名的链接然后放到/zibll/zibpay/functions/zibpay-download.php里面就可以了，一共是写两个域名的地方，我直接给大家如下代码，就立刻就看懂了
if (stripos($down_v['link'], '网盘域名')) {
$down_name = $down_v['name'] ? $down_v['name'] : '显示的下载按钮名称';
$class .= '网盘域名';
$icon = zib_get_svg('网盘域名');
}44.添加好看图形动态背景图
教程简介：
WordPress网站添加一个好看图形动态背景图，样式非常好看，使用简单，CSS代码即可解决的背景美化
相关图片：
body {
background-image: url("图片地址");/**这里改为你自己的图片地址**/
background-position-x: center;
background-position-y: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}45.JS弹窗引导提醒
教程简介：
给子比顶部加一个弹窗跳转，自带win和mac判断系统，很多站有的在使用这个弹窗，如果喜欢的话可以放到子比里面即可
相关图片：
教程如下：
此处隐藏内容
将下面的代码放到自定义代码=>>自定义javascript代码
// 判断存在jq资源
try {
if($ || jQuery) {
tipsFun();
}
} catch(e) {
let script=document.createElement("script");
script.type="text/javascript";
script.src="https://cdn.mac89.com/common/static/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(script);
script.onload = tipsFun;
}
function tipsFun() {
// 判断用户是否是windows
if((navigator.platform == "Win32") || (navigator.platform == "Windows")) {
// let hostName = location.hostname;
// if(hostName === 'mac.mac89.com') return;
let curTime = new Date().getTime();
if(!window.localStorage.hasTips || ((curTime - window.localStorage.hasTips) >= 86400000)) {
setTimeout(()=> {
$(document).ready(function(){
let tipHtml = `
<div class="tip-box" id="tip-box" style="position: fixed; z-index: 9999; width: 740px; height: 150px; background-color: #fff; border-radius: 0 0 20px 20px; text-align: center; font-size: 16px; top: 0; left: 50%; margin-left: -370px; box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.2); display: none; transform: translateY(-100%); transition: all .6s;">
<p class="tip" style="font-size: 18px; line-height: 1; margin: 38px 0 22px;">欢迎来到筑梦博客，如果需要更多子比美化点击前往</p>
<button class="nomore" style="width: 120px; cursor: pointer; height: 40px; border: 1px solid #ddd; outline: none; border-radius: 5px; margin-right: 40px;">不再提醒</button>
<button class="cancel" style="background-color: #333; color: #fff; width: 120px; cursor: pointer; height: 40px; border: none; outline: none; border-radius: 5px; margin-right: 40px;">继续浏览</button>
<button class="sure" style="height: 40px; padding: 0 30px; background-color: #1B78F5; cursor: pointer; color: #fff; border-radius: 5px; outline: none; border: none;">立即前往 (10秒)</button>
</div>`;
$('body').append(tipHtml);
const $tipBox = $('#tip-box');
$tipBox.show().css('transform', 'translateY(0)');
$tipBox.on('click', '.cancel', ()=> {
removeTip();
}).on('click', '.sure', ()=> {
window.open("前往地址");
}).on('click', '.nomore', ()=> {
removeTip();
window.localStorage.hasTips = curTime;
})
let time = 10, timer;
timer = setInterval(()=> {
time--;
$tipBox.find('.sure').text('立即前往 ('+ time +'秒)')
if(time < 1) {
removeTip();
}
}, 1000)
function removeTip() {
$tipBox.css('transform', 'translateY(-100%)');
clearInterval(timer);
setTimeout(function() {
$tipBox.remove();
}, 600)
}
});
}, 1000);
}
}
$('#shop-box').on('click', '.close', function() {
let $box = $('#shop-box')
if($box.hasClass('bot')) {
$box.css({'bottom': '0'})
$(this).css({'transform': 'rotate(0)'})
window.localStorage.hideShop = '';
} else {
$box.css({'bottom': '-117px'})
$(this).css({'transform': 'rotate(180deg)'})
window.localStorage.hideShop = 'hide';
}
$box.toggleClass('bot');
})
}46.底部横向网站信息统计模块
教程简介：
分享一下子比的底部横向网站统计的模块，有博客播报、文章统计、浏览统计，用起来非常美观而且还非常实用的一个底部美化！！！
相关图片：
将下面文件上传博客根目录
tongji.zip
子比主题的主题目录下，header.php 底部添加下方核心函数代码
<script type="text/javascript" >
//文章总数↓
<?php $count_posts = wp_count_posts(); $published_posts =$count_posts->publish;echo "var stat_wzzs="."'$published_posts'";?>
//本周发布↓
<?php $post_wpdb = get_posts_count_from_last_168h($post_type ='post');echo "var stat_bzfb="."'$post_wpdb'";?>
//运行时间↓
<?php $wdyx_time = floor((time()-strtotime("2023-11-1 13:57:00"))/86400);echo "var stat_yxsj="."'$wdyx_time'";?>
//用户总数↓
<?php global $wpdb;$users = $wpdb->get_var("SELECT COUNT(ID) FROM $wpdb->users");echo "var stat_zcyh="."'$users'";?>
//总访问量↓
<?php $post_view = nd_get_all_view();echo "var stat_zfwl="."'$post_view'";?>
</script>路径：/www/wwwroot/tfbkw.com/wp-content/themes/zibll/functions.php
添加如下代码，如有添加过此代码请跳过此步骤。
/* 统计总访问量 */
function nd_get_all_view(){
global $wpdb;
$count=0;
$views= $wpdb->get_results("SELECT * FROM $wpdb->postmeta WHERE meta_key='views'");
foreach($views as $key=>$value){
$meta_value=$value->meta_value;
if($meta_value!=' '){
$count+=(int)$meta_value;
}
}return $count;
}/* 统计本周文章数量 */
function get_posts_count_from_last_168h($post_type ='post') {
global $wpdb;
$numposts = $wpdb->get_var(
$wpdb->prepare(
"SELECT COUNT(ID) ".
"FROM {$wpdb->posts} ".
"WHERE ".
"post_status='publish' ".
"AND post_type= %s ".
"AND post_date> %s",
$post_type, date('Y-m-d H:i:s', strtotime('-168 hours'))
)
);
return $numposts;
}WordPress后台 >> 外观 >> 小工具 >> 首页底部全宽度添加以下代码
<div class="textwidget custom-html-widget"><div id="mizhi-info-wg-mian">
<div class="mizhi-info-item">
<div class="mizhi-wz-item">
<div class="mizhi-wz-sty mizhi-wzzs-item">
<svg class="icon fa-2x" aria-hidden="true">
<use xlink:href="#icon-wenzhang" rel="external nofollow" ></use>
</svg>
<span class="mizhi-i-num"><script type="text/javascript">
document.write(stat_wzzs);
</script>篇</span>
<span class="frame-bg" title="文章数目">文章数目</span>
</div>
<div class="mizhi-wz-sty mizhi-jrfb-item">
<svg class="icon fa-2x" aria-hidden="true">
<use xlink:href="#icon-benzhoudianjihou-copy" rel="external nofollow" ></use>
</svg>
<span class="mizhi-i-num"><script type="text/javascript">
document.write(stat_bzfb);
</script>篇</span>
<span class="frame-bg" title="本周发布">本周发布</span>
</div>
</div>
<div class="mizhi-yhzs-item">
<svg class="icon fa-2x" aria-hidden="true">
<use xlink:href="#icon-yonghu" rel="external nofollow" ></use>
</svg>
<span class="mizhi-i-num"><script type="text/javascript">
document.write(stat_zcyh);
</script>位</span>
<span class="frame-bg" title="注册用户">注册用户</span>
</div>
<div class="mizhi-yxsj-item">
<svg class="icon fa-2x" aria-hidden="true">
<use xlink:href="#icon-daojishi" rel="external nofollow" ></use>
</svg>
<span class="mizhi-i-num"><script type="text/javascript">
document.write(stat_yxsj);
</script>天</span>
<span class="frame-bg" title="运行时间">运行时间</span>
</div>
<div class="mizhi-llzs-item">
<svg class="icon fa-2x" aria-hidden="true">
<use xlink:href="#icon-yanjing-" rel="external nofollow" ></use>
</svg>
<span class="mizhi-i-num "><script type="text/javascript">
document.write(stat_zfwl);
</script>次</span>
<span class="frame-bg" title="浏览次数">浏览次数</span>
</div>
<div class="mizhi-sjcs-item">
<div class="mizhi-sjcj-m">
<span class="mizhi-i-num">——筑梦博客播报 ——</span>
<div id="mizhi-date-text"></div>
<div id="mizhi-week-text"></div>
<div class="mizhi-meo-item">
<img id="mizhi-meos" src="域名/tongji/week-1.webp" alt="emo">
</div>
<div class="mizhi-sjcj-content">
<span id="mizhi-fatalism"></span>
</div>
</div>
</div>
<div class="mizhi-sjcs-item2"><iframe src="域名/tongji/tkr/" width="290" height="290" frameborder="no"></iframe></div>
</div>
</div>
<script>
$(function () {
var myDate = new Date();
var year = myDate.getFullYear(); //获取当前年
var mon = myDate.getMonth() + 1; //获取当前月
var date = myDate.getDate(); //获取当前日
var week = myDate.getDay();
var weeks = [
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六"
];
$("#mizhi-date-text").html(year + "年" + mon + "月" + date + "日"+ weeks[week]);
if (week > 0 && week < 5) {
$("#mizhi-fatalism").html("再坚持一下还有" + (5 - week) + "天就到周末啦！");
} else if (week === 5) {
$("#mizhi-fatalism").html("啊啊啊，明天就是周末啦！");
} else {
$("#mizhi-fatalism").html("今天是周末，好好放肆玩一下吧！");
}
$("#mizhi-meos").attr(
"src","域名/tongji/week-" + week + ".webp"
);
});
$("#mizhi-info-wg-mian").parents(".zib-widget").css({
padding: "0",
background: "none"
});
</script></div>
<link rel="stylesheet" href="域名/tongji/tj2.css" rel="external nofollow" type="text/css">一定要引入图标链接，我这里引入的是阿里的icon的图标，放到自定义底部HTML代码，链接如下
<script src="https://at.alicdn.com/t/c/font_4345756_vfsrwfwjfqj.js"></script>Zibll主题设置 >> 全局&功能 >> 自定义代码 >> 自定义CSS样式
.huliku-info-item{display:grid;grid-gap:15px;grid-template-columns: repeat(6,1fr);grid-template-rows:repeat(2,1fr);width:100%;height:280px;margin-bottom:15px;}
.huliku-llzs-item, .huliku-sjcs-item, .huliku-yhzs-item, .huliku-yxsj-item{width:100%;height:100%;border-radius:8px;text-align:center;box-shadow:0 2px 4px 0 rgba(0,0%,0%,5%);background-color:var(--main-bg-color);overflow:hidden;padding:5px;box-sizing:border-box;}
.huliku-i-num{font-size:20px;font-weight:600}
.huliku-yxsj-item{display:flex;align-items:center;justify-content:center;flex-direction:column}
.huliku-yhzs-item{display:flex;align-items:center;justify-content:center;flex-direction:column}
.huliku-llzs-item{display:flex;align-items:center;justify-content:center;flex-direction:column}
.huliku-wz-item{display:grid;grid-gap:20px;grid-template-columns:repeat(2,1fr);grid-column: 3/6;grid-row:1/2;overflow:unset!important;box-shadow:none!important;padding:0!important;}
.huliku-wz-sty{width:100%;height:100%;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:var(--main-bg-color);box-shadow:0 2px 4px 0 rgba(0,0%,0%,5%)}
.huliku-sjcs-item{grid-row: 1/3;grid-column: 1/3;}
.huliku-sjcj-m{position:relative;font-size:20px;font-weight:700;text-align:center;width:100%;height:100%;padding:10px;box-sizing:border-box;}
.huliku-sjcj-content{text-align:center;margin-top:10px}
.huliku-meo-item{width:282px;height:120px;margin:0 auto}
.huliku-meo-item>img{width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:center center;cursor:pointer}
svg.icon.fa-2x {margin-top: 15px;}
@media screen and (max-width:959px){.huliku-info-item{grid-gap:10px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);height:500px;}
.huliku-sjcs-item{grid-row:3/5;grid-column:1/4}
.huliku-i-num{font-size:20px}
.huliku-sjcj-m{font-size:16px}}
.enlighter-default .enlighter{max-height:400px;overflow-y:auto !important;}.posts-item .item-heading>a {font-weight: bold;color: unset;}@media (max-width:640px) {.meta-right .meta-view{display: unset !important;}}
.huliku-sjcs-item2 {grid-row: 1/3;}
.huliku-sjcs-item2 {width: 100%;height: 100%;border-radius: 8px;text-align: center;box-shadow: 0 2px 4px 0 rgba(0,0%,0%,5%);background-color: var(--main-bg-color);box-sizing: border-box;grid-row: 1/3;grid-column: 6/6;}
@media screen and (max-width:959px){.huliku-wz-item{grid-column: 1/4}.huliku-sjcs-item2 {display:none}}
.huliku-ip-item, .huliku-sjcs-item, .huliku-yhzs-item, .huliku-yxsj-item{width:100%;height:100%;border-radius:8px;text-align:center;box-shadow:0 2px 4px 0 rgba(0,0%,0%,5%);background-color:var(--main-bg-color);overflow:hidden;padding:5px;box-sizing:border-box;}
.huliku-ip-item{display:flex;align-items:center;justify-content:center;flex-direction:column}47.文章列表右上角添加文章置顶+新文章发布ICON图标
教程简介：
在新更新的文章上角加一个图标，用来提醒那些是最新更新的文章
相关图片：
PHP代码：
在子比主题目录下“func.php”(子比主题推荐放这里）或者“functions.php”，在合适位置放下面PHP代码
/**
* 新文章发布New小图标
*/
function wiiuii_post_newicon($post){
//date_default_timezone_set('PRC');
$wiui_date = date("Y-m-d H:i:s");
$wiui_post_date = get_the_time('Y-m-d H:i:s', $post);
$wiui_diff = (strtotime($wiui_date)-strtotime($wiui_post_date))/3600;
if($wiui_diff<24){
$wiui_new_icon = '<div class="wiiuii-new-icon"><img src="自行更换" draggable="false" alt="最新文章" /></div>';
}else if (is_sticky()){
$wiui_new_icon = '<div class="wiiuii-new-icon"><img src=自行更换喜欢的图片" draggable="false" alt="置顶文章" /></div>';
}else{
$wiui_new_icon = '';
}
//开始输出
return $wiui_new_icon;
}图片下载：
图标下载地址
上面《img》标签中icon图标链接自己修改。
在子比主题目录下“/zibll/inc/functions/zib-posts-list.php”文件中，大概440行的文章放入下面PHP代码（看图）
$html .= wiiuii_post_newicon($post);//新文章+置顶文章icon图标函数修改地址图片：
CSS代码：
/*新文章发布图标样式*/
.posts-item{position: relative !important;}
.wiiuii-new-icon{position: absolute;height: 35px;right: 0;top: 0;}
.wiiuii-new-icon img{-webkit-user-drag: none;}48.网站赞助页面的修改教程
源码简介：
如果您正在寻找好看的赞助页面源码，您可能会依靠捐赠或赞助来获得资金。
确保您以正确的大气的赞助页面是您成功不可或缺的一部分。 你必须确保你带领你的赞助商决定以最好的方式把他们的钱交给你。
站长在这里收集了一些赞助页面源码重新修改美化，一个好看的赞助页面就此诞生。
相关图片：
使用教程：下面代码上传到
wp后台添加页面，选择赞助页面
赞助页面代码.zip
49.网站底部信息统计模块自动获取日期及访问者IP
展示图片：
1.子比主题的主题目录下，header.php 底部添加下方核心函数代码：
<!--统计信息函数-->
<script type="text/javascript" >
<?php
//用户总数
$users = $wpdb->get_var("SELECT COUNT(ID) FROM $wpdb->users");echo "var tj_jstext="."'$users'";
?>
</script>
<script type="text/javascript" >
<?php
/*
* WordPress 获取今日发布文章数量
*/
function nd_get_24h_post_count(){
$today = getdate();
$query = new WP_Query( 'year=' . $today["year"] . '&monthnum=' . $today["mon"] . '&day=' . $today["mday"]);
$postsNumber = $query->found_posts;
return $postsNumber;
}
$post_24h = nd_get_24h_post_count();
echo "var tj_24h="."'$post_24h'";
?>
</script>
<script type="text/javascript" >
<?php
/*
* WordPress 整站文章访问计数
*/
function nd_get_all_view(){
global $wpdb;
$count=0;
$views= $wpdb->get_results("SELECT * FROM $wpdb->postmeta WHERE meta_key='views'");
foreach($views as $key=>$value){
$meta_value=$value->meta_value;
if($meta_value!=' '){
$count+=(int)$meta_value;
}
}return $count;
}
$post_view = nd_get_all_view();
echo "var tj_view="."'$post_view'";
?>
</script>
<script type="text/javascript" >
<?php
//日志总数
$count_posts = wp_count_posts();
$published_posts =$count_posts->publish;
echo "var tj_rzzs="."'$published_posts'";
?>
</script>
<script type="text/javascript" >
<?php
//稳定运行
$wdyx_time = floor((time()-strtotime("2021-6-21"))/86400);
echo "var tj_wdyx="."'$wdyx_time'";
?>
</script>
<!--统计信息函数-->2.footer.php添加以下面代码：
50.侧边栏旗下网站小工具
给子比主题侧边栏加一个旗下网站的小工具样式美化，适合做自己的导航网站，非常实用的一个小工具样式
代码如下：
HTML代码，小工具自定义html
<div class="attentionus"><span class="zhan-widget-link zhan-link-z1"> <span class="zhan-widget-link-count">个人介绍主页</span> <a href="https://521cd.cn/" target="_blank" rel="noopener"><span class="zhan-widget-link-title">彩豆博客</span> </a></span><br />
<span class="zhan-widget-link zhan-link-z2"> <span class="zhan-widget-link-count">在线视频解析</span> <a href="https://www.521cd.cn/shipin" target="_blank" rel="noopener"><span class="zhan-widget-link-title">视频解析</span> </a></span><br />
<span class="zhan-widget-link zhan-link-z3"> <span class="zhan-widget-link-count">下载源码</span> <a href="https://www.521cd.cn/cxym" target="_blank" rel="noopener"><span class="zhan-widget-link-title">程序源码</span> </a></span><br />
<span class="zhan-widget-link zhan-link-z4"> <span class="zhan-widget-link-count">软件基地</span> <a href="https://www.521cd.cn/syrj" target="_blank" rel="noopener"><span class="zhan-widget-link-title">实用软件</span> </a></span><br />
<span class="zhan-widget-link zhan-link-z5"> <span class="zhan-widget-link-count">更好的了解彩豆</span> <a href="https://www.521cd.cn/sample-page" target="_blank" rel="noopener"><span class="zhan-widget-link-title">关于我们</span> </a></span></div> CSS代码，子比主题将HTML代码放到小工具里面，自定义HTML自己找地方，CSS放到自定义CSS即可！
.zhan-widget-link{position:relative;margin-bottom:-10px !important;position:relative;display:block;font-size:13px;background:#fff;color:#525252;line-height:40px;margin-left:-10px;padding:0 14px;border:1px solid #DDD;border-radius:2px;width:auto}span.zhan-widget-link.zhan-link-z1 {margin-top: -10px;}.zhan-widget-link-count i{margin-right:9px;font-size:17px;vertical-align:middle}.zhan-widget-link-title{position:absolute;top:-1px;right:-14px !important;bottom:-1px;width:100px;text-align:center;background:rgba(255,255,255,.08);transition:width .3s;border-radius:0 3px 3px 0}.zhan-widget-link:hover .zhan-widget-link-title{width:116px}.zhan-widget-link a{position:absolute;top:0;left:0;right:0;bottom:0}.zhan-link-z1{border-color:rgba(236,61,81,.39)}.zhan-link-z1 i{color:#FFF;margin-right:3px}.zhan-link-z1 .zhan-widget-link-title{background-color:#ec3d51;color:#fff}.zhan-link-z2{border-color:rgba(18,170,232,.39)}.zhan-link-z2 i{color:#FFF;margin-right:3px}.zhan-link-z2 .zhan-widget-link-title{background-color:#12aae8;color:#fff}.zhan-link-z3{border-color:rgba(221,7,208,.39)}.zhan-link-z3 i{color:#FFF;margin-right:3px}.zhan-link-z3 .zhan-widget-link-title{background-color:#dd07d0;color:#fff}.zhan-link-z4{border-color:rgba(249,82,16,.39)}.zhan-link-z4 i{color:#FFF;margin-right:3px}.zhan-link-z4 .zhan-widget-link-title{background-color:#f95210;color:#fff}.zhan-link-z5{border-color:rgba(25,152,114,.39)}.zhan-link-z5 i{color:#FFF;margin-right:3px}.zhan-link-z5 .zhan-widget-link-title{background-color:#199872;color:#fff}51.分享几款外链GO跳转页面
直接将下面的代码复制粘贴替换你的go.php文件即可！
样式一：
<?php
/*
* @Url : zibll.com
* @Date : 2020-09-29 13:18:36
* @LastEditTime: 2021-04-27 17:54:39
* @彩豆博客 : www.521cd.cn
* @Project : Zibll子比主题
* @Description : 一款极其优雅的Wordpress主题
* @Read me : 感谢您使用子比主题，主题源码有详细的注释，支持二次开发。欢迎各位朋友与我相互交流。
* @Remind : 使用盗版主题会存在各种未知风险。支持正版，从我做起！
*/
if (
strlen($_SERVER['REQUEST_URI']) > 384 ||
strpos($_SERVER['REQUEST_URI'], "eval(") ||
strpos($_SERVER['REQUEST_URI'], "base64")
) {
@header("HTTP/1.1 414 Request-URI Too Long");
@header("Status: 414 Request-URI Too Long");
@header("Connection: Close");
@exit;
}
//通过QUERY_STRING取得完整的传入数据，然后取得url=之后的所有值，兼容性更好
@session_start();
$t_url = !empty($_SESSION['GOLINK']) ? $_SESSION['GOLINK'] : preg_replace('/^url=(.*)$/i', '$1', $_SERVER["QUERY_STRING"]);
//数据处理
if (!empty($t_url)) {
//判断取值是否加密
if ($t_url == base64_encode(base64_decode($t_url))) {
$t_url = base64_decode($t_url);
}
//防止xss
$t_url = htmlspecialchars($t_url);
//对取值进行网址校验和判断
preg_match('/^(http|https|thunder|qqdl|ed2k|Flashget|qbrowser):\/\//i', $t_url, $matches);
if ($matches) {
$url = $t_url;
$title = '页面加载中,请稍候...';
} else {
preg_match('/\./i', $t_url, $matche);
if ($matche) {
$url = 'http://' . $t_url;
$title = '页面加载中,请稍候...';
} else {
$url = 'http://' . $_SERVER['HTTP_HOST'];
$title = '参数错误，正在返回首页...';
}
}
} else {
$title = '参数缺失，正在返回首页...';
$url = 'http://' . $_SERVER['HTTP_HOST'];
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<noscript><meta http-equiv="refresh" content="1;url='<?php echo $url;?>';"></noscript>
<script>
function link_jump()
{
//禁止其他网站使用我们的跳转页面
var MyHOST = new RegExp("<?php echo $_SERVER['HTTP_HOST']; ?>");
if (!MyHOST.test(document.referrer)) {
location.href="http://" + MyHOST;
}
location.href="<?php echo $url;?>";
}
//延时1S跳转，可自行修改延时时间
setTimeout(link_jump, 2250);
//延时50S关闭跳转页面，用于文件下载后不会关闭跳转页的问题
setTimeout(function(){window.opener=null;window.close();}, 50000);
</script>
<title><?php echo $title;?></title>
<style type="text/css">
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}body{background:#3498db;}#loader-container{width:188px;height:188px;color:white;margin:0 auto;position:absolute;top:50%;left:50%;margin-right:-50%;transform:translate(-50%,-50%);border:5px solid #3498db;border-radius:50%;-webkit-animation:borderScale 1s infinite ease-in-out;animation:borderScale 1s infinite ease-in-out;}#loadingText{font-family:'Raleway',sans-serif;font-size:1.4em;position:absolute;top:50%;left:50%;margin-right:-50%;transform:translate(-50%,-50%);}@-webkit-keyframes borderScale{0%{border:5px solid white;}50%{border:25px solid #3498db;}100%{border:5px solid white;}}@keyframes borderScale{0%{border:5px solid white;}50%{border:25px solid #3498db;}100%{border:5px solid white;}}
</style>
<body>
<div id="loader-container"><p id="loadingText">页面加载中...</p></div>
</body>
</html>样式二：
<?php
/*
* @Url : zibll.com
* @Date : 2020-09-29 13:18:36
* @LastEditTime: 2021-04-27 17:54:39
* @彩豆博客 : www.521cd.cn
* @Project : Zibll子比主题
* @Description : 一款极其优雅的Wordpress主题
* @Read me : 感谢您使用子比主题，主题源码有详细的注释，支持二次开发。欢迎各位朋友与我相互交流。
* @Remind : 使用盗版主题会存在各种未知风险。支持正版，从我做起！
*/
if (
strlen($_SERVER['REQUEST_URI']) > 384 ||
strpos($_SERVER['REQUEST_URI'], "eval(") ||
strpos($_SERVER['REQUEST_URI'], "base64")
) {
@header("HTTP/1.1 414 Request-URI Too Long");
@header("Status: 414 Request-URI Too Long");
@header("Connection: Close");
@exit;
}
//通过QUERY_STRING取得完整的传入数据，然后取得url=之后的所有值，兼容性更好
@session_start();
$t_url = !empty($_SESSION['GOLINK']) ? $_SESSION['GOLINK'] : preg_replace('/^url=(.*)$/i', '$1', $_SERVER["QUERY_STRING"]);
//数据处理
if (!empty($t_url)) {
//判断取值是否加密
if ($t_url == base64_encode(base64_decode($t_url))) {
$t_url = base64_decode($t_url);
}
//防止xss
$t_url = htmlspecialchars($t_url);
//对取值进行网址校验和判断
preg_match('/^(http|https|thunder|qqdl|ed2k|Flashget|qbrowser):\/\//i', $t_url, $matches);
if ($matches) {
$url = $t_url;
$title = '页面加载中,请稍候...';
} else {
preg_match('/\./i', $t_url, $matche);
if ($matche) {
$url = 'http://' . $t_url;
$title = '页面加载中,请稍候...';
} else {
$url = 'http://' . $_SERVER['HTTP_HOST'];
$title = '参数错误，正在返回首页...';
}
}
} else {
$title = '参数缺失，正在返回首页...';
$url = 'http://' . $_SERVER['HTTP_HOST'];
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<noscript><meta http-equiv="refresh" content="1;url='<?php echo $url;?>';"></noscript>
<script>
function link_jump()
{
//禁止其他网站使用我们的跳转页面
var MyHOST = new RegExp("<?php echo $_SERVER['HTTP_HOST']; ?>");
if (!MyHOST.test(document.referrer)) {
location.href="http://" + MyHOST;
}
location.href="<?php echo $url;?>";
}
//延时1S跳转，可自行修改延时时间
setTimeout(link_jump, 1500);
//延时50S关闭跳转页面，用于文件下载后不会关闭跳转页的问题
setTimeout(function(){window.opener=null;window.close();}, 50000);
</script>
<title><?php echo $title;?></title>
<style>html{height:100%;min-height:100%;overflow:hidden}html body{background:#222428;background-size:163px;font:14px/21px Monaco,sans-serif;color:#999;font-smoothing:antialiased;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;height:100%;min-height:100%}html body a,html body a:visited{text-decoration:none;color:#ff805f}html body h4{margin:0;color:#666}.scene{width:100%;height:100%;-webkit-perspective:600;perspective:600;display:flex;align-items:center;justify-content:center}.scene svg{width:240px;height:240px}.dc-logo{position:fixed;right:10px;bottom:10px}.dc-logo:hover svg{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-animation:arrow-spin 2.5s 0s cubic-bezier(0.165,0.84,0.44,1) infinite;animation:arrow-spin 2.5s 0s cubic-bezier(0.165,0.84,0.44,1) infinite}.dc-logo:hover:hover:before{content:'\2764';padding:6px;font:10px/1 Monaco,sans-serif;font-size:10px;color:#00fffe;text-transform:uppercase;position:absolute;left:-70px;top:-30px;white-space:nowrap;z-index:20px;box-shadow:0 0 4px #222;background:rgba(0,0,0,0.4)}.dc-logo:hover:hover:after{content:'Digital Craft';padding:6px;font:10px/1 Monaco,sans-serif;font-size:10px;color:#6e6f71;text-transform:uppercase;position:absolute;right:0;top:-30px;white-space:nowrap;z-index:20px;box-shadow:0 0 4px #222;background:rgba(0,0,0,0.4);background-image:none}@-webkit-keyframes arrow-spin{50%{-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}}@keyframes arrow-spin{50%{-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}}</style>
</head>
<body>
<div class="scene">
<svg version="1.1" id="dc-spinner" x="0px" y="0px" width:"38"="" height:"38"="" viewBox="0 0 38 38" preserveAspectRatio="xMinYMin meet">
<text x="14" y="21" font-family="Monaco" font-size="2px" style="letter-spacing:0.6" fill="grey">加载中...
<animate attributeName="opacity" values="0;1;0" dur="1.8s" repeatCount="indefinite"></animate>
</text>
<path fill="#373a42" d="M20,35c-8.271,0-15-6.729-15-15S11.729,5,20,5s15,6.729,15,15S28.271,35,20,35z M20,5.203
C11.841,5.203,5.203,11.841,5.203,20c0,8.159,6.638,14.797,14.797,14.797S34.797,28.159,34.797,20
C34.797,11.841,28.159,5.203,20,5.203z">
</path>
<path fill="#373a42" d="M20,33.125c-7.237,0-13.125-5.888-13.125-13.125S12.763,6.875,20,6.875S33.125,12.763,33.125,20
S27.237,33.125,20,33.125z M20,7.078C12.875,7.078,7.078,12.875,7.078,20c0,7.125,5.797,12.922,12.922,12.922
S32.922,27.125,32.922,20C32.922,12.875,27.125,7.078,20,7.078z">
</path>
<path fill="#2AA198" stroke="#2AA198" stroke-width="0.6027" stroke-miterlimit="10" d="M5.203,20
c0-8.159,6.638-14.797,14.797-14.797V5C11.729,5,5,11.729,5,20s6.729,15,15,15v-0.203C11.841,34.797,5.203,28.159,5.203,20z">
<animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" calcMode="spline" keySplines="0.4, 0, 0.2, 1" keyTimes="0;1" dur="2s" repeatCount="indefinite"></animateTransform>
</path>
<path fill="#859900" stroke="#859900" stroke-width="0.2027" stroke-miterlimit="10" d="M7.078,20
c0-7.125,5.797-12.922,12.922-12.922V6.875C12.763,6.875,6.875,12.763,6.875,20S12.763,33.125,20,33.125v-0.203
C12.875,32.922,7.078,27.125,7.078,20z">
<animateTransform attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="1.8s" repeatCount="indefinite"></animateTransform>
</path>
</svg>
</div>
</body>
</html>样式三：
<?php
/*
* @Url : zibll.com
* @Date : 2020-09-29 13:18:36
* @LastEditTime: 2021-04-27 17:54:39
* @彩豆博客 : www.521cd.cn
* @Project : Zibll子比主题
* @Description : 一款极其优雅的Wordpress主题
* @Read me : 感谢您使用子比主题，主题源码有详细的注释，支持二次开发。欢迎各位朋友与我相互交流。
* @Remind : 使用盗版主题会存在各种未知风险。支持正版，从我做起！
*/
if (
strlen($_SERVER['REQUEST_URI']) > 384 ||
strpos($_SERVER['REQUEST_URI'], "eval(") ||
strpos($_SERVER['REQUEST_URI'], "base64")
) {
@header("HTTP/1.1 414 Request-URI Too Long");
@header("Status: 414 Request-URI Too Long");
@header("Connection: Close");
@exit;
}
//通过QUERY_STRING取得完整的传入数据，然后取得url=之后的所有值，兼容性更好
@session_start();
$t_url = !empty($_SESSION['GOLINK']) ? $_SESSION['GOLINK'] : preg_replace('/^url=(.*)$/i', '$1', $_SERVER["QUERY_STRING"]);
//数据处理
if (!empty($t_url)) {
//判断取值是否加密
if ($t_url == base64_encode(base64_decode($t_url))) {
$t_url = base64_decode($t_url);
}
//防止xss
$t_url = htmlspecialchars($t_url);
//对取值进行网址校验和判断
preg_match('/^(http|https|thunder|qqdl|ed2k|Flashget|qbrowser):\/\//i', $t_url, $matches);
if ($matches) {
$url = $t_url;
$title = '页面加载中,请稍候...';
} else {
preg_match('/\./i', $t_url, $matche);
if ($matche) {
$url = 'http://' . $t_url;
$title = '页面加载中,请稍候...';
} else {
$url = 'http://' . $_SERVER['HTTP_HOST'];
$title = '参数错误，正在返回首页...';
}
}
} else {
$title = '参数缺失，正在返回首页...';
$url = 'http://' . $_SERVER['HTTP_HOST'];
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<noscript><meta http-equiv="refresh" content="1;url='<?php echo $url;?>';"></noscript>
<script>
function link_jump()
{
//禁止其他网站使用我们的跳转页面
var MyHOST = new RegExp("<?php echo $_SERVER['HTTP_HOST']; ?>");
if (!MyHOST.test(document.referrer)) {
location.href="http://" + MyHOST;
}
location.href="<?php echo $url;?>";
}
//延时1S跳转，可自行修改延时时间
setTimeout(link_jump, 2250);
//延时50S关闭跳转页面，用于文件下载后不会关闭跳转页的问题
setTimeout(function(){window.opener=null;window.close();}, 50000);
</script>
<title><?php echo $title;?></title>
<style type="text/css">
.flex-container{width: 100%;height: 100%;position: relative;display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}body{background:#fff;/*背景*/background-image:url(https://api.66mz8.com/api/rand.acg.php?type=%E7%BE%8E%E5%A5%B3&format=jpg);background-repeat:no-repeat;background-position:center center;}.unit{text-align: center;}.unit p{margin-top: 120px;font-family: 'Lato', sans-serif;text-transform: uppercase;color: #6cc;}.heart{position: relative;font-size: 0;width: 138px;}[class*="heart-piece-"]{position: absolute;top: -5px;width: 10px;height: 10px;border-radius: 5px;}.heart-piece-4{-webkit-animation: piece-4 1.0s infinite;animation: piece-4 1.0s infinite;}.heart-piece-3,.heart-piece-5{-webkit-animation: piece-3 1.0s infinite;animation: piece-3 1.0s infinite;}.heart-piece-2,.heart-piece-6{-webkit-animation: piece-2 1.0s infinite;animation: piece-2 1.0s infinite;}.heart-piece-1,.heart-piece-7{-webkit-animation: piece-1 1.0s infinite;animation: piece-1 1.0s infinite;}.heart-piece-0,.heart-piece-8{-webkit-animation: piece-0 1.0s infinite;animation: piece-0 1.0s infinite;}.heart-piece-0{left: 0px;-webkit-animation-delay: 0s;animation-delay: 0s;background-color: #57f1f1;}.heart-piece-1{left: 16px;-webkit-animation-delay: 0.05s;animation-delay: 0.05s;background-color: #3ed6d6;}.heart-piece-2{left: 32px;-webkit-animation-delay: 0.1s;animation-delay: 0.1s;background-color: #42c3e0;}.heart-piece-3{left: 48px;-webkit-animation-delay: 0.15s;animation-delay: 0.15s;background-color: #07ead5;}.heart-piece-4{left: 64px;-webkit-animation-delay: 0.2s;animation-delay: 0.2s;background-color: #42c3e0;}.heart-piece-5{left: 80px;-webkit-animation-delay: 0.25s;animation-delay: 0.25s;background-color: #07ead5;}.heart-piece-6{left: 96px;-webkit-animation-delay: 0.3s;animation-delay: 0.3s;background-color: #42c3e0;}.heart-piece-7{left: 112px;-webkit-animation-delay: 0.35s;animation-delay: 0.35s;background-color: #3ed6d6;}.heart-piece-8{left: 128px;-webkit-animation-delay: 0.4s;animation-delay: 0.4s;background-color: #57f1f1;}@-webkit-keyframes piece-4{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 94px;top: -23px;}}@keyframes piece-4{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 94px;top: -23px;}}@-webkit-keyframes piece-3{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 90px;top: -31px;}}@keyframes piece-3{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 90px;top: -31px;}}@-webkit-keyframes piece-2{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 80px;top: -37px;}}@keyframes piece-2{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 80px;top: -37px;}}@-webkit-keyframes piece-1{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 60px;top: -31px;}}@keyframes piece-1{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 60px;top: -31px;}}@-webkit-keyframes piece-0{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 30px;top: -15px;}}@keyframes piece-0{0%, 10%, 90%, 100%{height: 10px;top: -5px;}45%, 55%{height: 30px;top: -15px;}}
</style>
</head>
<body>
<div class="flex-container">
<div class="unit">
<div class="heart">
<div class="heart-piece-0"></div>
<div class="heart-piece-1"></div>
<div class="heart-piece-2"></div>
<div class="heart-piece-3"></div>
<div class="heart-piece-4"></div>
<div class="heart-piece-5"></div>
<div class="heart-piece-6"></div>
<div class="heart-piece-7"></div>
<div class="heart-piece-8"></div>
</div>
<p style="font-weight:700;">正在检查链接安全....</p>
</div>
</div>
</body>
</html>样式四：
<?php
/*
* @Author : XyPro
* @Url : 21lhz.cn
* @Date : 2021-09-28 21:14:36
* @LastEditTime : 2021-09-28 22:00:00
* @彩豆博客 : www.521cd.cn
* @Project : Zibll子比主题
* @Description : 一款极其优雅的Wordpress主题
* @Read me : 感谢您选择夕阳博客，网站有各种各样的资源大都免费。欢迎各位朋友与我相互交流。
* @Remind : 使用盗版主题会存在各种未知风险。支持正版，从我做起！
*/
if (
strlen($_SERVER['REQUEST_URI']) > 384 ||
strpos($_SERVER['REQUEST_URI'], "eval(") ||
strpos($_SERVER['REQUEST_URI'], "base64")
) {
@header("HTTP/1.1 414 Request-URI Too Long");
@header("Status: 414 Request-URI Too Long");
@header("Connection: Close");
@exit;
}
//通过QUERY_STRING取得完整的传入数据，然后取得url=之后的所有值，兼容性更好
@session_start();
$t_url = !empty($_SESSION['GOLINK']) ? $_SESSION['GOLINK'] : preg_replace('/^url=(.*)$/i', '$1', $_SERVER["QUERY_STRING"]);
//数据处理
if (!empty($t_url)) {
//判断取值是否加密
if ($t_url == base64_encode(base64_decode($t_url))) {
$t_url = base64_decode($t_url);
}
//防止xss
$t_url = htmlspecialchars($t_url);
//对取值进行网址校验和判断
preg_match('/^(http|https|thunder|qqdl|ed2k|Flashget|qbrowser):\/\//i', $t_url, $matches);
if ($matches) {
$url = $t_url;
$title = '页面加载中,请稍候...';
} else {
preg_match('/\./i', $t_url, $matche);
if ($matche) {
$url = 'http://' . $t_url;
$title = '页面加载中,请稍候...';
} else {
$url = 'http://' . $_SERVER['HTTP_HOST'];
$title = '参数错误，正在返回首页...';
}
}
} else {
$title = '参数缺失，正在返回首页...';
$url = 'http://' . $_SERVER['HTTP_HOST'];
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<noscript><meta http-equiv="refresh" content="1;url='<?php echo $url;?>';"></noscript>
<script>
function link_jump()
{
//禁止其他网站使用我们的跳转页面
var MyHOST = new RegExp("<?php echo $_SERVER['HTTP_HOST']; ?>");
if (!MyHOST.test(document.referrer)) {
location.href="http://" + MyHOST;
}
location.href="<?php echo $url;?>";
}
//延时1S跳转，可自行修改延时时间
setTimeout(link_jump, 2250);
//延时50S关闭跳转页面，用于文件下载后不会关闭跳转页的问题
setTimeout(function(){window.opener=null;window.close();}, 50000);
</script>
<title><?php echo $title;?></title>
<style>html, body { width: 100%; height: 100%; margin: 0; background: #270F34; overflow: hidden; display: flex; align-items: center; justify-content: center } css-doodle { --color: @p(#51eaea, #fffde1, #ff9d76, #FB3569); --rule: ( :doodle { @grid: 30x1 / 18vmin; --deg: @p(-180deg, 180deg); } :container { perspective: 30vmin; } :after, :before { content: ''; background: var(--color); @place-cell: @r(100%) @r(100%); @size: @r(6px); @shape: heart; } @place-cell: center; @size: 100%; box-shadow: @m(2, (0 0 50px var(--color))); background: @m(100, (radial-gradient(var(--color) 50%, transparent 0) @r(-20%, 120%) @r(-20%, 100%) / 1px 1px no-repeat)); will-change: transform, opacity; animation: scale-up 12s linear infinite; animation-delay: calc(-12s / @size() * @i()); @keyframes scale-up { 0%, 95.01%, 100% { transform: translateZ(0) rotate(0); opacity: 0; } 10% { opacity: 1; } 95% { transform: translateZ(35vmin) rotateZ(@var(--deg));}})}.spinner{position:absolute;top:0;left:50%;display:block;margin-left:-310px;width:1px;height:1px;border:20px solid rgba(255,255,255,1);-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;border-left-color:transparent;border-right-color:transparent;-webkit-animation:spin 1.5s infinite;-moz-animation:spin 1.5s infinite;animation:spin 1.5s infinite}@-webkit-keyframes spin{0%,100%{-webkit-transform:rotate(0deg) scale(1)}50%{-webkit-transform:rotate(720deg) scale(0.6)}}@-moz-keyframes spin{0%,100%{-moz-transform:rotate(0deg) scale(1)}50%{-moz-transform:rotate(720deg) scale(0.6)}}@-o-keyframes spin{0%,100%{-o-transform:rotate(0deg) scale(1)}50%{-o-transform:rotate(720deg) scale(0.6)}}@keyframes spin{0%,100%{transform:rotate(0deg) scale(1)}50%{transform:rotate(720deg) scale(0.6)}}</style></head>
<body>
<div style="z-index: 999;font-size: 30px;margin: 0 auto;position: absolute;color: #fff;"><span class="spinner"></span>夕阳博客正在为您努力加载中，请稍候...</div>
<css-doodle use="var(--rule)"></css-doodle>
<script src='https://21lhz.cn/wp-content/themes/zibll/js/go-min.js'></script>
</body>
</html>样式五：
<?php
/*
* @Url : zibll.com
* @Date : 2020-09-29 13:18:36
* @LastEditTime: 2023-11-09 13:45:10
* @彩豆博客 : www.521cd.cn
* @Project : Zibll子比主题
* @Description : 一款极其优雅的Wordpress主题
* @Read me : 感谢您使用子比主题，主题源码有详细的注释，支持二次开发。
* @Remind : 使用盗版主题会存在各种未知风险。支持正版，从我做起！
*/
if (
strlen($_SERVER['REQUEST_URI']) > 384 ||
strpos($_SERVER['REQUEST_URI'], "eval(") ||
strpos($_SERVER['REQUEST_URI'], "base64")
) {
@header("HTTP/1.1 414 Request-URI Too Long");
@header("Status: 414 Request-URI Too Long");
@header("Connection: Close");
@exit;
}
//通过QUERY_STRING取得完整的传入数据，然后取得url=之后的所有值，兼容性更好
@session_start();
$t_url = !empty($_SESSION['GOLINK']) ? $_SESSION['GOLINK'] : preg_replace('/^url=(.*)$/i', '$1', $_SERVER["QUERY_STRING"]);
//数据处理
if (!empty($t_url)) {
//判断取值是否加密
if ($t_url == base64_encode(base64_decode($t_url))) {
$t_url = base64_decode($t_url);
}
//防止xss
$t_url = htmlspecialchars($t_url);
//对取值进行网址校验和判断
preg_match('/^(http|https|thunder|qqdl|ed2k|Flashget|qbrowser):\/\//i', $t_url, $matches);
if ($matches) {
$url = $t_url;
$title = '页面加载中,请稍候...';
} else {
preg_match('/\./i', $t_url, $matche);
if ($matche) {
$url = 'http://' . $t_url;
$title = '页面加载中,请稍候...';
} else {
$url = 'http://' . $_SERVER['HTTP_HOST'];
$title = '参数错误，正在返回首页...';
}
}
} else {
$title = '参数缺失，正在返回首页...';
$url = 'http://' . $_SERVER['HTTP_HOST'];
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="robots" content="noindex, nofollow" />
<title><?php echo $title; ?></title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
<link rel="shortcut icon" type="image/ico" href="https://www.521cd.cn/logo.png">
<script>
function link_jump()
{
//禁止其他网站使用我们的跳转页面
var MyHOST = new RegExp("<?php echo $_SERVER['HTTP_HOST']; ?>");
if (!MyHOST.test(document.referrer)) {
location.href="https://" + MyHOST;
}
location.href="<?php echo $url; ?>";
}
//延时1S跳转，可自行修改延时时间
//setTimeout(link_jump, 1500);
//延时50S关闭跳转页面，用于文件下载后不会关闭跳转页的问题
setTimeout(function(){window.opener=null;window.close();}, 50000);
</script>
<style>
*,:after,:before{box-sizing:border-box}body.reader-black-font,body.reader-black-font .history-mode .view-area,body.reader-black-font .history-mode .view-area pre,body.reader-black-font .main .kalamu-area,body.reader-black-font .main .markdown .text,body.reader-black-font input,body.reader-black-font select,body.reader-black-font textarea{font-family:-apple-system,SF UI Text,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif}body{background:#f6f7f8}.ext-link__wrapper{position:absolute;width:620px;padding:40px 0;border-radius:6px;text-align:center;top:118px;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);background-color:#fff;box-shadow:0 1px 3px rgba(27,95,160,.1);overflow:hidden}.title{font-size:22px;color:#2f2f2f}.sub-title{font-size:16px;color:#888;margin-top:8px}.link-bd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;width:460px;margin:12px auto 0;padding:10px;border-radius:4px;background:#ebf6ff;border:1px solid #dceaf5;zoom:1}.link-bd:after,.link-bd:before{content:" ";display:table}.link-bd .link-bd__icon{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:flex;align-items:center;width:40px;justify-content:center;height:40px;line-height:40px;font-size:20px;background:#bcc6d8;text-align:center;border-radius:2px}.link-btn{text-align:center;font-size:0;margin-top:24px}.link-bd .link-bd__text{font-size:14px;color:#006cbe;margin-left:10px;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap}.link-btn__text{display:inline-block;width:144px;height:44px;line-height:43px;border-radius:22px;font-size:14px;color:#006cbe;border:1px solid #006cbe;cursor:pointer;text-decoration:none}.link-btn__text:hover{color:#fff;background:#006cbe}
.alert-footer {
margin: 0 auto;
height: 90px;
width: 130px;
padding-top: 30px;
}
.alert-footer-icon {
float: left;
margin-top: 10px;
margin-right: 6px;
}
.alert-footer-text {
float: left;
border-left: 2px solid #EEE;
padding: 3px 0 0 5px;
height: 60px;
color: #0B85CC;
font-size: 12px;
text-align: left;
}
.alert-footer-text p {
color: #7A7A7A;
font-size: 22px;
line-height: 18px;
margin-top: 0px;
}
</style>
</head>
<body>
<div class="ext-link__wrapper">
<img src="https://www.521cd.cn/logo.png" width="200" style="margin-bottom: 30px;">
<div class="title">您即将从彩豆博客网跳转到外部网站</div>
<div class="sub-title">跳转网站安全性未知，是否继续</div>
<div class="link-bd">
<div class="link-bd__icon"><svg t="1585116627498" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="2855" width="32" height="32">
<path
d="M580.906667 682.496a8.96 8.96 0 0 0-12.501334 0l-129.109333 129.152c-59.818667 59.818667-160.682667 66.133333-226.688 0-66.133333-66.133333-59.733333-166.912 0-226.688l129.109333-129.152a8.917333 8.917333 0 0 0 0-12.544L297.514667 399.061333a8.917333 8.917333 0 0 0-12.544 0l-129.152 129.066667a240.256 240.256 0 0 0 0 340.053333 240.213333 240.213333 0 0 0 340.053333 0l129.066667-129.109333a8.917333 8.917333 0 0 0 0-12.586667l-43.989334-43.989333h-0.042666zM868.224 155.733333a240.554667 240.554667 0 0 1 0 340.138667l-129.109333 129.152a8.917333 8.917333 0 0 1-12.544 0l-44.202667-44.202667a8.96 8.96 0 0 1 0-12.629333l129.109333-129.066667c59.818667-59.818667 66.133333-160.597333 0-226.730666-66.005333-66.133333-166.869333-59.818667-226.688 0l-129.066666 129.194666a8.96 8.96 0 0 1-12.544 0L399.061333 297.514667a8.96 8.96 0 0 1 0-12.544l129.237334-129.152a240.213333 240.213333 0 0 1 339.925333 0v-0.042667z m-247.210667 201.045334l43.946667 43.989333a8.917333 8.917333 0 0 1 0 12.544l-251.562667 251.562667a8.917333 8.917333 0 0 1-12.544 0l-44.032-43.946667a8.917333 8.917333 0 0 1 0-12.544l251.690667-251.605333a8.96 8.96 0 0 1 12.544 0h-0.042667z"
fill="#006CBE" fill-opacity=".87" p-id="2856"></path>
</svg></div>
<div class="link-bd__text"><?php echo $url; ?></div>
</div>
<div class="link-btn">
<a href="javascript:void(0);" onclick="javascript:window.location.href='<?php echo $url; ?>'" class="link-btn__text">继续前往</a>
<a href="/" class="link-btn__text" style="margin-left:100px;">回到主页</a>
</div>
<div class="alert-footer">
<svg width="46px" height="42px" class="alert-footer-icon">
<circle fill-rule="evenodd" clip-rule="evenodd" fill="#7B7B7B" stroke="#DEDFE0" stroke-width="2" stroke-miterlimit="10" cx="21.917" cy="21.25" r="17"/>
<path fill="#FFF" d="M22.907,27.83h-1.98l0.3-2.92c-0.37-0.22-0.61-0.63-0.61-1.1c0-0.71,0.58-1.29,1.3-1.29s1.3,0.58,1.3,1.29 c0,0.47-0.24,0.88-0.61,1.1L22.907,27.83z M18.327,17.51c0-1.98,1.61-3.59,3.59-3.59s3.59,1.61,3.59,3.59v2.59h-7.18V17.51z M27.687,20.1v-2.59c0-3.18-2.59-5.76-5.77-5.76s-5.76,2.58-5.76,5.76v2.59h-1.24v10.65h14V20.1H27.687z"/>
<circle fill-rule="evenodd" clip-rule="evenodd" fill="#FEFEFE" cx="35.417" cy="10.75" r="6.5"/>
<polygon fill="#7B7B7B" stroke="#7B7B7B" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="35.417,12.16 32.797,9.03 31.917,10.07 35.417,14.25 42.917,5.29 42.037,4.25 "/>
</svg>
<div class="alert-footer-text"><p>secure</p>安全加密 </div>
</div>
</div>
</body>
</html>样式六：
<?php
/*
* @Author : Qinver
* @Url : zibll.com
* @Date : 2020-09-29 13:18:36
* @LastEditTime: 2023-11-09 13:45:10
* @彩豆博客 : www.521cd.cn
* @Project : Zibll子比主题
* @Description : 一款极其优雅的Wordpress主题
* @Read me : 感谢您使用子比主题，主题源码有详细的注释，支持二次开发。
* @Remind : 使用盗版主题会存在各种未知风险。支持正版，从我做起！
*/
if (
strlen($_SERVER['REQUEST_URI']) > 384 ||
strpos($_SERVER['REQUEST_URI'], "eval(") ||
strpos($_SERVER['REQUEST_URI'], "base64")
) {
@header("HTTP/1.1 414 Request-URI Too Long");
@header("Status: 414 Request-URI Too Long");
@header("Connection: Close");
@exit;
}
//通过QUERY_STRING取得完整的传入数据，然后取得url=之后的所有值，兼容性更好
@session_start();
$t_url = !empty($_SESSION['GOLINK']) ? $_SESSION['GOLINK'] : preg_replace('/^url=(.*)$/i', 'k_e_k_c_c_n', $_SERVER["QUERY_STRING"]);
//数据处理
if (!empty($t_url)) {
//判断取值是否加密
if ($t_url == base64_encode(base64_decode($t_url))) {
$t_url = base64_decode($t_url);
}
//防止xss
$t_url = htmlspecialchars($t_url);
//对取值进行网址校验和判断
preg_match('/^(http|https|thunder|qqdl|ed2k|Flashget|qbrowser):\/\//i', $t_url, $matches);
$wiiui_title = get_bloginfo('name');
$title = $wiiui_title . ' - 安全中心';
if ($matches) {
$url = $t_url;
// $title = '页面加载中,请稍候...';
} else {
preg_match('/\./i', $t_url, $matche);
if ($matche) {
$url = 'http://' . $t_url;
// $title = '页面加载中,请稍候...';
} else {
$url = 'http://' . $_SERVER['HTTP_HOST'];
$title = '参数错误，正在返回首页...';
}
}
} else {
$title = '参数缺失，正在返回首页...';
$url = 'http://' . $_SERVER['HTTP_HOST'];
}
$url = str_replace('&', '&', $url);
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<?php echo "<link rel='apple-touch-icon-precomposed icon' href='" . _pz('iconpng') . "' type='image/x-icon'/>"; ?>
<noscript>
<meta http-equiv="refresh" content="1;url='<?php echo $url; ?>';">
</noscript>
<script>
function link_jump() {
//禁止其他网站使用我们的跳转页面
var MyHOST = new RegExp("<?php echo $_SERVER['HTTP_HOST']; ?>");
if (!MyHOST.test(document.referrer)) {
location.href = "//" + MyHOST;
}
location.href = "<?php echo $url; ?>";
}
//延时10S跳转，可自行修改延时时间
setTimeout(link_jump, 10000);
//延时50S关闭跳转页面，用于文件下载后不会关闭跳转页的问题
setTimeout(function() {
window.opener = null;
window.close();
}, 50000);
</script>
<link rel="stylesheet" id="_fontawesome-css" href="//cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" media="all">
<title>
<?php echo $title; ?>
</title>
<style>
body,html{padding:0;margin:0}
body{background:#f5f6f7;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}
a{cursor:default;text-decoration:none;word-wrap:break-word;word-break:break-all}
.wiiuii-go-main{display:flex;width:100%;height:100%;justify-content:center;align-items:center}
.wiiuii-go-container{position: relative;max-width:28em;height:auto;display:inline-block;background:#fff;margin:10px;padding:1.5em;border-radius:5px;box-shadow:0 0 10px rgba(116,116,116,.1)}
.wiiuii-go-content a{color:#036af4}
.wiiuii-go-content a:hover{color:#e91e63}
.wiiuii-go-logo{text-align:center;width:auto;height:65px;margin-bottom:10px}
.wiiuii-go-logo img{max-width:100%;height:100%}
.wiiuii-go-msg{cursor:default;text-align:center;padding:10px 5px;font-weight:700;color:rgba(255, 0, 0, 0.85);background:rgba(255, 0, 0, 0.1);border-radius:5px}
.wiiuii-go-button-item{text-align:right}
.wiiuii-go-button{display:inline-block;border-radius:99px;padding:10px 15px;background:rgba(116,116,116,.1);transition:all .5s}
.wiiuii-go-button a{font-weight:700;font-size:14px;color:#333}
.wiiuii-go-button:hover{color:#000;background:rgba(116,116,116,.2)}
.wiiuii-goid-item{position:absolute;top:10px;left:10px;border-radius:4px;overflow:hidden;background:#ffd07c}
.wiiuii-goid-title{padding:0 4px;background:#ffa400}
.wiiuii-goid-text{padding-right:5px}
.wiiuii-go-container hr{border: 0;height: 0.05em;background: #eee;}
</style>
</head>
<body>
<div class="wiiuii-go-main">
<div class="wiiuii-go-container">
<div class="wiiuii-goid-item">
<b class="wiiuii-goid-title">GID</b>
<span class="wiiuii-goid-text">LINK<?php echo hexdec($url); ?></span>
</div>
<div class="wiiuii-go-logo">
<?php echo zib_get_adaptive_theme_img(_pz('logo_src'), _pz('logo_src_dark')); ?>
</div>
<div class="wiiuii-go-content">
<div class="wiiuii-go-msg">
<span><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> 您即将离开<?php echo $wiiui_title; ?>，请注意您的账号和财产安全。</span>
</div>
<p>访问链接：<a onclick="location.replace('<?php echo $url; ?>')" title="<?php echo $url; ?>"><?php echo $url; ?></a></p>
</div>
<hr>
<div class="wiiuii-go-button-item">
<div class="wiiuii-go-button">
<a onclick="location.replace('//<?php echo $_SERVER['HTTP_HOST']; ?>')">返回首页</a>
</div>
<div class="wiiuii-go-button">
<a onclick="location.replace('<?php echo $url; ?>')">继续访问</a>
</div>
</div>
</div>
</div>
</body>
</html>样式七：
<?php
/*
* @Url : zibll.com
* @Date : 2020-09-29 13:18:36
* @LastEditTime: 2021-04-27 17:54:39
* @彩豆博客 : www.521cd.cn
* @Project : Zibll子比主题
* @Description : 一款极其优雅的Wordpress主题
* @Read me : 感谢您使用子比主题，主题源码有详细的注释，支持二次开发。欢迎各位朋友与我相互交流。
* @Remind : 使用盗版主题会存在各种未知风险。支持正版，从我做起！
*/
if (
strlen($_SERVER['REQUEST_URI']) > 384 ||
strpos($_SERVER['REQUEST_URI'], "eval(") ||
strpos($_SERVER['REQUEST_URI'], "base64")
) {
@header("HTTP/1.1 414 Request-URI Too Long");
@header("Status: 414 Request-URI Too Long");
@header("Connection: Close");
@exit;
}
//通过QUERY_STRING取得完整的传入数据，然后取得url=之后的所有值，兼容性更好
@session_start();
$t_url = !empty($_SESSION['GOLINK']) ? $_SESSION['GOLINK'] : preg_replace('/^url=(.*)$/i', '$1', $_SERVER["QUERY_STRING"]);
//数据处理
if (!empty($t_url)) {
//判断取值是否加密
if ($t_url == base64_encode(base64_decode($t_url))) {
$t_url = base64_decode($t_url);
}
//防止xss
$t_url = htmlspecialchars($t_url);
//对取值进行网址校验和判断
preg_match('/^(http|https|thunder|qqdl|ed2k|Flashget|qbrowser):\/\//i', $t_url, $matches);
if ($matches) {
$url = $t_url;
$title = '页面加载中,请稍候...';
} else {
preg_match('/\./i', $t_url, $matche);
if ($matche) {
$url = 'http://' . $t_url;
$title = '页面加载中,请稍候...';
} else {
$url = 'http://' . $_SERVER['HTTP_HOST'];
$title = '参数错误，正在返回首页...';
}
}
} else {
$title = '参数缺失，正在返回首页...';
$url = 'http://' . $_SERVER['HTTP_HOST'];
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="robots" content="noindex, nofollow" />
<title><?php echo $title; ?></title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
<link rel="shortcut icon" type="image/ico" href="/favicon.ico">
<script>
function link_jump()
{
//禁止其他网站使用我们的跳转页面
var MyHOST = new RegExp("<?php echo $_SERVER['HTTP_HOST']; ?>");
if (!MyHOST.test(document.referrer)) {
location.href="https://" + MyHOST;
}
location.href="<?php echo $url; ?>";
}
//延时1S跳转，可自行修改延时时间
//setTimeout(link_jump, 1500);
//延时50S关闭跳转页面，用于文件下载后不会关闭跳转页的问题
setTimeout(function(){window.opener=null;window.close();}, 50000);
</script>
<style>
*,:after,:before{box-sizing:border-box}body.reader-black-font,body.reader-black-font .history-mode .view-area,body.reader-black-font .history-mode .view-area pre,body.reader-black-font .main .kalamu-area,body.reader-black-font .main .markdown .text,body.reader-black-font input,body.reader-black-font select,body.reader-black-font textarea{font-family:-apple-system,SF UI Text,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif}body{background:url(https://www.aiik.cn/api/img/go_bg.png);}.ext-link__wrapper{position:absolute;width:620px;padding:40px 0;border-radius:20px;text-align:center;top:118px;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);background-color:rgba(255, 255, 255, 0.5)!important;box-shadow:0 0 20px 0 #FFD1D8;overflow:hidden;background-image: url(https://www.aiik.cn/api/img/bili1.png),url(https://www.aiik.cn/api/img/bili2.png);background-position: 0 100%,100% 100%;background-repeat: no-repeat,no-repeat;background-size: 20%;}.title{font-size:22px;color:#2f2f2f;}.sub-title{font-size:16px;color:#888;margin-top:8px}.link-bd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;width:460px;margin:12px auto 0;padding:10px;border-radius:50px;background:#ffebfb;border:1px solid #f5dcdc;zoom:1}.link-bd:after,.link-bd:before{content:" ";display:table}.link-bd .link-bd__icon{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:flex;align-items:center;width:40px;justify-content:center;height:40px;line-height:40px;font-size:20px;text-align:center;border-radius:2px}.link-btn{text-align:center;font-size:0;margin-top:24px}.link-bd .link-bd__text{font-size:14px;color:#ff74b2;margin-left:10px;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap}.link-btn__text{display:inline-block;width:144px;height:44px;line-height:43px;border-radius:22px;font-size:14px;color:#ff74b2;border:1px solid #ff74b2;cursor:pointer;text-decoration:none}.link-btn__text:hover{color:#fff;background:#ff74b2}
.alert-footer {
margin: 0 auto;
height: 90px;
padding:30px 60px;
display:inline-block;
}
.alert-footer-icon {
float: left;
padding:10px 10px;
text-align:right;
}
.alert-footer-text {
float: right;
border-left: 2px solid #EEE;
padding: 3px 0 0 5px;
height: 60px;
color: #0B85CC;
font-size: 12px;
text-align: left;
}
.alert-footer-text p {
color: #7A7A7A;
font-size: 22px;
line-height: 18px;
margin-top: 0px;
}
.ext-link__wrapper>img{
width:20%;
}
@media screen and (max-width: 768px){
.link-bd,.ext-link__wrapper{
width:90%;
}
.link-btn__text{
width:40%;
}
}
</style>
</head>
<body>
<div class="ext-link__wrapper">
<?php echo zib_get_adaptive_theme_img(_pz('logo_src'), _pz('logo_src_dark')); ?><!--可修改成自己的LOGO-->
<div class="title">即将跳转到外部网站</div>
<div class="sub-title">跳转网站安全性未知，是否继续</div>
<div class="link-bd speedlist">
<div class="link-bd__icon"><svg t="1698155189995" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13737" width="32" height="32"><path d="M398.45868 673.486553m-350.513448 0a350.513447 350.513447 0 1 0 701.026895 0 350.513447 350.513447 0 1 0-701.026895 0Z" fill="#FFD9D9" p-id="13738"></path><path d="M875.908068 100.146699m-100.146699 0a100.146699 100.146699 0 1 0 200.293399 0 100.146699 100.146699 0 1 0-200.293399 0Z" fill="#FFD9D9" p-id="13739"></path><path d="M875.908068 203.047433h-726.063569a12.518337 12.518337 0 0 1-12.518338-12.518338V80.86846a12.518337 12.518337 0 0 1 12.518338-12.518338h726.063569a12.518337 12.518337 0 0 1 12.518338 12.518338v109.660635a12.518337 12.518337 0 0 1-12.518338 12.518338z m-714.045965-25.036675h701.026895V93.386797h-701.026895zM398.45868 662.470416a75.110024 75.110024 0 0 1-51.57555-23.033741 61.59022 61.59022 0 0 1-9.764304-85.375061l108.408802-108.408802a12.518337 12.518337 0 0 1 17.776039 0 12.017604 12.017604 0 0 1 0 17.525672l-108.659168 108.659169c-10.76577 10.76577-6.259169 33.799511 10.01467 50.073349s39.057213 20.78044 50.073349 10.01467L544.672861 500.733496c10.76577-10.76577 6.259169-33.549144-10.01467-50.073349a12.518337 12.518337 0 0 1 17.776039-17.776039 61.59022 61.59022 0 0 1 9.764303 85.375061l-130.691443 130.941809a46.818582 46.818582 0 0 1-33.04841 13.269438z" fill="#2D2F33" p-id="13740"></path><path d="M507.368215 490.718826a12.267971 12.267971 0 0 1-8.762836-3.755501 61.339853 61.339853 0 0 1-10.01467-85.124694l130.941809-130.941809a61.339853 61.339853 0 0 1 85.124695 10.014669 61.59022 61.59022 0 0 1 10.01467 85.375062L606.012714 475.696822a12.518337 12.518337 0 0 1-17.776039 0 12.518337 12.518337 0 0 1 0-17.525673l108.659169-108.659169a25.036675 25.036675 0 0 0 5.508068-21.030806 54.830318 54.830318 0 0 0-15.272372-29.042543c-16.273839-16.023472-39.057213-20.530073-50.073349-9.764303l-130.691443 130.691442c-10.76577 11.016137-6.259169 33.799511 10.01467 50.07335a12.518337 12.518337 0 0 1 0 17.525672 12.768704 12.768704 0 0 1-9.013203 2.754034zM875.908068 853.500244h-726.063569a12.518337 12.518337 0 0 1-12.518338-12.518337v-109.660636a12.518337 12.518337 0 0 1 12.518338-12.518337h726.063569a12.518337 12.518337 0 0 1 12.518338 12.518337v109.660636a12.518337 12.518337 0 0 1-12.518338 12.518337z m-714.045965-25.036674h701.026895v-84.623961h-701.026895z" fill="#2D2F33" p-id="13741"></path></svg></div>
<div class="link-bd__text"><?php echo $url; ?></div>
</div>
<div class="link-btn">
<a href="javascript:void(0);" onclick="javascript:window.location.href='<?php echo $url; ?>'" class="link-btn__text">继续前往</a>
<a onclick="location.replace('//<?php echo $_SERVER['HTTP_HOST']; ?>')" class="link-btn__text" style="margin-left:10px;">回到主页</a>
</div>
</div>
</body>
</html>52.首页广告图片文字代码 – 网站通用广告位代码
教程简介：
变现好东西，可以做一下广告招商，默认双端显示，可自行更改仅PC端显示或者仅移动端显示，子比适应，扒过来的，非常适合做广告位的站长，需要的可以试试
相关图片：
我按照子比主题的教程来，直接将代码放到：后台-外观-小工具-自定义HTML即可
<style>
@media screen and (max-width: 1000px) {
.pc-wobbt {
display: none;
}
}
/* pc-wobbt 仅PC端显示 根据需求改放图片盒子代码
<div class="wobbt-img pc-wobbt"> */
@media screen and (min-width: 1000px) { .m-wobbt{display:none; }}
/* m-wobbt 仅移动端显示 根据需求该放图片盒子代码
<div class="wobbt-img m-wobbt"> */
.zib-widget{
padding: 10px;}
/*设置zibll主题内容整体间距*/
.wobbt{
width: 100%;}
.wobbt::after{
content: '';
display: block;
height: 0;
visibility:hidden;
clear: both;
}
/*解决float的浮动问题，方便，因为直接在父级div的css这里添加如下样式*/
.wobbt-left{
width: 49.5%;
float: left; /*盒子左对齐*/
margin-right: 1%;
}
/*大盒子里面左边盒子*/
.wobbt-right{
width: 49.5%;
float: left; /*盒子右对齐*/
}
/*大盒子里面右边盒子*/
.wobbt-img{
width: 100%;
height: auto;
max-height: 80px;
min-height: 45px;
margin-bottom: 8px; /*图片盒子上下间隔*/
overflow: hidden; /*设置图片放大不超过图片盒子*/
}
/*放图片专用盒子*/
.wobbt-img img{
width: 100%;
height: auto;
max-height: 80px;
min-height: 45px;
border-radius: 6px; /*圆角角度*/
transition: all .2s ease .1s; /*光标放到图片上的放大时间*/
}
/*对放图片盒子配置样式*/
.wobbt-img img:hover{
transform: scale(1.03);
}
.wobbt-img-dapeng img:hover{
transform: scale(1.03);
}
/*设置光标放到图片放大的倍数*/
td{
width: 20%;
}
/*单元格宽度*/
</style>
<!--图片广告-->
<div class="wobbt">
<div class="wobbt-img">
<a href="https://网站地址
" target="_blank" rel="noopener"><img src="https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01plS89E1QbIiEPhK6b_!!2210123621994.png" alt="横幅广告图1" height="100px"></a>
</div>
<div class="wobbt-left">
<div class="wobbt-img">
<a href="https://网站地址" target="_blank" rel="noopener"><img src="https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01plS89E1QbIiEPhK6b_!!2210123621994.png" alt="左边广告图1" height="100px"></a>
</div>
<div class="wobbt-img">
<a href="https://网站地址" target="_blank" rel="noopener"><img src="https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01plS89E1QbIiEPhK6b_!!2210123621994.png" alt="左边广告图2" height="100px"></a>
</div>
</div>
<!--左右小图-->
<div class="wobbt-right">
<div class="wobbt-img">
<a href="https://网站地址" target="_blank" rel="noopener"><img src="https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01plS89E1QbIiEPhK6b_!!2210123621994.png" alt="右边广告图1" height="100px"></a>
</div>
<div class="wobbt-img">
<a href="https://网站地址" target="_blank" rel="noopener"><img src="https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01plS89E1QbIiEPhK6b_!!2210123621994.png" alt="右边广告图2" height="100px"></a>
</div>
</div>
<!--文字广告-->
<table style="text-align:center;width:100%;margin-bottom: 10px;" cellspacing="0" cellpadding="0" bordercolor="#99999" border="1" bgcolor="#F8F8FF" align="center"><tbody><tr><td>
<a href="https://网站地址" target="_blank" rel="noopener"><span style="font-family:'Microsoft YaHei';font-size:14px;color:#0000FF;">文字广告位招租中</span></a></td>
<td>
<a href="https://网站地址" target="_blank" rel="noopener"><span style="font-family:'Microsoft YaHei';font-size:14px;color:#FF0000;">文字广告位招租中</span></a></td>
<td>
<a href="https://网站地址" target="_blank" rel="noopener"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#FF0000;">文字广告位招租中</span></a></td>
<td>
<a href="https://网站地址" target="_blank" rel="noopener"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#FF0000;">文字广告位招租中</span> </a> </td>
<td>
<a href="https://网站地址" target="_blank" rel="noopener"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#0000FF;">文字广告位招租中</span></a></td>
</tr>
<!--第一列-->
<tr>
<td>
<a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-family:'Microsoft YaHei';font-size:14px;color:#FF0000;">文字广告位招租中</span></a></td>
<td>
<a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-family:'Microsoft YaHei';font-size:14px;color:#006400;">文字广告位招租中</span></a></td>
<td>
<a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#FF0000;">文字广告位招租中</span></a></td>
<td>
<a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#970de1;">文字广告位招租中
</span> </a></td>
<td>
<a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#FF0000;">文字广告位招租中</span></a></td>
</tr>
<!--第二列-->
<tr>
<td>
<a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-family:'Microsoft YaHei';font-size:14px;color:#FF0000;">文字广告位招租中</span></a></td>
<td>
<a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-family:'Microsoft YaHei';font-size:14px;color:#006400;">文字广告位招租中</span></a></td>
<td>
<a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#FF0000;">文字广告位招租中</span></a></td>
<td>
<a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#000000;">文字广告位招租中</span> </a></td>
<td>
<a rel="external nofollow noopener" href="https://网站地址" target="_blank"><span style="font-size:14px;font-family:'Microsoft YaHei';color:#FF0000;">文字广告位招租中</span></a></td>
</tr>
</tbody></table>
</div>动态的问候语和时间显示能够大大增强用户体验。通过使用 API 接口，我们可以方便地根据时间段提示相关的问候语和温馨提示。本文将介绍如何在 WordPress 中使用自定义 HTML 代码实现这个功能，并提供详细的代码和使用方法。
以下是实现动态问候语和时间显示的代码。该代码包含一个时钟和一个问候语提示区域，根据当前时间段显示相应的信息。
今天给大家带来一个侧边栏引导小卡片，这个样式是在其它站点看到的，感觉还不错，就简单扒了一下，要是你喜欢就拿走吧，我将他的代码改成了小工具，方便管理。
跟着我的教程走，别走偏了，先看我怎么说的，再去操作，这个小工具跟我以前发的教程一模一样
首先我们第一步：/wp-content/themes/zibll/functions.php文件加如下面的代码，我会详细说这个
$widgets_files = array(
'tengfei_steer.php', /*小工具文件名*/
);
foreach ($widgets_files as $file) {
require get_template_directory() . '/tengfei/widgets/' . $file;
}将上面的代码放到/wp-content/themes/zibll/functions.php文件或者func.php文件，都是一样的，看上面的代码，别看懵逼了，我们要明白这个：tengfei_steer.php这个代码，这个代码就是代表一个小工具的名字，相当于就是用上面的代码调用的，就是如果想加第二个小工具，那就是在tengfei_steer.php这个代码下面加一行其他小工具的别名。
WordPress子比侧边栏广告卡片小工具
暂无评论内容