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

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

広告

使ったプラグイン

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

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

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

どうやって追加したか

を参考に、

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

<?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
色々と変更しましたので、ちょいと書き換え。

広告

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA