WPlogs

WordPressを中心にWeb関連の情報発信。PHP、CakePHP、HTML5、SEOなど。 ※旧名称「SEO人」、旧URL「http://seo.net-luck.com/」

*

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

      2015/11/26

STINGER5

出典:http://wp-fun.com/

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にする

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

STINGER5 Twitterボタン

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

以上です。

 - STINGER5, Twitter