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

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

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

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

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

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

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

Contents

SNSシェア用のリンク先URLの考え方
SNSシェアボタンを設定したファイルを作成する
SNSシェアボタンを設定したファイルを配置する
シェアボタンを表示する
SNSシェアボタンをデザインする
【WordPress】SNSシェアボタンの完成

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ですよ♪

<div class="button-area">
  <div class="button-area-title">この記事をシェアする</div>
  <ul>
    <!--Twitter-->
    <li class="twitter">
      <a href="https://twitter.com/intent/tweet?text=<?php echo urlencode(get_the_title()); ?>&amp;url=<?php echo urlencode(get_permalink()); ?>"
      target="_blank" title="Twitterで共有">
        <i class="fa fa-twitter"></i>
      </a>
    </li>

    <!--FaceBook-->
    <li class="facebook">
      <a href="https://www.facebook.com/sharer.php?src=bm&u=<?php echo urlencode(get_permalink()); ?>&t=<?php echo urlencode(get_the_title()); ?>"         
      target="_blank" title="Facebookで共有">
        <i class="fa fa-facebook"></i>
      </a>
    </li>

    <!--はてなブックマーク-->
    <li class="hatena">
      <a href="https://b.hatena.ne.jp/add?mode=confirm&amp;url=<?php echo urlencode(get_permalink()); ?>&amp;title=<?php echo urlencode(get_the_title()); ?>"
      target="_blank" title="はてなブックマークに追加">
        <i class="fa fa-hatena"></i>
      </a>
    </li>
  
    <!--Poket-->
    <li class="pocket">
      <a href="https://getpocket.com/edit?url=<?php echo urlencode(get_permalink()); ?>"
      target="_blank" title="pocketで共有">
        <i class="fa fa-get-pocket"></i>
      </a>
    </li>
  </ul>
</div>

<div class="button-area-title">この記事をシェアする</div>

<ul>

<a href="https://twitter.com/intent/tweet?text=<?php echo urlencode(get_the_title()); ?>&url=<?php echo urlencode(get_permalink()); ?>"

target="_blank" title="Twitterで共有">

</a>

</li>

<a href="https://www.facebook.com/sharer.php?src=bm&u=<?php echo urlencode(get_permalink()); ?>&t=<?php echo urlencode(get_the_title()); ?>"

target="_blank" title="Facebookで共有">

</a>

</li>

<a href="https://b.hatena.ne.jp/add?mode=confirm&url=<?php echo urlencode(get_permalink()); ?>&title=<?php echo urlencode(get_the_title()); ?>"

target="_blank" title="はてなブックマークに追加">

</a>

</li>

<a href="https://getpocket.com/edit?url=<?php echo urlencode(get_permalink()); ?>"

target="_blank" title="pocketで共有">

</a>

</li>

</ul>

</div>

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

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

だちたま

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

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

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

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

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

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

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

シェアボタンを表示する

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

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

get_template_part( 'sns-share' );

1	get_template_part( 'sns-share' );

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

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

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

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

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

だちたま

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

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

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

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

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

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

/* はてなブックマークアイコン作成 */
.fa-hatena:before {
  content: "B!";
  font-family: Verdana;
  font-weight: bold
}

/* シェアボタンを表示する箇所位置調整 */
.button-area {
  text-align: center;
  margin-bottom:2em;
}

/* タイトル表示設定 */
.button-area-title {
  text-align: center;
  padding:1em;
}

/* SNSシェアボタンの共通設定 */
.button-area li a {
  font-size: 16px;
  padding: 8px;
  display: block;
  text-align: center;
  text-decoration: none;
  color: #fff;
  border-radius: 4px; /* 丸み調整 */
  box-shadow: 0px 2px 4px 0 rgba(0,0,0,.26); /* シャドー作成 */
}

/* SNSごとの背景色 */
.twitter a {
	background-color: #55acee;
}
.facebook a{
	background-color: #3b5998;
}
.hatena a{
	background-color: #008fde;
}
.pocket a{
	background-color: #ea5a6c;
}

/* リスト「・」の削除 */
.button-area ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ボタンの幅と余白を設定 */
.button-area li {
  float: left;
  width: 24%;
  margin: 0 0.5%;
}

.button-area  ul:after {
  display: block;
  clear: both;
  content: '';
}

/* ボタンにカーソルを合わせた時の表示設定 */
.button-area li a:hover {
  -ms-transform: translateY(4px);
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  box-shadow: none;
}

/* はてなブックマークアイコン作成 */

.fa-hatena:before {

content: "B!";

font-family: Verdana;

font-weight: bold

}

/* シェアボタンを表示する箇所位置調整 */

.button-area {

text-align: center;

margin-bottom:2em;

}

/* タイトル表示設定 */

.button-area-title {

text-align: center;

padding:1em;

}

/* SNSシェアボタンの共通設定 */

.button-area li a {

font-size: 16px;

padding: 8px;

display: block;

text-align: center;

text-decoration: none;

color: #fff;

border-radius: 4px; /* 丸み調整 */

box-shadow: 0px 2px 4px 0 rgba(0,0,0,.26); /* シャドー作成 */

}

/* SNSごとの背景色 */

.twitter a {

background-color: #55acee;

}

.facebook a{

background-color: #3b5998;

}

.hatena a{

background-color: #008fde;

}

.pocket a{

background-color: #ea5a6c;

}

/* リスト「・」の削除 */

.button-area ul {

margin: 0;

padding: 0;

list-style: none;

}

/* ボタンの幅と余白を設定 */

.button-area li {

float: left;

width: 24%;

margin: 0 0.5%;

}

.button-area ul:after {

display: block;

clear: both;

content: '';

}

/* ボタンにカーソルを合わせた時の表示設定 */

.button-area li a:hover {

-ms-transform: translateY(4px);

-webkit-transform: translateY(4px);

transform: translateY(4px);

box-shadow: none;

}

コードの解説

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