建站笔记

2025-05-24
05-24
WordPress子比主题美化教程合集（持续更新）-汇聚访置顶

独家WordPress子比主题美化教程合集（持续更新）25/9/15更新

本页主题美化内容是博主在建站时一个一个测试过无任何错误的记录合集，使用之前先参考本站，若觉得实用就拿去用吧，我会不定时更新，如有长期未更新或者不能使用的请留言。 注意说明 每个人的审美观念不一样，所以请先参考本站或测试在用的美化。 主题美化、小工具可能会有一定程度使网站加载缓慢、CSS全局污染等等一系列的问题，请一定要测试后再进行美化。 主题美化可能会对主题文件进行修改，更新时请及时备份主题美化的文件，或者收藏本站，以免一些主题页面或美化效果丢失。 子比主题美化都是站长自己鼓捣、测试后才发布的，完全免费，开放。 教程及说明 （最新版）CSS代码添加到子比主题后台设置->自定义代码->自定义CSS样式 （最新版）JS即javascript代码添加到子比主题后台设置->自定义代码->自定义javascript代码 （最新版）没有特殊说明的小工具，自定义HTML小工具添加网站后台->外观->小工具->点击【自定义HTML】选择放置的位置->把代码复制进去，保存即可。 其他添加方式的，我会在教程里告知，若只需添加CSS+JS的教程，我不重复告知了，请注意看上面的方法。 教程按是更新时间排序，最新的美化教程排在最后面-页码越往后越新！ 1.logo扫光 CSS代码：后台子比主题设置->自定义代码->自定义CSS样式 /* logo扫光开始www.huijuf.com*/ .navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg);...
子比主题子比美化
2025-10-16
10-16
Ri主题 - 卡片三点样式-汇聚访

实用Ri主题 – 卡片三点样式

new
这是给Ri主题添加卡片三点美化的教程，之前我发过子比主题的今天带来Ri主题的部署教程，总体来说感觉还可以，右边的蓝点并不是主题原本自带的，是我自己适配的，三点的颜色你可以随意更改，包括那个蓝点的颜色，有喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="payshow"] CSSPHP 定位：主题后台设置 - 基本设置 - 自定义CSS代码中添加以下代码： /*汇聚访：www.huijuf.com*/ .entry-wrapper { position: relative; width: 100%; } .meta-category-dot { flex-direction: row-reverse; } .meta-category-dot { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align:...
RiThemeRiProV5
2025-10-14
10-14
子比主题 - 评论区增加开通会员按钮-汇聚访

实用子比主题 – 评论区增加开通会员按钮

这是一款给子比主题评论区的发送评论的右边添加一个开通会员按钮，这个按钮当用户评论的时候都可以看到，这样就更可以给自己的站点会员推广一下，教程也比较简单，不需要修改主题源代码，喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="reply"] 定位：子比主题–>>文章&列表–>>评论设置–>>自定义评论提交按钮文案，将代码放到发送评论的后面！ </button> <a class="but c-red btn-input-expand input-image mr6 pay-vip"> <svg class="icon" aria-hidden="true"><use xlink:href="#icon-vip_1"></use></svg><span class="hide-sm">加入VIP</span> </a> [/hidecontent]
子比主题子比美化
2025-10-14
10-14
Ri主题 - 导航栏开通会员按钮悬浮菜单-汇聚访

实用Ri主题 – 导航栏开通会员按钮悬浮菜单

这是一款Ri主题的导航栏开通会员按钮悬浮菜单效果，这个效果也是特别的实用，未登录时候可引导用户登录并查看会员价格及权益，登录后可直接跳转会员页面，本来想写登录后可直接开通呢，但是依旧比较懒就没搞，有能力的自己改吧，然后就是手机端不好看我就隐藏了，有需要的自行部署吧！ 未登录： 已登录： 代码部署： [hidecontent type="payshow"] CSSPHP温馨提醒 定位：后台主题设置 - 基本设置 - 自定义CSS样式代码中添加以下代码： /*汇聚访：www.huijuf.com*/ .vip-tit { color: #504d4d } .vip-package { color: #504d4d } .vip-new-2 { height: 300px; width: 450px; height: 300px; width: 450px; background-color: #fff0;...
RiThemeRiProV5
2025-10-14
10-14
Ri主题 - 侧边彩色滚动条-汇聚访

实用Ri主题 – 侧边彩色滚动条

这是给Ri主题添加的一款侧边彩色滚动条，之前我在子比主题上也适配过，这次给大家带来Ri主题的代码，这个效果也是特别不错的，同时代码也比较简单，多的我也不说了，有喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="reply"] 定位：主题后台设置 - 基本设置 - 自定义CSS样式代码中添加一下代码即可： /*汇聚访：www.huijuf.com*/ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { border-radius: 10px; background-color: skyblue; background-image: -webkit-linear-gradient( 45deg, rgba(25, 100, 248, 0.4) 25%, transparent 25%, transparent...
RiThemeRiProV5
2025-10-14
10-14
Ri主题 - 导航栏登录按钮下拉菜单样式-汇聚访

实用Ri主题 – 导航栏登录按钮下拉菜单样式

这是给Ri主题添加的一款导航栏登录下拉菜单按钮的样式美化，效果也是挺不错的，文字可自行更改，在用户登录的时候看到这些信息，引导用户登录以享受这些登录福利，有需要的自行部署吧！ 演示效果： 代码部署： [hidecontent type="payshow"] CSSPHP 定位：后台主题设置 - 基本设置 - 自定义CSS样式代码中添加以下代码：（图片我放在图床了，自行本地化） /*汇聚访：www.huijuf.com*/ .navbar .login-btn { border-radius: 25px; width: 90px; align-items: center; color: #ffffff; cursor: pointer; display: flex; font-size: 14px; height: 30px; justify-content: center; margin-right: 10px;...
RiThemeRiProV5
2025-10-13
10-13
Ri主题 - 顶部导航菜单角标样式-汇聚访

实用Ri主题 – 顶部导航菜单角标样式

这是一款Ri主题的顶部导航菜单角标样式，条总并没有像子比一样适配一些样式，这是单独用代码实现的，具有动态的效果，看起来还是挺不错的，话不多说，有喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="payshow"] 定位：主题后台设置 - 基本设置 - 自定义CSS样式代码中添加以下代码： /*汇聚访：www.huijuf.com*/ .menu-ico { font-size: 12px; color: #ffffff; line-height: 1; position: absolute; background: #9C27B0; border-radius: 2px; font-weight: bold; letter-spacing: 0.05em; padding: 2px 3px; display: inline-block; top:...
RiThemeRiProV5
2025-10-13
10-13
Ri主题 - 首页四格小工具美化-汇聚访

实用Ri主题 – 首页四格小工具美化

这是给RiProV5主题添加的一款四格小工具样式，总体看起来还是不错的，有一种科技风的感觉，图片我全部放在图床上面了，推荐自行下载起来本地化，你可以放在任何位置，喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="reply"] 定位：后台 - 外观 - 小工具 - 自定义HTML代码中添加以下代码（所放置的位置自行挑选）： /*汇聚访：www.huijuf.com*/ <div class="container animate__animated animate__fadeInUp"> <div class="row animate__animated animate__fadeInUp"> <div class="col-3"><div class="item"><a target="_blank" href="/wordpress" class="d-flex justify-content-center align-items-center py-4" style="color:#0868ac"><div class="item-icon"> <img src="https://cloudcache.tencentcs.com/open_proj/proj_qcloud_v2/gateway/product/css/img/p-overview/p-addition-links-list-view-news.svg"></div><div class="text-left"><h5>WordPress...
RiThemeRiProV5
2025-10-13
10-13
Ri主题 - 标签云彩色样式-汇聚访

实用Ri主题 – 标签云彩色样式

这是给RiProV5主题增添的一款标签云彩色样式的美化，原本这个标签是灰色的不是特别美观，今天汇聚访就教大家如何让他和别的主题一样变成彩色的，话不多说有喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="reply"] 定位：/wp-content/themes/ripro-v5/functions.php在此文件里的最后一行添加以下代码即可： /*汇聚访：www.huijuf.com*/ function colorCloud($text) { $text = preg_replace_callback('|<a (.+?)>|i', 'colorCloudCallback', $text); return $text; } function colorCloudCallback($matches) { $text = $matches[1]; $colors = array('48d1cc','a26ff9','fb7da9','6a6da9','19b5fe','ff5e5c','ffbb50','1ac756','7fb80e','6950a1'); $color = $colors[dechex(rand(0,count($colors)-1))]; $pattern = '/style=("|\')(.*?)\1/i'; $text...
RiThemeRiProV5
2025-10-13
10-13
Ri主题 - 左下角会员倒计时广告-汇聚访

实用Ri主题 – 左下角会员倒计时广告

这是一款Ri主题的会员倒计时广告样式效果，部署之后将会在网站的左下角显示，总体来说还是挺不错的，特别方便引导用户查看，该效果在每个页面都显示，有需要的自行部署吧！ 演示效果： 代码部署： [hidecontent type="payshow"] 定位：/wp-content/themes/ripro-v5/footer.php找到以下代码： </body> 随后在此代码上面添加以下代码（CSS和JS可放在主题后台，当然你也可以一起放置，如需更改倒计时时间需要更改JS的代码，图片我放在图床了，推荐本地化）： HtmlCSSJS <div class="floating-module" id="floatingModule"> <a href="/vip-prices/"> <div class="life-tu"> <div class="flip-container"> <img class="front" src="https://pic1.imgdb.cn/item/68eba304c5157e1a8869f355 .png" alt=""> <img class="back" src="https://pic1.imgdb.cn/item/68eba304c5157e1a8869f355 .png" alt=""> </div> </div> </a> <div class="life-end"></div> <img class="life-close" src="https://pic1.imgdb.cn/item/68eba2e2c5157e1a8869f296 .png" onclick="closeModule()">...
RiThemeRiProV5
2025-10-12
10-12
Ri主题 - 简约侧边栏引导样式-汇聚访

实用Ri主题 – 简约侧边栏引导样式

这是给Ri主题添加一款侧边栏引导样式的美化效果，之前我也发过几款子比主题的，那几款显而易见地比这个好看，这个看着有点复古..后续有时间我可能会适配更多吧，教程我写的比较详细了，喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="payshow"] 第一步第二步代码 首先我们去Ri主题后台 - 布局设置 - 网站底部设置 - PC端全站右下角菜单（返回顶部+）把这里面的栏目都删除，否则会堆叠在一起看起来很是肿瘤！删除完之后接下来改文件代码！ 定位：/wp-content/themes/ripro-v5/footer.php随后搜索以下代码： <!-- Back to top rollbar--> 在他的上方添加第三步的代码即可！css代码及js代码你可以放在后台也可以跟我一样，放在一起！ 没啥技术含量，直接把下方代码复制粘贴即可，当然有些内容你需要自己改！ <style> @font-face { font-family: "iconfont"; /* Project id 4677409 */ src: url('//at.alicdn.com/t/c/font_4677409_b9oqet6vpem.woff2?t=1725718474949') format('woff2'), url('//at.alicdn.com/t/c/font_4677409_b9oqet6vpem.woff?t=1725718474949')...
RiThemeRiProV5
123…25跳转