为我的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/e98Z 著作权归作者所有。请勿转载和采集!