SNSアイコンをWordPressにプラグインで追加する

このブログ解説から少しして、SNS共有アイコンをPostの上下に追加してみました。（ウィジェットはJetPack使用）

使ったプラグイン

よくあるWordPress用のSNS共有アイコン追加を主とした専用プラグインは使っていません。（ウィジェットは除く）
じゃあなに使ったんだよ、というと、もう少し汎用的なプラグインです。
要するに、コード書いて作動させる順番から言うと、

1. PHP Code For Posts
2. Code Snippets
3. Header and Footer

です。いずれも人気プラグインですね。全てWordPressの公式プラグインディレクトリからインストールできます。

どうやって追加したか

 WordPress & Lifelog  11 shares 12 users 48 pockets

プラグインなしで WordPress サイトにソーシャルボタンを設置する方法

http://wp-kappa.com/social-button-in-wordpress/

ソーシャルボタンを作るの備忘録 各種ソーシャルボタンの作成手順をまとめました。いろんなところで解説されている内容とほとんど同じです。自分が忘れないようにするためと、ひとつのページにまとめておくと、あとで修正するときに便利だからメモの代わりに残してお...

 SYNCER  10 tweets 38 shares 129 users 777 pockets

SNSのシェアボタンの設置方法まとめ (サンプルコード付き)

https://syncer.jp/how-to-setting-share-button

ソーシャルシェアボタンの設置方法とカスタマイズ方法を初心者向けに説明。コピペで使えるサンプルコードなど。

を参考に、

 b.hatena.ne.jp  1 tweet 116 shares 3638 users 147 pockets

はてなブックマークボタンの作成・設置について - はてなブックマーク

http://b.hatena.ne.jp/guide/bbutton

 Twitter About  4 tweets 1083 shares 13 users 93 pockets

Twitterボタン | About

https://about.twitter.com/ja/resources/buttons#tweet

 開発者向けFacebook  1077 shares 1 user 375 pockets

シェアボタン - ソーシャルプラグイン - ドキュメンテー&#x...

https://developers.facebook.com/docs/plugins/share-button#configurator

The Share button lets people share links quickly and easily on their timeline, in groups, or to their friends via a Facebook Message.

 Google Developers  92 shares 8 users 132 pockets

Share  |  Google+ Platform for Web  |  Google Developers

https://developers.google.com/+/web/share/?hl=ja

 getpocket.com  1 share 7 users 394 pockets

Pocket for Publishers: Pocket Button

https://getpocket.com/publisher/button

When you find something you want to view later, put it in Pocket.

からボタンを取得し、それぞれのコードの適切なところを

<?php the_permalink(); ?>"

等に置き換えました。（こちらの方を参考にしました）
で、上のリンクでは書き換えるべき箇所が不明だったり、PHPの書き換えがいる感じでしたが、なるべくソースは触らずにいたかったのでプラグインを使用。
それが
1. PHP Code For Posts
2. Code Snippets
です。
何故二つかというと、

• 長いコードを書くにはPHP Code For Postsのほうがやりやすい
• PHP Code For Postsではスニペットの名前が分かりづらいし、スニペットで受け取る変数も（個人的に）分かりづらいので、Code Snippetsでその辺はラップする感じで使いました。

というわけで、これで入力した位置にSNSボタンを表示させることが出来るショートコードが出来上がるわけです。
あとはショートコードを使って表示させ、CSSで色々位置とかを整えました。これにはこちらを大いに参考にさせていただきました。

さて、ここまでやったわけですが、いざいちいちPostsやらPagesに反映させるのはなんだかな、というやつで。
というわけで、後々のコードのリムーブ等のメンテナンス性も考えて、
3. Header and Footer
の出番です。
これはSetting画面から、どこにどういうコードを挿入するか選べるという優れもの。表示させたくないPageに関してはそのように設定することも出来ます。
そんな感じでセッティングし、完成したのが、この記事の上下にもあるSNSボタンです。
専用プラグインほどデザインは統一性がないですが、シェアボタンのソースがあるサイトならこの手法でだいぶ適用範囲を自由に出来ると思います。

できればカスタムボタンもしたいのですが、それは時間がかかりそうなので、またあとで。
以上、このブログでのSNSシェアボタン設置方法でした。

2016/12/06
色々と変更しましたので、ちょいと書き換え。

結局どうしたか

　この後いろいろ変更し、結局は別の方法で設置しました。こちらのほうがデザインも変更でき、便利です。