[插件完全未使用]仅使用HTML和CSS安装SNS共享按钮[WordPress]

2019年7月30日2019年8月3日

1. 触发
2. 此代码共享按钮的功能
3. 共享按钮代码和安装方法
4. HTML
5. 的CSS
6. 显示例

触发

到目前为止，“ SNS共享”按钮一直是“WordPress共享按钮插件– AddThis我依赖于名为“的插件。

这个插件是

您可以添加Hatena书签以及主要的海外SNS，例如Facebook，Twitter，Line，pocket和pinterest。
侧面有一个细长的小共享按钮设计。

在这方面，我很喜欢它，但是它是一个相当沉重的插件。

如果搜索“没有插件，共享按钮”，您将找到使用PHP / CSS / HTML /社交图标插件的方法。

这次，我尝试仅使用CSS和HTML安装SNS共享按钮，而不使用PHP和社交图标。

此代码共享按钮的功能

仅使用HTML和CSS创建
不要使用PHP，社交图标
在标记中执行javascript
自动获取要共享的页面的URL和页面标题
比插件快（比AddThis高10点）
股份数无法计算
横向简单设计

共享按钮代码和安装方法

HTML

在哪里写：
“外观”->“自定义”->“小部件”->您要放置共享按钮的位置->添加小部件->“自定义HTML”

分享这篇文章

的CSS

编写位置：“外观”->“自定义”->“其他CSS”

/ * --- SNS共享按钮--- * / / *按钮上的字符* / .fa-twitter：之前，.fa-hatena：之前，.fa-line：之前，.fa-pocket：之前{font -family：helvetica neue，helvetica，arial，sans-serif； font-weight：粗体； font-size：14px} .fa-facebook：在{content：“ f”之前； font-family：Verdana； font-weight：粗体} .fa-twitter：在{content：“ twitter”;}之前。.fa-hatena：在{content：“ B！”; font-family：Verdana;}之前.fa-line：在{content：“ Line”;}之前.fa-pocket：在{content：“ pocket”;}之前/ /调整按钮显示位置* / .button-area {文本对齐：居中； margin-top：15像素；} / *标题显示设置* /。button-区域标题{text-align：center; padding：.7em;} / *按钮块设计* /。button-area li a {padding：2px；显示：block； text-align：center； text-decoration：none； color：#fff； border-radius：4px;} / *每个SNS的背景色* / .twitter a {background-color：＃55acee;} .facebook a {background-color：＃3b5998;} .hatena a {background -color：＃008fde;} .line a {background-color：＃1dcd00;} .pocket a {background-color：＃ea5a6c;} / *删除列表“ ・” * / .button-area ul {边距：0；填充：0；列表样式：无；} / *按钮宽度和边距设置* / .button-area li {float：向左；宽度：19％；边距：0％；}。 ul：在{display：block; clear：both;}之后* / *将光标置于按钮上时显示设置* / .button-area li a：悬停{-ms-transform：translateY（-3px）; -webkit-转换：translateY（-2px）；转换：translateY（-2px）;}