WordPress子比美化教程（持续更新中）

博主： admin
发布时间：2024 年 08 月 04 日
0 次浏览
暂无评论
44477字数
分类：藏经阁

主题美化说明

此页主题美化根据【子比主题】而来，可修改一下来提升个人博客的魅力

主题美化和小工具可能会引起一系列问题，如网站加载缓慢和CSS的全局污染等。美化前请一定要测试。
主题美化可能会修改主题文件。更新时，请及时备份主题美化文件，或收藏此站点，以免丢失部分主题页面或美化效果。

不会的看下面

CSS 代码添加到后台：子比主题设置—>自定义代码—>自定义 CSS 样式
JS 即 javascript 代码添加到：后台子比主题设置—>自定义代码—>自定义 javascript 代码
没有特殊说明的小工具，自定义 HTML 小工具：添加网站后台—>外观–>小工具–>点击【自定义 HTML】选择放置的位置—>把代码复制进去，保存即可
其他添加方式的，我会在教程里告知，若只需添加 CSS+JS 的教程，我可能不重复告知了，请注意看上面的方法。
有些美化教程本站已经发布的，本文章将不再进行编写教程，直接跳转到文章页面。

更新站长推荐的美化，让子比更炫起来！！

1、首页文章列表悬停上浮代码

/*首页文章列表悬停上浮开始*/
@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);}}
/*首页文章列表悬停上浮结束*/

2、文章底部添加最后更新时间或过期失效提示

1.将下面的 PHP 代码加入到主题目录下：themes/zibll/functions.php 文件中。

//文章过期提示开始
function article_time_update() {
    date_default_timezone_set('PRC');
    $newdate=time();
    $updated_date = get_the_modified_time('Y-m-d H:i:s');
    $updatetime=strtotime($updated_date);
    $custom_content = '';
    if ( $newdate > $updatetime+86400) {
    $custom_content= '<div class="article-timeout"><strong><i class="fa fa-bell" aria-hidden="true"></i> 温馨提示：</strong>本文最后更新于<code>'. $updated_date . '</code>，某些文章具有时效性，若有错误或已失效，请在下方<a href="#comment">留言</a>或联系<a target="_blank" title="觅知博客" href="http://wpa.qq.com/msgrd?v=3&uin=1426239465&site=qq&menu=yes"><b>觅知社长</b></a>。</div >';
    }
        echo $custom_content;
    }
//文章过期提示结束

2.在主题目录themes/zibll/inc/functions/zib-single.php 文件中，文章分页函数（我的是在 317 行，因为我的代码有改动，所有不确定行数，见下图）搜索文章分页或者添加钩子，下面添加下方代码即可。

PHP代码

article_time_update();//文章过期提示

3.CSS 代码：（在自定义 CSS 样式添加下面代码）

/*过期文章提示样式*/
.article-timeout{position:relative; border-radius: 8px; position: relative; margin-bottom: 25px; padding: 10px; background-color: var(--body-bg-color);}

效果图

3、子比主题外链修改 go 外链跳转页面

第一个样式

主题目录下go.php文件里面的全部代码清空，然后把下面的代码复制进去即可。替换原来的即可。
更新主题和修改前记得备份go.php。

[hidecontent type="logged"]

<?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);
    $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}
        .tengfei-go-main{display:flex;width:100%;height:100%;justify-content:center;align-items:center}
        .tengfei-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)}
        .tengfei-go-content a{color:#036af4}
        .tengfei-go-content a:hover{color:#e91e63}
        .tengfei-go-logo{text-align:center;width:auto;height:65px;margin-bottom:10px}
        .tengfei-go-logo img{max-width:100%;height:100%}
        .tengfei-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}
        .tengfei-go-button-item{text-align:right}
        .tengfei-go-button{display:inline-block;border-radius:99px;padding:10px 15px;background:rgba(116,116,116,.1);transition:all .5s}
        .tengfei-go-button a{font-weight:700;font-size:14px;color:#333}
        .tengfei-go-button:hover{color:#000;background:rgba(116,116,116,.2)}
        .tengfei-goid-item{position:absolute;top:10px;left:10px;border-radius:4px;overflow:hidden;background:#ffd07c}
        .tengfei-goid-title{padding:0 4px;background:#ffa400}
        .tengfei-goid-text{padding-right:5px}
        .tengfei-go-container hr{border: 0;height: 0.05em;background: #eee;}
    </style>
</head>

<body>
    <div class="tengfei-go-main">
        <div class="tengfei-go-container">
            <div class="tengfei-goid-item">
                <b class="tengfei-goid-title">GID</b>
                <span class="tengfei-goid-text">LINK<?php echo hexdec($url); ?></span>
            </div>
            <div class="tengfei-go-logo">
                <?php echo zib_get_adaptive_theme_img(_pz('logo_src'), _pz('logo_src_dark')); ?>
            </div>
            <div class="tengfei-go-content">
                <div class="tengfei-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="tengfei-go-button-item">
                <div class="tengfei-go-button">
                    <a onclick="location.replace('//<?php echo $_SERVER['HTTP_HOST']; ?>')">返回首页</a>
                </div>
                <div class="tengfei-go-button">
                    <a onclick="location.replace('<?php echo $url; ?>')">继续访问</a>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

[/hidecontent]

第二个样式

主题目录下go.php文件里面的全部代码清空，然后把下面的代码复制进去即可。替换原来的即可。
更新主题和修改前记得备份go.php。

[hidecontent type="logged"]

<?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>

[/hidecontent]

4、子比主题子比主题文章标签美化

复制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}

5、子比主题添加热门标签页面

教程如下

1、进入子比主题目录—>pages这个目录下创建PHP文件，然后把下面的代码添加进去。

[hidecontent type="logged"]

<?php

/**
 * Template name: tengfei-热门标签页面
 * Description:   tengfei - Hot_Tags
 */

// 获取链接列表
get_header();
$header_style = zib_get_page_header_style();
?>
<main class="container">
    <div class="content-wrap">
        <div class="content-layout">
            <?php while (have_posts()) : the_post(); ?>
                <?php if ($header_style != 1) {
                    echo zib_get_page_header();
                } ?>
                <div class="box-body theme-box radius8 main-bg main-shadow">
                    <?php if ($header_style == 1) {
                        echo zib_get_page_header();
                    } ?>
                    <div class="tagslist tags-page wrapper">
                        <ul>
                          <?php 
                            $tags_count = 60;
                            $tagslist = get_tags('orderby=count&order=DESC&number='.$tags_count);
                            foreach($tagslist as $tag) {
                              echo '<li style="list-style-type:none;"><a class="name box b2-radius b2-mg" href="'.get_tag_link($tag).'"><h2>'. $tag->name .'</h2><small></br><p>共'. $tag->count .'篇文章</p></a></li>';} 
                          ?>
                        </ul>
                    </div>
                    <?php wp_link_pages('link_before=<span>&link_after=</span>&before=<div class="article-paging">&after=</div>&next_or_number=number'); ?>
                <?php endwhile;  ?>
                </div>
                <?php comments_template('/template/comments.php', true); ?>
        </div>
    </div>
    <?php get_sidebar(); ?>
<!--CSS样式-->
  <style type="text/css">
 .wrapper{/*width: 1142px; max-width: 100%;*/ margin: 0 auto; padding: 0;} .b2-mg{margin: 16px;} .b2-radius{border-radius: 5px;} .box,.side-fixed{background-color: #fff;-webkit-transition: all .2s cubic-bezier(.455,.03,.515,.955); -webkit-box-shadow: 0 0 22px -12px rgba(0,36,100,.3);-moz-box-shadow:0 0 22px -12px rgba(0,36,100,.3);box-shadow: 0 0 22px -12px rgba(0,36,100,.3)box-shadow: 0 0 0 1px #ebebed;box-shadow: 0 1px 3px rgba(26,26,26,.1);box-shadow: 0px 5px 40px -1px rgba(2, 10, 18, 0.1);}/*标签页面*/.tags-page ul{display: flex; flex-flow: wrap;}.tags-page ul li{width: 16.66667%;}.tags-page ul li a{display: block; padding: 20px 10px; text-align: center; border-radius: 10px;}.tags-page ul li a{background-color: #FF6666; border: 2px solid rgba(255, 255, 255, 0);}.tags-page ul li a:hover{box-shadow: 0 3px 10px #ccc; border: 2px solid #fff;}.tags-page ul li:nth-child(7n + 2) a{background-color: #FF9900;}.tags-page ul li:nth-child(7n + 3) a{background-color: #339966;}.tags-page ul li:nth-child(7n + 4) a{background-color: #339999;}.tags-page ul li:nth-child(7n + 5) a{background-color: #6699CC;}.tags-page ul li:nth-child(7n + 6) a{background-color: #8f82bc;}.tags-page ul li:nth-child(7n + 7) a{background-color: #FF99CC;}.tags-page ul li h2{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; height: 25px; overflow: hidden; margin-bottom: -20px; font-weight: 700; font-size: 17px; color: #fff;}.tags-page ul li p{font-size: 12px; color: rgba(255, 255, 255, 0.63);}.tags-page h1{font-size: 28px; text-align: center; margin: 30px 0;}@media screen and (max-width: 768px){.tags-page ul li{width: 50%;} .tags-page h1{margin: 20px 0;} .tags-page ul li a{padding: 10px 5px;}}.b2-radius:not(article){transition: all 0.3s;}.b2-radius:not(article):hover{transform: translateY(-10px);}
  </style>
</main>
<?php
get_footer();

[/hidecontent]

2、把上面的代码添加进行保存后，进入到后台—>页面—>新建页面—->选择热门标签页面即可使用。

3、如果懒得创建添加PHP文件的话，可以下载下面我创建好的PHP文件，上传到子比主题的pages这个目录下，然后按照第2点进行创建页面就好了

6、文章列表右上角添加文章置顶+新文章发布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="https://www.tfbkw.com/wp-content/uploads/2023/08/new.png" draggable="false" alt="最新文章" /></div>';
    }else if (is_sticky()){
        $wiui_new_icon = '<div class="wiiuii-new-icon"><img src="https://www.tfbkw.com/wp-content/uploads/2023/08/xin-top.png" draggable="false" alt="置顶文章" /></div>';
    }else{
        $wiui_new_icon = '';
    }
    //开始输出
    return $wiui_new_icon;
}

上面《img》标签icon图标链接自己修改。

最关键的PHP代码及放置位置

在子比主题目录下“/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;}

7、手机左侧菜单添加背景图片

CSS代码

/*手机侧边栏背景图片*/
@media (max-width: 767px){
.mobile-navbar.show,.mobile-navbar.left{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
  background-image:linear-gradient(rgba(255, 255,255,0),rgba(255,255,255, 0.3)),url(https://picshack.net/ib/7Lm5teUTyV.jpg);}
  .mobile-nav-widget .box-body {
    background: var(--muted-border-color) !important;}
}

这是一个简单的CSS代码，若要更换图片请将CSS图片里面的链接换成你自己的即可！！

8、子比主题添加文章评论常用语功能

CSS代码

在后台 >> Zibll主题设置 >> 全局&功能 >> 自定义代码 >> 自定义CSS样式，添加如下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代码

在后台 >> Zibll主题设置 >> 全局&功能 >> 自定义代码 >> 自定义javascript代码，添加如下jQuery代码：

 // 评论常用语
$('.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');
});

PHP代码

第一步：在“../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>';
    }

将下面代码放到子比主题设置=>>文章列表=>>文章页面=>>在文章内容后-插入内容

<div class="shangye">本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负！</div>

将下面的代码放到自定义CSS即可实现

.shangye {
    color: #fff;
    background: #5282f7 url(https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01BCJh7X1QbIi6fiBx8_!!2210123621994.png) 3px 7px no-repeat;
    border: 1px solid #5282f7;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 50px;
    border-radius: 4px;
}

10、网站全局或者首页加一个灰色悼念模式

将代码放到自定义CSS样式即可

全局追悼CSS代码

body > .header,
body > .container,
body > .footer
{
    -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
}

首页追悼CSS代码

html .home>.header,
html .home>.container,
html .home>.footer
{
    -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
}

11、网站文章侧边栏添加旗下站点小工具导航

1、将下面的代码添加在网站页脚底部或者在 wp 后台添加小工具，效果展示是一样的我是添加在小工具的
2、添加路径：在后台—>>外观—>>小工具—>>自定义 HTML—>> 选择你需要放的位置
3、我是添加在文章侧边栏
4、修改代码中的链接以及文字改为自己的

<div class="textwidget"><div class="attentionus"><span class="zhan-widget-link zhan-link-z1"> <span class="zhan-widget-link-count">腾飞博客小工具1</span> <a href="/" 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">腾飞博客小工具2</span> <a href="/" 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">腾飞博客小工具3</span> <a href="/" 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">腾飞博客小工具4</span> <a href="/" 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">腾飞博客小工具5</span> <a href="/" target="_blank" rel="noopener"><span class="zhan-widget-link-title">在线音乐搜索</span> </a></span></div>
<style type="text/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}</style>
</div>

12、两款子比主题翻页样式美化

第一款

将下面代码放到自定义CSS即可

.pagenav, .pagenav .page-numbers, .pagenav a {
    border-radius: 50%;
}

将下面代码放到自定义CSS即可

.pagenav .current, .pagenav .page-numbers, .pagenav a {
    border: 0;
    padding: 8px 14px;
    background: linear-gradient(148deg, hsla(0, 0%, 100%, 0), var(--main-bg-color));
    -webkit-box-shadow: 0 0 8px 0 rgba(95, 95, 95, .15);
    box-shadow: 0 0 8px 0 rgba(95, 95, 95, .15);
    border-radius: 6px;
}

注：当然两个代码都放在自定义CSS里面效果也是不错的

13、子比主题给文章内超链接加上波浪效果

[hidecontent type="logged"]

放到后台自定义CSS即可

/*超链接下波浪线*/
.wp-posts-content a:hover {color:#ff4500;text-decoration:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%23FF4500' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E")repeat-x 0 100%;background-size:20px auto;animation:waveMove 1s infinite linear}
@keyframes waveMove{from{background-position:0 100%}
to{background-position:-20px 100%}
}
/*超链接下波浪线结束*/

[/hidecontent]

14、子比主题LOGO扫光特效代码

LOGO扫光我就不演示了，自己心里都知道，记录一下笔记

[hidecontent type="logged"]

放到子比主题–>>自定义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;}}

[/hidecontent]

15、子比侧边栏添加一款粒子当前时间

后台设置—>外观—>小工具—>添加自定义 HTML 代码，加到合适侧边栏即可

[hidecontent type="logged"]

后台设置—>外观—>小工具—>添加自定义 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>

[/hidecontent]

16、子比主题侧边栏滚动播报小工具

[hidecontent type="logged"]

投放地方：后台—>外观—>小工具—>自定义 HTML添加下面的代码，把它放在合适的位置

<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>

[/hidecontent]

17、子比主题编辑器三点美化

[hidecontent type="logged"]

将下面的代码放到：子比主题=>>自定义CSS样式里面即可

/*编辑器三点美化*/
.enlighter::before {
    content: "";
    display: block;
    background: #fc625d;
    top: 9px;
    left: 15px;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    margin: 0px 2px -7px;
    z-index: 1;
    position: absolute;
}
.enlighter-overflow-scroll.enlighter-v-standard .enlighter {
    padding: 35px 0 12px 0;
}

[/hidecontent]

子比主题：WordPress后台>> 主题设置>> 文章&列表>> 文章页面 >> 将代码添加到“版权提示内容”中

[hidecontent type="logged"]

<div class="posts-copyright"><div class="entry-copyright px12">
<!--腾飞博客版权样式一-->
    <span class="badg badg-sm mr3 c-yellow">1</span> 如果您喜欢本站，<a href="https://www.tfbkw.com/" style="color:#a102ff">        <i class="wpcom-icon menu-item-icon">
            <svg aria-hidden="true"><use xlink:href="#icon-security-color"></use></svg>
        </i>点击这儿
  </a>赞助下本站，感谢支持！<br>
    <span class="badg badg-sm mr3 c-red">2</span> 可能会帮助到你：
    <a href="https://www.tfbkw.com/" style="color:#00aeff" title="开发工具" target="_blank">
        <i class="wpcom-icon menu-item-icon">
            <svg aria-hidden="true"><use xlink:href="#icon-user-auth"></use></svg>
        </i> 开发工具
    </a> | 
    <a href="https://www.tfbkw.com/" style="color:red" title="解压资源" target="_blank">
        <i class="wpcom-icon menu-item-icon">
            <svg aria-hidden="true"><use xlink:href="#icon-ontop-color"></use></svg>
        </i> 解压资源
    </a> | 
    <a href="https://www.tfbkw.com/" style="color:#ffbe02" title="进站必看" target="_blank">
        <i class="wpcom-icon menu-item-icon">
            <svg aria-hidden="true"><use xlink:href="#icon-comment-color"></use></svg>
        </i> 进站必看
    </a><br>
  <span class="badg badg-sm mr3 c-purple">3</span> 如若转载，请注明文章出处：
    <script>var url = window.location.href;document.write(document.URL);</script></span><br>
    <span class="badg badg-sm mr3 c-blue">4</span> 本站内容观点不代表本站立场，并不代表本站赞同其观点和对其真实性负责<br>    
    <span class="badg badg-sm mr3 c-green">5</span> 若作商业用途，请联系原作者授权，若本站侵犯了您的权益请
    <a href="https://wpa.qq.com/msgrd?v=3&uin=2296945504&site=qq&menu=yes" style="color:red" title="联系站长qq2296945504" target="_blank">
        <i class="wpcom-icon menu-item-icon">
            <svg aria-hidden="true"><use xlink:href="#icon-qq-color"></use></svg>
        </i> 联系站长
    </a> 进行删除处理
    <br>
  <span class="badg badg-sm mr3">6</span> 本站所有内容均来源于网络，仅供学习与参考，请勿商业运营，严禁从事违法、侵权等任何非法活动，否则后果自负<br>
</div></div>

[/hidecontent]

[hidecontent type="logged"]

<!--腾飞博客版权样式二 tfbkw.com--><div class="single-bottom-html mg-b box b2-radius"><fieldset style="border: 8px dashed; background: #ffffff; padding: 10px; border-radius: 5px; line-height: 1.5em; color: #595959;" data-mce-style="border: 2px dashed; background: #ffffff; padding: 10px; border-radius: 5px; line-height: 1.5em; color: #595959;"> <legend style="color: #ffffff; width: 30%; text-align: center; background-color: #e8b235; border-radius: 5px;" align="center" data-mce-style="color: #ffffff; width: 30%; text-align: center; background-color: #e8b235; border-radius: 8px;">重要声明</legend> <fieldset style="border: 1px dashed #e8b235; padding: 10px; border-radius: 5px; line-height: 2em; font-size: 12px; color: #bdbdbd; text-align: center;" data-mce-style="border: 1px dashed #e8b235; padding: 10px; border-radius: 5px; line-height: 2em; font-size: 12px; color: #bdbdbd; text-align: center;"> <p style="font-size: 12px; text-align: center;" data-mce-style="font-size: 12px; text-align: center;"><span style="color: #000000;" data-mce-style="color: #000000;">本站资源大多来自网络，如有侵犯你的权益请联系管理员</span><span style="color: #000000;" data-mce-style="color: #000000;">E-mail:</span><span style="color: #ff6600;" data-mce-style="color: #ff6600;">tfblog@126.com</span> <span style="color: #000000;" data-mce-style="color: #000000;">我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用，未经原版权作者许可,禁止用于任何商业途径！请在下载24小时内删除！</span></p> <hr> <p style="font-size: 12px; text-align: center;" data-mce-style="font-size: 12px; text-align: center;"><span style="color: #000000;" data-mce-style="color: #000000;">如果遇到</span><span style="color: #ff0000;" data-mce-style="color: #ff0000;">付费</span><span style="color: #000000;" data-mce-style="color: #000000;">才可</span><span style="color: #33cccc;" data-mce-style="color: #33cccc;">观看</span><span style="color: #000000;" data-mce-style="color: #000000;">的文章，建议升级</span><span style="color: #ff0000;" data-mce-style="color: #ff0000;">终身VIP。</span><span style="color: #000000;" data-mce-style="color: #000000;">全站所有资源</span><span style="color: #ff0000;" data-mce-style="color: #ff0000;">“<span style="color: #3366ff;" data-mce-style="color: #3366ff;">任意下免费看</span>”。</span><span style="color: #ff9900;" data-mce-style="color: #ff9900;">本站资源少部分采用</span><span style="color: #00ccff;" data-mce-style="color: #00ccff;">7z压缩，</span><span style="color: #33cccc;" data-mce-style="color: #33cccc;">为防止有人压缩软件不支持7z格式</span><span style="color: #cc99ff;" data-mce-style="color: #cc99ff;">，7z</span><span style="color: #000000;" data-mce-style="color: #000000;">解压，建议下载</span><span style="color: #cc99ff;" data-mce-style="color: #cc99ff;"><em>7-zip</em></span><span style="color: #cc99ff;" data-mce-style="color: #cc99ff;">，zip、rar</span><span style="color: #000000;" data-mce-style="color: #000000;">解压，建议下载</span><span style="color: #cc99ff;" data-mce-style="color: #cc99ff;"><em>WinRAR</em></span><span style="color: #000000;" data-mce-style="color: #000000;">。</span></p> </fieldset> </fieldset></div>

[/hidecontent]

[hidecontent type="logged"]

<head>
<!--腾飞博客版权样式三 tfbkw.com-->
<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.tfbkw.com/">腾飞博客</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://tfbkw.com/privacy" 

target="_blank">PrivacyPolicy</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.tfbkw.com/protocol" 

target="_blank">UseGenerator</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://creativecommons.org/licenses/by-

nc-sa/4.0/" target="_blank">NC-SA 4.0</a></strong></div>
                </div>
            </div>
        </div>
    </div>
</body>

[/hidecontent]

[hidecontent type="logged"]

<!--腾飞博客版权样式四 tfbkw.com-->
  <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.tfbkw.com</font><br />
      <span class="btn-info btn-xs">3</span> 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ<a href="http://wpa.qq.com/msgrd?v=3&uin=2296945504&site=qq&menu=yes" target="_blank">577669882</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>
  <!--版权申明样式-->

[/hidecontent]

[hidecontent type="logged"]

<div class="posts-copyright"><div class="box">
    <!--腾飞博客版权样式五-->
    <b class="lurenfen"><p>本站收集的资源仅供内部学习研究软件设计思想和原理使用，学习研究后请自觉删除，请勿传播，因未及时删除所造成的任何后果责任自负。</p>
<p>如果用于其他用途，请购买正版支持作者，谢谢！若您认为「TFBKW.COM」发布的内容若侵犯到您的权益，请联系站长邮箱:tfblog@126.com 进行删除处理。</p>
本站资源大多存储在云盘，如发现链接失效，请联系我们，我们会第一时间更新。
   </b>
  </div>
<style type="text/css"> 
.box
{
  position: relative;
  padding: 10px; 
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 20px;
}
.box:before
{
  content: '';
  position: absolute;
  width: 150%;
  height: 50%;
  background: linear-gradient(315deg,#00ccff,#d400d4);
  animation: animate 6s linear infinite
}
@keyframes animate 
{
  0%
  {
    transform: rotate(0deg);
  }
  100%
  {
    transform: rotate(360deg);
  }
}
.box:after
{
  content: '';
  position: absolute;
  inset : 6px;
  background: var(--body-bg-color);
  border-radius: 15px;
  z-index: 2;
}
.lurenfen
{
  position: relative;
  font-weight: normal;
  color: #2997f7;
  z-index: 4;
  margin:15px;
}

</style></div>

[/hidecontent]

[hidecontent type="logged"]

<!--腾飞博客版权样式六 tfbkw.com-->
<div class="posts-copyright">
    <fieldset style="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: #3c59eb;border-radius: 10px;border: 0px dashed #3c59eb;font-size: 16px; color: #ffffff;">
        版权声明
    </legend>
    <span class="btn-info btn-xs" style="background-color: #3c59eb;">1</span> 本站名称：<span style="color: #f7dbdb;"><span style="color: #3c59eb;">
        <strong>腾飞博客</strong>
    </span>
</span>
<br>
    <span class="btn-info btn-xs" style="background-color: #3c59eb;">2</span> 本站网址：<font color="#3c59eb">www.tfbkw.com</font><br>
    <span class="btn-info btn-xs" style="background-color: #3c59eb;">3</span> 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。<br>
    <span class="btn-info btn-xs" style="background-color: #3c59eb;">4</span> 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。<br>
        <span class="btn-info btn-xs" style="background-color: #3c59eb;">5</span> 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。<br>
        <span class="btn-info btn-xs" style="background-color: #3c59eb;">6</span> 本站附件资源、教程等内容如因时效原因失效或不可用，请评论区留言或联系站长及时更新。<br>
</fieldset>
</div>
<!--腾飞博客版权样式六 tfbkw.com-->

[/hidecontent]

19、子比主题 – 在线投稿联系方式小工具模块

使用教程

将下面的代码添加在 WordPress 后台小工具，效果展示是一样的
添加路径：后台 >> 外观 >> 小工具 >> 自定义 HTML >> 选择你需要放的位置

HTML

<div class="zib-widget widget_text">
    <div id="update_version">
    <a href="/" target="_blank" rel="noopener"><img title="腾飞博客" src="https://www.tfbkw.com/wp-content/uploads/2024/05/20240524203517214-tougao.webp" alt="图片" style="border-radius:5px;"></a>
    <a class="blog_link" href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=tfblog@126.com" target="_blank" style="background-image: linear-gradient(120deg, #3ca5f6 0%, #a86af9 100%);" rel="noopener">站长邮箱</a>
    <a class="cms_link" href="/" target="_blank" style="background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);" rel="noopener">在线投稿</a>
    <a class="grid_link" href="/" target="_blank" style="background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);" rel="noopener">友情链接</a>
    </div>
    <div>
    <hr>
    </div>
    </div>

CCS

#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}

20、子比主题日间、夜间模式切换提示

这个一共需要两个代码，跟着我步骤走，一个是JS引入的文件代码，一个是JS代码。

代码部署

JS引入

JS代码

这个是JS链接引入，直接将下面的代码放到：子比主题->>自定义头部HTML代码即可

<script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.min.js"></script>

这个是JS代码，直接将下面的代码放到：子比主题->>自定义javascript代码即可

$(".toggle-theme").click(function() {var toggleThemeText = "当前为日间模式";if (!$("body").hasClass('dark-theme')) {toggleThemeText ="当前为夜间模式";}layer.msg(toggleThemeText, {time: 2000,anim: 1});});

21、子比主题鼠标选中文字颜色样式

这是一个鼠标选中网站文字进行变颜色的效果代码，喜欢的自行部署

将下面的代码放到：子比主题-自定义CSS样式即可！

::selection {
    background: transparent;
    color: #0045FF;
}

这个代码#0045FF是颜色代码，喜欢什么自己换一下颜色代码

最后修改：2024 年 11 月 21 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

WordPress子比美化教程（持续更新中）

admin • 2024 年 08 月 04 日

<p></p><h1 class="wp-block-heading">主题美化说明</h1><p></p><p></p><div class="wp-block-zibllblock-alert alert-dismissible fade in"><div class="alert jb-green" data-isclose="" role="alert"><strong>此页主题美化根据【子比主题】而来，可修改一下来提升个人博客的魅力</strong></div></div><p></p><p></p><ul class="wp-block-list">
<li>主题美化和小工具可能会引起一系列问题，如网站加载缓慢和CSS的全局污染等。美化前请一定要测试。</li>

<li>主题美化可能会修改主题文件。更新时，请及时备份主题美化文件，或收藏此站点，以免丢失部分主题页面或美化效果。</li>
</ul><p></p><p></p><div class="wp-block-zibllblock-alert alert-dismissible fade in"><div class="alert jb-yellow" data-isclose="" role="alert"><strong>不会的看下面</strong></div></div><p></p><p></p><ul class="wp-block-list">
<li>CSS 代码添加到后台：<mark><strong>子比主题设置—&gt;自定义代码—&gt;自定义 CSS 样式</strong></mark></li>

<li>JS 即 javascript 代码添加到：<strong>后台子比主题设置—&gt;自定义代码—&gt;自定义 javascript 代码</strong></li>

<li>没有特殊说明的小工具，自定义 HTML 小工具：<strong>添加网站后台—&gt;外观–&gt;小工具–&gt;点击【自定义 HTML】选择放置的位置—&gt;把代码复制进去，保存即可</strong></li>

<li>其他添加方式的，我会在教程里告知，若只需添加 CSS+JS 的教程，我可能不重复告知了，请注意看上面的方法。</li>

<li>有些美化教程本站已经发布的，本文章将不再进行编写教程，直接跳转到文章页面。</li>
</ul><p></p><p></p><div class="wp-block-zibllblock-alert alert-dismissible fade in"><div class="alert jb-blue" data-isclose="" role="alert"><strong>更新站长推荐的美化，让子比更炫起来！！</strong></div></div><p></p><p></p><div class="wp-block-zibllblock-collapse"><div class="panel" data-theme="panel" data-isshow="false"><div class="panel-heading collapsed" href="#collapse_10246" data-toggle="collapse" aria-controls="collapseExample"><i class="fa fa-plus"></i><strong class="biaoti ">1、<strong><strong>首页文章列表悬停上浮代码</strong></strong></strong></div><div class="collapse " id="collapse_10246"><div class="panel-body"><p></p><figure class="wp-block-image size-full"><img src="https://blog.nbuu.cc/wp-content/uploads/2024/08/微信图片_20240804032146.png" alt="" class="wp-image-346" style=""></figure><p></p><p></p><pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">/*首页文章列表悬停上浮开始*/
@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);}}
/*首页文章列表悬停上浮结束*/</code></pre><p></p></div></div></div></div><p></p><p></p><div class="wp-block-zibllblock-collapse"><div class="panel" data-theme="panel" data-isshow="false"><div class="panel-heading collapsed" href="#collapse_18029" data-toggle="collapse" aria-controls="collapseExample"><i class="fa fa-plus"></i><strong class="biaoti ">2、<strong><strong>文章底部添加最后更新时间或过期失效提示</strong></strong></strong></div><div class="collapse " id="collapse_18029"><div class="panel-body"><p></p><p><strong>1.将下面的 PHP 代码加入到主题目录下：themes/zibll/functions.php 文件中。</strong></p><p></p><p></p><pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">//文章过期提示开始
function article_time_update() {
    date_default_timezone_set('PRC');
    $newdate=time();
    $updated_date = get_the_modified_time('Y-m-d H:i:s');
    $updatetime=strtotime($updated_date);
    $custom_content = '';
    if ( $newdate > $updatetime+86400) {
    $custom_content= '&lt;div class="article-timeout">&lt;strong>&lt;i class="fa fa-bell" aria-hidden="true">&lt;/i> 温馨提示：&lt;/strong>本文最后更新于&lt;code>'. $updated_date . '&lt;/code>，某些文章具有时效性，若有错误或已失效，请在下方&lt;a href="#comment">留言&lt;/a>或联系&lt;a target="_blank" title="觅知博客" href="http://wpa.qq.com/msgrd?v=3&amp;uin=1426239465&amp;site=qq&amp;menu=yes">&lt;b>觅知社长&lt;/b>&lt;/a>。&lt;/div >';
    }
        echo $custom_content;
    }
//文章过期提示结束</code></pre><p></p><p></p><p><strong>2.在主题目录themes/zibll/inc/functions/zib-single.php 文件中，文章分页函数（我的是在 317 行，因为我的代码有改动，所有不确定行数，见下图）搜索文章分页或者添加钩子，下面添加下方代码即可。</strong></p><p></p><p></p><p><strong>PHP代码</strong></p><p></p><p></p><pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">article_time_update();//文章过期提示</code></pre><p></p><p></p><figure class="wp-block-image size-full"><img src="https://blog.nbuu.cc/wp-content/uploads/2024/08/17007179602023112305392053.jpg" alt="" class="wp-image-347" style=""></figure><p></p><p></p><p><strong>3.CSS 代码：（在自定义 CSS 样式添加下面代码）</strong></p><p></p><p></p><pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">/*过期文章提示样式*/
.article-timeout{position:relative; border-radius: 8px; position: relative; margin-bottom: 25px; padding: 10px; background-color: var(--body-bg-color);}</code></pre><p></p><p></p><p><strong>效果图</strong></p><p></p><p></p><figure class="wp-block-image size-full"><img src="https://blog.nbuu.cc/wp-content/uploads/2024/08/17007179902023112305395037.jpg" alt="" class="wp-image-348" style=""></figure><p></p></div></div></div></div><p></p><p></p><div class="wp-block-zibllblock-collapse"><div class="panel" data-theme="panel" data-isshow="false"><div class="panel-heading collapsed" href="#collapse_14976" data-toggle="collapse" aria-controls="collapseExample"><i class="fa fa-plus"></i><strong class="biaoti ">3、<strong><strong>子比主题外链修改 go 外链跳转页面</strong></strong></strong></div><div class="collapse " id="collapse_14976"><div class="panel-body"><p></p><h3 class="wp-block-heading">第一个样式</h3><p></p><p></p><p>主题目录下<strong>go.php</strong>文件里面的全部代码清空，然后把下面的代码复制进去即可。替换原来的即可。<br />更新主题和修改前记得备份<strong>go.php。</strong></p><p></p><p></p><div data-type="logged" class="wp-block-zibllblock-hide-content"><span>[hidecontent type="logged"]</span></p><pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;?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);
    $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('&amp;', '&amp;', $url);
?>
&lt;html>

&lt;head>
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    &lt;meta name="robots" content="noindex, nofollow" />
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    &lt;?php echo "&lt;link rel='apple-touch-icon-precomposed icon' href='" . _pz('iconpng') . "' type='image/x-icon'/>"; ?>
    &lt;noscript>
        &lt;meta http-equiv="refresh" content="1;url='&lt;?php echo $url; ?>';">
    &lt;/noscript>
    &lt;script>
        function link_jump() {
            //禁止其他网站使用我们的跳转页面
            var MyHOST = new RegExp("&lt;?php echo $_SERVER['HTTP_HOST']; ?>");
            if (!MyHOST.test(document.referrer)) {
                location.href = "//" + MyHOST;
            }
            location.href = "&lt;?php echo $url; ?>";
        }
        //延时10S跳转，可自行修改延时时间
        setTimeout(link_jump, 10000);
        //延时50S关闭跳转页面，用于文件下载后不会关闭跳转页的问题
        setTimeout(function() {
            window.opener = null;
            window.close();
        }, 50000);
    &lt;/script>
    &lt;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">
    &lt;title>
        &lt;?php echo $title; ?>
    &lt;/title>
    &lt;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}
        .tengfei-go-main{display:flex;width:100%;height:100%;justify-content:center;align-items:center}
        .tengfei-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)}
        .tengfei-go-content a{color:#036af4}
        .tengfei-go-content a:hover{color:#e91e63}
        .tengfei-go-logo{text-align:center;width:auto;height:65px;margin-bottom:10px}
        .tengfei-go-logo img{max-width:100%;height:100%}
        .tengfei-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}
        .tengfei-go-button-item{text-align:right}
        .tengfei-go-button{display:inline-block;border-radius:99px;padding:10px 15px;background:rgba(116,116,116,.1);transition:all .5s}
        .tengfei-go-button a{font-weight:700;font-size:14px;color:#333}
        .tengfei-go-button:hover{color:#000;background:rgba(116,116,116,.2)}
        .tengfei-goid-item{position:absolute;top:10px;left:10px;border-radius:4px;overflow:hidden;background:#ffd07c}
        .tengfei-goid-title{padding:0 4px;background:#ffa400}
        .tengfei-goid-text{padding-right:5px}
        .tengfei-go-container hr{border: 0;height: 0.05em;background: #eee;}
    &lt;/style>
&lt;/head>

&lt;body>
    &lt;div class="tengfei-go-main">
        &lt;div class="tengfei-go-container">
            &lt;div class="tengfei-goid-item">
                &lt;b class="tengfei-goid-title">GID&lt;/b>
                &lt;span class="tengfei-goid-text">LINK&lt;?php echo hexdec($url); ?>&lt;/span>
            &lt;/div>
            &lt;div class="tengfei-go-logo">
                &lt;?php echo zib_get_adaptive_theme_img(_pz('logo_src'), _pz('logo_src_dark')); ?>
            &lt;/div>
            &lt;div class="tengfei-go-content">
                &lt;div class="tengfei-go-msg">
                    &lt;span>&lt;i class="fa fa-exclamation-triangle" aria-hidden="true">&lt;/i> 您即将离开&lt;?php echo $wiiui_title; ?>，请注意您的账号和财产安全。&lt;/span>
                &lt;/div>
                &lt;p>访问链接：&lt;a onclick="location.replace('&lt;?php echo $url; ?>')" title="&lt;?php echo $url; ?>">&lt;?php echo $url; ?>&lt;/a>&lt;/p>
            &lt;/div>
            &lt;hr>
            &lt;div class="tengfei-go-button-item">
                &lt;div class="tengfei-go-button">
                    &lt;a onclick="location.replace('//&lt;?php echo $_SERVER['HTTP_HOST']; ?>')">返回首页&lt;/a>
                &lt;/div>
                &lt;div class="tengfei-go-button">
                    &lt;a onclick="location.replace('&lt;?php echo $url; ?>')">继续访问&lt;/a>
                &lt;/div>
            &lt;/div>
        &lt;/div>
    &lt;/div>
&lt;/body>

@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'];
}
?>
&lt;html>

&lt;head>
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    &lt;meta name="robots" content="noindex, nofollow" />
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    &lt;noscript>
        &lt;meta http-equiv="refresh" content="1;url='&lt;?php echo $url; ?>';">
    &lt;/noscript>
    &lt;script>
        function link_jump() {
            //禁止其他网站使用我们的跳转页面
            var MyHOST = new RegExp("&lt;?php echo $_SERVER['HTTP_HOST']; ?>");
            if (!MyHOST.test(document.referrer)) {
                location.href = "http://" + MyHOST;
            }
            location.href = "&lt;?php echo $url; ?>";
        }
        //延时1S跳转，可自行修改延时时间
        setTimeout(link_jump, 1500);
        //延时50S关闭跳转页面，用于文件下载后不会关闭跳转页的问题
        setTimeout(function() {
            window.opener = null;
            window.close();
        }, 50000);
    &lt;/script>
  
    &lt;/div>
 
&lt;title>&lt;?php echo $title;?>&lt;/title>
&lt;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)); } } ) }&lt;/style>&lt;/head>
  &lt;body>
    &lt;css-doodle use="var(--rule)">&lt;/css-doodle>
    &lt;script src='https://cdn.ly522.com/js/go-min.js'>&lt;/script>
&lt;/body>

&lt;/html></code></pre><p><span>[/hidecontent]</span></div><p></p><p></p><figure class="wp-block-image size-full"><img src="https://blog.nbuu.cc/wp-content/uploads/2024/08/17007181202023112305420098.jpg" alt="" class="wp-image-350" style=""></figure><p></p></div></div></div></div><p></p><p></p><div class="wp-block-zibllblock-collapse"><div class="panel" data-theme="panel" data-isshow="false"><div class="panel-heading collapsed" href="#collapse_17116" data-toggle="collapse" aria-controls="collapseExample"><i class="fa fa-plus"></i><strong class="biaoti ">4、<strong><strong>子比主题子比主题文章标签美化</strong></strong></strong></div><div class="collapse " id="collapse_17116"><div class="panel-body"><p></p><p>复制CSS代码到后台子比主题设置—》自定义CSS样式—》将CSS代码粘贴框里，即可完成。</p><p></p><p></p><h2 class="wp-block-heading" id="wznav_6">CSS代码</h2><p></p><p></p><pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">/*文章随机彩色标签*/
.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}</code></pre><p></p><p></p><figure class="wp-block-image size-full"><img src="https://blog.nbuu.cc/wp-content/uploads/2024/08/17007181732023112305425361.jpg" alt="" class="wp-image-353" style=""></figure><p></p></div></div></div></div><p></p><p></p><div class="wp-block-zibllblock-collapse"><div class="panel" data-theme="panel" data-isshow="false"><div class="panel-heading collapsed" href="#collapse_12657" data-toggle="collapse" aria-controls="collapseExample"><i class="fa fa-plus"></i><strong class="biaoti ">5、<strong><strong>子比主题添加热门标签页面</strong></strong></strong></div><div class="collapse " id="collapse_12657"><div class="panel-body"><p></p><h2 class="wp-block-heading" id="wznav_7">教程如下</h2><p></p><p></p><p>1、进入子比主题目录—&gt;<strong>pages</strong>这个目录下创建PHP文件，然后把下面的代码添加进去。</p><p></p><p></p><div data-type="logged" class="wp-block-zibllblock-hide-content"><span>[hidecontent type="logged"]</span></p><pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;?php

/**
 * Template name: tengfei-热门标签页面
 * Description:   tengfei - Hot_Tags
 */

// 获取链接列表
get_header();
$header_style = zib_get_page_header_style();
?>
&lt;main class="container">
    &lt;div class="content-wrap">
        &lt;div class="content-layout">
            &lt;?php while (have_posts()) : the_post(); ?>
                &lt;?php if ($header_style != 1) {
                    echo zib_get_page_header();
                } ?>
                &lt;div class="box-body theme-box radius8 main-bg main-shadow">
                    &lt;?php if ($header_style == 1) {
                        echo zib_get_page_header();
                    } ?>
                    &lt;div class="tagslist tags-page wrapper">
                        &lt;ul>
                          &lt;?php 
                            $tags_count = 60;
                            $tagslist = get_tags('orderby=count&amp;order=DESC&amp;number='.$tags_count);
                            foreach($tagslist as $tag) {
                              echo '&lt;li style="list-style-type:none;">&lt;a class="name box b2-radius b2-mg" href="'.get_tag_link($tag).'">&lt;h2>'. $tag->name .'&lt;/h2>&lt;small>&lt;/br>&lt;p>共'. $tag->count .'篇文章&lt;/p>&lt;/a>&lt;/li>';} 
                          ?>
                        &lt;/ul>
                    &lt;/div>
                    &lt;?php wp_link_pages('link_before=&lt;span>&amp;link_after=&lt;/span>&amp;before=&lt;div class="article-paging">&amp;after=&lt;/div>&amp;next_or_number=number'); ?>
                &lt;?php endwhile;  ?>
                &lt;/div>
                &lt;?php comments_template('/template/comments.php', true); ?>
        &lt;/div>
    &lt;/div>
    &lt;?php get_sidebar(); ?>
&lt;!--CSS样式-->
  &lt;style type="text/css">
 .wrapper{/*width: 1142px; max-width: 100%;*/ margin: 0 auto; padding: 0;} .b2-mg{margin: 16px;} .b2-radius{border-radius: 5px;} .box,.side-fixed{background-color: #fff;-webkit-transition: all .2s cubic-bezier(.455,.03,.515,.955); -webkit-box-shadow: 0 0 22px -12px rgba(0,36,100,.3);-moz-box-shadow:0 0 22px -12px rgba(0,36,100,.3);box-shadow: 0 0 22px -12px rgba(0,36,100,.3)box-shadow: 0 0 0 1px #ebebed;box-shadow: 0 1px 3px rgba(26,26,26,.1);box-shadow: 0px 5px 40px -1px rgba(2, 10, 18, 0.1);}/*标签页面*/.tags-page ul{display: flex; flex-flow: wrap;}.tags-page ul li{width: 16.66667%;}.tags-page ul li a{display: block; padding: 20px 10px; text-align: center; border-radius: 10px;}.tags-page ul li a{background-color: #FF6666; border: 2px solid rgba(255, 255, 255, 0);}.tags-page ul li a:hover{box-shadow: 0 3px 10px #ccc; border: 2px solid #fff;}.tags-page ul li:nth-child(7n + 2) a{background-color: #FF9900;}.tags-page ul li:nth-child(7n + 3) a{background-color: #339966;}.tags-page ul li:nth-child(7n + 4) a{background-color: #339999;}.tags-page ul li:nth-child(7n + 5) a{background-color: #6699CC;}.tags-page ul li:nth-child(7n + 6) a{background-color: #8f82bc;}.tags-page ul li:nth-child(7n + 7) a{background-color: #FF99CC;}.tags-page ul li h2{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; height: 25px; overflow: hidden; margin-bottom: -20px; font-weight: 700; font-size: 17px; color: #fff;}.tags-page ul li p{font-size: 12px; color: rgba(255, 255, 255, 0.63);}.tags-page h1{font-size: 28px; text-align: center; margin: 30px 0;}@media screen and (max-width: 768px){.tags-page ul li{width: 50%;} .tags-page h1{margin: 20px 0;} .tags-page ul li a{padding: 10px 5px;}}.b2-radius:not(article){transition: all 0.3s;}.b2-radius:not(article):hover{transform: translateY(-10px);}
  &lt;/style>
&lt;/main>
&lt;?php
get_footer();</code></pre><p><span>[/hidecontent]</span></div><p></p><p></p><p>2、把上面的代码添加进行保存后，进入到后台—&gt;页面—&gt;新建页面—-&gt;选择热门标签页面即可使用。</p><p></p><p></p><p>3、如果懒得创建添加PHP文件的话，可以下载下面我创建好的PHP文件，上传到子比主题的pages这个目录下，然后按照第2点进行创建页面就好了</p><p></p><p></p><figure class="wp-block-image size-full"><img src="https://blog.nbuu.cc/wp-content/uploads/2024/08/17007182392023112305435936.jpg" alt="" class="wp-image-354" style=""></figure><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div></div></div></div><p></p><p><br />
<br />
</p><p></p><div class="wp-block-zibllblock-collapse"><div class="panel" data-theme="panel" data-isshow="false"><div class="panel-heading collapsed" href="#collapse_19944" data-toggle="collapse" aria-controls="collapseExample"><i class="fa fa-plus"></i><strong class="biaoti ">6、<strong><strong>文章列表右上角添加文章置顶+新文章发布ICON图标</strong></strong></strong></div><div class="collapse " id="collapse_19944"><div class="panel-body"><p></p><h2 class="wp-block-heading" id="wznav_8">PHP代码</h2><p></p><p></p><p>在子比主题目录下“<strong>func.php</strong>”(子比主题推荐放这里）或者“functions.php”，在合适位置放下面PHP代码</p><p></p><p></p><pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">/**
* 新文章发布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&lt;24){
        $wiui_new_icon = '&lt;div class="wiiuii-new-icon">&lt;img src="https://www.tfbkw.com/wp-content/uploads/2023/08/new.png" draggable="false" alt="最新文章" />&lt;/div>';
    }else if (is_sticky()){
        $wiui_new_icon = '&lt;div class="wiiuii-new-icon">&lt;img src="https://www.tfbkw.com/wp-content/uploads/2023/08/xin-top.png" draggable="false" alt="置顶文章" />&lt;/div>';
    }else{
        $wiui_new_icon = '';
    }
    //开始输出
    return $wiui_new_icon;
}</code></pre><p></p><p></p><p>上面《<strong>img</strong>》标签icon图标链接自己修改。</p><p></p><p></p><p><strong>最关键的PHP代码及放置位置</strong></p><p></p><p></p><p>在子比主题目录下“<strong>/zibll/inc/functions/zib-posts-list.php</strong>”文件中，大概440行的文章放入下面PHP代码（看图）</p><p></p><p></p><pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">$html .= wiiuii_post_newicon($post);//新文章+置顶文章icon图标函数</code></pre><p></p><p></p><figure class="wp-block-image size-full"><img src="https://blog.nbuu.cc/wp-content/uploads/2024/08/17007183772023112305461759.png" alt="" class="wp-image-357" style=""><figcaption class="wp-element-caption">放在第440行</figcaption></figure><p></p><p></p><p><strong>CSS代码</strong></p><p></p><p></p><pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">/*新文章发布图标样式*/
.posts-item{position: relative !important;}
.wiiuii-new-icon{position: absolute;height: 35px;right: 0;top: 0;}
.wiiuii-new-icon img{-webkit-user-drag: none;}</code></pre><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div></div></div></div><p></p><p></p><div class="wp-block-zibllblock-collapse"><div class="panel" data-theme="panel" data-isshow="false"><div class="panel-heading collapsed" href="#collapse_16051" data-toggle="collapse" aria-controls="collapseExample"><i class="fa fa-plus"></i><strong class="biaoti ">7、<strong><strong>手机左侧菜单添加背景图片</strong></strong></strong></div><div class="collapse " id="collapse_16051"><div class="panel-body"><p></p><p><strong>CSS代码</strong></p><p></p><p></p><pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">/*手机侧边栏背景图片*/
@media (max-width: 767px){
.mobile-navbar.show,.mobile-navbar.left{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
  background-image:linear-gradient(rgba(255, 255,255,0),rgba(255,255,255, 0.3)),url(https://picshack.net/ib/7Lm5teUTyV.jpg);}
  .mobile-nav-widget .box-body {
    background: var(--muted-border-color) !important;}
}</code></pre><p></p><p></p><p>这是一个简单的CSS代码，若要更换图片请将CSS图片里面的链接换成你自己的即可！！</p><p></p></div></div></div></div><p></p><p></p><div class="wp-block-zibllblock-collapse"><div class="panel" data-theme="panel" data-isshow="false"><div class="panel-heading collapsed" href="#collapse_18731" data-toggle="collapse" aria-controls="collapseExample"><i class="fa fa-plus"></i><strong class="biaoti ">8、<strong><strong>子比主题添加文章评论常用语功能</strong></strong></strong></div><div class="collapse " id="collapse_18731"><div class="panel-body"><p></p><h2 class="wp-block-heading" id="wznav_1">CSS代码</h2><p></p><p></p><p>在后台 &gt;&gt; Zibll主题设置 &gt;&gt; 全局&amp;功能 &gt;&gt; 自定义代码 &gt;&gt; 自定义CSS样式，添加如下CSS代码：</p><p></p><p></p><pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group=""> /*常用语样式*/
.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)}</code></pre><p></p><p></p><h2 class="wp-block-heading" id="wznav_2">javascript代码</h2><p></p><p></p><p>在后台 &gt;&gt; Zibll主题设置 &gt;&gt; 全局&amp;功能 &gt;&gt; 自定义代码 &gt;&gt; 自定义javascript代码，添加如下jQuery代码：</p><p></p><p></p><pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group=""> // 评论常用语
$('.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');
});</code></pre><p></p><p></p><h2 class="wp-block-heading" id="wznav_3">PHP代码</h2><p></p><p></p><p>第一步：在“<strong>../zibll/template/comments.php</strong>”子比主题的 <strong>template</strong>目录下“<strong>comments.php</strong>”文件，搜索 smilie 在上方位置添加如下代码：</p><p></p><p></p><figure class="wp-block-image size-full"><img src="https://blog.nbuu.cc/wp-content/uploads/2024/08/17007186482023112305504826.jpg" alt="" class="wp-image-362" style=""></figure><p></p><p></p><pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">// 常用语函数
if (_pz('comment_words', true)) {
echo zib_get_input_expand_but('wiui_words');
}</code></pre><p></p><p></p><pre class="wp-block-preformatted">}</pre><p></p><p></p><p>第二步：在“<strong>../zibll/inc/functions/functions.php</strong>”子比主题的 <strong>template</strong>目录下“<strong>functions.php</strong>”文件，搜索 smilie 在“<strong><mark>表情</mark></strong>”上方位置添加如下代码：</p><p></p><p></p><figure class="wp-block-image size-full"><img src="https://blog.nbuu.cc/wp-content/uploads/2024/08/17007186832023112305512328.jpg" alt="" class="wp-image-363" style=""></figure><p></p><p></p><pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">    // 常用语函数
    if ('wiui_words' == $type) {
        $but = '&lt;a class="but btn-input-expand mr6" href="javascript:;">&lt;i class="fa fa-fw fa-comment-o">&lt;/i>&lt;span class="hide-sm">常用语&lt;/span>&lt;/a>';
        // 下面是自定义常用语，自己自定义喜欢常用语，最好不超过10条
        $wiiuii_words_args = array('谢谢博主分享！', '博主NB，666', '感谢楼主分享！', '感谢大佬分享！', '教程很好用，谢谢！');
        foreach ($wiiuii_words_args as $wiiuii_word) {
            $wiui_word_index++;
            $wiui_words .= '&lt;li class="wiiuii-words-li">&lt;b>' . $wiui_word_index . '、&lt;/b>&lt;span>' .$wiiuii_word . '&lt;/span>' . '&lt;/li>';
        }
        $dropdown = '&lt;div class="dropdown-code">';
        $dropdown .= '&lt;span>请选择评论常用语：&lt;/span>';
        $dropdown .= '&lt;ul>';
        $dropdown .= $wiui_words;
        $dropdown .= '&lt;/ul>';
        $dropdown .= '&lt;/div>';
    }</code></pre><p></p></div></div></div></div><p></p><p></p><div class="wp-block-zibllblock-collapse"><div class="panel" data-theme="panel" data-isshow="false"><div class="panel-heading collapsed" href="#collapse_19224" data-toggle="collapse" aria-controls="collapseExample"><i class="fa fa-plus"></i><strong class="biaoti ">9、<strong><strong>文章底部加一个商业版权声明</strong></strong></strong></div><div class="collapse " id="collapse_19224"><div class="panel-body"><p></p><figure class="wp-block-image size-full"><img src="https://blog.nbuu.cc/wp-content/uploads/2024/08/微信截图_20240804034129.jpg" alt="" class="wp-image-365" style=""></figure><p></p><p></p><p>将下面代码放到<strong><mark>子比主题设置=&gt;&gt;文章列表=&gt;&gt;文章页面=&gt;&gt;在文章内容后-插入内容</mark></strong></p><p></p><p></p><pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;div class="shangye">本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负！&lt;/div></code></pre><p></p><p></p><p>将下面的代码放到自定义CSS即可实现</p><p></p><p></p><pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">.shangye {
    color: #fff;
    background: #5282f7 url(https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01BCJh7X1QbIi6fiBx8_!!2210123621994.png) 3px 7px no-repeat;
    border: 1px solid #5282f7;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 50px;
    border-radius: 4px;
}</code></pre><p></p></div></div></div></div><p></p><p></p><div class="wp-block-zibllblock-collapse"><div class="panel" data-theme="panel" data-isshow="false"><div class="panel-heading collapsed" href="#collapse_10204" data-toggle="collapse" aria-controls="collapseExample"><i class="fa fa-plus"></i><strong class="biaoti ">10、<strong><strong>网站全局或者首页加一个灰色悼念模式</strong></strong></strong></div><div class="collapse " id="collapse_10204"><div class="panel-body"><p></p><p>将代码放到自定义CSS样式即可</p><p></p><p></p><p>全局追悼CSS代码</p><p></p><p></p><pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">body > .header,
body > .container,
body > .footer
{
    -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
}</code></pre><p></p><p></p><p>首页追悼CSS代码</p><p></p><p></p><pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">html .home>.header,
html .home>.container,
html .home>.footer
{
    -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
}</code></pre><p></p></div></div></div></div><p></p><p><br />
<br />
</p><p></p><div class="wp-block-zibllblock-collapse"><div class="panel" data-theme="panel" data-isshow="false"><div class="panel-heading collapsed" href="#collapse_10942" data-toggle="collapse" aria-controls="collapseExample"><i class="fa fa-plus"></i><strong class="biaoti ">11、<strong><strong>网站文章侧边栏添加旗下站点小工具导航</strong></strong></strong></div><div class="collapse " id="collapse_10942"><div class="panel-body"><p></p><figure class="wp-block-image size-large"><img src="https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01pnR0ZJ1QbIi6oxhrD_!!2210123621994.gif" alt="" style=""></figure><p></p><p></p><p>1、将下面的代码添加在网站页脚底部或者在 wp 后台添加小工具，效果展示是一样的我是添加在小工具的<br />2、添加路径：在<strong><mark>后台—&gt;&gt;外观—&gt;&gt;小工具—&gt;&gt;自定义 HTML—&gt;&gt;</mark></strong> 选择你需要放的位置<br />3、我是添加在文章侧边栏<br />4、修改代码中的链接以及文字改为自己的</p><p></p><p></p><p></p><p></p><p></p><pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;div class="textwidget">&lt;div class="attentionus">&lt;span class="zhan-widget-link zhan-link-z1"> &lt;span class="zhan-widget-link-count">腾飞博客小工具1&lt;/span> &lt;a href="/" target="_blank" rel="noopener">&lt;span class="zhan-widget-link-title">视频&lt;/span> &lt;/a>&lt;/span>&lt;br />
&lt;span class="zhan-widget-link zhan-link-z2"> &lt;span class="zhan-widget-link-count">腾飞博客小工具2&lt;/span> &lt;a href="/" target="_blank" rel="noopener">&lt;span class="zhan-widget-link-title">视频解析&lt;/span> &lt;/a>&lt;/span>&lt;br />
&lt;span class="zhan-widget-link zhan-link-z3"> &lt;span class="zhan-widget-link-count">腾飞博客小工具3&lt;/span> &lt;a href="/" target="_blank" rel="noopener">&lt;span class="zhan-widget-link-title">电脑壁纸&lt;/span> &lt;/a>&lt;/span>&lt;br />
&lt;span class="zhan-widget-link zhan-link-z4"> &lt;span class="zhan-widget-link-count">腾飞博客小工具4&lt;/span> &lt;a href="/" target="_blank" rel="noopener">&lt;span class="zhan-widget-link-title">抖音去水印&lt;/span> &lt;/a>&lt;/span>&lt;br />
&lt;span class="zhan-widget-link zhan-link-z5"> &lt;span class="zhan-widget-link-count">腾飞博客小工具5&lt;/span> &lt;a href="/" target="_blank" rel="noopener">&lt;span class="zhan-widget-link-title">在线音乐搜索&lt;/span> &lt;/a>&lt;/span>&lt;/div>
&lt;style type="text/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}&lt;/style>
&lt;/div></code></pre><p></p></div></div></div></div><p></p><p></p><div class="wp-block-zibllblock-collapse"><div class="panel" data-theme="panel" data-isshow="false"><div class="panel-heading collapsed" href="#collapse_10516" data-toggle="collapse" aria-controls="collapseExample"><i class="fa fa-plus"></i><strong class="biaoti ">12、<strong><strong>两款子比主题翻页样式美化</strong></strong></strong></div><div class="collapse " id="collapse_10516"><div class="panel-body"><p></p><p><strong>第一款</strong></p><p></p><p></p><figure class="wp-block-image size-large"><img src="https://img.alicdn.com/imgextra/i2/2210123621994/O1CN013Akgkc1QbIhyTecQF_!!2210123621994.jpg" alt="" style=""></figure><p></p><p></p><p>将下面代码放到自定义CSS即可</p><p></p><p></p><pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">.pagenav, .pagenav .page-numbers, .pagenav a {
    border-radius: 50%;
}</code></pre><p></p><p></p><figure class="wp-block-image size-large"><img src="https://img.alicdn.com/imgextra/i1/2210123621994/O1CN01ko2K5g1QbIi6fwjTX_!!2210123621994.jpg" alt="" style=""></figure><p></p><p></p><p>将下面代码放到自定义CSS即可</p><p></p><p></p><pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">.pagenav .current, .pagenav .page-numbers, .pagenav a {
    border: 0;
    padding: 8px 14px;
    background: linear-gradient(148deg, hsla(0, 0%, 100%, 0), var(--main-bg-color));
    -webkit-box-shadow: 0 0 8px 0 rgba(95, 95, 95, .15);
    box-shadow: 0 0 8px 0 rgba(95, 95, 95, .15);
    border-radius: 6px;
}</code></pre><p></p><p></p><p><strong>注：当然两个代码都放在自定义CSS里面效果也是不错的</strong></p><p></p></div></div></div></div><p></p><p></p><div class="wp-block-zibllblock-collapse"><div class="panel" data-theme="panel" data-isshow="false"><div class="panel-heading collapsed" href="#collapse_11732" data-toggle="collapse" aria-controls="collapseExample"><i class="fa fa-plus"></i><strong class="biaoti ">13、<strong><strong>子比主题给文章内超链接加上波浪效果</strong></strong></strong></div><div class="collapse " id="collapse_11732"><div class="panel-body"><p></p><figure class="wp-block-image size-large"><img src="https://img.alicdn.com/imgextra/i4/2210123621994/O1CN01ljQzg71QbIi3ELeCk_!!2210123621994.gif" alt="" style=""></figure><p></p><p></p><div data-type="logged" class="wp-block-zibllblock-hide-content"><p><span>[hidecontent type="logged"]</span></p><p>放到后台自定义CSS即可</p><p></p><p></p><pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">/*超链接下波浪线*/
.wp-posts-content a:hover {color:#ff4500;text-decoration:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%23FF4500' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E")repeat-x 0 100%;background-size:20px auto;animation:waveMove 1s infinite linear}
@keyframes waveMove{from{background-position:0 100%}
to{background-position:-20px 100%}
}
/*超链接下波浪线结束*/</code></pre><p><span>[/hidecontent]</span></p></div><p></p><p></p><p></p><p></p><p></p><p></p><p></p></div></div></div></div><p></p><p></p><div class="wp-block-zibllblock-collapse"><div class="panel" data-theme="panel" data-isshow="false"><div class="panel-heading collapsed" href="#collapse_14990" data-toggle="collapse" aria-controls="collapseExample"><i class="fa fa-plus"></i><strong class="biaoti ">14、<strong><strong>子比主题LOGO扫光特效代码</strong></strong></strong></div><div class="collapse " id="collapse_14990"><div class="panel-body"><p></p><p>LOGO扫光我就不演示了，自己心里都知道，记录一下笔记</p><p></p><p></p><div data-type="logged" class="wp-block-zibllblock-hide-content"><p><span>[hidecontent type="logged"]</span></p><p>放到子比主题–&gt;&gt;自定义CSS即可</p><p></p><p></p><pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">/* 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;}}</code></pre><p><span>[/hidecontent]</span></p></div><p></p></div></div></div></div><p></p><p></p><div class="wp-block-zibllblock-collapse"><div class="panel" data-theme="panel" data-isshow="false"><div class="panel-heading collapsed" href="#collapse_16040" data-toggle="collapse" aria-controls="collapseExample"><i class="fa fa-plus"></i><strong class="biaoti ">15、<strong><strong>子比侧边栏添加一款粒子当前时间</strong></strong></strong></div><div class="collapse " id="collapse_16040"><div class="panel-body"><p></p><figure class="wp-block-image size-large"><img src="https://img.alicdn.com/imgextra/i4/2210123621994/O1CN01xIJ46u1QbIi94lV5k_!!2210123621994.gif" alt="" style=""></figure><p></p><p></p><p>后台设置—&gt;外观—&gt;小工具—&gt;添加自定义 HTML 代码，加到合适侧边栏即可</p><p></p><p></p><div data-type="logged" class="wp-block-zibllblock-hide-content"><p><span>[hidecontent type="logged"]</span></p><p>后台设置—&gt;外观—&gt;小工具—&gt;添加自定义 HTML 代码，加到合适侧边栏即可</p><p></p><p></p><pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;canvas id="canvas" style="width:100%;" width="820" height="2">&lt;/canvas>
&lt;script src="https://cdn.jsdelivr.net/gh/1426239465/98dou.cn/clock.js">&lt;/script></code></pre><p><span>[/hidecontent]</span></p></div><p></p></div></div></div></div><p></p><p><br />
<br />
</p><p></p><div class="wp-block-zibllblock-collapse"><div class="panel" data-theme="panel" data-isshow="false"><div class="panel-heading collapsed" href="#collapse_17004" data-toggle="collapse" aria-controls="collapseExample"><i class="fa fa-plus"></i><strong class="biaoti ">16、<strong><strong>子比主题侧边栏滚动播报小工具</strong></strong></strong></div><div class="collapse " id="collapse_17004"><div class="panel-body"><p></p><figure class="wp-block-image size-large"><img src="https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01ppWtvX1QbIi5Cj2wM_!!2210123621994.gif" alt="" style=""></figure><p></p><p></p><div data-type="logged" class="wp-block-zibllblock-hide-content"><p><span>[hidecontent type="logged"]</span></p><p>投放地方：后台—&gt;外观—&gt;小工具—&gt;自定义 HTML添加下面的代码，把它放在合适的位置</p><p></p><p></p><pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;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}
  }
      &lt;/style>
      &lt;div id="container-box-1">
  &lt;div class="container-box-1-1">&lt;svg class="icon" aria-hidden="true">&lt;use xlink:href="#iconxiangwenbiaoqing">&lt;/use>&lt;/svg> 坚持每天来逛逛，会让你 &lt;svg class="icon" aria-hidden="true">&lt;use xlink:href="#iconpaomeiyanbiaoqing">&lt;/use>&lt;/svg>&lt;/div>
  &lt;div id="flip-box-1">&lt;div>&lt;div class="flip-box-1-1">生活也美好了！&lt;/div>
  &lt;/div>&lt;div>&lt;div class="flip-box-1-2">心情也舒畅了！&lt;/div>&lt;/div>
  &lt;div>&lt;div class="flip-box-1-3">走路也有劲了！&lt;/div>&lt;/div>&lt;div>
    &lt;div class="flip-box-1-4">腿也不痛了！&lt;/div>&lt;/div>
    &lt;div>&lt;div class="flip-box-1-5">腰也不酸了！&lt;/div>&lt;/div>
  &lt;div>&lt;div class="flip-box-1-6">工作也轻松了！&lt;/div>&lt;/div>
  &lt;/div>&lt;div class="container-box-1-2">&lt;svg class="icon" aria-hidden="true">&lt;use xlink:href="#iconkaixinbiaoqing">&lt;/use>&lt;/svg> 你好我也好，不要忘记哦! &lt;svg class="icon" aria-hidden="true">&lt;use xlink:href="#icondaxiaobiaoqing">&lt;/use>&lt;/svg>&lt;/div>&lt;/div></code></pre><p><span>[/hidecontent]</span></p></div><p></p><p></p><p></p><p></p></div></div></div></div><p></p><p></p><div class="wp-block-zibllblock-collapse"><div class="panel" data-theme="panel" data-isshow="false"><div class="panel-heading collapsed" href="#collapse_12829" data-toggle="collapse" aria-controls="collapseExample"><i class="fa fa-plus"></i><strong class="biaoti ">17、<strong><strong>子比主题编辑器三点美化</strong></strong></strong></div><div class="collapse " id="collapse_12829"><div class="panel-body"><p></p><figure class="wp-block-image size-large"><img src="https://img.alicdn.com/imgextra/i4/2210123621994/O1CN01GhJ6aM1QbIiA70ido_!!2210123621994.jpg" alt="" style=""></figure><p></p><p></p><div data-type="logged" class="wp-block-zibllblock-hide-content"><p><span>[hidecontent type="logged"]</span></p><p><strong>将下面的代码放到：<strong><mark>子比主题=&gt;&gt;自定义CSS</mark></strong>样式里面即可</strong></p><p></p><p></p><pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">/*编辑器三点美化*/
.enlighter::before {
    content: "";
    display: block;
    background: #fc625d;
    top: 9px;
    left: 15px;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    margin: 0px 2px -7px;
    z-index: 1;
    position: absolute;
}
.enlighter-overflow-scroll.enlighter-v-standard .enlighter {
    padding: 35px 0 12px 0;
}</code></pre><p><span>[/hidecontent]</span></p></div><p></p><p></p><p></p><p></p></div></div></div></div><p></p><p></p><div class="wp-block-zibllblock-collapse"><div class="panel" data-theme="panel" data-isshow="false"><div class="panel-heading collapsed" href="#collapse_19871" data-toggle="collapse" aria-controls="collapseExample"><i class="fa fa-plus"></i><strong class="biaoti ">18、<strong><strong><strong>子比主题 – 文章版权声明样式美化</strong></strong></strong></strong></div><div class="collapse " id="collapse_19871"><div class="panel-body"><p></p><p>子比主题：<strong>WordPress后台</strong>&gt;&gt; <strong>主题设置</strong>&gt;&gt; <strong>文章&amp;列表</strong>&gt;&gt; <strong>文章页面</strong> &gt;&gt; 将代码添加到“<strong><mark>版权提示内容</mark></strong>”中</p><p></p><p></p><div class="mb20 post-tab nav-top"><div class="list-inline scroll-x mini-scrollbar tab-nav-theme"><li class="active"><a class="post-tab-toggle" href="javascript:;" tab-id="0">样式一</a></li><li class=""><a class="post-tab-toggle" href="javascript:;" tab-id="1">样式二</a></li><li class=""><a class="post-tab-toggle" href="javascript:;" tab-id="2">样式三</a></li><li class=""><a class="post-tab-toggle" href="javascript:;" tab-id="3">样式四</a></li><li class=""><a class="post-tab-toggle" href="javascript:;" tab-id="4">样式五</a></li><li class=""><a class="post-tab-toggle" href="javascript:;" tab-id="5">样式六</a></li></div><div class="tab-content"><p></p><div class="tab-pane fade active in" tab-id="0"><p></p><figure class="wp-block-image size-large is-resized"><img src="https://img.alicdn.com/imgextra/i3/2210123621994/O1CN01jr4Q9k1QbIiH1Zmrw_!!2210123621994.jpg" alt="" style="width:846px;height:auto" style=""></figure><p></p><p></p><div data-type="logged" class="wp-block-zibllblock-hide-content"><span>[hidecontent type="logged"]</span></p><pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;div class="posts-copyright">&lt;div class="entry-copyright px12">
&lt;!--腾飞博客版权样式一-->
    &lt;span class="badg badg-sm mr3 c-yellow">1&lt;/span> 如果您喜欢本站，&lt;a href="https://www.tfbkw.com/" style="color:#a102ff">        &lt;i class="wpcom-icon menu-item-icon">
            &lt;svg aria-hidden="true">&lt;use xlink:href="#icon-security-color">&lt;/use>&lt;/svg>
        &lt;/i>点击这儿
  &lt;/a>赞助下本站，感谢支持！&lt;br>
    &lt;span class="badg badg-sm mr3 c-red">2&lt;/span> 可能会帮助到你：
    &lt;a href="https://www.tfbkw.com/" style="color:#00aeff" title="开发工具" target="_blank">
        &lt;i class="wpcom-icon menu-item-icon">
            &lt;svg aria-hidden="true">&lt;use xlink:href="#icon-user-auth">&lt;/use>&lt;/svg>
        &lt;/i> 开发工具
    &lt;/a> | 
    &lt;a href="https://www.tfbkw.com/" style="color:red" title="解压资源" target="_blank">
        &lt;i class="wpcom-icon menu-item-icon">
            &lt;svg aria-hidden="true">&lt;use xlink:href="#icon-ontop-color">&lt;/use>&lt;/svg>
        &lt;/i> 解压资源
    &lt;/a> | 
    &lt;a href="https://www.tfbkw.com/" style="color:#ffbe02" title="进站必看" target="_blank">
        &lt;i class="wpcom-icon menu-item-icon">
            &lt;svg aria-hidden="true">&lt;use xlink:href="#icon-comment-color">&lt;/use>&lt;/svg>
        &lt;/i> 进站必看
    &lt;/a>&lt;br>
  &lt;span class="badg badg-sm mr3 c-purple">3&lt;/span> 如若转载，请注明文章出处：
    &lt;script>var url = window.location.href;document.write(document.URL);&lt;/script>&lt;/span>&lt;br>
    &lt;span class="badg badg-sm mr3 c-blue">4&lt;/span> 本站内容观点不代表本站立场，并不代表本站赞同其观点和对其真实性负责&lt;br>    
    &lt;span class="badg badg-sm mr3 c-green">5&lt;/span> 若作商业用途，请联系原作者授权，若本站侵犯了您的权益请
    &lt;a href="https://wpa.qq.com/msgrd?v=3&amp;uin=2296945504&amp;site=qq&amp;menu=yes" style="color:red" title="联系站长qq2296945504" target="_blank">
        &lt;i class="wpcom-icon menu-item-icon">
            &lt;svg aria-hidden="true">&lt;use xlink:href="#icon-qq-color">&lt;/use>&lt;/svg>
        &lt;/i> 联系站长
    &lt;/a> 进行删除处理
    &lt;br>
  &lt;span class="badg badg-sm mr3">6&lt;/span> 本站所有内容均来源于网络，仅供学习与参考，请勿商业运营，严禁从事违法、侵权等任何非法活动，否则后果自负&lt;br>
&lt;/div>&lt;/div></code></pre><p><span>[/hidecontent]</span></div><p></p></div><p></p><p></p><div class="tab-pane fade" tab-id="1"><p></p><figure class="wp-block-image size-large"><img src="https://img.alicdn.com/imgextra/i4/2210123621994/O1CN01Wora3l1QbIiKxJQmA_!!2210123621994.jpg" alt="" style=""></figure><p></p><p></p><div data-type="logged" class="wp-block-zibllblock-hide-content"><span>[hidecontent type="logged"]</span></p><pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;!--腾飞博客版权样式二 tfbkw.com-->&lt;div class="single-bottom-html mg-b box b2-radius">&lt;fieldset style="border: 8px dashed; background: #ffffff; padding: 10px; border-radius: 5px; line-height: 1.5em; color: #595959;" data-mce-style="border: 2px dashed; background: #ffffff; padding: 10px; border-radius: 5px; line-height: 1.5em; color: #595959;"> &lt;legend style="color: #ffffff; width: 30%; text-align: center; background-color: #e8b235; border-radius: 5px;" align="center" data-mce-style="color: #ffffff; width: 30%; text-align: center; background-color: #e8b235; border-radius: 8px;">重要声明&lt;/legend> &lt;fieldset style="border: 1px dashed #e8b235; padding: 10px; border-radius: 5px; line-height: 2em; font-size: 12px; color: #bdbdbd; text-align: center;" data-mce-style="border: 1px dashed #e8b235; padding: 10px; border-radius: 5px; line-height: 2em; font-size: 12px; color: #bdbdbd; text-align: center;"> &lt;p style="font-size: 12px; text-align: center;" data-mce-style="font-size: 12px; text-align: center;">&lt;span style="color: #000000;" data-mce-style="color: #000000;">本站资源大多来自网络，如有侵犯你的权益请联系管理员&lt;/span>&lt;span style="color: #000000;" data-mce-style="color: #000000;">E-mail:&lt;/span>&lt;span style="color: #ff6600;" data-mce-style="color: #ff6600;">tfblog@126.com&lt;/span> &lt;span style="color: #000000;" data-mce-style="color: #000000;">我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用，未经原版权作者许可,禁止用于任何商业途径！请在下载24小时内删除！&lt;/span>&lt;/p> &lt;hr> &lt;p style="font-size: 12px; text-align: center;" data-mce-style="font-size: 12px; text-align: center;">&lt;span style="color: #000000;" data-mce-style="color: #000000;">如果遇到&lt;/span>&lt;span style="color: #ff0000;" data-mce-style="color: #ff0000;">付费&lt;/span>&lt;span style="color: #000000;" data-mce-style="color: #000000;">才可&lt;/span>&lt;span style="color: #33cccc;" data-mce-style="color: #33cccc;">观看&lt;/span>&lt;span style="color: #000000;" data-mce-style="color: #000000;">的文章，建议升级&lt;/span>&lt;span style="color: #ff0000;" data-mce-style="color: #ff0000;">终身VIP。&lt;/span>&lt;span style="color: #000000;" data-mce-style="color: #000000;">全站所有资源&lt;/span>&lt;span style="color: #ff0000;" data-mce-style="color: #ff0000;">“&lt;span style="color: #3366ff;" data-mce-style="color: #3366ff;">任意下免费看&lt;/span>”。&lt;/span>&lt;span style="color: #ff9900;" data-mce-style="color: #ff9900;">本站资源少部分采用&lt;/span>&lt;span style="color: #00ccff;" data-mce-style="color: #00ccff;">7z压缩，&lt;/span>&lt;span style="color: #33cccc;" data-mce-style="color: #33cccc;">为防止有人压缩软件不支持7z格式&lt;/span>&lt;span style="color: #cc99ff;" data-mce-style="color: #cc99ff;">，7z&lt;/span>&lt;span style="color: #000000;" data-mce-style="color: #000000;">解压，建议下载&lt;/span>&lt;span style="color: #cc99ff;" data-mce-style="color: #cc99ff;">&lt;em>7-zip&lt;/em>&lt;/span>&lt;span style="color: #cc99ff;" data-mce-style="color: #cc99ff;">，zip、rar&lt;/span>&lt;span style="color: #000000;" data-mce-style="color: #000000;">解压，建议下载&lt;/span>&lt;span style="color: #cc99ff;" data-mce-style="color: #cc99ff;">&lt;em>WinRAR&lt;/em>&lt;/span>&lt;span style="color: #000000;" data-mce-style="color: #000000;">。&lt;/span>&lt;/p> &lt;/fieldset> &lt;/fieldset>&lt;/div></code></pre><p><span>[/hidecontent]</span></div><p></p></div><p></p><p></p><div class="tab-pane fade" tab-id="2"><p></p><figure class="wp-block-image size-large"><img src="https://blog.nbuu.cc/wp-content/uploads/2024/08/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20240804035526.jpg" alt="" style=""></figure><p></p><p></p><div data-type="logged" class="wp-block-zibllblock-hide-content"><span>[hidecontent type="logged"]</span></p><pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;head>
&lt;!--腾飞博客版权样式三 tfbkw.com-->
&lt;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}}
&lt;/style>
&lt;/head>
&lt;body>
    &lt;div class="post-copyright" style="max-width:800px;margin:0 auto;">
        &lt;div class="post-copyright__title" style="margin:10px 10px">&lt;span

class="post-copyright_title">&lt;strong>&lt;script>document.write

(document.title);&lt;/script>&lt;/strong>&lt;/span>&lt;/div>
        &lt;div class="post-copyright__type" style="margin:10px 10px">&lt;span

class="post-copyright_type">本文链接：&lt;script>var url =

window.location.href;document.write(document.URL);&lt;/script>&lt;/span>&lt;/div>
        &lt;div class="post-copyright-m">
            &lt;div class="post-copyright-m-info">
                &lt;div class="post-copyright-a">
                    &lt;strong>文章作者&lt;/strong>
                    &lt;div class="post-copyright-cc-info">
                        &lt;strong>&lt;a href="https://www.tfbkw.com/">腾飞博客&lt;/a>&lt;/strong>
                    &lt;/div>
                &lt;/div>
                &lt;div class="post-copyright-c" style="margin:10px 20px">
                    &lt;strong>隐私政策&lt;/strong>
                    &lt;div class="post-copyright-cc-info">
                        &lt;strong>&lt;a href="https://tfbkw.com/privacy"

target="_blank">PrivacyPolicy&lt;/a>&lt;/strong>
                    &lt;/div>
                &lt;/div>
                &lt;div class="post-copyright-u" style="margin:10px 20px">
                    &lt;strong>用户协议&lt;/strong>
                    &lt;div class="post-copyright-cc-info">
                        &lt;strong>&lt;a href="https://www.tfbkw.com/protocol"

target="_blank">UseGenerator&lt;/a>&lt;/strong>
                    &lt;/div>
                &lt;/div>
                &lt;div class="post-copyright-c" style="margin:10px 20px">
                    &lt;strong>许可协议 &lt;/strong>
                    &lt;div class="post-copyright-cc-info">
                        &lt;strong>&lt;a href="https://creativecommons.org/licenses/by-

nc-sa/4.0/" target="_blank">NC-SA 4.0&lt;/a>&lt;/strong>&lt;/div>
                &lt;/div>
            &lt;/div>
        &lt;/div>
    &lt;/div>
&lt;/body></code></pre><p><span>[/hidecontent]</span></div><p></p></div><p></p><p></p><div class="tab-pane fade" tab-id="3"><p></p><figure class="wp-block-image size-large"><img src="https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01jXHkOa1QbIiLtpRgL_!!2210123621994.jpg" alt="" style=""></figure><p></p><p></p><div data-type="logged" class="wp-block-zibllblock-hide-content"><span>[hidecontent type="logged"]</span></p><pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;!--腾飞博客版权样式四 tfbkw.com-->
  &lt;div>
    &lt;fieldset
      style="
        border: 1px dashed #008cff;
        padding: 10px;
        border-radius: 5px;
        line-height: 2em;
        color: #6d6d6d;
      "
    >
      &lt;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;" 
        "
      >
        文章版权声明
      &lt;/legend>
&lt;span class="btn-info btn-xs">1&lt;/span> 本网站名称：&lt;span style="color: #3333ff">&lt;span style="color: #09ace2; font-size: 18px">&lt;strong>腾飞博客&lt;/strong>&lt;/span>&lt;/span>&lt;br />
      &lt;span class="btn-info btn-xs">2&lt;/span> 本站永久网址：&lt;font color="#09ace2">https://www.tfbkw.com&lt;/font>&lt;br />
      &lt;span class="btn-info btn-xs">3&lt;/span> 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ&lt;a href="http://wpa.qq.com/msgrd?v=3&amp;uin=2296945504&amp;site=qq&amp;menu=yes" target="_blank">577669882&lt;/a>进行删除处理。&lt;br />
      &lt;span class="btn-info btn-xs">4&lt;/span> 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。&lt;br />
      &lt;span class="btn-info btn-xs">5&lt;/span> 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报&lt;br />
      &lt;span class="btn-info btn-xs">6&lt;/span> 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。&lt;br />
    &lt;/fieldset>
  &lt;/div>
  &lt;!--版权申明样式--></code></pre><p><span>[/hidecontent]</span></div><p></p></div><p></p><p></p><div class="tab-pane fade" tab-id="4"></p><div data-type="logged" class="wp-block-zibllblock-hide-content"><span>[hidecontent type="logged"]</span></p><pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;div class="posts-copyright">&lt;div class="box">
    &lt;!--腾飞博客版权样式五-->
    &lt;b class="lurenfen">&lt;p>本站收集的资源仅供内部学习研究软件设计思想和原理使用，学习研究后请自觉删除，请勿传播，因未及时删除所造成的任何后果责任自负。&lt;/p>
&lt;p>如果用于其他用途，请购买正版支持作者，谢谢！若您认为「TFBKW.COM」发布的内容若侵犯到您的权益，请联系站长邮箱:tfblog@126.com 进行删除处理。&lt;/p>
本站资源大多存储在云盘，如发现链接失效，请联系我们，我们会第一时间更新。
   &lt;/b>
  &lt;/div>
&lt;style type="text/css"> 
.box
{
  position: relative;
  padding: 10px; 
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 20px;
}
.box:before
{
  content: '';
  position: absolute;
  width: 150%;
  height: 50%;
  background: linear-gradient(315deg,#00ccff,#d400d4);
  animation: animate 6s linear infinite
}
@keyframes animate 
{
  0%
  {
    transform: rotate(0deg);
  }
  100%
  {
    transform: rotate(360deg);
  }
}
.box:after
{
  content: '';
  position: absolute;
  inset : 6px;
  background: var(--body-bg-color);
  border-radius: 15px;
  z-index: 2;
}
.lurenfen
{
  position: relative;
  font-weight: normal;
  color: #2997f7;
  z-index: 4;
  margin:15px;
}

&lt;/style>&lt;/div></code></pre><p><span>[/hidecontent]</span></div><p></div><p></p><p></p><div class="tab-pane fade" tab-id="5"><p></p><figure class="wp-block-image size-large"><img src="https://img.alicdn.com/imgextra/i2/2210123621994/O1CN01NdagHt1QbIiqfmtxx_!!2210123621994.jpg" alt="" style=""></figure><p></p><p></p><div data-type="logged" class="wp-block-zibllblock-hide-content"><span>[hidecontent type="logged"]</span></p><pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;!--腾飞博客版权样式六 tfbkw.com-->
&lt;div class="posts-copyright">
    &lt;fieldset style="padding: 10px;border-radius: 5px;line-height: 2em;font-weight: 700;color: var(--key-color);background-color: var(--body-bg-color);">
    &lt;legend align="center" style="margin-bottom: -2px;width: 30%;text-align: center;background-color: #3c59eb;border-radius: 10px;border: 0px dashed #3c59eb;font-size: 16px; color: #ffffff;">
        版权声明
    &lt;/legend>
    &lt;span class="btn-info btn-xs" style="background-color: #3c59eb;">1&lt;/span> 本站名称：&lt;span style="color: #f7dbdb;">&lt;span style="color: #3c59eb;">
        &lt;strong>腾飞博客&lt;/strong>
    &lt;/span>
&lt;/span>
&lt;br>
    &lt;span class="btn-info btn-xs" style="background-color: #3c59eb;">2&lt;/span> 本站网址：&lt;font color="#3c59eb">www.tfbkw.com&lt;/font>&lt;br>
    &lt;span class="btn-info btn-xs" style="background-color: #3c59eb;">3&lt;/span> 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。&lt;br>
    &lt;span class="btn-info btn-xs" style="background-color: #3c59eb;">4&lt;/span> 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。&lt;br>
        &lt;span class="btn-info btn-xs" style="background-color: #3c59eb;">5&lt;/span> 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。&lt;br>
        &lt;span class="btn-info btn-xs" style="background-color: #3c59eb;">6&lt;/span> 本站附件资源、教程等内容如因时效原因失效或不可用，请评论区留言或联系站长及时更新。&lt;br>
&lt;/fieldset>
&lt;/div>
&lt;!--腾飞博客版权样式六 tfbkw.com--></code></pre><p><span>[/hidecontent]</span></div><p></p></div><p></p></div></div><p></p></div></div></div></div><p></p><p></p><div class="wp-block-zibllblock-collapse"><div class="panel" data-theme="panel" data-isshow="false"><div class="panel-heading collapsed" href="#collapse_15952" data-toggle="collapse" aria-controls="collapseExample"><i class="fa fa-plus"></i><strong class="biaoti ">19、<strong><strong>子比主题 – 在线投稿联系方式小工具模块</strong></strong></strong></div><div class="collapse " id="collapse_15952"><div class="panel-body"><p></p><figure class="wp-block-video"></figure><p></p><p></p><h1 class="wp-block-heading" id="wznav_0">使用教程</h1><p></p><p></p><ul class="wp-block-list">
<li>将下面的代码添加在 WordPress 后台小工具，效果展示是一样的</li>

<li>添加路径：<strong><mark>后台 &gt;&gt; 外观 &gt;&gt; 小工具 &gt;&gt; 自定义 HTML</mark></strong> &gt;&gt; 选择你需要放的位置</li>
</ul><p></p><p></p><h3 class="wp-block-heading">HTML</h3><p></p><p></p><pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;div class="zib-widget widget_text">
    &lt;div id="update_version">
    &lt;a href="/" target="_blank" rel="noopener">&lt;img title="腾飞博客" src="https://www.tfbkw.com/wp-content/uploads/2024/05/20240524203517214-tougao.webp" alt="图片" style="border-radius:5px;">&lt;/a>
    &lt;a class="blog_link" href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=tfblog@126.com" target="_blank" style="background-image: linear-gradient(120deg, #3ca5f6 0%, #a86af9 100%);" rel="noopener">站长邮箱&lt;/a>
    &lt;a class="cms_link" href="/" target="_blank" style="background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);" rel="noopener">在线投稿&lt;/a>
    &lt;a class="grid_link" href="/" target="_blank" style="background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);" rel="noopener">友情链接&lt;/a>
    &lt;/div>
    &lt;div>
    &lt;hr>
    &lt;/div>
    &lt;/div></code></pre><p></p><p></p><h3 class="wp-block-heading">CCS</h3><p></p><p></p><pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">#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}</code></pre><p></p></div></div></div></div><p></p><p></p><div class="wp-block-zibllblock-collapse"><div class="panel" data-theme="panel" data-isshow="false"><div class="panel-heading collapsed" href="#collapse_12096" data-toggle="collapse" aria-controls="collapseExample"><i class="fa fa-plus"></i><strong class="biaoti ">20、<strong><strong>子比主题日间、夜间模式切换提示</strong></strong></strong></div><div class="collapse " id="collapse_12096"><div class="panel-body"><p></p><p>这个一共需要两个代码，跟着我步骤走，一个是JS引入的文件代码，一个是JS代码。</p><p></p><p></p><h1 class="wp-block-heading">代码部署</h1><p></p><p></p><div class="mb20 post-tab nav-top"><div class="list-inline scroll-x mini-scrollbar tab-nav-theme"><li class="active"><a class="post-tab-toggle" href="javascript:;" tab-id="0">JS引入</a></li><li class=""><a class="post-tab-toggle" href="javascript:;" tab-id="1">JS代码</a></li></div><div class="tab-content"><p></p><div class="tab-pane fade active in" tab-id="0"><p></p><p>这个是JS链接引入，直接将下面的代码放到：<strong><mark>子比主题-&gt;&gt;自定义头部HTML</mark></strong>代码即可</p><p></p><p></p><pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.min.js">&lt;/script></code></pre><p></p></div><p></p><p></p><div class="tab-pane fade" tab-id="1"><p></p><p>这个是JS代码，直接将下面的代码放到：<strong><mark>子比主题-&gt;&gt;自定义javascript代码</mark></strong>即可</p><p></p><p></p><pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">$(".toggle-theme").click(function() {var toggleThemeText = "当前为日间模式";if (!$("body").hasClass('dark-theme')) {toggleThemeText ="当前为夜间模式";}layer.msg(toggleThemeText, {time: 2000,anim: 1});});</code></pre><p></p></div><p></p></div></div><p></p></div></div></div></div><p></p><p><br />
<br />
</p><p></p><div class="wp-block-zibllblock-collapse"><div class="panel" data-theme="panel" data-isshow="false"><div class="panel-heading collapsed" href="#collapse_12613" data-toggle="collapse" aria-controls="collapseExample"><i class="fa fa-plus"></i><strong class="biaoti ">21、<strong><strong>子比主题鼠标选中文字颜色样式</strong></strong></strong></div><div class="collapse " id="collapse_12613"><div class="panel-body"><p></p><p>这是一个鼠标选中网站文字进行变颜色的效果代码，喜欢的自行部署</p><p></p><p></p><figure class="wp-block-image size-large"><img src="https://img.alicdn.com/imgextra/i3/2210123621994/O1CN01pd0F8P1QbIjJFpQNr_!!2210123621994.gif" alt="" style=""></figure><p></p><p></p><p>将下面的代码放到：<strong>子比主题-自定义CSS样式</strong>即可！</p><p></p><p></p><pre class="wp-block-zibllblock-enlighter"><code class="gl" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">::selection {
    background: transparent;
    color: #0045FF;
}</code></pre><p></p><p></p><p>这个代码<strong><code>#0045FF</code></strong>是颜色代码，喜欢什么自己换一下颜色代码</p><p></p></div></div></div></div><p></p><p></p><p></p><p></p><p></p><div class="wp-block-zibllblock-alert alert-dismissible fade in"><div class="alert jb-blue" data-isclose="" role="alert"></div></div><p></p>

主题美化说明

第一个样式

第二个样式

CSS代码

教程如下

PHP代码

CSS代码

javascript代码

PHP代码

使用教程

HTML

CCS

代码部署

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

WordPress子比美化教程（持续更新中）

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款