WordPressにSNSのシェアリンクを追加するのでR ver.2 | なるへそゴマのすけのなるへそな教室

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

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

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

iscleさんから

#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に貼り付け、さらに、

<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に

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

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

<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に

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に、

@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に

</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。ちなみに、上の

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

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

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

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

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

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

</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円（税抜）からの格安ドメイン取得サービス─ムームードメイン─

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

その他の記事