建站笔记

子比主题 - 给日夜切换按钮添加下拉菜单-汇聚访

子比主题 – 给日夜切换按钮添加下拉菜单

这是一款给子比主题的顶部导航栏日夜切换按钮添加的下拉多选菜单，部署完此功能后，每次选中日夜切换按钮时就会出现相关下拉选项，并且还有相关记忆模式，手机版也可用，有需要的朋友自行部署吧！ 演示效果： 代码部署： [hidecontent type="payshow"] 自定义CSS代码自定义javascript代码 定位：子比主题设置–>>自定义代码–>>自定义 CSS 样式添加以下代码即可： .theme-toggle-dropdown{position:relative;display:inline-block}.theme-toggle-dropdown-btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .3s ease}.theme-toggle-dropdown-btn .theme-icon{display:inline-flex;align-items:center;font-size:16px;line-height:1}.theme-toggle-dropdown-btn:hover{opacity:.8}.theme-mode-menu{min-width:140px;padding:4px 0;margin-top:6px;background:var(--body-bg-color,#fff);border:1px solid var(--border-color,#e5e5e5);border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.1);z-index:9999}.dark-theme .theme-mode-menu{background:var(--body-bg-color,#1a1a1a);border-color:var(--border-color,#333);box-shadow:0 2px 8px rgba(0,0,0,.3)}.theme-mode-option{display:flex;align-items:center;gap:8px;padding:6px 12px;cursor:pointer;transition:background-color .2s ease;position:relative;border-radius:4px}.theme-mode-option:hover{background:var(--main-bg-color,#f5f5f5)}.dark-theme .theme-mode-option:hover{background:var(--main-bg-color,#252525)}.theme-mode-option.active{background:var(--theme-color-light,rgba(33,150,243,.1))}.dark-theme .theme-mode-option.active{background:var(--theme-color-light,rgba(33,150,243,.2))}.theme-mode-option .mode-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--main-bg-color,#f5f5f5);border-radius:4px;font-size:13px;flex-shrink:0;transition:all .2s ease}.dark-theme .theme-mode-option .mode-icon{background:var(--main-bg-color,#252525)}.theme-mode-option:hover .mode-icon{transform:scale(1.05)}.theme-mode-option[data-mode=white-theme] .mode-icon{color:orange}.theme-mode-option[data-mode=dark-theme]...
建站笔记
013914
汇聚访的头像-汇聚访核心会员汇聚访6个月前
子比主题 – 给顶部多功能组件搜索框右侧新增三个按钮-汇聚访

子比主题 – 给顶部多功能组件搜索框右侧新增三个按钮

这是一款子比主题的顶部多功能组件右侧新增三个按钮样式功能的美化，之前发过别的样式的搜索框样式美化，本次主要是在搜索框增添了三个按钮跳转样式，而且此次部署还无需修改主题代码，有需要的自行部署吧！ 演示效果： 代码部署： [hidecontent type="reply"] 定位：/wp-content/themes/zibll/func.php，没有这个文件自己创建一个，然后记得加php头，要不然会报错，将下面的代码放里面！ add_action('wp_footer', 'zib_custom_search_buttons'); function zib_custom_search_buttons() { ?> <style> .header-slider-search .search-input .line-form { display: flex; align-items: center; gap: 10px; } .header-slider-search .search-custom-btns { display: flex; gap: 8px; flex-shrink: 0; align-items: center;...
建站笔记
813713
汇聚访的头像-汇聚访核心会员汇聚访6个月前
子比主题 – 新闻版块小工具-汇聚访

子比主题 – 新闻版块小工具

这是一款子比主题的新闻版块小工具，此小工具集成了幻灯片、热点排行榜、以及最新文章发布等文章模块，同时每个选项都可以进行可视化的配置，黑夜模式也完全适配了，有需要的自行部署吧！ 演示效果： 代码部署： [hidecontent type="reply"] 定位：/wp-content/themes/zibll中把文章附件解压，然后在func.php文件里添加以下代码（没有这个文件自己创建一个，然后记得加php头，要不然会报错）： $widgets_files = array( 'zibbox_news_section.php', /*小工具文件名*/ ); foreach ($widgets_files as $file) { require get_template_directory() . '/zibbox/widgets/' . $file; } [/hidecontent]
建站笔记
514413
汇聚访的头像-汇聚访核心会员汇聚访6个月前
子比主题 - 文章页左侧悬浮快捷功能-汇聚访

子比主题 – 文章页左侧悬浮快捷功能

这是给子比主题的文章页添加的左侧悬浮快捷功能，此效果主要适用于电脑版文章页的快捷性，集成了评论、点赞等功能，跟子比论坛里的悬浮快捷功能有类似之处，有需要的朋友自行部署吧！ 演示效果： 代码部署： [hidecontent type="reply"] 定位：/wp-content/themes/zibll/func.php，没有这个文件自己创建一个，然后记得加php头，要不然会报错，将下面的代码放里面！ /** * 文章页面左侧浮动按钮 */ function zib_post_fixed_btns() { global $post; if (wp_is_mobile() || !is_single() || $post->post_type !== 'post') return ''; $id = $post->ID; $logged = is_user_logged_in(); $btns = ''; $items...
建站笔记
121478
汇聚访的头像-汇聚访核心会员汇聚访6个月前
Ri主题 - 夜间模式动态星空背景-汇聚访

Ri主题 – 夜间模式动态星空背景

这是给RiProV5的夜间模式适配的一款动态星空背景的样式，此样式在子比主题主题里也适配过，但是两款不是同一个代码，总体来说还是挺好看的，唯一的不足就是有点吃性能，有喜欢的朋友自行部署吧！ 演示效果： 代码部署： [hidecontent type="payshow"] header.phpCSS代码 定位：/wp-content/themes/ripro-v5/header.php中找到<main>这个标签，然后在此标签下添加以下代码： <div data-v-addee5d6="" data-v-2478e6e8="" class="background"> <div data-v-addee5d6="" class="stars small"></div> <div data-v-addee5d6="" class="stars medium"></div> <div data-v-addee5d6="" class="stars large"></div> </div> 定位：后台主题设置 - 基本设置 - 自定义CSS样式代码中添加以下代码（需下载文章附件中的图片素材，再修改代码中的“素材所放置的路径”为素材路径）： .background[data-v-addee5d6] { position: fixed; top: 0;...
建站笔记
017114
汇聚访的头像-汇聚访核心会员汇聚访6个月前
子比主题 -文章页动漫提示引导小人-汇聚访

子比主题 -文章页动漫提示引导小人

这是汇聚访为子比主题适配的哔哩哔哩样式的提示引导小人，此代码适用于所有主题，这里仅以子比主题作为演示，该教程部署位置为文章页，你可以放在你网站的任何地方，话不多说有需要的自行部署吧！ 演示效果： 代码部署： [hidecontent type="payshow"] 文章插入内容CSS代码 定位：子比后台设置 - 文章&列表 - 文章页面 - 文章插入内容 - 在文章内容后-插入内容中添加以下代码即可： <div class="huijuf-service-bg"><div class="huijuf-service-word"><p>还没有解决问题咩？</p><a style="cursor:pointer;" data-remote="/wp-admin/admin-ajax.php?action=private_window_modal&receive_user=1" data-toggle="RefreshModal">主站相关客服</a></div></div> 定位：子比主题设置–>>自定义代码–>>自定义 CSS 样式添加以下代码即可： .huijuf-service-bg { position: huijuf; display: block; width: 270px; height: 220px; background:...
建站笔记
01279
汇聚访的头像-汇聚访核心会员汇聚访6个月前
子比主题 – VIP会员权益页面（第四版）-汇聚访

子比主题 – VIP会员权益页面（第四版）

这是给子比主题适配的第四款的VIP会员权益页面，这款相比前面的几款是比较简约的，没有...
建站笔记
01306
汇聚访的头像-汇聚访核心会员汇聚访6个月前
子比主题 – 下载按钮hover弹窗功能-汇聚访

子比主题 – 下载按钮hover弹窗功能

这是一款子比主题下载按钮hover弹窗功能，部署此功能之前你需要注意当此功能部署完之后，这个如果用户扫描二维码下载资源之后，是不扣资源限制次数的，介意的话就不用这个功能，需要的自行部署吧！ 演示效果： 代码部署： [hidecontent type="reply"] 定位：/wp-content/themes/zibll/func.php，没有这个文件自己创建一个，然后记得加php头，要不然会报错，将下面的代码放里面！ // AJAX接口：生成二维码（带缓存） add_action('wp_ajax_get_download_qrcode','custom_get_download_qrcode'); add_action('wp_ajax_nopriv_get_download_qrcode','custom_get_download_qrcode'); function custom_get_download_qrcode(){ if(empty($_GET['url'])){die();} $url=urldecode($_GET['url']); $cache_key='qr_'.md5($url); $cached=get_transient($cache_key); if($cached){ header('Content-Type: image/png'); header('Cache-Control: max-age=86400'); echo base64_decode($cached); die(); } ob_clean(); require_once get_theme_file_path('/inc/class/qrcode.class.php'); ob_start(); QRcode::png($url,false,'L',4,1); $img=ob_get_clean(); set_transient($cache_key,base64_encode($img),DAY_IN_SECONDS); header('Content-Type: image/png'); header('Cache-Control:...
建站笔记
111337
汇聚访的头像-汇聚访核心会员汇聚访6个月前
子比主题 – 滚动推荐卡片小工具（第三版）-汇聚访

子比主题 – 滚动推荐卡片小工具（第三版）

这是给子比主题适配的第二款的滚动推荐卡片小工具，此小工具与本站使用的非一个代码版本，本版本为别的站长免费分享的，汇聚访总体测试下来这个版本问题还是挺多的，汇聚访这里修复了几个小问题，有喜欢的自行部署吧！ 演示效果： 代码部署： [hidecontent type="reply"] 首先把文章所含的附件下载下来，解压到/wp-content/themes/zibll路径下，随后在你所需要的位置添加小工具中的自定义HTML代码，随后把下方代码添加进去即可（图片以及跳转链接需要自行更换）： <link rel="stylesheet" href="/wp-content/themes/zibll/zibbox/css/Banner.css"> <style type="text/css"> /* 合并所有幻灯片样式+原有样式 */ .todayCard-title, .todayCard-tips, .topGroup.banner-button {color: #ffffff} .topGroup.todayCard {background: #000000} /* 新增幻灯片样式 */ .slideshow-container {position: relative;width: 100%;height: 100%;overflow: hidden;border-radius: 12px;} .slide {position: absolute;top:...
建站笔记
2631813
汇聚访的头像-汇聚访核心会员汇聚访6个月前
子比主题 – 新排名榜页面样式（两款）-汇聚访

子比主题 – 新排名榜页面样式（两款）

这是一款子比主题的新排名榜页面样式，此效果一共有两款，分别为有图以及无图的样式，这个...
建站笔记
715911
汇聚访的头像-汇聚访核心会员汇聚访6个月前
1…34567…37跳转