建站笔记

2025-11-08
11-08
子比主题 – 右下角雪花按钮美化样式-汇聚访

实用子比主题 – 右下角雪花按钮美化样式

这是一款子比主题的右下角在线下雪样式，用户可以点击按钮如小雪、中雪、大雪进行调整下雪的程度，该效果是今一写的，样式也是挺不错的尤其是在黑夜模式中，话不多说喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="reply"] 定位：WP后台–>>外观–>>小工具–>>自定义HTML，如果想所有页面显示放到：所有页面-页脚区内部，那如果首页显示的话你就放到：首页-主内容下面，直接将下面的代码丢里面即可！ <style> .snow-control{position:fixed;bottom:25px;right:25px;z-index:1000;display:flex;flex-direction:column;align-items:flex-end;gap:12px}.snow-main-btn{width:48px;height:48px;border-radius:50%;background:#f0f7ff;border:1px solid #e8f4ff;outline:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;color:#4a90e2;box-shadow:0 3px 10px rgba(74,144,226,0.12);transition:all 0.2s ease;position:relative}.snow-main-btn:hover{background:#e8f4ff;transform:scale(1.05);box-shadow:0 4px 12px rgba(74,144,226,0.15);color:#357abd}.snow-main-btn:active{transform:scale(0.98);box-shadow:0 2px 8px rgba(74,144,226,0.1)}.snow-panel{background:#ffffff;border-radius:12px;padding:10px 8px;box-shadow:0 4px 15px rgba(74,144,226,0.08);display:none;flex-direction:column;gap:8px;min-width:100px;position:relative}.snow-panel::after{content:'';position:absolute;bottom:-6px;right:20px;width:12px;height:12px;background:#ffffff;transform:rotate(45deg);box-shadow:3px 3px 5px rgba(74,144,226,0.05)}.snow-panel.active{display:flex;animation:fadeIn 0.25s ease-out}.snow-btn{padding:8px 0;border-radius:8px;border:none;outline:none;cursor:pointer;background:#f5f9ff;color:#4a90e2;font-size:14px;font-weight:500;transition:all 0.2s ease;text-align:center}.snow-btn.active{background:#4a90e2;color:#ffffff;box-shadow:0 2px 6px...
22天前
建站笔记
2025-11-08
11-08
Ri主题 - 作者头像指针旋转动画-汇聚访

实用Ri主题 – 作者头像指针旋转动画

这是给RiProV5添加的一款作者头像指针旋转动画的样式效果，之前我在子比主题上适配过，今天适配了最新的日主题版本，没啥可说的喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="reply"] 定位：主题后台设置 - 基本设置 - 自定义CSS代码样式中添加以下代码： /*汇聚访：www.huijuf.com*/ .avatar{ -webkit-transition:0.4s; -webkit-transition:-webkit-transform 0.4s ease-out; transition:transform 0.4s ease-out; -moz-transition:-moz-transform 0.4s ease-out; } .avatar:hover{ transform:rotateZ(360deg); -webkit-transform:rotateZ(360deg); -moz-transform:rotateZ(360deg); } /*汇聚访：www.huijuf.com*/ [/hidecontent]
22天前
建站笔记
2025-11-08
11-08
Ri主题 - 添加文章版权声明（九款）-汇聚访

实用Ri主题 – 添加文章版权声明（九款）

这是给RiProV5添加的九款版权样式，代码集成了CSF框架可自行在主题后台设置不同的样式，因为教程是一体的，这里我就放了一张我觉得不错的演示图片，本版权声明已覆盖原主题的版权样式，故原主题的文章内容底部版权信息已失效，记得保存主题原代码，话不多说喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="reply"] admin-options.phpentry-copyright.phpCSS 定位：/wp-content/themes/ripro-v5/inc/options/admin-options.php搜索single_bottom_copyright随后你会看到这段代码： array( 'id' => 'single_bottom_copyright', 'type' => 'textarea', 'title' => '文章内容底部版权信息', 'sanitize' => false, 'desc' => '不填写则不显示', 'default' => '声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。', ), 在这段代码的下方添加我下面给的代码（添加完即可在主题后台设置 - 布局设置 - 文章内容页布局看到文章页尾版权配置）： array( 'id' =>...
22天前
建站笔记
2025-11-08
11-08
Ri主题 - 文章页添加FAQ教程-汇聚访

实用Ri主题 – 文章页添加FAQ教程

这是给RiProV5主题文章页添加的一款FAQ教程，本来这个教程是RiPro主题的因为RiPro也不再更新了这里我就适配了一下RiProV5，内容以及标题都可在后台修改，样式方面还是一贯的简约，我这里没适配黑夜模式，有喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="payshow"] 第一步： 首先定位/wp-content/themes/ripro-v5/inc/options/admin-options.php，搜索下方代码：remove_wp_xmlrpc，你将会看到以下整体代码： array( 'id' => 'remove_wp_xmlrpc', 'type' => 'switcher', 'title' => '关闭XML-RPC (pingback) 功能', 'desc' => 'XML-RPC 是 WordPress 用于第三方客户端，关闭后可以防止爆破攻击', 'default' => false, ), 随后在此代码的下方添加以下代码（添加完就可以在主题后台设置 - 网站优化 - 是否显示常见问题FAQ中设置了）： //...
22天前
建站笔记
2025-11-06
11-06
Ri主题 – 简约侧边栏引导样式（第二款）-汇聚访

实用Ri主题 – 简约侧边栏引导样式（第二款）

这是Ri主题的 简约侧边栏引导样式第二版，之前发过一个比较简陋的样式，这次这个是属于简约并且带有一点灵动效果的，同时适配了夜间模式，手机端设置了隐藏，话不多说有喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="payshow"] footer.phpCSS 定位：/wp-content/themes/ripro-v5/footer.php中找到以下代码（直接搜就可以了）： </footer> 找到后在这个代码的下方添加以下代码，内容自行更改： <div class="floating-service-sidebar right"> <ul class="fsb-buttons"> <li class="fsb-item fsb-qq"> <a href="http://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes" target="_blank"> <i class="fab fa-qq"></i> <div class="fsb-tooltip">QQ</div> </a><div class="fsb-popup qq-popup"><a href="http://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes" target="_blank"> <div class="fsb-account-display">QQ: 123456</div> </a><a...
24天前
建站笔记
2025-11-06
11-06
Ri主题 - 卡片缩略图动态星星按钮样式-汇聚访

实用Ri主题 – 卡片缩略图动态星星按钮样式

这是给RiProV5增添的一款缩略图动态动态星星按钮样式的美化，当选中文章的缩略图的时候会出现一个立即获取按钮，选中按钮的同时会有动态星星的样式效果，当然这个按钮文字你可自行更改，包括一些颜色之类的，有喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="payshow"] entry-media-part.phpCSS 定位：/wp-content/themes/ripro-v5/template-parts/loop/entry-media-part.php找到以下代码（大概十几行左右）： <?php if ($post_format_icon):?> 随后在这段代码的上方添加以下代码： /*汇聚访：www.huijuf.com*/ <div class="overlay"> <button class="overlay-button huijuf-button">立即获取 <div class="star-1"> <svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path...
24天前
建站笔记
2025-11-04
11-04
Ri主题 - 顶部导航栏日夜切换按钮美化-汇聚访

实用Ri主题 – 顶部导航栏日夜切换按钮美化

这是一款Ri主题顶部导航栏日夜切换按钮的美化样式，白天的效果为一个小太阳，同时伴有一些动态效果，夜间的和之前的差不多，当网站为手机版的时候会自动隐藏，效果也是挺不错的喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="payshow"] action-hover.php CSS 定位：/wp-content/themes/ripro-v5/template-parts/header/action-hover.php找到代码（大概第9行左右）： <span class="action-btn toggle-color" rel="nofollow noopener noreferrer"> <span title="<?php _e('亮色模式', 'ripro');?>" data-mod="light" class="<?php echo ($site_color=='light') ? ' show' : '';?>"><i class="fas fa-sun"></i></span> <span title="<?php _e('深色模式', 'ripro');?>" data-mod="dark" class="<?php...
26天前
建站笔记
2025-11-04
11-04
Ri主题 - 顶部导航栏添加成为VIP按钮（第二款）-汇聚访

实用Ri主题 – 顶部导航栏添加成为VIP按钮（第二款）

这是给Ri主题添加的第二款的顶部导航栏添加成为VIP按钮，相比之前的单纯的按钮这次增加了互动的风格，下浮菜单内的文字可自行修改，点击成为Vip可自动跳转会员页面，手机版汇聚访这里没有隐藏，但是测试下来并不占位置，有喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="payshow"] action-hover.phpCSS 定位：/wp-content/themes/ripro-v5/template-parts/header/action-hover.php找到以下代码（位置大概在前10行左右）： <?php if ( !empty(_cao('is_site_dark_toggle',true)) ) :?> 随后在上面的代码的上方添加下方代码（图片我放在了图床，自行本地化）： <span class="fuid-vip-link"> <a href="/user/vip/"> <img src="https://pic1.imgdb.cn/item/68ea3147c5157e1a88657ec0 .svg"> 成为VIP </a> <div class="vip-tooltip"> <!-- 炫彩背景元素 --> <div class="glass-bg"></div> <div class="glass-bg-2"></div> <svg class="vip-crown" viewBox="0 0...
26天前
建站笔记
2025-11-03
11-03
Ri主题 - 底部弹窗信息通知-汇聚访

实用Ri主题 – 底部弹窗信息通知

这是RiProV5的一款底部弹窗信息通知样式，这个样式在每个页面都会显示出来，相比网站弹窗这个样式对用户的友好性更大，我这里仅加了两行主要说明，你可根据自身情况进行添加，话不多说有喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="reply"] footer.phpCSSJS 定位：/wp-content/themes/ripro-v5/footer.php找到以下代码（位置大概在40多行左右）： <!-- 自定义js代码 统计代码 --> <?php if ( !empty(_cao('site_web_js')) ) echo _cao('site_web_js');?> <!-- 自定义js代码 统计代码 END --> 随后添加以下内容，内容根据自身情况可修改： /*汇聚访：www.huijuf.com*/ <div id="bottomModule" class="bottom-module sj_dibu" style="display: block;"> <div class="text"> <span class="bor-sp">近期我们发现有不法分子将网站的部分功能代码进行倒卖和传播。<span...
27天前
建站笔记
2025-11-01
11-01
子比主题 - 顶部导航菜单呈透明样式-汇聚访

实用子比主题 – 顶部导航菜单呈透明样式

这是一款子比主题的顶部导航菜单呈透明样式，如果不加这个样式的话页面滑动的时候才会呈现透明的状态，而加上这个效果之后始终都是透明的，代码也比较简单，话不多说了，有喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="reply"] 定位：子比后台设置 - 自定义CSS样式中添加以下代码即可： /*汇聚访：www.huijuf.com*/ .header { --header-bg: transparent; --header-color: #000000; } /*汇聚访：www.huijuf.com*/ [/hidecontent]
29天前
建站笔记
123456…30跳转