WP Social Bookmarking Lightで不具合が出て外したきりだったので、自分でシェアボタンを付けました。

2017年7月30日

sharebutton

WP Social Bookmarking Lightというプラグインを更新したらいきなりエラーが出て、ダッシュボードにすら入れなかったんですよ。

別にプラグインが悪いとか言うわけではないんですが、LINEでのシェアボタンがなかったし、やっぱりまたエラー出るの怖いしというわけで、自分で付けてみることにしました。

 

ページの構造が分かってきましたし、コード結構読めるようにはなりましたからね。

漢字読めるけど書けないってヤツです。

 

というわけで今回の記事はソーシャルボタンをプラグイン無しで実装するという記事です。

 

シェアボタンをプラグイン無しで実装する

 

最初はもちろん、新しいプラグインを探していたんですよね。

理由は前述したとおり、LINEのシェアボタンがWP Social Bookmarking Lightにはなかったから。

 

色々調べているうちに「別にシェアボタンなんかプラグイン無しで実装しようよ」という記事が結構多いと気づいたんです。

 

というわけでなるべく、上位ページかつ最近の記事を探していたら素晴らしい記事がありました。

 

WordPressでツイッターやフェイスブック等SNSのシェアボタンを設置する方法(プラグインなし)

 

WEBデザイナーの人らしいですね。

しかも最終更新日時が2017年7月20日と最近も最近。

 

というわけで、いつも通り遠慮なくコピペする方向でいきます。

 

  1. テンプレートファイルにボタンコードをコピペ
  2. 投稿記事ページ(single.php)にコピペしようとしたところ、子テーマが作られていなかった
  3. single.phpをChild Theme Configuratorというテーマで子テーマ化
  4. 記事下にボタンコードをコピペ
  5. あらかじめ子テーマが作成されていたスタイルシートにCSSコードをコピペ
  6. single.phpのボタンコードに&via=Kaede_phを追加

 

ひとまずこれで完了という感じです。

CSS

 

 

一応コードを追加する画像も貼っておきます。

他にも色々と細かい設定が乗っている記事ですが、僕が追加したのはこの設定だけですね。

 

終わりに

 

シェアボタンの実装は簡単だったし、LINEボタンを付けられて満足でした。

ただやはり結構色々いじっているから簡単にできるというわけで、初心者の人だとこういった記事を見ながらやっても大変でしょう。

 

知っている前提の知識って端折って書いてありますし、色々とコードを弄るのは不安がありますからね。

こういうの付けるたびに毎回思うんですけど、CSSで光沢とグラデーション付けたいんですよね。

ただ時間かかるし、まだデザインに凝る余裕がないので見送っています。