Social Share Buttons by Supsysticをカスタマイズする

とりあえず何を書こうかなと思いましたが、このブログを作成した時のソーシャルボタンのプラグインに はてなブックマーク を追加してみたので、その手順を書いてみようと思います 🙂

Social Share Buttons by Supsysticプラグイン

本Blogもソーシャルボタンを表示させたいと思っていました。
やっぱりやるならフラットなデザインを採用したかったのですがテーマに手を入れるんじゃなくてプラグインが無いか探してみたところ Social Share Buttons by Supsystic を見つけました。

上記のプラグインは見た目やアクション設定が気に入ったので即採用!!
ただし、海外の開発者が開発しているプラグインなので日本のはてなブックマークなどは標準でありません…
そこで、このプラグインにはてなブックマークを追加してみることにしてみました。
ここで変更する範囲は無料部分の Flat のみです。

ソーシャルボタン追加手

プラグインのインストール手順は割愛します。
ここでは、既にプラグインがインストールされている前提で話を進めます。

DBのテーブルに情報を追加

(1) データベースにはてなブックマークの情報を追加します。

ここでのwordpressがインストールされているDBは wordpress です。

プラグインのスタイルシート修正

(1) Network.phpgetIcon 関数に fa-hatena のcaseを追加します。

修正対象ファイル
$wordpress_install_dir/wp-content/plugins/social-share-buttons-by-supsystic/src/SocialSharing/Projects/Builder/Network.php

(2) flat.css の最終行に以下を追加します。

修正対象ファイル
$wordpress_install_dir/wp-content/plugins/social-share-buttons-by-supsystic/src/SocialSharing/Projects/assets/css/button/flat.css

動作確認

(1) hatena が表示されて選択できることを確認します。

これで追加できました 🙂
同じ手順で他のボタンも追加できると思います。

Leave a Reply

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)