WordPress
远方的雪山微信分享按钮(微信公众号)
微信，当下流行的社交软件，微信的强大与用户量的巨增让我们看到微信前景；微信公众号，为网站申请一个微信公众号，可以让网站很方便的展示给微信用户，让微信用户随时关注网站的动态。
前面介绍了自定义wordpress分享按钮，把比较流行、用户量大的一些社交网站链接添加到分享按钮中，重新设计与网站本身的样式相符合，让分享按钮看起来就是网站的一部分。
远方的雪山流量需少，但还是要做的更好，其实到现在已不太注重流量，做这个网站最大的初衷是记录生活点滴。前几天看到加网的jiathis分享按钮中多了一个“微信按钮”，点击弹出微信公众号，效果很棒，交互性与个性化都不错。所以在远方的雪山再添加一个“微信分享按钮”。
在《自定义wordpress分享按钮》文章中的分享按钮代码中添加微信图标按钮：
- <a class="weixin" onclick="showid('weixin');"><img src="微信图标链接地址"></a>
同时在分享按钮代码中添加弹窗显示的微信公众号二维码图片(id：“weixin”要与上面代码中的onclick="showid('weixin');"一样，点击才会显示整个id“weixin”中的内容)：
- <!--微信分享按钮弹窗-->
- <div id="weixin">
- <h3>远方的雪山微信公众号</h3>
- <img src="微信公众号二维码图片链接地址">
- </div>
在主题自定义js文件中添加弹窗的js代码（js代码来源知更鸟，与远方的雪山登录按钮一样）：
- //弹窗js代码
- function showid(idname){
- var isIE = (document.all) ? true : false;
- var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6);
- var newbox=document.getElementById(idname);
- newbox.style.zIndex="9999";
- newbox.style.display="block"
- newbox.style.position = !isIE6 ? "fixed" : "absolute";
- newbox.style.top =newbox.style.left = "50%";
- newbox.style.marginTop = - newbox.offsetHeight / 2 + "px";
- newbox.style.marginLeft = - newbox.offsetWidth / 2 + "px";
- var layer=document.createElement("div");
- layer.id="layer";
- layer.style.width=layer.style.height="100%";
- layer.style.position= !isIE6 ? "fixed" : "absolute";
- layer.style.top=layer.style.left=0;
- layer.style.backgroundColor="#000";
- layer.style.zIndex="9998";
- layer.style.opacity="0.6";
- document.body.appendChild(layer);
- var sel=document.getElementsByTagName("select");
- for(var i=0;i<sel.length;i++){
- sel[i].style.visibility="hidden";
- }
- function layer_iestyle(){
- layer.style.width=Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth)
- + "px";
- layer.style.height= Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) +
- "px";
- }
- function newbox_iestyle(){
- newbox.style.marginTop = document.documentElement.scrollTop - newbox.offsetHeight / 2 + "px";
- newbox.style.marginLeft = document.documentElement.scrollLeft - newbox.offsetWidth / 2 + "px";
- }
- if(isIE){layer.style.filter ="alpha(opacity=60)";}
- if(isIE6){
- layer_iestyle()
- newbox_iestyle();
- window.attachEvent("onscroll",function(){
- newbox_iestyle();
- })
- window.attachEvent("onresize",layer_iestyle)
- }
- layer.onclick=function(){newbox.style.display="none";layer.style.display="none";for(var i=0;i<sel.length;i++){
- sel[i].style.visibility="visible";
- }}
- }
最后在主题的样式文件中添加以下CSS代码：
- /*微信弹窗*/
- .weixin{
- cursor: pointer;
- }
- #weixin{
- display: none;
- background: #f2f2f2;
- padding: 2px 12px 12px;
- border-radius: 8px;
- }
- #weixin h3{
- text-align: center;
- padding: 8px;
- color: #3275a8;
- }
- #weixin img{
- border: none;
- }
- #weixin img:hover{
- background: none;
- }
微信公众号的影响相信你比我更了解，很多网站直接在边栏或悬浮显示二维码，在分享链接中添加，以弹窗的形式显示微信公众号也很不错。最近又在网站页面顶部加了一个信息栏，来展示微信公众号与一些信息，请关注远方的雪山微信，感谢！
本文由 远方的雪山 作者：萨龙龙 发表，转载请注明来源！
萨龙龙
文章：290 画廊：33 视频：37一个平平常常的人，热爱生活、旅行和摄影，骑行去过西藏，一直计划再去。14年从江西骑行来到大理，现栖居于洱海边，食人间烟火，过简单生活，做简约设计！
相关文章
非常感谢博主，我已经用上了微信弹窗，但有一点小问题，就是微信分享按钮点击以后二维码不是显示在最前面，阴影遮盖了二维码！请问怎么解决呢
我博客 的微信 就是用的 哥们的这种方法
但是 更新浏览器后 发现 只有 谷歌浏览器出效果了 。
jQuery弹窗的这个版本兼容性是很好，现在我的网站用的是CSS3的弹窗效果。
用上了 感谢博主！
哈，客气了
不错，这个确实很有点儿意思！支持一个！
最初是在jiathis分享按钮中看到的，感觉很不错，而且分享按钮也是自定义的，所以顺便添加一个。
还没注意到加网加了微信呢，我直接把公众号放在侧边栏了，这样更显眼
你的这个留言被多说当成垃圾留言了，我看了下没什么问题啊。 我也是看到jiathis分享按钮中有这个效果，才加到自定义的分享按钮中。
想问下，侧边栏，“随便看看”固定是怎么实现的呢？
你可以看下这篇文章：http://www.izhangheng.com/jquery-page-scroll-fixed-sidebar-effect/
好，谢谢，我研究下~
这个不错，可以考虑加一个
呵呵，个人感觉还是挺好。