WordPress

远方的雪山微信分享按钮(微信公众号)

LensNews

远方的雪山微信分享按钮(微信公众号)
微信,当下流行的社交软件,微信的强大与用户量的巨增让我们看到微信前景;微信公众号,为网站申请一个微信公众号,可以让网站很方便的展示给微信用户,让微信用户随时关注网站的动态。

前面介绍了自定义wordpress分享按钮,把比较流行、用户量大的一些社交网站链接添加到分享按钮中,重新设计与网站本身的样式相符合,让分享按钮看起来就是网站的一部分。

远方的雪山流量需少,但还是要做的更好,其实到现在已不太注重流量,做这个网站最大的初衷是记录生活点滴。前几天看到加网的jiathis分享按钮中多了一个“微信按钮”,点击弹出微信公众号,效果很棒,交互性与个性化都不错。所以在远方的雪山再添加一个“微信分享按钮”。

在《自定义wordpress分享按钮》文章中的分享按钮代码中添加微信图标按钮:

  1. <a class="weixin" onclick="showid('weixin');"><img src="微信图标链接地址"></a>  

同时在分享按钮代码中添加弹窗显示的微信公众号二维码图片(id:“weixin”要与上面代码中的onclick="showid('weixin');"一样,点击才会显示整个id“weixin”中的内容):

  1. <!--微信分享按钮弹窗-->   
  2. <div id="weixin">   
  3.     <h3>远方的雪山微信公众号</h3>   
  4.         <img src="微信公众号二维码图片链接地址">   
  5. </div>  

在主题自定义js文件中添加弹窗的js代码(js代码来源知更鸟,与远方的雪山登录按钮一样):

  1. //弹窗js代码   
  2. function showid(idname){   
  3. var isIE = (document.all) ? true : false;   
  4. var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6);   
  5. var newbox=document.getElementById(idname);   
  6. newbox.style.zIndex="9999";   
  7. newbox.style.display="block"  
  8. newbox.style.position = !isIE6 ? "fixed" : "absolute";   
  9. newbox.style.top =newbox.style.left = "50%";   
  10. newbox.style.marginTop = - newbox.offsetHeight / 2 + "px";   
  11. newbox.style.marginLeft = - newbox.offsetWidth / 2 + "px";   
  12. var layer=document.createElement("div");   
  13. layer.id="layer";   
  14. layer.style.width=layer.style.height="100%";   
  15. layer.style.position= !isIE6 ? "fixed" : "absolute";   
  16. layer.style.top=layer.style.left=0;   
  17. layer.style.backgroundColor="#000";   
  18. layer.style.zIndex="9998";   
  19. layer.style.opacity="0.6";   
  20. document.body.appendChild(layer);   
  21. var sel=document.getElementsByTagName("select");   
  22. for(var i=0;i<sel.length;i++){   
  23. sel[i].style.visibility="hidden";   
  24. }   
  25. function layer_iestyle(){   
  26. layer.style.width=Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth)   
  27. "px";   
  28. layer.style.height= Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) +   
  29. "px";   
  30. }   
  31. function newbox_iestyle(){   
  32. newbox.style.marginTop = document.documentElement.scrollTop - newbox.offsetHeight / 2 + "px";   
  33. newbox.style.marginLeft = document.documentElement.scrollLeft - newbox.offsetWidth / 2 + "px";   
  34. }   
  35. if(isIE){layer.style.filter ="alpha(opacity=60)";}   
  36. if(isIE6){   
  37. layer_iestyle()   
  38. newbox_iestyle();   
  39. window.attachEvent("onscroll",function(){   
  40. newbox_iestyle();   
  41. })   
  42. window.attachEvent("onresize",layer_iestyle)   
  43. }   
  44. layer.onclick=function(){newbox.style.display="none";layer.style.display="none";for(var i=0;i<sel.length;i++){   
  45. sel[i].style.visibility="visible";   
  46. }}   
  47. }  

最后在主题的样式文件中添加以下CSS代码:

  1. /*微信弹窗*/  
  2. .weixin{   
  3.     cursorpointer;   
  4. }   
  5. #weixin{   
  6.     displaynone;   
  7.     background#f2f2f2;   
  8.     padding2px 12px 12px;   
  9.     border-radius: 8px;   
  10. }   
  11. #weixin h3{   
  12.     text-aligncenter;   
  13.     padding8px;   
  14.     color#3275a8;   
  15. }   
  16. #weixin img{   
  17.     bordernone;   
  18. }   
  19. #weixin img:hover{   
  20.     backgroundnone;   
  21. }  

微信公众号的影响相信你比我更了解,很多网站直接在边栏或悬浮显示二维码,在分享链接中添加,以弹窗的形式显示微信公众号也很不错。最近又在网站页面顶部加了一个信息栏,来展示微信公众号与一些信息,请关注远方的雪山微信,感谢!

(2)
Loading收藏(0)

本文由 远方的雪山 作者:萨龙龙 发表,转载请注明来源!

LensNews

热评文章

发表评论

CAPTCHA
*

评论: 18 条评论,访客:8 条,博主:6 条 ,当前引用:4 条

  • 时尚house
    时尚house 发布于:  回复

    非常感谢博主,我已经用上了微信弹窗,但有一点小问题,就是微信分享按钮点击以后二维码不是显示在最前面,阴影遮盖了二维码!请问怎么解决呢

  • 神经大爆炸
    神经大爆炸 发布于:  回复

    我博客 的微信 就是用的 哥们的这种方法
    但是 更新浏览器后 发现 只有 谷歌浏览器出效果了 。

    • 萨龙龙
      萨龙龙 发布于:  回复

      jQuery弹窗的这个版本兼容性是很好,现在我的网站用的是CSS3的弹窗效果。

  • 玉满斋
    玉满斋 发布于:  回复

    不错,这个确实很有点儿意思!支持一个!

    • 萨龙龙
      萨龙龙 发布于:  回复

      最初是在jiathis分享按钮中看到的,感觉很不错,而且分享按钮也是自定义的,所以顺便添加一个。

  • Wall·E
    Wall·E 发布于:  回复

    还没注意到加网加了微信呢,我直接把公众号放在侧边栏了,这样更显眼

    • 萨龙龙
      萨龙龙 发布于:  回复

      你的这个留言被多说当成垃圾留言了,我看了下没什么问题啊。 我也是看到jiathis分享按钮中有这个效果,才加到自定义的分享按钮中。

  • 那时年少
    那时年少 发布于:  回复

    这个不错,可以考虑加一个

    • 萨龙龙
      萨龙龙 发布于:  回复

      呵呵,个人感觉还是挺好。

当前外部引用:4 条

  • HTML5/CSS3响应式Salong主题 | 远方的雪山
  • WordPress3.8全新的后台管理界面 | 远方的雪山
  • CSS3微信分享按钮弹窗效果 | 远方的雪山
  • wordpress 顶部下拉信息栏 | 远方的雪山