建站笔记

2025-10-09
10-09
子比主题 – 倒计时弹窗美化样式-汇聚访

实用子比主题 – 倒计时弹窗美化样式

这是一组子比主题的倒计时弹窗美化样式，但是同时也适用于所有网站程序站点（自行测试），该教程仅以子比主题为例子教学，教程比较简单，有喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="reply"] 定位：WP后台–>>外观–>>小工具–>>自定义HTML，建议将下面的代码放到我们的所有页面-底部全宽度 <style> /*汇聚访：www.huijuf.com*/ .popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px); z-index: 9999; justify-content: center; align-items: center;...
1个月前
建站笔记
2025-10-09
10-09
子比主题 – 文章页添加本站历史上的今天-汇聚访

实用子比主题 – 文章页添加本站历史上的今天

给子比主题文章页面加一个本站历史上的今天，加上去可以看到去年的今天的文章，并且可以看到自己之前发的什么文章，整体来说还是很不错的，该教程需要修改主题原代码，记得提前备份，以防网站发生致命错误！喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="reply"] func.phpCSSzib-single.php 定位：/wp-content/themes/zibll/func.php文件里面，没有这个文件自己创一个，创建之后记得加php头，将下面的代码放到里面： //历史上的今天，代码来自柳城博主的 WP-Today 插件 function today_in_history() { // $title = "历史上的今天"; ?> <?php $limit = 5; global $wpdb; $post_year = get_the_time('Y'); $post_month = get_the_time('m'); $post_day = get_the_time('j'); $sql =...
1个月前
建站笔记
2025-10-08
10-08
子比主题 – 音乐播放器代码版-汇聚访

实用子比主题 – 音乐播放器代码版

这是一款子比主题的音乐播放器代码版，部署之后是在网站右下角显示一个QQ音乐的图标，点击后即可大屏来进行播放音乐，非常实用，基本上代码都是通过JS来实现的，有喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="reply"] 将下面的代码放到：子比主题–>>自定义底部HTML即可，代码里面有引入的js文件，附件在文章资源内下载，自己上传一下本地引入一下！这里我放在了网站根目录！ <!-- 音乐播放器插件开始 --> <script src="/newindex.js"></script> <style> #shmusiczr { /* 距离网页右侧的距离，请根据需要自行更改 */ right: 15px; /* 距离网页底部的距离，请根据需要自行更改 */ bottom: 120px; } /* 在小屏幕设备（如手机）上隐藏播放器 */ @media (max-width: 768px) { #shmusiczr { display:...
1个月前
建站笔记
2025-10-08
10-08
 子比主题 – 二次元渐变效果五格小工具-汇聚访

实用 子比主题 – 二次元渐变效果五格小工具

这是子比主题的二次元渐变效果五格小工具，主要适用于那些二次元风格的站点，夜间模式不是适配的非常好，如果需要夜间的话自行适配一下吧，图片素材呢我放在图床里了，这边还是建议下载下来保存到本地，话不多说了也，有喜欢的自行部署吧，教程也比较简单！ 演示效果： 代码部署： [hidecontent type="reply"] 定位：外观 - 小工具 - 首页-顶部全宽度 - 自定义Html代码中添加以下代码： HtmlCSS <div class="home-row-left content-area "> <div id="html-box-qkyl_sdk" class="html-box"> <div data-v-d1c115ee="" class="course-project-panel-course"> <ul data-v-d1c115ee=""> <li data-v-d1c115ee=""> <a data-v-d1c115ee="" href="https://www.huijuf.com/" target="_blank"> <div data-v-d1c115ee="" class="top"> <p...
1个月前
建站笔记
2025-10-08
10-08
子比主题 - 优雅网站弹窗样式-汇聚访

实用子比主题 – 优雅网站弹窗样式

这是子比主题的一款网站弹窗样式，当然你也可以用于别的网站，虽然我没测试但是也是通用的，如果你想在别的程序使用，也可以看看这篇文件的部署教程，如果有喜欢的话自行查看部署吧！ 演示效果： 代码部署： [hidecontent type="reply"] 首先在文章附件里把压缩包下载下来，然后解压出来找到huijuf_dialog.js这个JS文件，然后放在网站根目录下，随后在子比后台 - 自定义头部HTML代码中添加以下代码即可： <script src="huijuf_dialog.js" defer></script> [/hidecontent]
1个月前
建站笔记
2025-10-07
10-07
子比主题 – 文章卡片弹窗美化样式-汇聚访

实用子比主题 – 文章卡片弹窗美化样式

这是子比主题的文章卡片弹窗的美化样式，起初这个效果是在图酷的站点上看到的，今天就分享给大家，一般来说用处不是特别大，发出来也是给有需要的人，教程比较详细，有用得到的自行部署吧！ 演示效果： 代码部署： [hidecontent type="payshow"] 一共两组代码，一个是JS代码和CSS代码，话不多说直接开始部署教程！ 特别提醒：里面有两个跳转按钮：阅读全文和探索更多，阅读全文是用户当前点的文章，探索更多是固定的跳转链接，需要自己改自己的链接在JS里面的/user/product这个代码，自己改自己的跳转链接即可！ CSSJs 定位：子比主题–>>自定义CSS样式直接把下方代码放进去即可！ /*汇聚访：www.huijuf.com*/ .custom-popup-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 9999; justify-content: center; align-items: center;...
1个月前
建站笔记
2025-10-07
10-07
子比主题 – CSS动态渐变背景（三款样式）-汇聚访

实用子比主题 – CSS动态渐变背景（三款样式）

这是子比主题的三款CSS动态渐变背景样式的美化，图片中我仅仅展示了静态的样式效果，原作者为鼠子，对比那些svg作为背景图来说还是这个比较好一些，不会受到浏览器的兼容性问题，有喜欢的自行部署吧！ 演示效果： 第一款第二款第三款 代码部署： [hidecontent type="reply"] 三款都是CSS代码，直接将代码放到：子比主题–>>自定义CSS样式即可！ 第一款第二款第三款 body:before { content: ""; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -520; pointer-events: none } body:before { background: linear-gradient(90deg,#f795331a,#f370551a 15%,#ef4e7b1a 30%,#a166ab1a,#5073b81a,#1098ad1a,#07b39b1a 86%,#6dba821a) }...
1个月前
建站笔记
2025-10-07
10-07
子比主题 – 邮箱通知样式美化（四款样式）-汇聚访

实用子比主题 – 邮箱通知样式美化（四款样式）

这是子比主题的邮箱通知样式效果美化，一共有四种好看独特的样式，后续会陆续同步更新，同时也感谢那些无私奉献的作者，教程也比较简单便捷，有看到自己喜欢的样式的话就自行部署吧！ 演示效果： 第一款第二款第三款第四款 代码部署： [hidecontent type="reply"] 定位：/wp-content/themes/zibll/inc/functions/zib-email.php文件里面，我们搜$content = '，搜了之后，我们如下图替换子比的样式，如下图所示： 第一款第二款第三款第四款 $content = ' <style> .gradient-mail{ background:#eaf7ff; padding:40px 0; font-family: "Helvetica Neue","PingFang SC",Arial,sans-serif; } .gradient-mail .box{ max-width:620px; margin:auto; border-radius:24px; background:linear-gradient(140deg,#fff 60%,#d6eaff 100%); box-shadow:0 4px 22px rgba(66,150,255,0.10);...
1个月前
建站笔记
2025-10-06
10-06
子比主题 – 文章后渐变通知栏美化-汇聚访

实用子比主题 – 文章后渐变通知栏美化

这是一款给子比主题文章后面增加一个渐变通知栏的样式美化效果，原为腾飞发出来的，今天在这里分享给大家，代码部署起来也比较容易，大家如果有需要的有喜欢的自行部署即可！ 演示效果： 代码部署： [hidecontent type="reply"] 定位：子比主题–>>文章&列表–>>文章页面–>>在文章内容后-插入内容，将下面的代码放里面即可！ /*汇聚访：www.huijuf.com*/ <style> .custom_notice_banner_wrapper_20240712{width:100%;display:flex;flex-direction:column;gap:15px;margin:20px 0;font-family:"PingFang SC","Microsoft YaHei",sans-serif}.custom_notice_banner_20240712{width:100%;height:50px;border-radius:12px;overflow:hidden;position:relative;box-shadow:0 4px 20px rgba(0,0,0,0.15);transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);border:1px solid rgba(255,255,255,0.2)}.custom_notice_banner_20240712:hover{transform:translateY(-3px) scale(1.01);box-shadow:0 8px 25px rgba(0,0,0,0.2);border:1px solid rgba(255,255,255,0.4)}.custom_notice_banner_content_20240712{display:flex;align-items:center;justify-content:center;height:100%;width:100%;position:relative;z-index:5;padding:0 20px}.custom_notice_banner_icon_20240712{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,0.25);backdrop-filter:blur(5px);margin-right:15px;color:white;box-shadow:0 2px 10px rgba(0,0,0,0.1);animation:custom_notice_banner_pulse_20240712 2s infinite}.custom_notice_banner_text_20240712{color:white;font-size:16px;font-weight:500;text-align:center;text-shadow:0 2px 4px rgba(0,0,0,0.2);letter-spacing:1px;background:rgba(255,255,255,0.1);padding:6px 15px;border-radius:20px;backdrop-filter:blur(5px)}.custom_notice_banner_20240712.purple_gradient{background:linear-gradient(-45deg,#9c27b0,#673ab7,#3f51b5,#e040fb,#9c27b0);background-size:400%...
1个月前
建站笔记
2025-10-06
10-06
子比主题 – 专题&聚合小工具更多文章美化-汇聚访

实用子比主题 – 专题&聚合小工具更多文章美化

今天给大家带来一款专题&聚合小工具的美化，之前也发过这个小工具的几个美化，今天给大家分享一下这个更多文章按钮的样式美化，我看好多站点都发出来了但是他们发的都不生效，我这里做了修复，有喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="reply"] 定位：子比主题–>>自定义CSS样式把以下代码放进去即可： /*汇聚访：www.huijuf.com*/ .but.p2-10.px12.c-blue.hide-sm.shrink0{ background:linear-gradient(90deg, #40a6fa 0, #356aef 100%); color:#fff !important; border:none !important; font-size:13px; } .user-btns .jb-blue:hover{ filter:brightness(1.08) saturate(1.08); box-shadow:0 6px 18px -6px #356aef5c; } .user-btns a, .user-btns .but{ padding:0 22px;...
1个月前
建站笔记
1…89101112…31跳转