本方案无需安装任何插件,仅通过在主题functions.php文件追加代码,就能在搜索框右侧添加「开始探索」「创作者入驻」两个功能按钮。
代码采用页脚挂载 + 前端动态渲染的方式,不改动主题核心源码,主题版本更新后配置也不会失效,同时样式深度适配子比原生风格,界面协调美观,还支持自由修改按钮文字、跳转链接、配色。
![图片[1]-子比主题美化:搜索框右侧添加自定义按钮(无需插件)-微享屋](https://www.vwx.cn/wp-content/uploads/2026/06/20260601094702869-1ae04770-053f-4a85-93a8-7d5a6b0b2714.webp)
前期准备
- 准备文件编辑工具:可使用宝塔面板文件管理器、1Panel、FTP 工具(FileZilla)或 WordPress 后台主题编辑器。
- 确认文件路径:子比主题公共函数文件位置
站点根目录/wp-content/themes/zibll/functions.php
代码部署
- 登录服务器 / 网站后台,按照上方路径找到
functions.php文件并打开编辑。 - 滑动页面至文件最末尾,不要删除原有代码,直接换行粘贴下方完整代码。
- 粘贴完成后,点击保存文件。
- 若站点开启了缓存插件、CDN 缓存、浏览器缓存,请清空缓存,刷新前台页面即可看到效果。
完整代码
自定义修改
1. 修改按钮跳转链接
找到代码中两处 href="链接地址":
href="/explore":修改为「开始探索」目标页面地址href="/creator":修改为「创作者入驻」目标页面地址支持填写相对路径(如/page)或完整网址(如https://xxx.com)。
2. 修改按钮显示文字
直接替换标签内的中文即可:
开始探索:改成你想要的按钮名称创作者入驻:自定义按钮文字
3. 修改按钮颜色
代码中 c-yellow、c-blue-2 是子比主题自带颜色类:
c-yellow:黄色按钮c-blue-2:蓝色按钮可替换为主题其他自带颜色类,一键切换配色。
4. 调整按钮大小 / 间距
在 CSS 样式区域修改对应数值:
padding: 4px 16px:调整按钮上下、左右内边距,控制按钮大小font-size: 14px:修改按钮文字大小gap: 8px:调整两个按钮之间的间距
© 版权声明
文章版权声明
THE END


暂无评论内容