ネットニュースストリート

様々な話題を取り扱うネット情報総合サイト

pc

stinger plus stinger8

STINGER PLUS+及び8のSNSボタンのカスタマイズ方法

投稿日:2016年11月11日 更新日:

※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」ボタンの追加を行いました。
まず、削除方法から解説していきます。
説明00

STINGER PLUS+のSNSボタン削除方法

↓WordPress管理画面の「外観」から「テーマの編集」画面へ移動します。
説明01

↓編集するのはSTINGERPLUSテーマの「sns-top.php」「sns.php」の2つです。
「sns-top.php」はサイトのトップページのSNSボタンの編集。「sns.php」は個別ページのSNSボタン編集になりますので、それぞれで同じ作業を行う必要があります
説明02

 

それではまず、「sns-top.php」から見ていきましょう。
下記のコードがそれぞれのSNSボタン表示のコードになっていますので、削除したいボタンのコードを消してしまいます。今後復活させることがあるかもしれませんから、別の場所にコピペして保存しておくとよいでしょう。
今回は4つのボタンを削除します。同じことを「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&lt;?php echo $plug; ?&gt;">Feedly</span>
<!--?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()=='0')?'':'&lt;span class="snscount"&gt;'.scc_get_follow_feedly().'&lt;/span&gt;'; ?--></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関連の記事をまとめました。↓>

STINGER8使い方まとめ
当ブログでのSTINGER8(スティンガーエイト)の使い方の記事をまとめてみました。(途中まではSTINGER PLUS+ですが、STINGER8にも対応させています。)基本的に初心者向けの使い方にな

この記事が気に入ったら
いいね!しよう

-stinger plus, stinger8

Copyright© ネットニュースストリート , 2018 All Rights Reserved.