当前位置:首页WP教程WordPress文章代码高亮添加一键复制代码功能

WordPress文章代码高亮添加一键复制代码功能

这篇文章主题君给大家讲解下怎么给WordPress代码高亮添加一键复制,如果看了上一篇文章的朋友应该已经可以实现文章代码高亮效果,如果还没看那篇文章可以点击下面链接去看一看。

WordPress代码高亮免插件纯代码实现

那么这篇文章就不再讲代码高亮的效果了,直接开始今天的一键复制WordPress教程。

实现一键复制主要是需要加载一个JS:clipboard.min.js,然后再自己写一些JS实现点击复制的功能,具体步骤如下:

第一步:加载clipboard文件

<script type=\'text/javascript\' src=\'https://www.ztjun.com/wp-content/themes/ztjun/static/js/clipboard.min.js\'></script>//可以自行下载本地上传自己服务器加载

文件加在主题的header.php的</head>上即可。

第二步:实现一键点击复制

首先我们在主题的JS文件中添加下面JS代码:

//复制代码for (var i = 0; i < $(\'.single-content pre\').length; i++) {$(\'.pre\').eq(i).append(\'<span  data-clipboard-target=\"#copy\'+ i +\'\" data-uk-tooltip title=\"点击复制本段代码\">复制</span>\');$(\'.pre code\').eq(i).attr(\'id\',\'copy\'+ i);}var clipboard = new ClipboardJS(\'.copy\');clipboard.on(\'success\', function(e) {console.info(e.text);e.clearSelection();alert(\'复制成功!\')});clipboard.on(\'error\', function(e) {console.error(\'Action:\', e.action);console.error(\'Trigger:\', e.trigger);alert(\"复制失败,请联系站长\");});

上面步骤完成后,强制刷新页面即可实现代码一键点击复制的功能,如果有问题可以加入我们的WordPress交流群咨询。

扫码关注wp主题君

精选优质免费WordPress主题模板,分享最新WordPress实用建站教程!

记住我们的网址:ztJun.com

温馨提示:

文章标题:WordPress文章代码高亮添加一键复制代码功能

文章链接:https://www.jitheme.com/2477.html

更新时间:2024年03月28日

1.本站大部分内容均收集于网络!若内容若侵犯到您的权益,请发送邮件至:service@jitheme.com,我们将第一时间处理!

2.资源所需价格并非资源售卖价格,是收集、整理、编辑详情以及本站运营的适当补贴,并且本站不提供任何免费技术支持。

3.所有资源仅限于参考和学习,版权归原作者所有,更多请阅读极(子)主题网络服务协议

给TA打赏
共{{data.count}}人
人已打赏
WP教程

四个宝塔面板进不去的原因和解决方案

2023-3-8 21:49:47

WP教程

WordPress网站获取首页链接和站点名称

2023-3-8 22:08:27

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
购物车
优惠劵
有新私信 私信列表
搜索
  • 老胡对文章测试子主题灯箱幻灯片效果发布评论!
  • 沐颜小栈-MUOOY.CN对文章测试子主题灯箱幻灯片效果发布评论!
  • 小涛开通了年卡会员感谢支持!
  • 柠*💭成功下载了子主题多图幻灯片及灯箱效果演示超好资源!
  • 微科科技对文章把帮助改成文库?发布评论!
  • 老胡发布问答测试问答发布图片是否显示的问题 等您回答!