子比主题美化:搜索框右侧添加自定义按钮(无需插件)

本方案无需安装任何插件,仅通过在主题functions.php文件追加代码,就能在搜索框右侧添加「开始探索」「创作者入驻」两个功能按钮。

代码采用页脚挂载 + 前端动态渲染的方式,不改动主题核心源码,主题版本更新后配置也不会失效,同时样式深度适配子比原生风格,界面协调美观,还支持自由修改按钮文字、跳转链接、配色。

图片[1]-子比主题美化:搜索框右侧添加自定义按钮(无需插件)-微享屋

前期准备

  1. 准备文件编辑工具:可使用宝塔面板文件管理器、1Panel、FTP 工具(FileZilla)或 WordPress 后台主题编辑器。
  2. 确认文件路径:子比主题公共函数文件位置站点根目录/wp-content/themes/zibll/functions.php

代码部署

  1. 登录服务器 / 网站后台,按照上方路径找到 functions.php 文件并打开编辑。
  2. 滑动页面至文件最末尾,不要删除原有代码,直接换行粘贴下方完整代码。
  3. 粘贴完成后,点击保存文件。
  4. 若站点开启了缓存插件、CDN 缓存、浏览器缓存,请清空缓存,刷新前台页面即可看到效果。

完整代码

自定义修改

1. 修改按钮跳转链接

找到代码中两处 href="链接地址"

  • href="/explore":修改为「开始探索」目标页面地址
  • href="/creator":修改为「创作者入驻」目标页面地址支持填写相对路径(如 /page)或完整网址(如 https://xxx.com)。

2. 修改按钮显示文字

直接替换标签内的中文即可:

  • 开始探索:改成你想要的按钮名称
  • 创作者入驻:自定义按钮文字

3. 修改按钮颜色

代码中 c-yellowc-blue-2 是子比主题自带颜色类:

  • c-yellow:黄色按钮
  • c-blue-2:蓝色按钮可替换为主题其他自带颜色类,一键切换配色。

4. 调整按钮大小 / 间距

在 CSS 样式区域修改对应数值:

  • padding: 4px 16px:调整按钮上下、左右内边距,控制按钮大小
  • font-size: 14px:修改按钮文字大小
  • gap: 8px:调整两个按钮之间的间距

文章最后更新时间:2026-06-01 09:49:49,若有错误或已失效,请在下方评论或联系博主

子比主题美化:搜索框右侧添加自定义按钮(无需插件)-微享屋
子比主题美化:搜索框右侧添加自定义按钮(无需插件)
此内容为付费阅读,请付费后查看
5积分
付费阅读
© 版权声明
THE END
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容