feedly購読者数付き横型フォローボタンの作り方|コピペで使えるWordPressカスタマイズ

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

feedly購読者数付きミニボタン

feedlyアイコンの右側に、購読者数が表示される吹き出しのついた、小さなフォローボタンを作ってみました。

小さなfeedlyフォローボタン

WordPressのタイトル下あたりに置くと収まりがよさそうな感じです。

これまで、feedlyボタンのvertical(縦型)のものはありました。

feedly縦型フォローボタン

ソースも公開しちゃいます!Feedly登録ボタンの購読者数カウンタを自作してみました

ただ、horizontal(横型)のものは見かけたことがなかったので作成してみました。

以下は、Wordpressで、その設定を行う方法です。

スポンサーリンク
レクタングル(大)広告

functions.phpの編集

まずは、親テーマでも子テーマでも、どちらでもいいのですがfunctions.phpに購読者数を取得する関数を追加します。

以下の関数をコピペすればOKです。

参考 ソースも公開しちゃいます!Feedly登録ボタンの購読者数カウンタを自作してみました

テンプレートファイルの編集

feedlyミニボタンを表示させたい箇所に、以下のように記入します。

個人的には、single.phpの投稿タイトル下あたりにちょうどいいと思います。

style.cssの編集

こちらも、親テーマ、子テーマどちらでも良いですがstyle.cssに以下のように追記します。

吹き出しのスタイルは、cssarrowpleaseで生成したものを使いました。ものすごく簡単です。

cssarrowplease

動作確認

設定を追えると、こんな感じで表示されます。吹き出しのボーダー色や、文字色はTwitterのものに合わせました。

横型feedlyフォローボタン

他の横型のSNSボタンと並べると次のように表示されます。

feedly購読者数付きボタンの見本

大きさなどは、好みに合わせてスタイルシートで調節してください。

まとめ

縦型feedlyフォローボタンという先人の知恵のおかげで思ったより、なんとか作成することができました。

1番の難関だった吹き出し作りもcssarrowpleaseが勝手に作ってくれたのでコピペするだけという手軽さでした。

「デフォルトのミニfeedlyボタンは吹き出しがなくて寂しい」「横型のfeedlyフォローボタンが欲しい」などという方は、よろしかったら使ってみてください。