【STINGER5】WordPressのソーシャルボタンカスタマイズ用コードの導入方法ーコピペで簡単、手間いらずー

by 七色たいよう · 公開 2015年11月25日 · 更新済み 2017年2月14日

“SNSボタンをもう少し見やすいやつに変えたいなあ”

僕がWordpressでSTINGER5を使ってブログを書き始めてから約1年ほどが経過した。フッターやその他ちょっとした細かい部分はカスタマイズをしていたが、どうしてもずっと変えたいと思っていた箇所が、《SNSボタン》だった。

ただ、何をどのようにしたら良いのかわからなかったのと、まとまった時間が無かったせいで後回しにしてしまっていたが、今回思い切ってカスタマイズをすることに決めた。

1 事前準備
- 1.1 参考サイト紹介
- 1.2 子テーマに【style.css】以外のファイルを準備
2 自作SNSボタン設置手順

事前準備

参考サイト紹介

今回参考にさせていただいたサイトはこちら。ちゅんこさんの「主婦ライフ」というとても見た目がポップで洗練されていて、とても参考になる作りだ。

《Shufulife》

【WordPress】8種類の自作SNSボタンのコードをご紹介！カウントも表示するよ

自作SNSボタン設置の詳しい導入手順は上のリンク参照。

今回、僕は子テーマのカスタマイズ方法すら分かっていなかったため、子テーマの構成に関する記事も参考にさせてもらった。その際特に勉強になったのは、わいひらさんの「寝ログ」。図解がとてもわかりやすくて、Wordpressど素人の僕でも理解することができた。

《寝ログ》

WordPressテーマをカスタマイズするなら子テーマを使った方が良い理由、使い方など

“そもそも、子テーマって何？”と考えた方は、このブログ記事を読んでみると理解が深まると思う。

そして、改めてSTINGER5の構成を確認するために、Jimonさんの「これは！ログ」から、以下の記事を参照させてもらった。

《これは！ログ》

Stinger5カスタマイズ！最新版class,id構造早見表 -トップページ編-

みなさん、非常にわかりやすく勉強になる内容で本当に勉強になった。

本当にありがとうございます！

子テーマに【style.css】以外のファイルを準備

そして、子テーマについて調べていくと、子テーマを作るにあたって【style.css】や【function.php】を作成するよう書かれている記事は多く見つかるが、これだと【header.php】といった他の構成を子テーマ側からカスタマイズすることができないことに気づいた。

そこで、Cyberduckから親テーマであるSTINGER5フォルダ内にある【style.css】以外のファイルを丸ごと子テーマにコピーしてきた。なお、【function.php】は一度コピーしてみたのだが、コピーするだけではソースコードに問題があるのか、とりあえず削除してみたところ、問題なく動いているのでそのままにしている（勉強不足）。

上の通り、親テーマであるSTINGER5のフォルダ内のファイルを子テーマにコピーすれば、子テーマの中に親テーマの複製を作った状態にすることができ、【style.css】以外の部分もカスタマイズ可能になる。

※クリックすると詳細確認可能。

この状態にしてから、ようやく自作ボタンのカスタマイズに移ることができる。

自作SNSボタン設置手順

【style.css】にソースコードを記述

上に紹介した《主婦ライフ》の記事から引用させていただき、僕が使ったソースコードを紹介。まずはこのソースコードを先ほど作成した子テーマの【style.css】に記述（コピペ&手直し）。

【STINGER5の場合に、そのまま使えるソースコードを使用】

@charset "UTF-8";
/*---------------------------------------------------------
Theme Name: stinger5ver20141227
Theme URI: http://wp-fun.com
Description: stinger5
Author: enji
Author URI: http://wp-fun.com
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: flexible-width, custom-header, custom-menu, editor-style,
Version: 20141227
---------------------------------------------------------*/
* {
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "ＭＳ Ｐゴシック", sans-serif;
	margin: 0px;
	padding: 0px;
}
main, article, aside, header, canvas, details, figcaption, figure, footer, nav, section, summary {
	display: block;
}


～～　略　　～～


↓↓↓元々記載してあったこの部分は消す↓↓↓
/*--------------------------------
SNS　　
---------------------------------*/
.sns li {
	margin: 5px 0;
}
.sns .snsb li {
	float: left;
	margin-right: 10px;
	list-style-type: none;
}
.post .sns .snsb.clearfix {
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom: 20px;
	padding-left: 0px;
}
↑↑↑ここまで↑↑↑

↓↓↓↓↓『スマホ部分のCSSをコピペ』↓↓↓↓↓

/*--------------------------------
SNS
---------------------------------*/
.share{
	width:100%;
}
.share h4{
	font-size:120%; 
	text-align:center;
}

.sns{
	margin:0 auto;
	text-align:center;
	
}
.sns ul {
	list-style:none;

}
.sns li {
	float:left;
	width:48%;
	margin:0 2% 3% 0;
}
.sns li a {
	font-size:80%;
	position:relative;
	display:block;
	padding:10px;
	color:#fff;
	border-radius:6px;
	text-align:center;
	text-decoration: none;
	text-shadow:1px 1px 0 rgba(255,255,255,0.3);
}
.sns li a:hover {
	-webkit-transform: translate3d(0px, 5px, 1px);
	-moz-transform: translate3d(0px, 5px, 1px);
	transform: translate3d(0px, 5px, 1px);
	box-shadow:none;
}

/* ツイッター */
.sns .twitter a {
	background:#00acee;
	box-shadow:0 5px 0 #0092ca;
}
.sns  .twitter a:hover {
	background:#0092ca;
}

/* Facebook */
.sns  .facebook a {
	background:#3b5998;
	box-shadow:0 5px 0 #2c4373;
}
.sns .facebook a:hover {
	background:#2c4373;
}

/* グーグル */
.sns .googleplus a {
	background:#db4a39;
	box-shadow:0 5px 0 #ad3a2d;
}
.sns  .googleplus a:hover {
	background:#ad3a2d;
}

/* はてぶ */
.sns  .hatebu a {
	background:#5d8ac1;
	box-shadow:0 5px 0 #43638b;
}
.sns .hatebu a:hover {
	background:#43638b;
}

/* LINE */
.sns  .line a {
	background:#25af00;
	box-shadow:0 5px 0 #219900;
}
.sns .line a:hover {
	background:#219900;
}

/* Pocket */
.sns  .pocket a {
	background:#f03e51;
	box-shadow:0 5px 0 #c0392b;
}
.sns  .pocket a:hover {
	background:#c0392b;
}

/* RSS */
.sns  .rss a {
	background:#ffb53c;
	box-shadow:0 5px 0 #e09900;
}
.sns  .rss a:hover {
	background:#e09900;
}

/* Feedly */
.sns  .feedly a {
	background:#87c040;
	box-shadow:0 5px 0 #74a436;
}
.sns  .feedly a:hover {
	background:#74a436;
}


↑↑↑↑↑『スマホ部分のCSSをコピペ』↑↑↑↑↑


～～　略　　～～



/*レイアウト スマートフォン
----------------------------------------------------*/
#wrapper {
	max-width: 980px;
	padding: 0 10px;
	margin: 0 auto;
}

～～　略　　～～


/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (max-width: 780px) {
aside {
	clear: both;
	float: none;
	width: auto;
	position: static !important;
	;
}
}
/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (min-width: 380px) {
#wrapper {
	padding: 0 20px;
}
～～　略　　～～

/*--------------------------------
一覧記事表示部分
---------------------------------*/
～～　略　　～～

/*-- ここまで --*/
}

/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 780px) {
.smanone {
	display: block;
}
.pcnone {
	display: none;
}

～～　略　　～～

/*--------------------------------
ページャー
---------------------------------*/
～～　略　　～～

.pagination a:hover {
	color: #fff;
	background-color: #666666;
}
.pagination .current {
	padding: 6px 9px 5px 9px;
	color: #fff;
	background-color: #CCCCCC;
}

↓↓↓↓↓『PC部分のCSSをコピペ』↓↓↓↓↓

/*--------------------------------------
  780px SNS
--------------------------------------*/
.share{
	padding-bottom:10px;
}
.sns ul {
	margin:0 auto;
	list-style:none;
}
 .sns li {
	width:23%;
	margin:0 2% 3% 0;
}
.sns li a {
	font-size:75%;
	padding:10px 2px;
}
.sns li:nth-child(4n) {
	margin-right:0;
}

↑↑↑↑↑『PC部分のCSSをコピペ』↑↑↑↑↑


/*-- ここまで --*/　←ここの上にコピペ！！！！！
}

次に、【sns.php】にソースコードを記述

そして、STINGER5では【sns.php】に以下のソースコードを記述。このソースコードは追記ではなく、丸ごと置き換えでOKとのこと。

<?php
  $url_encode=urlencode(get_permalink());
  $title_encode=urlencode(get_the_title());
?>

<div class="share">
<h4>ご購読ありがとうございます</h4>


<?php if(is_mobile()) {  //以下スマホの場合 ?>
<div class="sns">
<ul class="clearfix">
<!--ツイートボタン-->
<li class="twitter"> 
<a href="http://twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&via=【●ツイッターアカウント名（＠なし）●】&tw_p=tweetbutton"><i class="fa fa-twitter"></i>Twitter&nbsp;<?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?></a>
</li>

<!--Facebookボタン-->      
<li class="facebook">
<a href="http://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>"><i class="fa fa-facebook"></i>
Facebook&nbsp;<?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?></a>
</li>

<!--Google+1ボタン-->
<li class="googleplus">
<a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" ><i class="fa fa-google-plus"></i>Google+&nbsp;<?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?></a>
</li>

<!--はてブボタン-->  
<li class="hatebu">       
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>"><i class="fa fa-hatena"></i>はてブ&nbsp; <?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu(); ?></a>
</li>

<!--LINEボタン-->   
<li class="line">
<a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>">LINE</a>
</li>     

<!--ポケットボタン-->      
<li class="pocket">
<a href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>">Pocket&nbsp; <?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'':scc_get_share_pocket(); ?></a></li>

<!--RSSボタン-->
<li class="rss">
<a href="<?php echo home_url(); ?>/?feed=rss2"><i class="fa fa-rss"></i>RSS</a></li>

<!--feedlyボタン-->
<li class="feedly">
<a href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2F【●ドメイン名（例：shufulife.com)●】%2Ffeed%2F"  target="blank"><i class="fa fa-rss"></i>feedly&nbsp; <?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a></li>    
</ul>
</div> 

<?php } else { //以下PCの場合?> 

<div class="sns">
<ul class="clearfix">
<!--ツイートボタン-->
<li class="twitter"> 
<a href="http://twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&via=【●ツイッターアカウント名（＠なし）●】&tw_p=tweetbutton"><i class="fa fa-twitter"></i>Twitter&nbsp;<?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?></a>
</li>

<!--Facebookボタン-->      
<li class="facebook">       
<a href="http://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><i class="fa fa-facebook"></i>Facebook&nbsp; <?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?></a>
</li>
      
<!--Google+1ボタン-->
<li class="googleplus">
<a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;"><i class="fa fa-google-plus"></i>Google+&nbsp;<?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?></a>
</li>

<!--はてブボタン-->  
<li class="hatebu"> 
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=510');return false;" ><i class="fa fa-hatena"></i>はてブ&nbsp; <?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu(); ?></a>
</li>

 <!--LINEボタン-->      
<li class="line">
<a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>">LINE</a>
</li>       

<!--ポケットボタン-->      
<li class="pocket">
<a href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>" target="blank">Pocket&nbsp; <?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'':scc_get_share_pocket(); ?></a></li>

<!--RSSボタン-->
<li class="rss">
<a href="<?php echo home_url(); ?>/?feed=rss2"><i class="fa fa-rss"></i>RSS</a></li>

<!--feedlyボタン-->
<li class="feedly">
<a href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2F【●ドメイン名（例：shufulife.com)●】%2Ffeed%2F"  target="blank"><i class="fa fa-rss"></i>feedly&nbsp; <?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a></li>    
</ul>  
</div>
<?php } ?>
</div>

twitterの以下の部分には、自身のアカウント名とアカウントIDを記入。入力しないと、下の表示のまま拡散されてしまうので少し恥ずかしい思いをしてしまうかもしれないぞ！

via=【●ツイッターアカウント名（＠なし）●】

最後に、【sns-top.php】に以下のソースコードを記述

これは単純に僕自身が理解していなかっただけだが、個別のエントリには上記1〜2の手順だけでSNSボタンが変更されていたのだが、トップページのSNSボタンを変更するために【sns-top.php】への更新も忘れずに行おう。

<?php
  $url_encode=urlencode(get_home_url());
  $title_encode=urlencode(get_bloginfo('name'));
?>

<div class="share">
<h4>ご購読ありがとうございます</h4>


<?php if(is_mobile()) {  //以下スマホの場合 ?>
<div class="sns">
<ul class="clearfix">
<!--ツイートボタン-->
<li class="twitter"> 
<a href="http://twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&via=【●ツイッターアカウント名（＠なし）●】&tw_p=tweetbutton"><i class="fa fa-twitter"></i>Twitter&nbsp;<?php if(function_exists('get_scc_twitter')) { echo scc_get_share_twitter( array( post_id => 'home' ) );}?></a>
</li>

<!--Facebookボタン-->      
<li class="facebook">
<a href="http://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>"><i class="fa fa-facebook"></i>
Facebook&nbsp;<?php if(function_exists('get_scc_facebook')) { echo scc_get_share_facebook( array( post_id => 'home' ) );}?></a>
</li>

<!--Google+1ボタン-->
<li class="googleplus">
<a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" ><i class="fa fa-google-plus"></i>Google+&nbsp;<?php if(function_exists('get_scc_gplus')) { echo scc_get_share_gplus( array( post_id => 'home' ) );}?></a>
</li>

<!--はてブボタン-->  
<li class="hatebu">       
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>"><i class="fa fa-hatena"></i>はてブ&nbsp; <?php if(function_exists('get_scc_hatebu')) { echo scc_get_share_hatebu( array( post_id => 'home' ) );}?></a>
</li>

<!--LINEボタン-->   
<li class="line">
<a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>">LINE</a>
</li>     

<!--ポケットボタン-->      
<li class="pocket">
<a href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>">Pocket&nbsp; <?php if(function_exists('get_scc_pocket')) { echo scc_get_share_pocket( array( post_id => 'home' ) );}?></a></li>

<!--RSSボタン-->
<li class="rss">
<a href="<?php echo home_url(); ?>/?feed=rss2"><i class="fa fa-rss"></i>RSS</a></li>

<!--feedlyボタン-->
<li class="feedly">
<a href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2F【●ドメイン名（例：shufulife.com)●】%2Ffeed%2F"  target="blank"><i class="fa fa-rss"></i>feedly&nbsp; <?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a></li>    
</ul>
</div> 

<?php } else { //以下PCの場合?> 

<div class="sns">
<ul class="clearfix">
<!--ツイートボタン-->
<li class="twitter"> 
<a href="http://twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&via=【●ツイッターアカウント名（＠なし）●】&tw_p=tweetbutton"><i class="fa fa-twitter"></i>Twitter&nbsp;<?php if(function_exists('get_scc_twitter')) { echo scc_get_share_twitter( array( post_id => 'home' ) );}?></a>
</li>

<!--Facebookボタン-->      
<li class="facebook">       
<a href="http://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><i class="fa fa-facebook"></i>Facebook&nbsp; <?php if(function_exists('get_scc_facebook')) { echo scc_get_share_facebook( array( post_id => 'home' ) );}?></a>
</li>
      
<!--Google+1ボタン-->
<li class="googleplus">
<a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;"><i class="fa fa-google-plus"></i>Google+&nbsp;<?php if(function_exists('get_scc_gplus')) { echo scc_get_share_gplus( array( post_id => 'home' ) );}?></a>
</li>

<!--はてブボタン-->  
<li class="hatebu"> 
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=510');return false;" ><i class="fa fa-hatena"></i>はてブ&nbsp; <?php if(function_exists('get_scc_hatebu')) { echo scc_get_share_hatebu( array( post_id => 'home' ) );}?></a>
</li>

 <!--LINEボタン-->      
<li class="line">
<a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>">LINE</a>
</li>       

<!--ポケットボタン-->      
<li class="pocket">
<a href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>" onclick="window.open(this.href, 'PCwindow', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;">Pocket&nbsp; <?php if(function_exists('get_scc_pocket')) { echo scc_get_share_pocket( array( post_id => 'home' ) );}?></a></li>

<!--RSSボタン-->
<li class="rss">
<a href="<?php echo home_url(); ?>/?feed=rss2"><i class="fa fa-rss"></i>RSS</a></li>

<!--feedlyボタン-->
<li class="feedly">
<a href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2F【●ドメイン名（例：shufulife.com)●】%2Ffeed%2F"  target="blank"><i class="fa fa-rss"></i>feedly&nbsp; <?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a></li>    

</ul>  
</div>
  <?php } ?>
</div>

この手順でカスタマイズした結果、↓の通り、SNSへのシェアボタンがとてもすっきり綺麗に表示されるようになった。同じように困っている方がいたら、ぜひ導入をしてみてほしい。

【STINGER5】WordPressのソーシャルボタンカスタマイズ用コードの導入方法ーコピペで簡単、手間いらずー

事前準備

参考サイト紹介

子テーマに【style.css】以外のファイルを準備

自作SNSボタン設置手順

【style.css】にソースコードを記述

次に、【sns.php】にソースコードを記述

最後に、【sns-top.php】に以下のソースコードを記述

あわせて読みたい

スポンサードリンク

Instagram

Twitter でフォロー

【STINGER5】WordPressのソーシャルボタンカスタマイズ用コードの導入方法ーコピペで簡単、手間いらずー

事前準備

参考サイト紹介

子テーマに【style.css】以外のファイルを準備

自作SNSボタン設置手順

【style.css】にソースコードを記述

次に、【sns.php】にソースコードを記述

最後に、【sns-top.php】に以下のソースコードを記述

あわせて読みたい

【やらかしたっっ！】Appleの新製品発表会 世界開発者会議（WWDC）の開催日程が判明！－情報源は誰もが知っている有名な“Sさん”？！－

新型MacBookを買ったので、「開封の儀」を執り行ってみましたよ！ーそれでも薄くて軽いは正義だと思えたー

【Minecraft】steveのままはアレだったのでスキンを変える方法を試してみたー星のカービィのスキンを見つけたよー

スポンサードリンク

Instagram

Twitter でフォロー

【やらかしたっっ！】Appleの新製品発表会　世界開発者会議（WWDC）の開催日程が判明！－情報源は誰もが知っている有名な“Sさん”？！－