【Stinger3カスタマイズ】SNS関連の変更箇所と変更方法

本日はこのサイトで使わせて頂いているWordPressテーマ「Stinger3」のカスタマイズ箇所のご紹介します。

今回はSNSを中心に書かせて頂きました。
ちなみに、このサイトではStinger3の「stinger3ver20131217」を使っています。
別バージョンでは確認をしていないのでご注意ください。

サイトのSNSカスマイズ箇所

追従するSNSボックスの削除

これは公式サイトで削除方法が書かれています。
僕は個人的に追従する機能が好きではないので削除しています。
好みだと思うので、好きなようにカスマイズしましょう。

ここでは、パソコンにのみ表示する方法も書かれています。
スマホだけ削除したい方も参考にしてみてください！

Pocketの追加

最近利用者が増えているPocket。

このサービスは簡単に言うと「あとで読む」ことが出来るものです。
さらに言うとアプリに保存を行えばオフラインでも閲覧可能。
その利便性から利用者が増えているサービスです。

このサイトでも利用者増加という噂を聞いて、取り入れました。

こんな風にPCから見るとなっています。

Stinger3はデフォルトでは「Twitter・facebook・Google+・はてぶ」となっています。
これに無理やり追加した感じですね。

追加する方法は「sns.php」にPocketの表示を追記します。

変更前

<div id=“snsbox03“>
  <div class=“sns03“>
    <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:70px; 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“ 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>
    </ul>
  </div>
</div>

変更後

<div id=“snsbox03“>
  <div class=“sns03“>
    <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:70px; 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><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>
</div>

変更点は新しく作成した

<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>

Pocketのアイコンは公式から引っ張ってきています。

スマホ表示のズレをどうにかする

上記の方法で追加をするとスマホでアイコン表示がズレます。

理由は「Twitter・facebook・Google+・はてブ」でちょうど並ぶようにStinger3では調整されているからです。

パソコンとスマホで表示をわける

このサイトではパソコンとスマホで表示をわけています。

こんな感じです。

方法としては、パソコン・タブレットの場合は「sns.php」を表示。
スマホの場合は新設した「sns01.php」を表示することでわけています。

sns.php（デフォルトにPocketを追加したもの）

<div id=“snsbox03“>
  <div class=“sns03“>
    <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:70px; 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><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>
</div>

sns01.php（デフォルトのまま）

<div id=“snsbox03“>
  <div class=“sns03“>
    <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:70px; 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“ 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>
    </ul>
  </div>
</div>

新設したsns01.phpをテーマにアップロードしましょう。
次は表示の切り替えを行うために「single.php」を修正します。

変更前（single.php52～54行目）

<div class=“kizi02“>
  <?php get_template_part('sns');?>
</div>

変更後

<div class=“kizi02“>
<?php if (is_mobile()) :?>
  <?php get_template_part('sns01');?>
<?php else: ?>
  <?php get_template_part('sns');?>
<?php endif; ?>
  </div>

ここでは、スマホの場合はsns01.php、パソコン・タブレットの場合はsns.phpを参照すると書いています。

関数に関しては下記の参考サイト様で詳しく紹介されています。

はてブの表示を変更する

sns.phpの12行目のはてぶに関する記述の下記の部分を変更しています。

変更前

data-hatena-bookmark-layout=“vertical“

変更後

data-hatena-bookmark-layout=“vertical-balloon“

これで変更が可能です。

ただし、サイズが若干大きくなるのでスマホでの表示が乱れます。
そのため、スマホの場合は変更前のものを表示しています。

single.phpにSNS表示箇所を追加する

こんな感じで、記事の頭にSNSアイコンを並べています。

調べ物をしている時に僕は「いつ公開された記事か？」、「どれほど拡散されているか？」が結構気になるのでこのようなかたちにしています。

残念ながら僕のサイトでは表示が恥ずかしいレベルですが…

また、表示速度が遅くなると嫌なのでスマホでは非表示にしています。

変更後（single.phpの30行目の上に追加）

<?php if (!is_mobile()) :?>
<?php get_template_part('sns');?>
<?php endif; ?>
<h1 class=“entry-title“> ※ここが30行目

パソコンとタブレットでは表示させるよ的なことを書いています。
表示場所はタイトルの上にしました。

手元にスマホ・タブレットがない場合

僕はスマホを持っていないので変更時の確認にGoogle Chromeを利用しています。
参考にしまくっている、りゅんたさんの記事で方法が紹介されています。

Safariを利用されている方はこちら

参考にしてみてください！

まとめ

Stinger3はこちらで無料ダウンロード可能です。
興味のある方はぜひ、使用をしてみてください！

ちなみに、僕はphpやらcssやら基本的に素人です。
間違いやもっと効率の良い方法がありましたらご教授頂ければと思います。

それでは、素晴らしいStinger3カスタマイズ・ライフを！