WordPress实现页面底部微商用点击复制微信号功能

WordPress实现页面底部微商用点击复制微信号功能，如下图，许多网站引流微信的 都希望加上这个功能。

微信图标自行另外存一下图片

实现方法：

1.添加html代码到网站底部

wp后台—>外观—>主题编辑器—>footer.php 最下方</body>之前添加以下代码,其中 gif图为微信联系图标，我这里把图标也提供给大家，大家需要把图片路径替换成自己的，以及文字

<div class="footer-fixed">
<div class="foot-fixed"> 
<img src="/wp-content/uploads/2019/02/1.gif"> 咨询WP小工匠  +微信: <strong id="article" class="keys" name="stxlwx" style="font-size:18px;">jiaozhuy</strong> 
<br>
<button id="copy">点击复制微信</button>
            （长按复制微信号）</div>
</div>

2.加点击复制功能

直接加到html代码后面，代码如下

<script>
        document.getElementById('copy').addEventListener('click', copyArticle, false);
        function copyArticle(event){
            const range = document.createRange();
            range.selectNode(document.getElementById('article'));

            const selection = window.getSelection();
            if(selection.rangeCount > 0) selection.removeAllRanges();
            selection.addRange(range);

            document.execCommand('copy');alert("已复制好，可贴粘。");
        }
    </script>

3.添加样式代码

wp后台—>外观—>自定义—>额外css

.footer-fixed{background-color: #fff;border-top: 1px solid #ccc;bottom: 0;padding-top: 5px;position: fixed;width: 100%;max-width:1200px;z-index:9999; }
.foot-fixed{width:100%;margin: 0 auto;max-width:1200px; }
.footer-fixed img {float: left;margin-top: -5px;width: 60px;}
.keys{background-color: #ffff00;font-size:18px;color: #ff0000;padding: 0px 2px; }