WordPressテーマ「STINGER5」のTwitterカウントを表示させるカスタマイズ

WordPress WordPress

2015年11月20日にツイート数をカウントするTwitter APIが終了しました。
なので、当記事の内容ではツイート数は表示できませんので、ご了承ください。
Hard decisions for a sustainable platform | Twitter Blogs

WordPressテーマ「STINGER5」には、いつも大変お世話になっております。

先日、新バージョン「ver20151005」がリリースされていましたので、アップデートしてみました。

今回のアップデート内容は、「Twitterのカウント表示なし(API終了の為)」とのことです。

で、こんな感じに変わったんですが、これはあんまり見栄えが良くない気が。。

STINGER5 Twitterボタン

なので、少し調べてカスタマイズしてみました。

スポンサーリンク

Twitterボタンの仕様

WebサイトやブログにTwitterのツイートボタンやフォローボタンを設置する場合は、Twitter公式サイト Twitterボタンでソースコードを生成し、それを埋め込みます。

確かにこちらでは、ツイート数などのデータカウントを上部に表示させる設定項目はなくなったようです。

ですが、Twitter Developers Tweet Buttonには「data-count」の値を「vertical」にすることで、データカウントを上部に表示できるように書かれています。

また、「data-counturl」にそのページのURLを指定すれば、ツイート数を集計できるようです。

これらの設定をすれば思った通りに表示できるのでは?と思い、設定してみました。

STINGER5のツイートボタンをカスタマイズ

テーマのカスタマイズを行う場合は、子テーマを利用した方がいいですよ。

子テーマの作成方法は、WordPressテーマ「STINGER5」で学ぶ子テーマの作成方法を参考にしてください。

今回のアップデートで変更が加えられていた「sns.php」、「sns-top.php」を修正しました。

修正箇所は、以下の3点です。

  • 「data-count」の値を「vertical」へ変更
  • 「data-size」を削除(他のソーシャルボタンと大きさを合わせるため)
  • 「data-counturl」を追加し、値はトップページ、各ページURLにする
<li><a href="https://twitter.com/share" class="twitter-share-button" data-via="" data-size="large" data-count="none">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</li>
<li><a href="https://twitter.com/share" class="twitter-share-button" data-via="" data-count="vertical" data-counturl="<?php the_permalink(); ?>">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</li>
<li><a href="https://twitter.com/share" class="twitter-share-button" data-via="" data-size="large" data-count="none">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</li>
<li><a href="https://twitter.com/share" class="twitter-share-button" data-via="" data-count="vertical" data-counturl="<?php echo home_url(); ?>">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</li>

これで、以前バージョンの見栄えと同じようにできました。

STINGER5 Twitterボタン

この状態でしばらく様子を見たいと思います。

以上です。

スポンサーリンク
スポンサーリンク
WordPress
えふめんをフォローする
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
俺の開発研究所

コメント

タイトルとURLをコピーしました