虚位以待(AD)
虚位以待(AD)
首页 > CMS教程 > WordPress > 手工添加WordPress文章分享按钮(无插件)实现步骤

手工添加WordPress文章分享按钮(无插件)实现步骤
类别:WordPress   作者:码皇   来源:互联网   点击:

给一篇好的文章添加一些分享按钮分享到一些知名网站,很利于网站的推广。给站点添加分享按钮的方法很多,你可以像本站这样,使用jiathis工具,登陆jiathis com设置你喜欢的方式获取相应的代码即可。这里再介绍一个手 ,魔客吧
给一篇好的文章添加一些分享按钮分享到一些知名网站,很利于网站的推广。给站点添加分享按钮的方法很多,你可以像本站这样,使用jiathis工具,登陆jiathis.com设置你喜欢的方式获取相应的代码即可。这里再介绍一个手工添加WordPress文章分享按钮的方法。

先看效果图


方法:新建一个bookmarke.php文件,复制以下代码到其中,并上传至主题目录。

复制代码 代码如下:
$permalink = urlencode(get_permalink($post->ID));
$title = urlencode($post->post_title);
$title = str_replace('+','%20',$title);
?>

  • &
    title=" target="_blank" rel="nofollow">分享到鲜果


  • &title=&sel=&v=1" target="_blank" rel="nofollow">分享到豆瓣


  • 分享到做啥


  • &title="target="_blank" rel="nofollow" >分享到人人网


  • &title=" title="分享到开心网" target="_blank" rel="nofollow">分享到开心网

  • &title="target="_blank" rel="nofollow" " title="分享到新浪微博" target="_blank" rel="nofollow">分享到新浪微博


  • 然后设置CSS ,在主题的style.css中添加如下代码

    复制代码 代码如下:
    /************************************************
    * bookmark *
    ************************************************/
    #share {
    background:none repeat scroll 0 0 #FFF6EE;
    -moz-border-radius:5px 5px 5px 5px;
    -webkit-border-radius: 5px;
    background:none repeat scroll 0 0 #FFF6EE;
    border:1px solid #FFF6CC;
    width:602px;
    float:left;
    }
    #share li {
    background:url("images/share.gif") no-repeat scroll 0 0 transparent;
    float:left;
    margin:6px 0 0 5px;
    padding:4px 0 4px 20px;
    list-style-type:none;
    }
    #share li#fanfou {
    background-position:0 -44px;
    }
    #share li#facebook {
    background-position:0 -22px;
    }
    #share li#friendfeed {
    background-position:0 -66px;
    }
    #share li#douban {
    background-position:0 -110px;
    }
    #share li#xiaonei {
    background-position:0 -87px;
    }
    #share li#zuosa {
    background-position:0 -130px;
    }
    #share li#myspace {
    background-position:0 -153px;
    }
    #share li#kaixin001 {
    background-position:0 -176px;
    }
    #share li#xianguo {
    background-position:0 -199px;
    }
    #share li#sina {
    background-position:0 -220px;
    }

    然后下载分享按钮图标,并上传至wordpress主题的images目录下。

    最后在文章模板页中添加如下代码(一般是single.php)

    复制代码 代码如下:




    OK ,已经全部完成,IE8 、FF、GG下测试无误,若出现错位情况,请尝试修改CSS图片控制宽度,如果你不喜欢以上的分享站点,可以自己修改网址和图标即可。
    相关热词搜索: 手工添加WordPress文章分享按钮(无插件)实