纯代码实现WordPress一键复制文章页指定内容

纯代码实现WordPress一键复制文章页指定内容

2021-08-21 44
¥ 188 资源币
VIP 8折
下载不了?请联系网站客服提交链接错误!
增值服务:

纯代码实现WordPress一键复制文章页指定内容

郑重承诺丨MC百科网提供安全交易、信息保真!
增值服务:
¥ 188 资源币 (VIP 8折升级VIP开通VIP尊享优惠特权
立即下载 升级会员
详情介绍

因为有些发布的活动都是通过分享口令来参与的,比如说淘口令、京东口令、支付宝口令之类的,这种不像网址链接可以直接跳转,还必须要手动复制之后再打开相应的app,对于活动参与者来说相当麻烦。

所以一直都想实现只要点击以下就能一键复制指定内容的功能,这样就可以把淘口令一键复制,而不是再手动一点一点的框选后再复制。之前根据网上的教程折腾了一次,到最后还是没有成功实现这一功能呢。发扬钻牛角尖的精神,今天再次折腾,庆幸绞尽脑汁成功实现,分享以下教程。

下载clipboard.js

见文末

添加css代码

把下面的代码添加到当前使用主题的style.css

!.red_tkl {
    color: #faddde;
    border: solid 1px #980c10;
    background: #d81b21;
    background: -webkit-gradient(linear, left top, left bottombottom, from(#ed1c24), to(#aa1317));
    background: -moz-linear-gradient(top,  #ed1c24,  #aa1317);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.red_tkl:hover {
    background: #b61318;
    background: -webkit-gradient(linear, left top, left bottombottom, from(#c9151b), to(#a11115));
    background: -moz-linear-gradient(top,  #c9151b,  #a11115);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115');
}
.red_tkl:active {
    color: #de898c;
    background: -webkit-gradient(linear, left top, left bottombottom, from(#aa1317), to(#ed1c24));
    background: -moz-linear-gradient(top,  #aa1317,  #ed1c24);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');
}
.button_tkl {
    display: inline-block;
    *display: inline;
    vertical-align: baselinebaseline;
    margin: 0 2px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button_tkl:hover {
    text-decoration: none;
}
.button_tkl:active {
    position: relative;
    top: 1px;
}

 

引用js文件和css代码

在当前使用主题的footer.php的末尾添加如下代码,把其中第一行引用js的地址改成自己的网站域名。

<script src="https://mcbke.com/clipboard.min.js" type="text/javascript"></script>
<script>
var clipboard = new Clipboard('.itemCopy');
clipboard.on('success',
function(e) {
    if (e.trigger.disabled == false || e.trigger.disabled == undefined) {
        e.trigger.innerHTML = "复制成功";
        e.trigger.disabled = true;
        setTimeout(function() {
            e.trigger.innerHTML = "一键复制";
            e.trigger.disabled = false;
        },
        2000);
    }
});
clipboard.on('error',
function(e) {
    e.trigger.innerHTML = "复制失败";
});
</script>

 

使用教程

在文章需要插入一键复制按钮的位置添加下方代码,替换成需要复制的内容。

这段代码太长,输入太麻烦,也可以参考下教程:
Wordpress wordpress纯代码为后台文章编辑器添加自定义按钮实现快速输入 wordpress纯代码为后台文章编辑器添加自定义按钮实现快速输入 由于小站的经常需要发一些活动资讯类和软件分享的文章,所以在发表新文章的时候会出现很多一样的内容,比如说每个页面的倒计时代码,小编之前专门保存了一个文档文件,每次发表新文章的时候都把代码复制到编辑框中。是不是特别笨!没办法,对于那些会写代码的大神来说,可以轻而易举的给编辑框添加一个短代码的功能,就能轻松实现了!但是对于小白来说只能用这种笨方法了! 无奈身为小白... 时间:2021/8/21 人气:48 评论:0 阅读全文
wordpress纯代码为后台文章编辑器添加自定义按钮实现快速输入,把下方的代码在文本编辑器上方添加一个自定义按钮,实现点击标签按钮就可以实现输入代码的功能。

<button class="itemCopy red_tkl button_tkl" id="TKLS"  type="button" data-clipboard-text="替换成需要复制的内容">一键复制</button>

 

演示效果

纯代码实现WordPress一键复制文章页指定内容

资源下载
免费资源
clipboard.js点击下载
付费资源
此资源下载价格为188资源币,请先
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

MC百科 Wordpress 纯代码实现WordPress一键复制文章页指定内容 https://www.mcbke.com/wordpress-course-yjfzwz.html

科技迷、外设控、Minecraft爱好者,科技改变生活!

常见问题

相关文章

评论
暂无评论
纯代码实现WordPress一键复制文章页指定内容-海报

分享本文封面