WordPress Elementor 插件添加 QQ 微信 微博 分享及一键复制链接
要为 WordPress 网站的 Elementor 插件添加 QQ 分享、微信分享、微博分享和一键复制链接分享,您可以按照以下步骤进行操作:
-
安装并激活 'AddToAny Share Buttons' 插件。
-
在 WordPress 后台的 '外观' -> '小工具' 中,将 'AddToAny 分享按钮' 小工具添加到您想要显示分享按钮的侧边栏区域。
-
在 Elementor 中,使用 'HTML' 小部件,将以下代码粘贴到您想要添加分享按钮的页面或文章中:
<div class="addtoany_share_container">
<a class="a2a_button_qq"></a>
<a class="a2a_button_wechat"></a>
<a class="a2a_button_weibo"></a>
<a class="a2a_dd" href="https://www.addtoany.com/share"></a>
</div>
-
按需要自定义样式和布局。
-
如果想要添加一键复制链接分享功能,可以使用 'Clipboard.js' 库。在 Elementor 中,使用 'HTML' 小部件,将以下代码粘贴到您想要添加一键复制链接分享的页面或文章中:
<div class="copy-link-container">
<input type="text" value="<?php echo get_permalink(); ?>" id="copy-link-input">
<button class="copy-link-btn" data-clipboard-target="#copy-link-input">复制链接</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
<script>
var clipboard = new ClipboardJS('.copy-link-btn');
clipboard.on('success', function(e) {
alert("链接已复制到剪贴板!");
});
</script>
- 按需要自定义样式和布局。
注意:在将代码添加到 Elementor 中时,请确保将编辑器切换为 'HTML 代码' 模式,以便正确显示代码。
原文地址: https://www.cveoy.top/t/topic/n20I 著作权归作者所有。请勿转载和采集!