如何为 WordPress 文章添加社交分享链接功能

分手后的思念是犯贱 2024-03-17 19:12 50阅读 0赞

碰到好的文章想让更多人看到怎么办？在当今社会中肯定第一个是想到分享。而作为网站站长，网站中增加一个分享功能除了能让您的文章通过分享方式让更多人看到外，它还能给用户带来更好好的用户体验。在 WordPress 网站中使用比较多的一个是 bShare 和 JiaThis 分享插件。而目前 JiaThis 也于 2018 年停止服务了，所以，是时候更换新的分享样式了。

今天给大家推荐分享的是开源免费的 js 分享代码，对于网站上分享功能失效或者还没有找到更好的分享插件站长来说，该插件可以很好的解决您的问题。

1、下载官网源代码

https://overtrue.me/share.js/

2、安装

官方作者提供了好几种安装方式，您也可以根据自己的需要来选择合适的安装方式。由于大家使用的 WordPress 主题不同，在调用的时候以实际情况为准。

在主题文件的 header.php 文件的 </head> 标签前加入下面代码：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1<br> 2</p> </td> 
   <td> <p>&lt;link href="&lt;?php&nbsp;echo&nbsp;get_template_directory_uri();&nbsp;?&gt;/dist/css/share.min.css" rel="stylesheet"&gt;<br> &lt;script src="&lt;?php&nbsp;echo&nbsp;get_template_directory_uri();&nbsp;?&gt;/dist/js/social-share.min.js"&gt;&lt;/script&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

3、调用

把主题设置里的分享代码替换成下面的代码即可：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p>&lt;div&nbsp;class="social-share"&gt;&lt;/div&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

4、其它

对于一般的博客分享使用的话，到这一步就足够了，Share.js 也提供了很多自定义的配置，如自定义图标：

使用: data-initialized=”true” 标签或者 initialized 配置项来禁用自动生成 icon 功能。

<table> 
 <tbody> 
  <tr> 
   <td> <p>1<br> 2<br> 3<br> 4<br> 5</p> </td> 
   <td> <p>&lt;div&nbsp;class="social-share"&nbsp;data-initialized="true"&gt;<br> &nbsp; &nbsp;&nbsp;&lt;a href="#"&nbsp;class="social-share-icon icon-weibo"&gt;&lt;/a&gt;<br> &nbsp; &nbsp;&nbsp;&lt;a href="#"&nbsp;class="social-share-icon icon-qq"&gt;&lt;/a&gt;<br> &nbsp; &nbsp;&nbsp;&lt;a href="#"&nbsp;class="social-share-icon icon-qzone"&gt;&lt;/a&gt;<br> &lt;/div&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

上面的 a 标签会自动加上分享链接，并且 a 标签必须带 icon-name 属性，不然分享链接不会自动加上。

当然，Share.js 还有很多折腾地方,这里就不一一列举了，大家可以根据自己的需要来进行调整！