子比美化博客美化教程合集-米渡资源网

温馨提示：本文最后更新于2025-09-13 00:45:30，某些文章具有时效性，若有错误或已失效，请在下方留言或联系站长。

子比主题 – 文章详情页带Tab切换美化

详情页带Tab切换美化：

代码部署：

一共两个代码，一个是PHP代码，一个是CSS代码，PHP代码里面我已经引入了CSS文件，你可以引入文件也可以放到：子比主题–>>自定义CSS样式即可！记得关闭：子比主题–>>文章页面–>>作者信息板块，要不然不美观...

PHP代码

CSS代码

定位：/wp-content/themes/zibll/inc/functions/zib-single.php文件，我们找到下面的函数，如下图：

替换代码如下：

function zib_single() {
    zib_single_header();
    do_action('zib_single_before');
    wp_enqueue_style('tengfei-single-top-style', '/wp-content/themes/zibll/css/xkzhi/tab.css', array(), '1.0.0');
    echo '<article class="article main-bg theme-box box-body radius8 main-shadow">';

    echo '
    <div class="tabs">
        <div class="tab active" data-target="#postsposcontent"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-view" rel="external nofollow" ></use></svg> 详情</div>
        <div class="tab" data-target="#commentscontent"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-comment" rel="external nofollow" ></use></svg> 评论</div>
        <div class="tab" data-target="#accordionhelpcontent"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-like" rel="external nofollow" ></use></svg> 问答</div>
    </div>';

    echo '<div id="postsposcontent" style="display: block;">';
    zib_single_box_header();
    zib_single_box_content();
    echo '</div>';

    echo '<div id="commentscontent" style="display: none;">';

    if (_pz('post_authordesc_s') && !is_single()) {
        $args = array(
            'user_id'     => get_the_author_meta('ID'),
            'show_button' => false,
            'show_img_bg' => false,
            'class'       => 'author',
        );
        zib_get_user_card_box($args, true);
    }

    echo '</div>';

    echo '
    <div id="accordionhelpcontent" class="tab2_content" style="display: none;">
        <div class="wp-block-zibllblock-collapse">';
    
    $faq_list = [
        '如何下载资源？' => '您可以通过搜索或浏览分类列表来寻觅您期望下载的资源。随后，点击资源介绍页右侧的下载链接按钮，依据提示信息进行操作即可。',
        '是否需要充值才能下载？' => '大部分资源可积分免费下载，部分资源须付费才能下载。',
        '下载的资源是否有版权？' => '本网站提供的下载资源均为网络搜集，仅供个人学习和交流使用。对于版权问题，请用户自行判断并承担相应责任。',
        '如何加入QQ群？' => '搜索QQ群917046597',
    ];

    $i = 1;
    foreach ($faq_list as $title => $content) {
        echo '<div class="panel" data-theme="panel" data-isshow="true">
                <div class="panel-heading collapsed" href="#collapse_'.$i.'" rel="external nofollow"  data-toggle="collapse" aria-expanded="false">
                    <i class="fa fa-plus"></i>
                    <strong class="biaoti">'.$title.'</strong>
                </div>
                <div class="collapse" id="collapse_'.$i.'">
                    <div class="panel-body">
                        <p>'.$content.'</p>
                    </div>
                </div>
              </div>';
        $i++;
    }

    echo '</div></div>';

    echo '
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            document.querySelectorAll(".tab").forEach(tab => {
                tab.addEventListener("click", function () {
                    document.querySelectorAll(".tab").forEach(t => t.classList.remove("active"));
                    document.querySelectorAll("#postsposcontent, #commentscontent, #accordionhelpcontent").forEach(c => c.style.display = "none");

                    this.classList.add("active");
                    document.querySelector(this.dataset.target).style.display = "block";
                });
            });

            document.querySelectorAll(".panel-heading").forEach(panel => {
                panel.addEventListener("click", function () {
                    let targetId = panel.getAttribute("href");
                    let target = document.querySelector(targetId);
                    if (!target) return;

                    let icon = panel.querySelector(".fa"); 

                    let isCollapsed = target.classList.contains("in");

                    document.querySelectorAll(".collapse").forEach(c => {
                        c.classList.remove("in");
                        c.previousElementSibling.classList.add("collapsed");
                        c.previousElementSibling.querySelector(".fa").style.transform = "rotate(-45deg)"; 
                    });

                    if (!isCollapsed) {
                        target.classList.add("in");
                        panel.classList.remove("collapsed");
                        icon.style.transform = "rotate(0deg)"; 
                    }
                });
            });
        });
    </script>';

    echo '</article>';
    do_action('zib_single_after');
}

这是CSS代码，PHP代码里面我已经引入了CSS文件，你可以引入文件也可以放到：子比主题–>>自定义CSS样式即可！

CSS代码如下：

/* ==============================
   FAQ 问答折叠样式
   ============================== */
.panel-heading .fa {
    transition: transform 0.3s ease;
    transform: rotate(-45deg);
    padding: 5px;
    color: #556af1;
}

.panel-heading:not(.collapsed) .fa {
    transform: rotate(0deg);
}

.question-container {
    border-radius: 6px;
    border: solid 1px var(--main-border-color);
    overflow: hidden;
    border-bottom: solid 0px rgba(50, 50, 50, 0);
}

.question {
    cursor: pointer;
    position: relative;
    margin-bottom: 10px;
    padding: 2.5rem 4rem;
    margin-bottom: 0;
    border-bottom: solid 1px var(--main-border-color);
}

.question i {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.question.active i.fa.fa-plus {
    display: none;
}

.question.active i.fa.fa-minus {
    display: inline-block;
}

.answer.active {
    display: unset;
    background-color: var(--focus-color);
    flex: 1 1 auto;
    min-height: 1px;
    color: #fff !important;
    padding: 2.5rem 4.5rem;
    display: block;
}

@keyframes bounce {
    0% {
        transform: scaleY(0.3);
        background-color: green;
    }
    50% {
        transform: scaleY(1);
        background-color: orange;
    }
    100% {
        transform: scaleY(0.3);
        background-color: green;
    }
}


/* ==============================
   Tabs 标签页切换样式
   ============================== */
.tab2_content.active {
    display: block;
}

#accordionhelp-content {
    margin-bottom: 20px;
}

.tab-container {
    width: 80%;
    margin: auto;
}

.tabs {
    display: flex;
    cursor: pointer;
    padding: 20px 0;
}

.tab {
    padding: 10px 15px;
    transition: background-color 0.3s;
    border-radius: 10px;
    background: var(--muted-bg-color);
    margin: 0px 5px;
    font-size: 14px;
}

.tab.active {
    color: #fff;
    background-color: #556af1;
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.tab-content {
    position: relative;
    overflow: hidden;
}

.tab2_content {
    display: none;
}


/* ==============================
   Button 按钮样式
   ============================== */
.button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    background-color: #556af1;
    color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.button:hover {
    background-color: #3e53c4;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

另外一种方法把下面的文件上传到/wp-content/themes/zibll/css/上传后解压即可，如下图：

CSS压缩文件下载：

CSS压缩包

下载

格式：zip

3.6K

子比美化 – 文章页添加顶部信息

文章页添加顶部信息：

以下代码放在/wp-content/themes/zibll/func.php/中，没有自己创建一个，阅读字数自动抓取…

// 自动获取文章字数 + 阅读时长
function get_post_words_and_reading_time( $post_id = null ) {
    // 如果没有传入 post_id，就取当前文章
    $post_id = $post_id ? $post_id : get_the_ID();

    // 获取文章内容（去除 HTML 标签）
    $content = strip_tags( get_post_field( 'post_content', $post_id ) );

    // 自动统计字数（中文用 mb_strlen，避免乱码）
    $word_count = mb_strlen( preg_replace( '/\s+/', '', $content ), 'UTF-8' );

    // 阅读时长（假设平均 200 字/分钟）
    $reading_time = ceil( $word_count / 200 );

    // 返回结果
    return $word_count . " 字 · 预计 " . $reading_time . " 分钟";
}

// 自定义输出文章头部信息
function custom_output_article_header() {
    ob_start();
    global $post;

    if ( is_single() && $post ) {
        $categories = get_the_category( $post->ID );
        $category_links = array();
        if ( $categories ) {
            foreach ( $categories as $category ) {
                $category_link = sprintf(
                    '<a href="%s" rel="external nofollow" style="background: var(--article-button-bg, #ff7eb9); color: var(--article-button-text, #fff); padding: 4px 8px; border-radius: 12px; text-decoration: none; font-weight: bold;">🏷️ %s</a>',
                    esc_url( get_category_link( $category->term_id ) ),
                    esc_html( $category->name )
                );
                $category_links[] = $category_link;
            }
        }

        // 获取字数和阅读时长
        $words_and_time = get_post_words_and_reading_time( $post->ID );
?>
<div class="article-header" style="background: var(--article-bg, linear-gradient(135deg, #ffd1dc, #c1e1ff)); padding: 15px; border-radius: 16px; border: 3px solid var(--article-border, transparent); margin: 20px 0; font-size: 14px; color: var(--article-text, #333); position: relative; overflow: hidden; box-shadow: 0 4px 12px var(--article-shadow, rgba(255, 126, 185, 0.3)); transition: transform 0.3s ease, box-shadow 0.3s ease; width: 100%; max-width: 100%; text-align: center;">
    <!-- 二次元装饰图标 -->
    <span style="position: absolute; top: -20px; right: -20px; font-size: 60px; color: var(--article-icon, #ff7eb9); opacity: 0.2; transform: rotate(30deg);">🎀</span>
    <span style="position: absolute; bottom: -20px; left: -20px; font-size: 60px; color: var(--article-icon, #ff7eb9); opacity: 0.2; transform: rotate(-30deg);">🌸</span>

    <!-- 动态悬浮效果 -->
    <div class="particle-effect" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, var(--article-particle, rgba(255, 126, 185, 0.2)) 10%, transparent 10.01%); background-size: 20px 20px; animation: move 3s infinite linear;"></div>

    <!-- 文章信息内容 -->
    <div style="position: relative; z-index: 2;">
        <h1 class="article-title" style="font-size: 20px; color: var(--article-title, #ff7eb9); margin-bottom: 10px; font-family: 'Comic Sans MS', cursive, sans-serif;">
            <?php the_title();?>
        </h1>
        <!-- 作者、分类、字数与阅读时长 -->
        <div class="article-meta-buttons" style="display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;">
            <!-- 作者 -->
            <span style="display: flex; align-items: center; gap: 4px;">
                <a href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) );?>" rel="external nofollow" style="background: var(--article-button-bg, #ff7eb9); color: var(--article-button-text, #fff); padding: 4px 8px; border-radius: 12px; text-decoration: none; font-weight: bold;">📝 <?php the_author();?></a>
            </span>
            <!-- 分类 -->
            <?php if ( $category_links ) {
                foreach ( $category_links as $category_link ) {
                    echo $category_link;
                }
            }?>
            <!-- 字数与阅读时长 -->
            <span style="background: var(--article-button-bg, #ff7eb9); color: var(--article-button-text, #fff); padding: 4px 8px; border-radius: 12px; font-weight: bold;">📖 <?php echo esc_html( $words_and_time ); ?></span>
        </div>
    </div>
</div>

<style>
@keyframes move {
    0% { background-position: 0 0; }
    100% { background-position: 20px 20px; }
}

/* 悬浮效果 */
.article-header:hover .particle-effect {
    background: radial-gradient(circle, var(--article-particle, rgba(255, 126, 185, 0.4)) 10%, transparent 10.01%);
    animation: move 0.5s linear;
}

/* 点击特效 */
.article-header:active .particle-effect {
    background: radial-gradient(circle, var(--article-particle, rgba(255, 126, 185, 0.6)) 10%, transparent 10.01%);
    animation: move 0.2s linear;
}

/* 日间模式样式 */
:root {
    --article-bg: linear-gradient(135deg, #ffd1dc, #c1e1ff);
    --article-border: transparent;
    --article-text: #333;
    --article-title: #ff7eb9;
    --article-icon: #ff7eb9;
    --article-shadow: rgba(255, 126, 185, 0.3);
    --article-shadow-hover: rgba(255, 126, 185, 0.4);
    --article-particle: rgba(255, 126, 185, 0.2);
    --article-button-bg: #ff7eb9;
    --article-button-text: #fff;
}

/* 夜间模式样式 */
[data-theme='dark'] {
    --article-bg: linear-gradient(135deg, #3a1f4a, #1a1a2e);
    --article-border: transparent;
    --article-text: #ddd;
    --article-title: #ff7eb9;
    --article-icon: #ff7eb9;
    --article-shadow: rgba(255, 126, 185, 0.2);
    --article-shadow-hover: rgba(255, 126, 185, 0.3);
    --article-particle: rgba(255, 126, 185, 0.1);
    --article-button-bg: #ff7eb9;
    --article-button-text: #fff;
}

/* 手机端优化 */
@media (max-width: 768px) {
    .article-header { padding: 12px; border-radius: 12px; }
    .article-title { font-size: 18px!important; }
    .article-meta-buttons { gap: 8px; flex-wrap: wrap; }
    .article-meta-buttons a, .article-meta-buttons span { font-size: 12px; padding: 4px 8px; }
}
</style>
<?php
    }
    $html_content = ob_get_clean();
    echo $html_content;
}
add_action('zib_single_before', 'custom_output_article_header');

子比主题美化 – 用户注册随机头像

用户注册随机头像：

定位：/wp-content/uploads/tx/红色部分是需要创建的文件夹，所有图片都要放在/tx/里面如下图…

代码教程及支持图片格式：jpg,jpeg,png,gif,webp

function zib2_sign_in($user_id) {
    // 检查用户ID是否有效
    if (!$user_id) {
        return;
    }

    // 检查是否通过社交登录
    $social_login = get_user_meta($user_id, 'oauth_new', true);

    // 构造头像图片的基础文件系统路径
    $avatars_base_dir = WP_CONTENT_DIR . '/uploads/tx/'; // 基于WP_CONTENT_DIR的相对路径

    // 获取目录下所有图片文件
    $avatars = glob($avatars_base_dir . '*.{jpg,jpeg,png,gif,webp}', GLOB_BRACE | GLOB_NOSORT);

    // 如果没有找到图片，直接返回
    if (empty($avatars)) {
        return;
    }

    // 从图片数组中随机选择一个图片文件
    $random_avatar_path = $avatars[array_rand($avatars)];

    // 构造完整的随机头像URL
    $url = home_url('wp-content/uploads/tx/' . basename($random_avatar_path));

    // 更新用户头像的元数据
    // 确保zib_update_user_meta函数存在并且可以正确执行
    zib_update_user_meta($user_id, 'custom_avatar_id', 1);
    zib_update_user_meta($user_id, 'custom_avatar', $url);
}

// 将函数挂载到用户注册钩子上
add_action('user_register', 'zib2_sign_in');

网站展示-图片纯代码

网站展示-滚动纯代码：

直接在页面插入代码使用：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>融合版浏览器窗口</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* ========= 外层包裹容器 ========= */
.wp-browser-wrapper { display:block; width:100%; margin:0; padding:0; background:#f5f5f5; }
.article.page-article.main-bg.theme-box.box-body.radius8.main-shadow { all: unset; display:block; }
body { margin:0; padding:0; font-family:sans-serif; background:#f5f5f5; }

/* ===== 页面统一标题 ===== */
.page-title { 
    display:block !important;
    max-width:1200px !important; /* 与卡片容器一致 */
    margin:0 auto 10px auto !important; /* 居中 */
    padding:20px 0 !important;
    text-align:center !important;
    font-size:22px !important;
    font-weight:bold !important;
    color:#333 !important;
    background-color:#fff !important;
    border-bottom:1px solid #e5e5e5 !important;
    border-radius:12px !important;
    box-shadow:0 2px 6px rgba(0,0,0,0.06) !important;
}

/* 响应式调整 */
@media(max-width:767px){
    .page-title {
        max-width:100% !important;
        margin:0 auto 10px auto !important;
        padding-left:10px;
        padding-right:10px;
        font-size:20px !important; /* 移动端字体略小 */
    }
}

/* ===== 卡片容器 ===== */
.A1 { max-width:1200px; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; padding:0 0 20px 0; }

/* ===== 单卡片 ===== */
.A2 { flex:1 1 calc(33.333% - 20px); max-width:calc(33.333% - 20px); border:1px solid #ccc; border-radius:12px; background:#fff; box-shadow:0 6px 18px rgba(0,0,0,0.15); overflow:hidden; display:flex; flex-direction:column; }

/* 顶部浏览器头部 */
.browser-header { height:40px; background:#000000; display:flex; align-items:center; padding:0 12px; border-bottom:1px solid #ddd; flex-shrink:0; }
.buttons { display:flex; gap:8px; }
.button { width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.red { background:#ff5f56; }
.yellow { background:#ffbd2e; }
.green { background:#27c93f; }

/* 地址栏 */
.address-bar { display:flex; align-items:center; justify-content:flex-start; gap:8px; flex:1; margin:0 16px; height:22px; background:#fff; border:1px solid #ccc; border-radius:6px; font-size:12px; color:#666; user-select:none; pointer-events:none; }
.address-icon { margin-left:20px; pointer-events:auto; }
.address-icon img { height:1em; width:auto; vertical-align:middle; }

/* ===== 右上角背景图标 ===== */
.right-icons { display:flex; gap:10px; }
.right-icons .icon { width:16px; height:16px; background-size:cover; background-position:center; display:block; }
.icon-share { background-image:url("https://www.moyiw.com/wp-content/uploads/2025/share.svg"); }
.icon-collect { background-image:url("https://www.moyiw.com/wp-content/uploads/2025/collect.svg"); }

/* ===== 中间滚动图 ===== */
.A3 { width:100%; height:300px; overflow:hidden; position:relative; }
.A3 > .A7 { display:inline-block; transition: transform 4s linear; }
.A2:hover .A3 > .A7, .A2:active .A3 > .A7 { transform:translateY(calc(-100% + 300px)); }
.A3 img { display:block; width:100%; height:auto; user-select:none; -webkit-user-drag:none; -webkit-touch-callout:none; pointer-events:none; }

/* ===== 底部按钮组 ===== */
.A4 { display:flex; justify-content:space-between; gap:8px; padding:12px 16px; border-top:0.5px solid #eee; background:#fff; flex-wrap:wrap; }
.A5 { position:relative; padding:8px 8px; font-size:14px; color:#333; background-color:#eee; border-radius:6px; text-decoration:none; overflow:hidden; z-index:0; transition:color 0.3s ease; flex:1; text-align:center; cursor:pointer; user-select:none; }
.A5:hover { color:#fff; }
.A5::before { content:""; position:absolute; top:50%; left:50%; width:0; height:0; background:#000; z-index:-1; transition: all 0.4s ease-out; transform:translate(-50%, -50%); border-radius:50%; }
.A5:hover::before { width:220%; height:600%; }
.A5.A6 { background-color:#007bff; color:#fff; cursor:pointer; }
.A5.A6:hover { background-color:#000; color:#fff; }

/* ===== 响应式 ===== */
@media(max-width:1199px){ .A2{ flex:1 1 calc(50% - 20px); max-width:calc(50% - 20px); } }
@media(max-width:767px){
    .A1{ max-width:100%; margin:0; padding-left:0; padding-right:0; } 
    .A2{ flex:1 1 100%; max-width:100%; } 
    .A4{ flex-direction:column; } 
}
</style>
</head>
<body>
<div class="wp-browser-wrapper">
<h2 class="page-title">网站演示</h2>
<div class="A1" id="card-container"></div>
</div>
<script>
const cards = [
{id:1,img:"https://aucau.com/wp-content/uploads/2025/08/20250821160931691-屏幕截图_21-8-2025_16857_www.bagladt.com_-scaled.jpeg",demo:"https://www.bagladt.com/"},
{id:2,img:"https://aucau.com/wp-content/uploads/2025/08/20250821160337825-屏幕截图_21-8-2025_16327_rosybrown-rat-534063.hostingersite.com_-scaled.jpeg",demo:"https://rosybrown-rat-534063.hostingersite.com/"},
{id:3,img:"https://aucau.com/wp-content/uploads/2025/08/20250821160209674-屏幕截图_21-8-2025_16156_tifae.com_-scaled.jpeg",demo:"https://tifae.com/"},
{id:4,img:"https://aucau.com/wp-content/uploads/2025/08/20250821155847478-屏幕截图_21-8-2025_155833_mediumslateblue-raven-575974.hostingersite.com_-scaled.jpeg",demo:"https://mediumslateblue-raven-575974.hostingersite.com/"},
{id:5,img:"https://aucau.com/wp-content/uploads/2025/08/20250821155601307-屏幕截图_21-8-2025_155548_orangered-dolphin-641902.hostingersite.com_-scaled.jpeg",demo:"https://orangered-dolphin-641902.hostingersite.com/?v=0b3b97fa6688"},
{id:6,img:"https://aucau.com/wp-content/uploads/2025/08/20250821160614492-屏幕截图_21-8-2025_16558_watchforbag.com_-scaled.jpeg",demo:"https://watchforbag.com/"}
];

const contactLink = "https://work.weixin.qq.com/kfid/kfc27bb8cd595940fcb";
const container = document.getElementById("card-container");

cards.forEach(c=>{
  const card = document.createElement("div");
  card.className = "A2";
  card.innerHTML = `
<div class="browser-header">
<div class="buttons"><div class="button red"></div><div class="button yellow"></div><div class="button green"></div></div>
<div class="address-bar"><a href="https://www.moyiw.com/" class="address-icon" target="_blank"><img src="https://www.moyiw.com/wp-content/uploads/2025/lock.svg"></a>https://www.moyiw.com/</div>
<div class="right-icons"><div class="icon icon-share"></div><div class="icon icon-collect"></div></div>
</div>
<div class="A3"><div class="A7"><img src="${c.img}"></div></div>
<div class="A4">
<a class="A5" href="${contactLink}">模板编号-${c.id}</a>
<a class="A5" href="${c.demo}">查看演示</a>
<a class="A5 A6" href="${contactLink}">联系建站</a>
</div>
  `;
  container.appendChild(card);
});
</script>
</body>
</html>

微信QQ防红-代码

微信QQ防红-代码：

代码部署：

//微信或QQ弹窗提示，防红
if (!function_exists('php_block')) {
    function php_block() {
        // ---- UA 检测（微信/企业微信/QQ 浏览器）----
        $ua = $_SERVER['HTTP_USER_AGENT'] ?? '';
        $is_wechat = stripos($ua, 'MicroMessenger') !== false || stripos($ua, 'WeChatWork') !== false || stripos($ua, 'wxwork') !== false;
        $is_qq = stripos($ua, 'QQ/') !== false || stripos($ua, 'QQBrowser') !== false || stripos($ua, 'MQQBrowser') !== false;
        if (!($is_wechat || $is_qq)) return; // 非目标 UA 正常访问

        // ---- HTTP Header ----
        if (!headers_sent()) {
            header("Content-Type: text/html; charset=UTF-8");
            header("X-Robots-Tag: noindex, nofollow");
        }

        // ---- 拼接当前完整 URL ----
        $is_https = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ||
                    (isset($_SERVER['SERVER_PORT']) && (int)$_SERVER['SERVER_PORT'] === 443) ||
                    (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && strtolower($_SERVER['HTTP_X_FORWARDED_PROTO']) === 'https');
        $scheme = $is_https ? 'https' : 'http';
        $host = $_SERVER['HTTP_HOST'] ?? ($_SERVER['SERVER_NAME'] ?? 'localhost');
        $uri = $_SERVER['REQUEST_URI'] ?? '/';
        $url = $scheme . '://' . $host . $uri;
        $url_attr = htmlspecialchars($url, ENT_QUOTES, 'UTF-8'); // HTML 安全

        // ---- 输出 HTML ----
        $html = <<<HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>为保证功能完整性请游览器打开</title>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
<style>
:root {
    --primary-color: #6366f1;
    --background-color: #0A0F1B;
    --text-color: #F0F8FF;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --shadow-color: rgba(0, 0, 0, 0.3);
}

body {
    font-family: 'Roboto', sans-serif;
    min-height: 100vh;
    background: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    color: var(--text-color);
    padding: 0 24px;
}

.container {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 0 24px 24px 24px;
    max-width: 480px;
    width: 90%;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 8px 32px 0 var(--shadow-color);
}

h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: 28px;
    color: var(--primary-color);
    margin-bottom: 16px;
}

.steps { list-style:none; padding:0; margin-bottom:24px; }
.step {
    display:flex; align-items:flex-start;
    padding:16px; margin-bottom:12px;
    border-radius:12px; background: rgba(99,102,241,.1);
}

.actions {
    display:flex;
    flex-direction: column; /* 上下布局 */
    gap:12px;
}

/* 网址输入框 */
.url-input {
    padding:14px; /* 高度与按钮一致 */
    font-size:14px; font-weight:700;
    border:none;
    border-radius:12px;
    background: var(--primary-color);
    color:#fff;
    text-align:center;
    overflow:hidden;
    word-break:break-word;
}

/* 复制按钮 */
.copy-btn {
    padding:14px; /* 高度与输入框一致 */
    font-size:14px; font-weight:700;
    border:none; border-radius:12px;
    background: var(--primary-color);
    color:#fff;
    cursor:pointer;
    transition: opacity 0.2s;
}
.copy-btn:hover { opacity:0.9; } /* 只改变透明度，不缩放 */

/* Toast 提示 */
.toast {
    position:fixed; 
    bottom:100px;
    left:50%;
    transform:translateX(-50%);
    background: rgb(255, 255, 255);
    color:#000000;
    padding:8px 12px;
    border-radius:8px;
    display:flex; align-items:center; gap:8px;
    animation:fadeIn 0.3s;
    z-index:1000;
}
@media (max-width: 768px) {
    .toast { bottom:90px; }
}
.toast img { width:24px; height:24px; }

@keyframes fadeIn { from{opacity:0; transform:translateX(-50%) translateY(10px);} to{opacity:1; transform:translateX(-50%) translateY(0);} }
@keyframes fadeOut { from{opacity:1; transform:translateX(-50%) translateY(0);} to{opacity:0; transform:translateX(-50%) translateY(10px);} }
</style>
</head>
<body>

<div class="container">
    <h1>墨熠合众</h1>
    <ul class="steps">
        <li class="step">点击右上角 <strong style="color:var(--primary-color)"> ••• </strong> 系统菜单</li>
        <li class="step">选择 <strong style="color:var(--primary-color)">[浏览器打开]</strong> 选项</li>
        <li class="step">完成浏览器打开并进入核心资源区</li>
    </ul>

    <div class="actions">
        <input type="text" class="url-input" id="urlBox" value="{$url_attr}" readonly>
        <button class="copy-btn" onclick="copyUrl()">复制网址</button>
    </div>
</div>

<script>
const urlBox = document.getElementById('urlBox');
const targetUrl = urlBox.value;

// 点击网址框也可以复制
urlBox.addEventListener('click', copyUrl);

function copyUrl(){
    if(navigator.clipboard && navigator.clipboard.writeText){
        navigator.clipboard.writeText(targetUrl).then(()=>showToast(true)).catch(()=>fallbackCopy());
    }else fallbackCopy();
}

function fallbackCopy(){
    urlBox.select();
    urlBox.setSelectionRange(0, urlBox.value.length);
    try{
        document.execCommand('copy');
        showToast(true);
    }catch(e){ showToast(false); }
}

function showToast(success){
    const toast = document.createElement('div');
    toast.className = 'toast';
    const icon = document.createElement('img');
    icon.src = success ? "https://www.moyiw.com/wp-content/uploads/2025/success.svg" : "https://www.moyiw.com/wp-content/uploads/2025/fail.svg";
    const text = document.createElement('span');
    text.textContent = success ? "链接复制成功" : "自动复制失败，请手动复制";
    toast.appendChild(icon);
    toast.appendChild(text);
    document.body.appendChild(toast);
    setTimeout(()=>{ toast.style.animation='fadeOut 0.3s'; setTimeout(()=>toast.remove(),300); },2000);
}
</script>

</body>
</html>
HTML;

        echo $html;
        exit;
    }
}
php_block();

子比主题美化 – 引用背景渐变美化

引用背景渐变美化：

前台演示：

目标文件：/wp-content/themes/zibll/func.php/

//渐变段落类名
function custom_gradient_styles() {
    ?>
    <style>
    /* 渐变段落类名 */
    .grad-x1 { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); color: #4a4a4a; border-left:5px solid #6c5ce7; padding:20px; border-radius:12px; margin:20px 0; line-height:1.8; transition:all 0.3s ease; box-shadow:0 5px 15px rgba(0,0,0,0.08);}
    .grad-x1:hover { transform:translateY(-5px); box-shadow:0 10px 25px rgba(0,0,0,0.15);}
    .grad-x2 { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); color:#4a4a4a; border-left:5px solid #4a69bd; padding:20px; border-radius:12px; margin:20px 0; line-height:1.8; transition:all 0.3s ease; box-shadow:0 5px 15px rgba(0,0,0,0.08);}
    .grad-x2:hover { transform:translateY(-5px); box-shadow:0 10px 25px rgba(0,0,0,0.15);}
    .grad-x3 { background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); color:#4a4a4a; border-left:5px solid #e17055; padding:20px; border-radius:12px; margin:20px 0; line-height:1.8; transition:all 0.3s ease; box-shadow:0 5px 15px rgba(0,0,0,0.08);}
    .grad-x3:hover { transform:translateY(-5px); box-shadow:0 10px 25px rgba(0,0,0,0.15);}
    .grad-x4 { background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%); color:#4a4a4a; border-left:5px solid #00b894; padding:20px; border-radius:12px; margin:20px 0; line-height:1.8; transition:all 0.3s ease; box-shadow:0 5px 15px rgba(0,0,0,0.08);}
    .grad-x4:hover { transform:translateY(-5px); box-shadow:0 10px 25px rgba(0,0,0,0.15);}

    /* 提示框类名 */
    .tip-bx { background: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 100%); padding:20px; border-radius:10px; margin:30px 0; border-left:5px solid #e17055; position:relative;}
    .tip-bx::before { content:'友情提示'; position:absolute; top:-12px; left:20px; background:#e17055; color:#fff; padding:5px 15px; border-radius:20px; font-size:0.9rem; font-weight:bold;}
    </style>
    <?php
}
add_action('wp_head', 'custom_gradient_styles');

// ----------------------------
// 渐变段落短代码 s1-s4
// ----------------------------
function gradient_shortcode_factory($atts, $content, $class_name) {
    return '<div class="'.esc_attr($class_name).'">'.do_shortcode($content).'</div>';
}
add_shortcode('s1', function($atts, $content){ return gradient_shortcode_factory($atts, $content, 'grad-x1'); });
add_shortcode('s2', function($atts, $content){ return gradient_shortcode_factory($atts, $content, 'grad-x2'); });
add_shortcode('s3', function($atts, $content){ return gradient_shortcode_factory($atts, $content, 'grad-x3'); });
add_shortcode('s4', function($atts, $content){ return gradient_shortcode_factory($atts, $content, 'grad-x4'); });

// ----------------------------
// 提示框短代码 b1
// ----------------------------
function tip_shortcode($atts, $content = null) {
    return '<div class="tip-bx">'.do_shortcode($content).'</div>';
}
add_shortcode('b1', 'tip_shortcode');

后台演示：

简码整理：

渐变背景不仅可以美化您的文章，还可以帮助引导读者的视线，强调重要内容，并创造更加愉悦的阅读体验。

渐变背景不仅可以美化您的文章，还可以帮助引导读者的视线，强调重要内容，并创造更加愉悦的阅读体验。

这是一个蓝色到粉色的渐变背景示例。柔和的色彩过渡创造出平静而优雅的效果，非常适合用于引言或重要提示内容。

这是一个蓝色到粉色的渐变背景示例。柔和的色彩过渡创造出平静而优雅的效果，非常适合用于引言或重要提示内容。

这是一个灰色渐变背景示例。中性色调适合各种内容类型，不会分散读者对文本的注意力，同时提供视觉上的区分。

这是一个灰色渐变背景示例。中性色调适合各种内容类型，不会分散读者对文本的注意力，同时提供视觉上的区分。

这是一个橙色渐变背景示例。温暖的颜色能够吸引读者的注意力，适合用于强调重要内容或警告信息。

这是一个橙色渐变背景示例。温暖的颜色能够吸引读者的注意力，适合用于强调重要内容或警告信息。

这是一个绿色渐变背景示例。清新的颜色让人联想到自然和成长，适合用于环保、健康或积极主题的内容。

这是一个绿色渐变背景示例。清新的颜色让人联想到自然和成长，适合用于环保、健康或积极主题的内容。

子比主题-子主题安装

子主题安装：

两种上传方法：

1️⃣ 宝塔后台上传”

/wp-content/themes/如下图：

上传后回到wordpress后台激活即可:外观/主题/启用子主题

2️⃣ wordpress后台上传“

外观/主题/添加主题/上传主题/启用主题即可

子主题压缩包

下载

文件 (.zip)

大小：126 KB

版权声明 1 本站名称： 米渡资源网
2 本站网址：www.micdu.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。
6 本站附件资源、教程等内容如因时效原因失效或不可用，请评论区留言或联系站长及时更新。

THE END