WordPress zibll 子比主题添加点击复制按钮文字或代码-芝士无限

在网站中添加点击复制内容按钮，能通过简化操作流程（一键替代手动选中文本、右键复制等繁琐步骤）提升用户体验，尤其方便不熟悉快捷键的用户及移动端操作，同时可促进内容快速复用与传播（如用户一键复制文案、代码等分享至社交平台），还能通过“复制成功”提示等交互设计强化品牌细节体验，且技术实现成本低、兼容性强，是优化用户操作效率与网站传播力的实用功能。

此功能实现在子比主题官网也有教程（传送门），也给出了代码，这里只是做个补充。

实现步骤

1️⃣进入编辑器界面，在“区块”面板中添加“自定义 HTML”区块。

图片[2]-WordPress zibll 子比主题添加点击复制按钮文字或代码-芝士无限

2️⃣粘贴代码，修改所需内容。

图片[3]-WordPress zibll 子比主题添加点击复制按钮文字或代码-芝士无限

<a href="javascript:;" data-clipboard-tag="优惠码" data-clipboard-text="M60YspqH" class="but c-yellow">M60YspqH</a>

class	样式	class	样式	class	样式
c-red	红色文字	b-theme	主题背景色	jb-red	渐变红色背景
c-yellow	橙色文字	b-red	红色背景	jb-yellow	渐变橙色背景
c-blue	蓝色文字	b-yellow	橙色背景	jb-blue	渐变蓝色背景
c-blue-2	深蓝色文字	b-blue	蓝色背景	jb-green	渐变绿色背景
c-green	绿色文字	b-green	深蓝色背景	jb-purple	渐变紫色背景
c-purple	紫色文字	b-purple	紫色背景	jb-vip1	渐变金色背景
				jb-vip2	渐变黑色背景

3️⃣效果预览。

图片[5]-WordPress zibll 子比主题添加点击复制按钮文字或代码-芝士无限

本站文章部分内容可能来源于网络，仅供学习与参考，如有侵权，请联系站长进行处理。
本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。
本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
本站原创性内容遵循 CC BY-NC-SA 4.0 协议。

THE END