1.热搜
两个版本分两个文件，定位：/wp-content/themes/zibll/pages 目录下，自己创建一个文件后缀php就行，我这里的是 hottop.php 文件，自己创建一个新文件，话不多说直接上附件代码！直接将下面的代码上传到pages下面，两个版本文件名字一样，喜欢哪个就上传哪个！
上传之后到：WP后台–>>页面–>>新建页面–>>选择你上传的版本
热搜
2.子比主题 – 文本超链接美化样式
![图片[1]-本站装修-九块九源码](https://www.9k9y.cn/wp-content/uploads/2025/07/image-1024x472.png)
子比主题–>>自定义CSS样式即可！
@font-face {
font-family: 'tengfei-font';
src: url('//at.alicdn.com/t/c/font_4823557_nwo4uyriby.woff2?t=1741491889382') format('woff2'),
url('//at.alicdn.com/t/c/font_4823557_nwo4uyriby.woff?t=1741491889382') format('woff'),
url('//at.alicdn.com/t/c/font_4823557_nwo4uyriby.ttf?t=1741491889382') format('truetype');
}
.wp-posts-content a:not([class]),.wp-block-list a:not([class]) {
color: var(--focus-color);
line-height: 1.15em;
padding: .1em .35em;
font-size: max(.75rem,.75em);
border-radius: 2em;
background: var(--focus-color-opacity1) linear-gradient(var(--focus-shadow-color) 0 0) no-repeat 100% 100%/0 100% border-box;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
transition: .7s cubic-bezier(.6,.1,0,1),background-position 0s;
word-break: break-all;
display: inline-flex;
align-items: center;
transform: translateY(-1.15px)
}
.wp-posts-content a:not([class]):hover,.wp-block-list a:not([class]):hover {
color: #fff;
background-position-x: 0;
background-size: 100% 100%
}
.wp-posts-content a:not([class]):before,.wp-block-list a:not([class]):before {
content: "\ec7f";
font-family: 'tengfei-font';
height: 1.15em;
display: -webkit-inline-flex;
display: inline-flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
aspect-ratio: 1;
margin: 0 0 0 -.3em;
background: var(--focus-shadow-color);
border-radius: 50%;
color: #fff;
transition: inherit
}
.wp-posts-content a:not([class]):hover:before,.wp-block-list a:not([class]):hover:before {
background: #fff;
color: var(--focus-color);
rotate: 45deg;
scale: .9
}3.子比主题美化 – 小工具标题美化
![图片[2]-本站装修-九块九源码](https://www.9k9y.cn/wp-content/uploads/2025/07/image-2-1024x317.png)
HTML代码，放进后台的自定义头部HTML代码
<div class="file-format" data-v-2775696c=""><span id="index-xtips" class="txt-file-format" data-v-2775696c="">超强生产力，动力足！</span> <span class="file-format-icons" data-v-2775696c=""><i class="icon_ps" data-v-2775696c=""></i> <i class="icon_ai" data-v-2775696c=""></i> <i class="icon_sketch" data-v-2775696c=""></i> <i class="icon_3dMax" data-v-2775696c=""></i> <i class="icon_cdr" data-v-2775696c=""></i> <i class="icon_c4d" data-v-2775696c=""></i> <i class="icon_blender" data-v-2775696c=""></i></span></div>CSS代码
/*小工具副标题美化*/
.file-format {
padding: 0 20px;
height: 38px;
background: linear-gradient(224deg, rgba(255, 110, 144, .08), rgba(208, 147, 255, .08) 42%, rgba(105, 105, 255, .08) 100%, rgba(105, 105, 255, .08) 0);
border-radius: 28px;
display: flex;
align-items: center;
justify-content: center;
}
span.txt-file-format {
font-size: 13px;
font-weight: 700;
color: #424866;
line-height: 18px;
margin-right: 17px;
}
i.icon_ai[data-v-2775696c], i.icon_ps[data-v-2775696c] {
width: 26px;
height: 26px;
display: inline-block;
vertical-align: middle;
}
i.icon_ps[data-v-2775696c] {
background: url(https://www.macgf.com/img/icon-ps.svg) no-repeat 50% / 100%;
}
.stay-tuned-box .file-format .file-format-icons i[data-v-2775696c] {
margin-right: 9px;
}
i.icon_ai[data-v-2775696c] {
background: url(https://www.macgf.com/img/icon-ai.svg) no-repeat 50% / 100%;
}
i.icon_sketch[data-v-2775696c] {
width: 26px;
height: 26px;
display: inline-block;
background: url(https://www.macgf.com/img/icon-sketch.svg) no-repeat 50% / 100%;
vertical-align: middle;
}
.stay-tuned-box .file-format .file-format-icons i[data-v-2775696c] {
margin-right: 9px;
}
i.icon_3dMax[data-v-2775696c], i.icon_blender[data-v-2775696c] {
width: 26px;
height: 26px;
display: inline-block;
vertical-align: middle;
}
i.icon_3dMax[data-v-2775696c] {
background: url(https://www.macgf.com/img/icon-3dMax.svg) no-repeat 50% / 100%;
}
.stay-tuned-box .file-format .file-format-icons i[data-v-2775696c] {
margin-right: 9px;
}
i.icon_c4d[data-v-2775696c], i.icon_cdr[data-v-2775696c] {
width: 26px;
height: 26px;
display: inline-block;
vertical-align: middle;
}
i.icon_cdr[data-v-2775696c] {
background: url(https://www.macgf.com/img/icon-cdr.svg) no-repeat 50% / 100%;
}
.stay-tuned-box .file-format .file-format-icons i[data-v-2775696c] {
margin-right: 9px;
}
i.icon_c4d[data-v-2775696c] {
background: url(https://www.macgf.com/img/icon-c4d.svg) no-repeat 50% / 100%;
}
i.icon_blender[data-v-2775696c] {
background: url(https://www.macgf.com/img/icon-blender.svg) no-repeat 50% / 100%;
}
i.icon_3dMax[data-v-2775696c], i.icon_blender[data-v-2775696c] {
width: 26px;
height: 26px;
display: inline-block;
vertical-align: middle;
}
/*小工具副标题美化*/4.子比主题功能增强 – 文章列表标题自定义文字或图标前缀（初一小盏版）
![图片[3]-本站装修-九块九源码](https://www.9k9y.cn/wp-content/uploads/2025/07/image-3.png)
代码放在 functions.php 下或 func.php
CSF::createMetabox('DearLicy_titles', array(
'title' => '标题前缀',
'post_type' => 'post',
'context' => 'advanced',
'data_type' => 'unserialize',
'priority' => 'high',
));
CSF::createSection( 'DearLicy_titles', array(
'fields' => array(
array(
'id' => 'titles_moshi',
'type' => 'radio',
'title' => '模式选择',
'desc' => '选择图片或自定义文字',
'inline' => true,
'options' => array(
'img' => '图片',
'text' => '文字',
),
'default' => 'img', // 默认选择图片模式
),
array(
'id' => 'text',
'type' => 'text',
'title' => '文字模式',
'desc' => '建议两个字',
'dependency' => array( 'titles_moshi', '==', 'text' ), // 依赖关系：当模式选择为文字时显示
),
array(
'id' => 'text_bg_color',
'type' => 'palette',
'title' => '背景颜色',
'desc' => '部分颜色带有文字颜色，其余默认白色',
'class' => 'compact skin-color',
'default' => "jb-vip2",
'options' => CFS_Module::zib_palette(array(), array('jb')),
'dependency' => array( 'titles_moshi', '==', 'text' ), // 依赖关系：当模式选择为文字时显示
),
array(
'id' => 'img',
'type' => 'palette',
'title' => '选择一个图片',
'desc' => '固定使用以下几款SVG图标',
'class' => 'compact skin-color',
'default' => "jb-vip2",
'options' => DearLicy_Module::DearLicy_imgtitle(),
'dependency' => array( 'titles_moshi', '==', 'img' ), // 依赖关系：当模式选择为图片时显示
),
),
));
class DearLicy_Module
{
public static function DearLicy_imgtitle($palette = array())
{
$palette = array_merge($palette, array(
'shice' => array('url(https://www.vxras.com/wp-content/plugins/DearLicy/assets/img/shice.svg);width: 50px;'),
'dujia' => array('url(https://www.vxras.com/wp-content/plugins/DearLicy/assets/img/10002.svg);width: 50px;'),
'shoufa' => array('url(https://www.vxras.com/wp-content/plugins/DearLicy/assets/img/10001.svg);width: 50px;'),
));
return $palette;
}
}
function apply_dearlicy_prefixes_to_title($title, $id = null) {
// 只有在前端，并且非单个页面，才对标题进行更改
if (!is_admin() && !is_single() && $id) {
// 先获取meta box中的设置项
$prefixes_setting = get_post_meta($id, 'titles_moshi', true);
if($prefixes_setting == 'img') {
$selected_img = get_post_meta($id, 'img', true);
$img_url ='';
switch ($selected_img) {
case 'shice':
$img_url = 'https://www.vxras.com/wp-content/plugins/DearLicy/assets/img/shice.svg';
break;
case 'shoufa':
$img_url = 'https://www.vxras.com/wp-content/plugins/DearLicy/assets/img/10001.svg';
break;
case 'dujia':
$img_url = 'https://www.vxras.com/wp-content/plugins/DearLicy/assets/img/10002.svg';
break;
}
if(!empty($img_url)) {
$title = "<img src='$img_url' alt='$img_url' style=' height: 20px; pointer-events: none;margin-right: 3px;'/>" . $title;
}
} else {
// 对保存的文字前缀进行处理
$prefix_text = get_post_meta($id, 'text', true);
$prefix_bg_color = get_post_meta($id, 'text_bg_color', true);
if (!empty($prefix_text)) {
$title = "<span class='DearLicy_prefix ". esc_attr($prefix_bg_color) ."'>" . esc_html($prefix_text) . "</span> " . $title;
}
}
}
return $title;
}
add_filter('the_title', 'apply_dearlicy_prefixes_to_title', 10, 2);CSS代码
.DearLicy_prefix{
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
border-radius: 5px;
padding: 5px 4px;
margin-right: 3px;
height: 19px;
font-size: 12px;
top: -3px;
clip-path: polygon(7% 0, 99% 0, 93% 100%, 0 100%);
}
.DearLicy_prefix:after, .DearLicy_prefix:after {
position: absolute;
content: " ";
display: block;
left: -100%;
top: -5px;
width: 15px;
height: 145%;
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
animation: sweepTitle 3s ease-in-out infinite;
transform: rotate(28deg);
}
@keyframes sweepTitle {
0% {
left: -100%
}
100% {
left: 100%
}
}5.子比主题美化 右上角炫彩会员背景修改
![图片[4]-本站装修-九块九源码](https://www.9k9y.cn/wp-content/uploads/2025/07/image-4.png)
复制下方代码添加到后台 自定义代码 css样式中就可以了
.pay<a target="_blank" href="https://vip.lzzcc.cn/tag/vip" title="View all posts in vip">vip</a>-icon{color: #ffffff;--this-color: #ffffff;background:linear-gradient(135deg,#ff7faf91 10%,#43b2ff 100%);}.<a href="https://vip.lzzcc.cn/tag/vip" title="更多关于 vip 的文章-大海资源库" target="_blank">vip</a>-theme1{background:linear-gradient(135deg,#ff7faf91 10%,#43b2ff 100%);}.vip-theme2{background:linear-gradient(43deg,#ff6ac3 0%,#465dff 46%,#72e699 100%);color:#e4e2fb;}![图片[5]-本站装修-九块九源码](https://www.9k9y.cn/wp-content/uploads/2025/07/image-5-1024x513.png)
教程如下：
首先我们要知道这个页面一共有2两个文件的代码，一个是CSS和一个PHP也就是子比PHP文件
我先说一下教程，我们将PHP文件放到/wp-content/themes/zibll/pages这个目录下面，然后你们打开上传的php文件，找到底部引入的CSS目录，请将目录改成你的即可，我直接分享文件，我就不放代码了！
子比主题美化 – 添加一个VIP会员详情页面
6.子比主题 – 用户中心添加UID、注册时间功能
![图片[6]-本站装修-九块九源码](https://www.9k9y.cn/wp-content/uploads/2025/07/image-6-1024x567.png)
将下面的代码放到 /wp-content/themes/zibll/functions.php 或者 func.php 文件即可
/*
* 定义用于显示用户ID的函数
* 'but'是配合函数赋予class样式'but'在子比主题内通常是按钮样式可配合c-blue或jb-pink赋予色彩
* c系列为透明背景，颜色有c-blue、c-blue-2、c-cyan、c-gray、c-green、c-green-2、c-purple、c-purple-2、c-red、c-red-2、c-theme、c-white、c-yellow、c-yellow-2
* jb系列为非透明渐变色背景，颜色有pay-tag、jb-red、jb-pink、jb-yellow、jb-blue、jb-cyan、jb-green、jb-purple、jb-vip1、jb-vip2
*/
function ZbTool_user_id_to_desc($desc, $user_id) {
// 初始化变量
$day = true; // 可以根据需要进行动态设置
$uid = true; // 可以根据需要进行动态设置
$pay_price = true; // 可以根据需要进行动态设置
$demo = true; // 可以根据需要进行动态设置
// 初始化输出变量
$output = [];
// 判断 uid 为 true
if ($uid) {
$icon = '<svg class="icon" aria-hidden="true"><use xlink:href="#icon-tag-color"></use></svg>'; // 图标 可自行更换
$but = 'UID：' . esc_html($user_id);
$class = 'c-red';
$output[] = '<span class="but ' . esc_attr($class) . '">' . $icon . $but . '</span>';
}
// 判断 day 为 true
if ($day) {
$icon = ''; // 图标 如果有需要的话
$but = zib_get_user_join_day_desc($user_id, 'but c-cyan'); // 获取用户加入天数描述
$class = '';
$output[] = $but;
}
// 判断 pay_price 为 true
if ($pay_price) {
$icon = ''; // 图标 可自行更换
$but = zibpay_get_user_pay_price($user_id, 'pay_price');
$class = 'jb-vip2';
$output[] = '<span class="but ' . esc_attr($class) . '">总消费：' . esc_html($but) . '</span>';
}
// 判断 demo 为 true
if ($demo) {
$icon = ''; // 图标 可自行更换
$but = '我是添加样式的演示~';
$class = 'c-purple';
$output[] = '<span class="but ' . esc_attr($class) . '">' . esc_html($but) . '</span>';
}
// 将生成的内容添加到原始描述
$desc = implode(' ', $output) . ' ' . $desc;
return $desc;
}
// 添加过滤器
add_filter('user_page_header_desc', 'ZbTool_user_id_to_desc', 10, 2);
add_filter('author_header_identity', 'ZbTool_user_id_to_desc', 10, 2);7.子比美化 – 灵动岛美化样式
![图片[7]-本站装修-九块九源码](https://www.9k9y.cn/wp-content/uploads/2025/07/image-7-1024x474.png)
CSS
.dynamic-island:hover img {width:30px; height:30px;;}
.bars {display:flex;align-items:center; justify-content:flex-end; gap:3px;}
.bar {width:2px;height:13px;background-color:green;animation:bounce 1s infinite ease-in-out;animation-direction:alternate;}
.bar:nth-child(1) {animation-duration:1s;}
.bar:nth-child(2) {animation-duration:0.9s;}
.bar:nth-child(3) {animation-duration:0.8s;}
.bar:nth-child(4) {animation-duration:0.7s;}
.bar:nth-child(5) {animation-duration:0.6s;}
.bar:nth-child(6) {animation-duration:0.9s;}
.bar:nth-child(7) {animation-duration:0.7s;}
.dynamic-island {position:fixed;top:80px;left:50%;transform:translateX(-50%) scale(0); transform-origin:center;width:auto;max-width:80%;height:40px;background-color:#000;border-radius:25px; color:white;display:flex;align-items:center;justify-content:space-between; transition:transform 0.4s ease-in-out,height 0.6s ease-in-out,border-radius 0.6s ease-in-out,box-shadow 0.5s ease-in-out,opacity 0.5s ease-in-out;overflow:visible; z-index:1000;padding-left:35px; padding-right:20px; opacity:0;box-shadow:0 0px 10px rgba(0,0,0,0.45);;}
.dynamic-island.active {transform:translateX(-50%) scale(1); opacity:1;}
.dynamic-island.inactive {transform:translateX(-50%) scale(0); opacity:0;}
.island-content {opacity:0;transition:opacity 0.9s ease-in-out,filter 0.8s ease-in-out; font-weight:bold; flex-grow:1; text-align:right; width:100%;}
.dynamic-island.active .island-content {opacity:1;}
.dynamic-island img {position:absolute;left:10px; width:20px; height:20px; object-fit:cover; transition:height 0.8s ease-in-out,width 0.8s ease-in-out,filter 0.8s ease-in-out;}
.dynamic-island:hover {height:60px;border-radius:50px;}
@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;}
;}自定义html
<div class="dynamic-island inactive" id="dynamicIsland" style="opacity: 0;">
<img src="https://img.alicdn.com/imgextra/i1/2210123621994/O1CN01lajerM1QbIl9aoHcJ_!!2210123621994.png" alt="通知图标" width="30" height="30">
<div class="island-content">
<div class="bars" style="line-height: 50px; margin: 0;">
<p style="line-height: 50px; margin: 0; font-size: 12px; padding-right: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"> 欢迎访问***博客</p>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</div>
</div>func.php
function add_dynamic_island_script() {
?>
<script type="text/javascript">
window.onload = function() {
triggerIsland();
let title;
const currentUrl = window.location.pathname;
if (currentUrl.includes('/message/')) {
document.querySelector('.bars p').innerText = "正在访问消息页面";
} else if (currentUrl.includes('/user/')) {
document.querySelector('.bars p').innerText = "欢迎来到用户中心";
} else if (document.body.classList.contains('home') || document.body.classList.contains('front-page')) {
document.querySelector('.bars p').innerText = "欢迎来到<?php echo get_bloginfo('name'); ?>";
} else if (document.body.classList.contains('single')) {
title = "<?php echo addslashes(html_entity_decode(get_the_title())); ?>";
document.querySelector('.bars p').innerText = "正在访问：" + title;
} else if (document.body.classList.contains('category')) {
const category = "<?php echo addslashes(html_entity_decode(get_queried_object()->name)); ?>";
document.querySelector('.bars p').innerText = "正在访问：" + category + " 分类";
} else if (document.body.classList.contains('page')) {
title = "<?php echo addslashes(html_entity_decode(get_the_title())); ?>";
document.querySelector('.bars p').innerText = "正在访问：" + title;
} else {
document.querySelector('.bars p').innerText = "欢迎来到<?php echo get_bloginfo('name'); ?>";
}
}
;
function triggerIsland() {
const island = document.getElementById('dynamicIsland');
if (island) {
island.style.opacity = 1;
island.classList.add('active')
island.classList.remove('inactive');
setTimeout(() => {
closeIsland();
}
, 4000);
}
}
function closeIsland() {
const island = document.getElementById('dynamicIsland')
if (island) {
island.classList.remove('active');
island.classList.add('inactive');
setTimeout(() => {
island.style.opacity = 0;
}
, 600);
}
}
</script>
<?php
}
add_action('wp_footer', 'add_dynamic_island_script');8.子比美化 – 文章卡片下载按钮样式美化
![图片[8]-本站装修-九块九源码](https://www.9k9y.cn/wp-content/uploads/2025/07/image-8-1024x583.png)
首先一共三步，有两行php代码和一个css代码，话不多说直接开始教程
第一个PHP代码放到子比文件：/wp-content/themes/zibll/inc/functions/zib-posts-list.php的大概268行。
//获取文章列表的底部meta
function zib_get_posts_list_meta($show_author = true, $is_card = false, $post = null)
{在这个代码后边添加
$get_permalink = get_permalink();//添加文章链接第二个php代码放在大概310行，
$html = '<div class="item-meta muted-2-color flex jsb ac">';
$html .= $meta_left;
$html .= $meta_right;
$html .= '</div>';这个代码后添加
$html = '<a class="down" target="_blank" href="' . $get_permalink . '">下载</a>';//添加下载按钮最后CSS代码，直接放到子比主题=>>自定义CSS样式即可！
background: linear-gradient(to right, #4f6dee, #67bdf9);这个是颜色，自己需求改。
/*文章卡片下载按钮*/
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;
}9.子比美化丨好看的评论区美化代码
![图片[9]-本站装修-九块九源码](https://www.9k9y.cn/wp-content/uploads/2025/07/image-9.png)
代码放置位置：子比主题设置==》全局功能==》自定义css样式
/** 评论框美化 开始**/
body{--acg-color:#fff8fa;--acg-color2:#f8fdff;}.dark-theme{--acg-color:#323335;--acg-color2:#323335;}#postcomments .commentlist .comment{border-top:1px solid rgb(50 50 50 / 0%);border-radius:15px;margin:0 15px 15px;border:1px solid;display:flow-root;background-image:url(https://www.aiik.cn/api/img/pl_blue.png);border-color:#71baff80;background-color:var(--acg-color2);}#postcomments .commentlist .comment+.comment{border-top:1px solid rgb(50 50 50 / 0%);padding:0 0 15px 0;border-radius:15px;margin:0 15px 15px;border:1px solid;display:flow-root;padding:10px;}#postcomments .commentlist .comment+.comment:nth-child(odd){background-image:url(https://www.aiik.cn/api/img/pl_red.png);border-color:#ff8bb5;background-color:var(--acg-color);}#postcomments .commentlist .comment+.comment:nth-child(even){background-image:url(https://www.aiik.cn/api/img/pl_blue.png);border-color:#71baff80;background-color:var(--acg-color2);}#postcomments .children{background:rgb(116 116 116 / 0%);margin-bottom:6px;border-radius:15px;display:flow-root;}#postcomments .children:nth-child(even){background-image:url(https://www.aiik.cn/api/img/pl_blue.png);border-color:#71baff80;}#postcomments .children:nth-child(odd){background-image:url(https://www.aiik.cn/api/img/pl_red.png);border-color:#ff8bb5;background-color:var(--acg-color);}
/** 评论框美化 结束**/10.子比主题丨给文章列表加一个浮动动态效果
将下面代码放到子比主题=>自定义CSS即可，我默认的是白色的，颜色可以调，rgba(255,255,255,0.35)，这是rgb颜色代码，是白色的代码，如果需要其他颜色可以去网上找rgb网站代码然后把下面的里面的数字替换即可！！
/*列表加载<a target="_blank" href="https://vip.lzzcc.cn/tag/%e7%89%b9%e6%95%88" title="View all posts in 特效">特效</a>dahkk.cn*/
.tab-content .posts-item:not(article),.posts-row .posts-item:not(article){transition:all 0.2s}@keyframes index-link-active{0%{transform:perspective(2000px) rotateX(0) rotateY(0) translateZ(0)}16%{transform:perspective(2000px) rotateX(10deg) rotateY(5deg) translateZ(32px)}100%{transform:perspective(2000px) rotateX(0) rotateY(0) translateZ(65px)}}.tab-content .posts-item:not(article):hover,.posts-row .posts-item:not(article):hover{opacity:1;z-index:1;border-radius:20px;box-shadow:0 8px 10px rgba(255,255,255,0.35);animation:index-link-active 1s cubic-bezier(0.315,0.605,0.375,0.925) forwards}11.子比主题头像晃动代码–腾飞https://www.tfbkw.com/73.html
![图片[10]-本站装修-九块九源码](https://www.9k9y.cn/wp-content/uploads/2025/07/O1CN010YDeXw1QbInHWyRVy_2210123621994.gif)
将下面的代码放到：子比主题–>>自定义CSS样式即可！
/*小工具头像晃动 huliku.com*/
.user-avatar .avatar-img, .img-ip:hover, .w-a-info img {
-webkit-animation: swing 3s .4s ease both;
-moz-animation: swing 3s .4s ease both;
}
@-webkit-keyframes swing {
20%, 40%, 60%, 80%, 100% {
-webkit-transform-origin:top center
}
20% {
-webkit-transform:rotate(15deg)
}
40% {
-webkit-transform:rotate(-10deg)
}
60% {
-webkit-transform:rotate(5deg)
}
80% {
-webkit-transform:rotate(-5deg)
}
100% {
-webkit-transform:rotate(0deg)
}
}
@-moz-keyframes swing {
20%, 40%, 60%, 80%, 100% {
-moz-transform-origin:top center
}
20% {
-moz-transform:rotate(15deg)
}
40% {
-moz-transform:rotate(-10deg)
}
60% {
-moz-transform:rotate(5deg)
}
80% {
-moz-transform:rotate(-5deg)
}
100% {
-moz-transform:rotate(0deg)
}
}12.子比主题 – 文章详情页带Tab切换美化——–已移除
![图片[11]-本站装修-九块九源码](https://www.9k9y.cn/wp-content/uploads/2025/07/tengfei_down-1024x434.gif)
一共两个代码，一个是PHP代码，一个是CSS代码，PHP代码里面我已经引入了CSS文件，你可以引入文件也可以放到：子比主题–>>自定义CSS样式即可！
记得关闭：子比主题–>>文章页面–>>作者信息板块，要不然不美观
PHP代码
定位：/wp-content/themes/zibll/inc/functions/zib-single.php文件，我们找到下面的函数，如下图
![图片[12]-本站装修-九块九源码](https://www.9k9y.cn/wp-content/uploads/2025/07/tengfei_down-1.jpg)
然后我们将一整块替换我下面的代码，直接替换我修改过的代码
function zib_single() {
zib_single_header();
do_action('zib_single_before');
wp_enqueue_style('tengfei-single-top-style', '/wp-content/themes/ZibTF/css/tengfei/single_top.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"></use></svg> 详情</div>
<div class="tab" data-target="#commentscontent"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-comment"></use></svg> 评论</div>
<div class="tab" data-target="#accordionhelpcontent"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-like"></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 = [
'如何下载资源？' => '您可以通过搜索或浏览分类列表来寻觅您期望下载的资源。随后，点击资源介绍页右侧的下载链接按钮，依据提示信息进行操作即可。',
'是否需要充值才能下载？' => '大部分资源可积分免费下载，部分资源须付费才能下载。',
'下载的资源是否有版权？' => '本网站提供的下载资源均为网络搜集，仅供个人学习和交流使用。对于版权问题，请用户自行判断并承担相应责任。',
];
$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.'" 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代码
.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;};}.tab2_content.active{display:block;}.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{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);}13.子比主题 – 外链Go页面样式代码
喜欢哪一款直接替换：/wp-content/themes/zibll/go.php这个文件的所有代码即可！
![图片[13]-本站装修-九块九源码](https://www.9k9y.cn/wp-content/uploads/2025/07/tengfei_down-1-1024x631.gif)
<?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;
}
@session_start();
$t_url = '';
if (!empty($_SESSION['GOLINK'])) {
$t_url = $_SESSION['GOLINK'];
} elseif (isset($_GET['url'])) {
$t_url = $_GET['url'];
} elseif (preg_match('/^url=(.*)$/i', $_SERVER["QUERY_STRING"], $m)) {
$t_url = $m[1];
}
if (!empty($t_url)) {
if ($t_url == base64_encode(base64_decode($t_url))) {
$t_url = base64_decode($t_url);
}
$t_url = htmlspecialchars(urldecode($t_url));
preg_match('/^(http|https|thunder|qqdl|ed2k|Flashget|qbrowser):\/\//i', $t_url, $matches);
$wiiui_title = function_exists('get_bloginfo') ? get_bloginfo('name') : '本站';
if ($matches) {
$url = $t_url;
} else {
preg_match('/\./i', $t_url, $matche);
if ($matche) {
$url = 'http://' . $t_url;
} else {
$url = 'http://' . $_SERVER['HTTP_HOST'];
}
}
} else {
$wiiui_title = function_exists('get_bloginfo') ? get_bloginfo('name') : '本站';
$url = 'http://' . $_SERVER['HTTP_HOST'];
}
$url = str_replace('&', '&', $url);
$site_url = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on' ? 'https://' : 'http://') . $_SERVER['HTTP_HOST'];
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>安全跳转 - <?php echo $wiiui_title; ?></title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<style>
body {
width: 100%;
height: 100vh;
background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
overflow: hidden;
margin: 0;
}
.main {
width: 100vw;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
z-index: 10;
position: relative;
}
.card {
background: rgba(255,255,255,0.05);
backdrop-filter: blur(10px);
border-radius: 20px;
border: 1px solid rgba(255,255,255,0.1);
padding: 30px;
max-width: 500px;
width: 100%;
text-align: center;
box-shadow: 0 15px 35px rgba(0,0,0,0.2);
margin-bottom: 30px;
position: relative;
z-index: 2;
}
.card h2 {
color: #fff;
margin-bottom: 25px;
font-weight: 600;
font-size: 28px;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
.loader-container {
position: relative;
margin: 30px 0;
}
.circle {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
margin: 0 auto;
background-image: linear-gradient(0deg,
rgb(47,102,255),
rgb(153,64,255) 30%,
rgb(238,55,255) 60%,
rgb(255,0,76) 100%);
border-radius: 50%;
animation: rotate 1.5s linear infinite;
box-shadow: 0 0 50px rgba(153,64,255,0.5);
position: relative;
}
.circle::before {
content: "";
position: absolute;
width: 200px;
height: 200px;
left: 0;
top: 0;
background-image: linear-gradient(0deg,
rgb(47,102,255),
rgb(153,64,255) 30%,
rgb(238,55,255) 60%,
rgb(255,0,76) 100%);
border-radius: 50%;
filter: blur(35px);
opacity: 0.7;
z-index: 1;
}
.circle::after {
content: "";
position: absolute;
left: 25px; top: 25px;
width: 150px;
height: 150px;
background: rgba(15,12,41,0.82);
border-radius: 50%;
z-index: 2;
}
.countdown {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #fff;
font-size: 42px;
font-weight: 700;
z-index: 5;
text-shadow: 0 0 10px rgba(255,255,255,0.5);
}
.info-box {
background: rgba(0,0,0,0.2);
border-radius: 12px;
padding: 15px;
margin: 20px 0 10px 0;
}
.info-box p {
color: #fff;
margin: 8px 0;
font-size: 16px;
}
.info-box .url {
color: #6cff6c;
font-weight: 500;
word-break: break-all;
font-size: 14px;
}
.security-info {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
color: #ffc107;
}
.security-info i {
margin-right: 10px;
font-size: 20px;
}
.tips {
color: rgba(255,255,255,0.85);
font-size: 14px;
margin-top: 10px;
line-height: 1.6;
}
.btn-cancel {
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
color: #fff;
padding: 10px 25px;
border-radius: 50px;
font-weight: 500;
margin-top: 24px;
transition: all 0.3s ease;
cursor: pointer;
outline: none;
border: none;
font-size: 16px;
position: relative;
z-index: 9; /* 保证按钮在最上层 */
}
.btn-cancel:hover, .btn-cancel:focus {
background: rgba(255,255,255,0.2);
transform: translateY(-2px);
}
.footer {
color: rgba(255,255,255,0.6);
text-align: center;
font-size: 14px;
margin-top: 12px;
z-index:2;
position: relative;
}
@keyframes rotate {
0% { transform: rotate(0deg);}
100% { transform: rotate(360deg);}
}
.particles {position: absolute;top:0;left:0;width:100vw;height:100vh;z-index:1;}
.particle {position:absolute;border-radius:50%;background:rgba(255,255,255,0.07);}
@media (max-width: 576px) {
.card {padding: 15px;}
.circle {width: 120px;height: 120px;}
.circle::before {width: 120px;height: 120px;}
.circle::after {width: 85px;height: 85px;left: 17.5px;top: 17.5px;}
.countdown {font-size: 28px;}
}
</style>
</head>
<body>
<div class="particles" id="particles"></div>
<div class="main">
<div class="card">
<h2><i class="fas fa-shield-alt"></i> 安全跳转页面</h2>
<div class="loader-container" style="height:220px;">
<div class="circle"></div>
<div class="countdown" id="second">3s</div>
</div>
<div class="info-box">
<p><i class="fas fa-exclamation-triangle"></i> 网络交易需谨慎，正在跳转到目标网址</p>
<p>目标网址：<span class="url" id="targetUrl"><?php echo $url;?></span></p>
</div>
<div class="security-info">
<i class="fas fa-lock"></i>
<span>安全检测通过，此跳转经过安全验证</span>
</div>
<p class="tips">
请注意：该跳转由第三方网站提供，请仔细核对网址，确保访问的是您信任的网站。
如有疑问，请勿继续访问。
</p>
<button type="button" class="btn-cancel" id="cancelBtn">
<i class="fas fa-ban"></i> 取消跳转
</button>
</div>
<div class="footer">
<p>安全跳转系统 © <?php echo date('Y');?> | 保护您的网络安全</p>
</div>
</div>
<script>
// 粒子背景
(function () {
const container = document.getElementById('particles');
for(let i=0;i<44;i++){
let p = document.createElement('div');
p.classList.add('particle');
let size = Math.random()*5+2;
let posX = Math.random()*100,posY=Math.random()*100;
p.style.width = size+"px";p.style.height = size+"px";
p.style.left = posX+"vw";p.style.top = posY+"vh";
let duration = Math.random()*20+10;
p.style.animation = `float ${duration}s linear infinite`;
container.appendChild(p);
}
})();
// 跳转与按钮
var timeNum = 3, timer = null, jumped = false;
var turl = <?php echo json_encode($url); ?>;
document.addEventListener("DOMContentLoaded", function(){
// 确保按钮层级最高
var btn = document.getElementById('cancelBtn');
btn.style.position = 'relative';
btn.style.zIndex = 99;
// 倒计时逻辑
var sec = document.getElementById("second");
var i = timeNum;
sec.innerHTML = i + "s";
timer = setInterval(function(){
--i;
sec.innerHTML = i + "s";
if(i <= 0){
clearInterval(timer);
if(jumped)return;
jumped = true;
window.location.href = turl;
}
},1000);
// 绑定取消按钮
btn.addEventListener('click', function(e){
e.preventDefault();
if(jumped)return;
jumped = true;
clearInterval(timer);
sec.innerHTML = "已取消";
setTimeout(function () {
var ref = document.referrer, cur = location.href;
var site_url = <?php echo json_encode($site_url); ?>;
if(ref && ref !== cur && (ref.indexOf(location.host)!==-1 || ref.indexOf("http")===0)){
window.location.href = ref;
} else if(window.history.length > 1){
window.history.back();
} else if(window.opener){
window.close();
} else {
window.location.href = site_url;
}
}, 420);
}, false);
// 补充目标url显示
document.getElementById('targetUrl').textContent = turl;
});
</script>
</body>
</html>14.子比主题美化 – 新发布文章列表角标（NEW）
![图片[14]-本站装修-九块九源码](https://www.9k9y.cn/wp-content/uploads/2025/07/image-10.png)
在主题目录 func.php 文件添加如下代码。
（func.php = functions.php）看过狐狸以前的文章应该都懂，以后就不解释了。
文件路径：/www/wwwroot/baicaima.com/wp-content/themes/zibll/functions.php
/*新文章发布角标 */
function add_zbfox_new_post_label($title, $id) {
if (!is_admin() && !is_single()) {
$post_time = get_the_time('U', $id);
if (time() - $post_time <= 24 * 60 * 60) {
$title .= ' <div class="zbfox_new_post_label">NEW</div>';
}
}
return $title;
}
add_filter('the_title', 'add_zbfox_new_post_label', 10, 2);最新版CSS代码添加到子比主题后台设置->自定义代码->自定义CSS样式
/*新文章发布图标样式 */
.posts-item{
position: relative;
overflow: visible;
}
.zbfox_new_post_label{
position: absolute;
top: 15px;
right: 0;
padding: 5px 10px;
background: #4f15ff;
box-shadow: -1px 2px 4px rgba(0, 0, 0, 0.5);
/*url: huliku.com*/
color: #fff;
font-size: 13px;
font-weight: 900;
border-radius: 5px 0 0 5px;
}
.posts-item:hover .zbfox_new_post_label {
opacity: 0;
transition: opacity 0.5s ease;
}
.zbfox_new_post_label:before {
position: absolute;
content: " ";
display: block;
width: 7px;
height: 110%;
padding: 0 0 7px;
top: 0;
right: -7px;
background: inherit;
border-radius: 0 5px 5px 0;
}
.zbfox_new_post_label:after {
position: absolute;
content: " ";
display: block;
width: 5px;
height: 5px;
background: rgba(0, 0, 0, 0.35);
bottom: -3px;
right: -5px;
border-radius: 0 5px 5px 0;
}15.子比美化 – 自定义右键菜单
![图片[15]-本站装修-九块九源码](https://www.9k9y.cn/wp-content/uploads/2025/07/image-11.png)
将下面的代码放到：子比主题–>>自定义底部HTML代码即可，或者也可以放到footer.php文件里面也可以！
记得修改一下里面的网站地址，要不然用的话都是本站的地址！
我选择的是网站自定义底部，不用去到服务器修改，后台选择即可
<!-- 右键美化 -->
<style type="text/css">
a {text-decoration: none;}
div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba
(0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9; border-radius: 8px;}
div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}
div.usercm ul li{margin:0px;padding:0px;line-height:35px;}
div.usercm ul li a{color:#666;padding:0 15px;display:block}
div.usercm ul li a:hover{color:#fff;background:rgba(170,222,18,0.88)}
div.usercm ul li a i{margin-right:10px}
a.disabled{color:#c8c8c8!important;cursor:not-allowed}
a.disabled:hover{background-color:rgba(255,11,11,0)!important}
div.usercm{background:#fff !important;}
</style>
<div class="usercm" style="left: 199px; top: 5px; display: none;">
<ul>
<li><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" onclick="getSelect();"><i class="fa fa-copy fa-fw"></i><span>复制</span></a></li>
<li><a href="javascript:window.location.reload();" rel="external nofollow" ><i class="fa fa-refresh fa-fw"></i><span>刷新</span></a></li>
<li><a href="/" rel="external nofollow" ><i class="fa fa-home fa-fw"></i><span>首页</span></a></li>
<li><a href="javascript:history.go(1);" rel="external nofollow" ><i class="fa fa-arrow-right fa-fw"></i><span>前进</span></a></li>
<li><a href="javascript:history.go(-1);" rel="external nofollow" ><i class="fa fa-arrow-left fa-fw"></i><span>后退</span></a></li>
<li><a href="/%e5%8f%8b%e6%83%85%e9%93%be%e6%8e%a5/"><i class="fa fa-copyright"></i><span>友情链接</span></a></li>
<li><a href="/wp-sitemap.xml"><i class="fa fa-copyright"></i><span>网站地图</span></a></li>
</ul>
</div>
<script type="text/javascript">
(function(a) {
a.extend({
mouseMoveShow: function(b) {
var d = 0,
c = 0,
h = 0,
k = 0,
e = 0,
f = 0;
a(window).mousemove(function(g) {
d = a(window).width();
c = a(window).height();
h = g.clientX;
k = g.clientY;
e = g.pageX;
f = g.pageY;
h + a(b).width() >= d && (e = e - a(b).width() - 5);
k + a(b).height() >= c && (f = f - a(b).height() - 5);
a("html").on({
contextmenu: function(c) {
3 == c.which && a(b).css({
left: e,
top: f
}).show()
},
click: function() {
a(b).hide()
}
})
})
},
disabledContextMenu: function() {
window.oncontextmenu = function() {
return !1
}
}
})
})(jQuery);
function getSelect() {
"" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("请选择需要百度的内容！") : document.execCommand("Copy")
}
function baiduSearch() {
var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
"" == a ? layer.msg("请选择需要搜索的内容！") : window.open("https://daixm.daixb.top/?s=" + a)
}
$(function() {
for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) {
d = !1;
break
}
d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu())
});
</script>
<!-- 右键结束 -->16.子比美化 – 用户中心头像圆形美化
![图片[16]-本站装修-九块九源码](https://www.9k9y.cn/wp-content/uploads/2025/07/image-12.png)
将下面代码复制，放在子比设置后台的自定义CSS
/*用户中心头像圆形开始*/
.author-header .avatar-img {
--this-size: 95px;
}
.author-header .avatar-img .avatar {
border-radius: 50px;
}
.item-meta .avatar-mini {
transform: translateY(-6px);
right: -3px;
}
.forum-posts {
--this-padding: 15px 20px;
padding: var(--this-padding);
display: flex;
transition: .3s;
position: relative;
margin-left: 6px;
}
.user-info {
margin-left: 10px;
}
/*用户中心头像圆形结尾*/17.子比美化-分页按钮美化
![图片[17]-本站装修-九块九源码](https://www.9k9y.cn/wp-content/uploads/2025/07/image-13.png)
把下面代码放到后台自定义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;
}18.子比美化-图片圆角展示
![图片[18]-本站装修-九块九源码](https://www.9k9y.cn/wp-content/uploads/2025/07/image-14.png)
下面的图片是圆角，代码很简单，直接将代码放到后台-自定义代码-自定义CSS即可
最后面13px是圆角的大小，可根据自己喜欢设置大小
.wp-posts-content img {border-radius: 13px};19.页脚
![图片[19]-本站装修-九块九源码](https://www.9k9y.cn/wp-content/uploads/2025/07/image-15-1024x247.png)
将一下代买替换footeh
将一下css放到/wp-content/themes/zibll/css
将一下图片文件放在你自定义的文件夹修改一下里面的路径即可
页脚
提取码:9k9y
//获取评论数量
function zfunc_comments_users($postid=0,$which=0) {
$comments = get_comments('status=approve&type=comment&post_id='.$postid); //获取文章的所有评论
if ($comments) {
$i=0; $j=0; $commentusers=array();
foreach ($comments as $comment) {
++$i;
if ($i==1) { $commentusers[] = $comment->comment_author_email; ++$j; }
if ( !in_array($comment->comment_author_email, $commentusers) ) {
$commentusers[] = $comment->comment_author_email;
++$j;
}
}
$output = array($j,$i);
$which = ($which == 0) ? 0 : 1;
return $output[$which]; //返回评论人数
}
return 0; //没有评论返回0
};
// 随机文章
function random_posts(
$posts_num=5,$before='<li>',$after='</li>'){
global $wpdb;
$sql = "SELECT ID, post_title,guid
FROM $wpdb->posts
WHERE post_status = 'publish' ";
$sql .= "AND post_title != '' ";
$sql .= "AND post_password ='' ";
$sql .= "AND post_type = 'post' ";
$sql .= "ORDER BY RAND() LIMIT 0 , $posts_num ";
$randposts = $wpdb->get_results($sql);
$output = '';
foreach ($randposts as $randpost) {
$post_title = stripslashes($randpost->post_title);
$permalink = get_permalink($randpost->ID);
$output .= $before.'<a class="item-foot" href="'
. $permalink . '" rel="bookmark" data-toggle="tooltip" data-original-title="随机文章：';
$output .= $post_title . '"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-lianjie"></use></svg><span id="wz">' . $post_title . '</span></a>';
$output .= $after;
}
echo '<div id="footgundong" class="wz"><ul>'.$output.'</ul></div>';
}
//弹窗提醒
function dorzs() {
echo '<script src="/wp-content/themes/zibll/jstop/sweetalert.min.js"></script>';
echo '<script src="/wp-content/themes/zibll/csstop/sweetalert.css"></script>';
echo '<script>$(document).on("click","#dorzs",function(){swal({title:"发工资啦",text:"哇！懒人超级开心的！！",icon:"/wp-content/themes/zibll/tp/涨工资.jpg",buttons:{weixin:{text:"微信",value:"weixin",},zfb:{text:"支付宝",value:"zfb",},dsmd:{text:"打赏名单",value:"dsmd",},},}).then(function(value){if(value=="weixin"){swal({title:"感谢打赏！",text:"感谢您的微信打赏，我会努力做得更好！",button:false,icon:"
图片链接"});}else if(value=="zfb"){swal({title:"感谢打赏！",text:"感谢您的支付宝打赏，我会努力做得更好！",button:false,icon:"图片链接"});}else if(value=="dsmd"){swal({title:"打赏名单",text:"【打赏名单暂未开放】",icon:"图片链接",button:false,});}});});</script>';
}
add_action( 'wp_footer', 'dorzs', 100 );
//点赞统计
function dz($post_id){
global $wpdb;
$sql = "SELECT SUM(`meta_value`) as num FROM `wp_postmeta` WHERE `meta_key`='like' AND `post_id`=$post_id";
$results = $wpdb->get_results($sql);
echo $results[0]->num;
}将以上代码放入function 或者func文件即可
20.文章顶部信息
![图片[20]-本站装修-九块九源码](https://www.9k9y.cn/wp-content/uploads/2025/07/image-17-1024x251.png)
将下面插件安装在后台即可
提取码:9k9y
21.给网站顶端加一个
![图片[21]-本站装修-九块九源码](https://www.9k9y.cn/wp-content/uploads/2025/07/image-18-1024x261.png)
放进去function 或者func
<?php
// 注册小工具
Zib_CFSwidget::create('custom_homepage_widget', [
'title' => ' A首页推荐卡片',
'zib_show' => true,
'description' => '滚动图标推荐卡片，包括标题、分类按钮和关于我。',
'callback' => 'custom_homepage_widget',
'fields' => [
['id' => 'title_line1', 'type' => 'text', 'title' => '标题第一行'],
['id' => 'title_line2', 'type' => 'text', 'title' => '标题第二行'],
['id' => 'subtitle', 'type' => 'text', 'title' => '副标题', 'default' => 'WWW.DAIXB.TOP'],
['id' => 'category_text_1', 'type' => 'text', 'title' => '第一个样式按钮文本'],
['id' => 'category_id_1', 'type' => 'number', 'title' => '第一个样式分类ID', 'default' => 0],
['id' => 'category_text_2', 'type' => 'text', 'title' => '第二个样式按钮文本'],
['id' => 'category_id_2', 'type' => 'number', 'title' => '第二个样式分类ID', 'default' => 0],
['id' => 'category_text_3', 'type' => 'text', 'title' => '第三个样式按钮文本'],
['id' => 'category_id_3', 'type' => 'number', 'title' => '第三个样式分类ID', 'default' => 0],
[
'id' => 'about_items',
'type' => 'group',
'title' => '关于我卡片列表',
'button' => '添加一个关于我条目',
'repeatable' => true,
'fields' => [
['id' => 'title', 'type' => 'text', 'title' => '标题'],
['id' => 'image', 'type' => 'upload', 'title' => '图片', 'preview' => true],
['id' => 'link', 'type' => 'text', 'title' => '按钮链接'],
]
],
// 三个单独字段，id唯一
['id' => 'extra_input_1', 'type' => 'text', 'title' => '左下角文字'],
['id' => 'extra_input_2', 'type' => 'text', 'title' => '按钮名字'],
['id' => 'extra_input_3', 'type' => 'text', 'title' => '按钮跳转'],
]
]);
// ✅ 添加这个回调函数到 functions.php 或当前主题文件
function custom_homepage_widget($args, $instance) {
// echo $args['before_widget'];
?>
<div class="content-wrap">
<div class="content-layout">
<div class="content-layout">
<div id="home_top">
<div class="recent-top-post-group" id="recent-top-post-group">
<div class="recent-post-top" id="recent-post-top">
<div id="bannerGroup">
<div id="banners">
<div class="banners-title">
<div class="banners-title-big"><?php echo esc_html($instance['title_line1']); ?></div>
<div class="banners-title-big"><?php echo esc_html($instance['title_line2']); ?></div>
<div class="banners-title-small"><?php echo esc_html($instance['subtitle']); ?></div>
</div>
<div class="tags-group-all">
<div class="tags-group-wrapper">
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#989bf8"><img title="AfterEffects"
onerror="this.onerror=null,this.src="https://bu.dusays.com/2023/03/03/6401a79030db5.png""
class="entered exited"
src="https://p.zhheo.com/20239df3f66615b532ce571eac6d14ff21cf072602.png!cover"></div>
<div class="tags-group-icon" style="background:#fff"><img
src="https://p.zhheo.com/2023e0ded7b724a39f12d59c3dc8fbdc7cbe074202.png!cover" title="Sketch"
onerror="this.onerror=null,this.src="https://bu.dusays.com/2023/03/03/6401a79030db5.png"">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#57b6e6"><img title="Docker"
onerror="this.onerror=null,this.src="https://bu.dusays.com/2023/03/03/6401a79030db5.png""
class="entered exited"
src="https://p.zhheo.com/20231108a540b2862d26f8850172e4ea58ed075102.png!cover"></div>
<div class="tags-group-icon" style="background:#4082c3"><img
src="https://p.zhheo.com/2023e4058a91608ea41751c4f102b131f267075902.png!cover"
title="Photoshop"
onerror="this.onerror=null,this.src="https://bu.dusays.com/2023/03/03/6401a79030db5.png"">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#fff"><img
src="https://p.zhheo.com/20233e777652412247dd57fd9b48cf997c01070702.png!cover"
title="FinalCutPro"
onerror="this.onerror=null,this.src="https://bu.dusays.com/2023/03/03/6401a79030db5.png""
data-ll-status="loading"></div>
<div class="tags-group-icon" style="background:#fff"><img
src="https://p.zhheo.com/20235c0731cd4c0c95fc136a8db961fdf963071502.png!cover" title="Python"
onerror="this.onerror=null,this.src="https://bu.dusays.com/2023/03/03/6401a79030db5.png"">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#eb6840"><img title="Swift"
onerror="this.onerror=null,this.src="https://bu.dusays.com/2023/03/03/6401a79030db5.png""
src="https://p.zhheo.com/202328bbee0b314297917b327df4a704db5c072402.png!cover"
data-ll-status="loading"></div>
<div class="tags-group-icon" style="background:#8f55ba"><img title="Principle"
onerror="this.onerror=null,this.src="https://bu.dusays.com/2023/03/03/6401a79030db5.png""
class="entered exited"
src="https://p.zhheo.com/2023f76570d2770c8e84801f7e107cd911b5073202.png!cover"></div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#f29e39"><img title="illustrator"
onerror="this.onerror=null,this.src="https://bu.dusays.com/2023/03/03/6401a79030db5.png""
src="https://p.zhheo.com/20237359d71b45ab77829cee5972e36f8c30073902.png!cover"
data-ll-status="loading"></div>
<div class="tags-group-icon" style="background:#2c51db"><img
src="https://p.zhheo.com/20237c548846044a20dad68a13c0f0e1502f074602.png!cover" title="CSS3"
onerror="this.onerror=null,this.src="https://bu.dusays.com/2023/03/03/6401a79030db5.png""
data-ll-status="loading"></div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#f7cb4f"><img title="JS"
onerror="this.onerror=null,this.src="https://bu.dusays.com/2023/03/03/6401a79030db5.png""
src="https://cloud-image-host.oss-cn-beijing.aliyuncs.com/img/banners/git.webp"
data-ll-status="loading"></div>
<div class="tags-group-icon" style="background:#e9572b"><img title="HTML"
onerror="this.onerror=null,this.src="https://bu.dusays.com/2023/03/03/6401a79030db5.png""
src="https://p.zhheo.com/202372b4d760fd8a497d442140c295655426070302.png!cover"
data-ll-status="loading"></div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#df5b40"><img title="Git"
onerror="this.onerror=null,this.src="https://bu.dusays.com/2023/03/03/6401a79030db5.png""
src="https://p.zhheo.com/2023ffa5707c4e25b6beb3e6a3d286ede4c6071102.png!cover"
data-ll-status="loading"></div>
<div class="tags-group-icon" style="background:#1f1f1f"><img title="Rhino"
onerror="this.onerror=null,this.src="https://bu.dusays.com/2023/03/03/6401a79030db5.png""
src="https://p.zhheo.com/20231ca53fa0b09a3ff1df89acd7515e9516173302.png!cover"
data-ll-status="loading"></div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#989bf8"><img title="AfterEffects"
onerror="this.onerror=null,this.src="https://bu.dusays.com/2023/03/03/6401a79030db5.png""
class="entered exited"
src="https://p.zhheo.com/20239df3f66615b532ce571eac6d14ff21cf072602.png!cover"></div>
<div class="tags-group-icon" style="background:#fff"><img title="Sketch"
onerror="this.onerror=null,this.src="https://bu.dusays.com/2023/03/03/6401a79030db5.png""
class="entered exited"
src="https://p.zhheo.com/2023e0ded7b724a39f12d59c3dc8fbdc7cbe074202.png!cover"></div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#57b6e6"><img title="Docker"
onerror="this.onerror=null,this.src="https://bu.dusays.com/2023/03/03/6401a79030db5.png""
class="entered exited"
src="https://p.zhheo.com/20231108a540b2862d26f8850172e4ea58ed075102.png!cover"></div>
<div class="tags-group-icon" style="background:#4082c3"><img title="Photoshop"
onerror="this.onerror=null,this.src="https://bu.dusays.com/2023/03/03/6401a79030db5.png""
class="entered exited"
src="https://p.zhheo.com/2023e4058a91608ea41751c4f102b131f267075902.png!cover"></div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#fff"><img title="FinalCutPro"
onerror="this.onerror=null,this.src="https://bu.dusays.com/2023/03/03/6401a79030db5.png""
class="entered exited"
src="https://p.zhheo.com/20233e777652412247dd57fd9b48cf997c01070702.png!cover"></div>
<div class="tags-group-icon" style="background:#fff"><img title="Python"
onerror="this.onerror=null,this.src="https://bu.dusays.com/2023/03/03/6401a79030db5.png""
class="entered exited"
src="https://p.zhheo.com/20235c0731cd4c0c95fc136a8db961fdf963071502.png!cover"></div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#eb6840"><img title="Swift"
onerror="this.onerror=null,this.src="https://bu.dusays.com/2023/03/03/6401a79030db5.png""
class="entered exited"
src="https://p.zhheo.com/202328bbee0b314297917b327df4a704db5c072402.png!cover"></div>
<div class="tags-group-icon" style="background:#8f55ba"><img title="Principle"
onerror="this.onerror=null,this.src="https://bu.dusays.com/2023/03/03/6401a79030db5.png""
class="entered exited"
src="https://p.zhheo.com/2023f76570d2770c8e84801f7e107cd911b5073202.png!cover"></div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#f29e39"><img title="illustrator"
onerror="this.onerror=null,this.src="https://bu.dusays.com/2023/03/03/6401a79030db5.png""
class="entered exited"
src="https://p.zhheo.com/20237359d71b45ab77829cee5972e36f8c30073902.png!cover"></div>
<div class="tags-group-icon" style="background:#2c51db"><img title="CSS3"
onerror="this.onerror=null,this.src="https://bu.dusays.com/2023/03/03/6401a79030db5.png""
class="entered exited"
src="https://p.zhheo.com/20237c548846044a20dad68a13c0f0e1502f074602.png!cover"></div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#f7cb4f"><img
src="https://p.zhheo.com/2023786e7fc488f453d5fb2be760c96185c0075502.png!cover" title="JS"
onerror="this.onerror=null,this.src="https://bu.dusays.com/2023/03/03/6401a79030db5.png"">
</div>
<div class="tags-group-icon" style="background:#e9572b"><img
src="https://p.zhheo.com/202372b4d760fd8a497d442140c295655426070302.png!cover" title="HTML"
onerror="this.onerror=null,this.src="https://bu.dusays.com/2023/03/03/6401a79030db5.png"">
</div>
</div>
<div class="tags-group-icon-pair">
<div class="tags-group-icon" style="background:#df5b40"><img
src="https://p.zhheo.com/2023ffa5707c4e25b6beb3e6a3d286ede4c6071102.png!cover" title="Git"
onerror="this.onerror=null,this.src="https://bu.dusays.com/2023/03/03/6401a79030db5.png"">
</div>
<div class="tags-group-icon" style="background:#1f1f1f"><img
src="https://cloud-image-host.oss-cn-beijing.aliyuncs.com/img/banners/Java.webp" title="Rhino"
onerror="this.onerror=null,this.src="https://bu.dusays.com/2023/03/03/6401a79030db5.png"">
</div>
</div>
</div>
</div> <a id="banner-hover" href="https://www.mnsin.com/go?random" rel="external nofollow"> <i
class="heofont icon-right"></i> <span class="bannerText">随便逛逛<svg class="icon" aria-hidden="true"><use xlink:href="#icon-jiantou"></use></svg></span> </a>
</div>
<div class="categoryGroup">
<?php
// 获取所有分类链接（只查一次）
$all_categories = get_categories(array(
'hide_empty' => true,
));
$category_links = array_map(function($cat) {
return get_category_link($cat->term_id);
}, $all_categories);
$classes = ['wniui_one', 'wniui_two', 'wniui_three'];
$icons = ['icon-star-smile-fill', 'icon-fire-fill', 'icon-book-mark-fill'];
for ($i = 1; $i <= 3; $i++) {
$category_text = !empty($instance['category_text_' . $i]) ? trim($instance['category_text_' . $i]) : '';
$category_id = !empty($instance['category_id_' . $i]) ? absint($instance['category_id_' . $i]) : 0;
// 获取链接逻辑：指定 ID 优先，否则随机选一个
if ($category_id) {
$link = get_category_link($category_id);
} elseif (!empty($category_links)) {
$random_key = array_rand($category_links);
$link = $category_links[$random_key];
} else {
$link = '#'; // 没有分类也兜底
}
// 赋值 class 和 icon
$class = $classes[$i - 1];
$icon = $icons[$i - 1];
?>
<div class="categoryItem">
<a class="categoryButton <?php echo esc_attr($class); ?>" href="<?php echo esc_url($link); ?>" rel="external nofollow">
<span class="categoryButtonText"><?php echo esc_html($category_text ?: '分类按钮' . $i); ?></span>
<i class="heofont <?php echo esc_attr($icon); ?>"></i>
</a>
</div>
<?php
}
?>
</div>
</div>
<?php
$about_items = isset($instance['about_items']) ? $instance['about_items'] : [];
$extra_input_1 = isset($instance['extra_input_1']) ? $instance['extra_input_1'] : '';
$extra_input_2 = isset($instance['extra_input_2']) ? $instance['extra_input_2'] : '';
$extra_input_3 = isset($instance['extra_input_3']) ? $instance['extra_input_3'] : '';
?>
<?php if (!empty($about_items)) : ?>
<div class="topGroup">
<div class="todayCard" id="todayCard" style="z-index: 1;" data-autoplay-delay="4000">
<div class="todayCard-info">
<div class="todayCard-tips"><?php echo esc_html($extra_input_1); ?></div> <!-- 左下角文字 -->
<div class="todayCard-title"></div>
</div>
<div class="todayCard-cover-slides" style="position: relative; overflow: hidden;">
<div class="todayCard-slides-wrapper">
<?php foreach ($about_items as $item) :
$img = esc_url($item['image']);
$link = esc_url($item['link']);
?>
<a href="<?php echo $link; ?>" target="_blank" class="todayCard-slide-item"
style="background-image: url('<?php echo $img; ?>');">
<span class="slide-link-area"></span>
</a>
<?php endforeach; ?>
</div>
<div class="todayCard-indicators">
<?php foreach ($about_items as $index => $item) : ?>
<span class="indicator-dot <?php echo $index === 0 ? 'active' : ''; ?>" data-idx="<?php echo $index; ?>"></span>
<?php endforeach; ?>
</div>
</div>
<div class="banner-button-group">
<a class="banner-button" href="<?php echo esc_url($extra_input_3); ?>" rel="external nofollow">
<span class="banner-button-text"><?php echo esc_html($extra_input_2); ?></span> <!-- 按钮名字 -->
</a>
</div>
<!-- 左右箭头 SVG ... （保持原样） -->
<span class="todayCard-arrow todayCard-arrow-left">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="15 18 9 12 15 6"></polyline>
</svg>
</span>
<span class="todayCard-arrow todayCard-arrow-right">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</span>
</div>
</div>
<?php endif; ?>
</div>
</div>
</div>
</div>
<style>
@font-face {
font-family: 'iconfont'; /* Project id 4947646 */
src: url('//at.alicdn.com/t/c/font_4947646_wmdj39jlurm.woff2?t=1749717765959') format('woff2'),
url('//at.alicdn.com/t/c/font_4947646_wmdj39jlurm.woff?t=1749717765959') format('woff'),
url('//at.alicdn.com/t/c/font_4947646_wmdj39jlurm.ttf?t=1749717765959') format('truetype');
}
.heoblogIcon {
font-family: "heoblogIcon" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.zib-widget.widget_ziy51_banner_widget {
padding: 0!important;
border: none!important;
background: transparent!important;
box-shadow: none!important;
margin-bottom: 20px!important
}
#home_top {
max-width: 1400px;
margin: auto;
margin-top: .5rem;
padding: 0 .5rem;
width: 100%;
background: transparent!important
}
@media screen and (max-width: 768px) {
#home_top {
padding:0;
margin-top: 0
}
}
.recent-top-post-group {
border-radius: 12px;
overflow: hidden;
overflow-x: auto;
width: 100%;
margin-bottom: 0
}
.recent-post-top {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
width: 100%;
overflow-x: scroll
}
.recent-post-top::-webkit-scrollbar {
display: none
}
.recent-post-top .recent-post-item {
display: flex;
width: 200px;
flex-direction: column;
align-items: flex-start;
margin-left: .5rem;
background: #fff;
border-radius: 12px;
overflow: hidden;
min-width: 200px;
height: 164px;
max-height: 164px;
border: var(--style-border-always);
transition: .3s;
position: relative;
box-shadow: var(--heo-shadow-border)
}
@media screen and (max-width: 768px) {
.recent-post-top .recent-post-item {
border-radius:8px;
box-shadow: none;
clip-path: inset(0 0 0 0 round 8px)
}
.recent-post-top .recent-post-item:last-child {
margin-right: 1rem
}
}
@media screen and (min-width: 1200px) {
.recent-post-top .recent-post-item {
margin-right:0;
margin-bottom: .5rem
}
.recent-post-top .recent-post-item:active {
transform: scale(.97)
}
.recent-post-top {
overflow-x: visible
}
.recent-top-post-group {
overflow: visible;
overflow-x: visible
}
}
span.recent-post-top-text {
position: absolute;
top: 0;
left: -40px;
display: flex;
z-index: 1;
background: #425aef;
color: #fff;
padding: 2px 8px;
font-size: .6rem;
border-radius: 12px 0;
transition: .3s;
cursor: pointer
}
.recent-post-item:hover .recent-post-top-text {
left: 0
}
@media screen and (max-width: 1200px) {
#home_top {
display:none
}
}
@media screen and (min-width: 1200px) {
.recent-post-top .recent-post-item:hover {
border:var(--style-border-hover);
box-shadow: var(--bywind-shadow-main);
transform: scale(1.03)
}
.recent-post-top .recent-post-item:active {
transform: scale(.97)
}
}
@media screen and (max-width: 768px) {
.recent-top-post-group {
border-radius:0;
background: var(--bywind-background)
}
.recent-post-top-text {
display: none!important
}
.recent-post-top .recent-post-item .post_cover img {
border-radius: 8px 8px 0 0!important
}
}
.recent-post-top .recent-post-item .post_cover a {
height: 100px;
overflow: hidden;
display: flex
}
.recent-post-top .recent-post-item .post_cover img {
object-fit: cover;
width: 100%;
background: var(--bywind-secondbg);
border-radius: 12px 12px 0 0
}
.recent-post-top .recent-post-item:hover .post_cover img {
transform: scale(1)
}
.recent-post-top .recent-post-item .recent-post-info {
padding: .3rem .5rem .3rem .5rem!important;
transition: .3s
}
.recent-post-top .recent-post-item:hover .recent-post-info a {
color: var(--bywind-fontcolor)
}
@media screen and (max-width: 1200px) {
.recent-post-top .recent-post-item:hover .recent-post-info a {
transition:.3s
}
}
.recent-post-top .recent-post-item .recent-post-info .article-title {
-webkit-line-clamp: 2;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
line-height: 1.5;
justify-content: center;
align-items: flex-end;
align-content: center;
padding-top: .5rem;
font-weight: 700;
font-size: .8rem!important;
padding: 0!important
}
.categoryItem {
overflow: hidden;
transform: scale(1);
transition: all .8s cubic-bezier(.65,.15,.37,1.19);
height: 48%;
border-radius: 12px
}
a.categoryButton {
height: 100%;
width: 100%;
background: rgba(255,255,255,.67);
border-radius: 12px;
display: inline-block;
text-align: left;
line-height: 4em;
font-weight: 800;
font-size: 16px;
color: #fff;
transition: all .8s cubic-bezier(.39,.575,.565,1);
transform: scale(1);
overflow: hidden
}
a.categoryButton i {
transform: scale(1) rotate(15deg)
}
@media screen and (min-width: 1200px) {
a.categoryButton:active {
transform:scale(.97)
}
}
@media screen and (max-width: 768px) {
a.categoryButton {
border-radius:8px
}
.categoryItem {
border-radius: 0;
height: 47%;
box-shadow: none!important
}
}
a.categoryButton:after {
top: 45px;
width: 1rem;
left: 21px;
height: 2px;
background: #fff;
content: "";
border-radius: 1px;
position: absolute
}
.categoryButtonText {
padding-left: 21px
}
a.categoryButton i {
font-size: 12rem;
opacity: .3;
position: absolute;
right: 15px;
top: 10%;
transition: .3s;
width: 100px;
text-align: center;
filter: blur(2px)
}
@media screen and (max-width: 768px) {
a.categoryButton i {
display:none
}
.recent-post-top .categoryGroup {
min-width: 130px!important;
margin-bottom: .5rem;
margin-left: 1rem;
max-height: 164px;
overflow: hidden;
position: relative
}
}
.topGroup {
display: flex
}
#bannerGroup {
display: flex
}
div#banners {
display: none
}
.topGroup .todayCard {
display: none
}
@media screen and (min-width: 1200px) {
.topGroup {
/* display:flex; */flex-direction:row;
flex-wrap: wrap;
justify-content: flex-end;
height: calc(328px + .5rem);
align-content: space-between;
width: calc(600px + 1.5rem);
position: relative
}
div#bannerGroup {
width: calc(100% - 600px - 2rem);
margin-right: .5rem;
height: calc(328px + .5rem);
display: flex;
flex-direction: column;
justify-content: space-between
}
div#banners {
display: flex;
width: 100%;
height: 76%;
background: var(--bywind-card-bg);
margin-bottom: .5rem;
border: var(--style-border);
border-radius: 12px;
overflow: hidden;
position: relative;
box-shadow: var(--bywind-shadow-border);
flex-direction: column;
transition: .3s;
clip-path: inset(0 0 0 0 round 12px)
}
div#banners:hover {
box-shadow: var(--bywind-shadow-main)
}
#banners.flink {
margin-bottom: .5rem
}
#banners .banner-button-group {
position: absolute;
right: 2rem;
top: 2rem;
display: flex
}
#banners .banner-button {
padding: 8px 12px;
background: var(--bywind-fontcolor);
border-radius: 12px;
color: var(--bywind-card-bg);
display: flex;
align-items: center;
z-index: 1;
transition: .3s;
cursor: pointer;
box-shadow: var(--bywind-shadow-black)
}
#banners .banner-button.secondary {
background: var(--bywind-secondbg);
border: var(--style-border-always);
color: var(--bywind-lighttext);
margin-right: 1rem;
box-shadow: var(--bywind-shadow-border)
}
.banner-button:hover {
background: #425aef
}
#banners .banner-button i {
margin-right: 8px;
font-size: 1rem
}
.banners-title {
top: 2rem;
left: 1.5rem;
position: absolute;
display: flex;
flex-direction: column
}
.banners-title-big {
font-size: 36px;
line-height: 1;
font-weight: 700;
margin-bottom: 8px
}
.banners-title-small {
font-size: 12px;
line-height: 1;
color: var(--bywind-secondtext);
margin-top: 8px;
margin-bottom: .5rem
}
#banner-hover {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
backdrop-filter: blur(15px)!important;
padding-left: .5rem;
display: flex;
flex-direction: column;
justify-content: center;
opacity: 0;
transition: cubic-bezier(.71,.15,.16,1.15) .6s
}
.bannerText {
color: #fff;
font-size: 4rem;
line-height: 4rem;
font-weight: 700;
margin-top: 20px
}
#banner-hover .icon-right:before {
font-family: 'iconfont'!important;
content: '\e6c1' !important;
color: #fff
}
.banner-righticon {
font-size: 4rem;
opacity: .6
}
#banners:hover #banner-hover {
opacity: 1;
padding-left: 2rem;
background: #4259efc9;
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
transition: .3s;
background-size: 200%;
cursor: pointer
}
#banners #banner-hover i {
font-size: 80px;
opacity: .4
}
.topGroup .todayCard {
position: absolute;
width: calc(600px + 1rem);
height: 100%;
z-index: 1;
top: 0;
left: 0;
background: var(--bywind-card-bg);
border-radius: 12px;
margin-left: .5rem;
overflow: hidden;
transition: .3s;
display: flex;
cursor: pointer;
pointer-events: all
}
.topGroup .todayCard:after {
position: absolute;
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0
}
.topGroup .todayCard.hide {
opacity: 0;
pointer-events: none
}
.topGroup .todayCard .todayCard-info {
position: absolute;
bottom: 2rem;
left: 2rem;
z-index: 2;
max-width: 60%;
transition: .3s
}
.topGroup .todayCard.hide .todayCard-info {
bottom: 1rem;
opacity: 0
}
.topGroup .todayCard .todayCard-info .todayCard-tips {
opacity: .8;
font-size: 1.6rem
}
.topGroup .todayCard .todayCard-info .todayCard-title {
font-size: 28px;
font-weight: 700;
line-height: 36px
}
.topGroup .banner-button-group {
position: absolute;
right: 2rem;
bottom: 2rem;
display: flex;
transition: .3s
}
.topGroup .todayCard.hide .banner-button-group {
bottom: 1rem
}
.topGroup .banner-button {
border-radius: 20px;
display: flex;
align-items: center;
z-index: 1;
transition: .3s;
cursor: pointer;
backdrop-filter: saturate(180%) blur(20px)!important;
-webkit-backdrop-filter: blur(20px);
transform: translateZ(0);
height: 40px;
width: 118px;
justify-content: center
}
.topGroup .banner-button i {
margin-right: 8px;
font-size: 22px
}
.todayCard-cover-slides {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1
}
.todayCard-slides-wrapper {
display: flex;
width: 100%;
height: 100%;
transition: transform .5s ease-in-out
}
.todayCard-slide-item {
min-width: 100%;
flex-shrink: 0;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
display: block
}
.todayCard-slider-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 2em;
color: rgba(255,255,255,.7);
cursor: pointer;
z-index: 10;
padding: 0 10px;
background-color: rgba(0,0,0,.3);
border-radius: 5px;
transition: background-color .3s ease;
user-select: none;
display: flex;
align-items: center;
justify-content: center;
height: 40px;
width: 40px
}
.todayCard-slider-nav:hover {
background-color: rgba(0,0,0,.5)
}
.todayCard-slider-nav.prev {
left: 10px
}
.todayCard-slider-nav.next {
right: 10px
}
.todayCard-slider-nav:before {
font-family: 'iconfont'!important;
font-size: inherit;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.todayCard-slider-nav.prev:before {
content: "\e604"
}
.todayCard-slider-nav.next:before {
content: "\e605"
}
.tags-group-icon {
width: 120px;
height: 120px;
border-radius: 30px
}
.tags-group-all {
display: flex;
transform: rotate(-30deg)
}
.tags-group-all.nowrapMove {
transform: rotate(0);
padding-bottom: 2rem
}
.tags-group-wrapper {
margin-top: 5rem;
display: flex;
flex-wrap: nowrap;
animation: rowup 60s linear infinite
}
.nowrapMove .tags-group-wrapper {
margin-top: 7rem;
animation: rowup 120s linear infinite
}
.tags-group-icon-pair .tags-group-icon:nth-child(even) {
margin-top: 1rem;
transform: translate(-60px)
}
.tags-group-icon-pair {
margin-left: 1rem
}
.tags-group-icon {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 66px;
font-weight: 700;
box-shadow: var(--bywind-shadow-blackdeep)
}
.nowrapMove .tags-group-icon {
border-radius: 50%
}
.tags-group-icon img {
width: 60%
}
.nowrapMove .tags-group-icon img {
min-width: 100%;
min-height: 100%;
border-radius: 50%;
object-fit: cover
}
.categoryItem:hover i {
opacity: .8;
transition: .8s;
transition-delay: .15s;
transform: scale(1.03) rotate(0);
font-size: 4rem;
filter: blur(0)
}
@media screen and (min-width: 1200px) {
.categoryItem:hover i {
transform:scale(1.03) rotate(0)
}
}
.cate-button-text {
box-shadow: var(--bywind-shadow-black)
}
.recent-post-top .categoryGroup {
display: flex;
flex-direction: column;
justify-content: space-between;
min-width: 200px
}
.categoryGroup .categoryItem:nth-child(3) {
display: none
}
@media screen and (min-width: 1200px) {
.recent-post-top .categoryGroup {
flex-direction:row;
height: 24%
}
.categoryItem {
width: calc(100%/3 - .33rem);
height: 100%;
margin-right: .5rem
}
.categoryItem:last-child {
margin-right: 0
}
.categoryItem:hover {
width: 50%
}
.categoryGroup .categoryItem:nth-child(3) {
display: flex
}
}
a.categoryButton.wniui_one {
background: linear-gradient(to right,#358bff,#15c6ff);
background-size: 200%
}
a.categoryButton.wniui_two {
background: linear-gradient(to right,#f65,#ffbf37);
background-size: 200%
}
a.categoryButton.wniui_three {
background: linear-gradient(to right,#18e7ae,#1eebeb);
background-size: 200%
}
[data-theme=dark] a.categoryButton.wniui_one {
background: linear-gradient(to right,#0653b8,#2fcbff);
background-size: 200%
}
[data-theme=dark] a.categoryButton.wniui_two {
background: linear-gradient(to right,#e22a16,#da980c);
background-size: 200%
}
[data-theme=dark] a.categoryButton.wniui_three {
background: linear-gradient(to right,#099e74,#0ea4a4);
background-size: 200%
}
a.categoryButton:hover {
background-position: 100% 0
}
@keyframes rowup {
from {
transform: translateX(0)
}
to {
transform: translateX(-50%)
}
}
#recent-post-top .recent-post-item .post_cover {
width: 100%
}
#recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap {
position: absolute;
bottom: 16px;
transition: .3s;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
width: 100%;
left: 0;
padding: 0 32px;
white-space: nowrap
}
.banner-button-text {
color: #fff
}
.banner-button-text:before {
content: '\e6a9 ';
font-family: 'iconfont';
margin-right: 10px
}
.icon-star-smile-fill:before {
content: '\e7a2';
font-family: iconfont
}
.icon-fire-fill:before {
content: '\e663';
font-family: iconfont
}
.icon-book-mark-fill:before {
content: '\e662';
font-family: iconfont
}
}
.todayCard-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
background-color: rgba(0,0,0,.3);
border-radius: 50%;
color: #fff;
opacity: 0;
visibility: hidden;
transition: opacity .3s ease,visibility 0s linear .3s,background-color .3s ease,transform .3s ease
}
#todayCard:hover .todayCard-arrow {
opacity: .7;
visibility: visible;
transition-delay: 0s
}
.todayCard-arrow:hover {
background-color: rgba(0,0,0,.6);
opacity: 1;
transform: translateY(-50%) scale(1.1)
}
.todayCard-arrow-left {
left: 15px
}
.todayCard-arrow-right {
right: 15px
}
.todayCard-arrow svg {
width: 55%;
height: 55%;
stroke: currentColor;
fill: none
}
.recent-post-top {
margin-bottom: 20px
}
.todayCard-slides-wrapper a{z-index:999}.todayCard-slide-item .slide-link-area{pointer-events:none}.todayCard-slide-item .slide-link-area{display:block;width:100%;height:100%;pointer-events:none}.todayCard-cover-slides{position:relative;width:100%;height:100%;overflow:hidden;z-index:1}.todayCard-slides-wrapper{display:flex;transition:transform .8s cubic-bezier(.4,0,.2,1);will-change:transform}.todayCard-slide-item{flex:0 0 100%;background-size:cover;background-position:center;display:block;position:relative}.todayCard-slide-item .slide-link-area{display:block;width:100%;height:100%}.todayCard-indicators{position:absolute;left:0;right:0;bottom:10px;text-align:center;z-index:10;pointer-events:none}.todayCard-indicators .indicator-dot{display:inline-block;margin:0 3px;background:rgba(255,255,255,.7);transition:background .3s,border-radius .3s,width .3s,height .3s;cursor:pointer;pointer-events:auto;vertical-align:middle;width:7px;height:7px;border-radius:50%}.todayCard-indicators .indicator-dot.active{width:16px;height:6px;border-radius:3px;background:#fff}
/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
const slides = document.querySelectorAll('.todayCard-slide-item');
const indicators = document.querySelectorAll('.todayCard-indicators .indicator-dot');
const prevBtn = document.querySelector('.todayCard-arrow-left');
const nextBtn = document.querySelector('.todayCard-arrow-right');
const autoplayDelay = parseInt(document.getElementById('todayCard').dataset.autoplayDelay) || 4000;
let currentIndex = 0;
let timer = null;
function updateSlide(index) {
const wrapper = document.querySelector('.todayCard-slides-wrapper');
wrapper.style.transform = `translateX(-${index * 100}%)`;
wrapper.style.transition = 'transform 0.5s ease';
indicators.forEach(dot => dot.classList.remove('active'));
if (indicators[index]) indicators[index].classList.add('active');
}
function nextSlide() {
currentIndex = (currentIndex + 1) % slides.length;
updateSlide(currentIndex);
}
function prevSlide() {
currentIndex = (currentIndex - 1 + slides.length) % slides.length;
updateSlide(currentIndex);
}
// 自动播放
function startAutoplay() {
stopAutoplay();
timer = setInterval(nextSlide, autoplayDelay);
}
function stopAutoplay() {
if (timer) clearInterval(timer);
}
// 指示点点击跳转
indicators.forEach(dot => {
dot.addEventListener('click', () => {
const index = parseInt(dot.dataset.idx);
currentIndex = index;
updateSlide(currentIndex);
startAutoplay();
});
});
// 左右箭头点击
prevBtn.addEventListener('click', () => {
prevSlide();
startAutoplay();
});
nextBtn.addEventListener('click', () => {
nextSlide();
startAutoplay();
});
updateSlide(currentIndex);
startAutoplay();
});
</script>
<?php
// echo $args['after_widget'];
}
// ✅ 随机文章功能
add_action('template_redirect', 'custom_random_post');
function custom_random_post() {
if (!isset($_GET['random'])) return;
global $wpdb;
$query = "SELECT ID FROM $wpdb->posts WHERE post_type = 'post' AND post_password = '' AND post_status = 'publish' ORDER BY RAND() LIMIT 1";
if (!empty($_GET['random_cat_id'])) {
$cat_id = absint($_GET['random_cat_id']);
$query = "SELECT DISTINCT ID FROM $wpdb->posts AS p
INNER JOIN $wpdb->term_relationships AS tr ON (p.ID = tr.object_id AND tr.term_taxonomy_id = $cat_id)
INNER JOIN $wpdb->term_taxonomy AS tt ON (tr.term_taxonomy_id = tt.term_taxonomy_id AND taxonomy = 'category')
WHERE p.post_type = 'post' AND p.post_password = '' AND p.post_status = 'publish'
ORDER BY RAND() LIMIT 1";
}
if (!empty($_GET['random_post_type'])) {
$post_type = sanitize_key($_GET['random_post_type']);
$query = "SELECT ID FROM $wpdb->posts WHERE post_type = '$post_type' AND post_password = '' AND post_status = 'publish' ORDER BY RAND() LIMIT 1";
}
$random_id = $wpdb->get_var($query);
if ($random_id) {
wp_redirect(get_permalink($random_id));
exit;
}
}22.增加一个版权
![图片[22]-本站装修-九块九源码](https://www.9k9y.cn/wp-content/uploads/2025/07/image-19.png)
将下面的代码放到：子比主题–>>文章&列表–>>文章页面–>>版权声明即可！
<!--九块九版权样式三-->
<head>
<style type="text/css">
.post-copyright {
box-shadow: 2px 2px 5px;
line-height: 2;
position: relative;
margin: 40px 0 10px;
padding: 10px 16px;
border: 1px solid var(--light-grey);
transition: box-shadow .3s ease-in-out;
overflow: hidden;
border-radius: 12px !important;
background-color: var(--main-bg-color);
}
.post-copyright:before {
position: absolute;
right: -26px;
top: -120px;
content: '\f25e';
font-size: 200px;
font-family: 'FontAwesome';
opacity: .2;
}
.post-copyright__title {
font-size: 22px;
}
.post-copyright_type {
font-size: 18px;
color: var(--theme-color)
}
.post-copyright .post-copyright-info {
padding-left: 6px;
font-size: 15px;
}
.post-copyright-m-info .post-copyright-a,
.post-copyright-m-info .post-copyright-c,
.post-copyright-m-info .post-copyright-u {
display: inline-block;
width: fit-content;
padding: 2px 5px;
font-size: 15px;
}
.muted-3-color {
color: var(--main-color);
}
/*手机优化*/
@media screen and (max-width:800px) {
.post-copyright-m-info {
display: none
}
}
</style>
</head>
<body>
<div class="post-copyright" style="max-width:800px;margin:0 auto;">
<div class="post-copyright__title" style="margin:10px 10px"><span class="post-copyright_title"><strong>
<script>document.write
(document.title);</script>
</strong></span></div>
<div class="post-copyright__type" style="margin:10px 10px"><span class="post-copyright_type">本文链接：
<script>var url =
window.location.href; document.write(document.URL);</script>
</span></div>
<div class="post-copyright-m">
<div class="post-copyright-m-info">
<div class="post-copyright-a">
<strong>文章作者</strong>
<div class="post-copyright-cc-info">
<strong><a href="/">九块九源码</a></strong>
</div>
</div>
<div class="post-copyright-c" style="margin:10px 20px">
<strong>隐私政策</strong>
<div class="post-copyright-cc-info">
<strong><a href="/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="/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>23.卡片列表5个
![图片[23]-本站装修-九块九源码](https://www.9k9y.cn/wp-content/uploads/2025/07/image-20-1024x449.png)
将代码放到:WP后台->>Zibll主题设置->>全局&功能->>自定义代码->>自定义CSS样式 即可
/*文章卡片排列X5*/
@media (min-width: 700px) {
.posts-item.card {
width: calc(20% - 16px);
}
}24.私密评价
![图片[24]-本站装修-九块九源码](https://www.9k9y.cn/wp-content/uploads/2025/07/image-21-1024x487.png)
定位：/wp-content/themes/zibll/func.php文件，没有这个文件自己创建一个，记得加上php头，要不然会报错，将下面的代码直接丢里面即可！
// 私密评论显示逻辑
function zib_private_message_hook($comment_content, $comment) {
$comment_ID = $comment->comment_ID;
$is_private = get_comment_meta($comment_ID, '_private', true);
$email = $comment->comment_author_email;
$current_user = wp_get_current_user();
// HTML for private comment notification
$html = '<div class="hidden-box" reply-show="true" reload-hash="#hidden-box-comment"><a class="hidden-text"><i class="fa fa-exclamation-circle mr10"></i>此评论为私密评论，仅双方可见.</a></div>';
if ($is_private) {
// 安全判断：优先使用 user_id 比对
$is_comment_author = false;
$is_post_author = false;
$is_admin = current_user_can('manage_options');
if ($current_user && $current_user->ID) {
$is_comment_author = ($current_user->ID == $comment->user_id);
$is_post_author = ($current_user->ID == get_post_field('post_author', $comment->comment_post_ID));
}
// 仅允许：管理员 / 评论作者 / 文章作者 查看私密评论内容
if ($is_admin || $is_comment_author || $is_post_author) {
return '<div class="hidden-box show" id="hidden-box-comment"><div class="hidden-text">私密评论内容</div>' . $comment_content . '</div>';
}
return $html;
}
return $comment_content;
}
add_filter('get_comment_text', 'zib_private_message_hook', 10, 2);
// 添加私密按钮到评论操作列表
function zib_comments_action_add_private($lists, $comment) {
$current_user = wp_get_current_user();
$user_id = get_current_user_id();
// 仅允许管理员或评论作者看到“设为私密”选项
if (is_user_logged_in() && (is_super_admin($user_id) || $current_user->ID == $comment->user_id)) {
$comment_ID = $comment->comment_ID;
$is_private = get_comment_meta($comment_ID, '_private', true);
$private_text = empty($is_private) ? '设为私密' : '取消私密';
$action = empty($is_private) ? 'set_private' : 'del_private';
$private_but = '<a class="comment-private-link wp-ajax-submit" form-action="' . esc_attr($action) . '" form-data="' . esc_attr(json_encode(['id' => $comment_ID])) . '" href="javascript:;"><i class="fa fa-user-secret mr10" aria-hidden="true"></i>' . $private_text . '</a>';
$lists = '<li>' . $private_but . '</li>' . $lists;
}
return $lists;
}
add_filter('comments_action_lists', 'zib_comments_action_add_private', 99, 2);
// 处理更新评论私密状态的 AJAX 请求
function zib_private_comment_action() {
$response = ['reload' => true];
if (!isset($_POST['action']) || !$_POST['action']) {
zib_send_json_error(['msg' => '无效的操作类型'] + $response);
}
if (!isset($_POST['id']) || !$_POST['id']) {
zib_send_json_error(['msg' => '无效的评论ID'] + $response);
}
$comment_id = intval($_POST['id']);
$action = sanitize_text_field($_POST['action']);
$comment = get_comment($comment_id);
$post_author_id = get_post_field('post_author', $comment->comment_post_ID);
$current_user = wp_get_current_user();
// 用 user_id 判断评论作者
if (!$comment_id || !$current_user || !($current_user->ID == $comment->user_id || current_user_can('manage_options'))) {
zib_send_json_error(['msg' => '权限不足或无效的评论ID'] + $response);
}
if ($action === 'set_private') {
update_comment_meta($comment_id, '_private', 'true');
zib_send_json_success(['msg' => '评论已设为私密'] + $response);
} elseif ($action === 'del_private') {
delete_comment_meta($comment_id, '_private');
zib_send_json_success(['msg' => '评论已公开'] + $response);
} else {
zib_send_json_error(['msg' => '无效的操作类型'] + $response);
}
}
add_action('wp_ajax_set_private', 'zib_private_comment_action');
add_action('wp_ajax_del_private', 'zib_private_comment_action');25.go跳转带快照
![图片[25]-本站装修-九块九源码](https://www.9k9y.cn/wp-content/uploads/2025/07/image-22-1024x541.png)
定位：/wp-content/themes/zibll/go.php文件，直接将下面的代码替换即可，里面有文字和广告，自己填！
<?php
if (
strlen($_SERVER['REQUEST_URI']) > 384 ||
strpos($_SERVER['REQUEST_URI'], "eval(") !== false ||
strpos($_SERVER['REQUEST_URI'], "base64") !== false
) {
@header("HTTP/1.1 414 Request-URI Too Long");
@header("Status: 414 Request-URI Too Long");
@header("Connection: Close");
@exit;
}
@session_start();
// 处理URL参数
$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);
}
$t_url = htmlspecialchars($t_url);
preg_match('/^(http|https|thunder|qqdl|ed2k|Flashget|qbrowser):\/\//i', $t_url, $matches);
$site_name = "这里修改为你的网站名";
$page_title = $site_name . ' - 网站安全验证中心';
if ($matches) {
$url = $t_url;
} else {
preg_match('/\./i', $t_url, $matche);
if ($matche) {
$url = 'http://' . $t_url;
} else {
$url = 'http://' . $_SERVER['HTTP_HOST'];
$page_title = '参数错误 - ' . $site_name;
}
}
} else {
$page_title = '参数缺失 - ' . $site_name;
$url = 'http://' . $_SERVER['HTTP_HOST'];
}
$url = htmlspecialchars($url);
$domain = parse_url($url, PHP_URL_HOST) ?: $url;
$normalizedUrl = $url;
if (!preg_match('/^https?:\/\//i', $normalizedUrl)) {
$normalizedUrl = 'http://' . $normalizedUrl;
}
$encodedUrl = rawurlencode($normalizedUrl);
$snapshotWidth = 1024;
$snapshotHeight = 768;
$snapshotQuality = 80;
$mshotsUrl = "https://s0.wp.com/mshots/v1/{$encodedUrl}?w={$snapshotWidth}&h={$snapshotHeight}&quality={$snapshotQuality}";
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="robots" content="noindex, nofollow">
<link rel="shortcut icon" href="https://blgo.ax24.cn/wp-content/uploads/2025/08/favicon.ico" type="image/x-icon">
<title><?php echo $page_title; ?></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary: #165DFF;
--primary-light: #E8F3FF;
--primary-dark: #0E42CC;
--danger: #F53F3F;
--danger-light: #FFECE8;
--warning: #FF7D00;
--warning-light: #FFF7E8;
--success: #00B42A;
--success-light: #E8FFEA;
--gray-50: #F2F3F5;
--gray-100: #E5E6EB;
--gray-200: #C9CDD4;
--gray-300: #86909C;
--gray-400: #4E5969;
--gray-500: #1D2129;
--text: var(--gray-500);
--text-light: var(--gray-400);
--border-radius: 12px;
--border-radius-sm: 6px;
--shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
--shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12);
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Inter", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
}
body {
background-color: #F7F8FA;
color: var(--text);
line-height: 1.5;
padding: 30px 0;
font-size: 15px;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 16px;
}
.card {
background-color: #fff;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
overflow: hidden;
margin-bottom: 24px;
transition: var(--transition);
}
.card:hover {
box-shadow: var(--shadow-hover);
}
.card-header {
background: linear-gradient(135deg, rgba(22, 93, 255, 0.9), rgba(22, 93, 255, 0.7));
color: #fff;
padding: 20px 24px;
font-size: 20px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
overflow: hidden;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.card-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.card-header .content {
position: relative;
z-index: 1;
display: flex;
align-items: center;
}
.card-header .contact-buttons {
position: relative;
z-index: 1;
display: flex;
gap: 12px;
}
.contact-btn {
background-color: rgba(255, 255, 255, 0.2);
border: none;
color: white;
padding: 6px 16px;
border-radius: 20px;
font-size: 14px;
cursor: pointer;
transition: var(--transition);
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
}
.contact-btn:hover {
background-color: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.card-header .icon {
font-size: 24px;
margin-right: 12px;
}
.card-body {
padding: 24px;
}
.main-content {
display: flex;
gap: 24px;
margin-bottom: 24px;
}
.left-column {
flex: 1;
}
.right-column {
flex: 1.2;
}
.warning-notice {
background-color: var(--warning-light);
border-left: 4px solid var(--warning);
padding: 16px 20px;
margin-bottom: 24px;
border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
display: flex;
align-items: center;
transition: var(--transition);
}
.warning-notice:hover {
transform: translateX(2px);
}
.warning-notice i {
color: var(--warning);
font-size: 22px;
margin-right: 12px;
flex-shrink: 0;
}
.url-display {
background-color: var(--gray-50);
border: 1px solid var(--gray-100);
border-radius: var(--border-radius-sm);
padding: 16px 20px;
margin-bottom: 24px;
word-break: break-all;
position: relative;
transition: var(--transition);
}
.url-display:hover {
border-color: var(--primary-light);
background-color: var(--primary-light);
}
.url-display::before {
content: "目标网址";
position: absolute;
top: -10px;
left: 16px;
background-color: #fff;
padding: 0 8px;
font-size: 13px;
color: var(--gray-400);
font-weight: 500;
}
.info-section {
margin-bottom: 32px;
}
.info-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 1px solid var(--gray-100);
display: flex;
align-items: center;
color: var(--gray-500);
}
.info-title i {
color: var(--primary);
margin-right: 10px;
font-size: 20px;
}
.snapshot-container {
border: 1px solid var(--gray-100);
border-radius: var(--border-radius);
overflow: hidden;
background-color: #fff;
margin-bottom: 24px;
transition: var(--transition);
height: 100%;
display: flex;
flex-direction: column;
}
.snapshot-container:hover {
border-color: var(--primary-light);
box-shadow: 0 2px 12px rgba(22, 93, 255, 0.08);
}
.snapshot-header {
background-color: var(--gray-50);
padding: 12px 16px;
border-bottom: 1px solid var(--gray-100);
display: flex;
align-items: center;
font-size: 14px;
}
.browser-dots {
display: flex;
gap: 6px;
margin-right: 16px;
}
.dot {
width: 10px;
height: 10px;
border-radius: 50%;
transition: var(--transition);
}
.dot-red {
background-color: #FF5A5A;
}
.dot-red:hover {
transform: scale(1.2);
}
.dot-yellow {
background-color: #FFC850;
}
.dot-yellow:hover {
transform: scale(1.2);
}
.dot-green {
background-color: #56D364;
}
.dot-green:hover {
transform: scale(1.2);
}
.snapshot-url {
color: var(--gray-400);
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: "Consolas", monospace;
}
.snapshot-img-container {
width: 100%;
overflow: hidden;
position: relative;
flex: 1;
min-height: 400px;
background-color: var(--gray-50);
}
.snapshot-loading {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(255, 255, 255, 0.8);
z-index: 10;
transition: opacity 0.3s ease;
}
.snapshot-loading i {
font-size: 36px;
color: var(--primary);
animation: spin 1.5s linear infinite;
position: relative;
}
.snapshot-loading i::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 120%;
height: 120%;
border-radius: 50%;
border: 2px solid rgba(22, 93, 255, 0.2);
transform: translate(-50%, -50%);
animation: pulse 2s infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes pulse {
0% { transform: translate(-50%, -50%) scale(0.8); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}
.snapshot-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s ease, opacity 0.4s ease;
opacity: 0;
}
.snapshot-img.loaded {
transform: scale(1);
opacity: 1;
}
.snapshot-img:hover {
transform: scale(1.03);
}
.snapshot-placeholder {
padding: 80px 20px;
text-align: center;
color: var(--gray-400);
}
.snapshot-refresh {
margin-top: 12px;
color: var(--primary);
background: none;
border: 1px solid var(--primary);
padding: 6px 18px;
border-radius: 20px;
font-size: 14px;
cursor: pointer;
transition: var(--transition);
display: inline-flex;
align-items: center;
gap: 6px;
text-decoration: none;
}
.snapshot-refresh i {
transition: transform 0.5s ease;
}
.snapshot-refresh:hover {
background-color: var(--primary);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(22, 93, 255, 0.25);
}
.snapshot-refresh:hover i {
transform: rotate(180deg);
}
.action-buttons {
display: flex;
justify-content: center;
gap: 24px;
margin: 24px 0;
flex-wrap: wrap;
}
.btn {
padding: 14px 48px;
border-radius: var(--border-radius-sm);
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
position: relative;
overflow: hidden;
text-decoration: none;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: 0.5s;
}
.btn:hover::before {
left: 100%;
}
.btn-cancel {
background-color: #fff;
color: var(--gray-500);
border: 1px solid var(--gray-100);
}
.btn-cancel:hover {
background-color: var(--gray-50);
border-color: var(--gray-200);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.btn-continue {
background-color: var(--primary);
color: #fff;
}
.btn-continue:hover {
background-color: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(22, 93, 255, 0.3);
}
.safety-tips {
background-color: var(--danger-light);
border-radius: var(--border-radius-sm);
padding: 16px 20px;
margin: 24px 0;
font-size: 14px;
color: var(--danger);
border-left: 4px solid var(--danger);
transition: var(--transition);
}
.safety-tips:hover {
transform: translateX(2px);
}
.safety-tips strong {
font-weight: 600;
}
.ad-section {
margin-top: 30px;
border-radius: var(--border-radius-sm);
overflow: hidden;
}
.ad-image-container {
margin-bottom: 12px;
border-radius: var(--border-radius-sm);
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: var(--transition);
}
.ad-image-container:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
transform: translateY(-2px);
}
.ad-image {
width: 100%;
height: auto;
display: block;
border: none;
}
.ad-text-container {
display: flex;
gap: 12px;
}
.ad-text {
flex: 1;
background-color: var(--gray-50);
border: 1px solid var(--gray-100);
border-radius: var(--border-radius-sm);
padding: 12px 16px;
text-align: center;
color: var(--primary);
font-weight: 500;
cursor: pointer;
transition: var(--transition);
text-decoration: none;
}
.ad-text:hover {
background-color: var(--primary-light);
border-color: var(--primary);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(22, 93, 255, 0.1);
}
.footer-info {
text-align: center;
font-size: 14px;
color: var(--gray-400);
padding: 20px 0 10px;
position: relative;
}
.footer-info::before {
content: '';
position: absolute;
top: 0;
left: 15%;
width: 70%;
height: 1px;
background-color: var(--gray-100);
}
.footer-info p {
margin-bottom: 8px;
}
@media (max-width: 992px) {
.main-content {
flex-direction: column;
}
.snapshot-img-container {
min-height: 320px;
}
}
@media (max-width: 768px) {
.action-buttons {
flex-direction: column;
gap: 12px;
padding: 0 16px;
}
.btn {
width: 100%;
padding: 14px 0;
}
.card-header {
padding: 16px 20px;
font-size: 18px;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.card-header .contact-buttons {
width: 100%;
justify-content: flex-start;
}
.card-body {
padding: 20px;
}
.ad-text {
padding: 10px 12px;
font-size: 14px;
}
}
@media (max-width: 480px) {
body {
padding: 20px 0;
}
.card-header {
font-size: 16px;
}
.card-body {
padding: 16px;
}
.warning-notice, .safety-tips {
padding: 12px 16px;
}
.snapshot-img-container {
min-height: 240px;
}
.contact-btn {
padding: 5px 12px;
font-size: 13px;
}
.ad-text-container {
flex-direction: column;
gap: 8px;
}
}
</style>
</head>
<body>
<div class="container">
<!-- 页面标题卡片 -->
<div class="card">
<div class="card-header">
<div class="content">
<i class="fas fa-shield-alt icon"></i>
这里修改为你的网站名
</div>
<div class="contact-buttons">
<a href="这里修改为你的QQ链接"
class="contact-btn"
target="_blank"
rel="noopener noreferrer">
<i class="fab fa-qq"></i> 联系站长
</a>
<a href="mailto:这里修改为你的邮箱"
class="contact-btn">
<i class="fas fa-envelope"></i> 发送邮件
</a>
</div>
</div>
<div class="card-body">
<div class="main-content">
<!-- 左侧列 - 提示信息 -->
<div class="left-column">
<div class="warning-notice">
<i class="fas fa-exclamation-circle"></i>
<div>您即将离开当前平台，访问第三方网站。请确认该网站的安全性后再进行访问。</div>
</div>
<div class="url-display">
<?php echo $url; ?>
</div>
<!-- 安全提示 -->
<div class="safety-tips">
<strong>安全提示：</strong>请勿在陌生网站输入银行卡密码、身份证号等敏感信息。如发现虚假网站或诈骗行为，请立即举报。
</div>
<!-- 操作按钮 -->
<div class="action-buttons">
<button class="btn btn-cancel" id="cancelBtn">
<i class="fas fa-arrow-left"></i> 返回上一页
</button>
<button class="btn btn-continue" id="continueBtn">
<i class="fas fa-external-link-alt"></i> 继续访问
</button>
</div>
<!-- 广告位 -->
<div class="ad-section">
<!-- 第一行：图片广告 -->
<a href="这里修改为你需要跳转的网站链接" target="_blank" rel="noopener noreferrer" class="ad-image-container">
<img src="这里修改为你的图片地址" alt="广告图片" class="ad-image">
</a>
</div>
</div>
<!-- 右侧列 - 屏幕快照 -->
<div class="right-column">
<div class="info-section">
<h3 class="info-title">
<i class="fas fa-desktop"></i> 网站快照预览
</h3>
<div class="snapshot-container">
<div class="snapshot-header">
<div class="browser-dots">
<div class="dot dot-red"></div>
<div class="dot dot-yellow"></div>
<div class="dot dot-green"></div>
</div>
<div class="snapshot-url"><?php echo $domain; ?></div>
</div>
<div class="snapshot-img-container">
<div class="snapshot-loading" id="snapshotLoader">
<i class="fas fa-spinner fa-spin"></i>
</div>
<img src="<?php echo $mshotsUrl; ?>"
alt="网页快照"
class="snapshot-img"
loading="lazy"
onload="this.classList.add('loaded'); document.getElementById('snapshotLoader').style.opacity='0'; setTimeout(() => document.getElementById('snapshotLoader').style.display='none', 300);"
onerror="handleSnapshotError()">
</div>
<div style="text-align: center; padding: 12px;">
<button class="snapshot-refresh" onclick="refreshSnapshot()">
<i class="fas fa-sync-alt"></i> 刷新快照
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 页脚信息 -->
<div class="footer-info">
<p>安全验证中心旨在保护用户上网安全，本验证结果仅供参考</p>
<p>© 2025 这里修改为你的网站名 版权所有</p>
</div>
</div>
<script>
// 保存原始快照URL，用于刷新功能
const originalSnapshotUrl = "<?php echo $mshotsUrl; ?>";
// 取消访问按钮
document.getElementById('cancelBtn').addEventListener('click', function() {
this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 返回中...';
this.disabled = true;
// 尝试返回上一页，如果不行则跳转到首页
setTimeout(() => {
if (history.length > 1) {
history.back();
} else {
location.href = 'http://<?php echo $_SERVER['HTTP_HOST']; ?>';
}
}, 600);
});
// 继续访问按钮
document.getElementById('continueBtn').addEventListener('click', function() {
this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 跳转中...';
this.disabled = true;
setTimeout(() => {
location.replace('<?php echo $url; ?>');
}, 800);
});
// 处理快照加载错误
function handleSnapshotError() {
const container = document.querySelector('.snapshot-img-container');
container.innerHTML = `
<div class="snapshot-placeholder">
<i class="fas fa-exclamation-circle" style="font-size: 36px; margin-bottom: 12px; color: var(--danger);"></i>
<p>网页快照加载失败</p>
<button class="snapshot-refresh" onclick="refreshSnapshot()">
<i class="fas fa-sync-alt"></i> 重试
</button>
</div>
`;
}
// 刷新快照功能
function refreshSnapshot() {
const container = document.querySelector('.snapshot-img-container');
// 添加随机参数防止缓存
const randomParam = Math.random().toString(36).substring(7);
const newSnapshotUrl = originalSnapshotUrl + (originalSnapshotUrl.includes('?') ? '&' : '?') + 'rand=' + randomParam;
container.innerHTML = `
<div class="snapshot-loading" id="snapshotLoader">
<i class="fas fa-spinner fa-spin"></i>
</div>
<img src="${newSnapshotUrl}"
alt="刷新后的网页快照"
class="snapshot-img"
loading="lazy"
onload="this.classList.add('loaded'); document.getElementById('snapshotLoader').style.opacity='0'; setTimeout(() => document.getElementById('snapshotLoader').style.display='none', 300);"
onerror="handleSnapshotError()">
`;
}
// 添加页面载入动画
document.addEventListener('DOMContentLoaded', function() {
const card = document.querySelector('.card');
card.style.opacity = '0';
card.style.transform = 'translateY(20px)';
setTimeout(() => {
card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
card.style.opacity = '1';
card.style.transform = 'translateY(0)';
}, 100);
});
</script>
</body>
</html>26.子比主题 – 右下角提示美化样式
给子比主题右下角提示加一个美化的样式，比如我们登入、签到等等会在右下角有这个弹窗样式，相当于替换了子比自带的样式，话不多说直接开始，喜欢的自行部署！
![图片[26]-本站装修-九块九源码](https://www.9k9y.cn/wp-content/uploads/2025/07/image-23-1024x477.png)
将下面的代码放到：子比主题–>>自定义CSS样式即可！
.notyf.success {
background: linear-gradient(90deg,rgb(249 15 15 / 70%),rgba(61,189,249,.8));
border-radius: 18px 0 0 18px;
}.enlighter-default .enlighter{max-height:400px;overflow-y:auto !important;}.posts-item .item-heading>a {font-weight: bold;color: unset;}@media (max-width:640px) {
.meta-right .meta-like{
display: unset !important;
}
}27.子比主题 – 为单个文章设置有效期_到期自动下线
![图片[27]-本站装修-九块九源码](https://www.9k9y.cn/wp-content/uploads/2025/07/image-24.png)
可看演示图，截止时间到期之后自动删除了文章到了回收站，非常的实用的功能！
首先我们到：/wp-content/themes/zibll/func.php文件，没有这个文件自己创一个，记得加上php头，要不然会报错，将下面的代码放到里面
//文章有效期
CSF::createMetabox('post_validity_options', array(
'title' => '文章有效期',
'post_type' => ['post', 'page', 'forum_post'],
'context' => 'side',
'data_type' => 'unserialize',
));
CSF::createSection('post_validity_options', array(
'fields' => array(
array(
'id' => 'post_validity_time',
'type' => 'date',
'desc' => '设置内容的有效期，请确保格式正确，例如：<code>2020-10-10 23:59:59</code></br>到期后将会自动删除此此内容',
'settings' => array(
'dateFormat' => 'yy-mm-dd 23:59:59',
'changeMonth' => true,
'changeYear' => true,
),
),
),
));
function zib_the_content_fore($content)
{
$post_id = get_the_ID();
$time = get_post_meta($post_id, 'post_validity_time', true);
if ($time) {
$end_time = date("m/d/Y H:i:s", strtotime($time));
$over = '<script type="text/javascript">window.location.reload()</script>';
$content = '<div style="text-align: center; border: 2px dashed lightgray; padding: 10px; border-radius: 18px; margin: 15px auto;"><i class="fa fa-exclamation-triangle" style="font-size: 16px;"></i> <strong style="text-align:center;font-size: 16px;">腾飞博客提醒您：因时效性问题，当前项目将于 <span style="color: red; font-size: 16px;" data-over-text="'. esc_attr($over). '" data-countdown="'. $end_time. '"></span> 后自动删除。</strong></div>' . $content;
}
return $content;
}
add_filter('the_content', 'zib_the_content_fore');
function zib_template_redirect_execute()
{
if (is_single()) {
$post_id = get_the_ID();
$time = get_post_meta($post_id, 'post_validity_time', true);
if ($time && strtotime($time) < strtotime(current_time('Y-m-d H:i:s'))) {
//执行删除文章
wp_trash_post($post_id);
wp_safe_redirect(home_url());
exit;
}
}
}
add_action('template_redirect', 'zib_template_redirect_execute');28.子比主题 – 底部添加一个动态展示区块
给子比主题底部加一个动态展示区块的样式美化，这个动态展示的我记得是哪个大厂底部下面的样式，然后子比官网也在用，所以就分享一下这个教程吧！
![图片[28]-本站装修-九块九源码](https://www.9k9y.cn/wp-content/uploads/2025/07/image-27-1024x233.png)
首先定位：WP后台–>>外观–>>小工具–>>Zibl 幻灯片(新)，然后我们放到你想要放到的位置，然后把子比默认的全部删掉，比如图片，把视频上传，视频我放在下面你看完教程自己下载视频，我这里配置的是电脑端显示，移动端不显示，建议移动端不显示，毕竟不怎么美观，总的来说就是把子比默认删掉完，然后加上视频，然后如下我的配置，你可以借鉴一下！
![图片[29]-本站装修-九块九源码](https://www.9k9y.cn/wp-content/uploads/2025/07/image-28.png)
视频自己访问一下链接自己下载一下
https://www.9k9y.cn/wp-content/uploads/2025/08/20250314023734318-蓝色矩形循环跳动.mp4
29.子比主题 – 文章封面缩略图悬停样式
![图片[30]-本站装修-九块九源码](https://www.9k9y.cn/wp-content/uploads/2025/07/image-29.png)
根据上面的演示图喜欢哪个将下面的代码放到：子比主题–>>自定义CSS样式即可，别忘了换图标
.item-thumbnail {
position: relative;
overflow: hidden;
transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
border-radius: 8px;
}
.item-thumbnail:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
.item-thumbnail:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(66, 0, 255, 0.2) 0%, rgba(255, 0, 140, 0.2) 100%);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
border-radius: 8px;
z-index: 2;
max-width: 765px;
margin: 0 auto;
pointer-events: none;
padding-left: 10px;
backdrop-filter: blur(0px);
}
.item-thumbnail:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
margin: -30px 0 0 -30px;
background: url(https://www.9k9y.cn/favicon.ico);
background-repeat: no-repeat;
background-size: 100% 100%;
z-index: 3;
transform: scale(0) translateY(20px);
transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1);
opacity: 0;
pointer-events: none;
filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
}
.item-thumbnail:hover:before {
background: linear-gradient(135deg, rgba(66, 0, 255, 0.6) 0%, rgba(255, 0, 140, 0.4) 100%);
backdrop-filter: blur(3px);
box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.2);
}
.item-thumbnail:hover:after {
transform: scale(1) translateY(0);
opacity: 1;
animation: float 3s infinite ease-in-out, glow 2s infinite alternate;
}
@keyframes float {
0% {
transform: translateY(0) rotate(0deg) scale(1);
}
50% {
transform: translateY(-10px) rotate(5deg) scale(1.05);
}
100% {
transform: translateY(0) rotate(0deg) scale(1);
}
}
@keyframes glow {
0% {
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
}
100% {
filter: drop-shadow(0 0 20px rgba(255, 255, 255, 1)) drop-shadow(0 0 30px rgba(66, 0, 255, 0.6));
}
}
.item-thumbnail::before {
content: '';
position: absolute;
inset: -3px;
background: linear-gradient(45deg, #ff00cc, #3300ff, #00ccff, #ff00cc);
background-size: 400% 400%;
z-index: -1;
border-radius: 10px;
opacity: 0;
transition: opacity 0.5s ease;
animation: gradientBG 6s ease infinite;
}
.item-thumbnail:hover::before {
opacity: 1;
}
@keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}30.子比主题 – 购买文章自动认证教程
![图片[31]-本站装修-九块九源码](https://www.9k9y.cn/wp-content/uploads/2025/07/image-30-1024x445.png)
将下面的代码放到：/wp-content/themes/zibll/func.php文件，没有这个文件自己创建一个，记得加上php头，要不然报错，将下面的代码放到里面
// 购买文章自动认证
function zibll_add_meta_box() {
add_meta_box(
'zibll_auth_meta_box',
'认证用户设置',
'zibll_auth_meta_box_callback',
'post',
'side'
);
}
add_action('add_meta_boxes', 'zibll_add_meta_box');
function zibll_auth_meta_box_callback($post) {
// 获取元数据
$is_enabled = get_post_meta($post->ID, '_zibll_auth_enabled', true);
$name = get_post_meta($post->ID, '_zibll_auth_name', true);
$desc = get_post_meta($post->ID, '_zibll_auth_desc', true);
?>
<p>
<label for="zibll_auth_enabled">
<input type="checkbox" name="zibll_auth_enabled" id="zibll_auth_enabled" value="1" <?php checked($is_enabled, 1); ?> />
启用认证用户功能
</label>
</p>
<p>
<label for="zibll_auth_name">认证名称：</label>
<input type="text" name="zibll_auth_name" id="zibll_auth_name" value="<?php echo esc_attr($name); ?>" placeholder="默认：认证用户" />
</p>
<p>
<label for="zibll_auth_desc">认证描述：</label>
<input type="text" name="zibll_auth_desc" id="zibll_auth_desc" value="<?php echo esc_attr($desc); ?>" placeholder="默认：赞助会员" />
</p>
<p>
<ul>
<li>启用后请确保已打开付费下载</li>
<li>购买后将会自动认证，无需审核</li>
<li>留空认证名称或描述则使用默认值</li>
</ul>
</p>
<?php
}
function zibll_save_post_meta($post_id) {
if (!current_user_can('edit_post', $post_id)) {
return;
}
if (isset($_POST['zibll_auth_enabled'])) {
update_post_meta($post_id, '_zibll_auth_enabled', 1);
} else {
delete_post_meta($post_id, '_zibll_auth_enabled');
}
if (isset($_POST['zibll_auth_name'])) {
update_post_meta($post_id, '_zibll_auth_name', sanitize_text_field($_POST['zibll_auth_name']));
} else {
delete_post_meta($post_id, '_zibll_auth_name');
}
if (isset($_POST['zibll_auth_desc'])) {
update_post_meta($post_id, '_zibll_auth_desc', sanitize_text_field($_POST['zibll_auth_desc']));
} else {
delete_post_meta($post_id, '_zibll_auth_desc');
}
}
add_action('save_post', 'zibll_save_post_meta');
function zibll_users_zidongrenzheng($pay_order) {
$pay_order = (array) $pay_order;
$post_id = $pay_order['post_id'];
$user_id = $pay_order['user_id'];
$is_enabled = get_post_meta($post_id, '_zibll_auth_enabled', true);
if ($is_enabled) {
$name = get_post_meta($post_id, '_zibll_auth_name', true);
$desc = get_post_meta($post_id, '_zibll_auth_desc', true);
// 设置默认值
if (empty($name)) {
$name = '认证用户';
}
if (empty($desc)) {
$desc = '赞助会员';
}
// 添加认证操作
zib_add_user_auth($user_id, array(
'name' => $name,
'desc' => $desc,
));
}
}
add_action('payment_order_success', 'zibll_users_zidongrenzheng');31.子比主题 – 随机弹窗评论
![图片[32]-本站装修-九块九源码](https://www.9k9y.cn/wp-content/uploads/2025/07/image-31.png)
将下方代码放置在主题目录下的function.php或者新建一个func.php文件
<?php
// 设置显示范围，'home' = 仅首页，'all' = 全站
$comment_popup_scope = 'home'; // 或 'all'
// 加载弹窗样式
function print_comment_popup_css_simple() {
global $comment_popup_scope;
if ($comment_popup_scope === 'home' && !is_front_page()) return;
?>
<style>
#wniui-popup-window {
min-width: 300px;
max-width: 500px;
bottom: 20px;
right: 20px;
position: fixed;
z-index: 1002;
color: #363636;
padding: 8px 16px;
border-radius: 12px;
transition: opacity 0.3s ease, transform 0.3s ease;
background-color: rgba(255, 255, 255, 0.85);
border: 1px solid #e3e8f7;
max-height: 300px;
opacity: 0;
transform: translateY(20px);
display: flex;
flex-direction: column;
justify-content: flex-start;
cursor: pointer;
}
#wniui-popup-window:hover {
border: 1px solid #425AEF;
}
#wniui-popup-window.wniui-show {
opacity: 1;
transform: translateY(0);
}
.wniui-popup-header {
position: relative;
display: flex;
align-items: center;
}
.wniui-popup-title {
font-size: 14px;
font-weight: bold;
background: #363636;
color: #fff;
padding: 4px 8px;
border-radius: 4px;
margin-right: 8px;
transition: .3s;
}
.wniui-popup-title:hover {
background-color: #423AEF;
}
.wniui-popup-author {
font-size: 14px;
font-weight: 600;
color: #363636;
display: flex;
justify-content: flex-start;
align-items: center;
cursor: pointer;
}
.wniui-popup-avatar {
width: 25px;
height: 25px;
border-radius: 50%;
margin-right: 6px;
background-color: #f5f6f7;
}
.wniui-popup-window-divider {
width: 100%;
height: 1px;
background: #e3e8f7;
margin: 5px 0;
}
.wniui-popup-window-content {
font-size: 15px;
word-wrap: break-word;
max-width: 450px;
white-space: normal;
text-overflow: ellipsis;
}
.wniui-popup-window-content p {
margin: 0;
padding: 0;
line-height: 1.5;
}
@media screen and (max-width: 768px) {
#wniui-popup-window {
display: none !important;
}
}
.wniui-popup-author span:hover {
color: #425AEF;
transition: .3s;
}
svg#popup-link:hover path {
fill: #425AEF;
transition: .3s;
}
</style>
<?php
}
add_action('wp_head', 'print_comment_popup_css_simple');
// 弹窗HTML输出
function print_comment_popup_html_simple() {
global $comment_popup_scope;
if ($comment_popup_scope === 'home' && !is_front_page()) return;
?>
<div id="wniui-popup-window" class="wniui-show-popup-window" style="cursor: pointer;">
<div class="wniui-popup-header">
<span class="wniui-popup-title">热评</span>
<span class="wniui-popup-author"></span>
<svg id="popup-link" style="transition: .3s; cursor: pointer;display: flex; position: absolute;right:0px;" t="1740280523955" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="22033" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30">
<path
d="M512.1 137.8c-206.4 0-373.7 167.3-373.7 373.7s167.3 373.7 373.7 373.7 373.7-167.3 373.7-373.7-167.3-373.7-373.7-373.7zM721 508.5L589.2 647c-9.9 10.4-27.4 3.4-27.4-11v-90.9h-1.4c-130.9 0-239.1 58.4-259.2 134.7h-2.3c12.8-133.2 125-237.4 261.5-237.4 0.5 0 0.9 0.1 1.4 0.1V359c0-14.4 17.5-21.4 27.4-11L721 486.6c5.8 6.2 5.8 15.8 0 21.9z"
fill="#231815" p-id="22034"></path>
</svg>
</div>
<div class="wniui-popup-window-divider"></div>
<div class="wniui-popup-window-content"></div>
</div>
<?php
}
add_action('wp_footer', 'print_comment_popup_html_simple');
// JS 输出和弹窗逻辑
function print_comment_popup_js_simple() {
global $comment_popup_scope;
if ($comment_popup_scope === 'home' && !is_front_page()) return;
$api_url = esc_url(rest_url('myapi/v1/hot-comments'));
$default_avatar = esc_url(get_template_directory_uri() . '/img/avatar-default.png');
?>
<script>
class CommentPopup {
constructor(config) {
this.config = {
displayTime: 5000,
fadeTime: 300,
retryInterval: 3000,
apiUrl: '<?php echo $api_url; ?>',
defaultAvatar: '<?php echo $default_avatar; ?>',
...config
};
this.popupTimer = null;
this.retryTimer = null;
this.commentData = [];
this.currentCommentUrl = '';
this.popup = document.getElementById('wniui-popup-window');
this.bindEvents();
}
async init() {
try {
await this.fetchComments();
this.showRandomComment();
} catch (error) {
console.error('Failed to fetch comments:', error);
this.scheduleRetry();
}
}
async fetchComments() {
const response = await fetch(this.config.apiUrl);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
this.commentData = await response.json();
}
scheduleRetry() {
this.retryTimer = setTimeout(() => this.init(), this.config.retryInterval);
}
showRandomComment() {
if (this.commentData.length === 0) return;
const post = this.commentData[Math.floor(Math.random() * this.commentData.length)];
const content = this.sanitizeContent(decodeURIComponent(post.content));
if (!content) return;
const data = {
avatar: post.avatar || this.config.defaultAvatar,
author: post.author,
content,
postUrl: post.url,
commentUrl: post.comment_url,
authorUrl: post.user_url || '#'
};
this.updatePopup(data);
}
sanitizeContent(content) {
return content.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
}
updatePopup(data) {
clearTimeout(this.popupTimer);
this.popup.classList.remove('wniui-show');
this.currentCommentUrl = data.commentUrl;
setTimeout(() => {
this.renderPopupContent(data);
this.popup.classList.add('wniui-show');
this.scheduleNextComment();
}, this.config.fadeTime);
}
renderPopupContent(data) {
const authorElement = this.popup.querySelector('.wniui-popup-author');
authorElement.innerHTML = `
<img class="wniui-popup-avatar" src="${data.avatar}" alt="avatar" loading="lazy">
<span onclick="window.location.href='${data.authorUrl}'">${data.author}</span>
`;
this.popup.querySelector('.wniui-popup-window-content').innerHTML = `<p>${data.content}</p>`;
}
scheduleNextComment() {
this.popupTimer = setTimeout(() => {
this.hidePopup();
this.showRandomComment();
}, this.config.displayTime);
}
hidePopup() {
this.popup.classList.remove('wniui-show');
}
handlePopupClick = (event) => {
if (event.target.closest('svg#popup-link') || !event.target.closest('.wniui-popup-author')) {
if (this.currentCommentUrl) {
window.location.href = this.currentCommentUrl;
}
}
}
bindEvents() {
this.popup.addEventListener('click', this.handlePopupClick);
let touchStartY = 0;
this.popup.addEventListener('touchstart', (e) => {
touchStartY = e.touches[0].clientY;
});
this.popup.addEventListener('touchmove', (e) => {
const touchDiff = e.touches[0].clientY - touchStartY;
if (touchDiff > 50) {
this.hidePopup();
}
});
}
destroy() {
clearTimeout(this.popupTimer);
clearTimeout(this.retryTimer);
this.popup.removeEventListener('click', this.handlePopupClick);
}
}
const commentPopup = new CommentPopup({
displayTime: 5000,
fadeTime: 300,
retryInterval: 3000
});
commentPopup.init();
window.addEventListener('unload', () => {
commentPopup.destroy();
});
</script>
<?php
}
add_action('wp_footer', 'print_comment_popup_js_simple');
// 注册 REST API 路由，获取热评数据
function register_hot_comments_endpoint_simple() {
register_rest_route('myapi/v1', '/hot-comments', array(
'methods' => 'GET',
'callback' => 'get_hot_comments_simple',
));
}
add_action('rest_api_init', 'register_hot_comments_endpoint_simple');
function get_hot_comments_simple() {
$comments = get_comments(array(
'number' => 50,
'status' => 'approve',
'orderby' => 'comment_date',
'order' => 'DESC',
));
$data = [];
if (empty($comments)) {
return new WP_REST_Response([], 200);
}
foreach ($comments as $comment) {
$avatar_html = zib_get_data_avatar($comment->comment_author_email);
preg_match('/src=["\'](\/\/[^"\']+)["\']/', $avatar_html, $matches);
$avatar_url = !empty($matches[1]) ? 'https:' . $matches[1] : '';
if (!$avatar_url) {
$avatar_url = get_template_directory_uri() . '/img/avatar-default.png';
}
$comment_url = get_comment_link($comment->comment_ID);
$user_url = get_author_posts_url($comment->user_id);
$data[] = [
'post_id' => $comment->comment_post_ID,
'author' => $comment->comment_author,
'content' => $comment->comment_content,
'avatar' => $avatar_url,
'url' => get_permalink($comment->comment_post_ID),
'comment_url' => $comment_url,
'user_url' => $user_url,
];
}
return new WP_REST_Response($data, 200);
}可以手动改首页还是全站展示
$comment_popup_scope = 'home'; // 仅首页
// 或
$comment_popup_scope = 'all'; // 全站显示32.子比主题 – 给文章侧边加一个滚动公告
![图片[33]-本站装修-九块九源码](https://www.9k9y.cn/wp-content/uploads/2025/07/image-32.png)
将下面的代码放到：WP后台–>>外观–>>小工具–>>自定义HTML代码即可！
<!--子比滚动公告框-->
<style>
@keyframes move {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(-200%);
}
}
.show-notice {
width: 100%;
overflow: hidden;
}
.show-notice-hello {
float: left;
width: 15%;
background-color: var(--theme-color);
}
.show-notice-inner {
float: left;
width: 80%;
margin-left: 2%;
overflow: hidden;
}
.show-notice-move-text {
font-size: 15px;
color: var(--main-color);
white-space: nowrap;
animation: move 10s linear infinite;
}
</style>
<div class="show-notice">
<div class="show-notice-hello badge">哈喽~</div>
<div class="show-notice-inner">
<div class="show-notice-move-text"> 全站积分可通过签到和每日任务获取，可别错过哦！</div>
</div>
</div>
<!--子比滚动公告框-->33.子比主题美化 – 文章卡片三个点美化+代码区块圆点美化
起初是优知新站长发现腾飞博客的卡片上方有三个点，希望找人扒一下，我也去腾飞博客看过了，我发现他是在卡片代码内插入html代码配合css实现的，我一看，我好像给7b2主题写过编辑器增加这三个点的代码，完全可以使用before来实现这个效果，于是就有了上述截图的效果—两个代码都放入css
文章卡片
.posts-item.card::before {
content: "";
display: block;
background: #fc625d;
top: 9px;
left: 15px;
border-radius: 50%;
width: 9px;
height: 9px;
box-shadow: 16px 0 #fdbc40, 32px 0 #35cd4b;
margin: 0px 2px -7px;
z-index: 1000;
position: absolute;
}
.posts-item.card {
padding: 26px 10px 10px 10px;
/*注意.posts-item.card没有定位属性 需要把这个注释去掉
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;
}34.子比主题美化 – 文章底部添加更新时间或过期失效提示
![图片[34]-本站装修-九块九源码](https://www.9k9y.cn/wp-content/uploads/2025/07/image-34.png)
将下面的 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="xx站" href="http://wpa.qq.com/msgrd?v=3&uin=qq号&site=qq&menu=yes"><b>站长</b></a>。</div >';
}
echo $custom_content;
}
add_action('zib_posts_content_before', 'article_time_update');在自定义 CSS 样式添加下面代码
.article-timeout{position:relative; border-radius: 8px; position: relative; margin-bottom: 25px; padding: 10px; background-color: var(--body-bg-color);}35.文章底部加一个商业版权声明
将下面代码放到子比主题设置=>>文章列表=>>文章页面=>>在文章内容后-插入内容
<div class="shangye">本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负！</div>![图片[35]-本站装修-九块九源码](https://www.9k9y.cn/wp-content/uploads/2025/07/image-35-1024x101.png)
将下面的代码放到自定义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;
}36
© 版权声明
本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负！
THE END
- 最新
- 最热
只看作者