共働きで消耗した家族が生き方を見直してます。

もう、共働きやめます。

WordPress

【STINGER5】ファンを増やすSNSボタンを追加しました!

更新日:

どうも、働かない夫です。

ブログをやる上で欠かせないのが、SNSボタン。こちらがある事によって、記事を読むだけで終わりではなくSNSを通してシェアーしていただける可能性がグッと上がります。

STINGER5には主要となるSNSのTwitter、Facebook、はてなブックマークがついています。

しかし、Google+、Pocket、feedlyを使うユーザーも多いものです。そこで、ある程度記事数が増えてきたので、記事を拡散、ファンを獲得しやすいSNSボタンを設置しました。

今回はshufulifeの【WordPress】8種類の自作SNSボタンのコードをご紹介!カウントも表示するよを参考にカスタマイズしました。(ほぼ、コピペ)

それではカスタマイズしていきましょう。

今回の目標

STINGER5のデフォルト設定

スクリーンショット_2015-02-12_3_56_36

 

今回のカスタマイズでの完成系

スクリーンショット 2015-02-12 11.40.37

 

洗礼されていますよね!ボタンを押したくなっちゃいます!

カスタマイズ前の準備

【SNS Count Cache】を導入

今回のカスタマイズはSNSのシェアカウント数を取得し表示してくれます。

プラグイン【SNS Count Cache】を新規追加&有効化しておきましょう。特に初期設定はいりませんでしたので、まずはカスタマイズを優先させましょう。

アイコンフォントの導入

STINGER5はデフォルトの状態からアイコンフォントが入っているので問題ありません。

STINGER3の方でやられる方はこちらをご覧ください。
ブログの第一印象は大事!アイコン風Webフォント。初心者向けの設定方法を紹介

SNSボタンを設置しよう!

CSSコード 

  • モバイルで横2列、縦4列表示
  • PCで横4列、縦2列表示(カスタマイズ完成系を確認)

と並ぶようになっています。

【外観】>【テーマの編集】>【style.css】を開きます。

【SNS】の部分を探して以下のコードに書き換えます。

/*--------------------------------
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;
}




/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (max-width: 780px) {

}
/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (min-width: 380px) {

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

/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 780px) {


/*--------------------------------------
  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;
}

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

 

PHPコード 

【外観】>【テーマの編集】>【sns.php】を開きます。

sns.phpファイルを全て以下のコードに書き換えます。

 

<?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【●ドメイン名●】%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【●ドメイン名●】%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のアカウント名を入力。
    私の場合は”WorkerNo”
  • 【●ドメイン名●】はhttp://以降の部分を入力。
    私の場合は”www.noclean-nowork.com”

PC用とmobile用の合計4カ所あります。わたしは「?」という感じだったので忘れないようにしておきましょう。

ここまでを確認

スクリーンショット 2015-02-12 4.20.43

 

おっ?リスト表示が消えていないですね。

【・】を修正

もう一度、【外観】>【テーマの編集】>【style.css】を開き

media Queries PCサイズ
@media only screen and (min-width: 780px) の【.sns li】にdisplay: block; を追記しました。

コードは以下の形

 .sns li {
        display: block; 
	width:23%;
	margin:0 2% 3% 0;
}

 こちらで完成系の状態になりました。

まとめ

 STINGER5では【sns.php】は単一記事で使われているので本文の表示されますね。

良質な記事なら、TwitterでツッコミやFacebookで話題にしてもらえるかもしれないですね。

ある程度アクセスを稼げる土台が出来るまではやるつもりはありませんでしたが、やっぱりそろそろ必要ですよねー。

STINGER5をお使いの方で、カスタマイズする方は参考にどうぞ!

shufulifeのちゅんこさん!ありがとうございました!
もっと詳しく書いてあるページはこちら→【WordPress】8種類の自作SNSボタンのコードをご紹介!カウントも表示するよ

他にもカスタマイズしてます

コードの内容が知りたい場合はこちらもオススメ

  • この記事を書いた人
ハタオト

ハタオト

職業:専業主夫。サイト作って、静かに生活しています。このブログは好き勝手書いています。

-WordPress
-

Copyright© もう、共働きやめます。 , 2018 All Rights Reserved.