子比主题美化与功能增强教程-尐菟姫

前言

本教程汇集了针对 WordPress 子比主题的免费美化代码与功能实现。在进行任何修改前，请务必备份网站文件和数据库，以免操作失误导致网站无法访问。以下代码主要涉及 functions.php、footer.php 及 CSS 样式的调整。

1. 评论夸夸功能

该功能允许用户在评论时随机获取一句夸奖文案。需要修改主题函数文件和评论模板。

步骤一： 将以下 PHP 代码添加到主题的 functions.php 文件中（请替换代码中的 API 地址和 SVG 地址）：

function kuakua(){
    echo '<link rel="stylesheet" type="text/css" href="这里放CSS文件路径">
    <a class="but btn-input-expand input-image mr6" id="kuakua" href="javascript:;">
        <svg class="icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" role="img"><image href="svg地址" width="14px" height="14px" /></svg>
        <span class="hide-sm">夸夸</span>
    </a>
    <div class="kuakua-div" style="width: 9999px;height: 99999px;background: #000;z-index: 1031;position: fixed;top: 0;left: 0;opacity:.6;display:none"></div>
    <div class="kuakua-first-box">
        <div class="kuakua-ei">
            <span class="kuakua-close" title="关闭">×</span>
            <div class="kuakua-column">
                <section class="kuakua-headerIcon"><svg class="icon kuakua-icon" aria-hidden="true"><image href="svg地址" width="65px" height="60px" /></svg></section>
                <span class="kuakua-headerTitle">夸夸</span>
            </div>
            <div class="kuakua-modal-body">
                <section class="kuakua-contentBox">
                    <span class="kuakua-comment">还有吗！没看够！</span>
                    <button type="button" class="kuakua-cancelBtn">换一换</button>
                </section>
                <button type="button" class="kuakua-confirmBtn">夸夸TA</button>
            </div>
        </div>
    </div>
    <script>
        $(function(){
            $(".kuakua-cancelBtn").click(function() {
                $.getJSON("api地址",function(data){
                    $(".kuakua-comment").html(data.text);
                    $("#comment").text(data.text);
                });
            });
            $(".kuakua-confirmBtn").click(function() {
                $("#submit").trigger("click");
                $(".kuakua-first-box").hide(150);
                $(".kuakua-div").hide(150);
            });
            $("#kuakua").click(function (e) {
                $(".kuakua-first-box").show(150);
                $(".kuakua-div").show(150);
                $.getJSON("api地址",function(data){
                    $(".kuakua-comment").html(data.text);
                    $("#comment").text(data.text);
                });
                e.stopPropagation();
            });
            $(".kuakua-close").click(function () {
                $(".kuakua-first-box").hide(150);
                $(".kuakua-div").hide(150);
                $("#comment").text("");
            });
        });
    </script>';
}

步骤二： 在子比主题目录下的 /template/comments.php 文件中（约88行，提交评论之前）插入调用代码：

<!--夸夸功能开头-->
<?php kuakua()?>
<!--夸夸功能结尾-->

步骤三： 添加对应的 CSS 样式（可添加在主题后台自定义 CSS 中）：

.kuakua-first-box{ margin: auto; width: 440px; border-radius: 16px; bottom: auto; min-height: 10rem; left: 50%; position: fixed; right: auto; top: 50%; transform: translate(-50%, -50%); background: #fff; z-index: 1032; box-shadow: 0px 0px 20px #0000001f; display: none; }
@media screen and (max-width: 500px){.kuakua-first-box{width:94%;}}
.kuakua-ei{ border-radius: 4px; overflow: inherit; }
.kuakua-close{ z-index: 9999; right: 14px !important; display: flex; position: absolute; right: 8px; top: 4px; padding: 16px; cursor: pointer; }
.kuakua-column{ position: absolute; width: 298px; height: auto; top: -28px; left: 0px; right: 0px; z-index: 6000; background: url(/sucai/kua-ribbon.png) 0% 0% / 298px 83px no-repeat; margin: 0 auto; text-align: center; }
.kuakua-headerIcon{ border-radius: 50%; position: relative; text-align: center; padding: 6px; background-color: rgb(255, 255, 255); width: 78px; height: 78px; margin: 0 auto; }
.kuakua-icon{ width: 60px !important; height: 60px !important; fill: currentcolor; transition: transform 0.3s ease 0s; cursor: pointer; }
.kuakua-headerTitle{ font-size: 20px; font-weight: 600; }
.kuakua-modal-body{ position: relative; background-color: transparent; text-align: center; border-bottom: none; border-top: none; border-radius: 0px; box-shadow: none; padding: 65px 30px 20px 30px; }
.kuakua-contentBox{ width: 100%; min-height: 102px; padding: 15px 20px; margin-top: 20px; border-radius: 0; box-sizing: border-box; position: relative; background-color: rgb(244, 244, 244); text-align: center; border-bottom: none; border-top: none; box-shadow: none; }
.kuakua-comment{ margin-bottom: 10px; line-height: 26px; display: flex; align-items: center; justify-content: center; word-break: break-all; transition: all 0s ease 0s; color: rgb(68, 68, 68); font-size: 18px; }
.kuakua-cancelBtn{ background-color: rgb(255, 255, 255); color: rgb(102, 102, 102); border: none; border-radius: 36px; transition: all 0.3s ease 0s; padding: 4px; width: 80px; display: inline-block; margin-top: 10px; }
.kuakua-confirmBtn{ background: rgb(255, 227, 0); width: 118px; height: 36px; display: inline-block; align-items: center; justify-content: center; background-color: rgb(255, 227, 0); color: rgb(68, 68, 68); border: none; border-radius: 4px; font-size: 14px; cursor: pointer; transition: all 0.3s ease 0s; box-sizing: border-box; margin-top: 20px; }

2. 时间进度胶囊小工具

在 functions.php 中添加以下代码以注册小工具，并将对应的小工具文件解压至主题目录下的 /zbfox/widgets/ 文件夹中。

/*胶囊*/
function zbfox_necessary() {
    echo '<div class="c-yellow"><i class="fa fa-copyright"></i><b> 此小工具由【狐狸库】开发！</b></div>';
    echo '<a href="https://huliku.com">官方网站</a> | <a href="https://huliku.com/forum/810.html">问题反馈</a>';
}
$widgets_files = array(
    'zbfox_time_progress.php', /*小工具文件名*/
);
foreach ($widgets_files as $file) {
    require get_template_directory() . '/zbfox/widgets/' . $file;
}
/*胶囊*/

3. 引用鸿蒙字体

将以下 CSS 添加到主题自定义 CSS 中，即可全站引用鸿蒙字体。

@font-face {
    font-family:HarmonyOS_Sans_SC_Medium;
    font-style: normal;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/gh/irozhi/HarmonyOS-Sans/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Medium.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/irozhi/HarmonyOS-Sans/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Medium.woff') format('woff');
}
*{font-family:HarmonyOS_Sans_SC_Medium;}

4. 底部波浪动画

打开主题目录下的 footer.php 文件，在 </footer> 标签下方添加以下代码：

<!--底部波浪开始-->
<div class="wiiuii_layout">
    <svg class="editorial" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none">
        <defs>
            <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
        </defs>
        <g class="parallax">
            <use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/>
            <use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/>
            <use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/>
        </g>
    </svg>
</div>
<style type='text/css'>
    .parallax > use{animation: move-forever 12s linear infinite;}
    .parallax > use:nth-child(1){animation-delay: -2s;}
    .parallax > use:nth-child(2){animation-delay: -2s; animation-duration: 5s;}
    .parallax > use:nth-child(3){animation-delay: -4s; animation-duration: 3s;}
    @keyframes move-forever{0%{transform: translate(-90px, 0%);} 100%{transform: translate(85px, 0%);}}
    .wiiuii_layout{width: 100%;height: 40px;position: relative;overflow: hidden;z-index: 1;background: var(--footer-bg);}
    .editorial{display: block; width: 100%; height: 40px; margin: 0;}
</style>
<!--底部波浪结束-->

5. MAC 风格边框美化

添加以下 CSS 以实现文章列表卡片和代码块的 MAC 风格左上角红黄绿圆点装饰。

/*列表左上角MAC边框美化 */
.posts-item.card:last-child { margin-bottom: 8px !important; }
.posts-item.card { padding: 35px 10px 10px 10px !important; }
.posts-item.card::before {
    content: ""; display: block; background: #fc625d; top: 13px; left: 15px;
    border-radius: 50%; width: 9px; height: 9px;
    box-shadow: 16px 0 #fdbc40, 32px 0 #35cd4b;
    margin: 0px 2px -7px; z-index: 1; position: relative;
}
.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; }

6. 文章列表添加浏览按钮

修改文件 /wp-content/themes/zibll/inc/functions/zib-posts-list.php。

步骤一： 在约 268 行添加获取链接代码：

$get_permalink = get_permalink();//添加文章链接

步骤二： 在约 310 行添加按钮 HTML 代码：

$html = '<a class="down" target="_blank" href="' . $get_permalink . '">下载</a>';//添加下载按钮

步骤三： 添加按钮样式 CSS：

/*文章卡片下载按钮 tfbkw.com*/
a.down {
    display: inline-block; width: 100%; height: 30px; line-height: 30px;
    border-radius: 15px; background: linear-gradient(to right, #4f6dee, #67bdf9);
    color: #fff; text-align: center; cursor: pointer;
    text-shadow: none; border: none; outline: none;
    box-shadow: none; padding: 0; margin: 0;
}

温馨提示:本文最后更新于2026-03-19 18:42:44,某些文章具有时效性，若有错误或已失效，请在下方留言或联系

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

THE END

默认
# WordPress # 子比主题 # 主题美化 # CSS代码 # PHP教程