Zibll 子比主题文章页面添加复制组件,自定义复制成功弹窗样式

Zibll 子比主题文章页面添加复制组件,自定义复制成功弹窗样式

浏览: 36 留言: 0
手机扫码手机扫我访问

Zibll 子比主题文章页面添加复制组件,自定义复制成功弹窗样式

内容介绍很多资源站、教程站访客经常需要复制文本,原生子比没有一键复制按钮。下面这套方案复用子比原生样式,无需插件,在文 […]
相关标签:

很多资源站、教程站访客经常需要复制文本,原生子比没有一键复制按钮。下面这套方案复用子比原生样式,无需插件,在文章段落旁增加复制按钮,点击一键复制正文内容。

实现效果

  1. 按钮风格贴合子比 UI,深色 / 浅色模式自动适配
  2. 点击复制,弹出站点风格成功提示
  3. 可选择:全文复制 或者 代码块复制
  4. 支持 PC + 移动端自适应
  5. 轻量 JS,不会和其他美化代码冲突

部署教程

  1. 进入 WP 后台 → 主题设置 → 自定义代码
  2. 【自定义 CSS】粘贴样式代码
  3. 【自定义底部 JS】粘贴交互脚本
  4. 保存,清理全站缓存测试

完整代码

定位:/wp-content/themes/zibll/func.php,没有这个然后记得加php头,要不然会报错,将下面的代码放里面!

 

参数自定义

  • 修改按钮文字:`复制全文` 替换成你想要的文字
  • 想要放在文章底部:把 `prepend` 修改为 `append`
  • 只想代码块增加复制按钮,我可以给你对应改版代码

避坑要点

  1. 开启页面缓存站点,修改代码后务必清缓存
  2. 部分浏览器隐私模式下剪贴板 API 可能失效,属于浏览器限制
  3. 不要和其他复制类美化代码叠加,防止冲突
  4. 如果使用付费内容加密插件,加密区域文本无法被复制

FAQ

Q:需要安装插件吗?

A:纯代码实现,无需插件,主题升级一般不会失效。

Q:可以限制登录用户才能复制内容吗?

A:可以,搭配子比短代码,把按钮外层包裹

Q:移动端按钮排版错乱?

A:代码自带自适应,若拥挤可增加媒体查询缩小按钮尺寸。

结语

适合教程、文本资源站点,方便访客一键复制内容,提升用户体验。原生子比风格,简洁清爽,轻量化无负担。

© 版权声明
THE END
喜欢就支持一下吧
点赞9 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容