2014.01.25

WordPress

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

2014/1/25 2020/11/19 約 19 分で読めます

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

僕とStinger3-カスタマイズ箇所と参考サイト様-

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

o3-web.com

2020-11-19 04:38

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

関連記事【WordPress】気になる無料テーマたち

サイトのSNSカスマイズ箇所
まとめ

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

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

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

http://stinger3.com/post-533/

stinger3.com

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

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

Pocket for Publishers: Pocket Button

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

getpocket.com

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

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

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

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

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

パソコン・タブレット→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を参照すると書いています。

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

http://www.nxworld.net/wordpress/wp-is-mobile.html

www.nxworld.net

【WordPress】wp_is_mobile関数のおかげでとっても簡単になったスマホ対策条件分岐

PCとスマホで表示内容を分けられる「wp_is_mobile関数」についての実装方法です。ただしiPadはiPhoneと同様の扱いなのでPCと同じ表示にするなら別の方法を使う必要があります。

webtrace-cuisine.com

はてブの表示を変更する

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を利用しています。
参考にしまくっている、りゅんたさんの記事で方法が紹介されています。

[R]気づいてますか？あなたのブログのレイアウト崩れてますよ(￢ω￢;A)

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

ryun-webnote.com

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

How To Enable HTML5 In Chrome | Robots.net

Learn how to enable HTML5 in Chrome and optimize your browsing experience with these simple steps and helpful browser extensions. Discover the power of HTML5 to...

robots.net