とりあえず何を書こうかなと思いましたが、このブログを作成した時のソーシャルボタンのプラグインに はてなブックマーク を追加してみたので、その手順を書いてみようと思います 🙂
Contents
本Blogもソーシャルボタンを表示させたいと思っていました。
やっぱりやるならフラットなデザインを採用したかったのですがテーマに手を入れるんじゃなくてプラグインが無いか探してみたところ Social Share Buttons by Supsystic を見つけました。
上記のプラグインは見た目やアクション設定が気に入ったので即採用！！
ただし、海外の開発者が開発しているプラグインなので日本のはてなブックマークなどは標準でありません…
そこで、このプラグインにはてなブックマークを追加してみることにしてみました。
ここで変更する範囲は無料部分の Flat のみです。
ソーシャルボタン追加手
プラグインのインストール手順は割愛します。
ここでは、既にプラグインがインストールされている前提で話を進めます。
DBのテーブルに情報を追加
(1) データベースにはてなブックマークの情報を追加します。
ここでのwordpressがインストールされているDBは wordpress です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
[root@localhost ~]# mysql -u root Welcome to the MariaDB monitor. Commands end with ; or \g. Your MariaDB connection id is 37 Server version: 5.5.47-MariaDB MariaDB Server Copyright (c) 2000, 2015, Oracle, MariaDB Corporation Ab and others. Type 'help;' or '\h' for help. Type '\c' to clear the current input statement. MariaDB [(none)]> use wordpress; Reading table information for completion of table and column names You can turn off this feature to get a quicker startup with -A Database changed MariaDB [wordpress]> insert into wp_supsystic_ss_networks (id, name, url, class, brand_primary, brand_secondary, total_shares) values (20, 'hatena', 'http://b.hatena.ne.jp/add?mode=confirm&url={url}', 'hatena', '#0085ff', '#ffffff', 0) ON DUPLICATE KEY UPDATE name = VALUES(name), url = VALUES(url), class = VALUES(class), brand_primary = VALUES(brand_primary), brand_secondary = VALUES(brand_secondary), total_shares = VALUES(total_shares); Query OK, 1 row affected (0.00 sec) MariaDB [wordpress]> quit Bye |
プラグインのスタイルシート修正
(1) Network.php の getIcon 関数に fa-hatena のcaseを追加します。
| 修正対象ファイル |
|---|
| $wordpress_install_dir/wp-content/plugins/social-share-buttons-by-supsystic/src/SocialSharing/Projects/Builder/Network.php |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
(snip) /** * Returns network icon. * * @return string */ public function getIcon() { switch ($this->class) { case 'facebook': return 'fa-facebook'; (snip) case 'tumblr': return 'fa-tumblr'; case 'hatena': return 'fa-hatena'; } (snip) |
(2) flat.css の最終行に以下を追加します。
| 修正対象ファイル |
|---|
| $wordpress_install_dir/wp-content/plugins/social-share-buttons-by-supsystic/src/SocialSharing/Projects/assets/css/button/flat.css |
|
1 2 3 4 5 6 7 8 9 10 11 |
(snip) .supsystic-social-sharing .sharer-flat.hatena { background-color: #0085ff; } .fa-hatena:before { content: "B!"; font-family: Verdana; font-weight: bold } |
動作確認
(1) hatena が表示されて選択できることを確認します。
これで追加できました 🙂
同じ手順で他のボタンも追加できると思います。
