※2016年11月15日にSTINGERの新テーマ「STINGER8」が配布されたのに伴い、「STINGER PLUS+」の配布は終了してしまいました。それに合わせて当サイトでも既存記事内容のSTINGER8(スティンガーエイト)への対応を進めております。本ページは対応済みですのでSTINGER8をお使いの方も参考にされてください。
目次
STINGER8対応箇所(※2016/11/21追記)
当記事の内容はSTINGER8でも問題なく動作しました。当記事に関してはSTINGER PLUSと作業は同じですので、同作業をしていただければ大丈夫です。
SNSボタンの削除とFeedlyボタンの追加
今回はSTINGER PLUS+(スティンガープラス)のSNSボタン(ソーシャルボタン)のカスタマイズを行います。
当サイトの場合、「VA Social Buzz」プラグインを使っていバイラルメディア風のソーシャルボタンを設置しましたので、重複を避けるためにSTINGER PLUS+のデフォルトSNSボタンをいじることにしました。
具体的には「Facebook」「Twitter」「Google+1」「LINE」を削除して「Feedly」ボタンの追加を行いました。
まず、削除方法から解説していきます。
STINGER PLUS+のSNSボタン削除方法
↓WordPress管理画面の「外観」から「テーマの編集」画面へ移動します。
↓編集するのはSTINGERPLUSテーマの「sns-top.php」と「sns.php」の２つです。
「sns-top.php」はサイトのトップページのSNSボタンの編集。「sns.php」は個別ページのSNSボタン編集になりますので、それぞれで同じ作業を行う必要があります。
それではまず、「sns-top.php」から見ていきましょう。
下記のコードがそれぞれのSNSボタン表示のコードになっていますので、削除したいボタンのコードを消してしまいます。今後復活させることがあるかもしれませんから、別の場所にコピペして保存しておくとよいでしょう。
今回は４つのボタンを削除します。同じことを「sns.php」でも行ってください。
<!--ツイートボタン-->
<li class="twitter">
<a onclick="window.open('//twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&via=<?php echo $twitter_name ?>&tw_p=tweetbutton', '', 'width=500,height=450'); return false;"><i class="fa fa-twitter"></i><span class="snstext <?php echo $plug; ?>" >Twitter</span>
<?php
if(function_exists('get_scc_twitter')) {
if( scc_get_share_twitter( array( 'post_id' => 'home' ) ) !== 0){
echo '<span class="snscount">'.scc_get_share_twitter( array( 'post_id' => 'home' ) ).'</span>';
}
}?></a>
</li>
<!--Facebookボタン-->
<li class="facebook">
<a target="_blank" href="//www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>"><i class="fa fa-facebook"></i><span class="snstext <?php echo $plug; ?>" >Facebook</span>
<?php
if(function_exists('get_scc_facebook')) {
if( scc_get_share_facebook( array( 'post_id' => 'home' ) ) !== 0){
echo '<span class="snscount">'.scc_get_share_facebook( array( 'post_id' => 'home' ) ).'</span>';
}
}?></a>
</li>
<!--Google+1ボタン-->
<li class="googleplus">
<a target="_blank" href="https://plus.google.com/share?url=<?php echo $url_encode;?>" ><i class="fa fa-google-plus"></i><span class="snstext <?php echo $plug; ?>" >Google+</span>
<?php
if(function_exists('get_scc_gplus')) {
if( scc_get_share_gplus( array( 'post_id' => 'home' ) ) !== 0){
echo '<span class="snscount">'.scc_get_share_gplus( array( 'post_id' => 'home' ) ).'</span>';
}
}?></a>
</li>
<!--ポケットボタン-->
<li class="pocket">
<a onclick="window.open('//getpocket.com/edit?url=<?php echo $url_encode;?>&title=<?php echo $title_encode;?>', '', 'width=500,height=350'); return false;" ><i class="fa fa-get-pocket"></i><span class="snstext <?php echo $plug; ?>" >Pocket</span>
<?php
if(function_exists('get_scc_pocket')) {
if( scc_get_share_pocket( array( 'post_id' => 'home' ) ) !== 0){
echo '<span class="snscount">'.scc_get_share_pocket( array( 'post_id' => 'home' ) ).'</span>';
}
}?></a></li>
<!--はてブボタン-->
<li class="hatebu">
<a href="//b.hatena.ne.jp/entry/<?php home_url(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple" title="<?php bloginfo('name'); ?>"><span style="font-weight:bold" class="fa-hatena">B!</span><span class="snstext <?php echo $plug; ?>" >はてブ</span>
<?php if(function_exists('get_scc_hatebu')) {
if( scc_get_share_hatebu( array( 'post_id' => 'home' ) ) !== 0){
echo '<span class="snscount">'.scc_get_share_hatebu( array( 'post_id' => 'home' ) ).'</span>';
}
}?></a><script type="text/javascript" src="//b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</li>
<!--LINEボタン-->
<li class="line">
<a target="_blank" href="//line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>"><i class="fa fa-comment" aria-hidden="true"></i><span class="snstext" >LINE</span></a>
</li>
SNSボタンの削除は以上で完了です。
STINGER PLUS+にFeedlyボタンを追加する
それでは「Feedly」を追加しましょう。
「Feedly」は「RSSリーダー」の中で現在最もメジャーになっていますので、導入しておきましょう。
先ほど削除したコードの箇所に下記のコードを貼り付けます。
〇〇〇〇の部分はご自身のサイトのドメインを入力してください。
<!--Feedlyボタン-->
<ul>
<li class="feedly"><a href="http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2F〇〇〇〇%2Ffeed%2F " target="blank"><span class="snstext<?php echo $plug; ?>">Feedly</span>
<!--?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()=='0')?'':'<span class="snscount">'.scc_get_follow_feedly().'</span>'; ?--></a></li>
</ul>
次にFeedlyロゴの画像を用意します。
私はこちらのサイト様のを使用しました。STINGER PLUS+カスタマイズが豊富に載っているサイトです。ありがとうございます。
＞Kanamii
ロゴをダウンロードして「メディア」→「新規追加」からアップロードしてください。
そしてスタイルシートに下記のコードを貼り付けます。
/*feedly*/
.sns .feedly a {
background-color:#87c040;
background-image:url(“Feedlyロゴの画像URLを貼り付けてください");
background-repeat:no-repeat;
background-position:12px 9px;
}
.sns .feedly a:hover {
background-color:#6ea727;
}
.sns .feedly .snstext {
padding-left:22px;
}
これでFeedlyボタンが追加されました。
※もしスタイルシートをいじっても変化がない場合はキャッシュが関係している可能性があります。ブラウザのキャッシュを削除したり、キャッシュ系プラグインのキャッシュを削除するなどして確認してください。
もし、各SNSアイコンフォント横の縦線を非表示にしたい場合は、先ほどの「Kanamii」のサイトに方法が載っていますのでご確認ください。
さらに、シェアの数を表示させたい場合は「SNS Count Cache」プラグインを導入してください。
やり方はこちらです。
＞「SNS Count Cache」のSTINGER PLUS+及び8への導入方法
以上でカスタマイズは完了です。お疲れ様でした。
＜STINGER関連の記事をまとめました。↓＞
