WordPressにSNSのシェアリンクを追加するのでR ver.2

ここの記事でSNSのシェアリンクをプラグイン「Simple Share Buttons Adder」で実現したのでR。

しかし、iscleさんのここによると、CSSなど直接コードを入力した方が、読み込みが速くなるのでR。

そこで、これを実施したのでR。

iscleさんから

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
#share ul{
    height:auto;
}
#share li{
    font-size:14px;
    float:left;
    text-align:center;
    width:84px;
    margin-right:1%;
    margin-bottom:8px;
    border-radius:3px;
    list-style:none;
}
#share li.share-twitter{
    background:#55acee;
    box-shadow:0 2px #2795e9;
}
#share li.share-twitter:hover{
    background:#83c3f3;
}
#share li.share-facebook{
    background:#3b5998;
    box-shadow:0 2px #2d4373;
}
#share li.share-facebook:hover{
    background:#4c70ba;
}
#share li.share-google{
    background:#dd4b39;
    box-shadow:0 2px #c23321;
}
#share li.share-google:hover{
    background:#e47365;
}
#share li.share-hatena{
    background:#2c6ebd;
    box-shadow:0 2px #225694;
}
#share li.share-hatena:hover{
    background:#4888d4;
}
#share li.share-pocket{
    background:#f13d53;
    box-shadow:0 2px #e6152f;
}
#share li.share-pocket:hover{
    background:#f26f7f;
}
#share li.share-line{
    background:#00C300;
    box-shadow:0 2px #009d00;
}
#share li.share-line:hover{
    background:#2bd92b;
}
#share a{
    display:block;
    height:27px;
    padding-top:6px;
    color:#ffffff;
    text-decoration:none;
}
#share a:hover{
    text-decoration:none;
    color:#ffffff;
}

をテーマのstyle.cssに貼り付け、さらに、

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div id="share">
<ul>
<!-- Twitter -->
<li class="share-twitter">
<a href="http://twitter.com/home?status=<?php echo urlencode(the_title_attribute('echo=0')); ?>%20<?php the_permalink(); ?>%20by%20" target="_blank">Twitter</a>
</li>
<!-- Facebook -->
<li class="share-facebook">
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" target="_blank">Facebook</a>
</li>
<!-- Google+ -->
<li class="share-google">
<a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank">Google+</a>
</li>
<!-- はてなブックマーク -->
<li class="share-hatena">
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php the_title();?>" target="_blank">はてブ</a>
</li>
<!-- Pocket -->
<li class="share-pocket">
<a href="http://getpocket.com/edit?url=<?php the_permalink(); ?>" target="_blank">Pocket</a>
</li>
<!-- LINE -->
<li class="share-line">
<a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>">LINE</a>
</li>
</ul>
</div>

をcontent-single.phpに貼り付けのでR。

しかし、これだけではだめで、iconを出すには別の方法の必要があったのでR。ここでそれが分かったのでR。

これを見ると、「複雑になってしまうので上のソースには記述していませんが、当ブログではソーシャルアイコンをFont Awesomeで表示しています。」とのことでR。

そこで、Font Awesomeを観たのでRが、具体的にどうすればよいか分からなかったのでR。

そこで、探すと、ここが参考になったのでR。

そこで、ここと同じように、「ダウンロードした「icomoon.zip」ファイルを解凍して、テーマフォルダ直下に置きます。」をしたのでRが、解凍後で必要なファイルは、

icomoon.eot
icomoon.woff
icomoon.ttf
icomoon.svg

の4つと、この解凍icomoon.zip内の

style.css

だけのようでR。

そこで、

テーマ直下にicomoonフォルダを作って、さらにその内部にfontsフォルダを作って、先のicomoon.zip内のstyle.cssをstyleforsns.cssとテーマのstyle.cssとかぶさらないように安全のため名称変更して、icomoonフォルダに入れて、fontsフォルダ内にicomoon.eot、icomoon.woff、icomoon.ttf、icomoon.svgを入れたのでR。

そして、ここを参考に

header.phpに

1
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/icomoon/styleforsns.css">

を記述して、content-single.phpに

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<ul class="web-logo-font">
  <li class="twitter-btn-icon">
    <a href="#" class="twitter-btn-icon-link"><span class="icon-twitter"></span></a>
  </li>
  <li class="facebook-btn-icon">
    <a href="#" class="facebook-btn-icon-link"><span class="icon-facebook"></span></a>
  </li>
  <li class="google-plus-btn-icon">
    <a href="#" class="google-plus-btn-icon-link"><span class="icon-googleplus"></span></a>
  </li>
  <li class="hatena-btn-icon">
    <a href="#" class="hatena-btn-icon-link"><span class="icon-hatena"></span></a>
  </li>
  <li class="pocket-btn-icon">
    <a href="#" class="pocket-btn-icon-link"><span class="icon-pocket"></a>
  </li>
  <li class="line-btn-icon">
    <a href="#" class="line-btn-icon-link"><span class="icon-line"></a>
  </li>
  <li class="feedly-btn-icon">
    <a href="#" class="feedly-btn-icon-link"><span class="icon-feedly"></a>
  </li>
</ul>
<div style="clear:both;"></div>

を記述して、styleforsns.cssに

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
ul.web-logo-font {
  padding: 0;
  font-family: sans-serif;
}
  
ul.web-logo-font li {
  float: left;
  list-style-type: none;
  margin-right: 5px;
  padding-right: 5px;
}
  
ul.web-logo-font li a{
  font-size: 40px;
  text-decoration: none;
}
  
ul.web-logo-font li a:hover{
  opacity: 0.6;
}
 
ul.web-logo-font a.twitter-btn-icon-link{color:#55ACEE;}
ul.web-logo-font a.facebook-btn-icon-link{color:#3C5A99;}
ul.web-logo-font a.google-plus-btn-icon-link{color:#DD4B39;}
ul.web-logo-font a.hatena-btn-icon-link{color:#3C7DD1;}
ul.web-logo-font a.pocket-btn-icon-link{color:#EE4257;}
ul.web-logo-font a.line-btn-icon-link{color:#00C300;}
ul.web-logo-font a.feedly-btn-icon-link{color:#2BB24C}

を記述したのでR。

しかし、なぜかリンクがリンク色のままでR。

そこで、

ここと、ここの合わせ技でしたのでR。

さらに、snsのボタンはTwitter、Facebook、Google+、はてブ、Pocket、LINEの6つとして実施したのでR。

stlyeforsns.cssに、

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?-qz7pb2');
    src:url('fonts/icomoon.eot?#iefix-qz7pb2') format('embedded-opentype'),
        url('fonts/icomoon.woff?-qz7pb2') format('woff'),
        url('fonts/icomoon.ttf?-qz7pb2') format('truetype'),
        url('fonts/icomoon.svg?-qz7pb2#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
 
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
 
.icon-twitter:before {
    content: "\e611";
}
.icon-facebook:before {
    content: "\e60d";
}
.icon-googleplus:before {
    content: "\e608";
}
.icon-hatena:before {
    content: "\e00a";
}
.icon-pocket:before {
    content: "\e008";
}
.icon-line:before {
    content: "\e009";
}
 
ul.web-logo-font{
    height:auto;
}
ul.web-logo-font li{
    font-size:14px;
    float:left;
    text-align:center;
    width:84px;
    margin-right:1%;
    margin-bottom:8px;
    border-radius:3px;
    list-style:none;
}
ul.web-logo-font li.twitter-btn-icon{
    background:#55acee;
    box-shadow:0 2px #2795e9;
}
ul.web-logo-font li.twitter-btn-icon:hover{
    background:#83c3f3;
}
ul.web-logo-font li.facebook-btn-icon{
    background:#3b5998;
    box-shadow:0 2px #2d4373;
}
ul.web-logo-font li.facebook-btn-icon:hover{
    background:#4c70ba;
}
ul.web-logo-font li.google-plus-btn-icon{
    background:#dd4b39;
    box-shadow:0 2px #c23321;
}
ul.web-logo-font li.google-plus-btn-icon:hover{
    background:#e47365;
}
ul.web-logo-font li.hatena-btn-icon{
    background:#2c6ebd;
    box-shadow:0 2px #225694;
}
ul.web-logo-font li.hatena-btn-icon:hover{
    background:#4888d4;
}
ul.web-logo-font li.pocket-btn-icon{
    background:#f13d53;
    box-shadow:0 2px #e6152f;
}
ul.web-logo-font li.pocket-btn-icon:hover{
    background:#f26f7f;
}
ul.web-logo-font li.line-btn-icon{
    background:#00C300;
    box-shadow:0 2px #009d00;
}
ul.web-logo-font li.line-btn-icon:hover{
    background:#2bd92b;
}
ul.web-logo-font a{
    display:block;
    height:27px;
    padding-top:6px;
    color:#ffffff;
    text-decoration:none;
}
ul.web-logo-font a:hover{
    text-decoration:none;
    color:#ffffff;
}

と書きなおして、テーマのstyle.cssには何も記述せずに、content-single.phpに

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
</br></br><div align=left><div style="font-size:120%;">
<?php echo 'この記事をシェアできます。'; ?>
</div></div>
<ul class="web-logo-font">
  <li class="twitter-btn-icon">
  <a href="http://twitter.com/home?status=<?php echo urlencode(the_title_attribute('echo=0')); ?>%20<?php the_permalink(); ?>%20" target="_blank"><span class="icon-twitter" style="color: white;"></span></a>
  </li>
  <li class="facebook-btn-icon">
  <a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" target="_blank"><span class="icon-facebook" style="color: white;"></span></a>
  </li>
  <li class="google-plus-btn-icon">
  <a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank"><span class="icon-googleplus" style="color: white;"></span></a>
  </li>
  <li class="hatena-btn-icon">
  <a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php the_title();?>" target="_blank"><span class="icon-hatena" style="color: white;"></span></a>
  </li>
  <li class="pocket-btn-icon">
  <a href="http://getpocket.com/edit?url=<?php the_permalink(); ?>" target="_blank"><span class="icon-pocket" style="color: white;"></span></a>
  </li>
  <li class="line-btn-icon">
  <a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>"><span class="icon-line" style="color: white;"></span></a>
  </li>
</ul>
<div style="clear:both;"></div>

と記述したのでR。ちなみに、上の

1
2
3
</br></br><div align=left><div style="font-size:120%;">
<?php echo 'この記事をシェアできます。'; ?>
</div></div>

はsnsボタン前の文言の追加なので、あってもなくてもどちらでもよいのでR。また、

1
<span class="icon-**" style="color: white;"></span>

内のstyle=”color…は、リンク色に変更するのを強制的に白にしているので、これもあってもなくてもどちらでもよいのでR。

これで、強引な合わせ技のようでRが、うまくsnsのシェアリンクが（たぶん）完成したのでR。

さらに、先のcontent-single.phpに挿入する部分を

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
</br></br><div align=left><div style="font-size:120%;">
<?php echo 'この記事をシェアできます。'; ?>
</div></div>
<ul class="web-logo-font">
  <li class="twitter-btn-icon">
  <a href="http://twitter.com/home?status=<?php echo urlencode(the_title_attribute('echo=0')); ?>%20<?php the_permalink(); ?>%20" target="_blank"><span style="color: white;">Twitter</span></a>
  </li>
  <li class="facebook-btn-icon">
  <a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>" target="_blank"><span style="color: white;">Facebook</span></a>
  </li>
  <li class="google-plus-btn-icon">
  <a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank"><span style="color: white;">Google+</span></a>
  </li>
  <li class="hatena-btn-icon">
  <a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php the_title();?>" target="_blank"><span style="color: white;">はてブ</span></a>
  </li>
  <li class="pocket-btn-icon">
  <a href="http://getpocket.com/edit?url=<?php the_permalink(); ?>" target="_blank"><span style="color: white;">Pocket</span></a>
  </li>
  <li class="line-btn-icon">
  <a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>"><span style="color: white;">LINE</span></a>
  </li>
</ul>
<div style="clear:both;"></div>

とすると、snsのiconではなく、文字で出るのでR。





（広告）月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』
（広告）WordPressの運用に特化したレンタルサーバー『wpXレンタルサーバー』
（広告）年間920円（税抜）からの格安ドメイン取得サービス─ムームードメイン─




この記事をシェアできます。