建站笔记

子比主题 - 侧边动漫图片卡片小工具-汇聚访

实用子比主题 – 侧边动漫图片卡片小工具

这是一款仿B站的侧边动漫图片社区小工具，这款小工具是纯代码并没有写成可视化小工具，没有适配昼夜模式，放上自己的二维码即可，旁边的几个标签都可以更改，喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="reply"] 定位：外观 - 小工具 - 文章页&侧边栏（自定义HTML代码区块）添加以下代码即可，图片可自行本地化，以防丢失！ <style type="text/css"> .mhy-qrcode-download-card .mhy-qrcode-top-card{position:relative;width:auto;height:212px;border-radius:4px;padding-top:42px}.mhy-qrcode-download-card .mhy-qrcode-top-card__role-image{position:absolute;width:154px;height:106px;right:0;top:0;background-size:100% 100%;background-repeat:no-repeat;cursor:pointer}.mhy-qrcode-download-card .mhy-qrcode-top-card__role-content{cursor:pointer}.mhy-qrcode-download-card .mhy-qrcode-top-card__role-content-background{width:auto;height:64px;background-size:280px 64px;border-radius:3px 3px 0 0}.mhy-qrcode-download-card .mhy-qrcode-top-card__role-content-background .background__welcome{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;width:100%;height:32px;left:0px;top:75px;background-image:url(https://oss.longs.cn/images/2025/05/20250519104024124.png);background-size:100% 32px;background-repeat:no-repeat}.mhy-qrcode-download-card .mhy-qrcode-top-card__role-content-background .background__welcome-image{width:24px;height:24px;margin:8px 6px 0 12px;background-size:100% 100%;background-repeat:no-repeat}.mhy-qrcode-download-card .mhy-qrcode-top-card__role-content-background .background__welcome-text_img{width:111px;height:22px;margin-top:9px;background-size:100% 100%;background-repeat:no-repeat}.mhy-qrcode-download-card .mhy-qrcode-top-card__role-content-info{display:-webkit-box;display:-ms-flexbox;display:flex;width:auto;height:106px;background:var(--main-bg-color);border-radius:0...
建站笔记
110410
汇聚访的头像-汇聚访核心会员汇聚访1年前
子比主题 - 添加一个每日60s新闻模块+新闻独立页面+本地接口-汇聚访

实用子比主题 – 添加一个每日60s新闻模块+新闻独立页面+本地接口

大家好，本次汇聚访给大家带来了子比主题添加一个每日60s新闻模块及独立页面和本地接口的教程，为什么要用本地接口而不用Api呢，因为Api随时可能失效，但是本地接口避免了这个问题，话不多说有喜欢的自行部署吧，教程写的很详细！ 演示效果： 代码部署： [hidecontent type="payshow"] 一：本地接口制作方法： 第一步：下载文章附件文件后把本地接口文件夹里的文件上传到网站的根目录下！ 第二步：打开 60s的文件夹，修改 60s.php 文件中的 Tonke！ 第三步：token获取——前往获取 注册登录 - >个人管理 -> 个人中心 -> 数据中心 -> token管理 - >获取token 第四步：添加宝塔 计划任务，如下图所示: 任务类型：访问URL-GET URL地址： 你的网站域名/60s/60s.php?api=api-json 如果你不是放在根目录的请自行修改 执行周期：每天执行一次就行，不建议太早。也可以每天隔几小时执行一次 添加好之后先手动执行一次 第五步：检查60s文件夹内的 test.json 文件内是否已有内容，如果没有内容请检查是否那一次出问题了!!! 二：模块+页面 添加步骤 第一步：添加新闻模块: 1、子比主题文件目录/wp-content/themes/zibll/func.php 或 functions.php 文件内...
建站笔记
01018
汇聚访的头像-汇聚访核心会员汇聚访1年前
子比主题 - 旋转小人小工具-汇聚访

实用子比主题 – 旋转小人小工具

这是一款给子比主题适配的旋转小人小工具组件，此小工具不仅仅可以用来展示网站的公告信息，同时还可以引导用户去查看信息，样式也是十分好看，有喜欢的朋友自行部署吧！ 演示效果： 代码部署： [hidecontent type="payshow"] 定位：WP后台 - 外观 - 小工具中选择文章页-侧边栏随后添加自定义HTML代码即可： <div style="background:#fff;border-radius:15px;padding:10px 20px;" class="card-widget card-announcement"> <div class="item-headline"><i style="font-size:20px;color:red;" class="fa fa-bullhorn"> </i> <span style="font-size:15px;font-weight:700;margin-left:3px;line-height:15px;"> 公告</span></div> <div class="announcement_content"> <p>不定时更新博客，欢迎交换<a href="/links.html"><strong>友链</strong></a>...</p> <div class="twopeople"> <div class="container" style="height:200px;"><canvas class="illo" width="1200"...
建站笔记
08613
汇聚访的头像-汇聚访核心会员汇聚访1年前
子比主题 - 右侧新版悬浮导航美化版本修正版本-汇聚访

实用子比主题 – 右侧新版悬浮导航美化版本修正版本

子比主题现在右侧悬浮导航还是比较不错的，功能页比较全面，如果有喜欢折腾的朋友可以自己修改下，右侧悬浮导航，此教程是从其他博客看到后觉着不错，可以学习下，喜欢的朋友可以自己测试，只显示电脑端，手机端空间太小，影响阅读、美观。 演示效果： 代码部署： [hidecontent type="payshow"] CSS自定义底部HTML 添加教程第一步首先就是添加CSS，zibll主题设置—全局功能—自定义代码—自定义CSS样式添加以下CSS代码！ .gotop { position: fixed; bottom: 20%; right: 1%; z-index: 999; }/*www.huijuf.com*/ .gotop-box{ box-shadow: 0 4px 23px rgba(0, 0, 0, 0.08); border-radius: 8px; background: #fff; } .gotop .gotop-item{ color:...
建站笔记
01618
汇聚访的头像-汇聚访核心会员汇聚访1年前
子比主题 - 动态灵动岛样式美化-汇聚访

实用子比主题 – 动态灵动岛样式美化

这是一款模仿苹果灵动岛一个样式代码，代码是扒的mac站长的一个样式，然后对于灵动岛，里面是比如用户访问哪个页面或者文章分类等，他会调用该页面的标题来欢迎的灵动岛，消息和用户中心我是单独判断的一个样式，话不多说直接上演示！ 演示效果： 代码部署： [hidecontent type="payshow"] func代码CSS代码自定义头部HTML代码 定位：/wp-content/themes/zibll/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/'))...
建站笔记
012113
汇聚访的头像-汇聚访核心会员汇聚访1年前
子比主题 - 给文章内超链接加上波浪效果-汇聚访

实用子比主题 – 给文章内超链接加上波浪效果

目前这个美化还并不是很多，喜欢的朋友可以使用看看效果，很简单把代码添加到合适的位置即可，应该所有WordPress网站都可以使用。只需两行代码即可实现！ 演示效果： 代码部署： [hidecontent type="reply"] 定位：子比主题设置–>>自定义代码–>>自定义 CSS 样式添加以下代码即可： /*超链接下波浪线*/ .wp-posts-content a:hover {color:#ff4500;text-decoration:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4'%3E%3Cpath fill='none' stroke='%23FF4500' d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E")repeat-x 0 100%;background-size:20px...
建站笔记
51128
汇聚访的头像-汇聚访核心会员汇聚访1年前
子比主题 - 添加一个类似哔哩哔哩客服中心头部banner图-汇聚访

实用子比主题 – 添加一个类似哔哩哔哩客服中心头部banner图

大家好，这次汇聚访给大家带来一款类似哔哩哔哩客服中心头部的banner图，这个效果适合一些做二次元风格的网站，你可以放底部或消息通知页面顶部，适用大多数wordpress主题，有喜欢的自行部署吧。 演示效果： 代码部署： [hidecontent type="payshow"] 定位：WP后台 - 外观 - 小工具中选择文章页-顶部全宽度添加自定义HTML代码即可： <style> .banner { position: relative; overflow: hidden; height: 183px; background: url(https://blog.zbiwl.com/bilibili/59nm7456wp.jpg@70p) repeat; background-size: 1200px 700px } .banner .banner-content { position: relative; margin: 0 auto; width:...
建站笔记
09311
汇聚访的头像-汇聚访核心会员汇聚访1年前
子比主题 - 给网站底部添加一个蓝色矩形循环跳动动画-汇聚访

实用子比主题 – 给网站底部添加一个蓝色矩形循环跳动动画

这是一款子比主题的蓝色矩形循环跳动动画，子比主题官方的演示站目前正在使用的一款美化效果，部署起来十分简单，图片放置的位置为子比的存储库，不用害怕丢失，有喜欢的朋友自行部署吧！ 演示效果： 代码部署： [hidecontent type="reply"] 定位：WP后台 - 外观 - 小工具 - 自定义HTML代码中添加以下代码即可（推荐放置：首页-主内容下面）： <div class="widget-graphic-cover mb20 hidden-xs"><div style="--font-size:30px;"><div class="graphic hover-zoom-img noshadow mb10 " style="padding-bottom: 16%!important;"><video autoplay="" loop="" muted="" class="fit-cover lazyloading" data-src="https://oss.zibll.com/zibll.com/2023/04/蓝色矩形循环跳动.mp4" src="https://oss.zibll.com/zibll.com/2023/04/蓝色矩形循环跳动.mp4" poster="https://oss.zibll.com/zibll.com/2024/03/20240317190819420-蓝色矩阵跳动-封面.jpg"></video><div class="abs-center text-center graphic-text...
建站笔记
79812
汇聚访的头像-汇聚访核心会员汇聚访1年前
子比主题 - 昵称抖音风格字体美化代码-汇聚访

实用子比主题 – 昵称抖音风格字体美化代码

子比用户昵称加一个抖音故障风格字体的美化代码，看着挺不错的，记录一下日后使用。 演示效果： 代码部署： [hidecontent type="reply"] 代码部署就不用说了，css代码放到子比主题自定义css即可。 /*昵称*/.display-name{ text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5); animation: shake-it .5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);}@keyframes shake-it{ 0%{ text-shadow: 0 0 rgba(0,...
建站笔记
31317
汇聚访的头像-汇聚访核心会员汇聚访1年前
子比主题 - 评论区添加随机夸夸功能-汇聚访

实用子比主题 – 评论区添加随机夸夸功能

有很多人在网站浏览需要回复，有的比较嫌麻烦不愿意打字，也会收到一些各种评论相对比较杂乱，今天分享一个用夸夸功能，来替代传统的评论一言，将它们分开使用，先看看效果图，再考虑使用不使用！ 演示效果： 代码部署： [hidecontent type="reply"] ①CSS②PHP③PHP注意事项 css代码自行本地化 或直接下载 .kuakua-first-box{ margin: auto; width: 440px; border-radius: 16px; bottom: auto; min-height: 10rem; left: 50%; position: fixed; right: auto; top: 50%; transform: translate(-50%, -50%); background: #fff; z-index: 1032; box-shadow:...
建站笔记
914115
汇聚访的头像-汇聚访核心会员汇聚访1年前
1…2930313233…36跳转