48  Pocket   はてブ

最近流行りのフラットデザインSNSシェアボタンをSimplicity1.4安定版へ入れてみた

少し前ですが、「Simplicity 1.4安定版」が公開されたのでアップデートしましたよっと。

今回も機能追加が盛りだくさんです。 1.3安定版から1.4安定版の変更点は、作者わいひらさんのまとめページをご覧ください。

Simplicity1.4安定版公開。1.3→1.4変更点まとめ

Simplicity1.4.0を安定版としました。 目立った不具合も、大体は修正できたと思うので、次1.5まで開発版として、バージョンアップして行こうと思います。 ということで、Simplicity1・・・

wp-simplicity.com

それと、テーマ更新ついでにSNSシェアボタンをフラットデザインのものに変えて記事下広告の上に持ってきてみました。

「ついでに」って書くと簡単にやったように聞こえますが、WordPress歴4ヶ月の初心者なもんで1日がかりの大作業となってしまいましたけど。

ということで、備忘も兼ねて手順とコードを載せます。

(動作保証はできませんが)ご参考にどうぞ。

追記(2015.2.12)
すいません。以下理由から掲載していた一部コードは削除させていただきました。

  • 掲載していたコードは「SNS Count Cache」バージョンアップ前のもの
  • Simplicityフォーラムで、掲載していたコードで表示が崩れた報告が挙がっていた(こちら
  • 参考元としてご紹介している「Shufulife」さまにご迷惑をお掛けしてしまう懸念もある

そもそもコピペさせていただいたコードを、css等に詳しくないくせに少しカスタマイズしたくらいで丸々掲載したのは軽率でした。
なお、「Shufulife」さまではSNS Count Cacheバージョンアップ対応後のコードが再掲されていることを申し添えさせていただきます。

スポンサーリンク

SimplicityへフラットデザインSNSシェアボタンの導入

フラットデザインのシェアボタンを自作・公開されている方はたくさんいらっしゃいますが、今回参考にさせて頂いたのは「Shufulife」ちゅんこさんの自作ボタン。

【WordPress】8種類の自作SNSボタンのコードをご紹介!カウントも表示するよ

最近よくお問い合わせをいただく当ブログに設置しているオリジナルのSNSボタン8種 … ・・・

shufulife.com

全コードを載せてくださってるので、テーマがSTINGER5なら丸々コピペでイケます。

ですがテーマがSimplicityの場合、そのままだと表示が少し崩れたり修正するPHPファイルが違ったりしますので注意してください。

あと、上記記事のボタンではパソコンの場合に各SNSページが小窓で開く仕様になってますが、コード削減と個人的好みの問題で一律(スマホでもパソコンでも) 新しいタブでひらくように変更しています。

前提

これから書く手順ですが、以下の前提があります。

  • プラグイン「SNS Count Cache」が導入済みであること
  • テーマはSimplicity 1.4安定版での手順
  • 子テーマを導入済みであることが前提
  • テーマ更新時はカスタマイズ内容の見直しが必要

今回のシェアボタンでは「SNS Count Cache」というプラグインでシェア数を取得しています。

これについては上記ちゅんこさんの記事でご説明されているので、そちらをご覧くださいね。

また、entry-body.phpに修正を入れるので、Simplicityのバージョンアップの度にentry-body.phpの内容見直しが必要になります。

更新頻度の早いテーマですから、この辺りは気をつける必要があります。

sns-buttons-flat-design.phpの作成

FTPソフト等で、子テーマのディレクトリ(/wp-content/themes/simplicity-child)に「sns-buttons-flat-design.php」というファイルを作成し、以下コードを貼り付けます。

<コードは削除しました>

上のコードの「●Twitterアカウント●」は自身のTwitterアカウント(@なし)を、「●ブログのドメイン名●」のところもご自身のブログドメイン(このブログだとhttp://hack-le-blog.com)に書き換える必要があるので忘れないでくださいね。

entry-body.phpの編集

続いて、親テーマのディレクトリ(/wp-content/themes/simplicity)から「entry-body.php」を子テーマへコピーします。

コピーしたentry-body.phpを開き以下のコード部分を、

下のコードに書き換えて保存します。

SimplicityはSNSシェアボタンの下にフォローボタンも表示できますが、今回追加するフラットデザインのシェアボタンとは合わないのでフォローボタンを取得するコードもまとめて削除しています。

あと、もしこのブログのように記事下広告の上に持って行きたい場合は、以下のようにsns-buttons-flat-designを取得するコードを記事下広告を取得しているコードの上に持っていってください。

style.cssへの追記

最後に、子テーマディレクトリ内の「style.css」へ以下コードを追記して保存します。

<コードは削除しました>

ちゅんこさんのコードそのままだとSimplicityでは表示がずれてしまい、それを調整するのに試行錯誤しました。

cssでイジったところは結果としてたった2行なんですが、なにぶん初心者なもので…。

ちなみに上のコード、修正箇所のコメントが入ったままになってますがお気になさらず(笑)

完成したボタンがこちら

そして出来たSNSボタンがこちらです。

▼パソコンでの表示

Customize_flat-SNS-button_1

▼スマホ(モバイル)での表示

Customize_flat-SNS-button_2

なお、この画像と掲載したコードはあくまで当記事執筆時点の状態です。

たぶん今後また色々いじります。勉強も兼ねて。

(追記)
この方法だと投稿ページのみに反映され、固定ページはSimplicity標準のSNSボタンが表示されます。
固定ページにも反映させる場合はentry-body.phpと同じ修正をpage.php側に行う必要がありますが、面倒になってきたのでそこは割り切りとしました。
タイトル記事下シェアボタンはSimplicity標準のものを使いたい、修正量はなるべく少なくしたい、って感じでやってたら若干ちぐはぐな形になってしまいました。
時間があるときにもっと良い方法がないか考えます。

最後に

参考にさせて頂いた(というかコピーさせて頂いた)ブログ「Shufulife」はWordPressカスタマイズ関連の記事が満載で、すごく勉強になります。

STINGERでのカスタマイズが中心ですが、少し手を加えたりすればSimplicityにも流用できそうなので今後も参考にさせていただこうと思います。

ありがとうございました、ちゅんこさん。

スポンサーリンク


更新情報をお届けしてます(`・ω・´)ゞ