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

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

僕とStinger3-カスタマイズ箇所と参考サイト様-
Stinger3カスタマズ時にお世話なったサイト様と僕のカスタマイズ箇所をご紹介。専門の知識があまりなくてもカスタマイズが可能です。

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

スポンサーリンク

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

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

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

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

Pocketの追加

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

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

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

sns1

こんな風に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のアイコンは公式から引っ張ってきています。

When you find something you want to view later, put it in Pocket.

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

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

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

表示するアイコンを変える

お世話になっているりんろぐ。様でははてブのかわりにPocketを表示されています。
表示方法が紹介されているので参考に!

Stinger3に標準装備されている固定&追尾SNSボックスのカスタマイズ方法やPocketボタンの設置方法をご紹介します!

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

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

パソコン・タブレット→Twitter・facebook・Google+・はてブ・Pocket
スマホ→Twitter・facebook・Google+・はてブ

こんな感じです。

方法としては、パソコン・タブレットの場合は「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を参照すると書いています。

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

wp_is_mobileとはWordPressの3.4から実装された関数で、PC用とiPhoneやAndroidといったスマートフォン用とでコンテンツを切り替える際に便利な条件分岐タグです。今まで実際
PC とスマホで表示内容を分けられる「wp_is_mobile関数」についての実装方法です。iPadも含んじゃうのでiPadを外すなら別の方法を使う必要があります。

はてブの表示を変更する

hatebu

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

変更前

data-hatena-bookmark-layout="vertical"

変更後

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

これで変更が可能です。

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

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

sns2

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

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

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

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

変更後(single.phpの30行目の上に追加)

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

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

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

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

りゅんた(@RyunNote)です´ω`)ノ 前から僕のブログのある個所がレイアウト崩れていたのをご存じでしょ…

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

スマートフォンサイトを制作する際に、iPhoneやAndroid両方の機種での検証や、もう発売されていないようなOSのバージョンの対応も必要になる機会があるかもしれません。 本来ならば一通りの機種を用意して実機で検証できる環境が必要ですが、個人での制作や、ちょっとしたサイトのスマートフォンサイトの対応の場合もう少し手軽...

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

まとめ

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

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

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

【Stinger3カスタマイズ】SNS関連の変更箇所と変更方法
この記事をお届けした
O3 WEBの最新ニュース情報を、
いいねしてチェックしよう!
スポンサーリンク

コメント

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