STINGER5で記事タイトル下あたりにソーシャルボタンを入れる方法(プラグインなし)

アバター画像大谷大
公開日： 最終更新日：
STINGER5で記事タイトル下あたりにソーシャルボタンを入れる方法(プラグインなし)
関連キーワード
デザイン

STINGER5にはソーシャルボタンを設置するためのテンプレートファイルが2つ用意されています。

しかし、デフォルトでは記事末に入ってるだけなので記事上部に表示させたい人はsingle.phpをいじる必要があります。

今日は、ソーシャルボタンをプラグインを使わずに任意の場所に入れる方法をご紹介します。

ソーシャルボタンを任意の場所に入れる

STINGER5のsingle.phpを見ると下記の記述があります。

<?php get_template_part('sns'); //ソーシャルボタン読み込み ?>

上記のコードを丸ごとコピーし、入れたい箇所に貼りつけたら「sns」を「sns-top」と書き換えます。書き換えたものが下記のコードです。

<?php get_template_part('sns-top'); //ソーシャルボタン読み込み ?>

やることはたったこれだけ。記事の頭に入れたい人はthe_contentの上あたりに入れればおっけーです。

【追記】sns-top.phpというテンプレートファイルはhome.phpに表示させてるソーシャルボタンのファイルだったようです。(カスタマイズ初期に消しちゃってて気づきませんでした…。)

トップページからソーシャルボタンを消しちゃうか、別のテンプレートファイル(sns-header.phpなど)を作ってそちらを記事ヘッダー部分用に使うか、ご都合に合わせて使い分けてください。

中身を変更したい場合は

初期設定では

  • Twitter
  • Facebook
  • Google+
  • はてブ

の4個のボタンが設置されてます。

この中身を変更したい場合は、sns-top.phpを開いて編集するだけです。(ソース自体同じなので、記事末のボタンも変更したい方は同じ手順で変更出来ます)

ぱっと思い浮かぶもので必要そうなボタンはLINEとPocketかと思いますので、下記のサイトからソースを持ってきてください。

あとはソースをliで囲って、他のボタンと同じようにulの中に並べるだけでおっけー。

というのを考えるのがめんどくさい方のためにソースを置いておきます。STINGER5のsns-top.phpを改造して、はてブボタンをバルーン型に変更し、LINEとPocketボタンを追加したものです。

<div class="sns">
  <ul class="snsb clearfix">
    <li> <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script> 
    </li>
    <li>
      <iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;layout=box_count&amp;show_faces=false&amp;width=50&amp;action=like&amp;colorscheme=light&amp;height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:76px; height:62px;" allowTransparency="true"></iframe>
    </li>
    <li><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
      <g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone>
    </li>
    <li> <a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>｜<?php bloginfo('name'); ?>" data-hatena-bookmark-layout="vertical-balloon" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> 
    </li>
    <li>
      <script type="text/javascript" src="//media.line.me/js/line-button.js?v=20140411" ></script>
      <script type="text/javascript">
      new media_line_me.LineButton({"pc":false,"lang":"ja","type":"e"});
      </script>
    </li>
    <li>
      <a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a>
      <script type="text/javascript">!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>
</div>

最後に

プラグインを使わずに済ませたい方にはおすすめの方法です。

もちろんSTINGERじゃない方も同じような方法で実装可能ですので、お試しください。

キーワード
デザイン

その他のおすすめの記事