RiTheme

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...
3个月前
建站笔记
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...
3个月前
建站笔记
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...
3个月前
建站笔记
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...
3个月前
建站笔记
2025-10-25
10-25
Ri主题 - 高级搜索模块美化-汇聚访

实用Ri主题 – 高级搜索模块美化

这是对Ri主题的高级搜索模块美化，适配了白天以及黑夜模式，使用前你得先开启主题的这个模块否则修改了也无用，搜索热词我并没有调整太多的样式，如果用得到的话自己适配吧，需要的自行部署吧！ 演示效果： 代码部署： [hidecontent type="payshow"] CSSPHP 定位：主题后台设置 - 基本设置 - 自定义CSS样式代码中添加以下代码： /*汇聚访：www.huijuf.com*/ .huijuf-search-container { width: 100%; max-width: 600px; margin: 0 auto; position: relative; } .huijuf-search-form { width: 100%; } .huijuf-search-wrapper { display: flex; height: 45px;...
4个月前
建站笔记
2025-10-23
10-23
Ri主题 - 顶部导航栏菜单选中样式-汇聚访

实用Ri主题 – 顶部导航栏菜单选中样式

这是一款Ri主题顶部导航栏菜单选中样式，这个效果是在你鼠标放在菜单文字的时候，菜单文字的顶部会出现类似进度条样式的线条，黑夜模式也并无任何违和感，总体来说还是挺不错的，有喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="payshow"] 定位：主题后台设置 - 基本设置 - 自定义CSS样式代码中添加以下代码即可： /*汇聚访：www.huijuf.com*/ .navbar .nav-list>.menu-item>a::before { content: ""; position: absolute; top: -2px; left: 0; width: 100%; border-radius: 11px; height: 5px; background: linear-gradient(206deg, #df9900 10%, #ed0ca4 100%) !important;...
4个月前
建站笔记
2025-10-23
10-23
Ri主题 - 顶部导航菜单角标样式（第三款）-汇聚访

实用Ri主题 – 顶部导航菜单角标样式（第三款）

这是我给Ri主题适配的第三版的菜单角标样式，这个样式效果依旧是动态的样式，颜色我只适配了两个不过理论代码都是一样的，如需别的颜色可自行适配，黑夜模式也可以完美使用，话不多说了有喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="payshow"] CSS菜单 定位：主题后台设置 - 基本设置 - 自定义CSS样式代码中添加以下代码： /*汇聚访：www.huijuf.com*/ .huijuf-hong { font-size: .5em; line-height: 1.4; padding: 0.2em 0.5em; min-width: .9em; min-height: 0.9em; display: inline-block; vertical-align: 1.8em; border-radius: 11px; color: #fff; text-align: center;...
4个月前
建站笔记
2025-10-21
10-21
Ri主题 - 菜单彩色小圆圈样式-汇聚访

实用Ri主题 – 菜单彩色小圆圈样式

这是给Ri主题添加的一款菜单彩色小圆圈样式，主要用于除了一级菜单之外的菜单，比如二级三级等，这个效果也是十分的好看，给本就不多彩的日主题添上了浓厚的一笔，目前我只适配了这几种颜色，有喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="payshow"] CSS菜单 定位：主题设置 - 基本设置 - 自定义CSS样式代码中添加以下代码： /*汇聚访：www.huijuf.com*/ .lanse { box-sizing: border-box; content: ''; width: 12px; height: 12px; border-radius: 50%; position: absolute; top: 50%; margin-top: -6px; left: 0; border-color: #61e1b9; border:...
4个月前
建站笔记
2025-10-21
10-21
Ri主题 - 首页搜索模板波浪样式-汇聚访

实用Ri主题 – 首页搜索模板波浪样式

这是给Ri主题添加的一款首页搜索模板波浪样式，我修改了这个小工具的代码，按理来说这个小工具不管你放在哪里这个波浪效果都会显示出来，教程我写的很详细，修改主题代码前记得提前备份文件，有喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="payshow"] 定位：后台 - 外观 - 小工具 - 首页模板中添加【首页】高级搜索模块小工具，随后在主题设置 - 基本设置 - 自定义CSS代码样式中添加以下代码： /*汇聚访：www.huijuf.com*/ .awaves { padding-top: 320px; z-index: -1; position: absolute; bottom: 0; width: 100%; } .waves { position: relative; width:...
4个月前
建站笔记
2025-10-20
10-20
Ri主题 - 文章缩略图动态圆圈（代码版）-汇聚访

实用Ri主题 – 文章缩略图动态圆圈（代码版）

这是一款Ri主题缩略图动态圆圈效果，我之前适配过子比主题今天来适配一下Ri主题，这个效果是在鼠标悬浮文章缩略图的时候，会有一个动态波纹形态的白色小圆圈，效果也是十分好看，喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="payshow"] 定位：/wp-content/themes/ripro-v5/template-parts/loop/entry-media-part.php中找到以下代码（大概18行左右）： <?php if ($post_format_icon):?> 在这行代码的下方添加以下代码，图片我放在图床了，自行下载本地化！ /*汇聚访：www.huijuf.com*/ <div class="cao-cover"> <img src="https://pic1.imgdb.cn/item/68f622243203f7be00830c76 .svg" width="50" height="50px"> </div> /*汇聚访：www.huijuf.com*/ 随后定位：后台主题设置 - 基本设置 - 自定义CSS代码样式中添加以下代码即可： /*汇聚访：www.huijuf.com*/ .entry-media .cao-cover { position: absolute; top: 0; left: 0; width:...
4个月前
建站笔记
1234