WordPress

【WordPress】SNSのシェアボタンをプラグインなしでカスタマイズ【コピペOK!】

こんにちは!だちたまです。

WordPressでは、SNSのシェアボタンをプラグイン使って設置することができますが、自分の好みのデザインに出会う確率は低いです。

それに、プラグインを使っているとブログ表示が重くなってしまう場合があります。

そこで、今回はSNSのシェアボタンを、プラグインなしでカスタマイズしてみました。

今回作成したのは、「Twitter」「Facebook」「はてなブックマーク」「Google+」「Pocket」のシェアボタンです。作成方法について書いていきたいと思います。

  • カスタマイズは自己責任でお願いします。
  • CSSのカスタマイズは子テーマを用意すると良いです。
  • カスタマイズ前にはバックアップをおすすめします。
  • コードを記入しても、環境によってうまく反映されない場合があるかもしれませんが、ご了承ください。
  • 「Google+」は2019年4 月にサービスが終了していますので、「Google+」のシェアボタンを自作するコードを削除しました。一部写真が古いままですが、ご了承ください。

SNSシェア用のリンク先URLの考え方

基礎知識として、各SNSのシェア用のリンク先は以下のURLとなっています。

これらを使ってソースコードを作成していきます。

だちたま
だちたま
こちらは深く考えず、サラッと流してしまってOKです。
  • Twitter
    https://twitter.com/intent/tweet?text=【投稿エリアに初期表示したい文字】&url=【シェアする記事のURL】
  • FaceBook
    https://www.facebook.com/sharer.php?src=bm&u=【シェアする記事のURL】&t=【投稿エリアに初期表示したい文字】
  • はてなブックマーク
    https://b.hatena.ne.jp/add?mode=confirm&url=【シェアする記事のURL】&title=【シェアする記事のタイトル】
  • Pocket
    https://getpocket.com/edit?url=【シェアする記事のURL】

SNSシェアボタンを設定したファイルを作成する

では、上記のURLを使いつつ、シェアボタンを設定したphpファイルを作成していきましょう。

ファイル名は何でも良いですが、私の場合は便宜上「sns-share.php」としました。

ファイルの内容は以下のとおりです。コピペでOKですよ♪

なお、各SNSのアイコンの表示には、「FontAwesome」のWebフォントを使用しています。

ただし、はてなブックマークだけFontAwesomeのWebフォントが用意されていないので、自作しています。これについては後述しますね。

だちたま
だちたま
「FontAwesome」を記事中に使いたい場合には、プラグイン「Font Awesome 4 Menus」を導入しましょう。

導入の仕方は、以下のリンクから「Font Awesome 4 Menusの使い方」の【1】をご覧ください。

インストールして「有効化」しておくと、記事中にショートコードを入力するだけで「FontAwesome」のWebフォントを表示できるようになります。

wordpress-アイキャッチ画像
WordPressのグローバルメニューにアイコンを表示するプラグインを実際に使って検証してみた! WordPressのブログデザインのカスタマイズにあたり、グローバルメニューの見出しにアイコンを表示する方法を探していたところ、以下...

SNSシェアボタンを設定したファイルを配置する

作成した「sns-share.php」ファイルを以下のフォルダに格納します。あらかじめ子テーマを作成しておくと良いです。

sns-shar.phpの格納フォルダ
public_html/wp-content/themes/子テーマ

シェアボタンを表示する

それでは、作成した「sns-share.php」を記事に呼び出すことで、シェアボタンを表示してみましょう。

表示したい場所に以下のコードを追加すると、シェアボタンを表示することができます。

私の場合は、ブログ記事を書き終わった後にシェアボタンを表示することにしました。

私のカスタマイズした時のテーマは「Twenty Seventeen」でしたが、このテーマでは「content.php」内にコードを追加することで、上手く表示されました。

content.phpの格納フォルダ
public_html/wp-content/themes/子テーマ/template-parts/post

なお、コードを追加した場所は以下の場所です。

ここまでで、ブログ記事に以下の様にシェアボタンの原型が表示されるようになりました。

だちたま
だちたま
アイコンは表示されたけど、まだデザインを整える必要がありますね!

画像を見るとはてなブックマークのみ表示されていませんが、ここからCSSデザインすることで表示されるようになりますので、ご安心ください。

では、ボタンのデザインを整えていきましょう。

「Google+」は2019年4 月にサービスが終了していますので、「Google+」のシェアボタンを自作するコードを削除しました。一部写真が古いままですが、ご了承ください。

SNSシェアボタンをデザインする

デザインの修正は、「style.css」を修正していきます。以下のコードを追加してみてください。

コードの解説

  • 1行目から6行目で「はてなブックマーク」のアイコンを自作しています。公式のアイコンに近いフォントを太字にして使用しています。
  • 20行目から30行目では、シェアボタンの共通の表示設定を行っています。少し丸みを持たせて、影を表示するようにしました。
  • 53行目から58行目では、ボタンの表示幅と余白を設定しています。レスポンシブデザインにしており、ブラウザの幅を狭くするとボタンの幅も狭くなるようになっています。
  • 67行目から72行目では、カーソルをシェアボタンに重ねた時、ボタンを押すような動作にしました。

【WordPress】SNSシェアボタンの完成

これまでの対応で、このようにブログ記事にSNSのシェアボタンを表示することができました。

だちたま
だちたま
プラグインなしでSNSシェアボタンを作成しておくと、デザインに飽きたらCSSをいじって改めてデザインを変更することができるので、自由度が高くて良いですよ♪

SNSのシェアボタンを作ってみたい方は参考にしてみてくださいね。