SNSのシェア獲得に威力を発揮するという噂のプラグインSNS Count CacheをAFFINGERのSNSボタン表示を変更してみました。
検索して上位表示から順に試してみましたが、どれもエラーばっかり...
まともに表示されたソースコードがありましたので、それを少々改造してSNSボタンの表示を変更しました。
ご参考にどうぞ。
▼ありがとう!参考にしたサイト
http://shufulife.com/8type-snsbutton/
前準備
先に、SNS Count Cacheをインストールして有効化しておいてください。
ヘッダーのソースを消した人は、追加しておきましょう。
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
Twitterボタンを表示させる場合は、Twitterのアドレスが必要なので、アカウントを取得しておいてください。
ファンクションの追加
WordPressの管理画面で[外観]→[テーマの編集]の順にクリック。
右メニュー[テーマのための関数 (functions.php)]をクリックして編集画面を表示させます。
下記ソースを追加します。
//sns LINEボタンスマホ表示分岐 function is_mobile(){ $useragents = array( 'iPhone', // iPhone 'iPod', // iPod touch 'Android.*Mobile', // 1.5+ Android *** Only mobile 'Windows.*Phone', // *** Windows Phone 'dream', // Pre 1.5 Android 'CUPCAKE', // 1.5+ Android 'blackberry9500', // Storm 'blackberry9530', // Storm 'blackberry9520', // Storm v2 'blackberry9550', // Storm v2 'blackberry9800', // Torch 'webOS', // Palm Pre Experimental 'incognito', // Other iPhone browser 'webmate' // Other iPhone browser ); $pattern = '/'.implode('|', $useragents).'/i'; return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']); }
最後尾「}」と記述されている上に、改行してコピペするとよいでしょう。
ソース追加後に[ファイルを更新]をクリックして保存します。
CSSの編集
ソースコードの編集は、スマホ部分の変更とPC部分の追加の2箇所です。
※編集位置を間違えると正常に表示されませんのでご注意ください。
テーマの編集の右メニュー[スタイルシート(style.php)]をクリックしての編集画面を表示させます。
SNS部分の変更
下記のソースを全選択して、変更後のソースコードをコピペします。
/*-------------------------------- 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; }
↓変更後
/*-------------------------------- 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; }
そっくりそのまま変更してください。
PC部分のソース追加
下記のソースより下に、追加するソースをコピペします。
/*media Queries PCサイズ ----------------------------------------------------*/ @media only screen and (min-width: 781px) { nav { background: #f3f3f3; color: #fff; padding-top: 5px; padding-right: 15px; padding-bottom: 5px; padding-left: 15px; border-radius: 5px; background: linear-gradient(#fff, #f3f3f3); border: solid 1px #ccc; margin-bottom: 10px; }
↓追加するソース
/*-------------------------------------- 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; }
「/*media Queries PCサイズ」の最後尾「/*-- ここまで --*/」と記述されている上に、改行してコピペするとよいでしょう。
ソース追加後に[ファイルを更新]をクリックして保存します。
表示ソースの変更
sns.php(投稿ページ)の表示ファイル変更
sns.phpは、投稿ページに表示されるSNSボタン用のファイルです。
テーマの編集の右メニュー[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 <?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 <?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+ <?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>はてブ <?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 <?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 <?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 <?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 <?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+ <?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>はてブ <?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 <?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 <?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a></li> </ul> </div> <?php } ?> </div>
2箇所ある「<!--ツイートボタン-->」の「●ツイッターアカウント名●」を、あなたのTwitterアカウントの「@」以降に置き換えます。※「@」は不要。
2箇所ある「<--feedlyボタン-->」の「●ドメイン名●」を、あなたのサイトのドメインに置き換えます。※「 http://」や、末尾の「/」は不要。
「<h4>ご購読ありがとうございます</h4>」の「ご購読ありがとうございます」は、SNSボタン上に表示されるタイトルです。お好みで編集しても問題ありません。
編集後に[ファイルを更新]をクリックして保存します。
sns-top.php(トップページ)の表示ファイル編集
sns-top.phpは、トップページに表示されるSNSボタン用のファイルです。
テーマの編集の右メニュー[sns-top.php]をクリック。
sns-top.phpのソースを全選択して、下記のソースをコピペします。
※sns.phpのソースと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 <?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 <?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+ <?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>はてブ <?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 <?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●ドメイン名●%2Ffeed%2F" target="blank"><i class="fa fa-rss"></i>feedly <?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 <?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 <?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+ <?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>はてブ <?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 <?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●ドメイン名●%2Ffeed%2F" target="blank"><i class="fa fa-rss"></i>feedly <?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.php同様の編集をしてください。
編集が終了したら[ファイルの降臨]をクリックして保存します。
以上で、SNSのボタン変更は終了です。
おつかれさまでした。