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

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

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

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

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

第一步：加载clipboard文件

1
2
<script type='text/javascript' src='https://xiaohost.com/wp-content/themes/ztjun/static/js/clipboard.min.js'></script>

//可以自行下载本地上传自己服务器加载





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



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



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




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//复制代码

for (var i = 0; i &lt; $('.single-content pre').length; i++) {

    $('.pre').eq(i).append('&lt;span class="single-copy copy uk-position-top-right" data-clipboard-target="#copy'+ i +'" data-uk-tooltip title="点击复制本段代码">复制&lt;/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

		    					    			
			    					    					    				    					    			
 原文链接：https://xiaohost.com/1316.html，转载请注明出处。