要为 WordPress 网站的 Elementor 插件添加 QQ 分享、微信分享、微博分享和一键复制链接分享的代码功能,您可以使用以下步骤:

  1. 安装并激活“添加代码插件”(AddFunc Head & Footer Code)。

  2. 打开 Elementor 编辑器,在需要添加分享和复制链接按钮的位置添加一个 HTML 元素。

  3. 在 HTML 元素中输入以下 HTML 代码:

  1. 在“添加代码插件”中的“Header Code”部分添加以下 CSS 代码:

/分享样式/ .share { display: flex; align-items: center; } .share a { display: inline-block; width: 30px; height: 30px; margin-right: 10px; background-image: url(https://www.example.com/wp-content/uploads/2021/10/share-icons.png); background-repeat: no-repeat; background-size: 90px 30px; text-indent: -9999px; } .share .share-qq { background-position: 0 0; } .share .share-wechat { background-position: -30px 0; } .share .share-weibo { background-position: -60px 0; } .share .copy-link { background-position: -90px 0; }

  1. 在“添加代码插件”中的“Footer Code”部分添加以下 JavaScript 代码:

//分享功能 $(function() { var shareUrl = encodeURIComponent(window.location.href); var shareTitle = encodeURIComponent(document.title); $('.share-qq').attr('href', 'http://connect.qq.com/widget/shareqq/index.html?url=' + shareUrl + '&title=' + shareTitle); $('.share-wechat').attr('href', 'http://qr.liantu.com/api.php?text=' + shareUrl); $('.share-weibo').attr('href', 'http://service.weibo.com/share/share.php?url=' + shareUrl + '&title=' + shareTitle); }); //复制链接功能 $(function() { $('.copy-link').click(function(e) { e.preventDefault(); var $temp = $(''); $('body').append($temp); $temp.val(window.location.href).select(); document.execCommand('copy'); $temp.remove(); alert('链接已复制到剪贴板!'); }); });

  1. 将“https://www.example.com/wp-content/uploads/2021/10/share-icons.png”替换为包含分享图标的图片的 URL。

  2. 保存并发布页面。

现在,您的 Elementor 页面上应该有 QQ 分享、微信分享、微博分享和一键复制链接按钮。当访问者点击这些按钮时,将执行相应的分享或复制链接操作。

WordPress Elementor 插件添加 QQ、微信、微博分享和一键复制链接功能

原文地址: https://www.cveoy.top/t/topic/n20T 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录