WordPress子比主题美化教程合集-藏宝楼源码网

前言简介

本页的主题美化内容是博主在建站过程中逐一测试、确保无误的记录合集。使用前请先参考本站，若觉得实用，欢迎使用。我会不定期更新，如发现长时间未更新或无法使用，请留言反馈。

注意说明

每个人的审美观念不同，因此在进行美化时，请先参考本站或当前使用的美化方案。主题美化和小工具可能会导致网站加载变慢、CSS样式冲突等问题，因此在进行美化前，请务必备份相关内容。

代码大全

#1 网站LOGO扫光

CSS代码：主题设置->自定义代码->自定义CSS样式

/*logo扫光*/
.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;}}

#2 文章标签美化

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}

#3 头像呼吸光环+鼠标悬停旋转放大

效果展示

CSS代码：主题设置->自定义代码->自定义CSS样式

/*头像呼吸光环和鼠标悬停旋转放大*/
.avatar{border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 1.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;}}

#4 更换整站默认字体

主题设置->自定义代码->自定义CSS样式

/*自定义网站字体开始*/
@font-face{font-family: "lovely";src: url("字体链接") format("woff2");font-display: swap;}
*{font-family: "lovely"}

#5 网站底部添加蓝色波浪美化

效果展示

代码部署：/wp-content/themes/zibll/footer.php

footer.php

CSS

<!--底部波浪-->
<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>

.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;}

#6 网站鼠标修改

代码部署：可自行去网上下载个喜欢的鼠标样式cur格式，自行将鼠标样式上传至某个目录，修改下面代码内的链接/路径既可。

主题设置->自定义代码->自定义CSS样式

/*鼠标样式修改*/
body {
    cursor: url(无链接时鼠标样式文件路径), default;
}
a:hover,
.cursor:hover,
button:hover,
svg:hover {
    cursor: url(有链接时鼠标样式文件路径), pointer;
}

#7 彩色文字跳动特效

主题设置->自定义代码->自定义HTML代码，该特效采用的是HTML+CSS+JS，可放位置很多大胆尝试。

<div id="chakhsu">藏宝楼 kuloudao.com 是一个分享优质资源的网站，主要分享优质源码，技术教程，软件工具，自学教程，模板插件等等，为你提供建站或其他方面的便利。<span style="color: rgb(254, 75, 131);">B</span><span style="color: rgb(82, 246, 103);">)</span><span style="color: rgb(110, 64, 170);">[</span></div>
<script>
    var chakhsu = function (r) {
        function t() {
            return b[Math.floor(Math.random() * b.length)]
        }
 
        function e() {
            return String.fromCharCode(94 * Math.random() + 33)
        }
 
        function n(r) {
            for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
                var l = document.createElement("span");
                l.textContent = e(), l.style.color = t(), n.appendChild(l)
            }
            return n
        }
 
        function i() {
            var t = o[c.skillI];
            c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d)
        }
        /*以下内容自定义修改*/
        var l = "藏宝楼 kuloudao.com ",
            o = ["是一个分享优质资源的网站，主要分享优质源码，技术教程，软件工具，自学教程，模板插件等等，为你提供建站或其他方面的便利。", ].map(function (r) {
                return r + ""
            }), a = 2, g = 1, s = 5, d = 75,
            b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"],
            c = {text: "", prefixP: -s, skillI: 0, skillP: 0, direction: "forward", delay: a, step: g};
        i()
    };
    chakhsu(document.getElementById('chakhsu'));
                  </script>
<script>$(document).ready(function(){$('.chaffle').chaffle()});</script>

#8 滚动播报小工具

主题设置->自定义代码->自定义底部HTML代码

样式1

样式2

<section id="custom_html-2" class="widget_text widget widget_custom_html mar16-b">
  <meta charset="utf-8">
  <!--<p  align="center"  class="widget-title l1 box-header">欢迎访问藏宝楼</p>-->
  <div class="textwidget custom-html-widget">
  <aside id="php_text-8" 
  class="widget php_text wow fadeInUp" data-wow-delay="0.3s">
  <div class="textwidget widget-text">
    <style type="text/css">
      #container-box-1{color:#526372;text-transform:uppercase;width:100%;font-size:16px;line-height:50px;text-align:center;padding: 10px;background: linear-gradient(45deg, #C7F5FE 10%, #C7F5FE 40%, #FCC8F8 40%, #FCC8F8 60%, #EAB4F8 60%, #EAB4F8 65%, #F3F798 65%, #F3F798 90%);border-radius: var(--main-radius);}
#flip-box-1{overflow:hidden;height:50px;border-radius:99px}
#flip-box-1 div{height:50px}
#flip-box-1>div>div{color:#fff;display:inline-block;text-align:center;height:50px;width:100%}
#flip-box-1 div:first-child{animation:show 8s linear infinite}
.flip-box-1-1{background-image:linear-gradient(to right,#fa709a 0,#fee140 100%)}
.flip-box-1-2{background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);}
.flip-box-1-3{background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);}
.flip-box-1-4{background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);}
.flip-box-1-5{background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);}
.flip-box-1-6{background-image: linear-gradient(to top, #9795f0 0%, #fbc8d4 100%);}
@keyframes show{0%{margin-top:-300px}
5%{margin-top:-250px}
16.666%{margin-top:-250px}
21.666%{margin-top:-200px}
33.332%{margin-top:-200px}
38.332%{margin-top:-150px}
49.998%{margin-top:-150px}
54.998%{margin-top:-100px}
66.664%{margin-top:-100px}
71.664%{margin-top:-50px}
83.33%{margin-top:-50px}
88.33%{margin-top:0}
99.996%{margin-top:0}
100%{margin-top:300px}
}
    </style>
    <div id="container-box-1">
<div class="container-box-1-1"><svg class="icon" aria-hidden="true"><use xlink:href="#iconxiangwenbiaoqing"></use></svg> 坚持每天来藏宝楼逛逛，会让你 <svg class="icon" aria-hidden="true"><use xlink:href="#iconpaomeiyanbiaoqing"></use></svg></div>
<div id="flip-box-1"><div><div class="flip-box-1-1">生活也美好了！</div>
</div><div><div class="flip-box-1-2">心情也舒畅了！</div></div>
<div><div class="flip-box-1-3">走路也有劲了！</div></div><div>
  <div class="flip-box-1-4">腿也不痛了！</div></div>
  <div><div class="flip-box-1-5">腰也不酸了！</div></div>
<div><div class="flip-box-1-6">工作也轻松了！</div></div>
</div><div class="container-box-1-2"><svg class="icon" aria-hidden="true"><use xlink:href="#iconkaixinbiaoqing"></use></svg> 你好我也好，不要忘记哦! <svg class="icon" aria-hidden="true"><use xlink:href="#icondaxiaobiaoqing"></use></svg></div></div></div>
<div class="clear"></div>
</aside></div>
</section>

<section id="custom_html-2" class="widget_text widget widget_custom_html mar16-b"> 
<meta charset="utf-8"> 
<!--<p align="center" class="widget-title l1 box-header">欢迎访问藏宝楼</p>--> 
<div class="textwidget custom-html-widget">
 <aside id="php_text-8" class="widget php_text wow fadeInUp" data-wow-delay="0.3s">
 <div class="textwidget widget-text">
 <style type="text/css">
#container-box-1{color:#526372;text-transform:uppercase;width:100%;font-size:16px; line-height:50px;text-align:center}
#flip-box-1{overflow:hidden;height:50px}
#flip-box-1 div{height:50px}
#flip-box-1>div>div{color:#fff;display:inline-block;text-align:center;height:50px;width:100%}
#flip-box-1 div:first-child{animation:show 8s linear infinite}
.flip-box-1-1{background-color:#FF7E40}
.flip-box-1-2{background-color:#C166FF}
.flip-box-1-3{background-color:#737373}
.flip-box-1-4{background-color:#4ec7f3}
 .flip-box-1-5{background-color:#42c58a}
.flip-box-1-6{background-color:#F1617D}
@keyframes show{0%{margin-top:-300px}5%{margin-top:-250px}16.666%{margin-top:-250px}21.666%{margin-top:-200px}33.332%{margin-top:-200px}38.332%{margin-top:-150px}49.998%{margin-top:-150px}54.998%{margin-top:-100px}66.664%{margin-top:-100px}71.664%{margin-top:-50px}83.33%{margin-top:-50px}88.33%{margin-top:0px}99.996%{margin-top:0px}100%{margin-top:300px}}
</style>
<div id="container-box-1">
 <div class="container-box-1-1">坚持每天来藏宝楼逛逛，会让你</div> 
<div id="flip-box-1"><div><div class="flip-box-1-1">生活也美好了！</div> 
</div><div><div class="flip-box-1-2">心情也舒畅了！</div>
</div> <div><div class="flip-box-1-3">走路也有劲了！</div></div><div> 
<div class="flip-box-1-4">腿也不痛了！</div>
</div> <div><div class="flip-box-1-5">腰也不酸了！</div></div> 
<div><div class="flip-box-1-6">工作也轻松了！</div></div> </div>
<div class="container-box-1-2">你好我也好，不要忘记哦!</div></div></div> 
<div class="clear"></div> </aside></div> 
</section>

#9 文章自动添加关键词链接

代码部署：/wp-content/themes/zibll/functions.php

// 文章添加关键词链接
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 );

#10 太空人表盘源码

源码说明

最近很火的华为太空人表盘源码，基于SVG+JavaScript实现网红华为太空人表盘GT2，今日分享华为太空人表盘HTML网页源码，基于SVG+JavaScript实现网红华为太空人表盘GT2。

效果演示

太空人表盘源码

下载

#11 外链重定向go页面美化

代码部署：/wp-content/themes/zibll/go.php文件内修改代码内的大约第108行的logo地址。

效果展示

旋转黑洞动态样式

<?php
/*
 * @Author        : Qinver
 * @Url           : zibll.com
 * @Date          : 2021-07-10 
 * @LastEditTime: 2021-07-10 
 * @Email         : 770349780@qq.com
 * @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>
  
    </div>
 
<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)); } } ) }</style></head>
  <body>
    <css-doodle use="var(--rule)"></css-doodle>
    <script src='https://cdn.ly522.com/js/go-min.js'></script>
</body>

</html>

黑色背景动态转圈圈

<?php 
/*
 * @Author        : Qinver
 * @Url           : zibll.com
 * @Date          : 2021-07-10 13:18:36
 * @LastEditTime  : 2021-07-10  17:42:52
 * @Email         : 770349780@qq.com
 * @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=之后的所有值，兼容性更好
$t_url = 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);
    }
    //对取值进行网址校验和判断
    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 
/*
 * @Author        : Qinver
 * @Url           : zibll.com
 * @Date          : 2020-09-29 13:18:36
 * @LastEditTime  : 2020-10-08 17:42:52
 * @Email         : 770349780@qq.com
 * @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=之后的所有值，兼容性更好
$t_url = 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);
    }
    //对取值进行网址校验和判断
    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 
/*
 * @Author        : Qinver
 * @Url           : zibll.com
 * @Date          : 2020-09-29 13:18:36
 * @LastEditTime  : 2020-10-08 17:42:52
 * @Email         : 770349780@qq.com
 * @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=之后的所有值，兼容性更好
$t_url = 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);
    }
    //对取值进行网址校验和判断
    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
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:#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://huliku.com/images/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="https://huliku.com/" 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>

#12 禁用文章历史修订版本自动保存功能

在编辑文章时，WP会自动保存多个修订版本，防止意外丢失内容或便于恢复历史版本。但这也会占用大量数据库空间，增加文章ID数量。为提高性能，一些站长选择关闭此功能。

代码部署：打开网站根目录的wp-config.php文件，在$table_prefix = ‘xxxx’;这行的下面添加一下代码。

define('WP_POST_REVISIONS', false);   //禁用历史修订版本，也可以填数字，就是保存几个版本
define('AUTOSAVE_INTERVAL', 86400);   //设置自动保存时间设置为一天(相当于关闭了)

#13 首页搜索栏按钮&透明边框美化

效果展示

代码部署：/wp-content/themes/zibll/inc/functions/zib-search.php

第一处

第二处

第三处

我们进去搜：“search-form”，大概在548行的代码，如下图跟我一样将代码注释然后放入下面的代码。

$form_html = '<form method="get" class="padding-10 search-form tengfei_search_frame" action="' . esc_url(home_url('/')) . '">' . $type_html . '<div class="line-form">' . $cat_html . $input_html . '</div></form>';

继续当前文件搜下面的代码注释代码如下图然后复制我们的代码贴入

esc_attr(strip_tags($args['s']));

        $s          = esc_attr(strip_tags($args['s']));
        $input_html = '<div class="search-input-text">
                <input type="text" name="s" class="line-form-input" tabindex="1" value="' . $s . '"><i class="line-form-line"></i>
                <div class="scale-placeholder' . ($s ? ' is-focus' : '') . '" default="' . $args['placeholder'] . '">' . $args['placeholder'] . '</div>
                <div class="abs-right muted-color">
                
                <button class="btn tengfei-search-button-red"><a href="/newposts" style="color: rgb(255, 255, 255);">发布作品</a></button>
                
                <button type="submit" name="" class="btn tengfei-search-button-blue">站内搜索</button>
                </div>
            </div>';

CSS代码：主题设置->自定义代码->自定义CSS样式

/*自定义搜索框*/
.tengfei_search_frame{border:5px solid rgb(255 255 255 / 30%);border-radius:45px;padding:0;font-size:15px}.tengfei-search-button-red{background:#ff1856;right:106%;position:absolute}.tengfei-search-button-blue{background:#08f;border:1px solid #3af;color:#fff;border-radius:18px;border-bottom-left-radius:0;border-top-left-radius:0;margin-right:-17px}@media(max-width:768px){.tengfei-search-button-blue{margin-right:-15px}}

#13 动态背景符号元素效果

HTML

CCS

主题设置->自定义代码->自定义底部HTML代码

<!--动态背景符号元素-->
<link rel="stylesheet" href="/wp-content/themes/zibll/css/tengfei/yuansufuhao.css" />
<script>$('head').before('<div class="container1"><div class="inner-container1"><div class="shape"></div></div><div class="inner-container1"><div class="shape"></div></div></div>');</script>
<script>$(document).ready(function(){var html='';for(var i=1;i<=50;i++){html+='<div class="shape-container--'+i+' shape-animation"><div class="random-shape"></div></div>'}document.querySelector('.shape').innerHTML+=html});</script>

下载附件放在：/wp-content/themes/zibll/子比根目录

动态元素符合背景样式

#14 添加文章评论常用语功能

主题设置->自定义代码->自定义CSS样式

 /*常用语样式*/
.wiiuii-words-li{margin:5px auto;padding:5px;background:var(--body-bg-color);border-radius:var(--main-radius)}
.wiiuii-words-li:hover{background:var(--float-btn-bg)}

主题设置->自定义代码->自定义javascript代码

 // 评论常用语
$('.wiiuii-words-li').on('click', function() {
   var $wiiuii_comment = $('#comment');
    var wiiuii_com_text = $(this).find('span').text();
    var wiiuii_com_original = $wiiuii_comment.val();
    $wiiuii_comment.val(wiiuii_com_original ? wiiuii_com_original + '  ' + wiiuii_com_text : wiiuii_com_text);
    $('.wiui_words').removeClass('open');
});

第一步：在“../zibll/template/comments.php”子比主题的 template 目录下“comments.php”文件，搜索 smilie 在上方位置添加如下代码

// 常用语函数
if (_pz('comment_words', true)) {
echo zib_get_input_expand_but('wiui_words');
}

第二步：在“../zibll/inc/functions/functions.php”子比主题的 template 目录下“functions.php”文件，搜索到第一个“ smilie ”下方位置添加如下代码：

    // 常用语函数
    if ('wiui_words' == $type) {
        $but = '<a class="but btn-input-expand mr6" href="javascript:;"><i class="fa fa-fw fa-comment-o"></i><span class="hide-sm">常用语</span></a>';
        // 下面是自定义常用语，自己自定义喜欢常用语，最好不超过10条
        $wiiuii_words_args = array('谢谢博主分享！', '博主NB，666', '感谢楼主分享！', '感谢大佬分享！', '教程很好用，谢谢！');
        foreach ($wiiuii_words_args as $wiiuii_word) {
            $wiui_word_index++;
            $wiui_words .= '<li class="wiiuii-words-li"><b>' . $wiui_word_index . '、</b><span>' .$wiiuii_word . '</span>' . '</li>';
        }
        $dropdown = '<div class="dropdown-code">';
        $dropdown .= '<span>请选择评论常用语：</span>';
        $dropdown .= '<ul>';
        $dropdown .= $wiui_words;
        $dropdown .= '</ul>';
        $dropdown .= '</div>';
    }

#15 评论区设置私密评论

functions.php

comments.php

代码部署：/wp-content/themes/zibll/functions.php 置入以下代码。

function zyx_scripts(){
  if (!is_admin()) {
        $script = array(
            'smminjs' => '改为你的js链接',
        );
        foreach( $script as $k => $v ){
            wp_register_script( $k, $v, array(), '2.4.0', true);
        };

        wp_enqueue_script('smminjs');
        
        if (is_singular()) {
            wp_enqueue_script('smminjs');
        };

    }
}
add_action('wp_enqueue_scripts', 'zyx_scripts');

function zyx_private_message_hook( $comment_content , $comment){
    $comment_ID = $comment->comment_ID;
    $parent_ID = $comment->comment_parent ? $comment->comment_parent : '';
    $parent_email = get_comment_author_email($parent_ID);
    $is_private = get_comment_meta($comment_ID,'_private',true);
    $email = $comment->comment_author_email;
    $current_commenter = wp_get_current_commenter();
  $current_user = wp_get_current_user();
    $html = '<span style="color:#558E53"><i class="fa fa-lock fa-fw"></i>该评论为私密评论</span>';
  if ( $is_private ) {
      if ( !is_user_logged_in() && $current_commenter['comment_author_email'] == '' ) {
        return $comment_content = $html;
      }else
    if ($current_commenter['comment_author_email'] == '' && $current_user->user_email == $parent_email || current_user_can('delete_user') || $current_user->user_email == $email || $current_commenter['comment_author_email'] == $email || $parent_email == $current_commenter['comment_author_email'] && $current_commenter['comment_author_email'] !== ''){
      return $comment_content = '#私密# ' . $comment_content;
    }
    return $comment_content = $html;
  }
    return $comment_content;
}
add_filter('get_comment_text','zyx_private_message_hook',10,2);

function zyx_mark_private_message( $comment_id ){
    if ( $_POST['is-private'] ) {
        update_comment_meta($comment_id,'_private','true');
    }
}
add_action('comment_post', 'zyx_mark_private_message');
//将某条评论设为私密评论
add_action('wp_ajax_nopriv_mrhe_private', 'zyx_private');
add_action('wp_ajax_mrhe_private', 'zyx_private');
function zyx_private(){
  $comment_id = $_POST["p_id"];
   $action = $_POST["p_action"];
  if ( $action == 'set_private'){
     update_comment_meta($comment_id, '_private', 'true');
    }
    if ($action == 'del_private'){
        delete_comment_meta($comment_id, '_private','true');
    }
    echo 'ok';
   die;
}
//挂载到评论底部
function zyx_footer_info_add_private($info, $comment) {
    if ( current_user_can( 'manage_options' ) ) {
        $comment_ID = $comment->comment_ID;
        $i_private = get_comment_meta($comment_ID, '_private', true);
        $flag = ''; // 初始化 $flag 为空字符串
        if (empty($i_private)) {
            $flag .= ' - <a href="javascript:;" data-actionp="set_private" data-idp="' . get_comment_id() . '" id="sp" class="sm">(<span class="has_set_private">设为私密</span>)</a>';
            $info = $info . $flag;
        } else {
            $flag .= ' - <a href="javascript:;" data-actionp="del_private" data-idp="' . get_comment_id() . '" id="sp" class="sm">(<span class="has_set_private">删除私密</span>)</a>';
            $info = $info . $flag;
        }
    }
    return $info;
}
add_filter('comment_footer_info', 'zyx_footer_info_add_private', 99, 2);

代码部署：新建文件为xx.js然后引入functions.php 替换你的链接。

$(function() {
  $(".links-card ul.list-inline img").each(function() {
    if ("" == $(this).attr("data-src")) {
      var a = "" + $(this).parent().attr("href");
      $(this).attr("src", a)
    }
  }), $(document).on("click", ".sm", function() {
    var a = $(this);
    if (a.hasClass("private_now")) return notyf("您之前已设过私密评论", "warning"), !1;
    a.addClass("private_now");
    var t = a.data("idp"),
      e = a.data("actionp"),
      n = a.children(".has_set_private"),
      r = {
        action: "mrhe_private",
        p_id: t,
        p_action: e
      };
    return $.post("/wp-admin/admin-ajax.php", r, function(a) {
      n.html(a)
    }), !1
  })
});

代码部署：/wp-content/themes/zibll/template/comments.php 搜索 “ cancel-comment-reply-link “下插入代码

<label class="but c-blue pw-1em" data-placement="top" data-toggle="tooltip" title="你的评论仅评论双方可见。" style="margin-bottom: 0px;">
                            <input name="is-private" type="checkbox">私密</label>

#16 评论区添加个夸夸功能

效果展示

代码部署：主题设置->自定义代码->自定义头部HTML代码

<!--夸夸-->
<script src="/wp-custom/kuakua/font_2827587_zt5tfqudn5.js"></script>

附件部署：首先在网站/www/wwwroot/kuloudao.com/根目录下创建wp-custom文件内解压附件！

评论区夸夸功能

代码部署：/wp-content/themes/zibll/functions.php

//夸夸功能
function kuakua($re = ''){
    $html = '<link rel="stylesheet" type="text/css" href="/wp-custom/kuakua/kuakua.css">
    <a class="but btn-input-expand input-image mr6" id="kuakua" href="javascript:;" style="background: rgba(41, 151, 247, 0.1);">
      <svg class="icon" aria-hidden="true"><use xlink:href="#icon-kuakua"></use></svg><span class=" " style="color: #f7299d;">快捷评论</span>
    </a>
    <div class="kuakua-div" style="width: 9999px;height: 99999px;background: #000;z-index: 1031;position: fixed;top: 0;left: 0;opacity: .6;display:none"></div>
    <div class="kuakua-first-box">
            <div class="kuakua-ei">
        <span class="kuakua-close" title="关闭">
              <div>
                  <svg fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="close" class="sc-eCImPb iRFNEp"><g fill="none" fill-rule="evenodd" stroke="currentColor"><path d="M7.99 7.99L1 1l6.99 6.99L1 14.98l6.99-6.99zm0 0L15 15 7.99 7.99 14.98 1 7.99 7.99z" stroke="currentColor"></path></g></svg>
              </div>
          </span>
        <div>
          <div class="kuakua-column">
            <section class="kuakua-headerIcon"><svg class="icon kuakua-icon" aria-hidden="true">
              <use xlink:href="#icon-kuakua"></use></svg>
            </section>
            <span size="16" color="black4" class="kuakua-headerTitle">夸夸</span>
          </div>
        </div>
        <div  style="position: relative;display: block;">
          <div>
            <section class="kuakua-modal-body">
              <section class="kuakua-contentBox">
                  <span size="18" color="black4" class="kuakua-comment">还有吗！没看够！</span>
                <button type="button" class="kuakua-cancelBtn">换一换</button>
              </section>
              <button type="button" class="kuakua-confirmBtn">夸夸TA</button>
            </section>
            </div>
        </div>
      </div>
    </div>
    <script>
        $(function(){
        $(".kuakua-cancelBtn").click(function() {
          $.getJSON("/wp-custom/kuakua/api.php?encode=json",function(data){
            $(".kuakua-comment").html(data.text);
            $("#comment").text(data.text);
          });
        });
      });
      $(".kuakua-confirmBtn").click(function() {
        $("#submit").trigger("click");
        $(".kuakua-first-box").hide(150);//隐藏速度
        $(".kuakua-div").hide(150);//隐藏速度
        });
      $("#kuakua").click(function (e) {//
          /*阻止冒泡事件*/
          $(".kuakua-first-box").show(150);//显示速度
        $(".kuakua-div").show(150);//显示速度
        $.getJSON("/wp-custom/kuakua/api.php?encode=json",function(data){
          $(".kuakua-comment").html(data.text);
          $("#comment").text(data.text);
        });
        e = window.event || e;
        if (e.stopPropagation) {
          e.stopPropagation();
        } else {
            e.cancelBubble = true;
        }
      });
      $(".kuakua-close").click(function () {
        $(".kuakua-first-box").hide(150);//隐藏速度
        $(".kuakua-div").hide(150);//隐藏速度
        $("#comment").text("");
      });
        </script>';
        if($re && $re == 'return'){
            return $html;
        }elseif($re && $re == 'echo'){
            echo $html;
        }
}

代码部署：/wp-content/themes/zibll/template/comments.php 搜索 “ comt-tips-right pull-right “下插入代码

<?php kuakua('echo');?>

代码部署： /wp-content/themes/zibll/inc/functions/bbs/inc/comment.php 搜索 “ cancel-comment-reply-link “下插入代码

$btns_r .= kuakua('return');

#17 给网站自定义背景图

CSS代码：主题设置->自定义代码->自定义CSS样式

/* PC端网站背景图片 */
@media screen and (min-width: 1200px) {
    body {
        background-image: url(白天背景图连接);
        background-position-x: center;
        background-position-y: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
    }

    .dark-theme {
        background-position-x: center;
        background-position-y: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-image: url(夜间背景图连接);
        background-size: cover;
    }
}

#18 网站LOGO色彩渐变

CSS代码：主题设置->自定义代码->自定义CSS样式

/*LOGO色彩渐变*/
.navbar-logo{animation:hue 4s infinite}@keyframes hue{from{filter:hue-rotate(0deg)}to{filter:hue-rotate(-360deg)}}

#19 文章自定义前缀图标或文字

效果展示

functions.php

CSS

图标

代码部署：/wp-content/themes/zibll/functions.php

// 文章自定义前缀
CSF::createMetabox('DearLicy_titles', array(
    'title'     => '标题前缀',
    'post_type' => 'post',
    'context'   => 'advanced',
    'data_type' => 'unserialize',
    'priority'  => 'high',
));

CSF::createSection( 'DearLicy_titles', array(
    'fields' => array(
        array(
            'id'       => 'titles_moshi',
            'type'     => 'radio',
            'title'    => '模式选择',
            'desc'     => '选择图片或自定义文字',
            'inline'   => true,
            'options'  => array(
                'img'   => '图片',
                'text'  => '文字',
            ),
            'default' => 'img',  // 默认选择图片模式
        ),
        array(
            'id'      => 'text',
            'type'    => 'text',
            'title'   => '文字模式',
            'desc'    => '建议两个字',
            'dependency' => array( 'titles_moshi', '==', 'text' ),  // 依赖关系：当模式选择为文字时显示
        ),
        array(
            'id'      => 'text_bg_color',
            'type'    => 'palette',
            'title'   => '背景颜色',
            'desc'    => '部分颜色带有文字颜色，其余默认白色',
            'class'   => 'compact skin-color',
            'default' => "jb-vip2",
            'options' => CFS_Module::zib_palette(array(), array('jb')),
            'dependency' => array( 'titles_moshi', '==', 'text' ),  // 依赖关系：当模式选择为文字时显示
        ),
        array(
            'id'      => 'img',
            'type'    => 'palette',
            'title'   => '选择一个图片',
            'desc'    => '固定使用以下几款SVG图标',
            'class'   => 'compact skin-color',
            'default' => "jb-vip2",
            'options' => DearLicy_Module::DearLicy_imgtitle(),
            'dependency' => array( 'titles_moshi', '==', 'img' ),  // 依赖关系：当模式选择为图片时显示
        ),
    ),
));

class DearLicy_Module
{
    public static function DearLicy_imgtitle($palette = array())
    {
            $palette = array_merge($palette, array(
                'shice'      => array('url(https://tencent.91wann.com/2025/01/shice.svg);width: 50px;'),
                'dujia'    => array('url(https://tencent.91wann.com/2025/01/10002.svg);width: 50px;'),
                'shoufa'    => array('url(https://tencent.91wann.com/2025/01/10001.svg);width: 50px;'),
            ));
        return $palette;
    }

}

function apply_dearlicy_prefixes_to_title($title, $id = null) {
    // 只有在前端，并且非单个页面，才对标题进行更改
    if (!is_admin() && !is_single() && $id) {
        // 先获取meta box中的设置项
        $prefixes_setting = get_post_meta($id, 'titles_moshi', true);

        if($prefixes_setting == 'img') {
            $selected_img = get_post_meta($id, 'img', true);
            $img_url ='';
            switch ($selected_img) {
                case 'shice':
                    $img_url = 'https://tencent.91wann.com/2025/01/shice.svg';
                    break;
                case 'shoufa':
                    $img_url = 'https://tencent.91wann.com/2025/01//10001.svg';
                    break;
                case 'dujia':
                    $img_url = 'https://tencent.91wann.com/2025/01//10002.svg';
                    break;
            }
            
            if(!empty($img_url)) {
                $title = "<img src='$img_url' alt='$img_url' style=' height: 20px; pointer-events: none;margin-right: 3px;'/>" . $title;
            }
        } else {
            // 对保存的文字前缀进行处理
            $prefix_text = get_post_meta($id, 'text', true);
            $prefix_bg_color = get_post_meta($id, 'text_bg_color', true);
            if (!empty($prefix_text)) {
                $title = "<span class='DearLicy_prefix ". esc_attr($prefix_bg_color) ."'>" . esc_html($prefix_text) . "</span> " . $title;
            }
        }
    }
    return $title;
}
add_filter('the_title', 'apply_dearlicy_prefixes_to_title', 10, 2);

CSS代码：主题设置->自定义代码->自定义CSS样式

/*文章自定义前缀样式*/
.DearLicy_prefix{position:relative;overflow:hidden;display:inline-flex;align-items:center;border-radius:4px;padding: 4px 5px 4px 6px;margin-right:1px;height:18px;font-size:12px;top:-1px;}.DearLicy_prefix:after,.DearLicy_prefix:after{position:absolute;content:" ";display:block;left:-100%;top:-5px;width:15px;height:145%;background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));animation:sweepTitle 3s ease-in-out infinite;transform:rotate(28deg)}@keyframes sweepTitle{0%{left:-100%}100%{left:100%}}

文章前缀图标

下载

#20 给用户中心添加一个加入QQ群区块

效果展示

代码部署：/zibll/zibpay/functions/zibpay-vip.php 第127行替换

$points_exchange = '<div class="points-exchange-container" style="display: flex; flex-direction: column; gap: 10px;">' . 
    zibpay_get_vip_points_exchange_link('', '<div class="payvip-icon btn-block badg em12" style="padding: 15px 5px;">' . zib_get_svg('points-color', null, 'mr6 em12') . '积分兑换会员<i class="fa fa-chevron-circle-right abs-right"></i></div>') . 
    '<a href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=7l4Z68oFTYfsVvt6PcHVKKqrjDzyn3n2&authKey=%2FOTrodSEKPzX%2Fgu%2FmBmutE2bRMmqKSDgzJsjSsqh7OzXg475tb56yL%2FETy1x3Jfo&noverify=0&group_code=123088663" target="_blank" class="payvip-icon btn-block badg em12" style="padding: 15px 5px;">' . 
    zib_get_svg('posts', null, 'mr6 em12') . '加入QQ群聊<i class="fa fa-chevron-circle-right abs-right"></i></a>' . 
    '</div>';

#21 个人中心默认按钮修改头像显示

效果展示

代码部署：wp-content/themes/zibll/inc/functions/zib-header.php 找到第156行代码开始进行注释，如下：

$sign_but = '<li><a href="javascript:;" class="btn' . ($user_id ? '' : ' signin-loader') . '">' . zib_get_svg('user', '50 0 924 924') . '</a>
    <ul class="sub-menu">
    ' . $user_sub . '
    </ul>
</li>';

然后再注释行下面添加以下代码即可（找不到代码可以搜索 zib_get_svg 即可找到）

$sign_but = '<li style="width: 58px;"><a href="javascript:;" class="btn' . ($user_id ? '' : ' signin-loader') . '">' . zib_get_data_avatar($user_id) . '</a>
  <ul class="sub-menu">
    ' . $user_sub . '
    </ul>
</li>';

#22 外链跳转GO页面美化修改版+增加广告位

效果展示

代码部署：将下面代码放到子比主题-go.php页面覆盖。

<?php
/*
 * @Author        : Qinver
 * @Url           : cangbaolou.com
 * @Date          : 2020-09-29 13:18:36
 * @LastEditTime: 2022-04-28 21:25:40
 * @Email         : 368535656@qq.com
 * @Project       : Zibll子比主题
 * @Description   : 一款极其优雅的Wordpress主题
 * @Read me       : 感谢您使用子比主题，主题源码有详细的注释，支持二次开发。
 * @Remind        : 使用盗版主题会存在各种未知风险。支持正版，从我做起！
 * @----本go页面有藏宝楼素材网（www.cangbaolou.com）进行二次修改，禁止搬运，支持正版------。
 */

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);
    $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, 1000000);
        //延时50S关闭跳转页面，用于文件下载后不会关闭跳转页的问题
        setTimeout(function() {
            window.opener = null;
            window.close();
        }, 500000);
    </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}
        .lanren-go-main{display:flex;width:100%;height:100%;justify-content:center;align-items:center}
        .lanren-go-container{position: relative;max-width:38em;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)}
        .lanren-go-url a{color:#036af4}
        .lanren-go-content a:hover{color:#036af4}
        .lanren-go-logo{text-align:center;width:auto;height:65px;margin-bottom:10px}
        .lanren-go-logo img{max-width:100%;height:100%}
        .lanren-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}
        .lanren-go-button-item{text-align:right;margin-bottom:10px}
        .lanren-go-button{display:inline-block;border-radius:5px;padding:10px 15px;background:rgba(116,116,116,.1);transition:all .5s}
        .lanren-go-button a{font-weight:700;font-size:14px;color:#333}
        .lanren-go-button:hover{color:#000;background:rgba(116,116,116,.2)}
        .lanren-goid-item{position:absolute;top:10px;left:10px;border-radius:4px;overflow:hidden;background:#ffd07c}
        .lanren-goid-title{padding:0 4px;background:#ffa400}
        .lanren-goid-text{padding-right:5px}
        .lanren-go-container hr{border: 0;height: 0.05em;background: #eee;}
        .lanren-danger {display:inline-block;border-radius:5px;padding:5px 8px;
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}
        .lanren-success {display:inline-block;border-radius:5px;padding:5px 8px;
    color: #fff;
    background-color: #5cb85c;
    border-color:#4cae4c
}
.lanren-text{text-align:center;}
    </style>
    <style>
    .ad-container {
      max-width: 100%;
      height: auto;
      overflow: hidden;
      position: relative;
      margin-bottom:10px
    }

    .ad-image {
      width: 100%;
      height: auto;
    }

    @media (max-width: 768px) {
      .ad-image {
        width: 100%;
        height: auto;
      }
    }

    @media (max-width: 480px) {
      .ad-image {
        width: 100%;
        height: auto;
      }
    }
  </style>
</head>

<body>
    <div class="lanren-go-main">
        <div class="lanren-go-container">
            <div class="lanren-goid-item">
                <b class="lanren-goid-title">GID</b>
                <span class="lanren-goid-text">LINK<?php echo hexdec($url); ?></span>
            </div>
            <div class="lanren-go-logo">
                <?php echo zib_get_adaptive_theme_img(_pz('logo_src'), _pz('logo_src_dark')); ?>
            </div>
            <div class="lanren-go-content">
                <div class="lanren-go-msg">
                    <span><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> 您即将离开<?php echo $wiiui_title; ?>，即将访问第三方链接</span>
                </div>
                <div class="lanren-text lanren-go-url">
                <p><a onclick="location.replace('<?php echo $url; ?>')" title="<?php echo $url; ?>"><?php echo $url; ?></a></p>
            </div>
            <div class="lanren-text">
            <p style="font-size:14px;margin:20px 0 10px 0">请勿随意打开陌生人发来的链接，如您不确定网站安全性，请点击下方取消访问</p>
            <p style="font-size:12px;margin:20px 0 0 0"><?php echo $wiiui_title; ?>不对该网站内容承担任何责任，请小心填写账号、密码信息。</p>
            <p style="font-size:12px">cangbaolou.com assumes no responsibility for the security of this site,please be caution for your confidential.</p>
            <hr></div>
            <div class="lanren-go-button-item">
                <div class="lanren-danger">
                    <a onclick="location.replace('//<?php echo $_SERVER['HTTP_HOST']; ?>')">取消访问</a>
                </div>
                <div class="lanren-success">
                    <a onclick="location.replace('<?php echo $url; ?>')">继续访问</a>
                </div>
            </div>
            <div class="ad-container">
    <a href="https://www.cangbaolou.com/ad">
      <img class="ad-image" src="https://cangbaolou.com/wp-custom/img/c781e318359b8238210a1878290c46d564003.png" alt="广告图片">
    </a>
                    </div>
            
        </div>
    </div>
</body>

</html>

#23 网站自定义图片广告美化代码

效果展示

HTML

CSS

代码部署：进入后台点击外观–小工具–自定义html

<div class="yfx_ads">
    <li>
        <a href="https://www.cangbaolou.com/" target="_blank"><img src="https://cangbaolou.com/wp-custom/img/2021063017183653.png" alt="藏宝楼源码网_到期时间："></a>
    </li>
    <li>
        <a href="https://www.cangbaolou.com/" target="_blank"><img src="https://cangbaolou.com/wp-custom/img/2021063017183653.png" alt="藏宝楼源码网_到期时间："></a>
    </li>
    <li>
        <a href="https://www.cangbaolou.com/" target="_blank"><img src="https://cangbaolou.com/wp-custom/img/2021063017183653.png" alt="藏宝楼源码网_到期时间："></a>
    </li>
    <li>
        <a href="https://www.cangbaolou.com/" target="_blank"><img src="https://cangbaolou.com/wp-custom/img/2021063017183653.png" alt="藏宝楼源码网_到期时间："></a>
    </li>
    </div>

CSS代码：主题设置->自定义代码->自定义CSS样式

.yfx_ads {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-top: 10px;
    margin-bottom: 10px !important;
}
.yfx_ads li {
    margin: 5px 0;
    padding-left: 15px;
    flex: 0 0 33.33344%;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
       list-style: none;
}
.yfx_ads a {
    position: relative;
    display: block;
    float: left;
}
.yfx_ads a:before {
    position: absolute;
    content: " ";
    width: 26px;
    height: 1pc;
    background: url(https://s3.bmp.ovh/imgs/2021/08/748b05991e59fe63.png);
    right: 0;
    font-size: 9pt;
    text-align: center;
    bottom: 0;
    color: #fff;
}
@media screen and (max-width: 800px) { .yfx_ads{display:none; }
}

#24 给弹窗modal加一个背景

效果展示

CSS代码：主题设置->自定义代码->自定义CSS样式

/*modal弹窗背景样式*/
#zibpay_modal, .modal-open .modal {
    background: url(https://img.alicdn.com/imgextra/i3/2210123621994/O1CN01sHaYCQ1QbIkXDzSVg_!!2210123621994.png);
    backdrop-filter: blur(10px) !important;
}

#25 邮件页面插入一个HTML广告代码

效果展示

代码部署：WordPress后台->Zibll主题设置->全局功能->Email邮件->额外内容二

<a href="https://www.cangbaolou.com">访问网站</a> |<a href="http://wpa.qq.com/msgrd?v=3&uin=368535656&site=qq&menu=yes">联系站长</a> 
<div style="
    margin: 23px 0px 10px;
    height: 48px;
    position: relative;
    border-radius: 8px;
    box-shadow: 8px 8px 20px 0 rgb(55 99 170 / 10%), -8px -8px 20px 0 #fff;
    background-image: linear-gradient(0deg,#fff,#f3f5f8);">
    <img src="https://oss.zibll.com/zibll.com/2023/10/20231025151225453-ZIBLL-LOGO-%E5%8A%A8%E7%94%BB-%E7%99%BD%E5%A4%A9.svg" title="OKEX" style="
    float: left;
    width: 111px;
    height: 46px;"> <a href="https://www.zibll.com/pay-zibll/?ref=5461" target="_blank" rel="noopener"title="okex" style="
    overflow: hidden;
    padding: 0 103px 0 16px;
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;">
    <em style="
    animation: fadenum 10s infinite;
    font-size: 16px;
    color: #0ecbcb;
    display: block;
    line-height: 48px;
    height: 48px;
    text-overflow: ellipsis;
    white-space: nowrap;">
   WordPress同款主题，提供强大模板解决方案
    </em><span style="
    font-size: 18px;
    background: #333;
    width: 64px;
    height: 29px;
    background: #ff4c4c;
    color: #fff;
    line-height: 29px;
    text-align: center;
    position: absolute;
    right: 10px;
    top: 10px;
    border-radius: 3px;
    font-size: 14px;">购买zbll</span></a></div>

#26 给子比加一个VIP会员页面教程

效果展示

代码部署：首先我们要知道这个页面一共有2两个文件的代码CSS与PHP

PHP文件放到/wp-content/themes/zibll/pages这个目录下面，找到底部引入的CSS目录，请将目录改成你的即可

VIP页面

下载

#27 在用户中心侧边栏顶部添加抽奖模块

效果展示

代码部署：WordPress后台->小工具里->添加区块->加入以下代码

<style>
    .countdown-activity {
        padding: 20px;
        background-color: #3e516d;
        background-image: linear-gradient(75deg, #2f3b42 0%, #3e516d 39%, #222538 100%);
        color: #fff;
        justify-content: center;
        display: flex;
        font-size: 18px;
        line-height: 1.4;
        justify-content: space-evenly !important;
    }

    .activity-title {
        font-size: 1.5em;
        font-weight: bold;
    }

    .ztw-bg {
        background-color: #3e516d;
        background-image: linear-gradient(75deg, #2f3b42 0%, #3e516d 39%, #222538 100%);
        color: #fff;
        --this-bg: linear-gradient(75deg, #2f3b42 0%, #3e516d 39%, #222538 100%);
    }
</style>
<div class="ztw-bg zib-widget mb10-sm ztw-bg" style="margin: -15px; margin-bottom: -30px;"><div class="colorful-make" style="transform: rotate(-9deg) scale(0.7);"></div>
    <div class="flex ab c jsb"><div class=""><div class="flex ac"><b class="em14">在线抽奖中心</b></div>
    <div style="" class="em09 opacity8">没有积分？在这里试试运气吧！</div>
    <a href="/choujiang" data-onclick="[href=#user-tab-product]" class="mt6 but radius jb-cyan px12 p2-10">点击抽奖<i style="margin:0 0 0 6px;" class="fa fa-angle-right em12"></i></a>
    
    </div>

<span class="avatar-img mr10 mt3" style="--this-size: 59px;"><svg class="icon" style="font-size: 5em;vertical-align: middle;fill: currentColor;overflow: hidden;margin-top: -15px;" viewBox="0 0 1024 1024"><path d="M628.128 85.44c84.8-48.96 183.104-45.504 219.68 17.92 30.208 52.288 4.032 121.44-55.296 171.744l-6.048 4.96-39.872-50.048c41.696-33.216 57.952-73.632 45.792-94.688-14.944-25.888-74.24-27.968-132.256 5.568-56 32.32-83.872 82.176-72.384 108.896l1.408 2.88-55.424 32c-36.576-63.392 9.6-150.24 94.4-199.2z" fill="#5DE1C8" p-id="14455"></path><path d="M417.28 85.44c-84.8-48.928-183.104-45.472-219.68 17.92-31.104 53.824-2.464 125.344 60.256 175.84l6.176 4.832 38.624-51.008c-44.288-33.568-62.24-75.84-49.632-97.696 14.944-25.888 74.24-27.968 132.288 5.568 55.968 32.32 83.84 82.176 72.384 108.896l-1.44 2.88 55.424 32c36.576-63.36-9.6-150.24-94.4-199.2z" fill="#5DE1C8" p-id="14456"></path><path d="M896 229.056H128a96 96 0 0 0-96 96v96a96 96 0 0 0 96 96h768a96 96 0 0 0 96-96v-96a96 96 0 0 0-96-96z m-768 64h768a32 32 0 0 1 32 32v96a32 32 0 0 1-32 32H128a32 32 0 0 1-32-32v-96a32 32 0 0 1 32-32z" fill="#1890FF" p-id="14457"></path><path d="M224 976.576a96 96 0 0 1-95.84-90.368L128 880.576v-384a32 32 0 0 1 28.256-31.808L160 464.576h704a32 32 0 0 1 31.776 28.256l0.224 3.744v77.248a32 32 0 0 1-63.776 3.712L832 573.824v-45.28H192v352a32 32 0 0 0 28.256 31.808l3.744 0.224h307.2c41.216 0 42.624 59.648 4.288 63.776l-4.256 0.224H224z" fill="#1890FF" p-id="14458"></path><path d="M800 648c-100.544 0-184 33.376-184 88s83.456 88 184 88 184-33.376 184-88-83.456-88-184-88z m0 48c76.192 0 136 23.904 136 40s-59.808 40-136 40c-76.192 0-136-23.904-136-40s59.808-40 136-40z" fill="#FF7272" p-id="14459"></path><path d="M960 801.6a24 24 0 0 1 24 24c0 54.624-83.456 88-184 88s-184-33.376-184-88a24 24 0 0 1 48 0c0 16.096 59.808 40 136 40 76.192 0 136-23.904 136-40a24 24 0 0 1 24-24z" fill="#FF7272" p-id="14460"></path><path d="M960 891.2a24 24 0 0 1 24 24c0 54.624-83.456 88-184 88s-184-33.376-184-88a24 24 0 0 1 48 0c0 16.096 59.808 40 136 40 76.192 0 136-23.904 136-40a24 24 0 0 1 24-24z" fill="#FF7272" p-id="14461"></path></svg></span></div>
</div>

1 如果您喜欢本站，点击这儿赞助下本站，感谢支持！
2 可能会帮助到你：开发工具 | 解压资源 | 进站必看
3 如若转载，请注明文章出处：
4 本站内容观点不代表本站立场，并不代表本站赞同其观点和对其真实性负责
5 若作商业用途，请联系原作者授权，若本站侵犯了您的权益请联系站长进行删除处理
6 本站所有内容均来源于网络，仅供学习与参考，请勿商业运营，严禁从事违法、侵权等任何非法活动，否则后果自负

THE END