YouTubeチャンネル「AndoTV」の公式Blogです。

AndoTV Officialブログ

STINGER5 Web

【STINGER5】子テーマ内に作ったファイルとSNSボタン変更

投稿日:

stinger5

Blogテーマは一貫してSTINGERを使っているAndoTV@andohiroyukiTV)です。

1ヶ月ほど前にBlogのテーマを「STINGER5」に変更しました!
Blogテーマを「STINGER5」に変更、初めての『子テーマ』作成! 

その後、色々といじっていたのですが、なかなかBlogでまとめてカスタマイズ内容を記事に出来ていませんでした。。。
そこで、今回は「STINGER5」で行った変更点を備忘録的に書いていこうと思います。

スポンサーリンク

今まで行ったカスタマイズはこちら

  • 子テーマ作成
  • 子テーマ内に必要ファイルをコピー
  • SNSボタン変更
  • Googleアナリティクスを導入
  • 自分のアクセスをカウントをしないようにする
  • Adsense位置の変更
  • 人気記事ランキングをサイドバーに導入
  • サイドバーの並び順変更
  • トップページのサイドバー広告のカスタマイズ
  • 各記事のサイドバー広告のカスタマイズ
  • 最新記事の説明文を除き、更新日を入れる

まとめてみると、意外に沢山のカスタマイズをしていることに気が付きました。
ほとんどのカスタマイズは、Google先生に頼って、先人たちの知恵を拝借しています!

子テーマ内に作ったファイルはこちら!

前回のBlogでは、子テーマを作成するところまでを書かせて頂きました。

次は、子テーマ内にカスタマイズしたいファイルをコピーすることです。
ロリポップでは、コピーしたいファイルを指定して、子テーマ内にコピーするだけで簡単にコピーが完了します!

AndoTVは、まず始めにSNSボタンを変更したかったので、『sns-top.php』『sns.php』をコピーしました。
それと同時に『style.css』をコピーしました。

その次にヘッダーにGoogleAnalyticsのコードを入れたかったので、『header.php』をコピーしました。
さらに『sidebar.php』『newpost.php』をコピーしました。

変更点を見つけては、関連ファイルを子テーマ内にコピーするという形ですすめています。
『functions.php』は未だに怖くて、コピーできていません。。。)

SNSボタンを変更!

STINGER5では、トップページと各記事のSNSボタンを分けて、編集することが出来ます。
それぞれのページでは以下の様にSNSボタンに変更を加えました。

・トップページでは、Pocketボタンの追加とはてなブックマークのデザイン変更
・単一記事のページでは、Google+ボタンの削除とPocketボタンの追加とはてなブックマークのデザイン変更

トップページにPocketボタンの追加、はてなブックマークのデザイン変更

デフォルトの、『sns-top.php』は以下の通りです。

<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 echo home_url(); ?>" data-text="<?php bloginfo( 'name' ); ?>">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 echo home_url(); ?>&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 echo home_url(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-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 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 echo home_url(); ?>" data-text="<?php bloginfo( 'name' ); ?>">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 echo home_url(); ?>&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 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>
      <li> <a href="http://b.hatena.ne.jp/entry/<?php echo home_url(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-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>
    </ul>
  </div>

Google+のコードの後にPocketのコードを挿入しました!
そして、はてなブックマークは、『vertical』の部分を『vertical-balloon』に変更しただけです。

変更後のコードをコピーして、 子テーマ内の『sns-top.php』に貼り付けていただければ、以下の様なボタンの並びになります。
SNS-TOPスマホだとこんな感じです。
SNS-TOPスマホ

はてなブックマークの前にPocketを入れたのは、iPhone5や5sの画面の横幅だとSNSボタンのレイアウトが崩れてしまうからです。

単一記事のGoogle+ボタンの削除とPocketボタンの追加、はてなブックマークのデザイン変更

続いて、単一記事のSNSボタンを変更しました。
デフォルトの、『sns.php』は以下の通りです。

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

ここからGoogle+のコード

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

を削除します。

そして、先程と同様にGoogle+のコードの下に

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

を記入すれば終わりです。
すると、単一記事の最後はこのようSNSのボタンの並びになります。
今回はスマホも同様の並びになります。
SNS-Single

いいね!ボタンは2015年5月以降動かなくなる。。。

2014年以前に設置したいいね!ボタンは2015年5月以降動かなくなると、こちらの記事で知りました。

いいね!ボタンは新しいコードに書き換えないと2015年5月以降動かなくなります(公式情報)

STINGERのいいね!ボタンはiframeを使っているので、この記事の使用とは少し違うようです。
きっとSTINGERの生みの親ENJIさんが対策を考えてくれると思っているので、使えるうちはいいね!ボタンは放置しようと思います。(笑)

今回のまとめ

SNSボタンなどはテーマがバージョンアップする度に変更するのは結構面倒なので、子テーマで設定をしておくと便利ですね!
ただ、SNSのボタンのAPIなどが変更になる事があるので、たまにはコードを見直すことが必要ですね!

AndoTVはコードとか、全く分からなかったのですが、少し勉強を始めました。
コードが少しわかるとカスタマイズの作業がかなりはかどるそうです。
PHPを学ぶ前に『HTMLとCSSを学ばないといけない』ということで、こちらの本を勧められました。

Web初心者でも分かる内容になっているこちらの本、オススメです!

LINE@はじめました!
登録はこちらから。
友だち追加数

-STINGER5, Web

Copyright© AndoTV Officialブログ , 2021 All Rights Reserved.