建站笔记

Ri主题 - 顶部导航栏日夜切换美化-汇聚访

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

这是汇聚访适配RiProV5主题的一款顶部导航栏日夜切换的美化样式，这个效果也是非常可以原创应该是最骚站长，我模仿着也搞了一个同时图标颜色可以自行更改，测试下来总体来说是有一点小bug的，但是不影响使用，话不多说喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="payshow"] CSSJSaction-hover.php 定位：状态后台设置 - 基本设置 - 自定义CSS样式代码中添加以下代码： /*汇聚访：www.huijuf.com*/ .ui-switch { --switch-bg: rgb(135, 150, 165); --switch-width: 48px; --switch-height: 20px; --circle-diameter: 32px; --circle-bg: rgb(0, 56, 146); --circle-inset: calc((var(--circle-diameter) - var(--switch-height)) / 2); }...
建站笔记
0818
汇聚访的头像-汇聚访核心会员汇聚访6个月前
Ri主题 - 顶部导航栏开通会员图标-汇聚访

实用Ri主题 – 顶部导航栏开通会员图标

这是一款RiProV5主题的顶部导航栏开通会员图标，之前我也发过几种导航栏的开通会员图标，但是那几个几乎都差不多，今天汇聚访给大家带来一款全新的，夜间模式我没有适配，需要的自行适配一下吧，话不多说喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="payshow"] CSSmenu.php 定位：后台主题设置 - 基本设置 - 自定义CSS样式代码中添加以下代码： /*汇聚访：www.huijuf.com*/ .btn-floating.btn-sm, .btn-group-sm>.btn-floating.btn { width: 1.8125rem; height: 1.8125rem; transition: all 0.3s ease; } .btn-floating.btn-sm:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(103, 58, 183,...
建站笔记
0945
汇聚访的头像-汇聚访核心会员汇聚访6个月前
Ri主题 - 顶部导航栏登录按钮美化-汇聚访

实用Ri主题 – 顶部导航栏登录按钮美化

这是RiProV5主题的一款顶部导航栏登录按钮美化，此效果是我在最骚的网站里看到的，于是就仿了一个出来，手机端以及黑夜模式也都进行了适配，背景颜色仍可自行更改，喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="payshow"] action-hover.phpCSS 定位：/wp-content/themes/ripro-v5/template-parts/header/action-hover.php搜索登录你会看到下方这段代码： <a class="action-btn login-btn btn-sm btn" rel="nofollow noopener noreferrer" href="<?php echo esc_url( wp_login_url(get_current_url())); ?>"><i class="far fa-user me-1"></i><?php _e( '登录', 'ripro' );?></a> 随后复制下方的代码替换上方整段代码： <a class="login-link huijuf-login-btn" rel="nofollow noopener noreferrer" href="<?php...
建站笔记
0947
汇聚访的头像-汇聚访核心会员汇聚访6个月前
Ri主题 - 顶部导航栏添加全局简繁体切换按钮-汇聚访

实用Ri主题 – 顶部导航栏添加全局简繁体切换按钮

这是一款汇聚访适配Ri主题的顶部导航栏添加全局简繁体切换按钮，添加完代码后会在网站导航栏logo的右侧有一个繁简体切换按钮也是十分方便，按钮颜色你可以自行调节，话不多说需要的自行部署吧！ 演示效果： 代码部署： [hidecontent type="payshow"] 定位：/wp-content/themes/ripro-v5/template-parts/header/menu.php找到下方代码（大概在10行之前）： <?php get_template_part( 'template-parts/header/logo-wrapper'); ?> 随后在这段代码的下方添加以下代码： <div class="jelly-button"><a href="javascript:AutoHan()" id="AutoHan" style="color: white;">繁體</a></div> 随后定位：/wp-content/themes/ripro-v5/footer.php找到</footer>标签，在此标签下方添加以下代码： <script> /*汇聚访：www.huijuf.com*/ const currentLanguage = "traditional"; const conversionDelay = 200; function getBrowserLanguage() { const lang = navigator.language...
建站笔记
0737
汇聚访的头像-汇聚访核心会员汇聚访6个月前
子比主题 - 首页Tab栏目美化-汇聚访

实用子比主题 – 首页Tab栏目美化

这是子比主题的一款首页Tab栏目美化，之前发过类似的只不过是附加图片效果样式的，今天给大家带来这个是仅用代码实现的，汇聚访这里测试了一下夜间模式也是挺不错的，同时在这提醒下各位搬运的，麻烦带上本站文章出处，喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="reply"] 将下面的代码放到：子比主题–>>自定义CSS样式即可！ /*汇聚访：www.huijuf.com*/ .index-tab { padding: 5px 8px; background: transparent; border-radius: 0; } .index-tab ul { margin: 0; padding: 0; list-style: none; } /*汇聚访：www.huijuf.com*/ .index-tab ul>li { display: inline-block; padding: 3px...
建站笔记
2217711
汇聚访的头像-汇聚访核心会员汇聚访6个月前
子比主题 – 横向数据统计卡片小工具-汇聚访

实用子比主题 – 横向数据统计卡片小工具

这是一款子比主题的横向数据统计卡片，可以显示站点内的一些统计信息，电脑版的样式是比较好看的，因手机尺寸较小，所以手机版的可能显得有点突兀，话不多说喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="payshow"] 这个小工具跟我以前发的教程一模一样，首先我们第一步：/wp-content/themes/zibll/func.php文件，如果没有这个文件自己创建在子比目录创建一个，创建之后记得加php头，要不然会报错！加上下面的代码： $widgets_files = array( 'huijuf_tran_stats.php', /*小工具文件名*/ ); foreach ($widgets_files as $file) { require get_template_directory() . '/huijuf/widgets/' . $file; } 文章附件上传到：/wp-content/themes/zibll解压即可！ [/hidecontent]
建站笔记
014812
汇聚访的头像-汇聚访核心会员汇聚访6个月前
Ri主题 - 底部添加波浪特效-汇聚访

实用Ri主题 – 底部添加波浪特效

这是我适配Ri主题的一款底部波浪样式，目前我仅仅适配了日间模式，调整为夜间的话会非常不好看，我也比较懒需要的自己适配吧，还有如搬运本站文章请保留本站版权，话不多说喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="reply"] footer.phpCSS 定位：/wp-content/themes/ripro-v5/footer.php找到</body>这个标签，大概在最末尾，在此标签上方添加以下代码： /*汇聚访：www.huijuf.com*/ <div class="waveHorizontals mobile-hide"> <div id="waveHorizontal1" class="waveHorizontal"></div> <div id="waveHorizontal2" class="waveHorizontal"></div> <div id="waveHorizontal3" class="waveHorizontal"></div> </div> /*汇聚访：www.huijuf.com*/ 定位：主题后台设置 - 基本设置 - 自定义CSS样式代码中添加以下代码（图片在图床，自行本地化）： /*汇聚访：www.huijuf.com*/ .waveHorizontals { width: 100%; height: 20px; position:...
建站笔记
51065
汇聚访的头像-汇聚访核心会员汇聚访6个月前
子比主题 – 文章列表渐变过渡美化（两款）-汇聚访

实用子比主题 – 文章列表渐变过渡美化（两款）

这是给子比主题添加的两款文章列表渐变过渡美化，刚开始是今一单独只做了列表模式，我又重新适配了一下卡片模式，两种模式的代码不同我这里也分开放了，同时也适配了黑夜模式，话不多说喜欢的自行部署吧！ 演示效果： 卡片模式 列表模式 代码部署： [hidecontent type="reply"] 列表模式卡片模式 定位：子比主题–>>自定义CSS样式即可！颜色可在CSS里自行调整，该款为列表模式，别搞错了！ .posts-item.list.ajax-item.flex { position: relative; overflow: hidden; padding-right: 15px; border-color: #ffdd44; transition: border-color 0.5s ease, box-shadow 0.5s ease; } .posts-item.list.ajax-item.flex::after { content: ""; opacity: 0.2; position: absolute;...
建站笔记
1214515
汇聚访的头像-汇聚访核心会员汇聚访6个月前
子比主题 – 右下角雪花按钮美化样式-汇聚访

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

这是一款子比主题的右下角在线下雪样式，用户可以点击按钮如小雪、中雪、大雪进行调整下雪的程度，该效果是今一写的，样式也是挺不错的尤其是在黑夜模式中，话不多说喜欢的自行部署吧！ 演示效果： 代码部署： [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...
建站笔记
4885
汇聚访的头像-汇聚访核心会员汇聚访6个月前
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]
建站笔记
17711
汇聚访的头像-汇聚访核心会员汇聚访6个月前
1…910111213…36跳转