当サイトはStinger3テンプレートを使っていますが、いくつかカスタマイズも行っています。
Stinger3では、デフォルトで搭載されているソーシャルボタンは4つしかありません。
なので今回は、ソーシャルボタンを追加表示させる方法をご紹介していきますね。
Stinger3ではSNSボタンが4つしかない
Stinger3テンプレートでは、Twitterアイコン、Facebookアイコン、Google＋アイコン、はてなブックマークアイコンの4つしかありません。
シェアボタンは、ブログでもわりと重要なアイテムですので、主要SNSアイコンは是非追加させておきたいところです。
多くしたほうがカスタマイズ感も出ますからね^^
ですので、その他の主要SNSであるPocket・Evernote・feedlyを追加させたいと思います。
SNSボタンを追加しよう
まず、各ボタンのタグを取得していきます。
ここではあらかじめ用意したコードをコピペするだけで追加できるように紹介しますが、一応ボタン用タグの取得サイトも載せてお伝えします。
Pocket（ポケット）のタグを取得
まず、下記のサイトからコードを取得します。
⇒http://getpocket.com/publisher/button
もちろんコードタイプはStinger3に合わせます。
Evernote「Site Memory Clip」のタグを取得
Evernoteのクリップは下記コードをコピペして使ってください。
1 2 3 4 | <script src="http://static.evernote.com/noteit.js" type="text/javascript"> </script> <a href="#"> <img src="http://static.evernote.com/article-clipper-vert.png" alt="Clip to Evernote" /></a> |
もちろんEvernoteのボタンが不要なら表示させなくても大丈夫ですよ^^
feedlyボタンのタグを取得
feedlyは下記サイトからコードを取得します。
⇒http://www.feedly.com/factory.html
取得したいアイコンをクリックし、自身のブログURLを入力します。
このとき、URLの最後に「/feed/」を入力します。
僕の場合「https://seonet.x0.com/feedly/」となります。
上記コードをコピペして使います。
SNSボタンの表示
それでは上記コードを使って実際にSNSボタンを表示させます。
コードを貼付ける場所は、
ダッシュボードから「外観」⇒「テーマ編集」⇒「sns.php」より編集を行います。
貼付ける箇所は下記画像の通りです。
そして貼付けるコードは、下記コードをコピペして使ってください。
※feedlyで取得したコードはブログによって異なります。
下記のfeedlyのコード部分はご自身のコードを取得して入力してください。
僕のブログコードになっていますので変更をお願いします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!-- Pocket --> <ul> <li> <a class="pocket-btn" href="https://getpocket.com/save" data-lang="en" data-save-url="<?php get_permalink(); ?>" data-pocket-count="vertical" data-pocket-align="left">Pocket</a> <script type="text/javascript">// <![CDATA[ !function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js"); // ]]> </script> </li> </ul> <!-- Evernote --> <ul> <li><script src="http://static.evernote.com/noteit.js" type="text/javascript"> </script> <a href="#"> <img src="http://static.evernote.com/article-clipper-vert.png" alt="Clip to Evernote" /> </a> </li> <li> <a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fseonet.x0.com%2Ffeed%2F' target='blank'> <img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-flat-big_2x.png' alt='follow us in feedly' width='131' height='56'> </a> </li> </ul> |
最後に「ファイルを更新」をクリックすると完了となります。
下記画像のように、反映されていたらオッケーですね☆
ソーシャルボタンの追加コードは下記コードになります。
1 | <!--?php get_template_part('sns'); //ソーシャルボタン読み込み ?--> |
デフォルトでは「単一記事の投稿 (single.php)」にあると思います。
ただし、stinger3はアップデートを繰り返しているので現状どうなっているのかは把握できていません^^;
コードの勉強にもなると思うので、一応確かめてみてくださいね。
なければ上記コードを追加して表示させてください。
まとめ
stinger3テーマのSNSボタンを増やしたい方は是非導入してみてください。
ちなみに補足ですが、Stinger3に付属している追尾型ソーシャルボタンを削除する方法もご説明しているので、よろしければそちらもご覧下さい。
Sponsored Link
では！
