百度分享,算是目前比较火的一个分享工具,常规我们在用时,直接放网站底部,那么:

  • 文章页面就是分享文章
  • 分类页面就是分享分类

但是呢,在制作wordpress主题遇到特殊需求,比如,在分类页面,文章列表循环中,我点击分享按钮,并分享这篇文章。那原本的分享按钮就不管用了。

那如何在分类页面的文章列表中分别分享指定文章呢?


在阅读百度分享的高级设置说明后,我能想到的办法,只能是通过onBeforeClick 这个事件来获取,指定文章的标题,链接,甚至是图片。

方法奉上:

js

//先定义变量  
    var Shareherf = "";  
    var Sharetext = "";  
    var Sharepic = "";  
//绑定所有分享按钮所在A标签的鼠标移入事件,从而获取变量  
    $(function () {  
        $(".bdsharebuttonbox a").mouseover(function () {  
            Shareherf = $(this).attr("data-herf");  
            Sharetext =$(this).attr("data-text");  
            Sharepic =$(this).attr("data-pic");  
        });  
    });  
//插件的配置部分,注意要记得设置onBeforeClick事件,传入分享数据。  
    function wpdieShareUrl(cmd, config) {  
        if (Shareherf) {  
            config.bdUrl = Shareherf;   
            config.bdText = Sharetext;  
            config.bdPic = Sharepic;       
        }  
        return config;  
    }  
window._bd_share_config = {          
        common: {  
            "onBeforeClick":wpdieShareUrl,  
            "bdText": "",  
            "bdMini": "2",  
            "bdMiniList": false,  
            "bdPic": "",  
            "bdStyle": "0"  
        },  
        share: [{  
             bdCustomStyle: ''  
        }]  
    };  
//分享的固定JS加载部分  
    with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];  

html部分,根据你的代码不同,大概如下:

<div class="bdsharebuttonbox" style="float: left;padding-left: 0;border-left: 0px;">  
<a href="javascript:;" data-herf="指定链接" data-pic="指定图片" data-text="指定标题" data-cmd="more" class="sharemore share-links bds_more"></a>  
</div>  

好了,就这样。