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

首页 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 class="single-copy copy uk-position-top-right" 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("复制失败,请联系站长QQ:1098816988");
      });

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

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

      扫码关注wp主题君

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

      记住我们的网址:ztJun.com

      收藏 (0)
      打赏 支付宝打赏 微信打赏
      点赞 (0)

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

      分类:WordPress教程

      链接:https://www.ztjun.com/1316.html

      版权:

好久不见,甚是想念

相关文章

评论 2 条评论
tyhguan
2020-04-06 上午9:47 回复

第一步的代码放哪?