建站笔记

2025-11-12
11-12
子比主题 - 首页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...
2个月前
建站笔记
2025-11-10
11-10
子比主题 – 横向数据统计卡片小工具-汇聚访

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

这是一款子比主题的横向数据统计卡片，可以显示站点内的一些统计信息，电脑版的样式是比较好看的，因手机尺寸较小，所以手机版的可能显得有点突兀，话不多说喜欢的自行部署吧！ 演示效果： 代码部署： [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]
2个月前
建站笔记
2025-11-09
11-09
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:...
2个月前
建站笔记
2025-11-08
11-08
子比主题 – 文章列表渐变过渡美化（两款）-汇聚访

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

这是给子比主题添加的两款文章列表渐变过渡美化，刚开始是今一单独只做了列表模式，我又重新适配了一下卡片模式，两种模式的代码不同我这里也分开放了，同时也适配了黑夜模式，话不多说喜欢的自行部署吧！ 演示效果： 卡片模式 列表模式 代码部署： [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;...
2个月前
建站笔记
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...
2个月前
建站笔记
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]
2个月前
建站笔记
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' =>...
2个月前
建站笔记
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中设置了）： //...
2个月前
建站笔记
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...
2个月前
建站笔记
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...
2个月前
建站笔记
1…56789…32跳转