如何在WordPress文章中增加一个复制文章链接按钮?

导语:我们希望人们在转载自己的文章时注明来源,为了提醒转载者,我们可以在文章尾部放置一个复制文章链接的按钮,来提醒他转载的时候带上作者的文章链接。我们来看看怎么实现这个功能。

复制文章链接按钮前端代码

我们先看看效果图,叶子放置在文章内容的尾部,这样大家看完文章想要转载的时候,或许能被提醒一下,当然,要是转载者铁了心不想理,你就算放满整个屏幕也没有用。

如何在WordPress文章中增加一个复制文章链接按钮?
如何在WordPress文章中增加一个复制文章链接按钮?

实现代码,将下面的代码放置在single.php中,或者你自己定义的位置。

<?php the_content(); ?> //这个single.php一般自带了,这里用来确定位置。

<p class="reprint">转载请注明:《<a rel="nofollow" href="<?php esc_url(the_permalink()); ?>"><?php esc_html(the_title()); ?></a>》 </br><a href="#" onclick="copy_code('<?php esc_url(the_permalink()); ?>'); return false;"> <i class="fa fa-copy"></i>复制链接</a></p>

将下面的CSS放置在style.css中

#content-area p.reprint{
text-indent: 0px;
font-size: 15px;
}

#content-area p.reprint a{
font-weight: 500;
}

#content-area p.reprint i{
margin-right:10px;
}

将下面的代码放置在js文件中,比如你主题要加载的js文件,或者新建一个js文件来加载。

function copy_code(text) {
if (window.clipboardData) {
window.clipboardData.setData("Text", text)
alert("已经成功将原文链接复制到剪贴板!");
} else {
var x=prompt('你的浏览器可能不能正常复制\n请您手动进行:',text);
}
}

结束

你点击复制链接按钮,那么文章的网址就能被复制,这样方便你粘贴,其实这个只能起到一个提醒的作用。在国内,国人一般没有注明出处的习惯。

发表评论

邮箱地址不会被公开。 必填项已用*标注